|
<script lang="ts"> |
|
import MetaTags from "$lib/components/MetaTags.svelte"; |
|
import { page } from "$app/stores"; |
|
import DropDown from "$lib/components/VersionDropdown.svelte"; |
|
|
|
export let data: { |
|
[key: string]: any; |
|
}; |
|
</script> |
|
|
|
<MetaTags |
|
title="Gradio Documentation" |
|
url={$page.url.pathname} |
|
canonical={$page.url.pathname} |
|
description="Documentation, tutorials and guides for the Gradio ecosystem." |
|
/> |
|
|
|
<div class="container mx-auto px-4 relative pt-8 mb-0"> |
|
<div class="float-right"> |
|
<DropDown /> |
|
</div> |
|
<h1 class="mb-4 flex items-center text-2xl font-light"> |
|
<svg |
|
xmlns="http://www.w3.org/2000/svg" |
|
xmlns:xlink="http://www.w3.org/1999/xlink" |
|
aria-hidden="true" |
|
role="img" |
|
class="mr-1.5 text-gray-400 text-3xl" |
|
width="1em" |
|
height="1em" |
|
preserveAspectRatio="xMidYMid meet" |
|
viewBox="0 0 32 32" |
|
><path |
|
opacity="0.5" |
|
d="M20.9022 5.10334L10.8012 10.8791L7.76318 9.11193C8.07741 8.56791 8.5256 8.11332 9.06512 7.7914L15.9336 3.73907C17.0868 3.08811 18.5002 3.26422 19.6534 3.91519L19.3859 3.73911C19.9253 4.06087 20.5879 4.56025 20.9022 5.10334Z" |
|
fill="currentColor" |
|
></path><path |
|
d="M10.7999 10.8792V28.5483C10.2136 28.5475 9.63494 28.4139 9.10745 28.1578C8.5429 27.8312 8.074 27.3621 7.74761 26.7975C7.42122 26.2327 7.24878 25.5923 7.24756 24.9402V10.9908C7.25062 10.3319 7.42358 9.68487 7.74973 9.1123L10.7999 10.8792Z" |
|
fill="currentColor" |
|
fill-opacity="0.75" |
|
></path><path |
|
fill-rule="evenodd" |
|
clip-rule="evenodd" |
|
d="M21.3368 10.8499V6.918C21.3331 6.25959 21.16 5.61234 20.8346 5.03949L10.7971 10.8727L10.8046 10.874L21.3368 10.8499Z" |
|
fill="currentColor" |
|
></path><path |
|
opacity="0.5" |
|
d="M21.7937 10.8488L10.7825 10.8741V28.5486L21.7937 28.5234C23.3344 28.5234 24.5835 27.2743 24.5835 25.7335V13.6387C24.5835 12.0979 23.4365 11.1233 21.7937 10.8488Z" |
|
fill="currentColor" |
|
></path></svg |
|
> |
|
Documentation |
|
</h1> |
|
|
|
<div class="grid grid-cols-1 gap-5 lg:grid-cols-2 mt-8"> |
|
<div |
|
class="shadow-alternate hover:scale-[1.02] group group flex flex-col overflow-hidden md:first:row-span-3 rounded-xl bg-gradient-to-br px-3 pb-4 pt-6 from-orange-100 via-orange-50 hover:shadow-alternate to-white shadow-none transition-shadow" |
|
> |
|
<a class="mt-auto mb-2 flex-grow" href="./docs/gradio" target="_self"> |
|
<div class="text-lg"> |
|
<p class="font-semibold">Gradio</p> |
|
</div> |
|
|
|
<code class="font-light text-md mb-2">gradio</code> |
|
<div class=" relative pr-4 text-lg font-light mt-2"> |
|
Build and share machine learning demos and web applications using the |
|
core Gradio Python library. |
|
</div> |
|
</a> |
|
<div class="hidden lg:flex flex-wrap mx-auto justify-center"> |
|
<a |
|
href="./docs/gradio/interface" |
|
target="_self" |
|
class="shadow-alternate quick-link rounded-xl px-3.5 py-1 m-2 text-md font-semibold text-white bg-orange-300 hover:drop-shadow-md" |
|
>Interface |
|
</a> |
|
<a |
|
href="./docs/gradio/blocks" |
|
target="_self" |
|
class="shadow-alternate quick-link rounded-xl px-3.5 py-1 m-2 text-md font-semibold text-white bg-orange-300 hover:drop-shadow-md" |
|
>Blocks |
|
</a> |
|
<a |
|
href="./docs/gradio/chatinterface" |
|
target="_self" |
|
class="shadow-alternate quick-link rounded-xl px-3.5 py-1 m-2 text-md font-semibold text-white bg-orange-300 hover:drop-shadow-md" |
|
>ChatInterface |
|
</a> |
|
<a |
|
href="./docs/gradio/textbox" |
|
target="_self" |
|
class="shadow-alternate quick-link rounded-xl px-3.5 py-1 m-2 text-md font-semibold text-white bg-orange-300 hover:drop-shadow-md" |
|
>Textbox |
|
</a> |
|
<a |
|
href="./docs/gradio/image" |
|
target="_self" |
|
class="shadow-alternate quick-link rounded-xl px-3.5 py-1 m-2 text-md font-semibold text-white bg-orange-300 hover:drop-shadow-md" |
|
>Image |
|
</a> |
|
<a |
|
href="./docs/gradio/audio" |
|
target="_self" |
|
class="shadow-alternate quick-link rounded-xl px-3.5 py-1 m-2 text-md font-semibold text-white bg-orange-300 hover:drop-shadow-md" |
|
>Audio |
|
</a> |
|
<a |
|
href="./docs/gradio/dataframe" |
|
target="_self" |
|
class="shadow-alternate quick-link rounded-xl px-3.5 py-1 m-2 text-md font-semibold text-white bg-orange-300 hover:drop-shadow-md" |
|
>Dataframe |
|
</a> |
|
</div> |
|
</div> |
|
<a |
|
href="./docs/python-client" |
|
target="_self" |
|
class="shadow-alternate hover:scale-[1.02] group group relative flex flex-col overflow-hidden rounded-xl bg-gradient-to-r px-3 py-4 dark:border-gray-900 from-{data |
|
.COLOR_SETS[1]}-50 hover:shadow-alternate to-white shadow-none transition-shadow dark:from-gray-850 dark:to-gray-950 dark:hover:from-gray-800" |
|
> |
|
<div class="relative mb-2 flex items-center text-lg font-semibold"> |
|
<span>Python Client</span> |
|
</div> |
|
<code class="font-light text-md mb-2">gradio-client</code> |
|
<div class="relative pr-4 text-lg font-light"> |
|
Make programmatic requests to Gradio applications from Python |
|
environments. |
|
</div> |
|
</a> |
|
|
|
<a |
|
href="./docs/js-client" |
|
target="_self" |
|
class="shadow-alternate hover:scale-[1.02] group group relative flex flex-col overflow-hidden md:first:row-span-2 rounded-xl bg-gradient-to-r px-3 py-4 dark:border-gray-900 from-{data |
|
.COLOR_SETS[0]}-50 hover:shadow-alternate to-white shadow-none transition-shadow dark:from-gray-850 dark:to-gray-950 dark:hover:from-gray-800" |
|
> |
|
<div class="relative mb-2 flex items-center text-lg font-semibold"> |
|
<span>Javascript Client</span> |
|
</div> |
|
<code class=" text-md mb-2">@gradio/client</code> |
|
<div class="relative pr-4 text-lg font-light"> |
|
Make programmatic requests to Gradio applications in JavaScript |
|
(TypeScript) from the browser or server-side. |
|
</div> |
|
</a> |
|
|
|
<a |
|
href="./docs/third-party-clients" |
|
target="_self" |
|
class="shadow-alternate hover:scale-[1.02] group group relative flex flex-col overflow-hidden md:first:row-span-2 rounded-xl bg-gradient-to-r px-3 py-4 dark:border-gray-900 from-{data |
|
.COLOR_SETS[3]}-50 hover:shadow-alternate to-white shadow-none transition-shadow dark:from-gray-850 dark:to-gray-950 dark:hover:from-gray-800" |
|
> |
|
<div class="relative mb-2 flex items-center text-lg font-semibold"> |
|
<span>Third Party Clients</span> |
|
</div> |
|
<div class="relative pr-4 text-lg font-light"> |
|
Make programmatic requests to Gradio applications using third party |
|
clients built by the gradio community. |
|
</div> |
|
</a> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 gap-5 lg:flex lg:flex-row mt-8"> |
|
<a |
|
href="./docs/js" |
|
target="_self" |
|
class="w-full shadow-alternate hover:scale-[1.02] group group relative flex flex-col overflow-hidden md:first:row-span-2 rounded-xl bg-gradient-to-r px-3 py-4 dark:border-gray-900 from-{data |
|
.COLOR_SETS[4]}-50 hover:shadow-alternate to-white shadow-none transition-shadow dark:from-gray-850 dark:to-gray-950 dark:hover:from-gray-800" |
|
> |
|
<div class="relative mb-2 flex items-center text-lg font-semibold"> |
|
<span>Javascript Components</span> |
|
</div> |
|
<div class="relative pr-4 text-lg font-light"> |
|
Use Gradio's UI components in standalone JavaScript applications outside |
|
of the Gradio environment. |
|
</div> |
|
</a> |
|
|
|
<a |
|
href="../guides/custom-components-in-five-minutes" |
|
target="_self" |
|
class="w-full shadow-alternate hover:scale-[1.02] group group relative flex flex-col overflow-hidden md:first:row-span-2 rounded-xl bg-gradient-to-r px-3 py-4 dark:border-gray-900 from-{data |
|
.COLOR_SETS[2]}-50 hover:shadow-alternate to-white shadow-none transition-shadow dark:from-gray-850 dark:to-gray-950 dark:hover:from-gray-800" |
|
> |
|
<div class="relative mb-2 flex items-center text-lg font-semibold"> |
|
<span>Custom Components</span> |
|
</div> |
|
<div class="relative pr-4 text-lg font-light"> |
|
Create, use, and share your own custom components within a Gradio |
|
application. |
|
</div> |
|
</a> |
|
<a |
|
href="../guides/gradio-lite" |
|
target="_self" |
|
class="w-full shadow-alternate hover:scale-[1.02] group group relative flex flex-col overflow-hidden md:first:row-span-2 rounded-xl bg-gradient-to-r px-3 py-4 dark:border-gray-900 from-{data |
|
.COLOR_SETS[5]}-50 hover:shadow-alternate to-white shadow-none transition-shadow dark:from-gray-850 dark:to-gray-950 dark:hover:from-gray-800" |
|
> |
|
<div class="relative mb-2 flex items-center text-lg font-semibold"> |
|
<span>Gradio Lite</span> |
|
</div> |
|
<code class="font-light text-md mb-2">@gradio/lite</code> |
|
|
|
<div class="relative pr-4 text-lg font-light"> |
|
Run Gradio's Python code serverless (entirely in your browser) using |
|
WebAssembly. |
|
</div> |
|
</a> |
|
</div> |
|
|
|
<h1 class="mb-4 flex items-center text-2xl font-light mt-8"> |
|
<svg |
|
xmlns="http://www.w3.org/2000/svg" |
|
xmlns:xlink="http://www.w3.org/1999/xlink" |
|
aria-hidden="true" |
|
role="img" |
|
class="mr-1.5 text-gray-400 text-3xl" |
|
width="0.75em" |
|
height="0.75em" |
|
preserveAspectRatio="xMidYMid meet" |
|
viewBox="0 0 24 24" |
|
fill="currentColor" |
|
> |
|
<path |
|
d="M15,19H9c-0.6,0-1-0.4-1-1v-0.5c0-1.4-0.6-2.8-1.7-3.9C4.7,12,3.9,9.9,4,7.7C4.2,3.5,7.7,0.1,11.9,0L12,0 c4.4,0,8,3.6,8,8c0,2.1-0.8,4.2-2.4,5.7c-1.1,1-1.6,2.4-1.6,3.8V18C16,18.6,15.6,19,15,19z M10,17h4c0.1-1.8,0.9-3.4,2.2-4.8 C17.4,11.1,18,9.6,18,8c0-3.3-2.7-6-6-6l-0.1,0C8.8,2.1,6.1,4.6,6,7.8C5.9,9.4,6.6,11,7.7,12.2C9.1,13.6,9.9,15.3,10,17z" |
|
/> |
|
|
|
<path |
|
d="M12,24L12,24c-2.2,0-4-1.8-4-4v-2c0-0.6,0.4-1,1-1h6c0.6,0,1,0.4,1,1v2C16,22.2,14.2,24,12,24z M10,19v1c0,1.1,0.9,2,2,2 H12c1.1,0,2-0.9,2-2v-1H10z" |
|
/> |
|
|
|
<path |
|
d="M9,9C8.4,9,8,8.6,8,8c0-2.2,1.8-4,4-4c0.6,0,1,0.4,1,1s-0.4,1-1,1c-1.1,0-2,0.9-2,2C10,8.6,9.6,9,9,9z" |
|
/> |
|
</svg> |
|
Guides |
|
</h1> |
|
|
|
{#each data.guides_by_category as { category, guides }, i (category)} |
|
<div class="category py-4"> |
|
<h2 class="mb-4 text-xl font-normal block"> |
|
{category} |
|
</h2> |
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
{#each guides as guide (guide.name)} |
|
<a |
|
class="shadow-alternate hover:scale-[1.04] guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl bg-gradient-to-r px-3 py-4 from-{data |
|
.COLOR_SETS[ |
|
i |
|
]}-50 hover:shadow-alternate to-white shadow-none transition-shadow" |
|
href=".{guide.url}" |
|
> |
|
<div class="flex flex-col p-4 h-min"> |
|
<h2 class="text-lg"> |
|
{guide.pretty_name} |
|
</h2> |
|
<div class="tags-holder"> |
|
{#if guide.tags} |
|
<p class="text-gray-600"> |
|
|
|
{#each guide.tags as tag, j (tag)} |
|
{tag}{#if j !== guide.tags.length - 1}, {/if} |
|
{/each} |
|
|
|
</p> |
|
{/if} |
|
</div> |
|
</div> |
|
</a> |
|
{/each} |
|
</div> |
|
</div> |
|
{/each} |
|
</div> |
|
|
|
<style> |
|
.quick-link { |
|
transition: transform 0.1s ease-in-out; |
|
} |
|
</style> |
|
|
