File size: 3,370 Bytes
a03b3ba |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
<script lang="ts">
import DemosLite from "../../lib/components/DemosLite.svelte";
import MetaTags from "$lib/components/MetaTags.svelte";
import { page } from "$app/stores";
import { browser } from "$app/environment";
import { gradio_logo } from "$lib/assets";
export let data: {
demos_by_category: {
category: string;
demos: {
name: string;
dir: string;
code: string;
requirements: string[];
}[];
}[];
};
let all_demos = data.demos_by_category.flatMap((category) => category.demos);
let current_selection = all_demos[0].name;
let shared = "";
if (browser) {
let linked_demo = $page.url.searchParams.get("demo");
if (linked_demo) {
current_selection = linked_demo.replaceAll("_", " ");
shared = current_selection;
}
}
let show_nav = true;
$: show_nav;
</script>
<MetaTags
title="Gradio Playground"
url="https://gradio.app/playground"
canonical="https://gradio.app/playground"
description="Play Around with Gradio Demos"
/>
<!-- 4.0 Launch BANNER -->
<div class="flex-row">
<div class="flex flex-row relative items-center px-1 py-1 pr-6 text-lg gap-8">
<div class="flex">
<a href="/">
<img src={gradio_logo} alt="Gradio logo" />
</a>
<p class="self-center text-xl font-light -m-1">Playground</p>
</div>
<nav class="flex w-auto flex-row gap-6">
<a class="thin-link flex items-center gap-3" href="/docs" target="_blank"
><span>✍️</span> <span>Docs</span></a
>
<a
class="thin-link flex items-center gap-3"
href="/guides/gradio-lite"
target="_blank"><span>💡</span> <span>Gradio Lite</span></a
>
</nav>
</div>
</div>
<main class="playground flex flex-col justify-between">
<div class="container mx-auto px-4 gap-4">
<p class="mt-4 mb-8 text-lg text-gray-600 md:hidden">
Playground renders best on desktop.
</p>
</div>
<div class="w-full border border-gray-200 shadow-xl h-full relative">
<div
class="w-[200px] h-full rounded-tr-none rounded-bl-xl overflow-y-scroll mb-0 p-0 pb-4 text-md block rounded-t-xl bg-gradient-to-r from-white to-gray-50 overflow-x-clip"
style="word-break: normal; overflow-wrap: break-word; white-space:nowrap; width: {show_nav
? 200
: 37}px;"
>
<div class="flex justify-between align-middle h-8 border-b px-2">
{#if show_nav}
<h3 class="pl-2 pt-1">Demos</h3>
{/if}
<button
on:click={() => (show_nav = !show_nav)}
class="float-right text-gray-600 pl-1"
>{#if show_nav}←{:else}→{/if}</button
>
</div>
{#if show_nav}
<button
on:click={() => (current_selection = "Blank")}
class:current-playground-demo={current_selection == "Blank"}
class:shared-link={shared == "Blank"}
class="thin-link font-light px-4 mt-2 block">Blank</button
>
{#each data.demos_by_category as { category, demos } (category)}
<p class="px-4 my-2">{category}</p>
{#each demos as demo, i}
<button
on:click={() => (current_selection = demo.name)}
class:current-playground-demo={current_selection == demo.name}
class:shared-link={shared == demo.name}
class="thin-link font-light px-4 block">{demo.name}</button
>
{/each}
{/each}
{/if}
</div>
<DemosLite demos={all_demos} {current_selection} {show_nav} />
</div>
</main>
<style>
.code {
white-space: pre-wrap;
}
</style>
|