mirror of
https://github.com/gradio-app/gradio.git
synced 2024-11-27 01:40:20 +08:00
remove workbench (#4644)
This commit is contained in:
pngwn
GitHub
parent
12bc241ecb
commit
36f0b397c6
@ -10,5 +10,5 @@
|
||||
"access": "public",
|
||||
"baseBranch": "main",
|
||||
"updateInternalDependencies": "patch",
|
||||
"ignore": ["@gradio/app", "@gradio/spaces-test", "@gradio/workbench"]
|
||||
"ignore": ["@gradio/app", "@gradio/spaces-test"]
|
||||
}
|
||||
|
||||
@ -46,7 +46,6 @@ export default [
|
||||
{
|
||||
ignores: [
|
||||
".svelte-kit/**/*",
|
||||
"js/workbench",
|
||||
"**/node_modules/**",
|
||||
"**/dist/**",
|
||||
"**/.config/*",
|
||||
|
||||
8
js/workbench/.gitignore
vendored
8
js/workbench/.gitignore
vendored
@ -1,8 +0,0 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
@ -1 +0,0 @@
|
||||
engine-strict=true
|
||||
@ -1,40 +0,0 @@
|
||||
# create-svelte
|
||||
|
||||
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
|
||||
|
||||
## Creating a project
|
||||
|
||||
If you're seeing this, you've probably already done this step. Congrats!
|
||||
|
||||
```bash
|
||||
# create a new project in the current directory
|
||||
npm init svelte@next
|
||||
|
||||
# create a new project in my-app
|
||||
npm init svelte@next my-app
|
||||
```
|
||||
|
||||
> Note: the `@next` is temporary
|
||||
|
||||
## Developing
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To create a production version of your app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
||||
@ -1,52 +0,0 @@
|
||||
{
|
||||
"name": "@gradio/workbench",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "svelte-kit dev --port 3002",
|
||||
"build": "svelte-kit build",
|
||||
"preview": "svelte-kit preview",
|
||||
"check": "svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "next",
|
||||
"@sveltejs/kit": "^1.0.0-next.318",
|
||||
"autoprefixer": "^10.4.2",
|
||||
"postcss": "^8.4.5",
|
||||
"postcss-load-config": "^3.1.1",
|
||||
"svelte-check": "^3.0.0",
|
||||
"svelte-preprocess": "^5.0.0",
|
||||
"tailwindcss": "^3.0.12",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "~5.1.0"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@gradio/accordion": "workspace:^0.0.1",
|
||||
"@gradio/atoms": "workspace:^0.0.1",
|
||||
"@gradio/audio": "workspace:^0.0.1",
|
||||
"@gradio/button": "workspace:^0.0.1",
|
||||
"@gradio/chart": "workspace:^0.0.1",
|
||||
"@gradio/chatbot": "workspace:^0.0.1",
|
||||
"@gradio/file": "workspace:^0.0.1",
|
||||
"@gradio/form": "workspace:^0.0.1",
|
||||
"@gradio/gallery": "workspace:^0.0.1",
|
||||
"@gradio/highlighted-text": "workspace:^0.0.1",
|
||||
"@gradio/html": "workspace:^0.0.1",
|
||||
"@gradio/icons": "workspace:^0.0.1",
|
||||
"@gradio/image": "workspace:^0.0.1",
|
||||
"@gradio/json": "workspace:^0.0.1",
|
||||
"@gradio/label": "workspace:^0.0.1",
|
||||
"@gradio/markdown": "workspace:^0.0.1",
|
||||
"@gradio/model3D": "workspace:^0.0.1",
|
||||
"@gradio/plot": "workspace:^0.0.1",
|
||||
"@gradio/table": "workspace:^0.0.1",
|
||||
"@gradio/tabs": "workspace:^0.0.1",
|
||||
"@gradio/theme": "workspace:^0.0.1",
|
||||
"@gradio/upload": "workspace:^0.0.1",
|
||||
"@gradio/upload-button": "workspace:^0.0.1",
|
||||
"@gradio/video": "workspace:^0.0.1",
|
||||
"svelte": ">=3.44.0 <4.0.0"
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
const tailwindcss = require("tailwindcss");
|
||||
const autoprefixer = require("autoprefixer");
|
||||
const nested = require("tailwindcss/nesting");
|
||||
|
||||
module.exports = {
|
||||
plugins: [nested, tailwindcss(), autoprefixer]
|
||||
};
|
||||
@ -1,12 +0,0 @@
|
||||
/* Write your global styles here, in PostCSS syntax */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
13
js/workbench/src/app.d.ts
vendored
13
js/workbench/src/app.d.ts
vendored
@ -1,13 +0,0 @@
|
||||
/// <reference types="@sveltejs/kit" />
|
||||
|
||||
// See https://kit.svelte.dev/docs/typescript
|
||||
// for information about these interfaces
|
||||
declare namespace App {
|
||||
interface Locals {}
|
||||
|
||||
interface Platform {}
|
||||
|
||||
interface Session {}
|
||||
|
||||
interface Stuff {}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="%svelte.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%svelte.head%
|
||||
</head>
|
||||
<body>
|
||||
<div style="height: 100%">%svelte.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
@ -1,8 +0,0 @@
|
||||
time,value,price
|
||||
1,1,4
|
||||
2,3,8
|
||||
3,6,12
|
||||
4,10,16
|
||||
5,15,20
|
||||
6,21,24
|
||||
7,28,28
|
||||
|
@ -1 +0,0 @@
|
||||
export { default as Audio } from "./Audio.svelte";
|
||||
@ -1,45 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { page } from "$app/stores";
|
||||
const comp_routes = [
|
||||
["Forms", ["Forms"]],
|
||||
[
|
||||
"Media",
|
||||
["Audio", "File", "Image", "Gallery", "Video", "Model3D", "Upload"]
|
||||
],
|
||||
["Buttons", ["Button", "UploadButton"]],
|
||||
["Content", ["Markdown", "HTML", "JSON"]],
|
||||
["Data Science", ["Chart", "ScatterPlot", "Table"]],
|
||||
["Design", ["Atoms", "Theme"]],
|
||||
["Layout", ["Tabs", "Accordion"]],
|
||||
["Misc", ["Chatbot", "HighlightedText", "Label", "Dataset"]]
|
||||
].map((section) => [
|
||||
section[0],
|
||||
// @ts-ignore
|
||||
section[1].map((comp) => [comp, comp.toLowerCase()])
|
||||
]) as Array<[string, [string, string]]>;
|
||||
</script>
|
||||
|
||||
<nav class="inline-block">
|
||||
<ul class="flex flex-col px-6">
|
||||
{#each comp_routes as [section, comps]}
|
||||
<li>
|
||||
<h2 class="text-xs uppercase font-bold">{section}</h2>
|
||||
<ul class="mb-4 ml-2">
|
||||
{#each comps as [name, route]}
|
||||
{@const is_current = $page.url.pathname === `/${route}`}
|
||||
<li>
|
||||
<a
|
||||
class="font-mono text-md hover:text-orange-500 {is_current
|
||||
? 'text-orange-500'
|
||||
: ''} "
|
||||
href="/{route}"
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
@ -1,99 +0,0 @@
|
||||
<script>
|
||||
import "../app.css";
|
||||
import * as _ from "@gradio/theme";
|
||||
import Nav from "./_Nav.svelte";
|
||||
|
||||
let mode = "light";
|
||||
|
||||
export const ssr = false;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link
|
||||
rel="preconnect"
|
||||
href="https://fonts.gstatic.com"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<div class="{mode} min-w-full h-full">
|
||||
<header
|
||||
class=" px-6 py-2 border-b flex flex-row items-center text-orange-500 bg-gradient-to-r from-orange-50 to-white border-orange-50 dark:from-orange-900 dark:to-gray-900 dark:border-gray-900"
|
||||
>
|
||||
<svg
|
||||
class="mr-2"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 510 502"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M255.926 0.754768L509.702 139.936V221.027L255.926 81.8465V0.754768Z"
|
||||
fill="#FF7C00"
|
||||
fill-opacity="0.4"
|
||||
/>
|
||||
<path
|
||||
d="M509.69 139.936L254.981 279.641V361.255L509.69 221.55V139.936Z"
|
||||
fill="#FF7C00"
|
||||
/>
|
||||
<path
|
||||
d="M0.250138 139.937L254.981 279.641V361.255L0.250138 221.55V139.937Z"
|
||||
fill="#FF7C00"
|
||||
fill-opacity="0.4"
|
||||
/>
|
||||
<path
|
||||
d="M255.923 0.232622L0.236328 139.936V221.55L255.923 81.8469V0.232622Z"
|
||||
fill="#FF7C00"
|
||||
/>
|
||||
<path
|
||||
d="M255.926 141.5L509.702 280.681V361.773L255.926 222.592V141.5Z"
|
||||
fill="#FF7C00"
|
||||
fill-opacity="0.4"
|
||||
/>
|
||||
<path
|
||||
d="M509.69 280.679L254.981 420.384V501.998L509.69 362.293V280.679Z"
|
||||
fill="#FF7C00"
|
||||
/>
|
||||
<path
|
||||
d="M0.250138 280.681L254.981 420.386V502L0.250138 362.295V280.681Z"
|
||||
fill="#FF7C00"
|
||||
fill-opacity="0.4"
|
||||
/>
|
||||
<path
|
||||
d="M255.923 140.977L0.236328 280.68V362.294L255.923 222.591V140.977Z"
|
||||
fill="#FF7C00"
|
||||
/>
|
||||
</svg>
|
||||
<h1 class="font-semibold">workbench</h1>
|
||||
<div class="flex self-end ml-auto cursor-pointer">
|
||||
<p
|
||||
on:click={() => (mode = "light")}
|
||||
class="mr-2"
|
||||
class:font-bold={mode === "light"}
|
||||
>
|
||||
light
|
||||
</p>
|
||||
<p on:click={() => (mode = "dark")} class:font-bold={mode === "dark"}>
|
||||
dark
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex pt-6 {mode}">
|
||||
<Nav />
|
||||
|
||||
<main
|
||||
class="gradio-bg px-6 w-full"
|
||||
style="background: var(--background-fill-primary)"
|
||||
>
|
||||
<div class="gradio-interface">
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,12 +0,0 @@
|
||||
<script>
|
||||
import { Accordion } from "@gradio/accordion";
|
||||
import { Block } from "@gradio/atoms";
|
||||
</script>
|
||||
|
||||
<Block>
|
||||
<Accordion label="Accordion title">
|
||||
<h1>Hello</h1>
|
||||
<h2>hello two</h2>
|
||||
<p>this is some text</p>
|
||||
</Accordion>
|
||||
</Block>
|
||||
@ -1,49 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Block, BlockTitle, BlockLabel, IconButton } from "@gradio/atoms";
|
||||
|
||||
import { Brush } from "@gradio/icons";
|
||||
</script>
|
||||
|
||||
<Block>
|
||||
<div>
|
||||
<IconButton Icon={Brush} />
|
||||
<IconButton Icon={Brush} />
|
||||
<IconButton Icon={Brush} />
|
||||
<IconButton Icon={Brush} />
|
||||
</div>
|
||||
</Block>
|
||||
|
||||
<span />
|
||||
|
||||
<Block>
|
||||
<BlockTitle>Block</BlockTitle>
|
||||
<div />
|
||||
</Block>
|
||||
|
||||
<span />
|
||||
|
||||
<Block>
|
||||
<BlockLabel Icon={Brush} label="Block" />
|
||||
<span />
|
||||
<div>Hello</div>
|
||||
<div>
|
||||
<IconButton Icon={Brush} />
|
||||
<IconButton Icon={Brush} />
|
||||
<IconButton Icon={Brush} />
|
||||
<IconButton Icon={Brush} />
|
||||
</div>
|
||||
</Block>
|
||||
|
||||
<span />
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
height: 200px;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
height: 1rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,46 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Audio, StaticAudio } from "@gradio/audio";
|
||||
import { Block } from "@gradio/atoms";
|
||||
</script>
|
||||
|
||||
<Block variant={"dashed"} color={"grey"} padding={false}>
|
||||
<Audio label="Dynamic Audio" source="microphone">
|
||||
<div class="flex flex-col">
|
||||
drop
|
||||
<span class="text-gray-300">- or -</span>
|
||||
upload
|
||||
</div>
|
||||
</Audio>
|
||||
</Block>
|
||||
<span />
|
||||
<Block variant={"dashed"} color={"grey"} padding={false}>
|
||||
<Audio label="Dynamic Audio" source="upload" value={null}>
|
||||
<div class="flex flex-col">
|
||||
drop
|
||||
<span class="text-gray-300">- or -</span>
|
||||
upload
|
||||
</div>
|
||||
</Audio>
|
||||
</Block>
|
||||
|
||||
<span />
|
||||
<Block variant={"solid"} color={"grey"} padding={false}>
|
||||
<StaticAudio name={"audio_file"} label="Static Audio - no vadatalue" />
|
||||
</Block>
|
||||
|
||||
<span />
|
||||
|
||||
<Block variant={"solid"} color={"grey"} padding={false}>
|
||||
<StaticAudio
|
||||
name={"audio_file"}
|
||||
label="Static Audio - with data"
|
||||
value={{ name: "myfile.wav", data: "asd" }}
|
||||
/>
|
||||
</Block>
|
||||
|
||||
<style>
|
||||
span {
|
||||
display: block;
|
||||
height: 1rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,15 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Button } from "@gradio/button";
|
||||
</script>
|
||||
|
||||
<Button variant="primary">Primary</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="stop">Stop</Button>
|
||||
<Button>Default</Button>
|
||||
|
||||
<div class="h-6" />
|
||||
|
||||
<Button size="sm" variant="primary">Primary</Button>
|
||||
<Button size="sm" variant="secondary">Secondary</Button>
|
||||
<Button size="sm" variant="stop">Stop</Button>
|
||||
<Button size="sm">Default</Button>
|
||||
@ -1,47 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Chart } from "@gradio/chart";
|
||||
|
||||
const csv = `time,value,price
|
||||
1,1,4
|
||||
2,3,8
|
||||
3,6,12
|
||||
4,10,16
|
||||
5,15,20
|
||||
6,21,24
|
||||
7,28,28`;
|
||||
|
||||
const csv2 = `time,value,price
|
||||
0.01,0.01,0.04
|
||||
0.02,0.03,0.08
|
||||
0.03,0.06,0.12
|
||||
0.04,0.10,0.16
|
||||
0.05,0.15,0.20
|
||||
0.06,0.21,0.24
|
||||
0.07,0.28,0.28`;
|
||||
|
||||
const csv3 = `time,value,price
|
||||
1.1,1.1,4.4
|
||||
2.2,3.3,8.8
|
||||
3.3,6.6,12.12
|
||||
4.4,10.10,16.16
|
||||
5.5,15.15,20.20
|
||||
6.6,21.21,24.24
|
||||
7.7,28.28,28.28`;
|
||||
|
||||
const csv4 = `time,value,price
|
||||
1,-1.1,-4.4
|
||||
2,-3.3,-8.8
|
||||
3,-6.6,-12.12
|
||||
4,-10.10,-16.16
|
||||
5,-15.15,-20.20
|
||||
6,-21.21,-24.24
|
||||
7,-28.28,-28.28`;
|
||||
</script>
|
||||
|
||||
<Chart value={csv} />
|
||||
|
||||
<Chart value={csv2} colors={["teal", "pink"]} />
|
||||
|
||||
<Chart value={csv3} colors={["purple", "lime"]} />
|
||||
|
||||
<Chart value={csv4} />
|
||||
@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { ChatBot } from "@gradio/chatbot";
|
||||
|
||||
let messages: Array<[string, string]> = [["message one", "message two"]];
|
||||
|
||||
setTimeout(() => {
|
||||
messages = [...messages, ["message five", "•••"]];
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
messages[messages.length - 1][1] = "message six";
|
||||
messages = messages;
|
||||
}, 2000);
|
||||
</script>
|
||||
|
||||
<ChatBot value={messages} color_map={["purple", "red"]} />
|
||||
@ -1,62 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { FileUpload, File } from "@gradio/file";
|
||||
import { Block } from "@gradio/atoms";
|
||||
</script>
|
||||
|
||||
<!-- <FileUpload value={null} /> -->
|
||||
|
||||
<Block padding={false}>
|
||||
<FileUpload label="File upload - single" value={null}>
|
||||
drop file
|
||||
<br />
|
||||
- or -
|
||||
<br />
|
||||
click to upload
|
||||
</FileUpload>
|
||||
</Block>
|
||||
<span />
|
||||
|
||||
<Block padding={false}>
|
||||
<FileUpload label="File upload - multiple" value={null} file_count="multiple">
|
||||
drop file
|
||||
<br />
|
||||
- or -
|
||||
<br />
|
||||
click to upload
|
||||
</FileUpload>
|
||||
</Block>
|
||||
<span />
|
||||
|
||||
<Block padding={false}>
|
||||
<File label="Static File - no value" value={null} />
|
||||
</Block>
|
||||
|
||||
<span />
|
||||
|
||||
<Block padding={false}>
|
||||
<File
|
||||
value={{ data: "asd", name: "myfile.txt", size: 123456789 }}
|
||||
label="Static File - with value"
|
||||
/>
|
||||
</Block>
|
||||
|
||||
<span />
|
||||
<Block padding={false}>
|
||||
<File
|
||||
value={[
|
||||
{ data: "asd", name: "myfile.txt", size: 123456789 },
|
||||
{ data: "asdas", name: "myfile2.svg", size: 12345678 },
|
||||
{ data: "asdas", name: "myfile3.jpg", size: 1234567 },
|
||||
{ data: "asdas", name: "myfile4.mov", size: 12345 }
|
||||
]}
|
||||
label="Static File - with value (multiple)"
|
||||
/>
|
||||
</Block>
|
||||
<span />
|
||||
|
||||
<style>
|
||||
span {
|
||||
display: block;
|
||||
height: 1rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,102 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
Checkbox,
|
||||
CheckboxGroup,
|
||||
Dropdown,
|
||||
Radio,
|
||||
TextBox,
|
||||
Number,
|
||||
Range,
|
||||
ColorPicker
|
||||
} from "@gradio/form";
|
||||
import { Block } from "@gradio/atoms";
|
||||
</script>
|
||||
|
||||
<Block>
|
||||
<TextBox
|
||||
on:change={({ detail }) => console.log(detail)}
|
||||
label="TextBox"
|
||||
max_lines={1}
|
||||
/>
|
||||
<TextBox
|
||||
on:change={({ detail }) => console.log(detail)}
|
||||
label="TextBox with max_lines"
|
||||
lines={2}
|
||||
max_lines={5}
|
||||
/>
|
||||
|
||||
<TextBox
|
||||
label="TextArea"
|
||||
lines={5}
|
||||
max_lines={20}
|
||||
on:change={({ detail }) => console.log(detail)}
|
||||
placeholder="Type here..."
|
||||
/>
|
||||
|
||||
<TextBox
|
||||
label="TextArea with equal lines + max_lines"
|
||||
lines={2}
|
||||
max_lines={2}
|
||||
on:change={({ detail }) => console.log(detail)}
|
||||
placeholder="Type here..."
|
||||
/>
|
||||
|
||||
<Number label="Number" on:change={({ detail }) => console.log(detail)} />
|
||||
|
||||
<Radio label="Radio" choices={["true", "false"]} value={"true"} />
|
||||
|
||||
<Checkbox label="Checkbox" value={false} />
|
||||
|
||||
<CheckboxGroup label="CheckboxGroup" choices={["one", "two"]} value={[]} />
|
||||
|
||||
<Dropdown label="Dropdown" choices={["one", "two", "three"]} />
|
||||
<Range label="Dropdown" />
|
||||
|
||||
<TextBox
|
||||
on:change={({ detail }) => console.log(detail)}
|
||||
label="Static TextBox"
|
||||
disabled
|
||||
value="Some text"
|
||||
/>
|
||||
|
||||
<TextBox
|
||||
label="Static TextArea"
|
||||
lines={5}
|
||||
on:change={({ detail }) => console.log(detail)}
|
||||
placeholder="Type here..."
|
||||
disabled
|
||||
value={`Some longer text.
|
||||
Some more.
|
||||
|
||||
And more.`}
|
||||
/>
|
||||
|
||||
<Number
|
||||
label="Number"
|
||||
on:change={({ detail }) => console.log(detail)}
|
||||
disabled
|
||||
value={10}
|
||||
/>
|
||||
|
||||
<Radio label="Radio" choices={["true", "false"]} value={"true"} disabled />
|
||||
|
||||
<Checkbox label="Checkbox" value={false} disabled />
|
||||
|
||||
<CheckboxGroup
|
||||
label="CheckboxGroup"
|
||||
choices={["one", "two"]}
|
||||
value={["one"]}
|
||||
disabled
|
||||
/>
|
||||
|
||||
<Dropdown
|
||||
label="Dropdown"
|
||||
choices={["one", "two", "three"]}
|
||||
value="three"
|
||||
disabled
|
||||
/>
|
||||
|
||||
<Range label="Dropdown" value={27} disabled />
|
||||
|
||||
<ColorPicker label="Color" />
|
||||
</Block>
|
||||
@ -1,28 +0,0 @@
|
||||
<script>
|
||||
import { Block } from "@gradio/atoms";
|
||||
import { Gallery } from "@gradio/gallery";
|
||||
|
||||
const value = [
|
||||
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
|
||||
"https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80",
|
||||
"https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80",
|
||||
"https://images.unsplash.com/photo-1546456073-92b9f0a8d413?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
|
||||
"https://images.unsplash.com/photo-1601412436009-d964bd02edbc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80"
|
||||
];
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<Block padding={false}>
|
||||
<Gallery label="Image gallery" {value} />
|
||||
</Block>
|
||||
|
||||
<Block padding={false}>
|
||||
<Gallery label="Image gallery" value={null} />
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
@ -1,64 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { HighlightedText } from "@gradio/highlighted-text";
|
||||
</script>
|
||||
|
||||
<h2 class="my-2">With legend</h2>
|
||||
<HighlightedText
|
||||
show_legend={true}
|
||||
value={[
|
||||
["one", "1"],
|
||||
["two", "2"],
|
||||
["three", "3"],
|
||||
["The", null],
|
||||
["two", "2"],
|
||||
["three", "3"]
|
||||
]}
|
||||
/>
|
||||
|
||||
<h2 class="my-2">Without legend</h2>
|
||||
<HighlightedText
|
||||
value={[
|
||||
["Frank ", "Name"],
|
||||
["lives in ", null],
|
||||
["Paris", "Loc"],
|
||||
[" and is aged ", null],
|
||||
["37", "Age"]
|
||||
]}
|
||||
/>
|
||||
|
||||
<h2 class="my-2">Custom color_map with legend</h2>
|
||||
<HighlightedText
|
||||
show_legend={true}
|
||||
value={[
|
||||
["one", "+"],
|
||||
["two", "-"],
|
||||
["three", "-"],
|
||||
["two", "+"],
|
||||
["three", "-"]
|
||||
]}
|
||||
color_map={{ "+": "green", "-": "red" }}
|
||||
/>
|
||||
|
||||
<h2 class="my-2">Custom color_map without legend</h2>
|
||||
<HighlightedText
|
||||
value={[
|
||||
["one", "+"],
|
||||
["two", "-"],
|
||||
["three", "-"],
|
||||
["two", "+"],
|
||||
["three", "-"]
|
||||
]}
|
||||
color_map={{ "+": "orange", "-": "purple" }}
|
||||
/>
|
||||
|
||||
<h2 class="my-2">Scores with legend</h2>
|
||||
<HighlightedText
|
||||
show_legend={true}
|
||||
value={[
|
||||
["one", 0],
|
||||
["two", -1],
|
||||
["three", 0.3],
|
||||
["two", -0.3],
|
||||
["three", 1]
|
||||
]}
|
||||
/>
|
||||
@ -1,12 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { HTML } from "@gradio/html";
|
||||
|
||||
const src = `<h1>title</h1>
|
||||
<p>some text</p>
|
||||
<blockquote>some quote</blockquote>
|
||||
<h2>second title</h2>
|
||||
<p>some more text</p>
|
||||
<p>text with <a href="asd">a link</a></p>`;
|
||||
</script>
|
||||
|
||||
<HTML value={src} />
|
||||
@ -1,88 +0,0 @@
|
||||
<script lang="ts">
|
||||
import img from "../assets/cheetah1.jpg";
|
||||
import { browser } from "$app/env";
|
||||
import { Image, StaticImage } from "@gradio/image";
|
||||
import { Block } from "@gradio/atoms";
|
||||
|
||||
const src = `<h1>hello</h1>`;
|
||||
</script>
|
||||
|
||||
{#if browser}
|
||||
<Block padding={false}>
|
||||
<Image
|
||||
label="Editor with upload"
|
||||
value={null}
|
||||
source={"upload"}
|
||||
tool="editor"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
drop
|
||||
<span class="text-gray-300">- or -</span>
|
||||
upload
|
||||
</div>
|
||||
</Image>
|
||||
</Block>
|
||||
<span />
|
||||
<Block padding={false}>
|
||||
<Image
|
||||
label="Editor with webcam"
|
||||
value={null}
|
||||
source={"webcam"}
|
||||
tool="editor"
|
||||
/>
|
||||
</Block>
|
||||
<span />
|
||||
<Block padding={false}>
|
||||
<Image
|
||||
label="Editor with sketch"
|
||||
value={null}
|
||||
source={"canvas"}
|
||||
tool="editor"
|
||||
/>
|
||||
</Block>
|
||||
<span />
|
||||
<Block padding={false}>
|
||||
<Image
|
||||
label="Editor with color sketch"
|
||||
value={null}
|
||||
source={"canvas"}
|
||||
tool="color-sketch"
|
||||
/>
|
||||
</Block>
|
||||
|
||||
<span />
|
||||
|
||||
<Block padding={false}>
|
||||
<Image
|
||||
label="Editor with cropper"
|
||||
value={null}
|
||||
source={"upload"}
|
||||
tool="select"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
drop
|
||||
<span class="text-gray-300">- or -</span>
|
||||
upload
|
||||
</div>
|
||||
</Image>
|
||||
</Block>
|
||||
|
||||
<span />
|
||||
|
||||
<Block padding={false}>
|
||||
<StaticImage label="Static - no value" value={null} />
|
||||
</Block>
|
||||
|
||||
<span />
|
||||
|
||||
<Block padding={false}>
|
||||
<StaticImage label="Static - with value" value={img} />
|
||||
</Block>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
span {
|
||||
display: block;
|
||||
height: 1rem;
|
||||
}
|
||||
</style>
|
||||
@ -1 +0,0 @@
|
||||
<p>choose a component</p>
|
||||
@ -1,39 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Block } from "@gradio/atoms";
|
||||
import { JSON } from "@gradio/json";
|
||||
|
||||
const json = {
|
||||
a: 1,
|
||||
b: "two",
|
||||
c: [
|
||||
1,
|
||||
"two",
|
||||
[1, 2, 3],
|
||||
{
|
||||
a: 1,
|
||||
b: "two",
|
||||
c: [1, "two", []]
|
||||
}
|
||||
],
|
||||
d: {
|
||||
a: 1,
|
||||
b: "two",
|
||||
c: [
|
||||
1,
|
||||
"two",
|
||||
[1, 2, 3],
|
||||
{
|
||||
a: 1,
|
||||
b: "two",
|
||||
c: [1, "two", []]
|
||||
}
|
||||
]
|
||||
},
|
||||
e: null,
|
||||
f: false
|
||||
};
|
||||
</script>
|
||||
|
||||
<Block>
|
||||
<JSON value={json} />
|
||||
</Block>
|
||||
@ -1,24 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Label } from "@gradio/label";
|
||||
|
||||
const data = {
|
||||
label: "hello",
|
||||
confidences: [
|
||||
{ label: "Tiger", confidence: 0.9 },
|
||||
{ label: "Puma", confidence: 0.6 },
|
||||
{ label: "Leopard", confidence: 0.5 },
|
||||
{ label: "Lion", confidence: 0.2 },
|
||||
{ label: "Lynx", confidence: 0.1 }
|
||||
]
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="space-y-6">
|
||||
<h2>Without confidence</h2>
|
||||
|
||||
<Label value={{ label: "hello" }} />
|
||||
|
||||
<h2>With confidence</h2>
|
||||
|
||||
<Label value={data} />
|
||||
</div>
|
||||
@ -1,185 +0,0 @@
|
||||
<script>
|
||||
import { Markdown } from "@gradio/markdown";
|
||||
|
||||
const src = `<h1>h1 Heading 😎</h1>
|
||||
<h2>h2 Heading</h2>
|
||||
<h3>h3 Heading</h3>
|
||||
<h4>h4 Heading</h4>
|
||||
<h5>h5 Heading</h5>
|
||||
<h6>h6 Heading</h6>
|
||||
<h2>Horizontal Rules</h2>
|
||||
<hr>
|
||||
<h2>Typographic replacements</h2>
|
||||
<p>Enable typographer option to see result.</p>
|
||||
<p>© © ® ® ™ ™ (p) (P) ±</p>
|
||||
<p>test… test… test… test?.. test!..</p>
|
||||
<p>!!! ??? , – —</p>
|
||||
<p>“Smartypants, double quotes” and ‘single quotes’</p>
|
||||
<h2>Emphasis</h2>
|
||||
<p><strong>This is bold text</strong></p>
|
||||
<p><em>This is italic text</em></p>
|
||||
<p><s>Strikethrough</s></p>
|
||||
<h2>Blockquotes</h2>
|
||||
<blockquote>
|
||||
<p>Blockquotes can also be nested…</p>
|
||||
<blockquote>
|
||||
<p>…by using additional greater-than signs right next to each other…</p>
|
||||
<blockquote>
|
||||
<p>…or with spaces between arrows.</p>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
<h2>Lists</h2>
|
||||
<p>Unordered</p>
|
||||
<ul>
|
||||
<li>Create a list by starting a line with <code>+</code>, <code>-</code>, or <code>*</code></li>
|
||||
<li>Sub-lists are made by indenting 2 spaces:
|
||||
<ul>
|
||||
<li>Marker character change forces new list start:
|
||||
<ul>
|
||||
<li>Ac tristique libero volutpat at</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Facilisis in pretium nisl aliquet</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Nulla volutpat aliquam velit</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Very easy!</li>
|
||||
</ul>
|
||||
<p>Ordered</p>
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>Consectetur adipiscing elit</li>
|
||||
<li>Integer molestie lorem at massa</li>
|
||||
</ol>
|
||||
<h2>Code</h2>
|
||||
<p>Inline <code>code</code></p>
|
||||
<pre class="hljs language-js"><code><span class="hljs-keyword">var</span> foo = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">bar</span>) </span>{
|
||||
<span class="hljs-keyword">return</span> bar++;
|
||||
};
|
||||
|
||||
<span class="hljs-built_in">console</span>.log(foo(<span class="hljs-number">5</span>));
|
||||
</code></pre>
|
||||
<h2>Tables</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>data</td>
|
||||
<td>path to data files to supply the data that will be passed into templates.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>engine</td>
|
||||
<td>engine to be used for processing templates. Handlebars is the default.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ext</td>
|
||||
<td>extension to be used for dest files.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Right aligned columns</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:right">Option</th>
|
||||
<th style="text-align:right">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="text-align:right">data</td>
|
||||
<td style="text-align:right">path to data files to supply the data that will be passed into templates.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:right">engine</td>
|
||||
<td style="text-align:right">engine to be used for processing templates. Handlebars is the default.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:right">ext</td>
|
||||
<td style="text-align:right">extension to be used for dest files.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Links</h2>
|
||||
<p><a href="http://dev.nodeca.com">link text</a></p>
|
||||
<p><a href="http://nodeca.github.io/pica/demo/" title="title text!">link with title</a></p>
|
||||
<h2>Images</h2>
|
||||
<p><img src="https://octodex.github.com/images/minion.png" alt="Minion"></p>
|
||||
<p>Like links, Images also have a footnote style syntax</p>
|
||||
<p><img src="https://octodex.github.com/images/dojocat.jpg" alt="Alt text" title="The Dojocat"></p>
|
||||
<p>With a reference later in the document defining the URL location:</p>
|
||||
<h3><a href="https://github.com/markdown-it/markdown-it-emoji">Emojies</a></h3>
|
||||
<blockquote>
|
||||
<p>Classic markup: 😉 :crush: 😢 :tear: 😆 😋</p>
|
||||
<p>Shortcuts (emoticons): 😃 😦 😎 😉</p>
|
||||
</blockquote>
|
||||
<p>see <a href="https://github.com/markdown-it/markdown-it-emoji#change-output">how to change output</a> with twemoji.</p>
|
||||
<h3><a href="https://github.com/markdown-it/markdown-it-sub">Subscript</a> / <a href="https://github.com/markdown-it/markdown-it-sup">Superscript</a></h3>
|
||||
<ul>
|
||||
<li>19<sup>th</sup></li>
|
||||
<li>H<sub>2</sub>O</li>
|
||||
</ul>
|
||||
<h3><a href="https://github.com/markdown-it/markdown-it-ins"><ins></a></h3>
|
||||
<p><ins>Inserted text</ins></p>
|
||||
<h3><a href="https://github.com/markdown-it/markdown-it-mark"><mark></a></h3>
|
||||
<p><mark>Marked text</mark></p>
|
||||
<h3><a href="https://github.com/markdown-it/markdown-it-footnote">Footnotes</a></h3>
|
||||
<p>Footnote 1 link<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>.</p>
|
||||
<p>Footnote 2 link<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup>.</p>
|
||||
<p>Inline footnote<sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup> definition.</p>
|
||||
<p>Duplicated footnote reference<sup class="footnote-ref"><a href="#fn2" id="fnref2:1">[2:1]</a></sup>.</p>
|
||||
<h3><a href="https://github.com/markdown-it/markdown-it-deflist">Definition lists</a></h3>
|
||||
<dl>
|
||||
<dt>Term 1</dt>
|
||||
<dd>
|
||||
<p>Definition 1
|
||||
with lazy continuation.</p>
|
||||
</dd>
|
||||
<dt>Term 2 with <em>inline markup</em></dt>
|
||||
<dd>
|
||||
<p>Definition 2</p>
|
||||
<pre><code> { some code, part of Definition 2 }
|
||||
</code></pre>
|
||||
<p>Third paragraph of definition 2.</p>
|
||||
</dd>
|
||||
</dl>
|
||||
<p><em>Compact style:</em></p>
|
||||
<dl>
|
||||
<dt>Term 1</dt>
|
||||
<dd>Definition 1</dd>
|
||||
<dt>Term 2</dt>
|
||||
<dd>Definition 2a</dd>
|
||||
<dd>Definition 2b</dd>
|
||||
</dl>
|
||||
<h3><a href="https://github.com/markdown-it/markdown-it-abbr">Abbreviations</a></h3>
|
||||
<p>This is <abbr title="Hyper Text Markup Language">HTML</abbr> abbreviation example.</p>
|
||||
<p>It converts “<abbr title="Hyper Text Markup Language">HTML</abbr>”, but keep intact partial entries like “xxxHTMLyyy” and so on.</p>
|
||||
<h3><a href="https://github.com/markdown-it/markdown-it-container">Custom containers</a></h3>
|
||||
<div class="warning">
|
||||
<p><em>here be dragons</em></p>
|
||||
</div>
|
||||
<hr class="footnotes-sep">
|
||||
<section class="footnotes">
|
||||
<ol class="footnotes-list">
|
||||
<li id="fn1" class="footnote-item"><p>Footnote <strong>can have markup</strong></p>
|
||||
<p>and multiple paragraphs. <a href="#fnref1" class="footnote-backref">↩︎</a></p>
|
||||
</li>
|
||||
<li id="fn2" class="footnote-item"><p>Footnote text. <a href="#fnref2" class="footnote-backref">↩︎</a> <a href="#fnref2:1" class="footnote-backref">↩︎</a></p>
|
||||
</li>
|
||||
<li id="fn3" class="footnote-item"><p>Text of inline footnote <a href="#fnref3" class="footnote-backref">↩︎</a></p>
|
||||
</li>
|
||||
</ol>
|
||||
</section>`;
|
||||
</script>
|
||||
|
||||
<Markdown value={src} />
|
||||
@ -1,24 +0,0 @@
|
||||
<script>
|
||||
import { Block } from "@gradio/atoms";
|
||||
import { Model3D, Model3DUpload } from "@gradio/model3D";
|
||||
</script>
|
||||
|
||||
<Block padding={false}>
|
||||
<Model3DUpload label="Model3D upload" value={null} />
|
||||
</Block>
|
||||
<span />
|
||||
<Block padding={false}>
|
||||
<Model3D value={null} label="Model3D - no value" />
|
||||
</Block>
|
||||
<span />
|
||||
<Block padding={false}>
|
||||
<Model3D value={null} label="Model3D - with value" />
|
||||
</Block>
|
||||
<span />
|
||||
|
||||
<style>
|
||||
span {
|
||||
display: block;
|
||||
height: 1rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,49 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Table } from "@gradio/table";
|
||||
|
||||
const src = [
|
||||
[1, "Two", "Three"],
|
||||
[2, "Four", "Five"],
|
||||
[3, "Six", "Seven"]
|
||||
];
|
||||
|
||||
let values = [[1, "Two", "Three"]];
|
||||
|
||||
const src_two = [
|
||||
[
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing."
|
||||
],
|
||||
[
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing."
|
||||
],
|
||||
[
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
|
||||
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing."
|
||||
]
|
||||
];
|
||||
</script>
|
||||
|
||||
<Table
|
||||
{values}
|
||||
headers={["Num", "Two", "Three"]}
|
||||
col_count={[3, "dynamic"]}
|
||||
editable
|
||||
row_count={[3, "dynamic"]}
|
||||
label={"Data"}
|
||||
/>
|
||||
<button class="gr-button" on:click={() => (values = src)}>Populate</button>
|
||||
|
||||
<Table
|
||||
wrap={true}
|
||||
values={src_two}
|
||||
headers={["Num", "Two", "Three"]}
|
||||
col_count={[3, "dynamic"]}
|
||||
editable
|
||||
row_count={[3, "dynamic"]}
|
||||
label={"Data"}
|
||||
/>
|
||||
@ -1,155 +0,0 @@
|
||||
<script>
|
||||
import { Tabs, TabItem } from "@gradio/tabs";
|
||||
</script>
|
||||
|
||||
<Tabs>
|
||||
<TabItem name="tab 1" on:select={() => console.log("tab 1")}>
|
||||
<h1>HELLO FROM TAB 1</h1>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 2" on:select={() => console.log("tab 2")}>
|
||||
<h1>HELLO FROM TAB 2</h1>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 3" on:select={() => console.log("tab 3")}>
|
||||
<h1>HELLO FROM TAB 2</h1>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
<Tabs>
|
||||
<TabItem name="tab 1" on:select={() => console.log("tab 1")}>
|
||||
<h1>HELLO FROM TAB 1</h1>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 2" on:select={() => console.log("tab 2")}>
|
||||
<h1>HELLO FROM TAB 2</h1>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 3" on:select={() => console.log("tab 3")}>
|
||||
<Tabs>
|
||||
<TabItem name="tab 1" on:select={() => console.log("tab 1")}>
|
||||
<h1>HELLO FROM TAB 1</h1>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 2" on:select={() => console.log("tab 2")}>
|
||||
<h1>HELLO FROM TAB 2</h1>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 3" on:select={() => console.log("tab 3")}>
|
||||
<h1>HELLO FROM TAB 3</h1>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
<div style="width: 500px; overflow: hidden;">
|
||||
<Tabs>
|
||||
<TabItem name="tab 1" on:select={() => console.log("tab 1")}>
|
||||
<h1>HELLO FROM TAB 1</h1>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 2" on:select={() => console.log("tab 2")}>
|
||||
<h1>HELLO FROM TAB 2</h1>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 3" on:select={() => console.log("tab 3")}>
|
||||
<h1>HELLO FROM TAB 2</h1>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 1" on:select={() => console.log("tab 1")}>
|
||||
<h1>HELLO FROM TAB 1</h1>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 2" on:select={() => console.log("tab 2")}>
|
||||
<h1>HELLO FROM TAB 2</h1>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 3" on:select={() => console.log("tab 3")}>
|
||||
<h1>HELLO FROM TAB 2</h1>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 1" on:select={() => console.log("tab 1")}>
|
||||
<h1>HELLO FROM TAB 1</h1>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 2" on:select={() => console.log("tab 2")}>
|
||||
<h1>HELLO FROM TAB 2</h1>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 3" on:select={() => console.log("tab 3")}>
|
||||
<h1>HELLO FROM TAB 2</h1>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 1" on:select={() => console.log("tab 1")}>
|
||||
<h1>HELLO FROM TAB 1</h1>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 2" on:select={() => console.log("tab 2")}>
|
||||
<h1>HELLO FROM TAB 2</h1>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 3" on:select={() => console.log("tab 3")}>
|
||||
<h1>HELLO FROM TAB 2</h1>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 1" on:select={() => console.log("tab 1")}>
|
||||
<h1>HELLO FROM TAB 1</h1>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 2" on:select={() => console.log("tab 2")}>
|
||||
<h1>HELLO FROM TAB 2</h1>
|
||||
</TabItem>
|
||||
|
||||
<TabItem name="tab 3" on:select={() => console.log("tab 3")}>
|
||||
<h1>HELLO FROM TAB 2</h1>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
<p>I am text</p>
|
||||
<blockquote>I am a quote</blockquote>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
</div>
|
||||
@ -1,88 +0,0 @@
|
||||
<script>
|
||||
const colors = {
|
||||
focus: {
|
||||
secondary: "var(--color-blue-300)",
|
||||
primary: "var(--color-blue-500)"
|
||||
},
|
||||
background: {
|
||||
primary: "white",
|
||||
secondary: "var(--color-grey-50)",
|
||||
tertiary: "white"
|
||||
},
|
||||
text: {
|
||||
body: "var(--color-grey-700)",
|
||||
label: "var(--color-grey)",
|
||||
placeholder: "var(--color-grey-400)",
|
||||
subdued: "var(--color-grey-400)"
|
||||
},
|
||||
border: {
|
||||
primary: "var(--color-grey-200)",
|
||||
secondary: "var(--color-grey-600)",
|
||||
highlight: "color.accent.base"
|
||||
},
|
||||
accent: {
|
||||
base: "var(--color-orange-500)",
|
||||
light: "var(--color-orange-300)",
|
||||
dark: "var(--color-orange-700)",
|
||||
muted: "var(--color-orange-50)"
|
||||
},
|
||||
button: {
|
||||
default: "",
|
||||
cta: "var(--color-orange-500)",
|
||||
warning: "var(--color-red)"
|
||||
},
|
||||
functional: {
|
||||
error: "var(--color-red)", //red
|
||||
info: "var(--color-yellow-300)", //yellow
|
||||
success: "var(--color-green)" //green
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<h1>Theme</h1>
|
||||
|
||||
{#each Object.entries(colors) as [type, cols]}
|
||||
<h2>{type}</h2>
|
||||
<div class="type">
|
||||
{#each Object.entries(cols) as [name, c]}
|
||||
<div>
|
||||
<div class="col" style:background-color={c} />
|
||||
<h3>{name}</h3>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.col {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: end;
|
||||
margin-right: 40px;
|
||||
border-radius: 5px;
|
||||
padding-bottom: 3px;
|
||||
padding-left: 7px;
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-left: 2px;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.type {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
@ -1,81 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Upload } from "@gradio/upload";
|
||||
import { Block } from "@gradio/atoms";
|
||||
</script>
|
||||
|
||||
<Block>
|
||||
<Upload
|
||||
on:load={({ detail }) => console.log("change", detail)}
|
||||
filetype="image/*"
|
||||
>
|
||||
<div>
|
||||
<pre>filetype="image/*</pre>
|
||||
<br />
|
||||
drag or click
|
||||
</div>
|
||||
</Upload>
|
||||
</Block>
|
||||
<span />
|
||||
<Block>
|
||||
<Upload
|
||||
on:load={({ detail }) => console.log("change", detail)}
|
||||
filetype="file"
|
||||
>
|
||||
<div>
|
||||
<pre>filetype="file"</pre>
|
||||
<br />
|
||||
drag or click
|
||||
</div>
|
||||
</Upload>
|
||||
</Block>
|
||||
<span />
|
||||
<Block>
|
||||
<Upload
|
||||
on:load={({ detail }) => console.log("change", detail)}
|
||||
filetype="audio/*"
|
||||
>
|
||||
<div>
|
||||
<pre>filetype="audio/*"</pre>
|
||||
<br />
|
||||
drag or click
|
||||
</div>
|
||||
</Upload>
|
||||
</Block>
|
||||
<span />
|
||||
<Block>
|
||||
<Upload
|
||||
on:load={({ detail }) => console.log("change", detail)}
|
||||
filetype="text/csv"
|
||||
>
|
||||
<div>
|
||||
<pre>filetype="text/csv"</pre>
|
||||
<br />
|
||||
drag or click
|
||||
</div>
|
||||
</Upload>
|
||||
</Block>
|
||||
<span />
|
||||
<Block>
|
||||
<Upload
|
||||
on:load={({ detail }) => console.log("change", detail)}
|
||||
filetype="video/x-m4v,video/*"
|
||||
>
|
||||
<div>
|
||||
<pre>video/x-m4v,video/*</pre>
|
||||
<br />
|
||||
drag or click
|
||||
</div>
|
||||
</Upload>
|
||||
</Block>
|
||||
<span />
|
||||
|
||||
<style>
|
||||
span {
|
||||
display: block;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -1,12 +0,0 @@
|
||||
<script>
|
||||
import { UploadButton } from "@gradio/upload-button";
|
||||
</script>
|
||||
|
||||
<UploadButton file_count="single">Upload file</UploadButton>
|
||||
<UploadButton file_count="multiple">Upload files</UploadButton>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<UploadButton file_count="single" size="sm">Upload file</UploadButton>
|
||||
<UploadButton file_count="multiple" size="sm">Upload files</UploadButton>
|
||||
@ -1,45 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Block } from "@gradio/atoms";
|
||||
import { Video, StaticVideo } from "@gradio/video";
|
||||
</script>
|
||||
|
||||
<Block padding={false}>
|
||||
<Video label="Video - upload" value={null} source={"upload"}>
|
||||
<div class="flex flex-col">
|
||||
drop
|
||||
<span class="text-gray-300">- or -</span>
|
||||
upload
|
||||
</div>
|
||||
</Video>
|
||||
</Block>
|
||||
|
||||
<span />
|
||||
|
||||
<Block padding={false}>
|
||||
<Video label="Video webcam" value={null} source={"webcam"} />
|
||||
</Block>
|
||||
|
||||
<span />
|
||||
|
||||
<Block padding={false}>
|
||||
<StaticVideo value={null} label="Static Video - no value" />
|
||||
</Block>
|
||||
|
||||
<span />
|
||||
<Block padding={false}>
|
||||
<StaticVideo
|
||||
value={{
|
||||
data: "https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
|
||||
name: "sample"
|
||||
}}
|
||||
label="Static Video - with value"
|
||||
/>
|
||||
</Block>
|
||||
<span />
|
||||
|
||||
<style>
|
||||
span {
|
||||
display: block;
|
||||
height: 1rem;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
@ -1,20 +0,0 @@
|
||||
import adapter from "@sveltejs/adapter-auto";
|
||||
import svelte_preprocess from "svelte-preprocess";
|
||||
|
||||
import tailwind from "tailwindcss";
|
||||
import nested from "postcss-nested";
|
||||
import autoprefix from "autoprefixer";
|
||||
|
||||
export default {
|
||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: [
|
||||
svelte_preprocess({
|
||||
postcss: { plugins: [tailwind, nested, autoprefix] }
|
||||
})
|
||||
],
|
||||
|
||||
kit: {
|
||||
adapter: adapter()
|
||||
}
|
||||
};
|
||||
@ -1,44 +0,0 @@
|
||||
const colors = require("tailwindcss/colors");
|
||||
|
||||
const defaultTheme = require("tailwindcss/defaultTheme");
|
||||
const production = !process.env.ROLLUP_WATCH;
|
||||
|
||||
module.exports = {
|
||||
content: [
|
||||
"./src/**/*.{html,js,svelte,ts}",
|
||||
"**/@gradio/**/*.{html,js,svelte,ts,css}"
|
||||
],
|
||||
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ["Source Sans Pro", ...defaultTheme.fontFamily.sans],
|
||||
mono: ["IBM Plex Mono", ...defaultTheme.fontFamily.mono]
|
||||
},
|
||||
colors: {
|
||||
gray: {
|
||||
950: "#0b0f19"
|
||||
},
|
||||
orange: {
|
||||
50: "#FFF2E5",
|
||||
100: "#FFE5CC",
|
||||
200: "#FFD8B4",
|
||||
300: "#FFB066",
|
||||
400: "#FF9633",
|
||||
500: "#FF7C00",
|
||||
600: "#EE7400",
|
||||
700: "#CE6400",
|
||||
800: "#A45000",
|
||||
900: "#5C2D00"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mode: "jit",
|
||||
darkMode: "class", // or 'media' or 'class'
|
||||
|
||||
variants: {
|
||||
extend: {}
|
||||
},
|
||||
plugins: [require("@tailwindcss/forms")]
|
||||
};
|
||||
@ -1,36 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "node",
|
||||
"module": "es2020",
|
||||
"lib": ["es2020", "DOM"],
|
||||
"target": "es2020",
|
||||
/**
|
||||
svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
|
||||
to enforce using \`import type\` instead of \`import\` for Types.
|
||||
*/
|
||||
"importsNotUsedAsValues": "error",
|
||||
/**
|
||||
TypeScript doesn't know about import usages in the template because it only sees the
|
||||
script of a Svelte file. Therefore preserve all value imports. Requires TS 4.5 or higher.
|
||||
*/
|
||||
"preserveValueImports": true,
|
||||
"isolatedModules": true,
|
||||
"resolveJsonModule": true,
|
||||
/**
|
||||
To have warnings/errors of the Svelte compiler at the correct position,
|
||||
enable source maps by default.
|
||||
*/
|
||||
"sourceMap": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"baseUrl": ".",
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"paths": {
|
||||
"$lib": ["src/lib"],
|
||||
"$lib/*": ["src/lib/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
|
||||
}
|
||||
@ -3,7 +3,6 @@
|
||||
"version": "0.0.1",
|
||||
"description": "Gradio UI packages",
|
||||
"scripts": {
|
||||
"workbench": "pnpm --filter @gradio/workbench dev",
|
||||
"dev": "pnpm css && pnpm --filter @gradio/client build && pnpm --filter @gradio/app dev",
|
||||
"css": "pnpm --filter @gradio/theme generate",
|
||||
"build": "pnpm css && pnpm --filter @gradio/client build && pnpm --filter @gradio/app build:local --emptyOutDir",
|
||||
|
||||
718
pnpm-lock.yaml
718
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -27,7 +27,6 @@
|
||||
"**/.config/*",
|
||||
"**/*.test.ts",
|
||||
"**/dist",
|
||||
"**/workbench/**/*",
|
||||
".github/**/*",
|
||||
"**/demo/**/*",
|
||||
"**/gradio/**/*",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user