diff --git a/ui/packages/app/src/components/input/Audio/Audio.svelte b/ui/packages/app/src/components/input/Audio/Audio.svelte index fb483a8774..7c8c61af00 100644 --- a/ui/packages/app/src/components/input/Audio/Audio.svelte +++ b/ui/packages/app/src/components/input/Audio/Audio.svelte @@ -128,7 +128,7 @@ {:else} +
+ {carousel_index + 1} / {$items.length} +
+ + + + + diff --git a/ui/packages/carousel/src/CarouselItem.svelte b/ui/packages/carousel/src/CarouselItem.svelte new file mode 100644 index 0000000000..50a90df43f --- /dev/null +++ b/ui/packages/carousel/src/CarouselItem.svelte @@ -0,0 +1,22 @@ + + +{#if $current === id} +
+ {#if label} +
{label}
+ {/if} + +
+{/if} diff --git a/ui/packages/carousel/src/index.ts b/ui/packages/carousel/src/index.ts new file mode 100644 index 0000000000..e2024e29fe --- /dev/null +++ b/ui/packages/carousel/src/index.ts @@ -0,0 +1,2 @@ +export { default as Carousel } from "./Carousel.svelte"; +export { default as CarouselItem } from "./CarouselItem.svelte"; diff --git a/ui/packages/chart/README.md b/ui/packages/chart/README.md new file mode 100644 index 0000000000..7bae7bb394 --- /dev/null +++ b/ui/packages/chart/README.md @@ -0,0 +1 @@ +# `@gradio/chart` diff --git a/ui/packages/chart/package.json b/ui/packages/chart/package.json new file mode 100644 index 0000000000..aa7c712dcd --- /dev/null +++ b/ui/packages/chart/package.json @@ -0,0 +1,16 @@ +{ + "name": "@gradio/chart", + "version": "0.0.1", + "description": "Gradio UI packages", + "type": "module", + "main": "src/index.ts", + "author": "", + "license": "ISC", + "private": true, + "dependencies": { + "@gradio/tooltip": "workspace:^0.0.1", + "d3-dsv": "^3.0.1", + "d3-scale": "^4.0.2", + "d3-shape": "^3.1.0" + } +} diff --git a/ui/packages/chart/src/Chart.svelte b/ui/packages/chart/src/Chart.svelte new file mode 100644 index 0000000000..28996a4d5a --- /dev/null +++ b/ui/packages/chart/src/Chart.svelte @@ -0,0 +1,162 @@ + + +
+
+ {#each _y as { name }} +
+ + {name} +
+ {/each} +
+ + + {#each x_ticks as tick} + y_ticks[y_ticks.length - 1] + ? y_domain[1] + : y_ticks[y_ticks.length - 1] + )} + stroke="#aaa" + /> + + {tick} + + {/each} + + {#each y_ticks as tick} + x_ticks[x_ticks.length - 1] + ? x_domain[1] + : x_ticks[x_ticks.length - 1] + )} + stroke="#aaa" + /> + + + {tick} + + {/each} + + {#if y_domain[1] > y_ticks[y_ticks.length - 1]} + + + {y_domain[1]} + + {/if} + + + {#each _y as { name, values }} + {@const color = colors[name]} + {#each values as { x, y }} + + {/each} + [scale_x(x), scale_y(y)]) + )} + fill="none" + stroke={color} + stroke-width="3" + /> + {/each} + + {#each _y as { name, values }} + {@const color = colors[name]} + {#each values as { x, y }} + + {/each} + {/each} + + +
+ {_x.name} +
+
diff --git a/ui/packages/chart/src/index.ts b/ui/packages/chart/src/index.ts new file mode 100644 index 0000000000..0659e3e8d4 --- /dev/null +++ b/ui/packages/chart/src/index.ts @@ -0,0 +1 @@ +export { default as Chart } from "./Chart.svelte"; diff --git a/ui/packages/chart/src/utils.ts b/ui/packages/chart/src/utils.ts new file mode 100644 index 0000000000..32bcd4e76a --- /dev/null +++ b/ui/packages/chart/src/utils.ts @@ -0,0 +1,92 @@ +interface XYValue { + x: number; + y: number; +} + +interface ObjectValue { + values: XYValue[]; +} + +export function get_domains( + values: ObjectValue[] | { values: number[] } +): [number, number] { + let _vs: number[]; + if (Array.isArray(values)) { + _vs = values.reduce((acc, { values }) => { + return [...acc, ...values.map(({ x, y }) => y)]; + }, []); + } else { + _vs = values.values; + } + return [Math.min(..._vs), Math.max(..._vs)]; +} + +interface Row { + name: string; + values: number[]; +} + +interface RowPoint { + name: string; + values: Array<{ x: number; y: number }>; +} + +interface TransformedValues { + x: Row; + y: Array; +} + +export function transform_values( + values: Array>, + x?: string, + y?: string[] +) { + const transformed_values = Object.entries( + values[0] + ).reduce( + (acc, next, i) => { + if ((!x && i === 0) || (x && next[0] === x)) { + acc.x.name = next[0]; + } else if (!y || (y && y.includes(next[0]))) { + acc.y.push({ name: next[0], values: [] }); + } + return acc; + }, + { x: { name: "", values: [] }, y: [] } + ); + + for (let i = 0; i < values.length; i++) { + const _a = Object.entries(values[i]); + for (let j = 0; j < _a.length; j++) { + let [name, x] = _a[j]; + if (name === transformed_values.x.name) { + transformed_values.x.values.push(parseInt(x, 10)); + } else { + transformed_values.y[j - 1].values.push({ + y: parseInt(_a[j][1], 10), + x: parseInt(_a[0][1], 10) + }); + } + } + } + + return transformed_values; +} + +let c = 0; +export function get_color(): string { + let default_colors = [ + [255, 99, 132], + [54, 162, 235], + [240, 176, 26], + [153, 102, 255], + [75, 192, 192], + [255, 159, 64] + ]; + + if (c >= default_colors.length) c = 0; + + const [r, g, b] = default_colors[c++]; + + return `rgb(${r},${g},${b})`; +} diff --git a/ui/packages/chatbot/README.md b/ui/packages/chatbot/README.md new file mode 100644 index 0000000000..e5b427fdb3 --- /dev/null +++ b/ui/packages/chatbot/README.md @@ -0,0 +1,11 @@ +# `@gradio/button` + +```html + + + +``` diff --git a/ui/packages/chatbot/package.json b/ui/packages/chatbot/package.json new file mode 100644 index 0000000000..34179cf419 --- /dev/null +++ b/ui/packages/chatbot/package.json @@ -0,0 +1,10 @@ +{ + "name": "@gradio/chatbot", + "version": "0.0.1", + "description": "Gradio UI packages", + "type": "module", + "main": "src/index.ts", + "author": "", + "license": "ISC", + "private": true +} diff --git a/ui/packages/chatbot/src/ChatBot.svelte b/ui/packages/chatbot/src/ChatBot.svelte new file mode 100644 index 0000000000..9bd80835f7 --- /dev/null +++ b/ui/packages/chatbot/src/ChatBot.svelte @@ -0,0 +1,33 @@ + + +
+
+ {#each value as message} +
+ {message[0]} +
+
+ {message[1]} +
+ {/each} +
+
diff --git a/ui/packages/chatbot/src/index.ts b/ui/packages/chatbot/src/index.ts new file mode 100644 index 0000000000..e010050bf8 --- /dev/null +++ b/ui/packages/chatbot/src/index.ts @@ -0,0 +1 @@ +export { default as ChatBot } from "./ChatBot.svelte"; diff --git a/ui/packages/file/README.md b/ui/packages/file/README.md new file mode 100644 index 0000000000..e5b427fdb3 --- /dev/null +++ b/ui/packages/file/README.md @@ -0,0 +1,11 @@ +# `@gradio/button` + +```html + + + +``` diff --git a/ui/packages/file/package.json b/ui/packages/file/package.json new file mode 100644 index 0000000000..a178b92870 --- /dev/null +++ b/ui/packages/file/package.json @@ -0,0 +1,13 @@ +{ + "name": "@gradio/file", + "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" + } +} diff --git a/ui/packages/file/src/File.svelte b/ui/packages/file/src/File.svelte new file mode 100644 index 0000000000..9634a202d1 --- /dev/null +++ b/ui/packages/file/src/File.svelte @@ -0,0 +1,61 @@ + + +
+ {#if value === null} + + {drop_text} +
- {or_text} -
+ {upload_text} + + {:else} +
+ + + + + +
{value.name}
+
+ {prettyBytes(value.size)} +
+
+ {/if} +
+ + diff --git a/ui/packages/file/src/index.ts b/ui/packages/file/src/index.ts new file mode 100644 index 0000000000..837b16f85d --- /dev/null +++ b/ui/packages/file/src/index.ts @@ -0,0 +1 @@ +export { default as File } from "./File.svelte"; diff --git a/ui/packages/file/src/utils.ts b/ui/packages/file/src/utils.ts new file mode 100644 index 0000000000..8a7dd00218 --- /dev/null +++ b/ui/packages/file/src/utils.ts @@ -0,0 +1,10 @@ +export const prettyBytes = (bytes: number): string => { + let units = ["B", "KB", "MB", "GB", "PB"]; + let i = 0; + while (bytes > 1024) { + bytes /= 1024; + i++; + } + let unit = units[i]; + return bytes.toFixed(1) + " " + unit; +}; diff --git a/ui/packages/form/README.md b/ui/packages/form/README.md new file mode 100644 index 0000000000..e5b427fdb3 --- /dev/null +++ b/ui/packages/form/README.md @@ -0,0 +1,11 @@ +# `@gradio/button` + +```html + + + +``` diff --git a/ui/packages/components/package.json b/ui/packages/form/package.json similarity index 86% rename from ui/packages/components/package.json rename to ui/packages/form/package.json index eb6bcb3311..fab79daf59 100644 --- a/ui/packages/components/package.json +++ b/ui/packages/form/package.json @@ -1,5 +1,5 @@ { - "name": "~name~", + "name": "@gradio/form", "version": "0.0.1", "description": "Gradio UI packages", "type": "module", diff --git a/ui/packages/form/src/Checkbox.svelte b/ui/packages/form/src/Checkbox.svelte new file mode 100644 index 0000000000..bc44859e2c --- /dev/null +++ b/ui/packages/form/src/Checkbox.svelte @@ -0,0 +1,62 @@ + + +
+ +
+ + diff --git a/ui/packages/form/src/CheckboxGroup.svelte b/ui/packages/form/src/CheckboxGroup.svelte new file mode 100644 index 0000000000..439eb803d4 --- /dev/null +++ b/ui/packages/form/src/CheckboxGroup.svelte @@ -0,0 +1,73 @@ + + +
+ {#each choices as choice, i} + + {/each} +
+ + diff --git a/ui/packages/form/src/Dropdown.svelte b/ui/packages/form/src/Dropdown.svelte new file mode 100644 index 0000000000..26fd994c84 --- /dev/null +++ b/ui/packages/form/src/Dropdown.svelte @@ -0,0 +1,55 @@ + + +
+ + +
+ + diff --git a/ui/packages/form/src/Number.svelte b/ui/packages/form/src/Number.svelte new file mode 100644 index 0000000000..57d265d975 --- /dev/null +++ b/ui/packages/form/src/Number.svelte @@ -0,0 +1,38 @@ + + + + + diff --git a/ui/packages/form/src/Radio.svelte b/ui/packages/form/src/Radio.svelte new file mode 100644 index 0000000000..878d2d5ef6 --- /dev/null +++ b/ui/packages/form/src/Radio.svelte @@ -0,0 +1,47 @@ + + +
+ {#each choices as choice} + + {/each} +
+ + diff --git a/ui/packages/form/src/Textbox.svelte b/ui/packages/form/src/Textbox.svelte new file mode 100644 index 0000000000..7c0b21b0c8 --- /dev/null +++ b/ui/packages/form/src/Textbox.svelte @@ -0,0 +1,50 @@ + + +{#if lines > 1} +