File size: 1,376 Bytes
0ad74ed |
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 |
<script lang="ts">
import { hello } from "../assets/demo_code";
let tabs = [
{
title: "Hello World",
code: hello,
demo: "gradio/hello_world"
},
{
title: "Airbnb Map",
code: false,
demo: "gradio/map_airbnb"
},
{
title: "Chatbot Streaming",
code: false,
demo: "gradio/chatinterface_streaming_echo"
},
{
title: "Diffusion Faces",
code: false,
demo: "gradio/fake_gan"
}
];
let current_selection = 0;
</script>
<div class="container mx-auto mb-6 px-4 overflow-hidden">
<nav
class="flex lg:flex-wrap gap-3 overflow-x-auto py-1 lg:gap-6 whitespace-nowrap text-gray-600 md:text-lg mb-4 md:mb-0 lg:justify-center"
>
{#each tabs as { title }, i}
<div
on:click={() => (current_selection = i)}
class:active-example-tab={current_selection == i}
class="demo-tab hover:text-gray-800 cursor-pointer px-3 py-1"
>
{title}
</div>
{/each}
</nav>
</div>
<div class="container mx-auto mb-6 px-4 grid grid-cols-1">
{#each tabs as { demo, code }, i (demo)}
<div
class:hidden={i !== current_selection}
class="demo space-y-2 md:col-span-3"
>
<div
class:hidden={!code}
class="codeblock text-sm md:text-base mx-auto max-w-5xl"
>
{@html code}
</div>
<div class="mx-auto max-w-5xl">
{#key demo}
<gradio-app space={demo} />
{/key}
</div>
</div>
{/each}
</div>
|