mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-02-11 11:19:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

merged master

Browse Source
This commit is contained in:
Abubakar Abid 2022-02-04 10:39:37 -05:00
commit 07f072bc60
29 changed files with 252 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/rollup.config.js
View File

@ -9,8 +9,10 @@ import replace from '@rollup/plugin-replace';
import json from "@rollup/plugin-json";
import copy from 'rollup-plugin-copy';
import postcss from 'rollup-plugin-postcss';
var fs = require("fs");
const production = !process.env.ROLLUP_WATCH;
const PIP_VERSION = fs.readFileSync("../gradio/version.txt")
function serve() {
let server;
@ -56,7 +58,8 @@ export default {
json(),
replace({
BUILD_MODE: production ? "prod" : "dev",
BACKEND_URL: production ? "" : "http://localhost:7860/"
BACKEND_URL: production ? "" : "http://localhost:7860/",
PIP_VERSION: PIP_VERSION
}),
postcss({
extract: 'themes.css',

8
frontend/src/App.svelte
View File

@ -15,7 +15,8 @@
allow_flagging,
allow_interpretation,
live,
queue;
queue,
static_src;
$: embedded = space !== undefined;
</script>
@ -50,6 +51,7 @@
{allow_interpretation}
{live}
{queue}
{static_src}
/>
{#if article}
<p class="article prose pt-8 pb-4 max-w-none">
@ -82,7 +84,7 @@
view the api
<img
class="h-5 inline-block"
src="./static/img/api-logo.svg"
src="{static_src}/static/img/api-logo.svg"
alt="api"
/>
</a>
@ -90,7 +92,7 @@
<a href="https://gradio.app" target="_blank" rel="noreferrer">
built with <img
class="h-6 inline-block"
src="./static/img/logo.svg"
src="{static_src}/static/img/logo.svg"
alt="logo"
/>
</a>

11
frontend/src/Interface.svelte
View File

@ -1,4 +1,6 @@
<script>
import { init } from "svelte/internal";
import {
input_component_map,
output_component_map,
@ -16,7 +18,8 @@
allow_interpretation,
avg_durations,
live,
queue;
queue,
static_src;
let examples_dir = root + "file/";
let interpret_mode = false;
@ -197,6 +200,7 @@
]}
{...input_component}
{theme}
{static_src}
value={input_values[i]}
interpretation={interpret_mode
? interpretation_values[i]
@ -246,13 +250,13 @@
{/if}
</div>
<img
src="./static/img/logo.svg"
src="{static_src}/static/img/logo.svg"
alt="Pending"
class="pending h-5 ml-1 inline-block"
/>
{:else if state === "ERROR"}
<img
src="./static/img/logo_error.svg"
src="{static_src}/static/img/logo_error.svg"
alt="Error"
class="error h-5 ml-2 inline-block"
/>
@ -269,6 +273,7 @@
this={output_component_map[output_component.name].component}
{...output_component}
{theme}
{static_src}
value={output_values[i]}
/>
</div>

2
frontend/src/components/input/Audio/Component.svelte
View File

@ -8,6 +8,7 @@
setValue,
theme,
name,
static_src,
is_example = false;
export let source;
@ -126,6 +127,7 @@
edit={() => (mode = "edit")}
absolute={false}
{theme}
{static_src}
/>
<audio

4
frontend/src/components/input/File/Component.svelte
View File

@ -3,7 +3,7 @@
import ModifyUpload from "../../utils/ModifyUpload.svelte";
import { prettyBytes } from "../../utils/helpers";
export let value, setValue, theme;
export let value, setValue, theme, static_src;
</script>
<div class="input-file" {theme}>
@ -15,7 +15,7 @@
</Upload>
{:else}
<div class="file-preview w-full flex flex-row flex-wrap justify-center items-center relative">
<ModifyUpload clear={() => setValue(null)} {theme} />
<ModifyUpload clear={() => setValue(null)} {theme} {static_src} />
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-1/5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>

5
frontend/src/components/input/Image/Component.svelte
View File

@ -7,7 +7,7 @@
import ImageEditor from "../../utils/ImageEditor.svelte";
import Sketch from "../../utils/Sketch.svelte";
import Webcam from "../../utils/Webcam.svelte";
export let value, setValue, theme;
export let value, setValue, theme, static_src;
export let source = "upload";
export let tool = "editor";
@ -49,7 +49,7 @@
Click to Upload
</Upload>
{:else if source === "webcam"}
<Webcam on:capture={({ detail }) => setValue(detail)} />
<Webcam on:capture={({ detail }) => setValue(detail)} {static_src} />
{/if}
{:else if tool === "select"}
<Cropper image={value} on:crop={({ detail }) => setValue(detail)} />
@ -65,6 +65,7 @@
edit={() => (mode = "edit")}
clear={() => setValue(null)}
{theme}
{static_src}
/>
<img class="w-full h-full object-contain" src={value} alt="" />

4
frontend/src/components/input/Video/Component.svelte
View File

@ -3,7 +3,7 @@
import ModifyUpload from "../../utils/ModifyUpload.svelte";
import { prettyBytes, playable } from "../../utils/helpers";
export let value, setValue, theme;
export let value, setValue, theme, static_src;
export let source;
</script>
@ -20,7 +20,7 @@
</Upload>
{/if}
{:else}
<ModifyUpload clear={() => setValue(null)} {theme} />
<ModifyUpload clear={() => setValue(null)} {theme} {static_src} />
{#if playable(value.name)}
<!-- svelte-ignore a11y-media-has-caption -->
<video

6
frontend/src/components/utils/ModifyUpload.svelte
View File

@ -1,5 +1,5 @@
<script>
export let edit, clear, theme;
export let edit, clear, theme, static_src;
export let absolute = true;
</script>
@ -15,7 +15,7 @@
>
<img
class="h-4 filter dark:invert"
src="static/img/edit.svg"
src="{static_src}/static/img/edit.svg"
alt="Edit"
/>
</button>
@ -26,7 +26,7 @@
>
<img
class="h-4 filter dark:invert"
src="static/img/clear.svg"
src="{static_src}/static/img/clear.svg"
alt="Clear"
/>
</button>

4
frontend/src/components/utils/Webcam.svelte
View File

@ -1,6 +1,8 @@
<script>
import { createEventDispatcher, onMount } from "svelte";
export let static_src;
let video_source = null;
let canvas;
@ -58,7 +60,7 @@
>
<img
style="color: white"
src="static/img/camera.svg"
src="{static_src}/static/img/camera.svg"
alt="take a screenshot"
class="w-2/4 h-2/4"
/>

7
frontend/src/main.js
View File

@ -7,6 +7,13 @@ window.launchGradio = (config, element_query) => {
if (config.root === undefined) {
config.root = "BACKEND_URL";
}
if (window.gradio_mode === "app") {
config.static_src = ".";
} else if (window.gradio_mode === "website") {
config.static_src = "/gradio_static";
} else {
config.static_src = "https://gradio.s3-us-west-2.amazonaws.com/PIP_VERSION";
}
if (config.detail === "Not authenticated") {
new Login({
target: target,

1
gradio/inputs.py
View File

@ -1575,6 +1575,7 @@ class State(InputComponent):
"""
Special hidden component that stores state across runs of the interface.
Input type: Any
Demos: chatbot
"""
def __init__(self, label: str = None, default: Any = None):

1
gradio/outputs.py
View File

@ -798,6 +798,7 @@ class State(OutputComponent):
"""
Special hidden component that stores state across runs of the interface.
Output type: Any
Demos: chatbot
"""
def __init__(self, label: Optional[str] = None):

68
ui/packages/app/src/App.svelte
View File

@ -4,6 +4,7 @@
export let title;
export let description;
export let article;
export let theme;
export let dark;
export let input_components;
@ -11,8 +12,14 @@
export let examples;
export let fn;
export let root;
export let space;
export let allow_flagging;
export let allow_interpretation;
export let live;
export let queue;
export let static_src;
$: embedded = space !== undefined;
</script>
<div
@ -21,16 +28,18 @@
: 'h-auto'}"
{theme}
class:dark
class:min-h-full={!embedded}
>
<div
class="gradio-page container mx-auto flex flex-col box-border flex-grow text-gray-700 dark:text-gray-50"
class:embedded
>
<div class="content pt-4 px-4 mb-4">
{#if title}
<h1 class="title text-center p-4 text-4xl">{title}</h1>
{/if}
{#if description}
<p class="description pb-4">{description}</p>
<p class="description pb-4">{@html description}</p>
{/if}
<Interface
{input_components}
@ -41,8 +50,55 @@
{root}
{allow_flagging}
{allow_interpretation}
{live}
{queue}
{static_src}
/>
{#if article}
<p class="article prose pt-8 pb-4 max-w-none">
{@html article}
</p>
{/if}
</div>
{#if embedded}
<div class="footer bg-gray-100 p-4 rounded-b">
<a
href={"https://huggingface.co/spaces/" + space}
class="font-semibold"
>
{space.includes("/")
? space[space.indexOf("/") + 1].toUpperCase() +
space.substring(space.indexOf("/") + 2)
: space}
</a>
built with
<a href="https://gradio.app" class="font-semibold">Gradio</a>, hosted on
<a href="https://huggingface.co/spaces" class="font-semibold"
>Hugging Face Spaces</a
>.
</div>
{:else}
<div
class="footer flex-shrink-0 inline-flex gap-2.5 items-center text-gray-400 justify-center py-2"
>
<a href="api" target="_blank" rel="noreferrer">
view the api
<img
class="h-5 inline-block"
src="{static_src}/static/img/api-logo.svg"
alt="api"
/>
</a>
&bull;
<a href="https://gradio.app" target="_blank" rel="noreferrer">
built with <img
class="h-6 inline-block"
src="{static_src}/static/img/logo.svg"
alt="logo"
/>
</a>
</div>
{/if}
</div>
</div>
@ -50,4 +106,14 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.gradio-page.embedded {
@apply rounded border-2 border-gray-100 shadow-lg;
}
.gradio-page:not(.embedded) {
@apply h-full;
.content {
@apply flex-grow flex-shrink-0 pt-4 px-4;
}
}
</style>

116
ui/packages/app/src/Interface.svelte
View File

@ -15,12 +15,18 @@
export let allow_flagging;
export let allow_interpretation;
export let avg_durations;
export let live;
export let queue;
export let static_src;
let examples_dir = root + "file/";
let interpret_mode = false;
let submission_count = 0;
let state = "START";
let last_duration = null;
let has_changed = false;
let queue_index = null;
let initial_queue_index = null;
const default_inputs = input_components.map((component) =>
"default" in component ? component.default : null
@ -36,9 +42,14 @@
let avg_duration = Array.isArray(avg_durations)
? this.props.avg_durations[0]
: null;
let expected_duration = null;
const setValues = (index, value) => {
has_changed = true;
input_values[index] = value;
if (live && state !== "PENDING") {
submit();
}
};
const setExampleId = async (example_id) => {
input_components.forEach(async (input_component, i) => {
@ -68,11 +79,21 @@
if (state === "PENDING") {
return;
}
for (let [i, input_component] of input_components.entries()) {
if (
input_values[i] === null &&
input_component.name !== "state" &&
input_component.optional !== true
) {
return;
}
}
state = "PENDING";
submission_count += 1;
has_changed = false;
let submission_count_at_click = submission_count;
startTimer();
fn("predict", { data: input_values })
fn("predict", { data: input_values }, queue, queueCallback)
.then((output) => {
if (
state !== "PENDING" ||
@ -82,13 +103,30 @@
}
stopTimer();
output_values = output["data"];
for (let [i, value] of output_values.entries()) {
if (output_components[i].name === "state") {
for (let [j, input_component] of input_components.entries()) {
if (input_component.name === "state") {
input_values[j] = value;
}
}
}
}
if ("durations" in output) {
last_duration = output["durations"][0];
}
if ("avg_duration" in output) {
if ("avg_durations" in output) {
avg_duration = output["avg_durations"][0];
if (queue && initial_queue_index) {
expected_duration = avg_duration * (initial_queue_index + 1);
} else {
expected_duration = avg_duration;
}
}
state = "COMPLETE";
if (live && has_changed) {
submit();
}
})
.catch((e) => {
if (
@ -122,37 +160,53 @@
if (interpret_mode) {
interpret_mode = false;
} else {
fn("interpret", {
data: input_values
}).then((output) => {
fn(
"interpret",
{
data: input_values
},
queue,
queueCallback
).then((output) => {
interpret_mode = true;
interpretation_values = output.interpretation_scores;
});
}
};
const queueCallback = (index, is_initial) => {
if (is_initial) {
initial_queue_index = index;
}
queue_index = index;
};
</script>
<div class="gradio-interface" {theme}>
<div class="panels flex flex-wrap justify-center gap-4">
<div class="panels flex flex-wrap justify-center gap-4 flex-col sm:flex-row">
<div class="panel flex-1">
<div
class="component-set p-2 rounded flex flex-col flex-1 gap-2"
style="min-height: 36px"
>
{#each input_components as input_component, i}
<div class="component" key={i}>
<div class="panel-header mb-1.5">{input_component.label}</div>
<svelte:component
this={input_component_map[input_component.name][
interpret_mode ? "interpretation" : "component"
]}
{...input_component}
{theme}
value={input_values[i]}
interpretation={interpret_mode ? interpretation_values[i] : null}
setValue={setValues.bind(this, i)}
/>
</div>
{#if input_component.name !== "state"}
<div class="component" key={i}>
<div class="panel-header mb-1.5">{input_component.label}</div>
<svelte:component
this={input_component_map[input_component.name][
interpret_mode ? "interpretation" : "component"
]}
{...input_component}
{theme}
{static_src}
value={input_values[i]}
interpretation={interpret_mode
? interpretation_values[i]
: null}
setValue={setValues.bind(this, i)}
/>
</div>
{/if}
{/each}
</div>
<div class="panel-buttons flex gap-4 my-4">
@ -177,17 +231,30 @@
class:opacity-50={state === "PENDING"}
>
{#if state !== "START"}
<div class="state absolute right-2 flex items-center gap-2 text-xs">
<div class="state absolute right-2 flex items-center gap-0.5 text-xs">
{#if state === "PENDING"}
<div class="timer font-mono">{timer_diff.toFixed(1)}s</div>
<div class="timer font-mono text-right" style="max">
{timer_diff.toFixed(1)}s
{#if expected_duration !== null}
<span>
(ETA: {expected_duration.toFixed(
1
)}s<!--
-->{#if queue_index}
, {queue_index} ahead<!--
-->{/if})<!--
--></span
>
{/if}
</div>
<img
src="./static/img/logo.svg"
src="{static_src}/static/img/logo.svg"
alt="Pending"
class="pending h-5 ml-2 inline-block"
class="pending h-5 ml-1 inline-block"
/>
{:else if state === "ERROR"}
<img
src="./static/img/logo_error.svg"
src="{static_src}/static/img/logo_error.svg"
alt="Error"
class="error h-5 ml-2 inline-block"
/>
@ -204,6 +271,7 @@
this={output_component_map[output_component.name].component}
{...output_component}
{theme}
{static_src}
value={output_values[i]}
/>
</div>

2
ui/packages/app/src/components/input/Audio/Component.svelte
View File

@ -8,6 +8,7 @@
setValue,
theme,
name,
static_src,
is_example = false;
export let source;
@ -126,6 +127,7 @@
edit={() => (mode = "edit")}
absolute={false}
{theme}
{static_src}
/>
<audio

4
ui/packages/app/src/components/input/File/Component.svelte
View File

@ -3,7 +3,7 @@
import ModifyUpload from "../../utils/ModifyUpload.svelte";
import { prettyBytes } from "../../utils/helpers";
export let value, setValue, theme;
export let value, setValue, theme, static_src;
</script>
<div class="input-file" {theme}>
@ -17,7 +17,7 @@
<div
class="file-preview w-full flex flex-row flex-wrap justify-center items-center relative"
>
<ModifyUpload clear={() => setValue(null)} {theme} />
<ModifyUpload clear={() => setValue(null)} {theme} {static_src} />
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-10 w-1/5"

5
ui/packages/app/src/components/input/Image/Component.svelte
View File

@ -7,7 +7,7 @@
import ImageEditor from "../../utils/ImageEditor.svelte";
import Sketch from "../../utils/Sketch.svelte";
import Webcam from "../../utils/Webcam.svelte";
export let value, setValue, theme;
export let value, setValue, theme, static_src;
export let source = "upload";
export let tool = "editor";
@ -49,7 +49,7 @@
Click to Upload
</Upload>
{:else if source === "webcam"}
<Webcam on:capture={({ detail }) => setValue(detail)} />
<Webcam on:capture={({ detail }) => setValue(detail)} {static_src} />
{/if}
{:else if tool === "select"}
<Cropper image={value} on:crop={({ detail }) => setValue(detail)} />
@ -65,6 +65,7 @@
edit={() => (mode = "edit")}
clear={() => setValue(null)}
{theme}
{static_src}
/>
<img class="w-full h-full object-contain" src={value} alt="" />

2
ui/packages/app/src/components/input/Number/Component.svelte
View File

@ -6,7 +6,7 @@
type="number"
class="input-number w-full rounded box-border p-2 focus:outline-none appearance-none"
{value}
on:change={(e) => setValue(parseFloat(e.target.value))}
on:input={(e) => setValue(parseFloat(e.target.value))}
{theme}
/>

2
ui/packages/app/src/components/input/Textbox/Component.svelte
View File

@ -8,7 +8,7 @@
class="input-text w-full rounded box-border p-2 focus:outline-none appearance-none"
{value}
{placeholder}
on:change={(e) => setValue(e.target.value)}
on:input={(e) => setValue(e.target.value)}
{theme}
/>
{:else}

4
ui/packages/app/src/components/input/Video/Component.svelte
View File

@ -3,7 +3,7 @@
import ModifyUpload from "../../utils/ModifyUpload.svelte";
import { prettyBytes, playable } from "../../utils/helpers";
export let value, setValue, theme;
export let value, setValue, theme, static_src;
export let source;
</script>
@ -20,7 +20,7 @@
</Upload>
{/if}
{:else}
<ModifyUpload clear={() => setValue(null)} {theme} />
<ModifyUpload clear={() => setValue(null)} {theme} {static_src} />
{#if playable(value.name)}
<!-- svelte-ignore a11y-media-has-caption -->
<video

6
ui/packages/app/src/components/utils/ModifyUpload.svelte
View File

@ -1,5 +1,5 @@
<script>
export let edit, clear, theme;
export let edit, clear, theme, static_src;
export let absolute = true;
</script>
@ -15,7 +15,7 @@
>
<img
class="h-4 filter dark:invert"
src="static/img/edit.svg"
src="{static_src}/static/img/edit.svg"
alt="Edit"
/>
</button>
@ -26,7 +26,7 @@
>
<img
class="h-4 filter dark:invert"
src="static/img/clear.svg"
src="{static_src}/static/img/clear.svg"
alt="Clear"
/>
</button>

4
ui/packages/app/src/components/utils/Webcam.svelte
View File

@ -1,6 +1,8 @@
<script>
import { createEventDispatcher, onMount } from "svelte";
export let static_src;
let video_source = null;
let canvas;
@ -58,7 +60,7 @@
>
<img
style="color: white"
src="static/img/camera.svg"
src="{static_src}/static/img/camera.svg"
alt="take a screenshot"
class="w-2/4 h-2/4"
/>

1
ui/packages/app/src/components/utils/utils.ts
View File

@ -41,7 +41,6 @@ export function transform_values(
x?: string,
y?: string[]
) {
console.log(values);
const transformed_values = Object.entries(
values[0]
).reduce<TransformedValues>(

17
ui/packages/app/src/main.js
View File

@ -7,6 +7,13 @@ window.launchGradio = (config, element_query) => {
if (config.root === undefined) {
config.root = BACKEND_URL;
}
if (window.gradio_mode === "app") {
config.static_src = ".";
} else if (window.gradio_mode === "website") {
config.static_src = "/gradio_static";
} else {
config.static_src = "https://gradio.s3-us-west-2.amazonaws.com/PIP_VERSION";
}
if (config.detail === "Not authenticated") {
new Login({
target: target,
@ -34,8 +41,18 @@ window.launchGradio = (config, element_query) => {
}
};
window.launchGradioFromSpaces = async (space, target) => {
const space_url = `https://huggingface.co/gradioiframe/${space}/+/`;
let config = await fetch(space_url + "config");
config = await config.json();
config.root = space_url;
config.space = space;
launchGradio(config, target);
};
async function get_config() {
if (BUILD_MODE === "dev") {
console.log(BACKEND_URL);
let config = await fetch(BACKEND_URL + "config");
config = await config.json();
return config;

6
website/homepage/Dockerfile
View File

@ -1,4 +1,4 @@
FROM python:latest
FROM python:3.8
RUN apt-get update
RUN apt-get --assume-yes install npm nginx
@ -6,6 +6,8 @@ RUN pip install pandas matplotlib
RUN mkdir gradio
WORKDIR /gradio
COPY ./frontend ./frontend
RUN mkdir gradio
COPY ./gradio/version.txt ./gradio/version.txt
WORKDIR /gradio/frontend
RUN npm install
RUN npm run build
@ -29,7 +31,7 @@ RUN npm run build
WORKDIR /usr/share/nginx/html
RUN rm -rf ./*
RUN mkdir ./gradio_static/
RUN cp -r /gradio/gradio/templates/frontend/static ./gradio_static/static
RUN cp -r /gradio/gradio/templates/frontend/. ./gradio_static/
RUN cp -r /gradio/website/homepage/dist/. ./
RUN cp /gradio/website/homepage/nginx.conf /etc/nginx/conf.d/default.conf

1
website/homepage/src/docs_template.html
View File

@ -32,7 +32,6 @@
white-space: pre-wrap !important;
}
.prose .code, .prose pre {
background-color: whitesmoke;
color: black;
}

10
website/homepage/src/guides_template.html
View File

@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
{{ meta_tags|safe }}
<link rel="icon" type="image/png" href="/assets/img/logo.png">
<link href="/gradio_static/static/bundle.css" rel="stylesheet">
<link href="/gradio_static/build/themes.css" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/assets/prism.css">
<style>
@ -25,11 +25,13 @@
.prose {
max-width: none !important;
}
.gradio_page .footer {
.gradio-page .content {
padding: 0px !important;
}
.gradio-page .footer {
display: none !important;
}
.prose .code, .prose pre {
background-color: whitesmoke;
color: black;
}
.prose table {
@ -107,7 +109,7 @@
<script>
window.gradio_mode = "website";
</script>
<script defer id='gradio-library' src="/gradio_static/static/bundle.js"></script>
<script defer id='gradio-library' src="/gradio_static/build/bundle.js"></script>
<script>
var demo_endpoint = "/demo";
var demo_names = {{ demo_names|tojson }};

4
website/homepage/src/index_template.html
View File

@ -20,7 +20,7 @@
<meta name="twitter:image" content="https://gradio.app/static/home/img/social-cheetah.jpg">
<link rel="icon" type="image/png" href="/assets/img/logo.png">
<link href="/gradio_static/static/bundle.css" rel="stylesheet">
<link href="/gradio_static/build/themes.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="/assets/prism.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
@ -293,7 +293,7 @@ iface <span class="token operator">=</span> gr<span class="token punctuation">.<
window.gradio_mode = "website";
</script>
<script defer id='gradio-library' src="/gradio_static/static/bundle.js"></script>
<script defer id='gradio-library' src="/gradio_static/build/bundle.js"></script>
<script>
document.querySelector("#gradio-library").addEventListener('load', function () {
launchGradioFromSpaces("abidlabs/Draw", "#demo_mnist");

12
website/homepage/src/other_templates/kitchen_sink_template.html
View File

@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gradio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"/>
<link href="/gradio_static/static/bundle.css" rel="stylesheet">
<link href="/gradio_static/build/bundle.css" rel="stylesheet">
<style></style>
</head>
@ -36,7 +36,7 @@
} else {
document.querySelector("#target").classList.remove("dark");
}
document.querySelector(".gradio_bg").setAttribute("theme", theme);
document.querySelector(".gradio-bg").setAttribute("theme", theme);
}
var hidden_inputs = new Set();
var hidden_outputs = new Set();
@ -45,12 +45,12 @@
let style_html = "";
if (hidden_inputs.size > 0) {
let inputs_selected = Array.from(hidden_inputs).map(i => `.panel:nth-child(1) .component:nth-child(${i + 1})`).join(", ");
let examples_selected = Array.from(hidden_inputs).map(i => `.examples_table tr > *:nth-child(${i + 1})`).join(", ");
let examples_selected = Array.from(hidden_inputs).map(i => `.examples-table tr > *:nth-child(${i + 1})`).join(", ");
style_html += `${inputs_selected}, ${examples_selected} { display: none !important }`;
if (hidden_inputs.size === input_count - 1) {
document.querySelector(".examples_table").classList.add("gallery");
document.querySelector(".examples-table").classList.add("gallery");
} else {
document.querySelector(".examples_table").classList.remove("gallery");
document.querySelector(".examples-table").classList.remove("gallery");
}
}
if (hidden_outputs.size > 0) {
@ -105,7 +105,7 @@
var output_count = 0;
window.gradio_mode = "website";
</script>
<script src="/gradio_static/static/bundle.js"></script>
<script src="/gradio_static/build/bundle.js"></script>
<script>
let themes = ["default", "huggingface", "seafoam", "grass", "peach", "dark", "dark-huggingface", "dark-seafoam","dark-grass", "dark-peach"]
let theme_html = "";