mirror of
https://github.com/gradio-app/gradio.git
synced 2025-04-06 12:30:29 +08:00
theme updates!
This commit is contained in:
Ali Abid
parent
3bf7451413
commit
4e5df36046
@ -1,7 +1,9 @@
|
||||
import gradio as gr
|
||||
import numpy as np
|
||||
import json
|
||||
|
||||
CHOICES = ["foo", "bar", "baz"]
|
||||
JSONOBJ = """{"items":{"item":[{"id": "0001","type": null,"is_good": false,"ppu": 0.55,"batters":{"batter":[{ "id": "1001", "type": "Regular" },{ "id": "1002", "type": "Chocolate" },{ "id": "1003", "type": "Blueberry" },{ "id": "1004", "type": "Devil's Food" }]},"topping":[{ "id": "5001", "type": "None" },{ "id": "5002", "type": "Glazed" },{ "id": "5005", "type": "Sugar" },{ "id": "5007", "type": "Powdered Sugar" },{ "id": "5006", "type": "Chocolate with Sprinkles" },{ "id": "5003", "type": "Chocolate" },{ "id": "5004", "type": "Maple" }]}]}}"""
|
||||
|
||||
def fn(text1, text2, num, slider1, slider2, single_checkbox,
|
||||
checkboxes, radio, dropdown, im1, im2, im3, im4, video, audio1,
|
||||
@ -16,14 +18,15 @@ def fn(text1, text2, num, slider1, slider2, single_checkbox,
|
||||
}, # Label
|
||||
(audio1[0], np.flipud(audio1[1])) if audio1 is not None else "files/cantina.wav", # Audio
|
||||
np.flipud(im1) if im1 is not None else "files/cheetah1.jpg", # Image
|
||||
video, # Video
|
||||
[("Height", 70), ("Weight", 150), ("BMI", "22"), (dropdown, 42)], # KeyValues
|
||||
[("The", "art"), (" ", None), ("quick", "adj"), (" ", None),
|
||||
("brown", "adj"), (" ", None), ("fox", "noun")], # HighlightedText
|
||||
{"name": "Jane", "age": 34, "children": checkboxes}, # JSON
|
||||
video if video is not None else "files/world.mp4", # Video
|
||||
[("The", "art"), ("quick brown", "adj"), ("fox", "nn"), ("jumped", "vrb"), ("testing testing testing", None), ("over", "prp"), ("the", "art"), ("testing", None), ("lazy", "adj"), ("dogs", "nn"), (".", "punc")] + [(f"test {x}", f"test {x}") for x in range(10)], # HighlightedText
|
||||
# [("The testing testing testing", None), ("quick brown", 0.2), ("fox", 1), ("jumped", -1), ("testing testing testing", 0), ("over", 0), ("the", 0), ("testing", 0), ("lazy", 1), ("dogs", 0), (".", 1)] + [(f"test {x}", x/10) for x in range(-10, 10)], # HighlightedText
|
||||
[("The testing testing testing", None), ("over", 0.6), ("the", 0.2), ("testing", None), ("lazy", -.1), ("dogs", 0.4), (".", 0)] + [(f"test", x/10) for x in range(-10, 10)], # HighlightedText
|
||||
json.loads(JSONOBJ), # JSON
|
||||
"<button style='background-color: red'>Click Me: " + radio + "</button>", # HTML
|
||||
"files/titanic.csv",
|
||||
df1, # Dataframe
|
||||
np.random.randint(0, 10, (4,4)), # Dataframe
|
||||
[im for im in [im1, im2, im3, im4, "files/cheetah1.jpg"] if im is not None], # Carousel
|
||||
df2 # Timeseries
|
||||
)
|
||||
@ -49,7 +52,7 @@ iface = gr.Interface(
|
||||
gr.inputs.Audio(label="Audio", optional=True),
|
||||
gr.inputs.Audio(label="Microphone", source="microphone", optional=True),
|
||||
gr.inputs.File(label="File", optional=True),
|
||||
gr.inputs.Dataframe(),
|
||||
gr.inputs.Dataframe(label="Dataframe", headers=["Name", "Age", "Gender"]),
|
||||
gr.inputs.Timeseries(x="time", y=["price", "value"], optional=True),
|
||||
],
|
||||
outputs=[
|
||||
@ -58,12 +61,13 @@ iface = gr.Interface(
|
||||
gr.outputs.Audio(label="Audio"),
|
||||
gr.outputs.Image(label="Image"),
|
||||
gr.outputs.Video(label="Video"),
|
||||
gr.outputs.KeyValues(label="KeyValues"),
|
||||
gr.outputs.HighlightedText(label="HighlightedText"),
|
||||
gr.outputs.HighlightedText(label="HighlightedText", show_legend=True),
|
||||
gr.outputs.JSON(label="JSON"),
|
||||
gr.outputs.HTML(label="HTML"),
|
||||
gr.outputs.File(label="File"),
|
||||
gr.outputs.Dataframe(label="Dataframe"),
|
||||
gr.outputs.Dataframe(label="Numpy", type="numpy"),
|
||||
gr.outputs.Carousel("image", label="Carousel"),
|
||||
gr.outputs.Timeseries(x="time", y=["price", "value"], label="Timeseries")
|
||||
],
|
||||
|
||||
@ -40,7 +40,7 @@ module.exports = {
|
||||
style: {
|
||||
postcss: {
|
||||
plugins: [
|
||||
require("postcss-prefixwrap")(".gradio_app"),
|
||||
require("postcss-prefixwrap")(".gradio_wrapper"),
|
||||
require("tailwindcss"),
|
||||
require("autoprefixer")
|
||||
]
|
||||
|
||||
@ -16,28 +16,30 @@ class DropdownInput extends BaseComponent {
|
||||
return (
|
||||
<div className="input_dropdown">
|
||||
{this.props.interpretation === null ? (
|
||||
<div className="dropdown inline-block relative">
|
||||
<div className="dropdown">
|
||||
<button className="selector">
|
||||
{this.props.value}
|
||||
<svg className="caret" viewBox="0 0 20 20">
|
||||
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />{" "}
|
||||
</svg>
|
||||
</button>
|
||||
<ul className="dropdown_menu">
|
||||
{this.props.choices.map((item, index) => {
|
||||
return (
|
||||
<li
|
||||
className={classNames("dropdown_item", {
|
||||
selected: item === this.props.value
|
||||
})}
|
||||
onClick={this.handleChange.bind(this, item)}
|
||||
key={index}
|
||||
>
|
||||
{item}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<div class="dropdown_menu_holder">
|
||||
<ul className="dropdown_menu">
|
||||
{this.props.choices.map((item, index) => {
|
||||
return (
|
||||
<li
|
||||
className={classNames("dropdown_item", {
|
||||
selected: item === this.props.value
|
||||
})}
|
||||
onClick={this.handleChange.bind(this, item)}
|
||||
key={index}
|
||||
>
|
||||
{item}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div class="interpretation">
|
||||
|
||||
@ -51,12 +51,14 @@ class FileInput extends BaseComponent {
|
||||
return (
|
||||
<div className="input_file">
|
||||
<div className="file_preview_holder">
|
||||
<button
|
||||
className="clear_button"
|
||||
onClick={this.handleChange.bind(this, null)}
|
||||
>
|
||||
<img src={clear_icon} />
|
||||
</button>
|
||||
<div class="edit_buttons">
|
||||
<button
|
||||
className="clear_button"
|
||||
onClick={this.handleChange.bind(this, null)}
|
||||
>
|
||||
<img src={clear_icon} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="file_name">{file_name}</div>
|
||||
<div className="file_size">
|
||||
{file_size === null || file_size === undefined
|
||||
|
||||
@ -223,9 +223,9 @@ class ImageInput extends BaseComponent {
|
||||
<div className="input_image">
|
||||
<div className="image_preview_holder">
|
||||
<Webcam ref={this.webcamRef} />
|
||||
<button class="snapshot" onClick={this.snapshot}>
|
||||
- Click to Take Snapshot -
|
||||
</button>
|
||||
<div class="snapshot">
|
||||
<button onClick={this.snapshot}>Click to Take Snapshot</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -2,8 +2,6 @@ import React from "react";
|
||||
import BaseComponent from "../base_component";
|
||||
import ComponentExample from "../component_example";
|
||||
import { output_component_set } from "../../components";
|
||||
import arrowRight from "../../static/img/arrow-right.svg";
|
||||
import arrowLeft from "../../static/img/arrow-left.svg";
|
||||
|
||||
class CarouselOutput extends BaseComponent {
|
||||
constructor(props) {
|
||||
@ -56,13 +54,17 @@ class CarouselOutput extends BaseComponent {
|
||||
})}
|
||||
<div className="carousel_control">
|
||||
<button onClick={this.previous}>
|
||||
<img src={arrowLeft} />
|
||||
<svg class="caret" viewBox="0 0 9.1457395 15.999842">
|
||||
<path d="M 0.32506616,7.2360106 7.1796187,0.33129769 c 0.4360247,-0.439451 1.1455702,-0.442056 1.5845974,-0.0058 0.4390612,0.435849 0.441666,1.14535901 0.00582,1.58438501 l -6.064985,6.1096644 6.10968,6.0646309 c 0.4390618,0.436026 0.4416664,1.145465 0.00582,1.584526 -0.4358485,0.439239 -1.1453586,0.441843 -1.5845975,0.0058 L 0.33088256,8.8203249 C 0.11135166,8.6022941 0.00105996,8.3161928 7.554975e-6,8.0295489 -0.00104244,7.7427633 0.10735446,7.4556467 0.32524356,7.2361162" />
|
||||
</svg>
|
||||
</button>
|
||||
<div className="carousel_index">
|
||||
{this.state.carousel_index + 1} / {this.props.value.length}
|
||||
</div>
|
||||
<button onClick={this.next}>
|
||||
<img src={arrowRight} />
|
||||
<svg class="caret" viewBox="0 0 9.1457395 15.999842" transform="scale(-1, 1)">
|
||||
<path d="M 0.32506616,7.2360106 7.1796187,0.33129769 c 0.4360247,-0.439451 1.1455702,-0.442056 1.5845974,-0.0058 0.4390612,0.435849 0.441666,1.14535901 0.00582,1.58438501 l -6.064985,6.1096644 6.10968,6.0646309 c 0.4390618,0.436026 0.4416664,1.145465 0.00582,1.584526 -0.4358485,0.439239 -1.1453586,0.441843 -1.5845975,0.0058 L 0.33088256,8.8203249 C 0.11135166,8.6022941 0.00105996,8.3161928 7.554975e-6,8.0295489 -0.00104244,7.7427633 0.10735446,7.4556467 0.32524356,7.2361162" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -111,9 +111,9 @@ class DataframeOutput extends BaseComponent {
|
||||
<th key={i} onClick={this.sort_table.bind(this, i)}>
|
||||
{header}
|
||||
{this.state.sort_by === i
|
||||
? this.state.sort_descending
|
||||
? "⇧"
|
||||
: "⇩"
|
||||
? <svg className="caret" viewBox="0 0 20 20" transform={this.state.sort_descending ? "scale(1, -1)" : ""}>
|
||||
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />{" "}
|
||||
</svg>
|
||||
: false}
|
||||
</th>
|
||||
))}
|
||||
|
||||
@ -26,8 +26,14 @@ class HighlightedTextOutput extends BaseComponent {
|
||||
if (this.props.value === null || this.props.value.length === 0) {
|
||||
return false;
|
||||
}
|
||||
let first_score = this.props.value[0][1];
|
||||
if (first_score === null || typeof first_score === "string") {
|
||||
let first_score = null;
|
||||
for (let span of this.props.value) {
|
||||
if (span[1] !== null) {
|
||||
first_score = span[1];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (typeof first_score === "string") {
|
||||
let new_color_map = {};
|
||||
for (let span of this.props.value) {
|
||||
let category = span[1];
|
||||
@ -38,28 +44,32 @@ class HighlightedTextOutput extends BaseComponent {
|
||||
this.generate_category_legend(new_color_map);
|
||||
return (
|
||||
<div className="output_highlightedtext">
|
||||
<div className="category_legend">
|
||||
{this.props.show_legend ? <div className="category_legend">
|
||||
{Object.entries(this.color_map).map(([category, color]) => {
|
||||
return (
|
||||
<div className="category-label">
|
||||
<div
|
||||
className="colorbox"
|
||||
style={{ "background-color": color }}
|
||||
>
|
||||
|
||||
</div>
|
||||
<div className="category-label" style={{ "background-color": color }}>
|
||||
{category}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="output_text">
|
||||
: false}
|
||||
<div className="textfield">
|
||||
{this.props.value.map((span) => {
|
||||
let category = span[1];
|
||||
let color = category == null ? "white" : this.color_map[category];
|
||||
let style = {};
|
||||
if (category !== null) {
|
||||
style["color"] = this.color_map[category];
|
||||
style["backgroundColor"] = style.color.replace("1)", "var(--tw-bg-opacity))");
|
||||
}
|
||||
return (
|
||||
<span title={category} style={{ "background-color": color }}>
|
||||
{span[0]}
|
||||
<span class="textspan" title={category} style={style}>
|
||||
<span class="text">{span[0]}</span>
|
||||
{this.props.show_legend || span[1] === null ? false :
|
||||
<span class="inline_label" style={{ backgroundColor: style.color }}>
|
||||
{span[1]}
|
||||
</span>
|
||||
}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
@ -69,25 +79,24 @@ class HighlightedTextOutput extends BaseComponent {
|
||||
} else {
|
||||
return (
|
||||
<div className="output_highlightedtext">
|
||||
<div className="color_legend">
|
||||
<span>-1</span>
|
||||
<span>0</span>
|
||||
<span>+1</span>
|
||||
</div>
|
||||
<div className="output_text">
|
||||
{this.props.value.map((text, value) => {
|
||||
{this.props.show_legend ?
|
||||
<div className="color_legend">
|
||||
<span>-1</span>
|
||||
<span>0</span>
|
||||
<span>+1</span>
|
||||
</div> : false}
|
||||
<div className="textfield">
|
||||
{this.props.value.map(span => {
|
||||
let [text, value] = span;
|
||||
let color = "";
|
||||
if (value < 0) {
|
||||
color = "8,241,255," + -value;
|
||||
color = "141, 131, 214," + -value;
|
||||
} else {
|
||||
color = "230,126,34," + value;
|
||||
color = "235, 77, 75," + value;
|
||||
}
|
||||
return (
|
||||
<span
|
||||
title={value}
|
||||
style={{ "background-color": `rgba{${color}}` }}
|
||||
>
|
||||
{text}
|
||||
<span class="textspan" title={value} style={{ "backgroundColor": `rgba(${color})` }}>
|
||||
<span class="text">{text}</span>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -1,34 +1,72 @@
|
||||
import React from "react";
|
||||
import BaseComponent from "../base_component";
|
||||
import ComponentExample from "../component_example";
|
||||
import JSONTree from "react-json-tree";
|
||||
|
||||
class JSONNode extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { collapsed: this.props.depth > 5 };
|
||||
}
|
||||
open = () => {
|
||||
this.setState({ collapsed: false });
|
||||
}
|
||||
close = () => {
|
||||
this.setState({ collapsed: true });
|
||||
}
|
||||
render() {
|
||||
var node = null;
|
||||
var nodetype = null;
|
||||
if (this.props.value instanceof Array) {
|
||||
if (this.state.collapsed) {
|
||||
node = <button onClick={this.open}>[+{this.props.value.length} children]</button>
|
||||
} else {
|
||||
node = <>
|
||||
[
|
||||
<div class="json_children">
|
||||
{this.props.value.map((n, i) => <div class="json_item">
|
||||
{i}: <JSONNode value={n} depth={this.props.depth + 1} />,
|
||||
</div>)}
|
||||
</div>
|
||||
]
|
||||
</>;
|
||||
nodetype = "array";
|
||||
}
|
||||
} else if (this.props.value instanceof Object) {
|
||||
if (this.state.collapsed) {
|
||||
node = <button onClick={this.open}>{+{Object.keys(this.props.value).length} items}</button>
|
||||
} else {
|
||||
node = <>
|
||||
{
|
||||
<div class="json_children">
|
||||
{Object.entries(this.props.value).map(n => <div class="json_item">
|
||||
{n[0]}: <JSONNode value={n[1]} depth={this.props.depth + 1} />,
|
||||
</div>)}
|
||||
</div>
|
||||
}
|
||||
</>;
|
||||
nodetype = "object";
|
||||
}
|
||||
} else if (this.props.value === null) {
|
||||
node = "null";
|
||||
nodetype = "null";
|
||||
} else {
|
||||
node = this.props.value;
|
||||
nodetype = typeof this.props.value;
|
||||
if (nodetype === "string") {
|
||||
node = '"' + node + '"';
|
||||
} else if (nodetype === "boolean") {
|
||||
node = node.toLocaleString();
|
||||
}
|
||||
}
|
||||
return <div type={nodetype} class="json_node">{node}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
class JSONOutput extends BaseComponent {
|
||||
render() {
|
||||
return this.props.value ? (
|
||||
<div className="output_json">
|
||||
<JSONTree
|
||||
data={this.props.value}
|
||||
theme={{
|
||||
base00: "#111",
|
||||
base01: "#222",
|
||||
base02: "#333",
|
||||
base03: "#444",
|
||||
base04: "#555",
|
||||
base05: "#666",
|
||||
base06: "#777",
|
||||
base07: "#888",
|
||||
base08: "#999",
|
||||
base09: "#AAA",
|
||||
base0A: "#BBB",
|
||||
base0B: "#CCC",
|
||||
base0C: "#DDD",
|
||||
base0D: "#EEE",
|
||||
base0E: "#EFEFEF",
|
||||
base0F: "#FFF"
|
||||
}}
|
||||
invertTheme={true}
|
||||
/>
|
||||
<JSONNode value={this.props.value} depth={1} />
|
||||
</div>
|
||||
) : (
|
||||
false
|
||||
|
||||
@ -8,8 +8,10 @@ import classNames from "classnames";
|
||||
import logo_error from "./static/img/logo_error.svg";
|
||||
import logo from "./static/img/logo.svg";
|
||||
import api_logo from "./static/img/api-logo.svg";
|
||||
import("./themes/defaults.scss");
|
||||
import("./themes/base.scss");
|
||||
import("./themes/default.scss");
|
||||
import("./themes/huggingface.scss");
|
||||
import("./themes/seafoam.scss");
|
||||
import("./themes/grass.scss");
|
||||
import("./themes/peach.scss");
|
||||
|
||||
@ -93,8 +95,8 @@ export class GradioInterface extends React.Component {
|
||||
this.props.root +
|
||||
(this.props.examples_dir === null
|
||||
? "file" +
|
||||
this.props.examples_dir +
|
||||
(this.props.examples_dir.endswith("/") ? "" : "/")
|
||||
this.props.examples_dir +
|
||||
(this.props.examples_dir.endswith("/") ? "" : "/")
|
||||
: "file");
|
||||
}
|
||||
get_default_state = () => {
|
||||
@ -549,58 +551,58 @@ class GradioInterfaceExamples extends React.Component {
|
||||
return (
|
||||
<div className="examples">
|
||||
<h4>Examples</h4>
|
||||
<table
|
||||
className={classNames("examples_table", {
|
||||
gallery: this.props.input_components.length === 1
|
||||
})}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
{this.props.input_components.map((component, i) => {
|
||||
return <th key={i}>{component.label}</th>;
|
||||
})}
|
||||
{this.props.examples[0].length >
|
||||
this.props.input_components.length
|
||||
? this.props.output_components.map((component, i) => {
|
||||
<div className={classNames("examples_table_holder", {
|
||||
gallery: this.props.input_components.length === 1
|
||||
})}>
|
||||
<table class="examples_table">
|
||||
<thead>
|
||||
<tr>
|
||||
{this.props.input_components.map((component, i) => {
|
||||
return <th key={i}>{component.label}</th>;
|
||||
})}
|
||||
{this.props.examples[0].length >
|
||||
this.props.input_components.length
|
||||
? this.props.output_components.map((component, i) => {
|
||||
return (
|
||||
<th key={i + this.props.input_components.length}>
|
||||
{component.label}
|
||||
</th>
|
||||
);
|
||||
})
|
||||
: false}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{selected_examples.map((example_row, page_i) => {
|
||||
let i = page_i + this.state.page * this.props.examples_per_page;
|
||||
return (
|
||||
<tr
|
||||
key={i}
|
||||
className={classNames({
|
||||
selected: i === this.props.example_id
|
||||
})}
|
||||
onClick={() => this.props.handleExampleChange(i)}
|
||||
>
|
||||
{example_row.map((example_data, j) => {
|
||||
let ExampleComponent = input_component_set.find(
|
||||
(c) => c.name === this.props.input_components[j].name
|
||||
).example_component;
|
||||
return (
|
||||
<td>
|
||||
<ExampleComponent
|
||||
examples_dir={this.props.examples_dir}
|
||||
value={example_data}
|
||||
key={j}
|
||||
/>
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
: false}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{selected_examples.map((example_row, page_i) => {
|
||||
let i = page_i + this.state.page * this.props.examples_per_page;
|
||||
return (
|
||||
<tr
|
||||
key={i}
|
||||
className={classNames({
|
||||
selected: i === this.props.example_id
|
||||
})}
|
||||
onClick={() => this.props.handleExampleChange(i)}
|
||||
>
|
||||
{example_row.map((example_data, j) => {
|
||||
let ExampleComponent = input_component_set.find(
|
||||
(c) => c.name === this.props.input_components[j].name
|
||||
).example_component;
|
||||
return (
|
||||
<td>
|
||||
<ExampleComponent
|
||||
examples_dir={this.props.examples_dir}
|
||||
value={example_data}
|
||||
key={j}
|
||||
/>
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{paginate ? (
|
||||
<div class="pages">
|
||||
Pages:
|
||||
|
||||
@ -60,7 +60,11 @@ window.launchGradio = (config, element_query, space) => {
|
||||
let target = document.querySelector(element_query);
|
||||
target.classList.add("gradio_app");
|
||||
if (config.auth_required) {
|
||||
ReactDOM.render(<Login {...config} />, target);
|
||||
ReactDOM.render(
|
||||
<div class="gradio_wrapper" style={{ "height": window.gradio_mode === "app" ? "100%" : "auto" }}>
|
||||
<Login {...config} />
|
||||
</div>
|
||||
, target);
|
||||
} else {
|
||||
if (config.css !== null) {
|
||||
var head = document.head || document.getElementsByTagName("head")[0],
|
||||
@ -71,7 +75,11 @@ window.launchGradio = (config, element_query, space) => {
|
||||
let url = new URL(window.location.toString());
|
||||
if (config.theme !== null && config.theme.startsWith("dark")) {
|
||||
target.classList.add("dark");
|
||||
config.theme = config.theme.substring(4);
|
||||
if (config.theme === "dark") {
|
||||
config.theme = "default";
|
||||
} else {
|
||||
config.theme = config.theme.substring(5);
|
||||
}
|
||||
} else if (url.searchParams.get("__dark-theme") === "true") {
|
||||
target.classList.add("dark");
|
||||
}
|
||||
@ -79,11 +87,13 @@ window.launchGradio = (config, element_query, space) => {
|
||||
config.root = process.env.REACT_APP_BACKEND_URL;
|
||||
}
|
||||
ReactDOM.render(
|
||||
<GradioPage
|
||||
{...config}
|
||||
space={space}
|
||||
fn={fn.bind(null, config.root + "api/")}
|
||||
/>,
|
||||
<div class="gradio_wrapper" style={{ "height": window.gradio_mode === "app" ? "100%" : "auto" }}>
|
||||
<GradioPage
|
||||
{...config}
|
||||
space={space}
|
||||
fn={fn.bind(null, config.root + "api/")}
|
||||
/>
|
||||
</div>,
|
||||
target
|
||||
);
|
||||
}
|
||||
@ -93,7 +103,6 @@ window.launchGradioFromSpaces = async (space, target) => {
|
||||
const space_url = `https://huggingface.co/gradioiframe/${space}/+/`;
|
||||
let config = await fetch(space_url + "config");
|
||||
config = await config.json();
|
||||
delete config.css;
|
||||
config.root = space_url;
|
||||
launchGradio(config, target, space);
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import("./themes/defaults.scss");
|
||||
import("./themes/login.scss");
|
||||
|
||||
export default function Login(props) {
|
||||
if (props.auth_message && props.auth_message.trim().startsWith("<main")) {
|
||||
|
||||
@ -3,20 +3,16 @@
|
||||
@tailwind utilities;
|
||||
|
||||
.gradio_bg {
|
||||
@apply flex flex-col;
|
||||
}
|
||||
|
||||
.gradio_bg[is_embedded="false"] {
|
||||
@apply min-h-full;
|
||||
@apply flex flex-col dark:bg-gray-600;
|
||||
}
|
||||
|
||||
.gradio_page {
|
||||
@apply container mx-auto flex flex-col box-border flex-grow;
|
||||
@apply container mx-auto flex flex-col box-border flex-grow text-gray-700 dark:text-gray-50;
|
||||
.title {
|
||||
@apply text-center p-4 text-4xl dark:text-gray-50;
|
||||
@apply text-center p-4 text-4xl;
|
||||
}
|
||||
.description {
|
||||
@apply pb-4 dark:text-gray-50;
|
||||
@apply pb-4;
|
||||
}
|
||||
.article {
|
||||
@apply pt-8 pb-4 max-w-none dark:text-gray-50;
|
||||
@ -25,7 +21,7 @@
|
||||
@apply pt-4 px-4 mb-4;
|
||||
}
|
||||
.api {
|
||||
@apply flex-shrink-0 inline-flex gap-1 items-center text-gray-400 dark:text-gray-50 justify-end py-2;
|
||||
@apply flex-shrink-0 inline-flex gap-1 items-center text-gray-400 justify-end py-2;
|
||||
}
|
||||
.logo {
|
||||
@apply h-6 inline-block;
|
||||
@ -37,49 +33,28 @@
|
||||
.gradio_bg[is_embedded="true"] .gradio_page {
|
||||
@apply rounded border-2 border-gray-100 shadow-lg;
|
||||
.footer {
|
||||
@apply bg-gray-100 p-4 rounded-b text-gray-700;
|
||||
@apply bg-gray-100 p-4 rounded-b;
|
||||
a {
|
||||
@apply font-semibold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gradio_bg[is_embedded="false"] .gradio_page {
|
||||
@apply h-full;
|
||||
.content {
|
||||
@apply flex-grow flex-shrink-0 pt-4 px-4;
|
||||
}
|
||||
.footer {
|
||||
@apply flex-shrink-0 inline-flex gap-2.5 items-center text-gray-400 dark:text-gray-50 justify-center py-2;
|
||||
.gradio_bg[is_embedded="false"] {
|
||||
@apply min-h-full;
|
||||
.gradio_page {
|
||||
@apply h-full;
|
||||
.content {
|
||||
@apply flex-grow flex-shrink-0 pt-4 px-4;
|
||||
}
|
||||
.footer {
|
||||
@apply flex-shrink-0 inline-flex gap-2.5 items-center text-gray-400 justify-center py-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login {
|
||||
@apply container mt-8;
|
||||
form {
|
||||
@apply mx-auto p-4 bg-gray-50 shadow-md w-1/2;
|
||||
}
|
||||
h2 {
|
||||
@apply text-2xl font-semibold my-2;
|
||||
}
|
||||
label {
|
||||
@apply block uppercase mt-4;
|
||||
}
|
||||
input {
|
||||
@apply p-2 block;
|
||||
}
|
||||
.submit {
|
||||
@apply bg-yellow-500 hover:bg-yellow-400 dark:hover:bg-yellow-600 transition px-4 py-2 rounded text-white font-semibold cursor-pointer mt-4;
|
||||
}
|
||||
}
|
||||
|
||||
.gradio_bg[theme="default"] {
|
||||
@apply dark:bg-gray-500;
|
||||
}
|
||||
|
||||
|
||||
.gradio_bg[theme="default"] .gradio_interface {
|
||||
.gradio_interface {
|
||||
.load_status {
|
||||
@apply dark:text-gray-50 absolute right-2 flex items-center gap-2;
|
||||
@apply absolute right-2 flex items-center gap-2 text-sm;
|
||||
}
|
||||
.load_status img {
|
||||
@apply h-5 ml-2 inline-block;
|
||||
@ -112,21 +87,15 @@
|
||||
.panel {
|
||||
@apply flex-1;
|
||||
}
|
||||
.component_set {
|
||||
@apply bg-gray-50 dark:bg-gray-700 p-2 rounded flex flex-col flex-1 gap-2 dark:drop-shadow-xl;
|
||||
.component_set {
|
||||
@apply p-2 rounded flex flex-col flex-1 gap-2;
|
||||
min-height: 36px;
|
||||
}
|
||||
.panel_header {
|
||||
@apply mb-1 uppercase text-sm font-semibold dark:text-gray-50;
|
||||
@apply mb-1.5;
|
||||
}
|
||||
.panel_button {
|
||||
@apply bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-50 flex-1 p-3 rounded transition font-semibold focus:outline-none;
|
||||
}
|
||||
.panel_button.disabled {
|
||||
@apply text-gray-400 cursor-not-allowed;
|
||||
}
|
||||
.panel_button.submit {
|
||||
@apply bg-yellow-500 hover:bg-yellow-400 text-white;
|
||||
@apply bg-gray-50 dark:bg-gray-700 flex-1 p-3 rounded transition font-semibold focus:outline-none;
|
||||
}
|
||||
.panel_buttons {
|
||||
@apply flex gap-4 my-4;
|
||||
@ -134,7 +103,7 @@
|
||||
.flag {
|
||||
@apply relative;
|
||||
.dropcontent {
|
||||
@apply hidden absolute top-8 left-0 bg-white border-gray-200 border-2 w-full;
|
||||
@apply hidden absolute top-8 left-0 bg-white border-gray-200 border-2 w-full dark:bg-gray-500 dark:border-none;
|
||||
div {
|
||||
@apply p-2;
|
||||
}
|
||||
@ -148,38 +117,20 @@
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
.screenshot_set {
|
||||
@apply hidden flex hidden flex-grow;
|
||||
}
|
||||
.panel_button.left_panel_button {
|
||||
@apply rounded-tr-none rounded-br-none;
|
||||
}
|
||||
.panel_button.right_panel_button {
|
||||
@apply rounded-tl-none rounded-bl-none bg-gray-200 hover:bg-gray-200;
|
||||
}
|
||||
.examples {
|
||||
h4 {
|
||||
@apply text-lg font-semibold my-2;
|
||||
}
|
||||
.examples_control_left {
|
||||
@apply flex gap-2;
|
||||
.examples_table_holder {
|
||||
@apply overflow-x-auto mt-4;
|
||||
}
|
||||
.shortcut {
|
||||
@apply block text-xs;
|
||||
}
|
||||
.examples_control button {
|
||||
@apply bg-gray-100 hover:bg-gray-200 p-2;
|
||||
}
|
||||
.examples_table:not(.gallery) {
|
||||
@apply table-auto p-2 bg-gray-100 mt-4 rounded max-w-full;
|
||||
.examples_table_holder:not(.gallery) .examples_table {
|
||||
@apply table-auto p-2 bg-gray-50 dark:bg-gray-600 rounded max-w-full border-collapse;
|
||||
tbody tr {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
thead {
|
||||
@apply border-b-2 border-gray-300;
|
||||
}
|
||||
tbody tr:hover {
|
||||
@apply bg-yellow-500 text-white;
|
||||
@apply border-b-2 dark:border-gray-600;
|
||||
}
|
||||
tbody tr.selected {
|
||||
@apply font-bold;
|
||||
@ -189,7 +140,7 @@
|
||||
@apply py-2 px-4;
|
||||
}
|
||||
}
|
||||
.examples_table.gallery {
|
||||
.examples_table_holder.gallery .examples_table {
|
||||
@apply block;
|
||||
tbody {
|
||||
@apply flex gap-2 flex-wrap ;
|
||||
@ -197,33 +148,46 @@
|
||||
thead {
|
||||
@apply hidden;
|
||||
}
|
||||
tbody td:hover {
|
||||
@apply bg-yellow-500 text-white;
|
||||
}
|
||||
tbody tr.selected {
|
||||
@apply font-bold;
|
||||
}
|
||||
td {
|
||||
@apply cursor-pointer p-2 rounded bg-gray-100;
|
||||
@apply cursor-pointer p-2 rounded bg-gray-50 dark:bg-gray-700;
|
||||
}
|
||||
}
|
||||
.pages {
|
||||
@apply flex gap-1 items-center mt-2;
|
||||
}
|
||||
.page {
|
||||
@apply px-2 py-1 bg-gray-100 rounded;
|
||||
@apply px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded;
|
||||
}
|
||||
.page.selected {
|
||||
@apply bg-gray-300;
|
||||
@apply bg-gray-200 dark:bg-gray-800;
|
||||
}
|
||||
}
|
||||
/* Common Classes */
|
||||
.upload_zone {
|
||||
@apply border-gray-300 text-gray-400 dark:text-gray-500 dark:border-gray-500 border-8 border-dashed w-full h-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10;
|
||||
}
|
||||
.edit_buttons {
|
||||
@apply z-10 absolute top-0 right-0;
|
||||
img {
|
||||
@apply h-4 filter dark:invert;
|
||||
}
|
||||
}
|
||||
.edit_button {
|
||||
@apply bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
.clear_button {
|
||||
@apply bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
/* Input Components */
|
||||
.input_text {
|
||||
textarea {
|
||||
@apply w-full bg-white border-gray-400 rounded box-border p-1 resize-none;
|
||||
@apply w-full rounded box-border p-2 resize-none;
|
||||
}
|
||||
input {
|
||||
@apply w-full bg-white border-gray-400 rounded box-border p-1;
|
||||
@apply w-full rounded box-border p-2;
|
||||
}
|
||||
.interpretation {
|
||||
.interpretation_box {
|
||||
@ -233,7 +197,7 @@
|
||||
}
|
||||
.input_number {
|
||||
input {
|
||||
@apply w-full bg-white border-gray-400 rounded box-border p-1;
|
||||
@apply w-full rounded box-border p-2;
|
||||
}
|
||||
.interpretation {
|
||||
@apply flex h-6;
|
||||
@ -244,23 +208,8 @@
|
||||
}
|
||||
.input_image {
|
||||
@apply w-full h-80 relative;
|
||||
.upload_zone {
|
||||
@apply border-gray-300 text-gray-400 dark:border-gray-500 border-8 border-dashed w-full h-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10;
|
||||
}
|
||||
.image_preview_holder {
|
||||
@apply w-full h-full flex justify-center items-center bg-gray-200 relative inline-block;
|
||||
}
|
||||
.edit_buttons {
|
||||
@apply absolute top-0 right-0;
|
||||
img {
|
||||
@apply h-4;
|
||||
}
|
||||
}
|
||||
.edit_button {
|
||||
@apply bg-yellow-500 bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
.clear_button {
|
||||
@apply bg-gray-400 bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
@apply w-full h-full flex justify-center items-center bg-gray-200 dark:bg-gray-600 relative;
|
||||
}
|
||||
.image_editor {
|
||||
@apply fixed w-screen h-screen top-0 left-0 bg-black bg-opacity-50 z-40 flex flex-col justify-center items-center;
|
||||
@ -287,86 +236,39 @@
|
||||
@apply bg-white;
|
||||
}
|
||||
.snapshot {
|
||||
@apply absolute bottom-0 w-full bg-white bg-opacity-90 py-3 font-bold text-lg text-center;
|
||||
@apply absolute bottom-4 w-full py-3 font-bold text-lg text-center;
|
||||
button {
|
||||
@apply inline-block p-2 rounded bg-white dark:bg-gray-600 opacity-80 transition hover:opacity-100 font-semibold;
|
||||
}
|
||||
}
|
||||
.interpretation {
|
||||
@apply w-full h-full absolute top-0 left-0 flex justify-center items-center opacity-90 hover:opacity-20 transition;
|
||||
}
|
||||
}
|
||||
.input_image_example {
|
||||
@apply h-24;
|
||||
@apply h-24 max-w-none;
|
||||
}
|
||||
.input_radio {
|
||||
@apply flex flex-wrap gap-2;
|
||||
.radio_item {
|
||||
@apply bg-gray-200 text-gray-700 py-2 px-4 font-semibold rounded cursor-pointer flex items-center gap-1;
|
||||
}
|
||||
.radio_item.selected {
|
||||
@apply bg-yellow-500 text-white;
|
||||
@apply py-2 px-3 font-semibold rounded cursor-pointer flex items-center gap-2;
|
||||
}
|
||||
.radio_circle {
|
||||
@apply w-4 h-4 bg-white rounded-full box-border;
|
||||
}
|
||||
.selected .radio_circle {
|
||||
@apply border-4 border-yellow-600;
|
||||
@apply w-4 h-4 rounded-full box-border;
|
||||
}
|
||||
}
|
||||
.input_checkbox_group {
|
||||
.input_checkbox_group, .input_checkbox {
|
||||
@apply flex flex-wrap gap-2;
|
||||
.checkbox_item {
|
||||
@apply bg-gray-200 text-gray-700 py-2 px-4 font-semibold rounded cursor-pointer flex items-center gap-1;
|
||||
}
|
||||
.checkbox_item.selected {
|
||||
@apply bg-yellow-500 text-white;
|
||||
@apply py-2 px-3 font-semibold rounded cursor-pointer flex items-center gap-2;
|
||||
}
|
||||
.checkbox {
|
||||
@apply w-4 h-4 bg-white;
|
||||
@apply w-4 h-4 bg-white flex items-center justify-center;
|
||||
.check {
|
||||
@apply hidden;
|
||||
@apply hidden h-3 w-4;
|
||||
}
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-yellow-600;
|
||||
.check {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
.check line {
|
||||
stroke: white;
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.interpretation {
|
||||
@apply flex;
|
||||
.interpretation_box {
|
||||
@apply flex-grow h-4 w-4;
|
||||
}
|
||||
.interpret_check {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
.interpret_check line {
|
||||
stroke: gray;
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input_checkbox {
|
||||
@apply flex flex-wrap gap-2;
|
||||
.checkbox_item {
|
||||
@apply bg-gray-200 text-gray-700 py-2 px-4 font-semibold rounded cursor-pointer flex items-center gap-1;
|
||||
}
|
||||
.checkbox_item.selected {
|
||||
@apply bg-yellow-500 text-white;
|
||||
}
|
||||
.checkbox {
|
||||
@apply w-4 h-4 bg-white;
|
||||
.check {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-yellow-600;
|
||||
.check {
|
||||
@apply block;
|
||||
}
|
||||
@ -393,25 +295,31 @@
|
||||
}
|
||||
.input_dropdown {
|
||||
@apply inline-block relative;
|
||||
.dropdown {
|
||||
@apply inline-block relative;
|
||||
}
|
||||
.selector {
|
||||
@apply bg-gray-200 text-gray-700 py-2 px-4 font-semibold rounded inline-flex items-center;
|
||||
@apply py-2 px-3 font-semibold rounded inline-flex items-center;
|
||||
}
|
||||
.caret {
|
||||
@apply ml-1 fill-current h-4 w-4;
|
||||
@apply ml-2 fill-current h-4 w-4;
|
||||
}
|
||||
.dropdown_menu_holder {
|
||||
@apply absolute hidden pt-1 z-10 bg-none;
|
||||
}
|
||||
.dropdown_menu {
|
||||
@apply absolute hidden text-gray-700 pt-1 max-h-80 overflow-y-auto z-10;
|
||||
@apply max-h-80 overflow-y-auto;
|
||||
}
|
||||
.dropdown_item:first-child {
|
||||
@apply rounded-t;
|
||||
}
|
||||
.dropdown_item {
|
||||
@apply bg-gray-200 hover:bg-gray-400 hover:text-gray-50 py-2 px-4 block whitespace-nowrap cursor-pointer;
|
||||
@apply py-2 px-3 block whitespace-nowrap cursor-pointer;
|
||||
}
|
||||
.dropdown_item:last-child {
|
||||
@apply rounded-b;
|
||||
}
|
||||
:hover .dropdown_menu {
|
||||
:hover .dropdown_menu_holder {
|
||||
@apply block;
|
||||
}
|
||||
.interpretation_box {
|
||||
@ -421,17 +329,17 @@
|
||||
.input_slider {
|
||||
@apply text-center;
|
||||
.range {
|
||||
@apply w-full appearance-none bg-gray-200 hover:bg-gray-200 transition rounded h-4;
|
||||
@apply w-full appearance-none transition rounded h-4;
|
||||
}
|
||||
.range::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
@apply appearance-none w-5 h-5 bg-yellow-500 rounded cursor-pointer;
|
||||
@apply appearance-none w-5 h-5 rounded cursor-pointer;
|
||||
}
|
||||
.range::-moz-range-thumb {
|
||||
@apply appearance-none w-5 h-5 bg-yellow-500 rounded cursor-pointer;
|
||||
@apply appearance-none w-5 h-5 rounded cursor-pointer;
|
||||
}
|
||||
.value {
|
||||
@apply text-gray-700 inline-block mx-auto mt-1 px-2 py-0.5 rounded;
|
||||
@apply inline-block mx-auto mt-1 px-2 py-0.5 rounded;
|
||||
}
|
||||
.interpret_range {
|
||||
@apply flex h-6;
|
||||
@ -444,26 +352,20 @@
|
||||
.audio-react-recorder {
|
||||
@apply hidden;
|
||||
}
|
||||
.start, .stop {
|
||||
@apply p-2 rounded font-semibold;
|
||||
}
|
||||
.start {
|
||||
@apply bg-gray-200 p-2 rounded font-semibold;
|
||||
@apply bg-gray-200 dark:bg-gray-600;
|
||||
}
|
||||
.stop {
|
||||
@apply bg-red-200 text-red-500 p-2 rounded font-semibold;
|
||||
@apply bg-red-200 text-red-500 dark:bg-red-600 dark:text-red-100;
|
||||
}
|
||||
audio {
|
||||
@apply w-full;
|
||||
}
|
||||
.edit_buttons {
|
||||
@apply flex justify-end;
|
||||
img {
|
||||
@apply h-4 dark:invert;
|
||||
}
|
||||
}
|
||||
.edit_button {
|
||||
@apply bg-yellow-500 bg-opacity-0 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
.clear_button {
|
||||
@apply bg-gray-400 bg-opacity-0 hover:bg-opacity-100 transition p-1;
|
||||
@apply static flex justify-end;
|
||||
}
|
||||
.interpret_range {
|
||||
@apply flex h-4;
|
||||
@ -486,9 +388,6 @@
|
||||
.record {
|
||||
@apply w-12 h-12 rounded-full bg-red-500 hover:bg-red-600 border-4 border-red-600;
|
||||
}
|
||||
.upload_zone {
|
||||
@apply border-gray-300 text-gray-400 dark:border-gray-500 border-8 border-dashed w-full h-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10;
|
||||
}
|
||||
.video_preview_holder {
|
||||
@apply w-full h-full flex justify-center items-center bg-gray-200;
|
||||
}
|
||||
@ -498,34 +397,19 @@
|
||||
.video_preview {
|
||||
@apply w-full h-full object-contain bg-black;
|
||||
}
|
||||
.edit_buttons {
|
||||
@apply z-10 absolute top-0 right-0;
|
||||
img {
|
||||
@apply h-4;
|
||||
}
|
||||
}
|
||||
.edit_button {
|
||||
@apply bg-yellow-500 bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
.clear_button {
|
||||
@apply bg-gray-400 bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
}
|
||||
.input_video_example {
|
||||
.video_holder {
|
||||
@apply h-36 object-contain flex justify-center;
|
||||
}
|
||||
.video_preview {
|
||||
@apply w-full;
|
||||
@apply max-w-none;
|
||||
}
|
||||
}
|
||||
.input_file {
|
||||
@apply w-full h-80;
|
||||
.upload_zone {
|
||||
@apply border-gray-300 text-gray-400 dark:border-gray-500 border-8 border-dashed w-full h-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10;
|
||||
}
|
||||
.file_preview_holder {
|
||||
@apply dark:text-gray-50 w-full h-full flex flex-col justify-center items-center relative inline-block;
|
||||
@apply w-full h-full flex flex-col justify-center items-center relative;
|
||||
}
|
||||
.file_name {
|
||||
@apply text-6xl p-6 break-all;
|
||||
@ -533,56 +417,58 @@
|
||||
.file_size {
|
||||
@apply text-2xl p-2;
|
||||
}
|
||||
.clear_button {
|
||||
@apply absolute top-0 right-0 bg-gray-400 bg-opacity-0 hover:bg-opacity-100 transition p-1;
|
||||
img {
|
||||
@apply h-4 dark:invert;
|
||||
}
|
||||
.input_dataframe {
|
||||
table {
|
||||
border-collapse: separate;
|
||||
@apply border-b border-r border-gray-300 dark:border-gray-600;
|
||||
td {
|
||||
@apply dark:bg-gray-700 dark:border-gray-600;
|
||||
}
|
||||
td.selected, tr.selected td:first-child {
|
||||
@apply dark:bg-gray-600
|
||||
}
|
||||
td.highlight {
|
||||
@apply dark:bg-gray-800;
|
||||
}
|
||||
}
|
||||
.jexcel_contextmenu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.input_timeseries {
|
||||
@apply w-full h-96;
|
||||
.upload_zone {
|
||||
@apply border-gray-300 text-gray-400 dark:border-gray-500 border-8 border-dashed w-full h-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10;
|
||||
}
|
||||
.file_preview_holder {
|
||||
@apply w-full h-full flex flex-col justify-center items-center relative inline-block;
|
||||
}
|
||||
.js-plotly-plot, .plotly.js-plotly-plot * {
|
||||
position: static !important;
|
||||
}
|
||||
}
|
||||
/* Output Components */
|
||||
.output_text {
|
||||
word-break: break-word;
|
||||
@apply w-full bg-white border-gray-400 rounded box-border p-1 whitespace-pre-wrap;
|
||||
@apply w-full bg-white dark:bg-gray-800 rounded box-border p-2 whitespace-pre-wrap;
|
||||
}
|
||||
.output_label {
|
||||
@apply dark:text-gray-50;
|
||||
.output_class,
|
||||
.output_class_without_confidences {
|
||||
@apply font-bold text-2xl py-8 px-4 flex-grow flex items-center justify-center;
|
||||
@apply font-bold text-2xl py-6 px-4 flex-grow flex items-center justify-center;
|
||||
}
|
||||
.confidence_intervals {
|
||||
@apply flex text-xl;
|
||||
}
|
||||
.labels {
|
||||
@apply mr-1;
|
||||
@apply mr-2;
|
||||
}
|
||||
.confidences {
|
||||
@apply flex flex-grow flex-col items-baseline;
|
||||
}
|
||||
.label {
|
||||
@apply overflow-hidden whitespace-nowrap h-7 mb-1 overflow-ellipsis text-right;
|
||||
@apply overflow-hidden whitespace-nowrap h-7 mb-2 overflow-ellipsis text-right;
|
||||
}
|
||||
.confidence {
|
||||
@apply bg-gray-400 text-white flex justify-end overflow-hidden whitespace-nowrap h-7 mb-1 px-1;
|
||||
@apply flex justify-end overflow-hidden whitespace-nowrap h-7 mb-2 px-1;
|
||||
}
|
||||
}
|
||||
.output_image {
|
||||
@apply w-full h-80;
|
||||
.image_preview_holder {
|
||||
@apply w-full h-full flex justify-center items-center bg-gray-200 relative inline-block;
|
||||
@apply w-full h-full flex justify-center items-center bg-gray-200 dark:bg-gray-600 relative;
|
||||
}
|
||||
.image_preview,
|
||||
video {
|
||||
@ -596,13 +482,51 @@
|
||||
}
|
||||
.output_highlightedtext {
|
||||
.category_legend {
|
||||
@apply flex flex-wrap gap-4 mb-2;
|
||||
@apply flex flex-wrap gap-1 mb-2;
|
||||
.category-label {
|
||||
@apply flex gap-2;
|
||||
@apply px-2 py-1 rounded text-white font-semibold;
|
||||
}
|
||||
.colorbox {
|
||||
@apply w-6;
|
||||
}
|
||||
.color_legend {
|
||||
@apply flex px-2 py-1 justify-between rounded mb-3 font-semibold;
|
||||
background: -webkit-linear-gradient(to right,#8d83d6,(255,255,255,0),#eb4d4b);
|
||||
background: linear-gradient(to right,#8d83d6,rgba(255,255,255,0),#eb4d4b);
|
||||
}
|
||||
.textfield {
|
||||
@apply p-2 bg-white dark:bg-gray-800 rounded box-border max-w-full leading-8 break-all;
|
||||
.textspan {
|
||||
@apply p-1 mr-0.5 bg-opacity-20 dark:bg-opacity-80 rounded-sm;
|
||||
.text {
|
||||
@apply dark:text-white;
|
||||
}
|
||||
}
|
||||
.inline_label {
|
||||
@apply text-xs text-white ml-0.5 px-0.5 rounded-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
.output_json {
|
||||
@apply font-mono font-semibold;
|
||||
.json_node {
|
||||
@apply inline;
|
||||
}
|
||||
.json_node[type="string"] {
|
||||
@apply text-green-500;
|
||||
}
|
||||
.json_node[type="number"] {
|
||||
@apply text-blue-500;
|
||||
}
|
||||
.json_node[type="boolean"] {
|
||||
@apply text-red-500;
|
||||
}
|
||||
.json_node[type="null"] {
|
||||
@apply text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
.json_item {
|
||||
@apply block;
|
||||
}
|
||||
.json_children {
|
||||
@apply block pl-4;
|
||||
}
|
||||
}
|
||||
.output_keyvalues {
|
||||
@ -627,7 +551,7 @@
|
||||
}
|
||||
}
|
||||
.output_file {
|
||||
@apply w-full h-80 dark:text-gray-50;
|
||||
@apply w-full h-80;
|
||||
.file_display {
|
||||
@apply w-full h-full flex flex-col justify-center items-center relative;
|
||||
}
|
||||
@ -639,21 +563,20 @@
|
||||
}
|
||||
}
|
||||
.output_dataframe {
|
||||
@apply dark:text-gray-50;
|
||||
table {
|
||||
thead {
|
||||
@apply font-bold border-gray-200 border-b-2;
|
||||
}
|
||||
th {
|
||||
@apply transition cursor-pointer;
|
||||
}
|
||||
th:hover {
|
||||
@apply bg-gray-200;
|
||||
@apply transition cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
@apply px-4;
|
||||
}
|
||||
.caret {
|
||||
@apply h-3 inline-block ml-1 mb-0.5 fill-current;
|
||||
}
|
||||
}
|
||||
.pages {
|
||||
@apply flex gap-1 items-center;
|
||||
@ -662,7 +585,7 @@
|
||||
@apply px-2 py-1 bg-gray-200;
|
||||
}
|
||||
.page.selected {
|
||||
@apply bg-gray-300;
|
||||
@apply bg-gray-200;
|
||||
}
|
||||
}
|
||||
.output_carousel {
|
||||
@ -673,9 +596,9 @@
|
||||
min-width: 60px;
|
||||
@apply text-xl text-center font-semibold;
|
||||
}
|
||||
button img {
|
||||
@apply h-3 mt-0.5;
|
||||
button .caret {
|
||||
@apply h-3 mt-0.5 fill-current;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
158
frontend/src/themes/default.scss
Normal file
158
frontend/src/themes/default.scss
Normal file
@ -0,0 +1,158 @@
|
||||
.gradio_bg[theme="default"] .gradio_interface {
|
||||
.component_set {
|
||||
@apply bg-gray-50 dark:bg-gray-700 dark:drop-shadow-xl shadow;
|
||||
}
|
||||
.component {
|
||||
@apply mb-2;
|
||||
}
|
||||
.panel_header {
|
||||
@apply uppercase text-xs;
|
||||
}
|
||||
.panel_button {
|
||||
@apply hover:bg-gray-100 dark:hover:bg-gray-600 shadow;
|
||||
}
|
||||
.panel_button.disabled {
|
||||
@apply text-gray-400 cursor-not-allowed;
|
||||
}
|
||||
.panel_button.submit {
|
||||
@apply bg-yellow-500 hover:bg-yellow-400 dark:bg-red-700 dark:hover:bg-red-600 text-white;
|
||||
}
|
||||
.examples {
|
||||
.examples_table_holder:not(.gallery) {
|
||||
@apply shadow;
|
||||
.examples_table {
|
||||
@apply rounded dark:bg-gray-700;
|
||||
thead {
|
||||
@apply border-gray-300 dark:border-gray-600;
|
||||
}
|
||||
tbody tr:hover {
|
||||
@apply bg-yellow-500 dark:bg-red-700 text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.examples_table_holder.gallery .examples_table {
|
||||
tbody td {
|
||||
@apply shadow;
|
||||
}
|
||||
tbody td:hover {
|
||||
@apply bg-yellow-500 text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Common Classes */
|
||||
.edit_buttons {
|
||||
@apply m-1 flex gap-1;
|
||||
}
|
||||
.edit_button {
|
||||
@apply bg-yellow-500 dark:bg-red-600 rounded shadow;
|
||||
}
|
||||
.clear_button {
|
||||
@apply bg-gray-50 dark:bg-gray-500 rounded shadow;
|
||||
}
|
||||
.upload_zone {
|
||||
@apply transition hover:border-gray-400 hover:text-gray-500 dark:hover:border-gray-300 dark:hover:text-gray-300;
|
||||
}
|
||||
/* Input Components */
|
||||
.input_text {
|
||||
input, textarea {
|
||||
@apply shadow transition hover:shadow-md dark:bg-gray-800;
|
||||
}
|
||||
}
|
||||
.input_number {
|
||||
input {
|
||||
@apply shadow transition hover:shadow-md dark:bg-gray-800;
|
||||
}
|
||||
}
|
||||
.input_radio {
|
||||
.radio_item {
|
||||
@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
|
||||
}
|
||||
.radio_circle {
|
||||
@apply bg-gray-50 dark:bg-gray-400 border-4 border-gray-200 dark:border-gray-600;
|
||||
}
|
||||
.radio_item.selected {
|
||||
@apply bg-yellow-500 dark:bg-red-600 text-white shadow;
|
||||
}
|
||||
.radio_circle {
|
||||
@apply w-4 h-4 bg-white transition rounded-full box-border;
|
||||
}
|
||||
.selected .radio_circle {
|
||||
@apply border-yellow-600 dark:border-red-700;
|
||||
}
|
||||
}
|
||||
.input_image {
|
||||
.snapshot {
|
||||
@apply dark:bg-red-600;
|
||||
}
|
||||
}
|
||||
.input_checkbox_group, .input_checkbox {
|
||||
.checkbox_item {
|
||||
@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
|
||||
}
|
||||
.checkbox {
|
||||
@apply bg-gray-100 dark:bg-gray-400 transition;
|
||||
}
|
||||
.checkbox_item.selected {
|
||||
@apply bg-yellow-500 dark:bg-red-600 text-white;
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-yellow-600 dark:bg-red-700;
|
||||
}
|
||||
}
|
||||
.input_slider {
|
||||
.range {
|
||||
@apply bg-white dark:bg-gray-800 shadow h-3 transition hover:shadow-md;
|
||||
}
|
||||
.range::-webkit-slider-thumb {
|
||||
@apply bg-gradient-to-b from-yellow-400 to-yellow-500 dark:from-red-500 dark:to-red-600 shadow;
|
||||
}
|
||||
.range::-moz-range-thumb {
|
||||
@apply bg-gradient-to-b from-yellow-400 to-yellow-500 shadow;
|
||||
}
|
||||
.value {
|
||||
@apply bg-gray-100 dark:bg-gray-600 font-semibold;
|
||||
}
|
||||
}
|
||||
.input_dropdown {
|
||||
.selector {
|
||||
@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
|
||||
}
|
||||
.dropdown_menu {
|
||||
@apply shadow;
|
||||
}
|
||||
.dropdown_item {
|
||||
@apply bg-white dark:bg-gray-800 hover:bg-yellow-500 dark:hover:bg-red-600 hover:text-gray-50 hover:font-semibold;
|
||||
}
|
||||
}
|
||||
.input_audio {
|
||||
.start, .stop {
|
||||
@apply shadow transition hover:shadow-md;
|
||||
}
|
||||
.start {
|
||||
@apply bg-white dark:bg-gray-800;
|
||||
}
|
||||
}
|
||||
/* Output Components */
|
||||
.output_text {
|
||||
@apply shadow;
|
||||
}
|
||||
.output_image {
|
||||
@apply dark:bg-gray-600;
|
||||
}
|
||||
.output_label {
|
||||
.label {
|
||||
@apply text-sm h-5;
|
||||
}
|
||||
.confidence {
|
||||
@apply font-mono box-border border-b-2 border-gray-300 bg-gray-200 dark:bg-gray-500 dark:border-gray-600 text-sm h-5 font-semibold rounded;
|
||||
}
|
||||
.confidence:first-child {
|
||||
@apply border-yellow-600 bg-yellow-500 dark:bg-red-600 border-red-700 text-white;
|
||||
}
|
||||
}
|
||||
.output_highlightedtext {
|
||||
.textfield {
|
||||
@apply shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,601 +1,125 @@
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.gradio_bg[theme="grass"] {
|
||||
@apply dark:bg-gray-600 dark:text-gray-50;
|
||||
@apply dark:bg-gray-700;
|
||||
}
|
||||
|
||||
.gradio_bg[theme="grass"] .gradio_interface {
|
||||
.load_status {
|
||||
@apply absolute dark:text-gray-50 right-2 flex items-center gap-2 text-xs;
|
||||
}
|
||||
.load_status img {
|
||||
@apply h-5 ml-2 inline-block;
|
||||
}
|
||||
.load_status .loading {
|
||||
@keyframes ld-breath{
|
||||
0%{
|
||||
animation-timing-function:cubic-bezier(0.9647,0.2413,-0.0705,0.7911);
|
||||
transform:scale(0.9)
|
||||
}
|
||||
51%{animation-timing-function:cubic-bezier(0.9226,0.2631,-0.0308,0.7628);
|
||||
transform:scale(1.2)
|
||||
}
|
||||
100%{transform:scale(0.9)}
|
||||
}
|
||||
animation:ld-breath 0.75s infinite linear;
|
||||
}
|
||||
.panels {
|
||||
@apply flex flex-wrap justify-center gap-4;
|
||||
}
|
||||
.panels.unaligned {
|
||||
@apply flex-col sm:flex-row items-stretch sm:items-start
|
||||
}
|
||||
.panels.horizontal {
|
||||
@apply flex-col sm:flex-row items-stretch;
|
||||
}
|
||||
.panels.vertical {
|
||||
@apply flex-col items-stretch;
|
||||
}
|
||||
.panel {
|
||||
@apply flex-1;
|
||||
}
|
||||
.component_set {
|
||||
@apply bg-gray-50 dark:bg-gray-800 p-2 flex flex-col flex-1 gap-2;
|
||||
min-height: 36px;
|
||||
@apply bg-gray-50 dark:bg-gray-800 rounded-none;
|
||||
}
|
||||
.component {
|
||||
@apply p-1 transition;
|
||||
}
|
||||
.panel_header {
|
||||
@apply mb-1 uppercase text-xs text-gray-600 dark:text-gray-200 font-semibold;
|
||||
}
|
||||
.component:hover .panel_header {
|
||||
@apply text-green-600 dark:text-green-500;
|
||||
@apply text-gray-400 dark:text-gray-200 font-semibold;
|
||||
}
|
||||
.panel_button {
|
||||
@apply flex-1 p-3 bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-50 transition font-semibold focus:outline-none;
|
||||
}
|
||||
.panel_button.disabled {
|
||||
@apply text-gray-400 cursor-not-allowed;
|
||||
@apply rounded-none bg-gray-100 dark:bg-gray-800 shadow;
|
||||
}
|
||||
.panel_button.submit {
|
||||
@apply bg-green-500 hover:bg-green-400 text-white;
|
||||
}
|
||||
.panel_buttons {
|
||||
@apply flex gap-4 my-4;
|
||||
}
|
||||
.flag {
|
||||
@apply relative;
|
||||
.dropcontent {
|
||||
@apply hidden absolute top-8 left-0 bg-white border-gray-200 dark:bg-gray-500 dark:text-gray-50 border-2 w-full;
|
||||
div {
|
||||
@apply p-2;
|
||||
}
|
||||
div:hover {
|
||||
@apply bg-gray-100 dark:bg-gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flag:hover:not(.disabled) {
|
||||
.dropcontent {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
.screenshot_set {
|
||||
@apply hidden flex hidden flex-grow;
|
||||
@apply bg-green-400 text-white;
|
||||
}
|
||||
.examples {
|
||||
@apply max-w-full overflow-x-auto;
|
||||
h4 {
|
||||
@apply text-lg font-semibold my-2;
|
||||
}
|
||||
.examples_control {
|
||||
@apply hidden flex hidden gap-2;
|
||||
}
|
||||
.examples_control_left {
|
||||
@apply flex gap-2;
|
||||
}
|
||||
.shortcut {
|
||||
@apply block text-xs;
|
||||
}
|
||||
.examples_table:not(.gallery) {
|
||||
@apply bg-gray-50 border-gray-100 dark:bg-gray-700 dark:text-gray-50 dark:border-none table-auto p-2 mt-4 rounded border;
|
||||
tbody tr {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
thead {
|
||||
@apply border-gray-100 dark:border-gray-800 border-b-2;
|
||||
}
|
||||
tbody tr:hover {
|
||||
@apply bg-green-500 dark:bg-indigo-900 text-white;
|
||||
}
|
||||
tbody tr.selected {
|
||||
@apply font-bold;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
@apply py-2 px-4;
|
||||
}
|
||||
}
|
||||
.examples_table.gallery {
|
||||
@apply block;
|
||||
tbody {
|
||||
@apply flex gap-2 flex-wrap ;
|
||||
}
|
||||
thead {
|
||||
@apply hidden;
|
||||
}
|
||||
tbody td:hover {
|
||||
@apply bg-green-500 dark:bg-indigo-900 text-white;
|
||||
}
|
||||
tbody tr.selected {
|
||||
@apply font-bold;
|
||||
}
|
||||
td {
|
||||
@apply bg-gray-50 dark:bg-gray-700 cursor-pointer p-2 rounded;
|
||||
}
|
||||
}
|
||||
.pages {
|
||||
@apply flex gap-1 items-center mt-2;
|
||||
}
|
||||
.page {
|
||||
@apply bg-gray-100 dark:bg-gray-700 dark:text-gray-50 px-2 py-1 rounded;
|
||||
}
|
||||
.page.selected {
|
||||
@apply bg-gray-300 dark:bg-gray-800;
|
||||
}
|
||||
}
|
||||
/* Input Components */
|
||||
.input_text {
|
||||
textarea {
|
||||
@apply w-full bg-white dark:bg-gray-200 dark:text-blue-900 dark:font-semibold focus:ring-2 focus:ring-inset focus:ring-green-500 outline-none box-border p-1 resize-none;
|
||||
}
|
||||
input {
|
||||
@apply w-full bg-white dark:bg-gray-200 dark:text-blue-900 dark:font-semibold focus:ring-2 focus:ring-inset focus:ring-green-500 outline-none box-border p-1;
|
||||
}
|
||||
.interpretation {
|
||||
.interpretation_box {
|
||||
@apply inline-block whitespace-pre-wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input_number {
|
||||
input {
|
||||
@apply w-full bg-white bg-white dark:bg-gray-200 dark:text-blue-900 dark:font-semibold focus:ring-2 focus:ring-inset focus:ring-green-500 outline-none box-border p-1;
|
||||
}
|
||||
.interpretation {
|
||||
@apply flex h-6;
|
||||
.interpretation_box {
|
||||
@apply flex-grow;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input_image {
|
||||
@apply w-full h-48 relative;
|
||||
.upload_zone {
|
||||
@apply bg-gray-200 hover:bg-gray-100 dark:bg-gray-500 dark:hover:bg-gray-400 text-gray-600 dark:text-gray-50 transition w-full h-full flex justify-center items-center text-xl text-center cursor-pointer leading-10;
|
||||
}
|
||||
.image_preview_holder {
|
||||
@apply w-full h-full flex justify-center items-center bg-gray-200 relative inline-block;
|
||||
}
|
||||
.edit_buttons {
|
||||
@apply absolute top-0 right-0;
|
||||
img {
|
||||
@apply h-4;
|
||||
}
|
||||
}
|
||||
.edit_button {
|
||||
@apply bg-green-500 bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
.clear_button {
|
||||
@apply bg-gray-400 bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
.image_editor {
|
||||
@apply fixed w-screen h-screen top-0 left-0 bg-black bg-opacity-50 z-40 flex flex-col justify-center items-center;
|
||||
.image_editor_buttons {
|
||||
width: 800px;
|
||||
@apply flex justify-end gap-1;
|
||||
button {
|
||||
@apply px-2 py-1 text-xl bg-black text-white font-semibold;
|
||||
.examples_table_holder:not(.gallery) {
|
||||
.examples_table {
|
||||
@apply dark:bg-gray-800;
|
||||
tbody tr:hover {
|
||||
@apply bg-green-400;
|
||||
}
|
||||
}
|
||||
.tui-image-editor-header-buttons {
|
||||
@apply hidden;
|
||||
}
|
||||
.examples_table_holder.gallery .examples_table {
|
||||
tbody td {
|
||||
@apply dark:bg-gray-800;
|
||||
}
|
||||
.tui-colorpicker-palette-button {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
tbody td:hover {
|
||||
@apply bg-green-400;
|
||||
}
|
||||
}
|
||||
.image_preview,
|
||||
video {
|
||||
@apply w-full h-full object-contain;
|
||||
}
|
||||
.sketch > div {
|
||||
@apply bg-white;
|
||||
}
|
||||
.snapshot {
|
||||
@apply absolute bottom-0 w-full bg-white bg-opacity-90 py-3 font-bold text-lg text-center;
|
||||
}
|
||||
.interpretation {
|
||||
@apply w-full h-full absolute top-0 left-0 flex justify-center items-center opacity-90 hover:opacity-20 transition;
|
||||
}
|
||||
}
|
||||
.input_image_example {
|
||||
@apply h-24;
|
||||
|
||||
/* Input Components */
|
||||
.input_text {
|
||||
textarea,
|
||||
input {
|
||||
@apply rounded-none dark:bg-gray-700 dark:text-gray-50 box-border border-4 p-2 border-white dark:border-gray-600 focus:border-green-400 dark:focus:border-green-400 focus:outline-none;
|
||||
}
|
||||
}
|
||||
.input_number {
|
||||
input {
|
||||
@apply rounded-none dark:bg-gray-700 dark:text-gray-50 box-border border-4 p-2 border-white dark:border-gray-600 focus:border-green-400 dark:focus:border-green-400 focus:outline-none;
|
||||
}
|
||||
}
|
||||
.input_slider {
|
||||
.range {
|
||||
@apply dark:bg-gray-700 rounded-none;
|
||||
}
|
||||
.range::-webkit-slider-thumb {
|
||||
@apply bg-green-400 rounded-none shadow-sm;
|
||||
}
|
||||
.range::-moz-range-thumb {
|
||||
@apply bg-green-400 rounded-none shadow-sm;
|
||||
}
|
||||
.value {
|
||||
@apply font-semibold text-gray-500 dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
}
|
||||
.input_radio {
|
||||
@apply flex flex-wrap gap-2;
|
||||
.radio_item {
|
||||
@apply bg-gray-200 text-gray-700 p-1.5 font-semibold cursor-pointer flex items-center gap-1;
|
||||
}
|
||||
.radio_item.selected {
|
||||
@apply bg-green-500 text-white;
|
||||
@apply bg-gray-100 rounded-none dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
.radio_circle {
|
||||
@apply hidden;
|
||||
}
|
||||
.radio_item.selected {
|
||||
@apply bg-green-400 text-white shadow;
|
||||
}
|
||||
.radio_circle {
|
||||
@apply w-4 h-4 bg-white transition rounded-full box-border;
|
||||
}
|
||||
}
|
||||
.input_checkbox_group {
|
||||
@apply flex flex-wrap gap-2;
|
||||
|
||||
.input_checkbox_group,
|
||||
.input_checkbox {
|
||||
.checkbox_item {
|
||||
@apply bg-gray-200 text-gray-700 p-1.5 font-semibold cursor-pointer flex items-center gap-1;
|
||||
@apply bg-gray-100 rounded-none dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
.checkbox_item.selected {
|
||||
@apply bg-green-500 text-white;
|
||||
}
|
||||
.checkbox {
|
||||
@apply hidden;
|
||||
.check {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-green-600;
|
||||
.check {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
.check line {
|
||||
stroke: white;
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.interpretation {
|
||||
@apply flex;
|
||||
.interpretation_box {
|
||||
@apply flex-grow h-4 w-4;
|
||||
}
|
||||
.interpret_check {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
.interpret_check line {
|
||||
stroke: gray;
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
@apply bg-green-400 text-white shadow;
|
||||
}
|
||||
}
|
||||
.input_checkbox {
|
||||
@apply flex flex-wrap gap-2;
|
||||
.checkbox_item {
|
||||
@apply bg-gray-200 text-gray-700 p-1.5 font-semibold cursor-pointer flex items-center gap-1;
|
||||
}
|
||||
.checkbox_item.selected {
|
||||
@apply bg-green-500 text-white;
|
||||
}
|
||||
.checkbox {
|
||||
@apply w-4 h-4 bg-white;
|
||||
.check {
|
||||
@apply hidden;
|
||||
}
|
||||
@apply bg-gray-200;
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-green-600;
|
||||
.check {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
.check line {
|
||||
stroke: white;
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.interpretation {
|
||||
@apply flex;
|
||||
.interpretation_box {
|
||||
@apply flex-grow h-4 w-4;
|
||||
}
|
||||
.interpret_check {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
.interpret_check line {
|
||||
stroke: gray;
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
@apply bg-green-500;
|
||||
}
|
||||
}
|
||||
.input_dropdown {
|
||||
@apply inline-block relative;
|
||||
.selector {
|
||||
@apply bg-gray-200 text-gray-700 p-1.5 font-semibold inline-flex items-center;
|
||||
}
|
||||
.caret {
|
||||
@apply ml-1 fill-current h-4 w-4;
|
||||
}
|
||||
.dropdown_menu {
|
||||
@apply absolute hidden text-gray-700 pt-1 max-h-80 overflow-y-auto z-10;
|
||||
}
|
||||
.dropdown_item:first-child {
|
||||
@apply-t;
|
||||
}
|
||||
.dropdown_item {
|
||||
@apply bg-gray-200 hover:bg-gray-400 hover:text-gray-50 py-2 px-4 block whitespace-nowrap cursor-pointer;
|
||||
}
|
||||
.dropdown_item:last-child {
|
||||
@apply-b;
|
||||
}
|
||||
:hover .dropdown_menu {
|
||||
@apply block;
|
||||
}
|
||||
.interpretation_box {
|
||||
@apply p-1;
|
||||
}
|
||||
}
|
||||
.input_slider {
|
||||
@apply text-center;
|
||||
.range {
|
||||
@apply dark:bg-gray-200 focus:border-2 focus:border-green-400 box-border w-full appearance-none h-4;
|
||||
}
|
||||
.range::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
@apply appearance-none w-5 h-5 bg-green-500 cursor-pointer;
|
||||
}
|
||||
.range::-moz-range-thumb {
|
||||
@apply appearance-none w-5 h-5 bg-green-500 cursor-pointer;
|
||||
}
|
||||
.value {
|
||||
@apply inline-block mx-auto mt-0.5 px-2 text-sm;
|
||||
}
|
||||
.interpret_range {
|
||||
@apply flex h-6;
|
||||
div {
|
||||
@apply flex-grow;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input_audio {
|
||||
.audio-react-recorder {
|
||||
@apply hidden;
|
||||
}
|
||||
.start {
|
||||
@apply bg-gray-200 dark:bg-gray-500 dark:text-gray-50 p-1.5 font-semibold;
|
||||
}
|
||||
.stop {
|
||||
@apply bg-red-200 text-red-500 p-1.5 font-semibold;
|
||||
}
|
||||
audio {
|
||||
@apply w-full;
|
||||
}
|
||||
.interpret_range {
|
||||
@apply flex h-4;
|
||||
div {
|
||||
@apply flex-grow h-full;
|
||||
}
|
||||
}
|
||||
.edit_buttons {
|
||||
@apply flex justify-end;
|
||||
img {
|
||||
@apply h-4 dark:invert;
|
||||
}
|
||||
}
|
||||
.edit_button {
|
||||
@apply bg-green-500 bg-opacity-0 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
.clear_button {
|
||||
@apply bg-gray-400 bg-opacity-0 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
}
|
||||
.input_video {
|
||||
@apply w-full h-48;
|
||||
.video_recorder {
|
||||
@apply w-full h-full bg-black;
|
||||
}
|
||||
.record_holder {
|
||||
@apply absolute left-1/2 bottom-4 -translate-x-1/2 -translate-y-1/2 text-center;
|
||||
}
|
||||
.record_message {
|
||||
@apply text-white font-bold mb-4;
|
||||
}
|
||||
.record {
|
||||
@apply w-12 h-12 rounded-full bg-red-500 hover:bg-red-600 border-4 border-red-600;
|
||||
}
|
||||
.upload_zone {
|
||||
@apply bg-gray-200 hover:bg-gray-100 dark:bg-gray-500 dark:hover:bg-gray-400 text-gray-600 dark:text-gray-50 transition w-full h-full flex justify-center items-center text-xl text-center cursor-pointer leading-10;
|
||||
}
|
||||
.video_preview_holder {
|
||||
@apply w-full h-full flex justify-center items-center bg-gray-200;
|
||||
}
|
||||
.video_file_holder {
|
||||
@apply dark:text-gray-50 w-full h-full flex justify-center items-center text-6xl p-6 break-all;
|
||||
}
|
||||
.video_preview {
|
||||
@apply w-full h-full object-contain bg-black;
|
||||
}
|
||||
.edit_buttons {
|
||||
@apply z-10 absolute top-0 right-0;
|
||||
img {
|
||||
@apply h-4;
|
||||
}
|
||||
}
|
||||
.edit_button {
|
||||
@apply bg-green-500 bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
.clear_button {
|
||||
@apply bg-gray-400 bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
}
|
||||
.input_video_example {
|
||||
.video_holder {
|
||||
@apply h-36 object-contain flex justify-center;
|
||||
}
|
||||
.video_preview {
|
||||
@apply w-full;
|
||||
}
|
||||
}
|
||||
.input_file {
|
||||
@apply w-full h-48;
|
||||
.upload_zone {
|
||||
@apply bg-gray-200 hover:bg-gray-100 dark:bg-gray-500 dark:hover:bg-gray-400 text-gray-600 dark:text-gray-50 transition w-full h-full flex justify-center items-center text-xl text-center cursor-pointer leading-10;
|
||||
}
|
||||
.file_preview_holder {
|
||||
@apply w-full h-full flex flex-col justify-center items-center relative inline-block;
|
||||
}
|
||||
.file_name {
|
||||
@apply text-6xl p-6 break-all;
|
||||
}
|
||||
.file_size {
|
||||
@apply text-2xl p-1.5;
|
||||
}
|
||||
.clear_button {
|
||||
@apply absolute top-0 right-0 bg-gray-400 bg-opacity-0 hover:bg-opacity-100 transition p-1;
|
||||
img {
|
||||
@apply h-4 dark:invert;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input_timeseries {
|
||||
@apply w-full h-60;
|
||||
.upload_zone {
|
||||
@apply bg-gray-200 hover:bg-gray-100 dark:bg-gray-500 dark:hover:bg-gray-400 text-gray-600 dark:text-gray-50 transition w-full h-full flex justify-center items-center text-xl text-center cursor-pointer leading-10;
|
||||
}
|
||||
.file_preview_holder {
|
||||
@apply w-full h-full flex flex-col justify-center items-center relative inline-block;
|
||||
}
|
||||
.js-plotly-plot, .plotly.js-plotly-plot * {
|
||||
position: static !important;
|
||||
}
|
||||
}
|
||||
/* Output Components */
|
||||
.output_text {
|
||||
word-break: break-word;
|
||||
@apply w-full bg-white dark:text-blue-900 dark:font-semibold dark:bg-gray-200 border-gray-400 box-border p-1 whitespace-pre-wrap;
|
||||
.input_checkbox_group .checkbox {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.input_dropdown {
|
||||
.selector {
|
||||
@apply bg-gray-100 rounded-none dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
.dropdown_menu {
|
||||
@apply shadow;
|
||||
}
|
||||
.dropdown_item {
|
||||
@apply bg-gray-100 dark:bg-gray-800 hover:bg-green-400 hover:text-gray-50 hover:font-semibold;
|
||||
}
|
||||
.dropdown_item:first-child,
|
||||
.dropdown_item:last-child {
|
||||
@apply rounded-none;
|
||||
}
|
||||
}
|
||||
/* Components */
|
||||
.output_label {
|
||||
.output_class,
|
||||
.output_class_without_confidences {
|
||||
@apply font-bold text-xl py-6 px-4 flex-grow flex items-center justify-center;
|
||||
}
|
||||
.confidence_intervals {
|
||||
@apply flex text-xl;
|
||||
}
|
||||
.labels {
|
||||
@apply mr-1;
|
||||
}
|
||||
.confidences {
|
||||
@apply flex flex-grow flex-col items-baseline;
|
||||
}
|
||||
.label {
|
||||
@apply overflow-hidden whitespace-nowrap h-5 mb-1 overflow-ellipsis text-right text-sm;
|
||||
}
|
||||
.confidence {
|
||||
@apply bg-green-500 text-white font-semibold flex justify-end overflow-hidden whitespace-nowrap h-5 mb-1 px-1 text-sm;
|
||||
@apply bg-gray-300 text-white dark:bg-gray-600 font-semibold;
|
||||
}
|
||||
}
|
||||
.output_image {
|
||||
@apply w-full h-48;
|
||||
.image_preview_holder {
|
||||
@apply w-full h-full flex justify-center items-center bg-gray-200 relative inline-block;
|
||||
}
|
||||
.image_preview,
|
||||
video {
|
||||
@apply w-full h-full object-contain;
|
||||
}
|
||||
}
|
||||
.output_audio {
|
||||
audio {
|
||||
@apply w-full;
|
||||
}
|
||||
}
|
||||
.output_highlightedtext {
|
||||
.category_legend {
|
||||
@apply flex flex-wrap gap-4 mb-2;
|
||||
.category-label {
|
||||
@apply flex gap-2;
|
||||
}
|
||||
.colorbox {
|
||||
@apply w-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.output_keyvalues {
|
||||
table {
|
||||
@apply bg-white dark:bg-gray-200 dark:text-blue-900;
|
||||
thead {
|
||||
@apply font-bold;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
@apply p-1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.output_video {
|
||||
@apply w-full h-48 object-contain flex justify-center;
|
||||
video {
|
||||
@apply h-full;
|
||||
}
|
||||
.video_file_holder {
|
||||
@apply dark:text-gray-50 w-full h-full flex justify-center items-center text-6xl p-6 break-all;
|
||||
}
|
||||
}
|
||||
.output_file {
|
||||
@apply bg-gray-200 hover:bg-gray-100 text-gray-600 transition inline-block;
|
||||
.file_name {
|
||||
@apply text-lg p-1.5;
|
||||
}
|
||||
.file_size {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
.output_dataframe {
|
||||
table {
|
||||
thead {
|
||||
@apply font-bold border-gray-200 border-b-2;
|
||||
}
|
||||
th {
|
||||
@apply transition cursor-pointer;
|
||||
}
|
||||
th:hover {
|
||||
@apply bg-gray-200;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
@apply px-4;
|
||||
}
|
||||
}
|
||||
.pages {
|
||||
@apply flex gap-1 items-center;
|
||||
}
|
||||
.page {
|
||||
@apply px-2 py-1 bg-gray-200;
|
||||
}
|
||||
.page.selected {
|
||||
@apply bg-gray-300;
|
||||
}
|
||||
}
|
||||
.output_carousel {
|
||||
@apply flex flex-col gap-2;
|
||||
.carousel_control {
|
||||
@apply flex gap-4 justify-center items-center my-1;
|
||||
.carousel_index {
|
||||
min-width: 60px;
|
||||
@apply text-xl text-center font-semibold;
|
||||
}
|
||||
button img {
|
||||
@apply h-3 mt-0.5 dark:invert;
|
||||
}
|
||||
.confidence:first-child {
|
||||
@apply bg-green-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,598 +1,133 @@
|
||||
.gradio_bg[theme="huggingface"] {
|
||||
@apply dark:bg-[#0b0f19] dark:text-gray-50;
|
||||
@apply dark:bg-[#0b0f19];
|
||||
}
|
||||
|
||||
.gradio_bg[theme="huggingface"] .gradio_interface {
|
||||
.load_status {
|
||||
@apply text-gray-700 dark:text-gray-50 absolute right-2 flex items-center gap-2 text-sm;
|
||||
}
|
||||
.load_status img {
|
||||
@apply h-5 ml-2 inline-block;
|
||||
}
|
||||
.load_status .loading {
|
||||
@keyframes ld-breath{
|
||||
0%{
|
||||
animation-timing-function:cubic-bezier(0.9647,0.2413,-0.0705,0.7911);
|
||||
transform:scale(0.9)
|
||||
}
|
||||
51%{animation-timing-function:cubic-bezier(0.9226,0.2631,-0.0308,0.7628);
|
||||
transform:scale(1.2)
|
||||
}
|
||||
100%{transform:scale(0.9)}
|
||||
}
|
||||
animation:ld-breath 0.75s infinite linear;
|
||||
}
|
||||
.panels {
|
||||
@apply flex flex-wrap justify-center gap-4;
|
||||
}
|
||||
.panels.unaligned {
|
||||
@apply flex-col sm:flex-row items-stretch sm:items-start
|
||||
}
|
||||
.panels.horizontal {
|
||||
@apply flex-col sm:flex-row items-stretch;
|
||||
}
|
||||
.panels.vertical {
|
||||
@apply flex-col items-stretch;
|
||||
}
|
||||
.panel {
|
||||
@apply flex-1;
|
||||
@apply text-gray-700;
|
||||
}
|
||||
.component_set {
|
||||
@apply border border-gray-100 dark:border-none bg-gradient-to-br from-gray-50 to-white dark:from-gray-700 dark:to-gray-800 p-4 rounded-lg flex flex-col flex-1 gap-3 ;
|
||||
min-height: 36px;
|
||||
@apply from-gray-50 to-white dark:from-gray-700 dark:to-gray-800 bg-gradient-to-br border border-gray-100 dark:border-none p-4 rounded-lg gap-3;
|
||||
}
|
||||
.panel_header {
|
||||
@apply flex items-center text-sm dark:text-gray-50 text-gray-700 mb-1.5;
|
||||
@apply flex items-center text-sm text-gray-700 dark:text-gray-50 mb-1.5;
|
||||
}
|
||||
.panel_button {
|
||||
@apply from-gray-50 hover:from-gray-100 to-gray-100 focus:ring-offset-indigo-300 dark:text-gray-50 dark:from-gray-700 dark:hover:from-gray-800 dark:to-gray-800 dark:focus:ring-offset-indigo-700 dark:border-none shadow-sm font-semibold border flex-grow p-3 rounded-lg transition bg-gradient-to-b;
|
||||
}
|
||||
.panel_buttons {
|
||||
@apply flex gap-4 my-4;
|
||||
}
|
||||
.flag {
|
||||
@apply relative;
|
||||
.dropcontent {
|
||||
@apply bg-white border-gray-200 dark:bg-gray-500 dark:border-none dark:text-gray-50 hidden absolute top-8 left-0 border-2 w-full;
|
||||
div {
|
||||
@apply p-2;
|
||||
}
|
||||
div:hover {
|
||||
@apply bg-gray-100 dark:bg-gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flag:hover:not(.disabled) {
|
||||
.dropcontent {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
.screenshot_set {
|
||||
@apply hidden flex hidden flex-grow;
|
||||
@apply from-gray-50 hover:from-gray-100 to-gray-100 bg-gradient-to-b focus:ring-offset-indigo-300 dark:from-gray-700 dark:hover:from-gray-800 dark:to-gray-800 dark:focus:ring-offset-indigo-700 dark:border-none shadow-sm border rounded-lg;
|
||||
}
|
||||
.examples {
|
||||
@apply max-w-full overflow-x-auto;
|
||||
h4 {
|
||||
@apply text-lg font-semibold my-2;
|
||||
}
|
||||
.examples_control {
|
||||
@apply hidden flex hidden gap-2;
|
||||
}
|
||||
.examples_control_left {
|
||||
@apply flex gap-2;
|
||||
}
|
||||
.shortcut {
|
||||
@apply block text-xs;
|
||||
}
|
||||
.examples_table:not(.gallery) {
|
||||
@apply bg-gray-50 border-gray-100 dark:bg-gray-700 dark:text-gray-50 dark:border-none table-auto p-2 mt-4 rounded border;
|
||||
tbody tr {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
.examples_table_holder:not(.gallery) .examples_table {
|
||||
@apply dark:from-gray-700 dark:to-gray-800 bg-gradient-to-br;
|
||||
thead {
|
||||
@apply border-gray-100 dark:border-gray-800 border-b-2;
|
||||
@apply border-gray-100 dark:border-gray-600;
|
||||
}
|
||||
tbody tr:hover {
|
||||
@apply bg-indigo-500 dark:bg-indigo-900 text-white;
|
||||
}
|
||||
tbody tr.selected {
|
||||
@apply font-bold;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
@apply py-2 px-4;
|
||||
}
|
||||
}
|
||||
.examples_table.gallery {
|
||||
@apply block;
|
||||
tbody {
|
||||
@apply flex gap-2 flex-wrap ;
|
||||
}
|
||||
thead {
|
||||
@apply hidden;
|
||||
}
|
||||
.examples_table_holder.gallery .examples_table {
|
||||
tbody td:hover {
|
||||
@apply bg-indigo-500 dark:bg-indigo-900 text-white;
|
||||
}
|
||||
tbody tr.selected {
|
||||
@apply font-bold;
|
||||
}
|
||||
td {
|
||||
@apply bg-gray-50 dark:bg-gray-700 cursor-pointer p-2 rounded;
|
||||
}
|
||||
}
|
||||
.pages {
|
||||
@apply flex gap-1 items-center mt-2;
|
||||
}
|
||||
/* Common Classes */
|
||||
.edit_buttons {
|
||||
@apply m-1 flex gap-1;
|
||||
button {
|
||||
@apply rounded-full;
|
||||
}
|
||||
.page {
|
||||
@apply bg-gray-100 dark:bg-gray-700 dark:text-gray-50 px-2 py-1 rounded;
|
||||
img {
|
||||
@apply h-3;
|
||||
}
|
||||
.page.selected {
|
||||
@apply bg-gray-300 dark:bg-gray-800;
|
||||
}
|
||||
}
|
||||
.edit_button {
|
||||
@apply bg-indigo-400 hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400;
|
||||
}
|
||||
.clear_button {
|
||||
@apply bg-gray-300 hover:bg-gray-400 dark:bg-gray-400 dark:hover:bg-gray-300;
|
||||
}
|
||||
/* Input Components */
|
||||
.input_text {
|
||||
textarea {
|
||||
@apply w-full p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner placeholder-gray-400 dark:bg-gray-600 dark:placeholder-gray-100 dark:text-gray-50 dark:border-none;
|
||||
@apply p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner placeholder-gray-400 dark:bg-gray-600 dark:placeholder-gray-100 dark:border-none;
|
||||
}
|
||||
input {
|
||||
@apply w-full p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner placeholder-gray-400 dark:bg-gray-600 dark:placeholder-gray-100 dark:text-gray-50 dark:border-none;
|
||||
}
|
||||
.interpretation {
|
||||
.interpretation_box {
|
||||
@apply inline-block whitespace-pre-wrap;
|
||||
}
|
||||
@apply p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner placeholder-gray-400 dark:bg-gray-600 dark:placeholder-gray-100 dark:border-none;
|
||||
}
|
||||
}
|
||||
.input_number {
|
||||
input {
|
||||
@apply w-full p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner placeholder-gray-400 dark:bg-gray-600 dark:placeholder-gray-100 dark:text-gray-50 dark:border-none;
|
||||
@apply p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner placeholder-gray-400 dark:bg-gray-600 dark:placeholder-gray-100 dark:border-none;
|
||||
}
|
||||
.interpretation {
|
||||
@apply flex h-6;
|
||||
.interpretation_box {
|
||||
@apply flex-grow;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input_image {
|
||||
@apply w-full h-80 relative;
|
||||
.upload_zone {
|
||||
@apply border-8 border-gray-300 border-dashed w-full h-full flex justify-center items-center text-3xl text-gray-400 dark:border-gray-500 dark:text-gray-50 text-center cursor-pointer leading-10;
|
||||
}
|
||||
.image_preview_holder {
|
||||
@apply w-full h-full flex justify-center items-center bg-gray-300 dark:bg-gray-400 relative;
|
||||
}
|
||||
.edit_buttons {
|
||||
@apply absolute top-0 right-0;
|
||||
img {
|
||||
@apply h-4;
|
||||
}
|
||||
}
|
||||
.edit_button {
|
||||
@apply bg-indigo-500 bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
.clear_button {
|
||||
@apply bg-gray-400 bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
.image_editor {
|
||||
@apply fixed w-screen h-screen top-0 left-0 bg-black bg-opacity-50 z-40 flex flex-col justify-center items-center;
|
||||
.image_editor_buttons {
|
||||
width: 800px;
|
||||
@apply flex justify-end gap-1;
|
||||
button {
|
||||
@apply px-2 py-1 text-xl bg-black text-white font-semibold rounded-t;
|
||||
}
|
||||
}
|
||||
.tui-image-editor-header-buttons {
|
||||
@apply hidden;
|
||||
}
|
||||
.tui-colorpicker-palette-button {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
.image_preview,
|
||||
video {
|
||||
@apply w-full h-full object-contain;
|
||||
}
|
||||
.sketch > div {
|
||||
@apply bg-white;
|
||||
}
|
||||
.snapshot {
|
||||
@apply absolute bottom-0 w-full bg-white bg-opacity-90 py-3 font-bold text-lg text-center;
|
||||
}
|
||||
.interpretation {
|
||||
@apply w-full h-full absolute top-0 left-0 flex justify-center items-center opacity-90 hover:opacity-20 transition;
|
||||
}
|
||||
}
|
||||
.input_image_example {
|
||||
@apply h-24 max-w-none;
|
||||
}
|
||||
.input_radio {
|
||||
@apply flex flex-wrap gap-2;
|
||||
.radio_item {
|
||||
@apply border bg-gradient-to-t from-gray-100 to-gray-50 text-gray-600 py-1.5 px-3 hover:to-gray-100 dark:from-gray-600 dark:to-gray-500 dark:hover:to-gray-600 dark:text-gray-50 dark:border-none font-semibold rounded cursor-pointer flex items-center gap-1;
|
||||
@apply border bg-gradient-to-t from-gray-100 to-gray-50 text-gray-600 py-1.5 px-3 hover:to-gray-100 dark:text-gray-50 dark:from-gray-600 dark:to-gray-500 dark:hover:to-gray-600 dark:border-none;
|
||||
}
|
||||
.radio_item.selected {
|
||||
@apply text-indigo-500 dark:text-white dark:from-indigo-600 dark:to-indigo-500;
|
||||
}
|
||||
.radio_circle {
|
||||
@apply w-4 h-4 bg-white dark:bg-gray-400 rounded-full box-border;
|
||||
@apply bg-white;
|
||||
}
|
||||
.selected .radio_circle {
|
||||
@apply border-4 border-indigo-600 dark:border-indigo-400 dark:bg-white;
|
||||
@apply border-4 border-indigo-600 dark:border-indigo-400;
|
||||
}
|
||||
}
|
||||
.input_checkbox_group {
|
||||
@apply flex flex-wrap gap-2;
|
||||
.input_checkbox_group, .input_checkbox {
|
||||
.checkbox_item {
|
||||
@apply border bg-gradient-to-t from-gray-100 to-gray-50 hover:to-gray-100 text-gray-600 dark:from-gray-600 dark:to-gray-500 dark:hover:to-gray-600 dark:text-gray-50 dark:border-none py-1.5 px-3 font-semibold rounded cursor-pointer flex items-center gap-1;
|
||||
@apply border bg-gradient-to-t from-gray-100 to-gray-50 hover:to-gray-100 text-gray-600 dark:text-gray-50 dark:from-gray-600 dark:to-gray-500 dark:hover:to-gray-600 dark:border-none py-1.5 px-3;
|
||||
}
|
||||
.checkbox_item.selected {
|
||||
@apply text-indigo-500 dark:text-white dark:from-indigo-600 dark:to-indigo-500;
|
||||
}
|
||||
.checkbox {
|
||||
@apply w-4 h-4 bg-white dark:bg-gray-400 rounded p-1;
|
||||
.check {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-indigo-600 dark:bg-indigo-400;
|
||||
.check {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
.check line {
|
||||
stroke: white;
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.interpretation {
|
||||
@apply flex;
|
||||
.interpretation_box {
|
||||
@apply flex-grow h-4 w-4;
|
||||
}
|
||||
.interpret_check {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
.interpret_check line {
|
||||
stroke: gray;
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input_checkbox {
|
||||
@apply flex flex-wrap gap-2;
|
||||
.checkbox_item {
|
||||
@apply border bg-gradient-to-t from-gray-100 to-gray-50 text-gray-600 dark:from-gray-600 dark:to-gray-500 dark:hover:to-gray-600 dark:text-gray-50 dark:border-none py-1.5 px-3 hover:to-gray-100 font-semibold rounded cursor-pointer flex items-center gap-1;
|
||||
}
|
||||
.checkbox_item.selected {
|
||||
@apply text-indigo-500 dark:text-white dark:from-indigo-600 dark:to-indigo-500;
|
||||
}
|
||||
.checkbox {
|
||||
@apply w-4 h-4 bg-white dark:bg-gray-400 rounded p-1;
|
||||
.check {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-indigo-600 dark:bg-indigo-400;
|
||||
.check {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
.check line {
|
||||
stroke: white;
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.interpretation {
|
||||
@apply flex;
|
||||
.interpretation_box {
|
||||
@apply flex-grow h-4 w-4;
|
||||
}
|
||||
.interpret_check {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
.interpret_check line {
|
||||
stroke: gray;
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input_dropdown {
|
||||
@apply inline-block relative;
|
||||
.selector {
|
||||
@apply border bg-gradient-to-t from-gray-100 to-gray-50 text-gray-600 dark:from-gray-600 dark:to-gray-500 dark:hover:to-gray-600 dark:text-gray-50 dark:border-none py-1.5 px-3 hover:to-gray-100 font-semibold rounded inline-flex items-center;
|
||||
}
|
||||
.caret {
|
||||
@apply ml-1 fill-current h-4 w-4;
|
||||
}
|
||||
.dropdown_menu {
|
||||
@apply absolute hidden text-gray-700 dark:text-gray-50 pt-1 max-h-80 overflow-y-auto z-10;
|
||||
}
|
||||
.dropdown_item:first-child {
|
||||
@apply rounded-t;
|
||||
@apply border bg-gradient-to-t from-gray-100 to-gray-50 text-gray-600 dark:text-gray-50 dark:from-gray-600 dark:to-gray-500 dark:hover:to-gray-600 dark:border-none py-1.5 px-3 hover:to-gray-100;
|
||||
}
|
||||
.dropdown_item {
|
||||
@apply bg-gray-50 dark:bg-gray-500 hover:bg-gray-400 hover:text-gray-50 dark:hover:bg-indigo-600 py-2 px-4 block whitespace-nowrap cursor-pointer;
|
||||
}
|
||||
.dropdown_item:last-child {
|
||||
@apply rounded-b;
|
||||
}
|
||||
:hover .dropdown_menu {
|
||||
@apply block;
|
||||
}
|
||||
.interpretation_box {
|
||||
@apply p-1;
|
||||
@apply bg-gray-50 dark:bg-gray-500 hover:bg-gray-400 hover:text-gray-50 dark:hover:bg-indigo-600
|
||||
}
|
||||
}
|
||||
.input_slider {
|
||||
@apply text-center;
|
||||
.range {
|
||||
@apply w-full appearance-none bg-gray-100 hover:bg-gray-100 transition rounded-full h-4 border dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-gray-50 dark:border-none;
|
||||
@apply bg-white hover:bg-gray-100 dark:bg-gray-600 rounded-full border dark:border-none;
|
||||
}
|
||||
.range::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
@apply appearance-none w-5 h-5 border dark:bg-white bg-indigo-500 rounded-full cursor-pointer shadow;
|
||||
@apply border dark:bg-white bg-indigo-500 rounded-full shadow;
|
||||
}
|
||||
.range::-moz-range-thumb {
|
||||
@apply appearance-none w-5 h-5 border dark:bg-white bg-indigo-500 rounded-full cursor-pointer shadow;
|
||||
@apply border dark:bg-white bg-indigo-500 rounded-full shadow;
|
||||
}
|
||||
.value {
|
||||
@apply inline-block mx-auto mt-1 px-2 py-0.5 bg-gray-100 text-gray-700 dark:bg-gray-600 dark:placeholder-gray-100 dark:text-gray-50 dark:border-none rounded shadow-inner;
|
||||
}
|
||||
.interpret_range {
|
||||
@apply flex h-6;
|
||||
div {
|
||||
@apply flex-grow;
|
||||
}
|
||||
@apply bg-gray-100 text-gray-700 dark:text-gray-50 dark:bg-gray-600 dark:border-none shadow-inner;
|
||||
}
|
||||
}
|
||||
.input_audio {
|
||||
.audio-react-recorder {
|
||||
@apply hidden;
|
||||
}
|
||||
.start {
|
||||
@apply bg-gradient-to-t from-gray-100 to-gray-50 text-gray-600 py-1.5 px-3 hover:to-gray-100 font-semibold rounded;
|
||||
@apply bg-gradient-to-t from-gray-100 to-gray-50 text-gray-600 py-1.5 px-3 hover:to-gray-100 dark:text-gray-50 dark:from-gray-600 dark:to-gray-500 dark:hover:to-gray-600 dark:border-none;
|
||||
}
|
||||
.stop {
|
||||
@apply bg-gradient-to-t from-red-200 to-red-50 text-red-600 py-1.5 px-3 hover:to-gray-100 font-semibold rounded;
|
||||
@apply bg-gradient-to-t from-red-200 to-red-50 text-red-600 py-1.5 px-3 hover:to-gray-100 dark:from-red-700 dark:to-red-600 dark:text-red-100;
|
||||
}
|
||||
audio {
|
||||
@apply w-full;
|
||||
.interpret_range {
|
||||
@apply flex h-4;
|
||||
div {
|
||||
@apply flex-grow h-full;
|
||||
}
|
||||
}
|
||||
}
|
||||
.edit_buttons {
|
||||
@apply flex justify-end;
|
||||
img {
|
||||
@apply h-4 dark:invert;
|
||||
}
|
||||
}
|
||||
.edit_button {
|
||||
@apply bg-indigo-500 bg-opacity-0 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
.clear_button {
|
||||
@apply bg-gray-400 bg-opacity-0 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
}
|
||||
.input_video {
|
||||
@apply w-full h-80 relative;
|
||||
.video_recorder {
|
||||
@apply w-full h-full bg-black;
|
||||
}
|
||||
.record_holder {
|
||||
@apply absolute left-1/2 bottom-4 -translate-x-1/2 -translate-y-1/2 text-center;
|
||||
}
|
||||
.record_message {
|
||||
@apply text-white font-bold mb-4;
|
||||
}
|
||||
.record {
|
||||
@apply w-12 h-12 rounded-full bg-red-500 hover:bg-red-600 border-4 border-red-600;
|
||||
}
|
||||
.upload_zone {
|
||||
@apply border-8 border-gray-300 border-dashed w-full h-full flex justify-center items-center text-3xl text-gray-400 dark:border-gray-500 dark:text-gray-50 text-center cursor-pointer leading-10;
|
||||
}
|
||||
.video_preview_holder {
|
||||
@apply w-full h-full flex justify-center items-center bg-gray-200;
|
||||
}
|
||||
.video_file_holder {
|
||||
@apply dark:text-gray-50 w-full h-full flex justify-center items-center text-6xl p-6 break-all;
|
||||
}
|
||||
.video_preview {
|
||||
@apply w-full h-full object-contain bg-black;
|
||||
}
|
||||
.edit_buttons {
|
||||
@apply z-10 absolute top-0 right-0;
|
||||
img {
|
||||
@apply h-4;
|
||||
}
|
||||
}
|
||||
.edit_button {
|
||||
@apply bg-yellow-500 bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
.clear_button {
|
||||
@apply bg-gray-400 bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
}
|
||||
.input_video_example {
|
||||
.video_holder {
|
||||
@apply h-36 object-contain flex justify-center;
|
||||
}
|
||||
.video_preview {
|
||||
@apply max-w-none;
|
||||
}
|
||||
}
|
||||
.input_file {
|
||||
@apply w-full h-80;
|
||||
.upload_zone {
|
||||
@apply border-8 border-gray-300 border-dashed w-full h-full flex justify-center items-center text-3xl text-gray-400 dark:border-gray-500 dark:text-gray-50 text-center cursor-pointer leading-10;
|
||||
}
|
||||
.file_preview_holder {
|
||||
@apply w-full h-full flex flex-col justify-center items-center relative inline-block;
|
||||
}
|
||||
.file_name {
|
||||
@apply text-6xl p-6 dark:text-gray-50 break-all;
|
||||
}
|
||||
.file_size {
|
||||
@apply text-2xl p-2 dark:text-gray-50;
|
||||
}
|
||||
.clear_button {
|
||||
@apply absolute top-0 right-0 bg-gray-400 bg-opacity-0 hover:bg-opacity-100 transition p-1;
|
||||
img {
|
||||
@apply h-4 dark:invert;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input_timeseries {
|
||||
@apply w-full h-96;
|
||||
.upload_zone {
|
||||
@apply border-8 border-gray-300 border-dashed w-full h-full flex justify-center items-center text-3xl text-gray-400 text-center cursor-pointer leading-10;
|
||||
}
|
||||
.file_preview_holder {
|
||||
@apply w-full h-full flex flex-col justify-center items-center relative inline-block;
|
||||
}
|
||||
.js-plotly-plot, .plotly.js-plotly-plot * {
|
||||
position: static !important;
|
||||
}
|
||||
}
|
||||
.input_dataframe {
|
||||
@apply text-black;
|
||||
}
|
||||
/* Output Components */
|
||||
.output_text {
|
||||
word-break: break-word;
|
||||
@apply w-full p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner whitespace-pre-wrap dark:bg-gray-600 dark:text-gray-50 dark:border-none;
|
||||
@apply p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner whitespace-pre-wrap dark:bg-gray-600 dark:border-none;
|
||||
}
|
||||
.output_label {
|
||||
.output_class {
|
||||
@apply hidden;
|
||||
}
|
||||
.output_class_without_confidences{
|
||||
@apply font-bold text-2xl py-8 px-4 flex-grow flex items-center justify-center dark:text-gray-50;
|
||||
}
|
||||
.confidence_intervals {
|
||||
@apply flex text-xl;
|
||||
}
|
||||
.labels {
|
||||
@apply mr-1;
|
||||
}
|
||||
.confidences {
|
||||
@apply flex flex-grow flex-col items-baseline;
|
||||
}
|
||||
.label {
|
||||
@apply overflow-hidden whitespace-nowrap h-7 mb-1 overflow-ellipsis text-right dark:text-gray-50;
|
||||
}
|
||||
.confidence {
|
||||
@apply bg-gradient-to-r from-indigo-200 to-indigo-500 dark:from-indigo-500 dark:to-indigo-700 rounded text-white flex justify-end overflow-hidden whitespace-nowrap h-7 mb-1 px-1;
|
||||
@apply bg-gradient-to-r from-indigo-200 to-indigo-500 dark:from-indigo-500 dark:to-indigo-700 rounded text-white ;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
.output_image {
|
||||
@apply w-full h-80;
|
||||
.image_preview_holder {
|
||||
@apply w-full h-full flex justify-center items-center bg-gray-200 dark:bg-gray-400 relative inline-block;
|
||||
}
|
||||
.image_preview,
|
||||
video {
|
||||
@apply w-full h-full object-contain;
|
||||
}
|
||||
}
|
||||
.output_audio {
|
||||
audio {
|
||||
@apply w-full;
|
||||
}
|
||||
}
|
||||
.output_highlightedtext {
|
||||
.category_legend {
|
||||
@apply flex flex-wrap gap-4 mb-2;
|
||||
.category-label {
|
||||
@apply flex gap-2;
|
||||
}
|
||||
.colorbox {
|
||||
@apply w-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.output_keyvalues {
|
||||
table {
|
||||
@apply bg-white;
|
||||
thead {
|
||||
@apply font-bold;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
@apply p-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.output_video {
|
||||
@apply w-full h-80 object-contain flex justify-center;
|
||||
video {
|
||||
@apply h-full;
|
||||
}
|
||||
.video_file_holder {
|
||||
@apply dark:text-gray-50 w-full h-full flex justify-center items-center text-6xl p-6 break-all;
|
||||
}
|
||||
}
|
||||
.output_file {
|
||||
@apply w-full h-80 dark:text-gray-50;
|
||||
.file_display {
|
||||
@apply w-full h-full flex flex-col justify-center items-center relative;
|
||||
}
|
||||
.file_name {
|
||||
@apply text-6xl p-6 break-all;
|
||||
}
|
||||
.file_size {
|
||||
@apply text-2xl p-2;
|
||||
}
|
||||
}
|
||||
.output_dataframe {
|
||||
table {
|
||||
thead {
|
||||
@apply font-bold border-gray-200 border-b-2;
|
||||
}
|
||||
th {
|
||||
@apply transition cursor-pointer;
|
||||
}
|
||||
th:hover {
|
||||
@apply bg-gray-200;
|
||||
}
|
||||
td, th {
|
||||
@apply px-4;
|
||||
}
|
||||
}
|
||||
.pages {
|
||||
@apply flex gap-1 items-center;
|
||||
}
|
||||
.page {
|
||||
@apply px-2 py-1 bg-gray-200;
|
||||
}
|
||||
.page.selected {
|
||||
@apply bg-gray-300;
|
||||
}
|
||||
}
|
||||
.output_carousel {
|
||||
@apply flex flex-col gap-2;
|
||||
.carousel_control {
|
||||
@apply flex gap-4 justify-center items-center my-1;
|
||||
.carousel_index {
|
||||
min-width: 60px;
|
||||
@apply text-xl text-center font-semibold;
|
||||
}
|
||||
button img {
|
||||
@apply h-3 mt-0.5 dark:invert;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
22
frontend/src/themes/login.scss
Normal file
22
frontend/src/themes/login.scss
Normal file
@ -0,0 +1,22 @@
|
||||
@import "custom_preflight.scss";
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.login {
|
||||
@apply container mt-8;
|
||||
form {
|
||||
@apply mx-auto p-4 bg-gray-50 shadow-md w-1/2;
|
||||
}
|
||||
h2 {
|
||||
@apply text-2xl font-semibold my-2;
|
||||
}
|
||||
label {
|
||||
@apply block uppercase mt-4;
|
||||
}
|
||||
input {
|
||||
@apply p-2 block;
|
||||
}
|
||||
.submit {
|
||||
@apply bg-yellow-500 hover:bg-yellow-400 dark:hover:bg-yellow-600 transition px-4 py-2 rounded text-white font-semibold cursor-pointer mt-4;
|
||||
}
|
||||
}
|
||||
@ -1,608 +1,114 @@
|
||||
.gradio_bg[theme="peach"] {
|
||||
@apply bg-red-50 dark:bg-yellow-700;
|
||||
@apply bg-gradient-to-r from-red-50 to-yellow-100 dark:from-gray-900 dark:to-gray-800;
|
||||
}
|
||||
|
||||
|
||||
.gradio_bg[theme="peach"] .gradio_interface {
|
||||
.load_status {
|
||||
@apply dark:text-gray-50 absolute right-2 flex items-center gap-2;
|
||||
}
|
||||
.load_status img {
|
||||
@apply h-5 ml-2 inline-block;
|
||||
}
|
||||
.load_status .loading {
|
||||
@keyframes ld-breath{
|
||||
0%{
|
||||
animation-timing-function:cubic-bezier(0.9647,0.2413,-0.0705,0.7911);
|
||||
transform:scale(0.9)
|
||||
}
|
||||
51%{animation-timing-function:cubic-bezier(0.9226,0.2631,-0.0308,0.7628);
|
||||
transform:scale(1.2)
|
||||
}
|
||||
100%{transform:scale(0.9)}
|
||||
}
|
||||
animation:ld-breath 0.75s infinite linear;
|
||||
}
|
||||
.panels {
|
||||
@apply flex flex-wrap justify-center gap-4;
|
||||
}
|
||||
.panels.unaligned {
|
||||
@apply flex-col sm:flex-row items-stretch sm:items-start
|
||||
}
|
||||
.panels.horizontal {
|
||||
@apply flex-col sm:flex-row items-stretch;
|
||||
}
|
||||
.panels.vertical {
|
||||
@apply flex-col items-stretch;
|
||||
}
|
||||
.panel {
|
||||
@apply flex-1;
|
||||
}
|
||||
.component_set {
|
||||
@apply bg-red-100 dark:bg-yellow-900 p-2 rounded-lg flex flex-col flex-1 gap-2 dark:drop-shadow-xl;
|
||||
min-height: 36px;
|
||||
@apply bg-white dark:bg-gray-800 rounded-lg;
|
||||
}
|
||||
.component {
|
||||
@apply p-1 transition;
|
||||
}
|
||||
.panel_header {
|
||||
@apply font-serif dark:text-gray-50 mb-1 text-sm;
|
||||
@apply text-gray-600 dark:text-gray-200 font-semibold;
|
||||
}
|
||||
.panel_button {
|
||||
@apply bg-gray-50 hover:bg-gray-100 dark:bg-yellow-900 dark:hover:bg-yellow-800 dark:text-gray-50 flex-1 p-3 rounded-lg transition font-semibold focus:outline-none;
|
||||
}
|
||||
.panel_button.disabled {
|
||||
@apply text-gray-400 dark:text-yellow-700 cursor-not-allowed;
|
||||
@apply rounded-lg bg-white dark:bg-gray-800 shadow;
|
||||
}
|
||||
.panel_button.submit {
|
||||
@apply bg-red-500 dark:bg-yellow-900 dark:hover:bg-yellow-900 hover:bg-red-400 text-white;
|
||||
}
|
||||
.panel_buttons {
|
||||
@apply flex gap-4 my-4;
|
||||
}
|
||||
.flag {
|
||||
@apply relative;
|
||||
.dropcontent {
|
||||
@apply hidden absolute top-8 left-0 bg-white border-gray-200 border-2 w-full;
|
||||
div {
|
||||
@apply p-2;
|
||||
}
|
||||
div:hover {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flag:hover:not(.disabled) {
|
||||
.dropcontent {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
.screenshot_set {
|
||||
@apply hidden flex hidden flex-grow;
|
||||
}
|
||||
.panel_button.left_panel_button {
|
||||
@apply rounded-tr-none rounded-br-none;
|
||||
}
|
||||
.panel_button.right_panel_button {
|
||||
@apply rounded-tl-none rounded-bl-none hover:bg-gray-200;
|
||||
@apply text-white bg-gradient-to-tr from-red-500 to-yellow-400;
|
||||
|
||||
}
|
||||
.examples {
|
||||
@apply max-w-full overflow-x-auto;
|
||||
h4 {
|
||||
@apply text-lg font-semibold my-2;
|
||||
}
|
||||
.examples_control_left {
|
||||
@apply flex gap-2;
|
||||
}
|
||||
.shortcut {
|
||||
@apply block text-xs;
|
||||
}
|
||||
.examples_control button {
|
||||
@apply bg-gray-100 hover:p-2;
|
||||
}
|
||||
.examples_table:not(.gallery) {
|
||||
@apply table-auto p-2 bg-gray-100 mt-4 rounded;
|
||||
tbody tr {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
thead {
|
||||
@apply border-b-2 border-gray-300;
|
||||
}
|
||||
tbody tr:hover {
|
||||
@apply bg-red-500 dark:bg-black dark:bg-opacity-30 text-white;
|
||||
}
|
||||
tbody tr.selected {
|
||||
@apply font-bold;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
@apply py-2 px-4;
|
||||
.examples_table_holder:not(.gallery) {
|
||||
.examples_table {
|
||||
@apply bg-white dark:bg-gray-800;
|
||||
tbody tr:hover {
|
||||
@apply bg-yellow-500 dark:bg-red-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
.examples_table.gallery {
|
||||
@apply block;
|
||||
tbody {
|
||||
@apply flex gap-2 flex-wrap ;
|
||||
}
|
||||
thead {
|
||||
@apply hidden;
|
||||
.examples_table_holder.gallery .examples_table {
|
||||
tbody td {
|
||||
@apply bg-white dark:bg-gray-800;
|
||||
}
|
||||
tbody td:hover {
|
||||
@apply bg-red-500 dark:bg-black dark:bg-opacity-30 text-white;
|
||||
}
|
||||
tbody tr.selected {
|
||||
@apply font-bold;
|
||||
}
|
||||
td {
|
||||
@apply cursor-pointer p-2 rounded-lg bg-gray-100;
|
||||
@apply bg-yellow-500 dark:bg-red-800;
|
||||
}
|
||||
}
|
||||
.pages {
|
||||
@apply flex gap-1 items-center mt-2;
|
||||
}
|
||||
.page {
|
||||
@apply px-2 py-1 bg-gray-100 rounded;
|
||||
}
|
||||
.page.selected {
|
||||
@apply bg-gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
/* Input Components */
|
||||
.input_text {
|
||||
textarea {
|
||||
@apply w-full bg-white dark:bg-gray-100 border-gray-400 rounded-lg box-border p-1 resize-none;
|
||||
}
|
||||
textarea,
|
||||
input {
|
||||
@apply w-full bg-white dark:bg-gray-100 border-gray-400 rounded-lg box-border p-1;
|
||||
}
|
||||
.interpretation {
|
||||
.interpretation_box {
|
||||
@apply inline-block whitespace-pre-wrap;
|
||||
}
|
||||
@apply rounded-lg bg-gray-50 dark:bg-gray-700 dark:text-gray-50 focus:outline-none focus:bg-gray-100;
|
||||
}
|
||||
}
|
||||
.input_number {
|
||||
input {
|
||||
@apply w-full bg-white dark:bg-gray-100 border-gray-400 rounded-lg box-border p-1;
|
||||
}
|
||||
.interpretation {
|
||||
@apply flex h-6;
|
||||
.interpretation_box {
|
||||
@apply flex-grow;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input_image {
|
||||
@apply w-full h-80 relative;
|
||||
.upload_zone {
|
||||
@apply border-red-300 text-red-400 dark:border-none dark:text-gray-50 border-8 border-dashed w-full h-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10;
|
||||
}
|
||||
.image_preview_holder {
|
||||
@apply w-full h-full flex justify-center items-center relative inline-block;
|
||||
}
|
||||
.edit_buttons {
|
||||
@apply absolute top-0 right-0;
|
||||
img {
|
||||
@apply h-4;
|
||||
}
|
||||
}
|
||||
.edit_button {
|
||||
@apply bg-red-500 bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
.clear_button {
|
||||
@apply bg-gray-400 bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
.image_editor {
|
||||
@apply fixed w-screen h-screen top-0 left-0 bg-black bg-opacity-50 z-40 flex flex-col justify-center items-center;
|
||||
.image_editor_buttons {
|
||||
width: 800px;
|
||||
@apply flex justify-end gap-1;
|
||||
button {
|
||||
@apply px-2 py-1 text-xl bg-black text-white font-semibold rounded-t;
|
||||
}
|
||||
}
|
||||
.tui-image-editor-header-buttons {
|
||||
@apply hidden;
|
||||
}
|
||||
.tui-colorpicker-palette-button {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
.image_preview,
|
||||
video {
|
||||
@apply w-full h-full object-contain;
|
||||
}
|
||||
.sketch > div {
|
||||
@apply bg-white;
|
||||
}
|
||||
.snapshot {
|
||||
@apply absolute bottom-0 w-full bg-white bg-opacity-90 py-3 font-bold text-lg text-center;
|
||||
}
|
||||
.interpretation {
|
||||
@apply w-full h-full absolute top-0 left-0 flex justify-center items-center opacity-90 hover:opacity-20 transition;
|
||||
}
|
||||
}
|
||||
.input_image_example {
|
||||
@apply h-24;
|
||||
}
|
||||
.input_radio {
|
||||
@apply flex flex-wrap gap-2;
|
||||
.radio_item {
|
||||
@apply bg-red-200 text-gray-700 dark:text-gray-50 dark:bg-black dark:bg-opacity-10 py-2 px-4 font-semibold rounded-lg cursor-pointer flex items-center gap-1;
|
||||
}
|
||||
.radio_item.selected {
|
||||
@apply bg-red-500 dark:bg-black dark:bg-opacity-30 text-white;
|
||||
}
|
||||
.radio_circle {
|
||||
@apply w-4 h-4 bg-white rounded-full box-border;
|
||||
}
|
||||
.selected .radio_circle {
|
||||
@apply border-4 border-red-600 dark:border-gray-800;
|
||||
}
|
||||
}
|
||||
.input_checkbox_group {
|
||||
@apply flex flex-wrap gap-2;
|
||||
.checkbox_item {
|
||||
@apply bg-red-200 text-gray-700 dark:text-gray-50 dark:bg-black dark:bg-opacity-10 py-2 px-4 font-semibold rounded-lg cursor-pointer flex items-center gap-1;
|
||||
}
|
||||
.checkbox_item.selected {
|
||||
@apply bg-red-500 dark:bg-black dark:bg-opacity-30 text-white;
|
||||
}
|
||||
.checkbox {
|
||||
@apply w-4 h-4 bg-white;
|
||||
.check {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-red-600 dark:bg-gray-800;
|
||||
.check {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
.check line {
|
||||
stroke: white;
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.interpretation {
|
||||
@apply flex;
|
||||
.interpretation_box {
|
||||
@apply flex-grow h-4 w-4;
|
||||
}
|
||||
.interpret_check {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
.interpret_check line {
|
||||
stroke: gray;
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input_checkbox {
|
||||
@apply flex flex-wrap gap-2;
|
||||
.checkbox_item {
|
||||
@apply bg-red-200 text-gray-700 dark:text-gray-50 dark:bg-black dark:bg-opacity-10 py-2 px-4 font-semibold rounded-lg cursor-pointer flex items-center gap-1;
|
||||
}
|
||||
.checkbox_item.selected {
|
||||
@apply bg-red-500 dark:bg-black dark:bg-opacity-30 text-white;
|
||||
}
|
||||
.checkbox {
|
||||
@apply w-4 h-4 bg-white;
|
||||
.check {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-red-600 dark:bg-gray-800;
|
||||
.check {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
.check line {
|
||||
stroke: white;
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.interpretation {
|
||||
@apply flex;
|
||||
.interpretation_box {
|
||||
@apply flex-grow h-4 w-4;
|
||||
}
|
||||
.interpret_check {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
.interpret_check line {
|
||||
stroke: gray;
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input_dropdown {
|
||||
@apply inline-block relative;
|
||||
.selector {
|
||||
@apply bg-red-200 text-gray-700 dark:bg-black dark:bg-opacity-30 dark:text-gray-50 py-2 px-4 font-semibold rounded-lg inline-flex items-center;
|
||||
}
|
||||
.caret {
|
||||
@apply ml-1 fill-current h-4 w-4;
|
||||
}
|
||||
.dropdown_menu {
|
||||
@apply absolute hidden text-gray-700 pt-1 max-h-80 overflow-y-auto z-10;
|
||||
}
|
||||
.dropdown_item:first-child {
|
||||
@apply rounded-t;
|
||||
}
|
||||
.dropdown_item {
|
||||
@apply bg-red-200 hover:bg-red-400 hover:text-gray-50 dark:bg-yellow-800 dark:text-gray-50 dark:hover:bg-yellow-900 py-2 px-4 block whitespace-nowrap cursor-pointer;
|
||||
}
|
||||
.dropdown_item:last-child {
|
||||
@apply rounded-b;
|
||||
}
|
||||
:hover .dropdown_menu {
|
||||
@apply block;
|
||||
}
|
||||
.interpretation_box {
|
||||
@apply p-1;
|
||||
@apply rounded-lg bg-gray-50 dark:bg-gray-700 dark:text-gray-50 focus:outline-none focus:bg-gray-100;
|
||||
}
|
||||
}
|
||||
.input_slider {
|
||||
@apply text-center;
|
||||
.range {
|
||||
@apply hover:bg-white dark:bg-gray-100 w-full appearance-none transition rounded-full h-4;
|
||||
@apply bg-gray-50 dark:bg-gray-700 rounded-lg;
|
||||
}
|
||||
.range::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
@apply appearance-none w-5 h-5 bg-red-500 dark:bg-gray-800 rounded-full cursor-pointer;
|
||||
@apply bg-gradient-to-tr from-red-500 to-yellow-400 rounded-lg shadow-sm;
|
||||
}
|
||||
.range::-moz-range-thumb {
|
||||
@apply appearance-none w-5 h-5 bg-red-500 dark:bg-gray-800 rounded-full cursor-pointer;
|
||||
@apply bg-gradient-to-tr from-red-500 to-yellow-400 rounded-lg shadow-sm;
|
||||
}
|
||||
.value {
|
||||
@apply text-gray-700 dark:text-gray-50 inline-block mx-auto mt-1 px-2 py-0.5 rounded-lg;
|
||||
}
|
||||
.interpret_range {
|
||||
@apply flex h-6;
|
||||
div {
|
||||
@apply flex-grow;
|
||||
}
|
||||
@apply font-semibold text-gray-500 dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
}
|
||||
.input_audio {
|
||||
.audio-react-recorder {
|
||||
@apply hidden;
|
||||
.input_radio {
|
||||
.radio_item {
|
||||
@apply bg-gray-100 rounded-lg dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
.start {
|
||||
@apply p-2 rounded-lg font-semibold;
|
||||
.radio_item.selected {
|
||||
@apply bg-gradient-to-tr from-red-500 to-yellow-400 text-white shadow;
|
||||
}
|
||||
.stop {
|
||||
@apply bg-red-200 text-red-500 p-2 rounded-lg font-semibold;
|
||||
}
|
||||
audio {
|
||||
@apply w-full;
|
||||
}
|
||||
.interpret_range {
|
||||
@apply flex h-4;
|
||||
div {
|
||||
@apply flex-grow h-full;
|
||||
}
|
||||
}
|
||||
.edit_buttons {
|
||||
@apply flex justify-end;
|
||||
img {
|
||||
@apply h-4 dark:invert;
|
||||
}
|
||||
}
|
||||
.edit_button {
|
||||
@apply bg-red-500 bg-opacity-0 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
.clear_button {
|
||||
@apply bg-gray-400 bg-opacity-0 hover:bg-opacity-100 transition p-1;
|
||||
.radio_circle {
|
||||
@apply w-4 h-4 bg-white transition rounded-full box-border;
|
||||
}
|
||||
}
|
||||
.input_video {
|
||||
@apply w-full h-80;
|
||||
.video_recorder {
|
||||
@apply w-full h-full bg-black;
|
||||
|
||||
.input_checkbox_group,
|
||||
.input_checkbox {
|
||||
.checkbox_item {
|
||||
@apply bg-gray-100 rounded-lg dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
.record_holder {
|
||||
@apply absolute left-1/2 bottom-4 -translate-x-1/2 -translate-y-1/2 text-center;
|
||||
.checkbox_item.selected {
|
||||
@apply bg-gradient-to-tr from-red-500 to-yellow-400 text-white shadow;
|
||||
}
|
||||
.record_message {
|
||||
@apply text-white font-bold mb-4;
|
||||
}
|
||||
.record {
|
||||
@apply w-12 h-12 rounded-full bg-red-500 hover:bg-red-600 border-4 border-red-600;
|
||||
}
|
||||
.upload_zone {
|
||||
@apply border-red-300 text-red-400 dark:border-none dark:text-gray-50 border-8 border-dashed w-full h-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10;
|
||||
}
|
||||
.video_preview_holder {
|
||||
@apply w-full h-full flex justify-center items-center bg-gray-200;
|
||||
}
|
||||
.video_file_holder {
|
||||
@apply dark:text-gray-50 text-red-400 w-full h-full flex justify-center items-center text-6xl p-6 break-all;
|
||||
}
|
||||
.video_preview {
|
||||
@apply w-full h-full object-contain bg-black;
|
||||
}
|
||||
.edit_buttons {
|
||||
@apply z-10 absolute top-0 right-0;
|
||||
img {
|
||||
@apply h-4;
|
||||
}
|
||||
}
|
||||
.edit_button {
|
||||
@apply bg-red-500 bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
.clear_button {
|
||||
@apply bg-gray-400 bg-opacity-30 hover:bg-opacity-100 transition p-1;
|
||||
}
|
||||
}
|
||||
.input_video_example {
|
||||
.video_holder {
|
||||
@apply h-36 object-contain flex justify-center;
|
||||
}
|
||||
.video_preview {
|
||||
@apply w-full;
|
||||
.selected .checkbox {
|
||||
@apply bg-gray-200 bg-opacity-20;
|
||||
}
|
||||
}
|
||||
.input_file {
|
||||
@apply w-full h-80;
|
||||
.upload_zone {
|
||||
@apply border-red-300 text-red-400 dark:border-none dark:text-gray-50 border-8 border-dashed w-full h-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10;
|
||||
.input_dropdown {
|
||||
.selector {
|
||||
@apply bg-gray-100 rounded-lg dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
.file_preview_holder {
|
||||
@apply w-full h-full flex flex-col justify-center items-center relative inline-block;
|
||||
.dropdown_menu {
|
||||
@apply shadow;
|
||||
}
|
||||
.file_name {
|
||||
@apply text-6xl p-6 break-all;
|
||||
.dropdown_item {
|
||||
@apply bg-gray-100 dark:bg-gray-800 hover:bg-red-500 hover:text-gray-50 hover:font-semibold;
|
||||
}
|
||||
.file_size {
|
||||
@apply text-2xl p-2;
|
||||
}
|
||||
.clear_button {
|
||||
@apply absolute top-0 right-0 bg-gray-400 bg-opacity-0 hover:bg-opacity-100 transition p-1;
|
||||
img {
|
||||
@apply h-4 dark:invert;
|
||||
}
|
||||
.dropdown_item:first-child,
|
||||
.dropdown_item:last-child {
|
||||
@apply rounded-lg;
|
||||
}
|
||||
}
|
||||
.input_timeseries {
|
||||
@apply w-full h-96;
|
||||
.upload_zone {
|
||||
@apply border-red-300 text-red-400 dark:border-none dark:text-gray-50 border-8 border-dashed w-full h-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10;
|
||||
}
|
||||
.file_preview_holder {
|
||||
@apply w-full h-full flex flex-col justify-center items-center relative inline-block;
|
||||
}
|
||||
.js-plotly-plot, .plotly.js-plotly-plot * {
|
||||
position: static !important;
|
||||
}
|
||||
}
|
||||
/* Output Components */
|
||||
.output_text {
|
||||
word-break: break-word;
|
||||
@apply w-full bg-white border-gray-400 rounded-lg box-border p-1 whitespace-pre-wrap;
|
||||
}
|
||||
/* Components */
|
||||
.output_label {
|
||||
@apply dark:text-gray-50;
|
||||
.output_class,
|
||||
.output_class_without_confidences {
|
||||
@apply font-bold text-2xl py-8 px-4 flex-grow flex items-center justify-center;
|
||||
}
|
||||
.confidence_intervals {
|
||||
@apply flex text-xl;
|
||||
}
|
||||
.labels {
|
||||
@apply mr-1;
|
||||
}
|
||||
.confidences {
|
||||
@apply flex flex-grow flex-col items-baseline;
|
||||
}
|
||||
.label {
|
||||
@apply overflow-hidden whitespace-nowrap h-7 mb-1 overflow-ellipsis text-right;
|
||||
}
|
||||
.confidence {
|
||||
@apply bg-red-500 dark:bg-black dark:bg-opacity-30 text-white flex justify-end overflow-hidden whitespace-nowrap h-7 mb-1 px-1;
|
||||
@apply bg-gray-300 text-white dark:bg-gray-600 font-semibold rounded-lg;
|
||||
}
|
||||
}
|
||||
.output_image {
|
||||
@apply w-full h-80;
|
||||
.image_preview_holder {
|
||||
@apply w-full h-full flex justify-center items-center relative inline-block;
|
||||
}
|
||||
.image_preview,
|
||||
video {
|
||||
@apply w-full h-full object-contain;
|
||||
}
|
||||
}
|
||||
.output_audio {
|
||||
audio {
|
||||
@apply w-full;
|
||||
}
|
||||
}
|
||||
.output_highlightedtext {
|
||||
.category_legend {
|
||||
@apply flex flex-wrap gap-4 mb-2;
|
||||
.category-label {
|
||||
@apply flex gap-2;
|
||||
}
|
||||
.colorbox {
|
||||
@apply w-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.output_keyvalues {
|
||||
table {
|
||||
@apply bg-white;
|
||||
thead {
|
||||
@apply font-bold;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
@apply p-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.output_video {
|
||||
@apply w-full h-80 object-contain flex justify-center;
|
||||
video {
|
||||
@apply h-full;
|
||||
}
|
||||
.video_file_holder {
|
||||
@apply dark:text-gray-50 text-red-400 w-full h-full flex justify-center items-center text-6xl p-6 break-all;
|
||||
}
|
||||
}
|
||||
.output_file {
|
||||
@apply w-full h-80 dark:text-gray-50;
|
||||
.file_display {
|
||||
@apply w-full h-full flex flex-col justify-center items-center relative;
|
||||
}
|
||||
.file_name {
|
||||
@apply text-6xl p-6 break-all;
|
||||
}
|
||||
.file_size {
|
||||
@apply text-2xl p-2;
|
||||
}
|
||||
}
|
||||
.output_dataframe {
|
||||
@apply dark:text-gray-50;
|
||||
table {
|
||||
thead {
|
||||
@apply font-bold border-gray-200 border-b-2;
|
||||
}
|
||||
th {
|
||||
@apply transition cursor-pointer;
|
||||
}
|
||||
th:hover {
|
||||
@apply bg-gray-200;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
@apply px-4;
|
||||
}
|
||||
}
|
||||
.pages {
|
||||
@apply flex gap-1 items-center;
|
||||
}
|
||||
.page {
|
||||
@apply px-2 py-1 bg-gray-200;
|
||||
}
|
||||
.page.selected {
|
||||
@apply bg-gray-300;
|
||||
}
|
||||
}
|
||||
.output_carousel {
|
||||
@apply flex flex-col gap-2;
|
||||
.carousel_control {
|
||||
@apply flex gap-4 justify-center items-center my-1;
|
||||
.carousel_index {
|
||||
min-width: 60px;
|
||||
@apply text-xl text-center font-semibold;
|
||||
}
|
||||
button img {
|
||||
@apply h-3 mt-0.5;
|
||||
}
|
||||
.confidence:first-child {
|
||||
@apply bg-gradient-to-tr from-red-500 to-yellow-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
118
frontend/src/themes/seafoam.scss
Normal file
118
frontend/src/themes/seafoam.scss
Normal file
@ -0,0 +1,118 @@
|
||||
.gradio_bg[theme="seafoam"] {
|
||||
@apply bg-yellow-100 dark:bg-gray-700;
|
||||
}
|
||||
.gradio_bg[theme="seafoam"] .gradio_interface {
|
||||
.component_set {
|
||||
@apply p-0;
|
||||
}
|
||||
.component {
|
||||
@apply p-2 transition bg-white dark:bg-gray-800 shadow-sm;
|
||||
}
|
||||
.component:hover .panel_header {
|
||||
@apply text-green-400 text-base;
|
||||
}
|
||||
.panel_header {
|
||||
@apply text-sm h-6 text-gray-400 dark:text-gray-200 transition-all font-semibold;
|
||||
}
|
||||
.panel_button {
|
||||
@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 hover:to-green-400 text-white shadow;
|
||||
}
|
||||
.examples {
|
||||
.examples_table_holder:not(.gallery) {
|
||||
.examples_table {
|
||||
@apply dark:bg-gray-800;
|
||||
tbody tr:hover {
|
||||
@apply bg-blue-400 dark:bg-blue-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.examples_table_holder.gallery .examples_table {
|
||||
tbody td {
|
||||
@apply dark:bg-gray-800;
|
||||
}
|
||||
tbody td:hover {
|
||||
@apply bg-blue-400 dark:bg-blue-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Common Classes */
|
||||
.edit_button, .clear_button {
|
||||
@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 hover:to-green-400 text-white;
|
||||
}
|
||||
|
||||
/* Input Components */
|
||||
.input_text {
|
||||
textarea, input {
|
||||
@apply rounded-none bg-gray-50 text-blue-400 dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
}
|
||||
.input_number {
|
||||
input {
|
||||
@apply rounded-none bg-gray-50 text-blue-400 dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
}
|
||||
.input_slider {
|
||||
.range {
|
||||
@apply bg-gray-50 dark:bg-gray-700 rounded-none;
|
||||
}
|
||||
.range::-webkit-slider-thumb {
|
||||
@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 shadow-sm;
|
||||
}
|
||||
.range::-moz-range-thumb {
|
||||
@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 shadow-sm;
|
||||
}
|
||||
.value {
|
||||
@apply bg-gray-50 font-semibold text-blue-400 dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
}
|
||||
.input_radio {
|
||||
.radio_item {
|
||||
@apply bg-gray-50 text-blue-400 dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
.radio_circle {
|
||||
@apply bg-gray-50 dark:bg-gray-400 border-4 border-gray-200 dark:border-gray-600;
|
||||
}
|
||||
.radio_item.selected {
|
||||
@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 text-white shadow;
|
||||
}
|
||||
.radio_circle {
|
||||
@apply w-4 h-4 bg-white transition rounded-full box-border;
|
||||
}
|
||||
.selected .radio_circle {
|
||||
@apply border-gray-400 opacity-40;
|
||||
}
|
||||
}
|
||||
|
||||
.input_checkbox_group, .input_checkbox {
|
||||
.checkbox_item {
|
||||
@apply bg-gray-50 text-blue-400 dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
.checkbox_item.selected {
|
||||
@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500 text-white shadow;
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-gray-400 bg-opacity-40;
|
||||
}
|
||||
}
|
||||
.input_dropdown {
|
||||
.selector {
|
||||
@apply bg-gray-50 text-blue-400 dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
.dropdown_menu {
|
||||
@apply shadow;
|
||||
}
|
||||
.dropdown_item {
|
||||
@apply bg-white dark:bg-gray-800 hover:bg-blue-400 hover:text-gray-50 hover:font-semibold;
|
||||
}
|
||||
}
|
||||
/* Output Components */
|
||||
.output_label {
|
||||
.confidence {
|
||||
@apply bg-gradient-to-t from-gray-400 to-gray-300 dark:from-gray-500 dark:to-gray-400 text-white rounded font-semibold;
|
||||
}
|
||||
.confidence:first-child {
|
||||
@apply bg-gradient-to-t from-blue-400 to-green-300 dark:from-blue-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -181,7 +181,7 @@ export function getNextColor(index, alpha) {
|
||||
let default_colors = [
|
||||
[255, 99, 132],
|
||||
[54, 162, 235],
|
||||
[255, 205, 86],
|
||||
[240, 176, 26],
|
||||
[153, 102, 255],
|
||||
[75, 192, 192],
|
||||
[255, 159, 64]
|
||||
@ -189,7 +189,7 @@ export function getNextColor(index, alpha) {
|
||||
if (index < default_colors.length) {
|
||||
var color_set = default_colors[index];
|
||||
} else {
|
||||
var color_set = [randInt(128, 240), randInt(128, 240), randInt(128, 240)];
|
||||
var color_set = [randInt(64, 196), randInt(64, 196), randInt(64, 196)];
|
||||
}
|
||||
return (
|
||||
"rgba(" +
|
||||
|
||||
@ -6,6 +6,7 @@ interface using the input and output types.
|
||||
from __future__ import annotations
|
||||
import copy
|
||||
import getpass
|
||||
from logging import warning
|
||||
import markdown2 # type: ignore
|
||||
import os
|
||||
import random
|
||||
@ -137,7 +138,7 @@ class Interface:
|
||||
description (str): a description for the interface; if provided, appears above the input and output components.
|
||||
article (str): an expanded article explaining the interface; if provided, appears below the input and output components. Accepts Markdown and HTML content.
|
||||
thumbnail (str): path to image or src to use as display picture for models listed in gradio.app/hub
|
||||
theme (str): Theme to use - one of "default", "huggingface", "grass", "peach". Add "dark" prefix, e.g. "darkpeach" or "darkdefault" for darktheme.
|
||||
theme (str): Theme to use - one of "default", "huggingface", "seafoam", "grass", "peach". Add "dark-" prefix, e.g. "dark-peach" for dark theme (or just "dark" for the default dark theme).
|
||||
css (str): custom css or path to custom css file to use with interface.
|
||||
allow_screenshot (bool): if False, users will not see a button to take a screenshot of the interface.
|
||||
allow_flagging (str): one of "never", "auto", or "manual". If "never" or "auto", users will not see a button to flag an input and output. If "manual", users will see a button to flag. If "auto", every prediction will be automatically flagged. If "manual", samples are flagged when the user clicks flag button. Can be set with environmental variable GRADIO_ALLOW_FLAGGING.
|
||||
@ -197,9 +198,16 @@ class Interface:
|
||||
self.article = article
|
||||
self.thumbnail = thumbnail
|
||||
theme = theme if theme is not None else os.getenv("GRADIO_THEME", "default")
|
||||
if theme not in ("default", "huggingface", "grass", "peach", "darkdefault", "darkhuggingface", "darkgrass", "darkpeach"):
|
||||
raise ValueError("Invalid theme name.")
|
||||
|
||||
DEPRECATED_THEME_MAP = {"darkdefault": "default", "darkhuggingface": "dark-huggingface", "darkpeach": "dark-peach", "darkgrass": "dark-grass"}
|
||||
VALID_THEME_SET = ("default", "huggingface", "seafoam", "grass", "peach", "dark", "dark-huggingface", "dark-seafoam", "dark-grass", "dark-peach")
|
||||
if theme in DEPRECATED_THEME_MAP:
|
||||
warnings.warn(f"'{theme}' theme name is deprecated, using {DEPRECATED_THEME_MAP[theme]} instead.")
|
||||
theme = DEPRECATED_THEME_MAP[theme]
|
||||
elif theme not in VALID_THEME_SET:
|
||||
raise ValueError(f"Invalid theme name, theme must be one of: {', '.join(VALID_THEME_SET)}")
|
||||
self.theme = theme
|
||||
|
||||
self.height = height
|
||||
self.width = width
|
||||
if self.height is not None or self.width is not None:
|
||||
|
||||
@ -351,18 +351,21 @@ class HighlightedText(OutputComponent):
|
||||
Demos: diff_texts, text_analysis
|
||||
'''
|
||||
|
||||
def __init__(self, color_map=None, label=None):
|
||||
def __init__(self, color_map=None, label=None, show_legend=False):
|
||||
'''
|
||||
Parameters:
|
||||
color_map (Dict[str, str]): Map between category and respective colors
|
||||
label (str): component name in interface.
|
||||
show_legend (bool): whether to show span categories in a separate legend or inline.
|
||||
'''
|
||||
self.color_map = color_map
|
||||
self.show_legend = show_legend
|
||||
super().__init__(label)
|
||||
|
||||
def get_template_context(self):
|
||||
return {
|
||||
"color_map": self.color_map,
|
||||
"show_legend": self.show_legend,
|
||||
**super().get_template_context()
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
{
|
||||
"files": {
|
||||
"main.css": "/static/css/main.8fe32992.css",
|
||||
"main.css": "/static/css/main.49f68bed.css",
|
||||
"main.js": "/static/bundle.js",
|
||||
"index.html": "/index.html",
|
||||
"static/media/api-logo.b3893a52.svg": "/static/media/api-logo.b3893a52.svg",
|
||||
"static/media/arrow-left.e497f657.svg": "/static/media/arrow-left.e497f657.svg",
|
||||
"static/media/arrow-right.ea6059fd.svg": "/static/media/arrow-right.ea6059fd.svg",
|
||||
"static/media/clear.33f9b5f3.svg": "/static/media/clear.33f9b5f3.svg",
|
||||
"static/media/edit.44bd4fe1.svg": "/static/media/edit.44bd4fe1.svg",
|
||||
"static/media/logo.411acfd1.svg": "/static/media/logo.411acfd1.svg",
|
||||
@ -13,7 +11,7 @@
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/bundle.css",
|
||||
"static/css/main.8fe32992.css",
|
||||
"static/css/main.49f68bed.css",
|
||||
"static/bundle.js"
|
||||
]
|
||||
}
|
||||
@ -1 +1 @@
|
||||
<!doctype html><html lang="en" style="height:100%;margin:0;padding:0"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>{{ config['title'] or 'Gradio' }}</title><meta property="og:url" content="https://gradio.app/"/><meta property="og:type" content="website"/><meta property="og:image" content="{{ config['thumbnail'] or '' }}"/><meta property="og:title" content="{{ config['title'] or '' }}"/><meta property="og:description" content="{{ config['description'] or '' }}"/><meta name="twitter:card" content="summary_large_image"><meta name="twitter:creator" content="@teamGradio"><meta name="twitter:title" content="{{ config['title'] or '' }}"><meta name="twitter:description" content="{{ config['description'] or '' }}"><meta name="twitter:image" content="{{ config['thumbnail'] or '' }}"><script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-156449732-1"),window.gradio_mode="app"</script><script>window.gradio_config = {{ config|tojson }};</script><script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script><title>Gradio</title><link href="static/bundle.css" rel="stylesheet"><link href="static/css/main.8fe32992.css" rel="stylesheet"></head><body style="height:100%;margin:0;padding:0"><div id="root" style="height:100%"></div><script src="static/bundle.js"></script></body></html>
|
||||
<!doctype html><html lang="en" style="height:100%;margin:0;padding:0"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>{{ config['title'] or 'Gradio' }}</title><meta property="og:url" content="https://gradio.app/"/><meta property="og:type" content="website"/><meta property="og:image" content="{{ config['thumbnail'] or '' }}"/><meta property="og:title" content="{{ config['title'] or '' }}"/><meta property="og:description" content="{{ config['description'] or '' }}"/><meta name="twitter:card" content="summary_large_image"><meta name="twitter:creator" content="@teamGradio"><meta name="twitter:title" content="{{ config['title'] or '' }}"><meta name="twitter:description" content="{{ config['description'] or '' }}"><meta name="twitter:image" content="{{ config['thumbnail'] or '' }}"><script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-156449732-1"),window.gradio_mode="app"</script><script>window.gradio_config = {{ config|tojson }};</script><script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script><title>Gradio</title><link href="static/bundle.css" rel="stylesheet"><link href="static/css/main.49f68bed.css" rel="stylesheet"></head><body style="height:100%;margin:0;padding:0"><div id="root" style="height:100%"></div><script src="static/bundle.js"></script></body></html>
|
||||
@ -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/bundle.css" rel="stylesheet">
|
||||
<link href="/gradio_static/static/bundle.css" rel="stylesheet">
|
||||
<style></style>
|
||||
</head>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
var set_theme = theme => {
|
||||
if (theme.startsWith("dark")) {
|
||||
document.querySelector("#target").classList.add("dark");
|
||||
theme = theme.substring(4);
|
||||
theme = theme === "dark"? "default" : theme.substring(5);
|
||||
} else {
|
||||
document.querySelector("#target").classList.remove("dark");
|
||||
}
|
||||
@ -44,14 +44,21 @@
|
||||
let style_element = document.querySelector("style");
|
||||
let style_html = "";
|
||||
if (hidden_inputs.size > 0) {
|
||||
let inputs_selected = Array(...hidden_inputs).map(i => `.panel:nth-child(1) .component:nth-child(${i + 1})`).join(", ");
|
||||
style_html += `${inputs_selected} { display: none !important }`;
|
||||
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(", ");
|
||||
style_html += `${inputs_selected}, ${examples_selected} { display: none !important }`;
|
||||
if (hidden_inputs.size === input_count - 1) {
|
||||
document.querySelector(".examples_table").classList.add("gallery");
|
||||
} else {
|
||||
document.querySelector(".examples_table").classList.remove("gallery");
|
||||
}
|
||||
}
|
||||
if (hidden_outputs.size > 0) {
|
||||
let outputs_selected = Array(...hidden_outputs).map(i => `.panel:nth-child(2) .component:nth-child(${i + 2})`).join(", ");
|
||||
let outputs_selected = Array.from(hidden_outputs).map(i => `.panel:nth-child(2) .component:nth-child(${i + 2})`).join(", ");
|
||||
style_html += `${outputs_selected} { display: none !important }`;
|
||||
}
|
||||
style_element.innerHTML = style_html;
|
||||
|
||||
}
|
||||
var toggle_input = index => {
|
||||
if (hidden_inputs.has(index)) {
|
||||
@ -75,8 +82,10 @@
|
||||
reset_component_visibility();
|
||||
}
|
||||
var hide_all_inputs = () => {
|
||||
document.querySelectorAll(".input-components input").forEach(n => n.checked = false);
|
||||
window.config.input_components.forEach((_, i) => hidden_inputs.add(i));
|
||||
document.querySelectorAll(".input-components input").forEach((n, i) => {
|
||||
hidden_inputs.add(i);
|
||||
n.checked = false;
|
||||
});
|
||||
reset_component_visibility();
|
||||
}
|
||||
var show_all_outputs = () => {
|
||||
@ -85,40 +94,45 @@
|
||||
reset_component_visibility();
|
||||
}
|
||||
var hide_all_outputs = () => {
|
||||
document.querySelectorAll(".output-components input").forEach(n => n.checked = false);
|
||||
window.config.output_components.forEach((_, i) => hidden_outputs.add(i));
|
||||
document.querySelectorAll(".output-components input").forEach((n, i) => {
|
||||
hidden_outputs.add(i);
|
||||
n.checked = false;
|
||||
});
|
||||
reset_component_visibility();
|
||||
}
|
||||
|
||||
var input_count = 0;
|
||||
var output_count = 0;
|
||||
window.gradio_mode = "website";
|
||||
</script>
|
||||
<script src="/gradio_static/static/bundle.js"></script>
|
||||
<script>
|
||||
var demo_endpoint = "/demo";
|
||||
window.config = [];
|
||||
let themes = ["default", "huggingface", "grass", "peach", "darkdefault", "darkhuggingface", "darkgrass", "darkpeach"]
|
||||
let themes = ["default", "huggingface", "seafoam", "grass", "peach", "dark", "dark-huggingface", "dark-seafoam","dark-grass", "dark-peach"]
|
||||
let theme_html = "";
|
||||
for (let theme of themes) {
|
||||
theme_html += `<label><input type="radio" name="theme" onclick="set_theme('${theme}')"> ${theme}</label>`;
|
||||
theme_html += `<label><input type="radio" name="theme" ${theme == "huggingface" ? "checked": ""} onclick="set_theme('${theme}')"> ${theme}</label>`;
|
||||
}
|
||||
document.querySelector(".theme-set").innerHTML = theme_html;
|
||||
fetch('/demo/kitchen_sink/config')
|
||||
.then(response => response.json())
|
||||
.then(demo => {
|
||||
demo.target = "target";
|
||||
demo.endpoint = demo_endpoint + "/kitchen_sink/api/";
|
||||
window.config = demo;
|
||||
demo.root = "/demo/kitchen_sink/";
|
||||
launchGradio(demo, "#target");
|
||||
|
||||
let input_html = "";
|
||||
for (let [i, input_component] of demo["input_components"].entries()) {
|
||||
input_html += `<label><input type="checkbox" checked name="input" onchange="toggle_input(${i})"> ${input_component["label"]}</label>`;
|
||||
}
|
||||
input_count = demo["input_components"].length;
|
||||
document.querySelector(".input-components").innerHTML = input_html;
|
||||
let output_html = "";
|
||||
for (let [i, output_component] of demo["output_components"].entries()) {
|
||||
output_html += `<label><input type="checkbox" checked name="output" onchange="toggle_output(${i})"> ${output_component["label"]}</label>`;
|
||||
}
|
||||
output_count = demo["output_components"].length;
|
||||
document.querySelector(".output-components").innerHTML = output_html;
|
||||
});
|
||||
</script>
|
||||
<script async src="/gradio_static/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user