mirror of
https://github.com/gradio-app/gradio.git
synced 2025-02-17 11:29:58 +08:00
fix tooling issues
This commit is contained in:
pngwn
parent
7924ac5829
commit
262f5d3e45
@ -12,6 +12,7 @@
|
||||
"test": "vitest dev",
|
||||
"test:run": "vitest run"
|
||||
},
|
||||
"type": "module",
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"private": true,
|
||||
|
||||
15
ui/packages/audio/README.md
Normal file
15
ui/packages/audio/README.md
Normal file
@ -0,0 +1,15 @@
|
||||
# `@gradio/audio`
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Audio } from "@gradio/audio";
|
||||
</script>
|
||||
|
||||
<Audio
|
||||
value="string"
|
||||
theme="string"
|
||||
name="string"
|
||||
source="microphone | upload"
|
||||
on:change="{e.detail === value}"
|
||||
/>
|
||||
```
|
||||
@ -8,6 +8,7 @@
|
||||
"license": "ISC",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@gradio/upload": "workspace:^0.0.1"
|
||||
"@gradio/upload": "workspace:^0.0.1",
|
||||
"svelte-range-slider-pips": "^2.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,14 +5,14 @@
|
||||
import { Upload, ModifyUpload } from "@gradio/upload";
|
||||
//@ts-ignore
|
||||
import Range from "svelte-range-slider-pips";
|
||||
import { _ } from "svelte-i18n";
|
||||
|
||||
// export let value: null | Value;
|
||||
export let src: null | string;
|
||||
export let setValue: (val: typeof value) => typeof value;
|
||||
export let value: null | { name: string; data: string } = null;
|
||||
export let theme: string;
|
||||
export let name: string;
|
||||
export let source: "microphone" | "upload";
|
||||
export let drop_text: string = "Drop an audio file";
|
||||
export let or_text: string = "or";
|
||||
export let upload_text: string = "click to upload";
|
||||
|
||||
let recording = false;
|
||||
let recorder: MediaRecorder;
|
||||
@ -45,7 +45,10 @@
|
||||
recorder.addEventListener("stop", async () => {
|
||||
recording = false;
|
||||
audio_blob = new Blob(audio_chunks, { type: "audio/wav" });
|
||||
|
||||
value = {
|
||||
data: await blob_to_data_url(audio_blob),
|
||||
name
|
||||
};
|
||||
dispatch("change", {
|
||||
data: await blob_to_data_url(audio_blob),
|
||||
name
|
||||
@ -63,7 +66,8 @@
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
if (recorder) {
|
||||
console.log(recorder);
|
||||
if (recorder && recorder.state !== "inactive") {
|
||||
recorder.stop();
|
||||
}
|
||||
});
|
||||
@ -75,7 +79,7 @@
|
||||
function clear() {
|
||||
dispatch("change", { data: null, name: null });
|
||||
mode = "";
|
||||
src = "";
|
||||
value = null;
|
||||
}
|
||||
|
||||
function loaded(node: HTMLAudioElement) {
|
||||
@ -107,7 +111,7 @@
|
||||
if (!value?.data) return;
|
||||
|
||||
dispatch("change", {
|
||||
data: src,
|
||||
data: value.data,
|
||||
name,
|
||||
crop_min: values[0],
|
||||
crop_max: values[1]
|
||||
@ -116,7 +120,7 @@
|
||||
</script>
|
||||
|
||||
<div class="input-audio">
|
||||
{#if src === null}
|
||||
{#if value === null}
|
||||
{#if source === "microphone"}
|
||||
{#if recording}
|
||||
<button
|
||||
@ -137,19 +141,20 @@
|
||||
<Upload
|
||||
filetype="audio/*"
|
||||
on:load={({ detail }) => (
|
||||
(src = detail), dispatch("change", { data: detail })
|
||||
(value = detail), dispatch("change", { data: detail })
|
||||
)}
|
||||
{theme}
|
||||
>
|
||||
{$_("interface.drop_audio")}
|
||||
<br />- {$_("interface.or")} -<br />
|
||||
{$_("interface.click_to_upload")}
|
||||
{drop_text}
|
||||
<br />- {or_text} -<br />
|
||||
{upload_text}
|
||||
</Upload>
|
||||
{/if}
|
||||
{:else}
|
||||
<ModifyUpload
|
||||
on:clear={clear}
|
||||
on:edit={() => (mode = "edit")}
|
||||
editable
|
||||
absolute={false}
|
||||
{theme}
|
||||
/>
|
||||
@ -160,7 +165,7 @@
|
||||
controls
|
||||
bind:this={player}
|
||||
preload="metadata"
|
||||
{src}
|
||||
src={value.data}
|
||||
/>
|
||||
|
||||
{#if mode === "edit" && player?.duration}
|
||||
@ -175,6 +180,3 @@
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
</style>
|
||||
|
||||
11
ui/packages/button/README.md
Normal file
11
ui/packages/button/README.md
Normal file
@ -0,0 +1,11 @@
|
||||
# `@gradio/button`
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { Button } from "@gradio/button";
|
||||
</script>
|
||||
|
||||
<button type="primary|secondary" href="string" on:click="{e.detail === href}">
|
||||
content
|
||||
</button>
|
||||
```
|
||||
13
ui/packages/button/package.json
Normal file
13
ui/packages/button/package.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "@gradio/button",
|
||||
"version": "0.0.1",
|
||||
"description": "Gradio UI packages",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@gradio/upload": "workspace:^0.0.1"
|
||||
}
|
||||
}
|
||||
9
ui/packages/button/src/Button.svelte
Normal file
9
ui/packages/button/src/Button.svelte
Normal file
@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
export let variant: "primary" | "secondary" = "primary";
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="{variant} px-4 py-2 rounded bg-gray-100 hover:bg-gray-200 transition"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
1
ui/packages/button/src/index.ts
Normal file
1
ui/packages/button/src/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default as Button } from "./Button.svelte";
|
||||
3
ui/packages/theme/README.md
Normal file
3
ui/packages/theme/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# `@gradio/theme`
|
||||
|
||||
css for gradio
|
||||
13
ui/packages/theme/package.json
Normal file
13
ui/packages/theme/package.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "@gradio/theme",
|
||||
"version": "0.0.1",
|
||||
"description": "Gradio UI packages",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@gradio/upload": "workspace:^0.0.1"
|
||||
}
|
||||
}
|
||||
2083
ui/packages/theme/src/global.css
Normal file
2083
ui/packages/theme/src/global.css
Normal file
File diff suppressed because it is too large
Load Diff
120
ui/packages/theme/src/grass.css
Normal file
120
ui/packages/theme/src/grass.css
Normal file
@ -0,0 +1,120 @@
|
||||
.gradio-bg[theme="grass"] {
|
||||
@apply dark:bg-gray-700;
|
||||
}
|
||||
.gradio-bg[theme="grass"] .gradio-interface {
|
||||
.component-set {
|
||||
@apply bg-gray-50 dark:bg-gray-800 rounded-none;
|
||||
}
|
||||
.component {
|
||||
@apply p-1 transition;
|
||||
}
|
||||
.panel-header {
|
||||
@apply text-gray-400 dark:text-gray-200 font-semibold;
|
||||
}
|
||||
.panel-button {
|
||||
@apply rounded-none bg-gray-100 dark:bg-gray-800 shadow;
|
||||
}
|
||||
.panel-button.submit {
|
||||
@apply bg-green-400 text-white;
|
||||
}
|
||||
.examples {
|
||||
.examples-holder:not(.gallery) {
|
||||
.examples-table {
|
||||
@apply dark:bg-gray-800;
|
||||
tbody tr:hover {
|
||||
@apply bg-green-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
.examples-holder.gallery .examples-table {
|
||||
.example {
|
||||
@apply dark:bg-gray-800;
|
||||
}
|
||||
.example:hover {
|
||||
@apply bg-green-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Input Components */
|
||||
.input-text {
|
||||
@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;
|
||||
}
|
||||
.input-number {
|
||||
@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;
|
||||
}
|
||||
.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 {
|
||||
.radio-item {
|
||||
@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,
|
||||
.input-checkbox {
|
||||
.checkbox-item {
|
||||
@apply bg-gray-100 rounded-none dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
.checkbox-item.selected {
|
||||
@apply bg-green-400 text-white shadow;
|
||||
}
|
||||
}
|
||||
.input-checkbox {
|
||||
.checkbox {
|
||||
@apply bg-gray-200;
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-green-500;
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
.confidence {
|
||||
@apply bg-gray-300 text-white dark:bg-gray-600 font-semibold;
|
||||
}
|
||||
.confidence:first-child {
|
||||
@apply bg-green-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
124
ui/packages/theme/src/huggingface.css
Normal file
124
ui/packages/theme/src/huggingface.css
Normal file
@ -0,0 +1,124 @@
|
||||
.gradio-bg[theme="huggingface"] {
|
||||
@apply dark:bg-[#0b0f19];
|
||||
}
|
||||
|
||||
.gradio-bg[theme="huggingface"] .gradio-interface {
|
||||
.load-status {
|
||||
@apply text-gray-700;
|
||||
}
|
||||
.component-set {
|
||||
@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 text-gray-700 dark:text-gray-50 mb-1.5;
|
||||
}
|
||||
.panel-button {
|
||||
@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 {
|
||||
.examples-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-600;
|
||||
}
|
||||
tbody tr:hover {
|
||||
@apply bg-indigo-500 dark:bg-indigo-900 text-white;
|
||||
}
|
||||
}
|
||||
.examples-holder.gallery .examples-table {
|
||||
.example:hover {
|
||||
@apply bg-indigo-500 dark:bg-indigo-900 text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Common Classes */
|
||||
.modify-upload {
|
||||
@apply p-1 gap-1;
|
||||
button {
|
||||
@apply rounded-full;
|
||||
}
|
||||
.edit {
|
||||
@apply bg-indigo-400 hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400;
|
||||
}
|
||||
.clear {
|
||||
@apply bg-gray-300 hover:bg-gray-400 dark:bg-gray-400 dark:hover:bg-gray-300;
|
||||
}
|
||||
}
|
||||
/* Input Components */
|
||||
.input-text {
|
||||
@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 {
|
||||
@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-radio {
|
||||
.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: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 bg-white;
|
||||
}
|
||||
.selected .radio-circle {
|
||||
@apply border-4 border-indigo-600 dark:border-indigo-400;
|
||||
}
|
||||
}
|
||||
.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: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;
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-indigo-600 dark:bg-indigo-400;
|
||||
}
|
||||
}
|
||||
.input-dropdown {
|
||||
.selector {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
.input-slider {
|
||||
@apply text-center;
|
||||
.range {
|
||||
@apply bg-white hover:bg-gray-100 dark:bg-gray-600 rounded-full border dark:border-none;
|
||||
}
|
||||
.range::-webkit-slider-thumb {
|
||||
@apply border dark:bg-white bg-indigo-500 rounded-full shadow;
|
||||
}
|
||||
.range::-moz-range-thumb {
|
||||
@apply border dark:bg-white bg-indigo-500 rounded-full shadow;
|
||||
}
|
||||
.value {
|
||||
@apply bg-gray-100 text-gray-700 dark:text-gray-50 dark:bg-gray-600 dark:border-none shadow-inner;
|
||||
}
|
||||
}
|
||||
.input-audio {
|
||||
.start {
|
||||
@apply bg-gradient-to-t border 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 border border-red-200 bg-gradient-to-t from-red-200 to-red-50 text-red-600 py-1.5 px-3 hover:to-red-100 dark:from-red-700 dark:to-red-600 dark:text-red-100;
|
||||
}
|
||||
}
|
||||
/* Output Components */
|
||||
.output-text {
|
||||
@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;
|
||||
}
|
||||
.confidence {
|
||||
@apply bg-gradient-to-r from-indigo-200 to-indigo-500 dark:from-indigo-500 dark:to-indigo-700 rounded text-white;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
5
ui/packages/theme/src/index.ts
Normal file
5
ui/packages/theme/src/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export { default as global } from "./global.css";
|
||||
export { default as grass } from "./grass.css";
|
||||
export { default as huggingface } from "./huggingface.css";
|
||||
export { default as peach } from "./peach.css";
|
||||
export { default as seafoam } from "./seafoam.css";
|
||||
108
ui/packages/theme/src/peach.css
Normal file
108
ui/packages/theme/src/peach.css
Normal file
@ -0,0 +1,108 @@
|
||||
.gradio-bg[theme="peach"] {
|
||||
@apply bg-gradient-to-r from-red-50 to-amber-100 dark:from-gray-900 dark:to-gray-800;
|
||||
}
|
||||
.gradio-bg[theme="peach"] .gradio-interface {
|
||||
.component-set {
|
||||
@apply bg-white dark:bg-gray-800 rounded-lg;
|
||||
}
|
||||
.component {
|
||||
@apply p-1 transition;
|
||||
}
|
||||
.panel-header {
|
||||
@apply text-gray-600 dark:text-gray-200 font-semibold;
|
||||
}
|
||||
.panel-button {
|
||||
@apply rounded-lg bg-white dark:bg-gray-800 shadow;
|
||||
}
|
||||
.panel-button.submit {
|
||||
@apply text-white bg-gradient-to-tr from-red-500 to-amber-400;
|
||||
}
|
||||
.examples {
|
||||
.examples-holder:not(.gallery) {
|
||||
.examples-table {
|
||||
@apply bg-white dark:bg-gray-800;
|
||||
tbody tr:hover {
|
||||
@apply bg-amber-500 dark:bg-red-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
.examples-table-holder.gallery .examples-table {
|
||||
.example {
|
||||
@apply bg-white dark:bg-gray-800;
|
||||
}
|
||||
.example:hover {
|
||||
@apply bg-amber-500 dark:bg-red-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Input Components */
|
||||
.input-text {
|
||||
@apply rounded-lg bg-gray-50 dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
.input-number {
|
||||
@apply rounded-lg bg-gray-50 dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
.input-slider {
|
||||
.range {
|
||||
@apply bg-gray-50 dark:bg-gray-700 rounded-lg;
|
||||
}
|
||||
.range::-webkit-slider-thumb {
|
||||
@apply bg-gradient-to-tr from-red-500 to-amber-400 rounded-lg shadow-sm;
|
||||
}
|
||||
.range::-moz-range-thumb {
|
||||
@apply bg-gradient-to-tr from-red-500 to-amber-400 rounded-lg shadow-sm;
|
||||
}
|
||||
.value {
|
||||
@apply font-semibold text-gray-500 dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
}
|
||||
.input-radio {
|
||||
.radio-item {
|
||||
@apply bg-gray-100 rounded-lg dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
.radio-item.selected {
|
||||
@apply bg-gradient-to-tr from-red-500 to-amber-400 text-white shadow;
|
||||
}
|
||||
.radio-circle {
|
||||
@apply w-4 h-4 bg-white transition rounded-full box-border;
|
||||
}
|
||||
}
|
||||
|
||||
.input-checkbox-group,
|
||||
.input-checkbox {
|
||||
.checkbox-item {
|
||||
@apply bg-gray-100 rounded-lg dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
.checkbox-item.selected {
|
||||
@apply bg-gradient-to-tr from-red-500 to-amber-400 text-white shadow;
|
||||
}
|
||||
.selected .checkbox {
|
||||
@apply bg-gray-200 bg-opacity-20;
|
||||
}
|
||||
}
|
||||
.input-dropdown {
|
||||
.selector {
|
||||
@apply bg-gray-100 rounded-lg dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
.dropdown-menu {
|
||||
@apply shadow;
|
||||
}
|
||||
.dropdown-item {
|
||||
@apply bg-gray-100 dark:bg-gray-800 hover:bg-red-500 hover:text-gray-50 hover:font-semibold;
|
||||
}
|
||||
.dropdown-item:first-child,
|
||||
.dropdown-item:last-child {
|
||||
@apply rounded-lg;
|
||||
}
|
||||
}
|
||||
/* Components */
|
||||
.output-label {
|
||||
.confidence {
|
||||
@apply bg-gray-300 text-white dark:bg-gray-600 font-semibold rounded-lg;
|
||||
}
|
||||
.confidence:first-child {
|
||||
@apply bg-gradient-to-tr from-red-500 to-amber-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
116
ui/packages/theme/src/seafoam.css
Normal file
116
ui/packages/theme/src/seafoam.css
Normal file
@ -0,0 +1,116 @@
|
||||
.gradio-bg[theme="seafoam"] {
|
||||
@apply bg-amber-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-holder:not(.gallery) {
|
||||
.examples-table {
|
||||
@apply dark:bg-gray-800;
|
||||
tbody tr:hover {
|
||||
@apply bg-blue-400 dark:bg-blue-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.examples-holder.gallery .examples-table {
|
||||
.example {
|
||||
@apply dark:bg-gray-800;
|
||||
}
|
||||
.example:hover {
|
||||
@apply bg-blue-400 dark:bg-blue-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Common Classes */
|
||||
.edit,
|
||||
.clear {
|
||||
@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 {
|
||||
@apply rounded-none bg-gray-50 text-blue-400 dark:bg-gray-700 dark:text-gray-50;
|
||||
}
|
||||
.input-number {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -33,14 +33,14 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style lang="postcss" global>
|
||||
<style lang="postcss">
|
||||
.modify-upload[theme="default"] {
|
||||
@apply m-1 flex gap-1;
|
||||
.edit {
|
||||
@apply bg-amber-500 dark:bg-red-600 rounded shadow;
|
||||
}
|
||||
.clear {
|
||||
@apply bg-gray-50 dark:bg-gray-500 rounded shadow;
|
||||
}
|
||||
}
|
||||
.edit {
|
||||
@apply bg-amber-500 dark:bg-red-600 rounded shadow;
|
||||
}
|
||||
.clear {
|
||||
@apply bg-gray-50 dark:bg-gray-500 rounded shadow;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -23,6 +23,8 @@
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@gradio/audio": "workspace:^0.0.1"
|
||||
"@gradio/audio": "workspace:^0.0.1",
|
||||
"@gradio/button": "workspace:^0.0.1",
|
||||
"@gradio/theme": "workspace:^0.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,14 +2,6 @@ const tailwindcss = require("tailwindcss");
|
||||
const autoprefixer = require("autoprefixer");
|
||||
const nested = require("tailwindcss/nesting");
|
||||
|
||||
const config = {
|
||||
plugins: [
|
||||
nested,
|
||||
//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
|
||||
tailwindcss(),
|
||||
//But others, like autoprefixer, need to run after,
|
||||
autoprefixer
|
||||
]
|
||||
module.exports = {
|
||||
plugins: [nested, tailwindcss(), autoprefixer]
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
|
||||
@ -1,8 +1,16 @@
|
||||
<script>
|
||||
import "../app.css";
|
||||
import * as _ from "@gradio/theme";
|
||||
import Nav from "./_Nav.svelte";
|
||||
</script>
|
||||
|
||||
<h1 class="font-mono p-4 text-lg text-right">workbench</h1>
|
||||
<Nav />
|
||||
<slot />
|
||||
<div class="flex p-2">
|
||||
<Nav />
|
||||
|
||||
<main class="gradio-bg ml-5 w-full" theme="default">
|
||||
<div class="gradio-interface">
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@ -3,4 +3,8 @@
|
||||
import audio from "../assets/cantina.wav";
|
||||
</script>
|
||||
|
||||
<Audio src={null} source="upload" />
|
||||
<h2>upload input</h2>
|
||||
<Audio value={null} source="upload" theme="default" name="" />
|
||||
|
||||
<h1>microphone input</h1>
|
||||
<Audio value={null} source="microphone" theme="default" name="" />
|
||||
|
||||
5
ui/packages/workbench/src/routes/button.svelte
Normal file
5
ui/packages/workbench/src/routes/button.svelte
Normal file
@ -0,0 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Button } from "@gradio/button";
|
||||
</script>
|
||||
|
||||
<Button>Button text</Button>
|
||||
@ -0,0 +1 @@
|
||||
<p>choose a component</p>
|
||||
@ -5,8 +5,7 @@ import tailwind from "tailwindcss";
|
||||
import nested from "postcss-nested";
|
||||
import autoprefix from "autoprefixer";
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
export default {
|
||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: [
|
||||
@ -19,5 +18,3 @@ const config = {
|
||||
adapter: adapter()
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
const config = {
|
||||
content: ["./src/**/*.{html,js,svelte,ts}"],
|
||||
module.exports = {
|
||||
content: [
|
||||
"./src/**/*.{html,js,svelte,ts}",
|
||||
"**/@gradio/**/*.{html,js,svelte,ts}"
|
||||
],
|
||||
|
||||
theme: {
|
||||
extend: {}
|
||||
@ -7,5 +10,3 @@ const config = {
|
||||
|
||||
plugins: []
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
|
||||
@ -41,13 +41,9 @@ importers:
|
||||
d3-shape: ^3.1.0
|
||||
lazy-brush: ^1.0.1
|
||||
mime-types: ^2.1.34
|
||||
postcss: ^8.4.5
|
||||
postcss-nested: ^5.0.6
|
||||
resize-observer-polyfill: ^1.5.1
|
||||
svelte: ^3.46.3
|
||||
svelte-preprocess: ^4.10.1
|
||||
svelte-i18n: ^3.3.13
|
||||
svelte-range-slider-pips: ^2.0.1
|
||||
tailwindcss: ^3.0.19
|
||||
tui-image-editor: ^3.15.2
|
||||
vite: ^2.7.13
|
||||
dependencies:
|
||||
@ -62,18 +58,22 @@ importers:
|
||||
lazy-brush: 1.0.1
|
||||
mime-types: 2.1.34
|
||||
resize-observer-polyfill: 1.5.1
|
||||
svelte-preprocess: 4.10.2_postcss@8.4.6+svelte@3.46.3
|
||||
svelte-i18n: 3.3.13_svelte@3.46.3
|
||||
svelte-range-slider-pips: 2.0.2
|
||||
tui-image-editor: 3.15.2
|
||||
devDependencies:
|
||||
'@sveltejs/vite-plugin-svelte': 1.0.0-next.36_svelte@3.46.3+vite@2.7.13
|
||||
postcss: 8.4.6
|
||||
postcss-nested: 5.0.6_postcss@8.4.6
|
||||
svelte: 3.46.3
|
||||
tailwindcss: 3.0.22_autoprefixer@9.8.8
|
||||
vite: 2.7.13
|
||||
|
||||
packages/audio:
|
||||
specifiers:
|
||||
'@gradio/upload': workspace:^0.0.1
|
||||
svelte-range-slider-pips: ^2.0.1
|
||||
dependencies:
|
||||
'@gradio/upload': link:../upload
|
||||
svelte-range-slider-pips: 2.0.2
|
||||
|
||||
packages/button:
|
||||
specifiers:
|
||||
'@gradio/upload': workspace:^0.0.1
|
||||
dependencies:
|
||||
@ -82,9 +82,14 @@ importers:
|
||||
packages/components:
|
||||
specifiers: {}
|
||||
|
||||
packages/upload:
|
||||
specifiers: {}
|
||||
|
||||
packages/workbench:
|
||||
specifiers:
|
||||
'@gradio/audio': workspace:^0.0.1
|
||||
'@gradio/button': workspace:^0.0.1
|
||||
'@gradio/theme': workspace:^0.0.1
|
||||
'@sveltejs/adapter-auto': next
|
||||
'@sveltejs/kit': next
|
||||
autoprefixer: ^10.4.2
|
||||
@ -98,9 +103,11 @@ importers:
|
||||
typescript: ~4.5.4
|
||||
dependencies:
|
||||
'@gradio/audio': link:../audio
|
||||
'@gradio/button': link:../button
|
||||
'@gradio/theme': link:../theme
|
||||
devDependencies:
|
||||
'@sveltejs/adapter-auto': 1.0.0-next.17
|
||||
'@sveltejs/kit': 1.0.0-next.281_svelte@3.46.3
|
||||
'@sveltejs/adapter-auto': 1.0.0-next.28
|
||||
'@sveltejs/kit': 1.0.0-next.286_svelte@3.46.3
|
||||
autoprefixer: 10.4.2_postcss@8.4.6
|
||||
postcss: 8.4.6
|
||||
postcss-load-config: 3.1.1
|
||||
@ -214,36 +221,36 @@ packages:
|
||||
picomatch: 2.3.1
|
||||
dev: true
|
||||
|
||||
/@sveltejs/adapter-auto/1.0.0-next.17:
|
||||
resolution: {integrity: sha512-jLMh+5whg9uSJkvAYyVhi4z4GpqWxSR/XhhFCUqDMYN2hMTGCBaB4ReUAHSYIFw3IPV7m318z9igXriOaL6agQ==}
|
||||
/@sveltejs/adapter-auto/1.0.0-next.28:
|
||||
resolution: {integrity: sha512-MuJUghh7HYXeThS1btsKJFZBN//DM5BmfTXhSBRN3MgKwDMF1XYvadNegZI2nIVzb9RQTh/al3jGKKZfBVHGEg==}
|
||||
dependencies:
|
||||
'@sveltejs/adapter-cloudflare': 1.0.0-next.9
|
||||
'@sveltejs/adapter-netlify': 1.0.0-next.44
|
||||
'@sveltejs/adapter-vercel': 1.0.0-next.39
|
||||
'@sveltejs/adapter-cloudflare': 1.0.0-next.14
|
||||
'@sveltejs/adapter-netlify': 1.0.0-next.47
|
||||
'@sveltejs/adapter-vercel': 1.0.0-next.44
|
||||
dev: true
|
||||
|
||||
/@sveltejs/adapter-cloudflare/1.0.0-next.9:
|
||||
resolution: {integrity: sha512-xoPbFinqFbzphVf4rjGqU/6CC/QciXtXpBn6+hp4mChjX/9X5c/fxjkVGHPdpq6moTIfaZiMU/EUKtbBvyTBUw==}
|
||||
/@sveltejs/adapter-cloudflare/1.0.0-next.14:
|
||||
resolution: {integrity: sha512-vD0+LdVIZO5/758KZuWzM58JIAeY+r/YKgoRkMjP9IUx+w+MJ869EyzOT81u/xN7x6cX2Ilu+/M60BwjqSDA7g==}
|
||||
dependencies:
|
||||
esbuild: 0.13.15
|
||||
esbuild: 0.14.23
|
||||
dev: true
|
||||
|
||||
/@sveltejs/adapter-netlify/1.0.0-next.44:
|
||||
resolution: {integrity: sha512-GY3w4K4gW+wXo6lGes7gFcPPaUt9kY2xCfhcNfwDvbOf0PsasZD5WatAPtEE9Xz5WTtQLEEgXljVMqsPkpb75Q==}
|
||||
/@sveltejs/adapter-netlify/1.0.0-next.47:
|
||||
resolution: {integrity: sha512-fyJ2UP14ViusPFMtnuXbLRxE9bQ3dQ7Aj5HkAddN4fgV1A15tGWthrSUOH0iozYmOYLu6AWvUxx9o01OhJbfZQ==}
|
||||
dependencies:
|
||||
'@iarna/toml': 2.2.5
|
||||
esbuild: 0.13.15
|
||||
esbuild: 0.14.23
|
||||
tiny-glob: 0.2.9
|
||||
dev: true
|
||||
|
||||
/@sveltejs/adapter-vercel/1.0.0-next.39:
|
||||
resolution: {integrity: sha512-YOPGKIILm26h22GN4/iliXce61aTG3Dq5hX8xpDx0cNuCocv0OoLfIqiGpdyJ9NIMpjwXmpVoL4+nV+yh2wcSA==}
|
||||
/@sveltejs/adapter-vercel/1.0.0-next.44:
|
||||
resolution: {integrity: sha512-q0o7JG0pAam2lkkM5XiaLzYBGSRtOogjXpKYwpc7iiMuaSV4nzsnYlLxwbtib7ZJQzE1D32pPZQuvf5pAIqrmQ==}
|
||||
dependencies:
|
||||
esbuild: 0.13.15
|
||||
esbuild: 0.14.23
|
||||
dev: true
|
||||
|
||||
/@sveltejs/kit/1.0.0-next.281_svelte@3.46.3:
|
||||
resolution: {integrity: sha512-IBEqbckzNmLGEFqi+4gG0XxNyQ/koO+OYK2fSjNZvRxLL9W1H4RhMRmEGdZGvPt1opBuqD0ErgdgmHMNO+B8XQ==}
|
||||
/@sveltejs/kit/1.0.0-next.286_svelte@3.46.3:
|
||||
resolution: {integrity: sha512-txWUYKLpZohHPCEYc3oYIByMnZe+d/FItMBiCNJbTLdKaDop+SfCOzBar+K9IgP2MTXSScILSkPOms845uhz0A==}
|
||||
engines: {node: '>=14.13'}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
@ -2648,39 +2655,6 @@ packages:
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/tailwindcss/3.0.22_autoprefixer@9.8.8:
|
||||
resolution: {integrity: sha512-F8lt74RlNZirnkaSk310+vGQta7c0/hgx7/bqxruM4wS9lp8oqV93lzavajC3VT0Lp4UUtUVIt8ifKcmGzkr0A==}
|
||||
engines: {node: '>=12.13.0'}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
autoprefixer: ^10.0.2
|
||||
dependencies:
|
||||
arg: 5.0.1
|
||||
autoprefixer: 9.8.8
|
||||
chalk: 4.1.2
|
||||
chokidar: 3.5.3
|
||||
color-name: 1.1.4
|
||||
cosmiconfig: 7.0.1
|
||||
detective: 5.2.0
|
||||
didyoumean: 1.2.2
|
||||
dlv: 1.1.3
|
||||
fast-glob: 3.2.11
|
||||
glob-parent: 6.0.2
|
||||
is-glob: 4.0.3
|
||||
normalize-path: 3.0.0
|
||||
object-hash: 2.2.0
|
||||
postcss: 8.4.6
|
||||
postcss-js: 4.0.0_postcss@8.4.6
|
||||
postcss-load-config: 3.1.1
|
||||
postcss-nested: 5.0.6_postcss@8.4.6
|
||||
postcss-selector-parser: 6.0.9
|
||||
postcss-value-parser: 4.2.0
|
||||
quick-lru: 5.1.1
|
||||
resolve: 1.22.0
|
||||
transitivePeerDependencies:
|
||||
- ts-node
|
||||
dev: true
|
||||
|
||||
/tailwindcss/3.0.23_autoprefixer@10.4.2:
|
||||
resolution: {integrity: sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==}
|
||||
engines: {node: '>=12.13.0'}
|
||||
|
||||
8
ui/postcss.config.cjs
Normal file
8
ui/postcss.config.cjs
Normal file
@ -0,0 +1,8 @@
|
||||
const tailwindcss = require("tailwindcss");
|
||||
const autoprefixer = require("autoprefixer");
|
||||
const nested = require("tailwindcss/nesting");
|
||||
const tw_config = require("./tailwind.config.cjs");
|
||||
|
||||
module.exports = {
|
||||
plugins: [nested, tailwindcss(tw_config), autoprefixer]
|
||||
};
|
||||
17
ui/svelte.config.js
Normal file
17
ui/svelte.config.js
Normal file
@ -0,0 +1,17 @@
|
||||
import svelte_preprocess from "svelte-preprocess";
|
||||
|
||||
import tailwind from "tailwindcss";
|
||||
import nested from "postcss-nested";
|
||||
import autoprefix from "autoprefixer";
|
||||
import tw_config from "./tailwind.config.cjs";
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
export default {
|
||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: [
|
||||
svelte_preprocess({
|
||||
postcss: { plugins: [tailwind(tw_config), nested, autoprefix] }
|
||||
})
|
||||
]
|
||||
};
|
||||
12
ui/tailwind.config.cjs
Normal file
12
ui/tailwind.config.cjs
Normal file
@ -0,0 +1,12 @@
|
||||
module.exports = {
|
||||
content: [
|
||||
"./src/**/*.{html,js,svelte,ts}",
|
||||
"**/@gradio/**/*.{html,js,svelte,ts}"
|
||||
],
|
||||
|
||||
theme: {
|
||||
extend: {}
|
||||
},
|
||||
|
||||
plugins: []
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user