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

WIP: Add dark mode support (#1187)

Browse Source 
* add gray 950 to tailwind config

* overwrite global css for dark-mode

* add dark-mode to css tokens

* add dark-mode to components

* workbench dark-mode update

* checkbox tweak

* create icon components

* tweaks

* formatting

* formatting

* handle dark mode query params + system settings

* fix css

Co-authored-by: pngwn <hello@pngwn.io>
This commit is contained in:
Victor Muštar 2022-05-10 02:26:09 +02:00 committed by GitHub
parent 4828e9af3b
commit 962a254a6b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
79 changed files with 480 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/packages/app/package.json
View File

@ -20,17 +20,18 @@
"@gradio/form": "workspace:^0.0.1",
"@gradio/highlighted-text": "workspace:^0.0.1",
"@gradio/html": "workspace:^0.0.1",
"@gradio/icons": "workspace:^0.0.1",
"@gradio/image": "workspace:^0.0.1",
"@gradio/json": "workspace:^0.0.1",
"@gradio/label": "workspace:^0.0.1",
"@gradio/markdown": "workspace:^0.0.1",
"@gradio/model3D": "workspace:^0.0.1",
"@gradio/plot": "workspace:^0.0.1",
"@gradio/table": "workspace:^0.0.1",
"@gradio/tabs": "workspace:^0.0.1",
"@gradio/theme": "workspace:^0.0.1",
"@gradio/upload": "workspace:^0.0.1",
"@gradio/video": "workspace:^0.0.1",
"@gradio/model3D": "workspace:^0.0.1",
"@gradio/plot": "workspace:^0.0.1",
"mime-types": "^2.1.34",
"svelte-i18n": "^3.3.13"
}

6
ui/packages/app/src/components/Dataset/Dataset.svelte
View File

@ -92,7 +92,9 @@
<div class="overflow-x-auto border table-auto rounded-lg w-full text-sm">
<table class="gr-samples-table">
<thead>
<tr class="border-b divide-x shadow-sm">
<tr
class="border-b dark:border-gray-800 divide-x dark:divide-gray-800 shadow-sm"
>
{#each headers as header}
<th class="p-2 whitespace-nowrap min-w-lg text-left">
{header}
@ -103,7 +105,7 @@
<tbody>
{#each selected_samples as sample_row, i}
<tr
class="group cursor-pointer odd:bg-gray-50 border-b divide-x last:border-none hover:bg-orange-50 hover:divide-orange-100"
class="group cursor-pointer odd:bg-gray-50 border-b dark:border-gray-800 divide-x dark:divide-gray-800 last:border-none hover:bg-orange-50 hover:divide-orange-100 dark:hover:bg-gray-700"
on:click={() => {
value = i;
dispatch("click", i + page * samples_per_page);

7
ui/packages/app/src/components/Gallery/clear.svg → ui/packages/app/src/components/Gallery/ClearIcon.svelte
View File

@ -1,14 +1,11 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
width="100%"
height="100%"
width="1em"
height="1em"
viewBox="0 0 24 24"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve"
xmlns:serif="http://www.serif.com/"
style="
fill-rule: evenodd;
clip-rule: evenodd;
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 805 B

After

Width:  |  Height:  |  Size: 612 B

10
ui/packages/app/src/components/Gallery/Gallery.svelte
View File

@ -4,7 +4,7 @@
import { tick } from "svelte";
import type { LoadingStatus } from "../StatusTracker/types";
import StatusTracker from "../StatusTracker/StatusTracker.svelte";
import image_icon from "./image.svg";
import ImageIcon from "./ImageIcon.svelte";
export let loading_status: LoadingStatus;
export let show_label: boolean;
@ -68,16 +68,16 @@
<Block variant="solid" color="grey" padding={false}>
<StatusTracker {...loading_status} />
<BlockLabel {show_label} image={image_icon} label={label || "Gallery"} />
<BlockLabel {show_label} Icon={ImageIcon} label={label || "Gallery"} />
{#if value === null}
<div class="min-h-[16rem] flex justify-center items-center">
<img src={image_icon} alt="" class="h-6 opacity-20" />
<ImageIcon />
</div>
{:else}
{#if selected_image !== null}
<div
on:keydown={on_keydown}
class="absolute inset-0 z-10 flex flex-col bg-white/90 backdrop-blur min-h-[350px] xl:min-h-[450px] max-h-[55vh]"
class="absolute inset-0 z-10 flex flex-col bg-white/90 dark:bg-gray-900 backdrop-blur min-h-[350px] xl:min-h-[450px] max-h-[55vh]"
>
<ModifyUpload on:clear={() => (selected_image = null)} />
@ -134,6 +134,6 @@
<style lang="postcss">
.gallery-item {
@apply rounded shadow-sm relative aspect-square h-full hover:brightness-110 focus:ring-blue-500 focus:ring-2 ring-1 ring-gray-200 hover:ring hover:ring-orange-300 w-full overflow-hidden bg-gray-100 object-fill outline-none;
@apply rounded shadow-sm relative aspect-square h-full hover:brightness-110 focus:ring-blue-500 focus:ring-2 ring-1 ring-gray-200 hover:ring hover:ring-orange-300 w-full overflow-hidden bg-gray-100 dark:bg-gray-900 object-fill outline-none;
}
</style>

17
ui/packages/app/src/components/Gallery/ImageIcon.svelte Normal file
View File

@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-image"
><rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><circle
cx="8.5"
cy="8.5"
r="1.5"
/><polyline points="21 15 16 10 5 21" /></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 373 B

1
ui/packages/app/src/components/Gallery/image.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 371 B

2
ui/packages/app/src/components/Interpretation/InterpretationComponents/Slider.svelte
View File

@ -12,7 +12,7 @@
<div class="input-slider text-center" {theme}>
<input
type="range"
class="range w-full appearance-none transition rounded h-4"
class="range w-full appearance-none transition rounded h-4 bg-blue-400"
disabled
{original}
min={minimum}

6
ui/packages/app/src/components/TimeSeries/TimeSeries.svelte
View File

@ -9,7 +9,7 @@
import type { LoadingStatus } from "../StatusTracker/types";
import { _ } from "svelte-i18n";
import chart_icon from "./chart.svg";
import { Chart as ChartIcon } from "@gradio/icons";
function format_value(val: StaticData) {
return val.data.map((r) =>
@ -121,7 +121,7 @@
color={"grey"}
padding={false}
>
<BlockLabel {show_label} image={chart_icon} label={label || "TimeSeries"} />
<BlockLabel {show_label} Icon={ChartIcon} label={label || "TimeSeries"} />
<StatusTracker {...loading_status} />
{#if mode === "static"}
@ -129,7 +129,7 @@
<Chart value={static_data} {colors} />
{:else}
<div class="min-h-[16rem] flex justify-center items-center">
<img src={chart_icon} alt="" class="h-10 opacity-30" />
<div class="h-10 dark:text-white opacity-50"><ChartIcon /></div>
</div>
{/if}
{:else if _value}

1
ui/packages/app/src/components/TimeSeries/chart.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 357 B

53
ui/packages/app/src/main.ts
View File

@ -57,7 +57,7 @@ interface Config {
}
window.launchGradio = (config: Config, element_query: string) => {
let target = document.querySelector(element_query);
let target: HTMLElement = document.querySelector(element_query)!;
if (!target) {
throw new Error(
@ -86,19 +86,8 @@ window.launchGradio = (config: Config, element_query: string) => {
props: config
});
} else {
let url = new URL(window.location.toString());
if (config.theme && config.theme.startsWith("dark")) {
target.classList.add("dark");
config.dark = true;
if (config.theme === "dark") {
config.theme = "default";
} else {
config.theme = config.theme.substring(5);
}
} else if (url.searchParams.get("__dark-theme") === "true") {
config.dark = true;
target.classList.add("dark");
}
handle_darkmode(target);
let session_hash = Math.random().toString(36).substring(2);
config.fn = fn.bind(null, session_hash, config.root + "api/");
@ -109,6 +98,42 @@ window.launchGradio = (config: Config, element_query: string) => {
}
};
function handle_darkmode(target: HTMLElement) {
let url = new URL(window.location.toString());
const color_mode: "light" | "dark" | "system" | null = url.searchParams.get(
"__theme"
) as "light" | "dark" | "system" | null;
if (color_mode !== null) {
if (color_mode === "dark") {
target.classList.add("dark");
} else if (color_mode === "system") {
use_system_theme(target);
}
// light is default, so we don't need to do anything else
} else if (url.searchParams.get("__dark-theme") === "true") {
target.classList.add("dark");
} else {
console.log("boo");
use_system_theme(target);
}
}
function use_system_theme(target: HTMLElement) {
update_scheme();
window
?.matchMedia("(prefers-color-scheme: dark)")
?.addEventListener("change", update_scheme);
function update_scheme() {
const is_dark =
window?.matchMedia?.("(prefers-color-scheme: dark)").matches ?? null;
target.classList[is_dark ? "add" : "remove"]("dark");
}
}
window.launchGradioFromSpaces = async (space: string, target: string) => {
const space_url = `https://hf.space/embed/${space}/+/`;
let config = await fetch(space_url + "config");

5
ui/packages/app/tailwind.config.js
View File

@ -1,3 +1,5 @@
const colors = require("tailwindcss/colors");
const defaultTheme = require("tailwindcss/defaultTheme");
const production = !process.env.ROLLUP_WATCH;
@ -14,6 +16,9 @@ module.exports = {
mono: ["IBM Plex Mono", ...defaultTheme.fontFamily.mono]
},
colors: {
gray: {
950: "#090f1f"
},
orange: {
50: "#FFF2E5",
100: "#FFE5CC",

11
ui/packages/atoms/src/BlockLabel.svelte
View File

@ -1,11 +1,13 @@
<script lang="ts">
import type { SvelteComponent, SvelteComponentTyped } from "svelte";
// import video_icon from "./video.svg";
// import audio_icon from "./music.svg";
// import file_icon from "./file.svg";
// import csv_icon from "./table.svg";
export let label: string | null = null;
export let image: string | undefined = undefined;
export let Icon: any;
export let show_label: boolean = true;
// const type_labels = {
@ -23,9 +25,12 @@
<div
class:sr-only={!show_label}
class="absolute left-0 top-0 py-1 px-2 rounded-br-lg shadow-sm text-xs text-gray-500 flex items-center pointer-events-none bg-white z-20 border-b border-r border-gray-100"
class="absolute left-0 top-0 py-1 px-2 rounded-br-lg shadow-sm text-xs text-gray-500 flex items-center pointer-events-none bg-white z-20 border-b border-r border-gray-100 dark:bg-gray-900"
>
<img src={image} alt="" class="mr-2 h-[12px] w-[12px] opacity-50" />
<!-- <img src={image} alt="" class="" /> -->
<span class="mr-2 h-[12px] w-[12px] opacity-80">
<Icon />
</span>
{label}
</div>

2
ui/packages/atoms/src/BlockTitle.svelte
View File

@ -3,7 +3,7 @@
</script>
<span
class="text-gray-600 text-[0.855rem] mb-2 block"
class="text-gray-600 text-[0.855rem] mb-2 block dark:text-gray-200"
class:sr-only={!show_label}
>
<slot />

8
ui/packages/atoms/src/IconButton.svelte
View File

@ -1,11 +1,11 @@
<script lang="ts">
export let image: string;
export let alt = "";
export let Icon: any;
// export let alt = "";
</script>
<button
on:click
class="text-gray-500 bg-white/90 h-5 w-5 flex items-center justify-center rounded shadow-sm hover:shadow-xl hover:ring-1 ring-inset ring-gray-200 z-10"
class="text-gray-500 bg-white/90 h-5 w-5 flex items-center justify-center rounded shadow-sm hover:shadow-xl hover:ring-1 ring-inset ring-gray-200 z-10 dark:bg-gray-900 dark:ring-gray-600"
>
<img src={image} {alt} class="m-t-1 w-[60%] h-[60%] opacity-60" />
<div class="m-t-1 w-[60%] h-[60%] opacity-80 dark:text-white"><Icon /></div>
</button>

2
ui/packages/atoms/src/Panel.svelte
View File

@ -1,5 +1,5 @@
<div
class="flex flex-col space-y-2 bg-gray-50 p-4 rounded-xl border border-gray-200/60"
class="flex flex-col space-y-2 bg-gray-50 p-4 rounded-xl border border-gray-200/60 dark:bg-gray-900 dark:border-gray-800"
>
<slot />
</div>

1
ui/packages/audio/package.json
View File

@ -9,6 +9,7 @@
"private": true,
"dependencies": {
"@gradio/atoms": "workspace:^0.0.1",
"@gradio/icons": "workspace:^0.0.1",
"@gradio/upload": "workspace:^0.0.1",
"svelte-range-slider-pips": "^2.0.1"
}

11
ui/packages/audio/src/Audio.svelte
View File

@ -9,12 +9,11 @@
<script lang="ts">
import { onDestroy, createEventDispatcher } from "svelte";
import { Upload, ModifyUpload } from "@gradio/upload";
import { Block, BlockLabel } from "@gradio/atoms";
import { BlockLabel } from "@gradio/atoms";
import { Music } from "@gradio/icons";
//@ts-ignore
import Range from "svelte-range-slider-pips";
import audio_icon from "./music.svg";
export let value: null | { name: string; data: string } = null;
export let label: string;
export let show_label: boolean;
@ -153,13 +152,13 @@
$: dispatch("drag", dragging);
</script>
<BlockLabel {show_label} image={audio_icon} label={label || "Audio"} />
<BlockLabel {show_label} Icon={Music} label={label || "Audio"} />
{#if value === null}
{#if source === "microphone"}
<div class="mt-6 p-2">
{#if recording}
<button class="gr-button !bg-red-500/10" on:click={stop}>
<span class="flex h-1.5 w-1.5 relative mr-2">
<span class="flex h-1.5 w-1.5 relative mr-2 ">
<span
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"
/>
@ -170,7 +169,7 @@
<div class="whitespace-nowrap text-red-500">Stop recording</div>
</button>
{:else}
<button class="gr-button" on:click={record}>
<button class="gr-button text-gray-800" on:click={record}>
<span class="flex h-1.5 w-1.5 relative mr-2">
<span
class="relative inline-flex rounded-full h-1.5 w-1.5 bg-red-500"

7
ui/packages/audio/src/StaticAudio.svelte
View File

@ -10,7 +10,7 @@
import { createEventDispatcher } from "svelte";
import { Block, BlockLabel } from "@gradio/atoms";
import audio_icon from "./music.svg";
import { Music } from "@gradio/icons";
export let value: null | { name: string; data: string } = null;
export let label: string;
@ -32,10 +32,11 @@
});
</script>
<BlockLabel {show_label} image={audio_icon} label={label || "Audio"} />
<BlockLabel {show_label} Icon={Music} label={label || "Audio"} />
{#if value === null}
<div class="min-h-[8rem] flex justify-center items-center">
<img src={audio_icon} alt="" class="h-6 opacity-20" />
<!-- <img src={audio_icon} alt="" class="h-6 opacity-20" /> -->
<div class="h-10 dark:text-white opacity-50"><Music /></div>
</div>
{:else}
<audio

1
ui/packages/audio/src/music.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-music"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 329 B

2
ui/packages/carousel/src/CarouselItem.svelte
View File

@ -18,7 +18,7 @@
>
{#if label}
<div
class="absolute left-0 top-0 py-1 px-2 rounded-br-lg shadow-sm text-xs text-gray-500 flex items-center pointer-events-none bg-white z-20"
class="absolute left-0 top-0 py-1 px-2 rounded-br-lg shadow-sm text-xs text-gray-500 flex items-center pointer-events-none bg-white z-20 dark:bg-gray-800"
>
{label}
</div>

1
ui/packages/chart/package.json
View File

@ -8,6 +8,7 @@
"license": "ISC",
"private": true,
"dependencies": {
"@gradio/icons": "workspace:^0.0.1",
"@gradio/theme": "workspace:^0.0.1",
"@gradio/tooltip": "workspace:^0.0.1",
"@gradio/utils": "workspace:^0.0.1",

1
ui/packages/file/package.json
View File

@ -9,6 +9,7 @@
"private": true,
"dependencies": {
"@gradio/atoms": "workspace:^0.0.1",
"@gradio/icons": "workspace:^0.0.1",
"@gradio/upload": "workspace:^0.0.1"
}
}

8
ui/packages/file/src/File.svelte
View File

@ -2,7 +2,7 @@
import type { FileData } from "@gradio/upload";
import { BlockLabel } from "@gradio/atoms";
import { prettyBytes } from "./utils";
import file_icon from "./file.svg";
import { File } from "@gradio/icons";
export let value: FileData | null;
export let style: string = "";
@ -10,7 +10,7 @@
export let show_label: boolean;
</script>
<BlockLabel {show_label} image={file_icon} label={label || "File"} />
<BlockLabel {show_label} Icon={File} label={label || "File"} />
{#if value}
<a
@ -38,5 +38,7 @@
</div>
</a>
{:else}
<div class="min-h-[8rem]" />
<div class="min-h-[16rem] flex justify-center items-center">
<div class="h-10 dark:text-white opacity-50"><File /></div>
</div>
{/if}

4
ui/packages/file/src/FileUpload.svelte
View File

@ -3,9 +3,9 @@
import { Upload, ModifyUpload } from "@gradio/upload";
import type { FileData } from "@gradio/upload";
import { BlockLabel } from "@gradio/atoms";
import { File } from "@gradio/icons";
import { prettyBytes } from "./utils";
import file_icon from "./file.svg";
export let value: null | FileData;
@ -44,7 +44,7 @@
$: dispatch("drag", dragging);
</script>
<BlockLabel {show_label} image={file_icon} label={label || "File"} />
<BlockLabel {show_label} Icon={File} label={label || "File"} />
{#if value === null}
<Upload on:load={handle_upload} filetype="file" bind:dragging>

1
ui/packages/file/src/file.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 339 B

6
ui/packages/form/src/Checkbox.svelte
View File

@ -1,8 +1,6 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { BlockTitle, Block } from "@gradio/atoms";
export let value: boolean;
export let disabled: boolean = false;
export let label: string;
@ -20,14 +18,14 @@
<!-- svelte-ignore a11y-label-has-associated-control -->
<label
class:!cursor-not-allowed={disabled}
class="flex items-center text-gray-700 text-sm space-x-2 rounded-lg cursor-pointer bg-white"
class="flex items-center text-gray-700 text-sm space-x-2 rounded-lg cursor-pointer bg-white dark:bg-transparent"
>
<input
bind:checked={value}
{disabled}
type="checkbox"
name="test"
class="rounded border-gray-300 text-blue-600 disabled:text-gray-400 disabled:!cursor-not-allowed shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 focus:ring-opacity-50"
class="gr-check-radio gr-checkbox"
/>
<span class="ml-2">{label}</span></label
>

2
ui/packages/form/src/CheckboxGroup.svelte
View File

@ -36,7 +36,7 @@
checked={value.includes(choice)}
type="checkbox"
name="test"
class="rounded border-gray-300 text-blue-600 disabled:text-gray-400 disabled:cursor-not-allowed shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 focus:ring-opacity-50"
class="gr-check-radio gr-checkbox"
/> <span class="ml-2">{choice}</span></label
>
{/each}

2
ui/packages/form/src/Radio.svelte
View File

@ -28,7 +28,7 @@
bind:group={value}
type="radio"
name="test"
class="rounded-full border-gray-300 text-blue-600 disabled:text-gray-400 disabled:cursor-not-allowed shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 focus:ring-opacity-50"
class="gr-check-radio gr-radio"
value={choice}
/> <span class="ml-2">{choice}</span></label
>

2
ui/packages/form/src/Range.svelte
View File

@ -27,7 +27,7 @@
<label for={id}>
<BlockTitle {show_label}>{label}</BlockTitle>
</label>
<div class="font-medium">{value}</div>
<div class="font-medium dark:text-gray-300">{value}</div>
</div>
</div>

10
ui/packages/icons/package.json Normal file
View File

@ -0,0 +1,10 @@
{
"name": "@gradio/icons",
"version": "0.0.1",
"description": "Gradio UI packages",
"type": "module",
"main": "src/index.ts",
"author": "",
"license": "ISC",
"private": true
}

15
ui/packages/icons/src/Camera.svelte Normal file
View File

@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-camera"
><path
d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
/><circle cx="12" cy="13" r="4" /></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 367 B

18
ui/packages/icons/src/Chart.svelte Normal file
View File

@ -0,0 +1,18 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-bar-chart-2"
><line x1="18" y1="20" x2="18" y2="10" /><line
x1="12"
y1="20"
x2="12"
y2="4"
/><line x1="6" y1="20" x2="6" y2="14" /></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 369 B

12
ui/packages/icons/src/Circle.svelte Normal file
View File

@ -0,0 +1,12 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 24 24"
fill="red"
stroke="red"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-circle"><circle cx="12" cy="12" r="10" /></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 259 B

24
ui/packages/icons/src/Clear.svelte Normal file
View File

@ -0,0 +1,24 @@
<svg
width="100%"
height="100%"
viewBox="0 0 24 24"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve"
stroke="currentColor"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;"
>
<g
transform="matrix(1.14096,-0.140958,-0.140958,1.14096,-0.0559523,0.0559523)"
>
<path
d="M18,6L6.087,17.913"
style="fill:none;fill-rule:nonzero;stroke-width:2px;"
/>
</g>
<path
d="M4.364,4.364L19.636,19.636"
style="fill:none;fill-rule:nonzero;stroke-width:2px;"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 581 B

13
ui/packages/icons/src/Edit.svelte Normal file
View File

@ -0,0 +1,13 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-edit-2"
><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" /></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 306 B

15
ui/packages/icons/src/File.svelte Normal file
View File

@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-file"
><path
d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"
/><polyline points="13 2 13 9 20 9" /></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 346 B

17
ui/packages/icons/src/Image.svelte Normal file
View File

@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-image"
><rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><circle
cx="8.5"
cy="8.5"
r="1.5"
/><polyline points="21 15 16 10 5 21" /></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 375 B

17
ui/packages/icons/src/Music.svelte Normal file
View File

@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-music"
><path d="M9 18V5l12-2v13" /><circle cx="6" cy="18" r="3" /><circle
cx="18"
cy="16"
r="3"
/></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 335 B

13
ui/packages/icons/src/Sketch.svelte Normal file
View File

@ -0,0 +1,13 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-edit-2"
><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" /></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 306 B

13
ui/packages/icons/src/Square.svelte Normal file
View File

@ -0,0 +1,13 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 24 24"
fill="red"
stroke="red"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-square"
><rect x="3" y="3" width="18" height="18" rx="2" ry="2" /></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 285 B

15
ui/packages/icons/src/Table.svelte Normal file
View File

@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-table"
><path
d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"
/></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 358 B

15
ui/packages/icons/src/Undo.svelte Normal file
View File

@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-rotate-ccw"
><polyline points="1 4 1 10 7 10" /><path
d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"
/></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 326 B

20
ui/packages/icons/src/Video.svelte Normal file
View File

@ -0,0 +1,20 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-video"
><polygon points="23 7 16 12 23 17 23 7" /><rect
x="1"
y="5"
width="15"
height="14"
rx="2"
ry="2"
/></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 349 B

13
ui/packages/icons/src/index.ts Normal file
View File

@ -0,0 +1,13 @@
export { default as Clear } from "./Clear.svelte";
export { default as Camera } from "./Camera.svelte";
export { default as Circle } from "./Circle.svelte";
export { default as Edit } from "./Edit.svelte";
export { default as Sketch } from "./Sketch.svelte";
export { default as Square } from "./Square.svelte";
export { default as Table } from "./Table.svelte";
export { default as Undo } from "./Undo.svelte";
export { default as Video } from "./Video.svelte";
export { default as Image } from "./Image.svelte";
export { default as Chart } from "./Chart.svelte";
export { default as Music } from "./Music.svelte";
export { default as File } from "./File.svelte";

1
ui/packages/image/package.json
View File

@ -9,6 +9,7 @@
"private": true,
"dependencies": {
"@gradio/atoms": "workspace:^0.0.1",
"@gradio/icons": "workspace:^0.0.1",
"@gradio/upload": "workspace:^0.0.1",
"cropperjs": "^1.5.12",
"lazy-brush": "^1.0.1",

7
ui/packages/image/src/Image.svelte
View File

@ -1,8 +1,7 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { Block, BlockLabel } from "@gradio/atoms";
import image_icon from "./image.svg";
import sketch_icon from "./sketch.svg";
import { BlockLabel } from "@gradio/atoms";
import { Image, Sketch as SketchIcon } from "@gradio/icons";
import Cropper from "./Cropper.svelte";
import Sketch from "./Sketch.svelte";
@ -58,7 +57,7 @@
<BlockLabel
{show_label}
image={source === "canvas" ? sketch_icon : image_icon}
Icon={source === "canvas" ? SketchIcon : Image}
label={label || (source === "canvas" ? "Sketch" : "Image")}
/>

16
ui/packages/image/src/ModifySketch.svelte
View File

@ -1,22 +1,12 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { IconButton } from "@gradio/atoms";
import undo from "./undo.svg";
import clear from "./clear.svg";
import { Undo, Clear } from "@gradio/icons";
const dispatch = createEventDispatcher();
</script>
<div class="z-50 top-2 right-2 justify-end flex gap-1 absolute">
<IconButton
image={undo}
alt="undo sketch"
on:click={() => dispatch("undo")}
/>
<IconButton
image={clear}
alt="clear sketch"
on:click={() => dispatch("clear")}
/>
<IconButton Icon={Undo} on:click={() => dispatch("undo")} />
<IconButton Icon={Clear} on:click={() => dispatch("clear")} />
</div>

6
ui/packages/image/src/Sketch.svelte
View File

@ -10,9 +10,8 @@
let mounted;
let brush_radius = 50;
let brush_color = "#444";
let brush_color = "#090f1f";
let catenary_color = "#aaa";
let background_color = "#FFF";
let canvas_width = 400;
let canvas_height = 400;
@ -337,8 +336,7 @@
</script>
<div
class="touch-none relative"
style="height:100%; width:100%; background-color:{background_color}"
class="touch-none relative bg-red-500 h-full w-full"
bind:this={canvas_container}
bind:offsetWidth={canvas_width}
bind:offsetHeight={canvas_height}

6
ui/packages/image/src/StaticImage.svelte
View File

@ -2,7 +2,7 @@
import { createEventDispatcher } from "svelte";
import { Block, BlockLabel } from "@gradio/atoms";
import image_icon from "./image.svg";
import { Image } from "@gradio/icons";
export let value: null | string;
export let label: string | undefined = undefined;
@ -16,10 +16,10 @@
$: value && dispatch("change", value);
</script>
<BlockLabel {show_label} image={image_icon} label={label || "Image"} />
<BlockLabel {show_label} Icon={Image} label={label || "Image"} />
{#if value === null}
<div class="min-h-[16rem] flex justify-center items-center">
<img src={image_icon} alt="" class="h-6 opacity-20" />
<div class="h-10 dark:text-white opacity-50"><Image /></div>
</div>
{:else}
<img class="w-full h-full object-contain" src={value} {style} alt="" />

31
ui/packages/image/src/Webcam.svelte
View File

@ -1,8 +1,6 @@
<script lang="ts">
import { createEventDispatcher, onMount } from "svelte";
import camera_icon from "./camera.svg";
import circle_icon from "./circle.svg";
import square_icon from "./square.svg";
import { Camera, Circle, Square } from "@gradio/icons";
let video_source: HTMLVideoElement;
let canvas: HTMLCanvasElement;
@ -107,27 +105,18 @@
>
{#if mode === "video"}
{#if recording}
<img
style="color: white"
src={square_icon}
alt="take a screenshot"
class="w-2/4 h-2/4"
/>
<div class="w-2/4 h-2/4 dark:text-white opacity-80">
<Square />
</div>
{:else}
<img
style="color: white"
src={circle_icon}
alt="take a screenshot"
class="w-2/4 h-2/4"
/>
<div class="w-2/4 h-2/4 dark:text-white opacity-80">
<Square />
</div>
{/if}
{:else}
<img
style="color: white"
src={camera_icon}
alt="take a screenshot"
class="w-2/4 h-2/4"
/>
<div class="w-2/4 h-2/4 dark:text-white opacity-80">
<Camera />
</div>
{/if}
</button>
</div>

1
ui/packages/image/src/camera.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 351 B

1
ui/packages/image/src/circle.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="red" stroke="red" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 250 B

8
ui/packages/image/src/clear.svg
View File

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;">
<g transform="matrix(1.14096,-0.140958,-0.140958,1.14096,-0.0559523,0.0559523)">
<path d="M18,6L6.087,17.913" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
</g>
<path d="M4.364,4.364L19.636,19.636" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 761 B

1
ui/packages/image/src/image.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 371 B

1
ui/packages/image/src/sketch.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 293 B

1
ui/packages/image/src/square.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="red" stroke="red" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 272 B

1
ui/packages/image/src/undo.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-ccw"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 319 B

2
ui/packages/json/src/JSONNode.svelte
View File

@ -13,7 +13,7 @@
}}
>
<span
class="bg-gray-50 hover:bg-gray-100 px-1 border rounded text-gray-700"
class="bg-gray-50 hover:bg-gray-100 px-1 border rounded text-gray-700 dark:hover:bg-gray-800"
>expand {value.length} children</span
>
</button>

1
ui/packages/model3D/package.json
View File

@ -9,6 +9,7 @@
"private": true,
"dependencies": {
"@gradio/atoms": "workspace:^0.0.1",
"@gradio/icons": "workspace:^0.0.1",
"@gradio/upload": "workspace:^0.0.1",
"babylonjs": "^4.2.1",
"babylonjs-loaders": "^4.2.1"

5
ui/packages/model3D/src/Model3D.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { FileData } from "@gradio/upload";
import { BlockLabel } from "@gradio/atoms";
import file_icon from "./file.svg";
import { File } from "@gradio/icons";
export let value: FileData;
export let style: string;
@ -12,7 +12,6 @@
import { onMount, afterUpdate } from "svelte";
import * as BABYLON from "babylonjs";
import * as BABYLON_LOADERS from "babylonjs-loaders";
import { clear } from "@testing-library/user-event/dist/clear";
BABYLON_LOADERS.OBJFileLoader.IMPORT_VERTEX_COLORS = true;
@ -68,6 +67,6 @@
}
</script>
<BlockLabel {show_label} image={file_icon} label={label || "3D Model"} />
<BlockLabel {show_label} Icon={File} label={label || "3D Model"} />
<canvas class="w-full h-full object-contain" bind:this={canvas} />

5
ui/packages/model3D/src/Model3DUpload.svelte
View File

@ -3,8 +3,7 @@
import { Upload, ModifyUpload } from "@gradio/upload";
import type { FileData } from "@gradio/upload";
import { BlockLabel } from "@gradio/atoms";
import file_icon from "./file.svg";
import { File } from "@gradio/icons";
export let value: null | FileData;
@ -91,7 +90,7 @@
$: dispatch("drag", dragging);
</script>
<BlockLabel {show_label} image={file_icon} label={label || "3D Model"} />
<BlockLabel {show_label} Icon={File} label={label || "3D Model"} />
{#if value === null}
<Upload on:load={handle_upload} filetype=".obj, .gltf, .glb" bind:dragging>

2
ui/packages/table/src/EditableCell.svelte
View File

@ -7,7 +7,7 @@
{#if edit}
<input
class="absolute outline-none inset-2 bg-transparent border-0 translate-x-px flex-1"
class="absolute outline-none inset-2 bg-transparent border-0 translate-x-px flex-1 "
class:translate-x-px={!header}
class:font-bold={header}
tabindex="-1"

9
ui/packages/table/src/Table.svelte
View File

@ -472,12 +472,15 @@
class:opacity-40={dragging}
>
<thead class="sticky top-0 left-0 right-0 bg-white shadow-sm z-10">
<tr class="border-b divide-x dark:divide-gray-800 text-left">
<tr
class="border-b dark:border-gray-700 divide-x dark:divide-gray-700 text-left"
>
{#each _headers as { value, id }, i (id)}
<th
bind:this={els[id].cell}
class="p-0 relative focus-within:ring-1 ring-orange-500 ring-inset outline-none "
class:bg-orange-50={header_edit === id}
class:dark:bg-transparent={header_edit === id}
class:rounded-tl-lg={i === 0}
class:rounded-tr-lg={i === _headers.length - 1}
aria-sort={get_sort_status(value, sort_by, sort_direction)}
@ -523,7 +526,7 @@
<tbody class="overflow-y-scroll">
{#each data as row, i (row)}
<tr
class="group border-b last:border-none divide-x dark:divide-gray-800 space-x-4 odd:bg-gray-50 dark:odd:bg-gray-900 group focus:bg-gradient-to-b focus:from-blue-100 dark:focus:from-blue-900 focus:to-blue-50 dark:focus:to-gray-900 focus:odd:bg-white"
class="group border-b dark:border-gray-700 last:border-none divide-x dark:divide-gray-700 space-x-4 odd:bg-gray-50 dark:odd:bg-gray-900 group focus:bg-gradient-to-b focus:from-blue-100 dark:focus:from-blue-900 focus:to-blue-50 dark:focus:to-gray-900 focus:odd:bg-white"
>
{#each row as { value, id }, j (id)}
<td
@ -532,7 +535,7 @@
on:click={() => handle_cell_click(id)}
on:dblclick={() => start_edit(id)}
on:keydown={(e) => handle_keydown(e, i, j, id)}
class=" outline-none focus-within:ring-1 ring-orange-500 ring-inset focus-within:bg-orange-50 group-last:first:rounded-bl-lg group-last:last:rounded-br-lg relative"
class=" outline-none focus-within:ring-1 ring-orange-500 ring-inset focus-within:bg-orange-50 dark:focus-within:bg-gray-800 group-last:first:rounded-bl-lg group-last:last:rounded-br-lg relative"
>
<div
class:border-transparent={selected !== id}

2
ui/packages/tabs/src/Tabs.svelte
View File

@ -41,7 +41,7 @@
</script>
<div class="tabs flex flex-col my-4">
<div class="flex border-b-2">
<div class="flex border-b-2 dark:border-gray-700">
{#each tabs as t, i}
{#if t.id === $selected_tab}
<button

41
ui/packages/theme/src/global.css
View File

@ -2,6 +2,47 @@
@tailwind components;
@tailwind utilities;
@layer base {
.bg-gray-950 {
background-color: #090f1f;
}
.dark:bg-gray-950 {
}
.dark {
@apply text-gray-300 bg-gray-950;
}
.dark .text-gray-500,
.dark .text-gray-600 {
@apply text-gray-300;
}
.dark .text-gray-700,
.dark .text-gray-800,
.dark .text-gray-900 {
@apply text-gray-200;
}
.dark .border,
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300 {
@apply border-gray-700;
}
.dark .bg-white {
@apply bg-gray-950;
}
.dark .bg-gray-50 {
@apply bg-gray-900;
}
.dark .bg-gray-200 {
@apply bg-gray-800;
}
}
@layer components {
.col.gr-gap > *:not(.absolute) + * {
@apply mt-3;

38
ui/packages/theme/src/tokens.css
View File

@ -4,7 +4,8 @@
relative
rounded-lg
bg-white
shadow-sm;
shadow-sm
dark:bg-gray-800;
}
.gr-input {
@ -14,7 +15,12 @@
focus:ring-opacity-50
placeholder:text-gray-400
checked:shadow-inner
border-gray-200;
border-gray-200
dark:text-gray-200
dark:focus:ring-gray-800
dark:focus:border-gray-600
dark:placeholder:text-gray-500
dark:border-gray-700;
}
.gr-label {
@ -34,31 +40,29 @@
}
.gr-check-radio {
@apply border-gray-300
text-blue-600
shadow-sm
focus:border-blue-300
focus:ring
focus:ring-offset-0
focus:ring-blue-200
focus:ring-opacity-50;
@apply border-gray-300 text-blue-600 disabled:text-gray-400 disabled:!cursor-not-allowed shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 dark:focus:ring-gray-700 focus:ring-opacity-50 dark:bg-gray-900 dark:border-gray-700 dark:checked:bg-blue-600;
}
.gr-checkbox {
@apply rounded
checked:shadow-inner;
@apply rounded;
}
.gr-radio {
@apply rounded-full;
}
.gr-button {
@apply border inline-flex items-center justify-center shadow-sm hover:shadow bg-gradient-to-br bg-white active:shadow-inner flex-1 text-center px-2 py-0.5 rounded text-sm;
@apply border inline-flex items-center justify-center shadow-sm hover:shadow bg-gradient-to-br bg-white dark:bg-gray-700 dark:border-gray-600 active:shadow-inner flex-1 text-center px-2 py-0.5 rounded text-sm;
}
.gr-button-primary {
@apply from-orange-100/70 to-orange-200/80 hover:to-orange-100/90 text-orange-600 border-orange-200;
@apply from-orange-100/70 to-orange-200/80 hover:to-orange-100/90 text-orange-600 border-orange-200
dark:from-orange-700 dark:to-orange-700 dark:hover:to-orange-500 dark:text-white dark:border-orange-600;
}
.gr-button-secondary {
@apply from-gray-100/70 to-gray-200/80 hover:to-gray-100/90 text-gray-700 border-gray-200;
@apply from-gray-100/70 to-gray-200/80 hover:to-gray-100/90 text-gray-700 border-gray-200
dark:from-gray-600 dark:to-gray-700 dark:hover:to-gray-600 dark:text-white dark:border-gray-600;
}
.gr-button-sm {
@ -95,11 +99,11 @@
.gr-sample-dataframe,
.gr-sample-audio,
.gr-sample-3d {
@apply flex items-center border cursor-pointer px-2 py-1.5 rounded-lg bg-white hover:bg-gray-50 text-sm text-left;
@apply flex items-center border cursor-pointer px-2 py-1.5 rounded-lg bg-white hover:bg-gray-50 text-sm text-left dark:hover:bg-gray-800;
}
}
img.gr-sample-image,
video.gr-sample-video {
@apply flex-none rounded-lg max-w-none ring-2 ring-gray-200 hover:ring-orange-400 group-hover:ring-orange-400;
@apply flex-none rounded-lg max-w-none ring-2 ring-gray-200 hover:ring-orange-400 group-hover:ring-orange-400 dark:ring-gray-700 dark:hover:ring-orange-700 dark:group-hover:ring-orange-700;
}

3
ui/packages/upload/package.json
View File

@ -8,6 +8,7 @@
"license": "ISC",
"private": true,
"dependencies": {
"@gradio/atoms": "workspace:^0.0.1"
"@gradio/atoms": "workspace:^0.0.1",
"@gradio/icons": "workspace:^0.0.1"
}
}

16
ui/packages/upload/src/ModifyUpload.svelte
View File

@ -2,9 +2,7 @@
import type { FileData } from "./types";
import { IconButton } from "@gradio/atoms";
import edit from "./edit.svg";
import clear from "./clear.svg";
import { Edit, Clear } from "@gradio/icons";
import { createEventDispatcher } from "svelte";
@ -22,16 +20,8 @@
class:m-1={!absolute}
>
{#if editable}
<IconButton
image={edit}
alt="edit image"
on:click={() => dispatch("edit")}
/>
<IconButton Icon={Edit} on:click={() => dispatch("edit")} />
{/if}
<IconButton
image={clear}
alt="clear image"
on:click={() => dispatch("clear")}
/>
<IconButton Icon={Clear} on:click={() => dispatch("clear")} />
</div>

8
ui/packages/upload/src/clear.svg
View File

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;">
<g transform="matrix(1.14096,-0.140958,-0.140958,1.14096,-0.0559523,0.0559523)">
<path d="M18,6L6.087,17.913" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
</g>
<path d="M4.364,4.364L19.636,19.636" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 761 B

1
ui/packages/upload/src/edit.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 293 B

1
ui/packages/upload/src/table.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-table"><path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 342 B

1
ui/packages/upload/src/video.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 331 B

1
ui/packages/video/package.json
View File

@ -9,6 +9,7 @@
"private": true,
"dependencies": {
"@gradio/atoms": "workspace:^0.0.1",
"@gradio/icons": "workspace:^0.0.1",
"@gradio/image": "workspace:^0.0.1",
"@gradio/upload": "workspace:^0.0.1"
}

7
ui/packages/video/src/StaticVideo.svelte
View File

@ -2,8 +2,7 @@
import { createEventDispatcher } from "svelte";
import { Block, BlockLabel } from "@gradio/atoms";
import type { FileData } from "@gradio/upload";
import video_icon from "./video.svg";
import { Video } from "@gradio/icons";
export let value: FileData | null = null;
export let label: string | undefined = undefined;
@ -20,10 +19,10 @@
$: value && dispatch("change", value);
</script>
<BlockLabel {show_label} image={video_icon} label={label || "Video"} />
<BlockLabel {show_label} Icon={Video} label={label || "Video"} />
{#if value === null}
<div class="min-h-[16rem] flex justify-center items-center">
<img src={video_icon} alt="" class="h-6 opacity-20" />
<div class="h-10 dark:text-white opacity-50"><Video /></div>
</div>
{:else}
<!-- svelte-ignore a11y-media-has-caption -->

4
ui/packages/video/src/Video.svelte
View File

@ -4,9 +4,9 @@
import type { FileData } from "@gradio/upload";
import { Block, BlockLabel } from "@gradio/atoms";
import { Webcam } from "@gradio/image";
import { Video } from "@gradio/icons";
import { prettyBytes, playable } from "./utils";
import video_icon from "./video.svg";
export let value: FileData | null = null;
export let source: string;
@ -42,7 +42,7 @@
$: dispatch("drag", dragging);
</script>
<BlockLabel {show_label} image={video_icon} label={label || "Video"} />
<BlockLabel {show_label} Icon={Video} label={label || "Video"} />
{#if value === null}
{#if source === "upload"}
<Upload

2
ui/packages/workbench/src/routes/__layout.svelte
View File

@ -18,7 +18,7 @@
</svelte:head>
<h1
class="font-semibold px-6 py-2 border-b flex items-center text-orange-500 bg-gradient-to-r from-orange-50 to-white border-orange-50"
class="font-semibold px-6 py-2 border-b flex items-center text-orange-500 bg-gradient-to-r from-orange-50 to-white border-orange-50 dark:from-orange-900 dark:to-gray-900 dark:border-gray-900"
>
<svg
class="mr-2"

2
ui/packages/workbench/src/routes/chatbot.svelte
View File

@ -13,4 +13,4 @@
}, 2000);
</script>
<ChatBot value={messages} color_map={["purple", "#bbb"]} />
<ChatBot value={messages} color_map={["purple", "red"]} />

5
ui/packages/workbench/tailwind.config.cjs
View File

@ -1,3 +1,5 @@
const colors = require("tailwindcss/colors");
const defaultTheme = require("tailwindcss/defaultTheme");
const production = !process.env.ROLLUP_WATCH;
@ -14,6 +16,9 @@ module.exports = {
mono: ["IBM Plex Mono", ...defaultTheme.fontFamily.mono]
},
colors: {
gray: {
950: "#090f1f"
},
orange: {
50: "#FFF2E5",
100: "#FFE5CC",

16
ui/pnpm-lock.yaml
View File

@ -77,6 +77,7 @@ importers:
'@gradio/form': workspace:^0.0.1
'@gradio/highlighted-text': workspace:^0.0.1
'@gradio/html': workspace:^0.0.1
'@gradio/icons': workspace:^0.0.1
'@gradio/image': workspace:^0.0.1
'@gradio/json': workspace:^0.0.1
'@gradio/label': workspace:^0.0.1
@ -101,6 +102,7 @@ importers:
'@gradio/form': link:../form
'@gradio/highlighted-text': link:../highlighted-text
'@gradio/html': link:../html
'@gradio/icons': link:../icons
'@gradio/image': link:../image
'@gradio/json': link:../json
'@gradio/label': link:../label
@ -121,10 +123,12 @@ importers:
packages/audio:
specifiers:
'@gradio/atoms': workspace:^0.0.1
'@gradio/icons': workspace:^0.0.1
'@gradio/upload': workspace:^0.0.1
svelte-range-slider-pips: ^2.0.1
dependencies:
'@gradio/atoms': link:../atoms
'@gradio/icons': link:../icons
'@gradio/upload': link:../upload
svelte-range-slider-pips: 2.0.2
@ -136,6 +140,7 @@ importers:
packages/chart:
specifiers:
'@gradio/icons': workspace:^0.0.1
'@gradio/theme': workspace:^0.0.1
'@gradio/tooltip': workspace:^0.0.1
'@gradio/utils': workspace:^0.0.1
@ -146,6 +151,7 @@ importers:
d3-scale: ^4.0.2
d3-shape: ^3.1.0
dependencies:
'@gradio/icons': link:../icons
'@gradio/theme': link:../theme
'@gradio/tooltip': link:../tooltip
'@gradio/utils': link:../utils
@ -166,9 +172,11 @@ importers:
packages/file:
specifiers:
'@gradio/atoms': workspace:^0.0.1
'@gradio/icons': workspace:^0.0.1
'@gradio/upload': workspace:^0.0.1
dependencies:
'@gradio/atoms': link:../atoms
'@gradio/icons': link:../icons
'@gradio/upload': link:../upload
packages/form:
@ -191,6 +199,7 @@ importers:
packages/image:
specifiers:
'@gradio/atoms': workspace:^0.0.1
'@gradio/icons': workspace:^0.0.1
'@gradio/upload': workspace:^0.0.1
cropperjs: ^1.5.12
lazy-brush: ^1.0.1
@ -198,6 +207,7 @@ importers:
tui-image-editor: ^3.15.2
dependencies:
'@gradio/atoms': link:../atoms
'@gradio/icons': link:../icons
'@gradio/upload': link:../upload
cropperjs: 1.5.12
lazy-brush: 1.0.1
@ -216,11 +226,13 @@ importers:
packages/model3D:
specifiers:
'@gradio/atoms': workspace:^0.0.1
'@gradio/icons': workspace:^0.0.1
'@gradio/upload': workspace:^0.0.1
babylonjs: ^4.2.1
babylonjs-loaders: ^4.2.1
dependencies:
'@gradio/atoms': link:../atoms
'@gradio/icons': link:../icons
'@gradio/upload': link:../upload
babylonjs: 4.2.2
babylonjs-loaders: 4.2.2
@ -256,8 +268,10 @@ importers:
packages/upload:
specifiers:
'@gradio/atoms': workspace:^0.0.1
'@gradio/icons': workspace:^0.0.1
dependencies:
'@gradio/atoms': link:../atoms
'@gradio/icons': link:../icons
packages/utils:
specifiers:
@ -268,10 +282,12 @@ importers:
packages/video:
specifiers:
'@gradio/atoms': workspace:^0.0.1
'@gradio/icons': workspace:^0.0.1
'@gradio/image': workspace:^0.0.1
'@gradio/upload': workspace:^0.0.1
dependencies:
'@gradio/atoms': link:../atoms
'@gradio/icons': link:../icons
'@gradio/image': link:../image
'@gradio/upload': link:../upload