mirror of
https://github.com/gradio-app/gradio.git
synced 2025-03-31 12:20:26 +08:00
Fix responsive issues with docs, guides and changelog (#4833)
* fix right nav bar docs * make guides responsive * make changelog responsive * much better side navbar
This commit is contained in:
Ali Abdalla
GitHub
parent
3222688f7a
commit
1d1dba1851
@ -54,7 +54,7 @@
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<div class="w-10/12 mx-auto">
|
||||
<div class="prose text-lg max-w-full">{@html content}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
const anchor = document.getElementById(anchorId);
|
||||
window.scrollTo({
|
||||
top: anchor?.offsetTop,
|
||||
behavior: "smooth"
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
|
||||
@ -72,453 +72,462 @@
|
||||
<svelte:window bind:scrollY={y} />
|
||||
|
||||
<main class="container mx-auto px-4 flex gap-4">
|
||||
<DocsNav
|
||||
current_nav_link={obj.name.toLowerCase()}
|
||||
{components}
|
||||
{helpers}
|
||||
{routes}
|
||||
{py_client}
|
||||
/>
|
||||
<div class="flex">
|
||||
<DocsNav
|
||||
current_nav_link={obj.name.toLowerCase()}
|
||||
{components}
|
||||
{helpers}
|
||||
{routes}
|
||||
{py_client}
|
||||
/>
|
||||
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
<p
|
||||
class="bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
|
||||
>
|
||||
New to Gradio? Start here: <a class="link" href="/quickstart"
|
||||
>Getting Started</a
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
<p
|
||||
class="bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left lg:ml-10"
|
||||
>
|
||||
</p>
|
||||
<p
|
||||
class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
|
||||
>
|
||||
See the <a class="link" href="/changelog">Release History</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between mt-4">
|
||||
{#if obj.prev_obj}
|
||||
<a
|
||||
href="/docs/{obj.prev_obj.toLowerCase()}"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
New to Gradio? Start here: <a class="link" href="/quickstart"
|
||||
>Getting Started</a
|
||||
>
|
||||
</p>
|
||||
<p
|
||||
class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span>
|
||||
{obj.prev_obj.replace("-", " ")}
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<div />
|
||||
{/if}
|
||||
{#if obj.next_obj}
|
||||
<a
|
||||
href="/docs/{obj.next_obj.toLowerCase()}"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
{obj.next_obj.replace("-", " ")}
|
||||
<span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<div />
|
||||
{/if}
|
||||
</div>
|
||||
See the <a class="link" href="/changelog">Release History</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div class="lg:w-3/4 lg:ml-10 lg:mr-24">
|
||||
<div class="obj" id={obj.slug}>
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h3 id="{obj.slug}-header" class="group text-3xl font-light py-4">
|
||||
{obj.name}
|
||||
<a
|
||||
href="#{obj.slug}-header"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{#if obj.override_signature}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.override_signature}</code
|
||||
></pre>
|
||||
<div class="flex justify-between mt-4 lg:ml-10">
|
||||
{#if obj.prev_obj}
|
||||
<a
|
||||
href="/docs/{obj.prev_obj.toLowerCase()}"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span>
|
||||
{obj.prev_obj.replace("-", " ")}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.parent}.<span>{obj.name}(</span
|
||||
><!--
|
||||
</a>
|
||||
{:else}
|
||||
<div />
|
||||
{/if}
|
||||
{#if obj.next_obj}
|
||||
<a
|
||||
href="/docs/{obj.next_obj.toLowerCase()}"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
{obj.next_obj.replace("-", " ")}
|
||||
<span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<div />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div class="lg:ml-10">
|
||||
<div class="obj" id={obj.slug}>
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h3 id="{obj.slug}-header" class="group text-3xl font-light py-4">
|
||||
{obj.name}
|
||||
<a
|
||||
href="#{obj.slug}-header"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{#if obj.override_signature}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.override_signature}</code
|
||||
></pre>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.parent}.<span>{obj.name}(</span
|
||||
><!--
|
||||
-->{#each obj.parameters as param}<!--
|
||||
-->{#if !("kwargs" in param) && !("default" in param) && param.name != "self"}<!--
|
||||
-->{param.name}, <!--
|
||||
-->{/if}<!--
|
||||
-->{/each}<!--
|
||||
-->···<span
|
||||
>)</span
|
||||
></code
|
||||
></pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if mode === "components"}
|
||||
<div class="embedded-component">
|
||||
{#key obj.name}
|
||||
<gradio-app
|
||||
space={"gradio/" + obj.name.toLowerCase() + "_component_main"}
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div id="description">
|
||||
<h4 class="mt-8 text-xl text-orange-500 font-light group">
|
||||
Description
|
||||
<a
|
||||
href="#description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">{@html obj.description}</p>
|
||||
</div>
|
||||
|
||||
{#if mode === "components"}
|
||||
<div id="behavior">
|
||||
<h4 class="mt-4 text-xl text-orange-500 font-light group">
|
||||
Behavior
|
||||
<a href="#behavior" class="invisible group-hover-visible"
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<p class="text-lg text-gray-500">
|
||||
<span class="text-gray-700">As input: </span>
|
||||
{@html obj.preprocessing}
|
||||
</p>
|
||||
<p class="text-lg text-gray-500">
|
||||
<span class="text-gray-700">As output:</span>
|
||||
{@html obj.postprocessing}
|
||||
</p>
|
||||
{#if obj.examples_format}
|
||||
<p class="text-lg text-gray-500">
|
||||
<span class="text-gray-700"
|
||||
>Format expected for examples:</span
|
||||
>
|
||||
{@html obj.examples_format}}
|
||||
</p>
|
||||
{/if}
|
||||
{#if obj.events && obj.events.length > 0}
|
||||
<p class="text-lg text-gray-500">
|
||||
<span class="text-gray-700">Supported events:</span>
|
||||
<em>{@html obj.events}</em>
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.example}
|
||||
<div id="example-usage">
|
||||
<h4 class="mt-4 text-xl text-orange-500 font-light group">
|
||||
Example Usage
|
||||
<a
|
||||
href="#example-usage"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3 mt-2">
|
||||
<pre><code class="code language-python"
|
||||
>{@html obj.highlighted_example}</code
|
||||
>)</span
|
||||
></code
|
||||
></pre>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if (obj.parameters.length > 0 && obj.parameters[0].name != "self") || obj.parameters.length > 1}
|
||||
<div id="initialization">
|
||||
<h4 class="mt-6 text-xl text-orange-500 font-light group">
|
||||
Initialization
|
||||
<a href="#initialization" class="invisible group-hover-visible"
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<table class="table-fixed w-full leading-loose">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 w-2/5 text-gray-700 font-semibold"
|
||||
>Parameter</th
|
||||
>
|
||||
<th class="px-3 pb-3 text-gray-700 font-semibold"
|
||||
>Description</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
|
||||
>
|
||||
{#each obj.parameters as param}
|
||||
{#if param["name"] != "self"}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<code class="block">
|
||||
{param["name"]}
|
||||
</code>
|
||||
<p class="text-gray-500 italic">
|
||||
{param["annotation"]}
|
||||
</p>
|
||||
{#if "default" in param}
|
||||
<p class="text-gray-500 font-semibold">
|
||||
default: {param["default"]}
|
||||
</p>
|
||||
{:else if !("kwargs" in param)}
|
||||
<p class="text-orange-600 font-semibold italic">
|
||||
required
|
||||
</p>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
<p>{param["doc"] || ""}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
{#if mode === "components"}
|
||||
<div class="embedded-component">
|
||||
{#key obj.name}
|
||||
<gradio-app
|
||||
space={"gradio/" +
|
||||
obj.name.toLowerCase() +
|
||||
"_component_main"}
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if mode === "components" && obj.string_shortcuts}
|
||||
<div id="shortcuts">
|
||||
<h4 class="mt-6 text-xl text-orange-500 font-light group">
|
||||
Shortcuts
|
||||
<div id="description">
|
||||
<h4 class="mt-8 text-xl text-orange-500 font-light group">
|
||||
Description
|
||||
<a
|
||||
href="#shortcuts"
|
||||
href="#description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<table class="mb-4 table-fixed w-full">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 text-gray-700 font-semibold w-2/5"
|
||||
>Class</th
|
||||
>
|
||||
<th class="px-3 pb-3 text-gray-700 font-semibold"
|
||||
>Interface String Shortcut</th
|
||||
>
|
||||
<th class="px-3 pb-3 text-gray-700 font-semibold"
|
||||
>Initialization</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
|
||||
>
|
||||
{#each obj.string_shortcuts as shortcut}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>
|
||||
<code class="lang-python">gradio.{shortcut[0]}</code>
|
||||
</p>
|
||||
</td>
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>"{shortcut[1]}"</p>
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
{shortcut[2]}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="mb-2 text-lg text-gray-600">{@html obj.description}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.demos}
|
||||
<div id="demos">
|
||||
<div class="category my-8" id="examples">
|
||||
<h4 class="text-xl text-orange-500 font-light group">
|
||||
Demos
|
||||
{#if mode === "components"}
|
||||
<div id="behavior">
|
||||
<h4 class="mt-4 text-xl text-orange-500 font-light group">
|
||||
Behavior
|
||||
<a href="#behavior" class="invisible group-hover-visible"
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<p class="text-lg text-gray-500">
|
||||
<span class="text-gray-700">As input: </span>
|
||||
{@html obj.preprocessing}
|
||||
</p>
|
||||
<p class="text-lg text-gray-500">
|
||||
<span class="text-gray-700">As output:</span>
|
||||
{@html obj.postprocessing}
|
||||
</p>
|
||||
{#if obj.examples_format}
|
||||
<p class="text-lg text-gray-500">
|
||||
<span class="text-gray-700"
|
||||
>Format expected for examples:</span
|
||||
>
|
||||
{@html obj.examples_format}}
|
||||
</p>
|
||||
{/if}
|
||||
{#if obj.events && obj.events.length > 0}
|
||||
<p class="text-lg text-gray-500">
|
||||
<span class="text-gray-700">Supported events:</span>
|
||||
<em>{@html obj.events}</em>
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.example}
|
||||
<div id="example-usage">
|
||||
<h4 class="mt-4 text-xl text-orange-500 font-light group">
|
||||
Example Usage
|
||||
<a
|
||||
href="#demos"
|
||||
href="#example-usage"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div>
|
||||
<div class="demo-window overflow-y-auto h-full w-full mb-4">
|
||||
<div
|
||||
class="relative mx-auto my-auto rounded-md bg-white"
|
||||
style="top: 5%; height: 90%"
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3 mt-2">
|
||||
<pre><code class="code language-python"
|
||||
>{@html obj.highlighted_example}</code
|
||||
></pre>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if (obj.parameters.length > 0 && obj.parameters[0].name != "self") || obj.parameters.length > 1}
|
||||
<div id="initialization">
|
||||
<h4 class="mt-6 text-xl text-orange-500 font-light group">
|
||||
Initialization
|
||||
<a
|
||||
href="#initialization"
|
||||
class="invisible group-hover-visible"
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<table class="table-fixed w-full leading-loose">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 w-2/5 text-gray-700 font-semibold"
|
||||
>Parameter</th
|
||||
>
|
||||
<th class="px-3 pb-3 text-gray-700 font-semibold"
|
||||
>Description</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
|
||||
>
|
||||
{#each obj.parameters as param}
|
||||
{#if param["name"] != "self"}
|
||||
<tr
|
||||
class="group hover:bg-gray-200/60 odd:bg-gray-100/80"
|
||||
>
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<code class="block">
|
||||
{param["name"]}
|
||||
</code>
|
||||
<p class="text-gray-500 italic">
|
||||
{param["annotation"]}
|
||||
</p>
|
||||
{#if "default" in param}
|
||||
<p class="text-gray-500 font-semibold">
|
||||
default: {param["default"]}
|
||||
</p>
|
||||
{:else if !("kwargs" in param)}
|
||||
<p class="text-orange-600 font-semibold italic">
|
||||
required
|
||||
</p>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
<p>{param["doc"] || ""}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if mode === "components" && obj.string_shortcuts}
|
||||
<div id="shortcuts">
|
||||
<h4 class="mt-6 text-xl text-orange-500 font-light group">
|
||||
Shortcuts
|
||||
<a
|
||||
href="#shortcuts"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<table class="mb-4 table-fixed w-full">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 text-gray-700 font-semibold w-2/5"
|
||||
>Class</th
|
||||
>
|
||||
<th class="px-3 pb-3 text-gray-700 font-semibold"
|
||||
>Interface String Shortcut</th
|
||||
>
|
||||
<th class="px-3 pb-3 text-gray-700 font-semibold"
|
||||
>Initialization</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
|
||||
>
|
||||
{#each obj.string_shortcuts as shortcut}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>
|
||||
<code class="lang-python">gradio.{shortcut[0]}</code
|
||||
>
|
||||
</p>
|
||||
</td>
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>"{shortcut[1]}"</p>
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
{shortcut[2]}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.demos}
|
||||
<div id="demos">
|
||||
<div class="category my-8" id="examples">
|
||||
<h4 class="text-xl text-orange-500 font-light group">
|
||||
Demos
|
||||
<a
|
||||
href="#demos"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
<div class="flex overflow-auto pt-4">
|
||||
</h4>
|
||||
<div>
|
||||
<div class="demo-window overflow-y-auto h-full w-full mb-4">
|
||||
<div
|
||||
class="relative mx-auto my-auto rounded-md bg-white"
|
||||
style="top: 5%; height: 90%"
|
||||
>
|
||||
<div class="flex overflow-auto pt-4">
|
||||
{#each obj.demos as demo, i}
|
||||
<button
|
||||
on:click={() => (current_selection = i)}
|
||||
class:selected-demo-tab={current_selection == i}
|
||||
class="demo-btn px-4 py-2 text-lg min-w-max text-gray-600 hover:text-orange-500"
|
||||
name={demo[0]}>{demo[0]}</button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
{#each obj.demos as demo, i}
|
||||
<button
|
||||
on:click={() => (current_selection = i)}
|
||||
class:selected-demo-tab={current_selection == i}
|
||||
class="demo-btn px-4 py-2 text-lg min-w-max text-gray-600 hover:text-orange-500"
|
||||
name={demo[0]}>{demo[0]}</button
|
||||
<div
|
||||
class:hidden={current_selection !== i}
|
||||
class:selected-demo-window={current_selection == i}
|
||||
class="demo-content px-4"
|
||||
>
|
||||
<Demos
|
||||
name={demo[0]}
|
||||
code={demo[1]}
|
||||
highlighted_code={demo[2]}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{#each obj.demos as demo, i}
|
||||
<div
|
||||
class:hidden={current_selection !== i}
|
||||
class:selected-demo-window={current_selection == i}
|
||||
class="demo-content px-4"
|
||||
>
|
||||
<Demos
|
||||
name={demo[0]}
|
||||
code={demo[1]}
|
||||
highlighted_code={demo[2]}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if obj.fns && obj.fns.length > 0}
|
||||
<div id="methods">
|
||||
<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
|
||||
Methods
|
||||
<a
|
||||
href="#methods"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
{#each obj.fns as fn}
|
||||
<FunctionDoc {fn} parent={obj.name} />
|
||||
{/each}
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.guides && obj.guides.length > 0}
|
||||
<div id="guides">
|
||||
<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
|
||||
Guides
|
||||
<a
|
||||
href="#guides"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div
|
||||
class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4 pb-3 px-3"
|
||||
>
|
||||
{#each obj.guides as guide, i}
|
||||
{#if obj.fns && obj.fns.length > 0}
|
||||
<div id="methods">
|
||||
<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
|
||||
Methods
|
||||
<a
|
||||
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
|
||||
.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
|
||||
target="_blank"
|
||||
href={guide.url}
|
||||
href="#methods"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
<div class="flex flex-col p-4 h-min">
|
||||
<p class="group-hover:underline text-l">
|
||||
{guide.pretty_name}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="float-right mt-10 hidden lg:block">
|
||||
<div class="fixed">
|
||||
<div class="mx-8">
|
||||
<a
|
||||
class="thin-link py-2 block text-lg"
|
||||
href="#{obj.slug}"
|
||||
on:click={handleAnchorClick}>{obj.name}</a
|
||||
>
|
||||
{#if headers.length > 0}
|
||||
<ul class="text-slate-700 text-lg leading-6">
|
||||
{#each headers as header}
|
||||
<li>
|
||||
<a
|
||||
bind:this={header_targets[header[1]]}
|
||||
href="#{header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>{header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{#if method_headers.length > 0}
|
||||
{#each method_headers as method_header}
|
||||
<li class="">
|
||||
<a
|
||||
bind:this={header_targets[method_header[1]]}
|
||||
href="#{method_header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link sub-link"
|
||||
on:click={handleAnchorClick}
|
||||
>    {method_header[0]}</a
|
||||
>
|
||||
</li>
|
||||
</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
{#each obj.fns as fn}
|
||||
<FunctionDoc {fn} parent={obj.name} />
|
||||
{/each}
|
||||
{/if}
|
||||
{#if obj.guides && obj.guides.length > 0}
|
||||
<li>
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.guides && obj.guides.length > 0}
|
||||
<div id="guides">
|
||||
<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
|
||||
Guides
|
||||
<a
|
||||
href="#guides"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div
|
||||
class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4 pb-3 px-3"
|
||||
>
|
||||
{#each obj.guides as guide, i}
|
||||
<a
|
||||
bind:this={header_targets["guides"]}
|
||||
href="#guides"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>Guides</a
|
||||
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
|
||||
.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
|
||||
target="_blank"
|
||||
href={guide.url}
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
<div class="flex flex-col p-4 h-min">
|
||||
<p class="group-hover:underline text-l">
|
||||
{guide.pretty_name}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between my-4">
|
||||
{#if obj.prev_obj}
|
||||
<a
|
||||
href="/docs/{obj.prev_obj.toLowerCase()}"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span>
|
||||
{obj.prev_obj.replace("-", " ")}
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<div />
|
||||
{/if}
|
||||
{#if obj.next_obj}
|
||||
<a
|
||||
href="/docs/{obj.next_obj.toLowerCase()}"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
{obj.next_obj.replace("-", " ")}
|
||||
<span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<div />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between my-4">
|
||||
{#if obj.prev_obj}
|
||||
<div
|
||||
class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:block"
|
||||
>
|
||||
<div class="mx-8">
|
||||
<a
|
||||
href="/docs/{obj.prev_obj.toLowerCase()}"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
class="thin-link py-2 block text-lg"
|
||||
href="#{obj.slug}"
|
||||
on:click={handleAnchorClick}>{obj.name}</a
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span>
|
||||
{obj.prev_obj.replace("-", " ")}
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<div />
|
||||
{/if}
|
||||
{#if obj.next_obj}
|
||||
<a
|
||||
href="/docs/{obj.next_obj.toLowerCase()}"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
{obj.next_obj.replace("-", " ")}
|
||||
<span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<div />
|
||||
{/if}
|
||||
{#if headers.length > 0}
|
||||
<ul class="text-slate-700 text-lg leading-6">
|
||||
{#each headers as header}
|
||||
<li>
|
||||
<a
|
||||
bind:this={header_targets[header[1]]}
|
||||
href="#{header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>{header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{#if method_headers.length > 0}
|
||||
{#each method_headers as method_header}
|
||||
<li class="">
|
||||
<a
|
||||
bind:this={header_targets[method_header[1]]}
|
||||
href="#{method_header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link sub-link"
|
||||
on:click={handleAnchorClick}
|
||||
>    {method_header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if obj.guides && obj.guides.length > 0}
|
||||
<li>
|
||||
<a
|
||||
bind:this={header_targets["guides"]}
|
||||
href="#guides"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>Guides</a
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -62,421 +62,434 @@
|
||||
<svelte:window bind:scrollY={y} />
|
||||
|
||||
<main class="container mx-auto px-4 flex gap-4">
|
||||
<DocsNav
|
||||
current_nav_link={"block-layouts"}
|
||||
{components}
|
||||
{helpers}
|
||||
{routes}
|
||||
{py_client}
|
||||
/>
|
||||
<div class="flex">
|
||||
<DocsNav
|
||||
current_nav_link={"block-layouts"}
|
||||
{components}
|
||||
{helpers}
|
||||
{routes}
|
||||
{py_client}
|
||||
/>
|
||||
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
<p
|
||||
class="bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
|
||||
>
|
||||
New to Gradio? Start here: <a class="link" href="/quickstart"
|
||||
>Getting Started</a
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
<p
|
||||
class="lg:ml-10 bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
|
||||
>
|
||||
</p>
|
||||
<p
|
||||
class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
|
||||
>
|
||||
See the <a class="link" href="/changelog">Release History</a>
|
||||
</p>
|
||||
</div>
|
||||
New to Gradio? Start here: <a class="link" href="/quickstart"
|
||||
>Getting Started</a
|
||||
>
|
||||
</p>
|
||||
<p
|
||||
class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
|
||||
>
|
||||
See the <a class="link" href="/changelog">Release History</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between mt-4">
|
||||
<a
|
||||
href="/docs/blocks"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> Blocks
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/chatinterface"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
ChatInterface <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex justify-between mt-4 lg:ml-10">
|
||||
<a
|
||||
href="/docs/blocks"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> Blocks
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/chatinterface"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
ChatInterface <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div class="lg:w-3/4 lg:ml-10 lg:mr-24">
|
||||
<div class="obj" id="block-layouts" />
|
||||
<div class="flex flex-row">
|
||||
<div class="lg:ml-10">
|
||||
<div class="obj" id="block-layouts" />
|
||||
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h3 id="block-layouts-header" class="group text-3xl font-light pt-4">
|
||||
Block Layouts
|
||||
<a
|
||||
href="#block-layouts-header"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h3
|
||||
id="block-layouts-header"
|
||||
class="group text-3xl font-light pt-4"
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
Block Layouts
|
||||
<a
|
||||
href="#block-layouts-header"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<h4 class="mt-4 text-xl text-orange-500 font-light group">
|
||||
Description
|
||||
<a
|
||||
href="#description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">{@html description}</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<h4 class="mt-4 text-xl text-orange-500 font-light group">
|
||||
Description
|
||||
<a
|
||||
href="#description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">{@html description}</p>
|
||||
</div>
|
||||
|
||||
{#each objs as obj}
|
||||
<div class="obj" id={obj.slug}>
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h3 id={obj.slug} class="group text-3xl font-light py-4">
|
||||
{obj.name}
|
||||
<a
|
||||
href="#{obj.slug}"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{#if obj.override_signature}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.override_signature}</code
|
||||
></pre>
|
||||
{#each objs as obj}
|
||||
<div class="obj" id={obj.slug}>
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h3 id={obj.slug} class="group text-3xl font-light py-4">
|
||||
{obj.name}
|
||||
<a
|
||||
href="#{obj.slug}"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.parent}.<span>{obj.name}(</span
|
||||
><!--
|
||||
|
||||
{#if obj.override_signature}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.override_signature}</code
|
||||
></pre>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.parent}.<span>{obj.name}(</span
|
||||
><!--
|
||||
-->{#each obj.parameters as param}<!--
|
||||
-->{#if !("kwargs" in param) && !("default" in param) && param.name != "self"}<!--
|
||||
-->{param.name}, <!--
|
||||
-->{/if}<!--
|
||||
-->{/each}<!--
|
||||
-->···<span
|
||||
>)</span
|
||||
></code
|
||||
></pre>
|
||||
</div>
|
||||
{/if}
|
||||
>)</span
|
||||
></code
|
||||
></pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if mode === "components"}
|
||||
<div class="embedded-component">
|
||||
{#key obj.name}
|
||||
<gradio-app
|
||||
space={"gradio/" +
|
||||
obj.name.toLowerCase() +
|
||||
"_component_main"}
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
{/if}
|
||||
{#if mode === "components"}
|
||||
<div class="embedded-component">
|
||||
{#key obj.name}
|
||||
<gradio-app
|
||||
space={"gradio/" +
|
||||
obj.name.toLowerCase() +
|
||||
"_component_main"}
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<h4
|
||||
class="mt-8 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-description"
|
||||
>
|
||||
Description
|
||||
<a
|
||||
href="#{obj.name}-description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
<h4
|
||||
class="mt-8 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-description"
|
||||
>
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">{@html obj.description}</p>
|
||||
Description
|
||||
<a
|
||||
href="#{obj.name}-description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">{@html obj.description}</p>
|
||||
|
||||
{#if mode === "components"}
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500">As input: </span>
|
||||
{@html obj.preprocessing}
|
||||
</p>
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500">As output:</span>
|
||||
{@html obj.postprocessing}
|
||||
</p>
|
||||
{#if obj.examples_format}
|
||||
{#if mode === "components"}
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500"
|
||||
>Format expected for examples:</span
|
||||
>
|
||||
{@html obj.examples_format}}
|
||||
<span class="text-orange-500">As input: </span>
|
||||
{@html obj.preprocessing}
|
||||
</p>
|
||||
{/if}
|
||||
{#if obj.events && obj.events.length > 0}
|
||||
<p class="text-lg text-gray-500">
|
||||
<span class="text-orange-500">Supported events:</span>
|
||||
<em>{@html obj.events}</em>
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500">As output:</span>
|
||||
{@html obj.postprocessing}
|
||||
</p>
|
||||
{#if obj.examples_format}
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500"
|
||||
>Format expected for examples:</span
|
||||
>
|
||||
{@html obj.examples_format}}
|
||||
</p>
|
||||
{/if}
|
||||
{#if obj.events && obj.events.length > 0}
|
||||
<p class="text-lg text-gray-500">
|
||||
<span class="text-orange-500">Supported events:</span>
|
||||
<em>{@html obj.events}</em>
|
||||
</p>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if obj.example}
|
||||
<h4
|
||||
class="mt-4 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-example-usage"
|
||||
>
|
||||
Example Usage
|
||||
<a
|
||||
href="#{obj.name}-example-usage"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
{#if obj.example}
|
||||
<h4
|
||||
class="mt-4 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-example-usage"
|
||||
>
|
||||
</h4>
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3 mt-2">
|
||||
<pre><code class="code language-python"
|
||||
>{@html obj.highlighted_example}</code
|
||||
></pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if (obj.parameters.length > 0 && obj.parameters[0].name != "self") || obj.parameters.length > 1}
|
||||
<h4
|
||||
class="mt-6 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-initialization"
|
||||
>
|
||||
Initialization
|
||||
<a
|
||||
href="#{obj.name}-initialization"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<table class="table-fixed w-full leading-loose">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 font-semibold w-2/5">Parameter</th>
|
||||
<th class="px-3 pb-3 font-semibold">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
|
||||
>
|
||||
{#each obj.parameters as param}
|
||||
{#if param["name"] != "self"}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<code class="block">
|
||||
{param["name"]}
|
||||
</code>
|
||||
<p class="text-gray-500 italic">
|
||||
{param["annotation"]}
|
||||
</p>
|
||||
{#if "default" in param}
|
||||
<p class="text-gray-500 font-semibold">
|
||||
default: {param["default"]}
|
||||
</p>
|
||||
{:else if !("kwargs" in param)}
|
||||
<p class="text-orange-600 font-semibold italic">
|
||||
required
|
||||
</p>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
<p>{param["doc"] || ""}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if mode === "components" && obj.string_shortcuts}
|
||||
<table class="mb-4 table-fixed w-full mt-6">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="p-3 font-semibold w-2/5">Class</th>
|
||||
<th class="p-3 font-semibold">Interface String Shortcut</th>
|
||||
<th class="p-3 font-semibold">Initialization</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
|
||||
>
|
||||
{#each obj.string_shortcuts as shortcut}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>
|
||||
<code class="lang-python">gradio.{shortcut[0]}</code>
|
||||
</p>
|
||||
</td>
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>"{shortcut[1]}"</p>
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
{shortcut[2]}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if obj.fns && obj.fns.length > 0}
|
||||
<h4 class="mt-4 p-3 font-semibold">Methods</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
{#each obj.fns as fn}
|
||||
<FunctionDoc {fn} parent={obj.name} />
|
||||
{/each}
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.guides && obj.guides.length > 0}
|
||||
<div id="guides">
|
||||
<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
|
||||
Guides
|
||||
Example Usage
|
||||
<a
|
||||
href="#guides"
|
||||
href="#{obj.name}-example-usage"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div
|
||||
class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4 pb-3 px-3"
|
||||
>
|
||||
{#each obj.guides as guide, i}
|
||||
<a
|
||||
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
|
||||
.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
|
||||
target="_blank"
|
||||
href={guide.url}
|
||||
>
|
||||
<div class="flex flex-col p-4 h-min">
|
||||
<p class="group-hover:underline text-l">
|
||||
{guide.pretty_name}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3 mt-2">
|
||||
<pre><code class="code language-python"
|
||||
>{@html obj.highlighted_example}</code
|
||||
></pre>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if obj.demos}
|
||||
<div id="examples">
|
||||
<div class="category my-8" id="examples">
|
||||
<h2
|
||||
class="group mb-4 text-2xl font-thin block"
|
||||
id="{obj.name}-examples"
|
||||
{#if (obj.parameters.length > 0 && obj.parameters[0].name != "self") || obj.parameters.length > 1}
|
||||
<h4
|
||||
class="mt-6 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-initialization"
|
||||
>
|
||||
Initialization
|
||||
<a
|
||||
href="#{obj.name}-initialization"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
✨ {obj.name} Examples
|
||||
</h4>
|
||||
<table class="table-fixed w-full leading-loose">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 font-semibold w-2/5">Parameter</th>
|
||||
<th class="px-3 pb-3 font-semibold">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
|
||||
>
|
||||
{#each obj.parameters as param}
|
||||
{#if param["name"] != "self"}
|
||||
<tr
|
||||
class="group hover:bg-gray-200/60 odd:bg-gray-100/80"
|
||||
>
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<code class="block">
|
||||
{param["name"]}
|
||||
</code>
|
||||
<p class="text-gray-500 italic">
|
||||
{param["annotation"]}
|
||||
</p>
|
||||
{#if "default" in param}
|
||||
<p class="text-gray-500 font-semibold">
|
||||
default: {param["default"]}
|
||||
</p>
|
||||
{:else if !("kwargs" in param)}
|
||||
<p class="text-orange-600 font-semibold italic">
|
||||
required
|
||||
</p>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
<p>{param["doc"] || ""}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if mode === "components" && obj.string_shortcuts}
|
||||
<table class="mb-4 table-fixed w-full mt-6">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="p-3 font-semibold w-2/5">Class</th>
|
||||
<th class="p-3 font-semibold"
|
||||
>Interface String Shortcut</th
|
||||
>
|
||||
<th class="p-3 font-semibold">Initialization</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
|
||||
>
|
||||
{#each obj.string_shortcuts as shortcut}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>
|
||||
<code class="lang-python">gradio.{shortcut[0]}</code
|
||||
>
|
||||
</p>
|
||||
</td>
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>"{shortcut[1]}"</p>
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
{shortcut[2]}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if obj.fns && obj.fns.length > 0}
|
||||
<h4 class="mt-4 p-3 font-semibold">Methods</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
{#each obj.fns as fn}
|
||||
<FunctionDoc {fn} parent={obj.name} />
|
||||
{/each}
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.guides && obj.guides.length > 0}
|
||||
<div id="guides">
|
||||
<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
|
||||
Guides
|
||||
<a
|
||||
href="#{obj.name}-examples"
|
||||
href="#guides"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h2>
|
||||
<div>
|
||||
<div class="demo-window overflow-y-auto h-full w-full my-4">
|
||||
<div
|
||||
class="relative mx-auto my-auto rounded-md bg-white"
|
||||
style="top: 5%; height: 90%"
|
||||
</h4>
|
||||
|
||||
<div
|
||||
class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4 pb-3 px-3"
|
||||
>
|
||||
{#each obj.guides as guide, i}
|
||||
<a
|
||||
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
|
||||
.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
|
||||
target="_blank"
|
||||
href={guide.url}
|
||||
>
|
||||
<div class="flex overflow-auto pt-4">
|
||||
<div class="flex flex-col p-4 h-min">
|
||||
<p class="group-hover:underline text-l">
|
||||
{guide.pretty_name}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.demos}
|
||||
<div id="examples">
|
||||
<div class="category my-8" id="examples">
|
||||
<h2
|
||||
class="group mb-4 text-2xl font-thin block"
|
||||
id="{obj.name}-examples"
|
||||
>
|
||||
✨ {obj.name} Examples
|
||||
<a
|
||||
href="#{obj.name}-examples"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
>
|
||||
</h2>
|
||||
<div>
|
||||
<div
|
||||
class="demo-window overflow-y-auto h-full w-full my-4"
|
||||
>
|
||||
<div
|
||||
class="relative mx-auto my-auto rounded-md bg-white"
|
||||
style="top: 5%; height: 90%"
|
||||
>
|
||||
<div class="flex overflow-auto pt-4">
|
||||
{#each obj.demos as demo, i}
|
||||
<button
|
||||
on:click={() => (current_selection = i)}
|
||||
class:selected-demo-tab={current_selection == i}
|
||||
class="demo-btn px-4 py-2 text-lg min-w-max text-gray-600 hover:text-orange-500"
|
||||
name={demo[0]}>{demo[0]}</button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
{#each obj.demos as demo, i}
|
||||
<button
|
||||
on:click={() => (current_selection = i)}
|
||||
class:selected-demo-tab={current_selection == i}
|
||||
class="demo-btn px-4 py-2 text-lg min-w-max text-gray-600 hover:text-orange-500"
|
||||
name={demo[0]}>{demo[0]}</button
|
||||
<div
|
||||
class:hidden={current_selection !== i}
|
||||
class:selected-demo-window={current_selection ==
|
||||
i}
|
||||
class="demo-content px-4"
|
||||
>
|
||||
<Demos
|
||||
name={demo[0]}
|
||||
code={demo[1]}
|
||||
highlighted_code={demo[2]}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{#each obj.demos as demo, i}
|
||||
<div
|
||||
class:hidden={current_selection !== i}
|
||||
class:selected-demo-window={current_selection == i}
|
||||
class="demo-content px-4"
|
||||
>
|
||||
<Demos
|
||||
name={demo[0]}
|
||||
code={demo[1]}
|
||||
highlighted_code={demo[2]}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="float-right mt-10 hidden lg:block">
|
||||
<div class="fixed">
|
||||
<div class="px-8">
|
||||
<a
|
||||
class="thin-link py-2 block text-lg"
|
||||
href="#block-layouts"
|
||||
on:click={handleAnchorClick}>Block Layouts</a
|
||||
>
|
||||
{#if headers.length > 0}
|
||||
<ul class="text-slate-700 text-lg leading-6">
|
||||
{#each headers as header}
|
||||
<li>
|
||||
<a
|
||||
bind:this={header_targets[header[1]]}
|
||||
href="#{header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>{header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{#if method_headers.length > 0}
|
||||
{#each method_headers as method_header}
|
||||
<li class="ml-4">
|
||||
<a
|
||||
href="#{method_header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>{method_header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between my-4">
|
||||
<a
|
||||
href="/docs/blocks"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> Blocks
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/chatinterface"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
ChatInterface <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between my-4">
|
||||
<a
|
||||
href="/docs/blocks"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> Blocks
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/chatinterface"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
ChatInterface <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:block"
|
||||
>
|
||||
<div class="px-8">
|
||||
<a
|
||||
class="thin-link py-2 block text-lg"
|
||||
href="#block-layouts"
|
||||
on:click={handleAnchorClick}>Block Layouts</a
|
||||
>
|
||||
{#if headers.length > 0}
|
||||
<ul class="text-slate-700 text-lg leading-6">
|
||||
{#each headers as header}
|
||||
<li>
|
||||
<a
|
||||
bind:this={header_targets[header[1]]}
|
||||
href="#{header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>{header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{#if method_headers.length > 0}
|
||||
{#each method_headers as method_header}
|
||||
<li class="ml-4">
|
||||
<a
|
||||
href="#{method_header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>{method_header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
const anchor = document.getElementById(anchorId);
|
||||
window.scrollTo({
|
||||
top: anchor?.offsetTop,
|
||||
behavior: "smooth"
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
|
||||
@ -61,425 +61,434 @@
|
||||
<svelte:window bind:scrollY={y} />
|
||||
|
||||
<main class="container mx-auto px-4 flex gap-4">
|
||||
<DocsNav
|
||||
current_nav_link={"combining-interfaces"}
|
||||
{components}
|
||||
{helpers}
|
||||
{routes}
|
||||
{py_client}
|
||||
/>
|
||||
<div class="flex">
|
||||
<DocsNav
|
||||
current_nav_link={"combining-interfaces"}
|
||||
{components}
|
||||
{helpers}
|
||||
{routes}
|
||||
{py_client}
|
||||
/>
|
||||
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
<p
|
||||
class="bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
|
||||
>
|
||||
New to Gradio? Start here: <a class="link" href="/quickstart"
|
||||
>Getting Started</a
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
<p
|
||||
class="lg:ml-10 bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
|
||||
>
|
||||
</p>
|
||||
<p
|
||||
class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
|
||||
>
|
||||
See the <a class="link" href="/changelog">Release History</a>
|
||||
</p>
|
||||
</div>
|
||||
New to Gradio? Start here: <a class="link" href="/quickstart"
|
||||
>Getting Started</a
|
||||
>
|
||||
</p>
|
||||
<p
|
||||
class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
|
||||
>
|
||||
See the <a class="link" href="/changelog">Release History</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between mt-4">
|
||||
<a
|
||||
href="/docs/flagging"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> Flagging
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/blocks"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
Blocks <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div class="lg:w-3/4 lg:ml-10 lg:mr-24">
|
||||
<div class="obj" id="combining-interfaces">
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h3
|
||||
id="combining-interfaces-header"
|
||||
class="group text-3xl font-light pt-4"
|
||||
>
|
||||
Combining Interfaces
|
||||
<a
|
||||
href="#combining-interfaces"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
>
|
||||
</h3>
|
||||
<div class="lg:ml-10 flex justify-between mt-4">
|
||||
<a
|
||||
href="/docs/flagging"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> Flagging
|
||||
</div>
|
||||
<div id="description">
|
||||
<h4
|
||||
class="mt-2 text-xl text-orange-500 font-light group"
|
||||
id="description"
|
||||
>
|
||||
Description
|
||||
<a
|
||||
href="#description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">{@html description}</p>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/blocks"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
Blocks <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{#each objs as obj}
|
||||
<div class="obj" id={obj.slug}>
|
||||
<div class="flex flex-row">
|
||||
<div class=" lg:ml-10">
|
||||
<div class="obj" id="combining-interfaces">
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h3 id="{obj.slug}-header" class="group text-3xl font-light py-4">
|
||||
{obj.name}
|
||||
<h3
|
||||
id="combining-interfaces-header"
|
||||
class="group text-3xl font-light pt-4"
|
||||
>
|
||||
Combining Interfaces
|
||||
<a
|
||||
href="#{obj.slug}-header"
|
||||
href="#combining-interfaces"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
<div id="description">
|
||||
<h4
|
||||
class="mt-2 text-xl text-orange-500 font-light group"
|
||||
id="description"
|
||||
>
|
||||
Description
|
||||
<a
|
||||
href="#description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">{@html description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if obj.override_signature}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.override_signature}</code
|
||||
></pre>
|
||||
{#each objs as obj}
|
||||
<div class="obj" id={obj.slug}>
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h3
|
||||
id="{obj.slug}-header"
|
||||
class="group text-3xl font-light py-4"
|
||||
>
|
||||
{obj.name}
|
||||
<a
|
||||
href="#{obj.slug}-header"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.parent}.<span>{obj.name}(</span
|
||||
><!--
|
||||
|
||||
{#if obj.override_signature}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.override_signature}</code
|
||||
></pre>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.parent}.<span>{obj.name}(</span
|
||||
><!--
|
||||
-->{#each obj.parameters as param}<!--
|
||||
-->{#if !("kwargs" in param) && !("default" in param) && param.name != "self"}<!--
|
||||
-->{param.name}, <!--
|
||||
-->{/if}<!--
|
||||
-->{/each}<!--
|
||||
-->···<span
|
||||
>)</span
|
||||
></code
|
||||
></pre>
|
||||
</div>
|
||||
{/if}
|
||||
>)</span
|
||||
></code
|
||||
></pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if mode === "components"}
|
||||
<div class="embedded-component">
|
||||
{#key obj.name}
|
||||
<gradio-app
|
||||
space={"gradio/" +
|
||||
obj.name.toLowerCase() +
|
||||
"_component_main"}
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
{/if}
|
||||
{#if mode === "components"}
|
||||
<div class="embedded-component">
|
||||
{#key obj.name}
|
||||
<gradio-app
|
||||
space={"gradio/" +
|
||||
obj.name.toLowerCase() +
|
||||
"_component_main"}
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<h4
|
||||
class="mt-8 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-description"
|
||||
>
|
||||
Description
|
||||
<a
|
||||
href="#{obj.name}-description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
<h4
|
||||
class="mt-8 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-description"
|
||||
>
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">{@html obj.description}</p>
|
||||
Description
|
||||
<a
|
||||
href="#{obj.name}-description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">{@html obj.description}</p>
|
||||
|
||||
{#if mode === "components"}
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500">As input: </span>
|
||||
{@html obj.preprocessing}
|
||||
</p>
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500">As output:</span>
|
||||
{@html obj.postprocessing}
|
||||
</p>
|
||||
{#if obj.examples_format}
|
||||
{#if mode === "components"}
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500"
|
||||
>Format expected for examples:</span
|
||||
>
|
||||
{@html obj.examples_format}}
|
||||
<span class="text-orange-500">As input: </span>
|
||||
{@html obj.preprocessing}
|
||||
</p>
|
||||
{/if}
|
||||
{#if obj.events && obj.events.length > 0}
|
||||
<p class="text-lg text-gray-500">
|
||||
<span class="text-orange-500">Supported events:</span>
|
||||
<em>{@html obj.events}</em>
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500">As output:</span>
|
||||
{@html obj.postprocessing}
|
||||
</p>
|
||||
{#if obj.examples_format}
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500"
|
||||
>Format expected for examples:</span
|
||||
>
|
||||
{@html obj.examples_format}}
|
||||
</p>
|
||||
{/if}
|
||||
{#if obj.events && obj.events.length > 0}
|
||||
<p class="text-lg text-gray-500">
|
||||
<span class="text-orange-500">Supported events:</span>
|
||||
<em>{@html obj.events}</em>
|
||||
</p>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if obj.example}
|
||||
<h4
|
||||
class="mt-4 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-example-usage"
|
||||
>
|
||||
Example Usage
|
||||
<a
|
||||
href="#{obj.name}-example-usage"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3 mt-2">
|
||||
<pre><code class="code language-python"
|
||||
>{@html obj.highlighted_example}</code
|
||||
></pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if (obj.parameters.length > 0 && obj.parameters[0].name != "self") || obj.parameters.length > 1}
|
||||
<h4
|
||||
class="mt-6 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-initialization"
|
||||
>
|
||||
Initialization
|
||||
<a
|
||||
href="#{obj.name}-initialization"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<table class="table-fixed w-full leading-loose">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 font-semibold w-2/5">Parameter</th>
|
||||
<th class="px-3 pb-3 font-semibold">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
|
||||
>
|
||||
{#each obj.parameters as param}
|
||||
{#if param["name"] != "self"}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<code class="block">
|
||||
{param["name"]}
|
||||
</code>
|
||||
<p class="text-gray-500 italic">
|
||||
{param["annotation"]}
|
||||
</p>
|
||||
{#if "default" in param}
|
||||
<p class="text-gray-500 font-semibold">
|
||||
default: {param["default"]}
|
||||
</p>
|
||||
{:else if !("kwargs" in param)}
|
||||
<p class="text-orange-600 font-semibold italic">
|
||||
required
|
||||
</p>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
<p>{param["doc"] || ""}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if mode === "components" && obj.string_shortcuts}
|
||||
<table class="mb-4 table-fixed w-full mt-6">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="p-3 font-semibold w-2/5">Class</th>
|
||||
<th class="p-3 font-semibold">Interface String Shortcut</th>
|
||||
<th class="p-3 font-semibold">Initialization</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
|
||||
>
|
||||
{#each obj.string_shortcuts as shortcut}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>
|
||||
<code class="lang-python">gradio.{shortcut[0]}</code>
|
||||
</p>
|
||||
</td>
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>"{shortcut[1]}"</p>
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
{shortcut[2]}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if obj.fns && obj.fns.length > 0}
|
||||
<h4 class="mt-4 p-3 font-semibold">Methods</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
{#each obj.fns as fn}
|
||||
<FunctionDoc {fn} parent={obj.name} />
|
||||
{/each}
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.guides && obj.guides.length > 0}
|
||||
<h4
|
||||
class="mt-4 p-3 text-xl text-orange-500 font-light group"
|
||||
id="guides"
|
||||
>
|
||||
Guides
|
||||
<a
|
||||
href="#guides"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div
|
||||
class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4 pb-3 px-3"
|
||||
>
|
||||
{#each obj.guides as guide, i}
|
||||
<a
|
||||
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
|
||||
.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
|
||||
target="_blank"
|
||||
href={guide.url}
|
||||
>
|
||||
<div class="flex flex-col p-4 h-min">
|
||||
<p class="group-hover:underline text-l">
|
||||
{guide.pretty_name}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.demos}
|
||||
<div class="category my-8" id="examples">
|
||||
{#if obj.example}
|
||||
<h4
|
||||
class="text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-demos"
|
||||
class="mt-4 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-example-usage"
|
||||
>
|
||||
Demos
|
||||
Example Usage
|
||||
<a
|
||||
href="#{obj.name}-demos"
|
||||
href="#{obj.name}-example-usage"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div>
|
||||
<div class="demo-window overflow-y-auto h-full w-full mb-4">
|
||||
<div
|
||||
class="relative mx-auto my-auto rounded-md bg-white"
|
||||
style="top: 5%; height: 90%"
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3 mt-2">
|
||||
<pre><code class="code language-python"
|
||||
>{@html obj.highlighted_example}</code
|
||||
></pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if (obj.parameters.length > 0 && obj.parameters[0].name != "self") || obj.parameters.length > 1}
|
||||
<h4
|
||||
class="mt-6 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-initialization"
|
||||
>
|
||||
Initialization
|
||||
<a
|
||||
href="#{obj.name}-initialization"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<table class="table-fixed w-full leading-loose">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 font-semibold w-2/5">Parameter</th>
|
||||
<th class="px-3 pb-3 font-semibold">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
|
||||
>
|
||||
{#each obj.parameters as param}
|
||||
{#if param["name"] != "self"}
|
||||
<tr
|
||||
class="group hover:bg-gray-200/60 odd:bg-gray-100/80"
|
||||
>
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<code class="block">
|
||||
{param["name"]}
|
||||
</code>
|
||||
<p class="text-gray-500 italic">
|
||||
{param["annotation"]}
|
||||
</p>
|
||||
{#if "default" in param}
|
||||
<p class="text-gray-500 font-semibold">
|
||||
default: {param["default"]}
|
||||
</p>
|
||||
{:else if !("kwargs" in param)}
|
||||
<p class="text-orange-600 font-semibold italic">
|
||||
required
|
||||
</p>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
<p>{param["doc"] || ""}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if mode === "components" && obj.string_shortcuts}
|
||||
<table class="mb-4 table-fixed w-full mt-6">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="p-3 font-semibold w-2/5">Class</th>
|
||||
<th class="p-3 font-semibold"
|
||||
>Interface String Shortcut</th
|
||||
>
|
||||
<th class="p-3 font-semibold">Initialization</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
|
||||
>
|
||||
{#each obj.string_shortcuts as shortcut}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>
|
||||
<code class="lang-python">gradio.{shortcut[0]}</code
|
||||
>
|
||||
</p>
|
||||
</td>
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>"{shortcut[1]}"</p>
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
{shortcut[2]}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if obj.fns && obj.fns.length > 0}
|
||||
<h4 class="mt-4 p-3 font-semibold">Methods</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
{#each obj.fns as fn}
|
||||
<FunctionDoc {fn} parent={obj.name} />
|
||||
{/each}
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.guides && obj.guides.length > 0}
|
||||
<h4
|
||||
class="mt-4 p-3 text-xl text-orange-500 font-light group"
|
||||
id="guides"
|
||||
>
|
||||
Guides
|
||||
<a
|
||||
href="#guides"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div
|
||||
class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4 pb-3 px-3"
|
||||
>
|
||||
{#each obj.guides as guide, i}
|
||||
<a
|
||||
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
|
||||
.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
|
||||
target="_blank"
|
||||
href={guide.url}
|
||||
>
|
||||
<div class="flex overflow-auto pt-4">
|
||||
<div class="flex flex-col p-4 h-min">
|
||||
<p class="group-hover:underline text-l">
|
||||
{guide.pretty_name}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.demos}
|
||||
<div class="category my-8" id="examples">
|
||||
<h4
|
||||
class="text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-demos"
|
||||
>
|
||||
Demos
|
||||
<a
|
||||
href="#{obj.name}-demos"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div>
|
||||
<div class="demo-window overflow-y-auto h-full w-full mb-4">
|
||||
<div
|
||||
class="relative mx-auto my-auto rounded-md bg-white"
|
||||
style="top: 5%; height: 90%"
|
||||
>
|
||||
<div class="flex overflow-auto pt-4">
|
||||
{#each obj.demos as demo, i}
|
||||
<button
|
||||
on:click={() => (current_selection = i)}
|
||||
class:selected-demo-tab={current_selection == i}
|
||||
class="demo-btn px-4 py-2 text-lg min-w-max text-gray-600 hover:text-orange-500"
|
||||
name={demo[0]}>{demo[0]}</button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
{#each obj.demos as demo, i}
|
||||
<button
|
||||
on:click={() => (current_selection = i)}
|
||||
class:selected-demo-tab={current_selection == i}
|
||||
class="demo-btn px-4 py-2 text-lg min-w-max text-gray-600 hover:text-orange-500"
|
||||
name={demo[0]}>{demo[0]}</button
|
||||
<div
|
||||
class:hidden={current_selection !== i}
|
||||
class:selected-demo-window={current_selection == i}
|
||||
class="demo-content px-4"
|
||||
>
|
||||
<Demos
|
||||
name={demo[0]}
|
||||
code={demo[1]}
|
||||
highlighted_code={demo[2]}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{#each obj.demos as demo, i}
|
||||
<div
|
||||
class:hidden={current_selection !== i}
|
||||
class:selected-demo-window={current_selection == i}
|
||||
class="demo-content px-4"
|
||||
>
|
||||
<Demos
|
||||
name={demo[0]}
|
||||
code={demo[1]}
|
||||
highlighted_code={demo[2]}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="float-right mt-10 hidden lg:block">
|
||||
<div class="fixed">
|
||||
<div class="px-8">
|
||||
<a
|
||||
class="thin-link py-2 block text-lg"
|
||||
href="#combining-interfaces"
|
||||
on:click={handleAnchorClick}>Combining Interfaces</a
|
||||
>
|
||||
{#if headers.length > 0}
|
||||
<ul class="text-slate-700 text-lg leading-6">
|
||||
{#each headers as header}
|
||||
<li>
|
||||
<a
|
||||
bind:this={header_targets[header[1]]}
|
||||
href="#{header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>{header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{#if method_headers.length > 0}
|
||||
{#each method_headers as method_header}
|
||||
<li class="ml-4">
|
||||
<a
|
||||
href="#{method_header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>{method_header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between my-4">
|
||||
<a
|
||||
href="/docs/flagging"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> Flagging
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/blocks"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
Blocks <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between my-4">
|
||||
<a
|
||||
href="/docs/flagging"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> Flagging
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/blocks"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
Blocks <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:block"
|
||||
>
|
||||
<div class="px-8">
|
||||
<a
|
||||
class="thin-link py-2 block text-lg"
|
||||
href="#combining-interfaces"
|
||||
on:click={handleAnchorClick}>Combining Interfaces</a
|
||||
>
|
||||
{#if headers.length > 0}
|
||||
<ul class="text-slate-700 text-lg leading-6">
|
||||
{#each headers as header}
|
||||
<li>
|
||||
<a
|
||||
bind:this={header_targets[header[1]]}
|
||||
href="#{header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>{header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{#if method_headers.length > 0}
|
||||
{#each method_headers as method_header}
|
||||
<li class="ml-4">
|
||||
<a
|
||||
href="#{method_header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>{method_header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
<p
|
||||
class="bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
|
||||
class="lg:ml-10 bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
|
||||
>
|
||||
New to Gradio? Start here: <a class="link" href="/quickstart"
|
||||
>Getting Started</a
|
||||
@ -45,7 +45,7 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between mt-4">
|
||||
<div class="lg:ml-10 flex justify-between mt-4">
|
||||
<a
|
||||
href="/docs/themes"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
const anchor = document.getElementById(anchorId);
|
||||
window.scrollTo({
|
||||
top: anchor?.offsetTop,
|
||||
behavior: "smooth"
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
|
||||
@ -62,86 +62,58 @@
|
||||
<svelte:window bind:scrollY={y} />
|
||||
|
||||
<main class="container mx-auto px-4 flex gap-4">
|
||||
<DocsNav
|
||||
current_nav_link={"flagging"}
|
||||
{components}
|
||||
{helpers}
|
||||
{routes}
|
||||
{py_client}
|
||||
/>
|
||||
<div class="flex">
|
||||
<DocsNav
|
||||
current_nav_link={"flagging"}
|
||||
{components}
|
||||
{helpers}
|
||||
{routes}
|
||||
{py_client}
|
||||
/>
|
||||
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
<p
|
||||
class="bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
|
||||
>
|
||||
New to Gradio? Start here: <a class="link" href="/quickstart"
|
||||
>Getting Started</a
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
<p
|
||||
class="lg:ml-10 bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
|
||||
>
|
||||
</p>
|
||||
<p
|
||||
class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
|
||||
>
|
||||
See the <a class="link" href="/changelog">Release History</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between mt-4">
|
||||
<a
|
||||
href="/docs/interface"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> Interface
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/combining-interfaces"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
Combining Interfaces <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div class="lg:w-3/4 lg:ml-10 lg:mr-24">
|
||||
<div class="obj" id="flagging">
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h3 id="flagging-header" class="group text-3xl font-light py-4">
|
||||
Flagging
|
||||
<a
|
||||
href="#flagging"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<h4
|
||||
class="mt-2 text-xl text-orange-500 font-light group"
|
||||
id="description"
|
||||
New to Gradio? Start here: <a class="link" href="/quickstart"
|
||||
>Getting Started</a
|
||||
>
|
||||
Description
|
||||
<a
|
||||
href="#description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">{@html description}</p>
|
||||
</div>
|
||||
</p>
|
||||
<p
|
||||
class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
|
||||
>
|
||||
See the <a class="link" href="/changelog">Release History</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#each objs as obj}
|
||||
<div class="obj" id={obj.slug}>
|
||||
<div class="lg:ml-10 flex justify-between mt-4">
|
||||
<a
|
||||
href="/docs/interface"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> Interface
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/combining-interfaces"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
Combining Interfaces <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div class="lg:ml-10">
|
||||
<div class="obj" id="flagging">
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h3 id="{obj.slug}-header" class="group text-3xl font-light py-4">
|
||||
{obj.name}
|
||||
<h3 id="flagging-header" class="group text-3xl font-light py-4">
|
||||
Flagging
|
||||
<a
|
||||
href="#{obj.slug}-header"
|
||||
href="#flagging"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
@ -149,336 +121,373 @@
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{#if obj.override_signature}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.override_signature}</code
|
||||
></pre>
|
||||
<h4
|
||||
class="mt-2 text-xl text-orange-500 font-light group"
|
||||
id="description"
|
||||
>
|
||||
Description
|
||||
<a
|
||||
href="#description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">{@html description}</p>
|
||||
</div>
|
||||
|
||||
{#each objs as obj}
|
||||
<div class="obj" id={obj.slug}>
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h3
|
||||
id="{obj.slug}-header"
|
||||
class="group text-3xl font-light py-4"
|
||||
>
|
||||
{obj.name}
|
||||
<a
|
||||
href="#{obj.slug}-header"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.parent}.<span>{obj.name}(</span
|
||||
><!--
|
||||
|
||||
{#if obj.override_signature}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.override_signature}</code
|
||||
></pre>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.parent}.<span>{obj.name}(</span
|
||||
><!--
|
||||
-->{#each obj.parameters as param}<!--
|
||||
-->{#if !("kwargs" in param) && !("default" in param) && param.name != "self"}<!--
|
||||
-->{param.name}, <!--
|
||||
-->{/if}<!--
|
||||
-->{/each}<!--
|
||||
-->···<span
|
||||
>)</span
|
||||
></code
|
||||
></pre>
|
||||
</div>
|
||||
{/if}
|
||||
>)</span
|
||||
></code
|
||||
></pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if mode === "components"}
|
||||
<div class="embedded-component">
|
||||
{#key obj.name}
|
||||
<gradio-app
|
||||
space={"gradio/" +
|
||||
obj.name.toLowerCase() +
|
||||
"_component_main"}
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
{/if}
|
||||
{#if mode === "components"}
|
||||
<div class="embedded-component">
|
||||
{#key obj.name}
|
||||
<gradio-app
|
||||
space={"gradio/" +
|
||||
obj.name.toLowerCase() +
|
||||
"_component_main"}
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<h4
|
||||
class="mt-8 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-description"
|
||||
>
|
||||
Description
|
||||
<a
|
||||
href="#{obj.name}-description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
<h4
|
||||
class="mt-8 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-description"
|
||||
>
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">{@html obj.description}</p>
|
||||
Description
|
||||
<a
|
||||
href="#{obj.name}-description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">{@html obj.description}</p>
|
||||
|
||||
{#if mode === "components"}
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500">As input: </span>
|
||||
{@html obj.preprocessing}
|
||||
</p>
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500">As output:</span>
|
||||
{@html obj.postprocessing}
|
||||
</p>
|
||||
{#if obj.examples_format}
|
||||
{#if mode === "components"}
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500"
|
||||
>Format expected for examples:</span
|
||||
>
|
||||
{@html obj.examples_format}}
|
||||
<span class="text-orange-500">As input: </span>
|
||||
{@html obj.preprocessing}
|
||||
</p>
|
||||
{/if}
|
||||
{#if obj.events && obj.events.length > 0}
|
||||
<p class="text-lg text-gray-500">
|
||||
<span class="text-orange-500">Supported events:</span>
|
||||
<em>{@html obj.events}</em>
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500">As output:</span>
|
||||
{@html obj.postprocessing}
|
||||
</p>
|
||||
{#if obj.examples_format}
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500"
|
||||
>Format expected for examples:</span
|
||||
>
|
||||
{@html obj.examples_format}}
|
||||
</p>
|
||||
{/if}
|
||||
{#if obj.events && obj.events.length > 0}
|
||||
<p class="text-lg text-gray-500">
|
||||
<span class="text-orange-500">Supported events:</span>
|
||||
<em>{@html obj.events}</em>
|
||||
</p>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if obj.example}
|
||||
<h4
|
||||
class="mt-4 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-example-usage"
|
||||
>
|
||||
Example Usage
|
||||
<a
|
||||
href="#{obj.name}-example-usage"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3 mt-2">
|
||||
<pre><code class="code language-python"
|
||||
>{@html obj.highlighted_example}</code
|
||||
></pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if (obj.parameters.length > 0 && obj.parameters[0].name != "self") || obj.parameters.length > 1}
|
||||
<h4
|
||||
class="mt-6 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-initialization"
|
||||
>
|
||||
Initialization
|
||||
<a
|
||||
href="#{obj.name}-initialization"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
|
||||
<table class="table-fixed w-full leading-loose">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 font-semibold w-2/5">Parameter</th>
|
||||
<th class="px-3 pb-3 font-semibold">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
|
||||
>
|
||||
{#each obj.parameters as param}
|
||||
{#if param["name"] != "self"}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<code class="block">
|
||||
{param["name"]}
|
||||
</code>
|
||||
<p class="text-gray-500 italic">
|
||||
{param["annotation"]}
|
||||
</p>
|
||||
{#if "default" in param}
|
||||
<p class="text-gray-500 font-semibold">
|
||||
default: {param["default"]}
|
||||
</p>
|
||||
{:else if !("kwargs" in param)}
|
||||
<p class="text-orange-600 font-semibold italic">
|
||||
required
|
||||
</p>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
<p>{param["doc"] || ""}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if mode === "components" && obj.string_shortcuts}
|
||||
<table class="mb-4 table-fixed w-full mt-6">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="p-3 font-semibold w-2/5">Class</th>
|
||||
<th class="p-3 font-semibold">Interface String Shortcut</th>
|
||||
<th class="p-3 font-semibold">Initialization</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
|
||||
>
|
||||
{#each obj.string_shortcuts as shortcut}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>
|
||||
<code class="lang-python">gradio.{shortcut[0]}</code>
|
||||
</p>
|
||||
</td>
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>"{shortcut[1]}"</p>
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
{shortcut[2]}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if obj.fns && obj.fns.length > 0}
|
||||
<h4 class="mt-4 p-3 font-semibold">Methods</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
{#each obj.fns as fn}
|
||||
<FunctionDoc {fn} parent={obj.name} />
|
||||
{/each}
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.guides && obj.guides.length > 0}
|
||||
<h4
|
||||
class="mt-4 p-3 text-xl text-orange-500 font-light group"
|
||||
id="guides"
|
||||
>
|
||||
Guides
|
||||
<a
|
||||
href="#guides"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div
|
||||
class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4 pb-3 px-3"
|
||||
>
|
||||
{#each obj.guides as guide, i}
|
||||
<a
|
||||
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
|
||||
.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
|
||||
target="_blank"
|
||||
href={guide.url}
|
||||
>
|
||||
<div class="flex flex-col p-4 h-min">
|
||||
<p class="group-hover:underline text-l">
|
||||
{guide.pretty_name}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.demos}
|
||||
<div class="category my-8" id="examples">
|
||||
{#if obj.example}
|
||||
<h4
|
||||
class="text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-demos"
|
||||
class="mt-4 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-example-usage"
|
||||
>
|
||||
Demos
|
||||
Example Usage
|
||||
<a
|
||||
href="#{obj.name}-demos"
|
||||
href="#{obj.name}-example-usage"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div>
|
||||
<div class="demo-window overflow-y-auto h-full w-full mb-4">
|
||||
<div
|
||||
class="relative mx-auto my-auto rounded-md bg-white"
|
||||
style="top: 5%; height: 90%"
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3 mt-2">
|
||||
<pre><code class="code language-python"
|
||||
>{@html obj.highlighted_example}</code
|
||||
></pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if (obj.parameters.length > 0 && obj.parameters[0].name != "self") || obj.parameters.length > 1}
|
||||
<h4
|
||||
class="mt-6 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-initialization"
|
||||
>
|
||||
Initialization
|
||||
<a
|
||||
href="#{obj.name}-initialization"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
|
||||
<table class="table-fixed w-full leading-loose">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 font-semibold w-2/5">Parameter</th>
|
||||
<th class="px-3 pb-3 font-semibold">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
|
||||
>
|
||||
{#each obj.parameters as param}
|
||||
{#if param["name"] != "self"}
|
||||
<tr
|
||||
class="group hover:bg-gray-200/60 odd:bg-gray-100/80"
|
||||
>
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<code class="block">
|
||||
{param["name"]}
|
||||
</code>
|
||||
<p class="text-gray-500 italic">
|
||||
{param["annotation"]}
|
||||
</p>
|
||||
{#if "default" in param}
|
||||
<p class="text-gray-500 font-semibold">
|
||||
default: {param["default"]}
|
||||
</p>
|
||||
{:else if !("kwargs" in param)}
|
||||
<p class="text-orange-600 font-semibold italic">
|
||||
required
|
||||
</p>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
<p>{param["doc"] || ""}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if mode === "components" && obj.string_shortcuts}
|
||||
<table class="mb-4 table-fixed w-full mt-6">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="p-3 font-semibold w-2/5">Class</th>
|
||||
<th class="p-3 font-semibold"
|
||||
>Interface String Shortcut</th
|
||||
>
|
||||
<th class="p-3 font-semibold">Initialization</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
|
||||
>
|
||||
{#each obj.string_shortcuts as shortcut}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>
|
||||
<code class="lang-python">gradio.{shortcut[0]}</code
|
||||
>
|
||||
</p>
|
||||
</td>
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>"{shortcut[1]}"</p>
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
{shortcut[2]}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if obj.fns && obj.fns.length > 0}
|
||||
<h4 class="mt-4 p-3 font-semibold">Methods</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
{#each obj.fns as fn}
|
||||
<FunctionDoc {fn} parent={obj.name} />
|
||||
{/each}
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.guides && obj.guides.length > 0}
|
||||
<h4
|
||||
class="mt-4 p-3 text-xl text-orange-500 font-light group"
|
||||
id="guides"
|
||||
>
|
||||
Guides
|
||||
<a
|
||||
href="#guides"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div
|
||||
class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4 pb-3 px-3"
|
||||
>
|
||||
{#each obj.guides as guide, i}
|
||||
<a
|
||||
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
|
||||
.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
|
||||
target="_blank"
|
||||
href={guide.url}
|
||||
>
|
||||
<div class="flex overflow-auto pt-4">
|
||||
<div class="flex flex-col p-4 h-min">
|
||||
<p class="group-hover:underline text-l">
|
||||
{guide.pretty_name}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.demos}
|
||||
<div class="category my-8" id="examples">
|
||||
<h4
|
||||
class="text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-demos"
|
||||
>
|
||||
Demos
|
||||
<a
|
||||
href="#{obj.name}-demos"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div>
|
||||
<div class="demo-window overflow-y-auto h-full w-full mb-4">
|
||||
<div
|
||||
class="relative mx-auto my-auto rounded-md bg-white"
|
||||
style="top: 5%; height: 90%"
|
||||
>
|
||||
<div class="flex overflow-auto pt-4">
|
||||
{#each obj.demos as demo, i}
|
||||
<button
|
||||
on:click={() => (current_selection = i)}
|
||||
class:selected-demo-tab={current_selection == i}
|
||||
class="demo-btn px-4 py-2 text-lg min-w-max text-gray-600 hover:text-orange-500"
|
||||
name={demo[0]}>{demo[0]}</button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
{#each obj.demos as demo, i}
|
||||
<button
|
||||
on:click={() => (current_selection = i)}
|
||||
class:selected-demo-tab={current_selection == i}
|
||||
class="demo-btn px-4 py-2 text-lg min-w-max text-gray-600 hover:text-orange-500"
|
||||
name={demo[0]}>{demo[0]}</button
|
||||
<div
|
||||
class:hidden={current_selection !== i}
|
||||
class:selected-demo-window={current_selection == i}
|
||||
class="demo-content px-4"
|
||||
>
|
||||
<Demos
|
||||
name={demo[0]}
|
||||
code={demo[1]}
|
||||
highlighted_code={demo[2]}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{#each obj.demos as demo, i}
|
||||
<div
|
||||
class:hidden={current_selection !== i}
|
||||
class:selected-demo-window={current_selection == i}
|
||||
class="demo-content px-4"
|
||||
>
|
||||
<Demos
|
||||
name={demo[0]}
|
||||
code={demo[1]}
|
||||
highlighted_code={demo[2]}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="float-right mt-10 hidden lg:block">
|
||||
<div class="fixed">
|
||||
<div class="mx-8">
|
||||
<a
|
||||
class="thin-link py-2 block text-lg"
|
||||
href="#flagging"
|
||||
on:click={handleAnchorClick}>Flagging</a
|
||||
>
|
||||
{#if headers.length > 0}
|
||||
<ul class="text-slate-700 text-lg leading-6">
|
||||
{#each headers as header}
|
||||
<li>
|
||||
<a
|
||||
bind:this={header_targets[header[1]]}
|
||||
href="#{header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>{header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{#if method_headers.length > 0}
|
||||
{#each method_headers as method_header}
|
||||
<li class="ml-4">
|
||||
<a
|
||||
href="#{method_header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>{method_header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
{/if}
|
||||
<div class="flex justify-between my-4">
|
||||
<a
|
||||
href="/docs/interface"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> Interface
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/combining-interfaces"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
Combining Interfaces <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between my-4">
|
||||
<a
|
||||
href="/docs/interface"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> Interface
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/combining-interfaces"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
Combining Interfaces <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:block"
|
||||
>
|
||||
<div class="mx-8">
|
||||
<a
|
||||
class="thin-link py-2 block text-lg"
|
||||
href="#flagging"
|
||||
on:click={handleAnchorClick}>Flagging</a
|
||||
>
|
||||
{#if headers.length > 0}
|
||||
<ul class="text-slate-700 text-lg leading-6">
|
||||
{#each headers as header}
|
||||
<li>
|
||||
<a
|
||||
bind:this={header_targets[header[1]]}
|
||||
href="#{header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>{header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{#if method_headers.length > 0}
|
||||
{#each method_headers as method_header}
|
||||
<li class="ml-4">
|
||||
<a
|
||||
href="#{method_header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>{method_header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -21,44 +21,46 @@
|
||||
/>
|
||||
|
||||
<main class="container mx-auto px-4 flex gap-4">
|
||||
<DocsNav
|
||||
current_nav_link={"js-client"}
|
||||
{components}
|
||||
{helpers}
|
||||
{routes}
|
||||
{py_client}
|
||||
/>
|
||||
<div class="flex">
|
||||
<DocsNav
|
||||
current_nav_link={"js-client"}
|
||||
{components}
|
||||
{helpers}
|
||||
{routes}
|
||||
{py_client}
|
||||
/>
|
||||
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
<p
|
||||
class="bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
|
||||
>
|
||||
New to Gradio? Start here: <a class="link" href="/quickstart"
|
||||
>Getting Started</a
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
<p
|
||||
class="lg:ml-10 bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
|
||||
>
|
||||
</p>
|
||||
<p
|
||||
class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
|
||||
>
|
||||
See the <a class="link" href="/changelog">Release History</a>
|
||||
</p>
|
||||
</div>
|
||||
New to Gradio? Start here: <a class="link" href="/quickstart"
|
||||
>Getting Started</a
|
||||
>
|
||||
</p>
|
||||
<p
|
||||
class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
|
||||
>
|
||||
See the <a class="link" href="/changelog">Release History</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between mt-4">
|
||||
<a
|
||||
href="/docs/job"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> Job
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="lg:w-3/4 lg:ml-10 lg:mr-24">
|
||||
<div class="prose text-lg max-w-full">
|
||||
{@html readme_html}
|
||||
<div class="lg:ml-10 flex justify-between mt-4">
|
||||
<a
|
||||
href="/docs/job"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> Job
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="lg:w-3/4 lg:ml-10 lg:mr-24">
|
||||
<div class="prose text-lg max-w-full">
|
||||
{@html readme_html}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,90 +17,94 @@
|
||||
/>
|
||||
|
||||
<main class="container mx-auto px-4 flex gap-4">
|
||||
<DocsNav
|
||||
current_nav_link={"python-client"}
|
||||
{components}
|
||||
{helpers}
|
||||
{routes}
|
||||
{py_client}
|
||||
/>
|
||||
<div class="flex">
|
||||
<DocsNav
|
||||
current_nav_link={"python-client"}
|
||||
{components}
|
||||
{helpers}
|
||||
{routes}
|
||||
{py_client}
|
||||
/>
|
||||
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
<p
|
||||
class="bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
|
||||
>
|
||||
New to Gradio? Start here: <a class="link" href="/quickstart"
|
||||
>Getting Started</a
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
<p
|
||||
class="lg:ml-10 bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
|
||||
>
|
||||
</p>
|
||||
<p
|
||||
class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
|
||||
>
|
||||
See the <a class="link" href="/changelog">Release History</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between mt-4">
|
||||
<a
|
||||
href="/docs/mount_gradio_app"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> mount_gradio_app
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/client"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
Client <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="lg:w-3/4 lg:ml-10 lg:mr-24">
|
||||
<div class="obj" id="python-client">
|
||||
<h2
|
||||
id="python-client-header"
|
||||
class="text-4xl font-light mb-2 pt-2 text-orange-500"
|
||||
New to Gradio? Start here: <a class="link" href="/quickstart"
|
||||
>Getting Started</a
|
||||
>
|
||||
Python Client
|
||||
</h2>
|
||||
</p>
|
||||
<p
|
||||
class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
|
||||
>
|
||||
See the <a class="link" href="/changelog">Release History</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="mt-8 mb-2 text-lg">
|
||||
The lightweight Gradio client libraries make it easy to use any
|
||||
Gradio app as an API. We currently support both a Python client
|
||||
library as well as a JavaScript client library.
|
||||
</p>
|
||||
|
||||
<p class="mt-2 text-lg">
|
||||
The Python client library is <code class="language-bash"
|
||||
>gradio_client</code
|
||||
>. It's included in the latest versions of the
|
||||
<code class="language-bash">gradio</code>
|
||||
package, but for a more lightweight experience, you can install it using
|
||||
<code class="language-bash">pip</code>
|
||||
without having to install <code class="language-bash">gradio</code>:
|
||||
</p>
|
||||
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3 my-3">
|
||||
<pre><code class="language-bash">pip install gradio_client</code
|
||||
></pre>
|
||||
<div class="lg:ml-10 flex justify-between mt-4">
|
||||
<a
|
||||
href="/docs/mount_gradio_app"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> mount_gradio_app
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/client"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
Client <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-row mr-28">
|
||||
<div class="lg:w-3/4 lg:ml-10 lg:mr-24">
|
||||
<div class="obj" id="python-client">
|
||||
<h2
|
||||
id="python-client-header"
|
||||
class="text-4xl font-light mb-2 pt-2 text-orange-500"
|
||||
>
|
||||
Python Client
|
||||
</h2>
|
||||
|
||||
<p class="mt-2 text-lg">
|
||||
The library mainly consists of two primary classes: <code
|
||||
class="language-bash">Client</code
|
||||
>
|
||||
and <code class="language-bash">Job</code>. Learn more by reading
|
||||
our guide:
|
||||
<a
|
||||
href="https://gradio.app/guides/getting-started-with-the-python-client/"
|
||||
target="_blank">Getting Started with the Python Client</a
|
||||
>
|
||||
</p>
|
||||
<p class="mt-8 mb-2 text-lg">
|
||||
The lightweight Gradio client libraries make it easy to use any
|
||||
Gradio app as an API. We currently support both a Python client
|
||||
library as well as a JavaScript client library.
|
||||
</p>
|
||||
|
||||
<p class="mt-2 text-lg">
|
||||
The Python client library is <code class="language-bash"
|
||||
>gradio_client</code
|
||||
>. It's included in the latest versions of the
|
||||
<code class="language-bash">gradio</code>
|
||||
package, but for a more lightweight experience, you can install it
|
||||
using
|
||||
<code class="language-bash">pip</code>
|
||||
without having to install
|
||||
<code class="language-bash">gradio</code>:
|
||||
</p>
|
||||
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3 my-3">
|
||||
<pre><code class="language-bash">pip install gradio_client</code
|
||||
></pre>
|
||||
</div>
|
||||
|
||||
<p class="mt-2 text-lg">
|
||||
The library mainly consists of two primary classes: <code
|
||||
class="language-bash">Client</code
|
||||
>
|
||||
and <code class="language-bash">Job</code>. Learn more by reading
|
||||
our guide:
|
||||
<a
|
||||
href="https://gradio.app/guides/getting-started-with-the-python-client/"
|
||||
target="_blank">Getting Started with the Python Client</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
790
js/_website/src/routes/docs/themes/+page.svelte
vendored
790
js/_website/src/routes/docs/themes/+page.svelte
vendored
@ -63,88 +63,58 @@
|
||||
<svelte:window bind:scrollY={y} />
|
||||
|
||||
<main class="container mx-auto px-4 flex gap-4">
|
||||
<DocsNav
|
||||
current_nav_link={"themes"}
|
||||
{components}
|
||||
{helpers}
|
||||
{routes}
|
||||
{py_client}
|
||||
/>
|
||||
<div class="flex">
|
||||
<DocsNav
|
||||
current_nav_link={"themes"}
|
||||
{components}
|
||||
{helpers}
|
||||
{routes}
|
||||
{py_client}
|
||||
/>
|
||||
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
<p
|
||||
class="bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
|
||||
>
|
||||
New to Gradio? Start here: <a class="link" href="/quickstart"
|
||||
>Getting Started</a
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
<p
|
||||
class="lg:ml-10 bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
|
||||
>
|
||||
</p>
|
||||
<p
|
||||
class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
|
||||
>
|
||||
See the <a class="link" href="/changelog">Release History</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between mt-4">
|
||||
<a
|
||||
href="/docs/chatinterface"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> ChatInterface
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/components"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
Components <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div class="lg:w-3/4 lg:ml-10 lg:mr-24">
|
||||
<div class="obj" id="themes">
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h3 id="themes-header" class="group text-3xl font-light py-4">
|
||||
Themes
|
||||
<a
|
||||
href="#themes"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<h4
|
||||
class="mt-2 text-xl text-orange-500 font-light group"
|
||||
id="description"
|
||||
New to Gradio? Start here: <a class="link" href="/quickstart"
|
||||
>Getting Started</a
|
||||
>
|
||||
Description
|
||||
<a
|
||||
href="#description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">
|
||||
Customize the look of your app by writing your own custom theme
|
||||
</p>
|
||||
</div>
|
||||
</p>
|
||||
<p
|
||||
class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
|
||||
>
|
||||
See the <a class="link" href="/changelog">Release History</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#each objs as obj}
|
||||
<div class="obj" id={obj.slug}>
|
||||
<div class="lg:ml-10 flex justify-between mt-4">
|
||||
<a
|
||||
href="/docs/chatinterface"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> ChatInterface
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/components"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
Components <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div class="lg:ml-10">
|
||||
<div class="obj" id="themes">
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h3 id="{obj.slug}-header" class="group text-3xl font-light py-4">
|
||||
{obj.name}
|
||||
<h3 id="themes-header" class="group text-3xl font-light py-4">
|
||||
Themes
|
||||
<a
|
||||
href="#{obj.slug}-header"
|
||||
href="#themes"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
@ -152,350 +122,392 @@
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{#if obj.override_signature}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.override_signature}</code
|
||||
></pre>
|
||||
<h4
|
||||
class="mt-2 text-xl text-orange-500 font-light group"
|
||||
id="description"
|
||||
>
|
||||
Description
|
||||
<a
|
||||
href="#description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">
|
||||
Customize the look of your app by writing your own custom theme
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#each objs as obj}
|
||||
<div class="obj" id={obj.slug}>
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h3
|
||||
id="{obj.slug}-header"
|
||||
class="group text-3xl font-light py-4"
|
||||
>
|
||||
{obj.name}
|
||||
<a
|
||||
href="#{obj.slug}-header"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img" src={anchor} /></a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.parent}.<span>{obj.name}(</span
|
||||
><!--
|
||||
|
||||
{#if obj.override_signature}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.override_signature}</code
|
||||
></pre>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3">
|
||||
<pre><code class="code language-python"
|
||||
>{obj.parent}.<span>{obj.name}(</span
|
||||
><!--
|
||||
-->{#each obj.parameters as param}<!--
|
||||
-->{#if !("kwargs" in param) && !("default" in param) && param.name != "self"}<!--
|
||||
-->{param.name}, <!--
|
||||
-->{/if}<!--
|
||||
-->{/each}<!--
|
||||
-->···<span
|
||||
>)</span
|
||||
></code
|
||||
></pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if mode === "components"}
|
||||
<div class="embedded-component">
|
||||
{#key obj.name}
|
||||
<gradio-app
|
||||
space={"gradio/" +
|
||||
obj.name.toLowerCase() +
|
||||
"_component_main"}
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.description}
|
||||
<h4
|
||||
class="mt-8 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-description"
|
||||
>
|
||||
Description
|
||||
<a
|
||||
href="#{obj.name}-description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">{@html obj.description}</p>
|
||||
{/if}
|
||||
|
||||
{#if mode === "components"}
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500">As input: </span>
|
||||
{@html obj.preprocessing}
|
||||
</p>
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500">As output:</span>
|
||||
{@html obj.postprocessing}
|
||||
</p>
|
||||
{#if obj.examples_format}
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500"
|
||||
>Format expected for examples:</span
|
||||
>
|
||||
{@html obj.examples_format}}
|
||||
</p>
|
||||
>)</span
|
||||
></code
|
||||
></pre>
|
||||
</div>
|
||||
{/if}
|
||||
{#if obj.events && obj.events.length > 0}
|
||||
<p class="text-lg text-gray-500">
|
||||
<span class="text-orange-500">Supported events:</span>
|
||||
<em>{@html obj.events}</em>
|
||||
</p>
|
||||
|
||||
{#if mode === "components"}
|
||||
<div class="embedded-component">
|
||||
{#key obj.name}
|
||||
<gradio-app
|
||||
space={"gradio/" +
|
||||
obj.name.toLowerCase() +
|
||||
"_component_main"}
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if obj.example}
|
||||
<h4
|
||||
class="mt-4 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-example-usage"
|
||||
>
|
||||
Example Usage
|
||||
<a
|
||||
href="#{obj.name}-example-usage"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3 mt-2">
|
||||
<pre><code class="code language-python"
|
||||
>{@html obj.highlighted_example}</code
|
||||
></pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if (obj.parameters.length > 0 && obj.parameters[0].name != "self") || obj.parameters.length > 1}
|
||||
<h4
|
||||
class="mt-6 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-initialization"
|
||||
>
|
||||
Initialization
|
||||
<a
|
||||
href="#{obj.name}-initialization"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
|
||||
<table class="table-fixed w-full leading-loose">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 font-semibold w-2/5">Parameter</th>
|
||||
<th class="px-3 pb-3 font-semibold">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
|
||||
>
|
||||
{#each obj.parameters as param}
|
||||
{#if param["name"] != "self"}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<code class="block">
|
||||
{param["name"]}
|
||||
</code>
|
||||
<p class="text-gray-500 italic">
|
||||
{param["annotation"]}
|
||||
</p>
|
||||
{#if "default" in param}
|
||||
<p class="text-gray-500 font-semibold">
|
||||
default: {param["default"]}
|
||||
</p>
|
||||
{:else if !("kwargs" in param)}
|
||||
<p class="text-orange-600 font-semibold italic">
|
||||
required
|
||||
</p>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
<p>{param["doc"] || ""}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if mode === "components" && obj.string_shortcuts}
|
||||
<table class="mb-4 table-fixed w-full mt-6">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="p-3 font-semibold w-2/5">Class</th>
|
||||
<th class="p-3 font-semibold">Interface String Shortcut</th>
|
||||
<th class="p-3 font-semibold">Initialization</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
|
||||
>
|
||||
{#each obj.string_shortcuts as shortcut}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>
|
||||
<code class="lang-python">gradio.{shortcut[0]}</code>
|
||||
</p>
|
||||
</td>
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>"{shortcut[1]}"</p>
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
{shortcut[2]}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if obj.fns && obj.fns.length > 0}
|
||||
<h4
|
||||
class="mt-6 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-methods"
|
||||
>
|
||||
Methods
|
||||
<a
|
||||
href="#{obj.name}-methods"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<h4 class="mt-4 p-3 font-semibold">Methods</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
{#each obj.fns as fn}
|
||||
<FunctionDoc {fn} parent={obj.name} />
|
||||
{/each}
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.guides && obj.guides.length > 0}
|
||||
<h4
|
||||
class="mt-4 p-3 text-xl text-orange-500 font-light group"
|
||||
id="guides"
|
||||
>
|
||||
Guides
|
||||
<a
|
||||
href="#guides"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div
|
||||
class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4 pb-3 px-3"
|
||||
>
|
||||
{#each obj.guides as guide, i}
|
||||
<a
|
||||
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
|
||||
.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
|
||||
target="_blank"
|
||||
href={guide.url}
|
||||
>
|
||||
<div class="flex flex-col p-4 h-min">
|
||||
<p class="group-hover:underline text-l">
|
||||
{guide.pretty_name}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.demos}
|
||||
<div class="category my-8" id="examples">
|
||||
{#if obj.description}
|
||||
<h4
|
||||
class="text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-demos"
|
||||
class="mt-8 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-description"
|
||||
>
|
||||
Demos
|
||||
Description
|
||||
<a
|
||||
href="#{obj.name}-demos"
|
||||
href="#{obj.name}-description"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div>
|
||||
<div class="demo-window overflow-y-auto h-full w-full mb-4">
|
||||
<div
|
||||
class="relative mx-auto my-auto rounded-md bg-white"
|
||||
style="top: 5%; height: 90%"
|
||||
<p class="mb-2 text-lg text-gray-600">
|
||||
{@html obj.description}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{#if mode === "components"}
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500">As input: </span>
|
||||
{@html obj.preprocessing}
|
||||
</p>
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500">As output:</span>
|
||||
{@html obj.postprocessing}
|
||||
</p>
|
||||
{#if obj.examples_format}
|
||||
<p class="mb-2 text-lg text-gray-500">
|
||||
<span class="text-orange-500"
|
||||
>Format expected for examples:</span
|
||||
>
|
||||
<div class="flex overflow-auto pt-4">
|
||||
{@html obj.examples_format}}
|
||||
</p>
|
||||
{/if}
|
||||
{#if obj.events && obj.events.length > 0}
|
||||
<p class="text-lg text-gray-500">
|
||||
<span class="text-orange-500">Supported events:</span>
|
||||
<em>{@html obj.events}</em>
|
||||
</p>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if obj.example}
|
||||
<h4
|
||||
class="mt-4 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-example-usage"
|
||||
>
|
||||
Example Usage
|
||||
<a
|
||||
href="#{obj.name}-example-usage"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div class="codeblock bg-gray-50 mx-auto p-3 mt-2">
|
||||
<pre><code class="code language-python"
|
||||
>{@html obj.highlighted_example}</code
|
||||
></pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if (obj.parameters.length > 0 && obj.parameters[0].name != "self") || obj.parameters.length > 1}
|
||||
<h4
|
||||
class="mt-6 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-initialization"
|
||||
>
|
||||
Initialization
|
||||
<a
|
||||
href="#{obj.name}-initialization"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
|
||||
<table class="table-fixed w-full leading-loose">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 font-semibold w-2/5">Parameter</th>
|
||||
<th class="px-3 pb-3 font-semibold">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
|
||||
>
|
||||
{#each obj.parameters as param}
|
||||
{#if param["name"] != "self"}
|
||||
<tr
|
||||
class="group hover:bg-gray-200/60 odd:bg-gray-100/80"
|
||||
>
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<code class="block">
|
||||
{param["name"]}
|
||||
</code>
|
||||
<p class="text-gray-500 italic">
|
||||
{param["annotation"]}
|
||||
</p>
|
||||
{#if "default" in param}
|
||||
<p class="text-gray-500 font-semibold">
|
||||
default: {param["default"]}
|
||||
</p>
|
||||
{:else if !("kwargs" in param)}
|
||||
<p class="text-orange-600 font-semibold italic">
|
||||
required
|
||||
</p>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
<p>{param["doc"] || ""}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if mode === "components" && obj.string_shortcuts}
|
||||
<table class="mb-4 table-fixed w-full mt-6">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="p-3 font-semibold w-2/5">Class</th>
|
||||
<th class="p-3 font-semibold"
|
||||
>Interface String Shortcut</th
|
||||
>
|
||||
<th class="p-3 font-semibold">Initialization</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
|
||||
>
|
||||
{#each obj.string_shortcuts as shortcut}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>
|
||||
<code class="lang-python">gradio.{shortcut[0]}</code
|
||||
>
|
||||
</p>
|
||||
</td>
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>"{shortcut[1]}"</p>
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
{shortcut[2]}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if obj.fns && obj.fns.length > 0}
|
||||
<h4
|
||||
class="mt-6 text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-methods"
|
||||
>
|
||||
Methods
|
||||
<a
|
||||
href="#{obj.name}-methods"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<h4 class="mt-4 p-3 font-semibold">Methods</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
{#each obj.fns as fn}
|
||||
<FunctionDoc {fn} parent={obj.name} />
|
||||
{/each}
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.guides && obj.guides.length > 0}
|
||||
<h4
|
||||
class="mt-4 p-3 text-xl text-orange-500 font-light group"
|
||||
id="guides"
|
||||
>
|
||||
Guides
|
||||
<a
|
||||
href="#guides"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
|
||||
<div
|
||||
class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4 pb-3 px-3"
|
||||
>
|
||||
{#each obj.guides as guide, i}
|
||||
<a
|
||||
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
|
||||
.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
|
||||
target="_blank"
|
||||
href={guide.url}
|
||||
>
|
||||
<div class="flex flex-col p-4 h-min">
|
||||
<p class="group-hover:underline text-l">
|
||||
{guide.pretty_name}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if obj.demos}
|
||||
<div class="category my-8" id="examples">
|
||||
<h4
|
||||
class="text-xl text-orange-500 font-light group"
|
||||
id="{obj.name}-demos"
|
||||
>
|
||||
Demos
|
||||
<a
|
||||
href="#{obj.name}-demos"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div>
|
||||
<div class="demo-window overflow-y-auto h-full w-full mb-4">
|
||||
<div
|
||||
class="relative mx-auto my-auto rounded-md bg-white"
|
||||
style="top: 5%; height: 90%"
|
||||
>
|
||||
<div class="flex overflow-auto pt-4">
|
||||
{#each obj.demos as demo, i}
|
||||
<button
|
||||
on:click={() => (current_selection = i)}
|
||||
class:selected-demo-tab={current_selection == i}
|
||||
class="demo-btn px-4 py-2 text-lg min-w-max text-gray-600 hover:text-orange-500"
|
||||
name={demo[0]}>{demo[0]}</button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
{#each obj.demos as demo, i}
|
||||
<button
|
||||
on:click={() => (current_selection = i)}
|
||||
class:selected-demo-tab={current_selection == i}
|
||||
class="demo-btn px-4 py-2 text-lg min-w-max text-gray-600 hover:text-orange-500"
|
||||
name={demo[0]}>{demo[0]}</button
|
||||
<div
|
||||
class:hidden={current_selection !== i}
|
||||
class:selected-demo-window={current_selection == i}
|
||||
class="demo-content px-4"
|
||||
>
|
||||
<Demos
|
||||
name={demo[0]}
|
||||
code={demo[1]}
|
||||
highlighted_code={demo[2]}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{#each obj.demos as demo, i}
|
||||
<div
|
||||
class:hidden={current_selection !== i}
|
||||
class:selected-demo-window={current_selection == i}
|
||||
class="demo-content px-4"
|
||||
>
|
||||
<Demos
|
||||
name={demo[0]}
|
||||
code={demo[1]}
|
||||
highlighted_code={demo[2]}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="float-right mt-10 hidden lg:block">
|
||||
<div class="fixed">
|
||||
<div class="mx-8">
|
||||
<a
|
||||
class="thin-link py-2 block text-lg"
|
||||
href="#themes"
|
||||
on:click={handleAnchorClick}>Themes</a
|
||||
>
|
||||
{#if headers.length > 0}
|
||||
<ul class="text-slate-700 text-lg leading-6">
|
||||
{#each headers as header}
|
||||
<li>
|
||||
<a
|
||||
bind:this={header_targets[header[1]]}
|
||||
href="#{header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>{header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{#if method_headers.length > 0}
|
||||
{#each method_headers as method_header}
|
||||
<li class="ml-4">
|
||||
<a
|
||||
href="#{method_header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>{method_header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
{/if}
|
||||
<div class="flex justify-between my-4">
|
||||
<a
|
||||
href="/docs/chatinterface"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> ChatInterface
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/components"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
Components <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between my-4">
|
||||
<a
|
||||
href="/docs/chatinterface"
|
||||
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
<span class="text-orange-500">←</span> ChatInterface
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/components"
|
||||
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
|
||||
>
|
||||
<div class="text-lg">
|
||||
Components <span class="text-orange-500">→</span>
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:block"
|
||||
>
|
||||
<div class="mx-8">
|
||||
<a
|
||||
class="thin-link py-2 block text-lg"
|
||||
href="#themes"
|
||||
on:click={handleAnchorClick}>Themes</a
|
||||
>
|
||||
{#if headers.length > 0}
|
||||
<ul class="text-slate-700 text-lg leading-6">
|
||||
{#each headers as header}
|
||||
<li>
|
||||
<a
|
||||
bind:this={header_targets[header[1]]}
|
||||
href="#{header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link"
|
||||
on:click={handleAnchorClick}>{header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{#if method_headers.length > 0}
|
||||
{#each method_headers as method_header}
|
||||
<li class="">
|
||||
<a
|
||||
href="#{method_header[1]}"
|
||||
class="thin-link block py-2 font-light second-nav-link sub-link"
|
||||
on:click={handleAnchorClick}
|
||||
>    {method_header[0]}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<div class="w-10/12 mx-auto">
|
||||
{#if guide_page.spaces.length }
|
||||
<div id='spaces-holder' class="mb-4">
|
||||
<a href='https://hf.co/spaces' target='_blank'>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user