General tweaks (#1276)

* tweaks + radio fix

* remove unused prop

* revert demo

* ensure table renders empty strings and zeroes

* remove logs

* remove bundle stats

demo/blocks_essay/run.py

@@ -1,20 +1,22 @@
 import gradio as gr
 
+
 def change_textbox(choice):
     if choice == "short":
-        return gr.Radio.update(lines=2, visible=True)
+        return gr.Textbox.update(lines=2, visible=True)
     elif choice == "long":
-        return gr.Radio.update(lines=8, visible=True)
+        return gr.Textbox.update(lines=8, visible=True)
     else:
-        return gr.Radio.update(visible=False)
+        return gr.Textbox.update(visible=False)
 
 
 with gr.Blocks() as demo:
-    radio = gr.Radio(["short", "long", "none"], 
-                     label="What kind of essay would you like to write?")
+    radio = gr.Radio(
+        ["short", "long", "none"], label="What kind of essay would you like to write?"
+    )
     text = gr.Textbox(lines=2, interactive=True)
 
     radio.change(fn=change_textbox, inputs=radio, outputs=text)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()

demo/blocks_outputs/run.py

@@ -35,7 +35,7 @@ with gr.Blocks() as demo:
             headers=["One", "Two", "Three", "Four"],
             col_count=(4, "fixed"),
             row_count=(7, "fixed"),
-            value=[[1, 2, 3, 4]],
+            value=[[0, 0, 0, 0]],
         )
         gr.Dataframe(
             interactive=True, headers=["One", "Two", "Three", "Four"], col_count=4

ui/packages/app/src/components/Radio/Radio.svelte

@@ -20,9 +20,9 @@
 	<StatusTracker {...loading_status} />
 
 	<Radio
-		{form_position}
 		bind:value
 		{label}
+		{elem_id}
 		{show_label}
 		{choices}
 		{style}

ui/packages/app/vite.config.js

@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import sveltePreprocess from "svelte-preprocess";
+
 import path from "path";
 import fs from "fs";
 
@@ -24,9 +25,10 @@ export default defineConfig(({ mode }) => {
 
 	return {
 		base: is_cdn ? CDN_URL : "./",
+
 		build: {
 			target: "esnext",
-			minify: false,
+			minify: production,
 			outDir: `../../../gradio/templates/${is_cdn ? "cdn" : "frontend"}`
 		},
 		define: {
@@ -45,7 +47,9 @@ export default defineConfig(({ mode }) => {
 				experimental: {
 					inspector: true
 				},
-
+				compilerOptions: {
+					dev: !production
+				},
 				hot: !process.env.VITEST,
 				preprocess: sveltePreprocess({
 					postcss: { plugins: [tailwind, nested] }

ui/packages/form/src/Radio.svelte

@@ -8,8 +8,8 @@
 	export let choices: Array<string>;
 	export let disabled: boolean = false;
 	export let label: string;
-	export let form_position: "first" | "last" | "mid" | "single" = "single";
 	export let show_label: boolean;
+	export let elem_id: string;
 
 	const dispatch = createEventDispatcher();
 
@@ -19,7 +19,7 @@
 <BlockTitle {show_label}>{label}</BlockTitle>
 
 <div class="flex flex-wrap gap-2">
-	{#each choices as choice, i}
+	{#each choices as choice, i (i)}
 		<label
 			class:!cursor-not-allowed={disabled}
 			class={"flex items-center text-gray-700 text-sm space-x-2 border py-1.5 px-3 rounded-lg cursor-pointer bg-white shadow-sm checked:shadow-inner" +
@@ -29,7 +29,7 @@
 				{disabled}
 				bind:group={value}
 				type="radio"
-				name="test"
+				name="radio-{elem_id}"
 				class="gr-check-radio gr-radio"
 				value={choice}
 			/> <span class="ml-2">{choice}</span></label

ui/packages/form/src/Textbox.svelte

@@ -4,7 +4,7 @@
 	import { BlockTitle } from "@gradio/atoms";
 
 	export let value: string = "";
-	export let style: Record<string, string> = {};
+	export let style: Record<string, unknown> = {};
 	export let lines: number = 1;
 	export let placeholder: string = "Type here...";
 	export let label: string;
@@ -43,9 +43,9 @@
 			max_lines === false
 				? false
 				: max_lines === undefined // default
-				? 20 * 11
-				: 20 * (max_lines + 1);
-		let min = 20 * (lines + 1);
+				? 21 * 11
+				: 21 * (max_lines + 1);
+		let min = 21 * (lines + 1);
 
 		const target = event.target as HTMLTextAreaElement;
 		target.style.height = "1px";
@@ -64,7 +64,7 @@
 
 	function text_area_resize(el: HTMLTextAreaElement, value: string) {
 		if (lines === max_lines) return;
-		el.style.overflow = "hidden";
+		el.style.overflowY = "scroll";
 		el.addEventListener("input", resize);
 
 		if (!value.trim()) return;
@@ -83,7 +83,7 @@
 	{#if lines === 1 && max_lines === 1}
 		<input
 			type="text"
-			class={"block gr-box gr-input w-full gr-text-input " +
+			class={"scroll-hide block gr-box gr-input w-full gr-text-input " +
 				create_classes(style)}
 			bind:value
 			bind:this={el}
@@ -93,7 +93,7 @@
 	{:else}
 		<textarea
 			use:text_area_resize={value}
-			class={"block gr-box gr-input w-full gr-text-input " +
+			class={"scroll-hide block gr-box gr-input w-full gr-text-input " +
 				create_classes(style)}
 			bind:value
 			bind:this={el}

ui/packages/image/src/Webcam.svelte

@@ -90,7 +90,7 @@
 	access_webcam();
 </script>
 
-<div class="h-full w-full relative">
+<div class="h-full min-h-[15rem] w-full relative">
 	<!-- svelte-ignore a11y-media-has-caption -->
 	<video bind:this={video_source} class="h-full w-full " />
 	<button

ui/packages/table/src/Table.svelte

@@ -45,7 +45,7 @@
 			return _h.map((h, i) => {
 				const _id = `h-${i}`;
 				els[_id] = { cell: null, input: null };
-				return { id: _id, value: h || "" };
+				return { id: _id, value: h ?? "" };
 			});
 		}
 	}
@@ -67,7 +67,7 @@
 					.map((n, j) => {
 						const id = `${i}-${j}`;
 						els[id] = { input: null, cell: null };
-						return { value: _values?.[i]?.[j] || "", id };
+						return { value: _values?.[i]?.[j] ?? "", id };
 					})
 			);
 	}

ui/packages/theme/src/global.css

@@ -60,8 +60,8 @@
 		@apply ml-0 mt-3;
 	}
 
-	.row.gr-gap.mobile-row > *:not(.absolute):not(".ml-0") + * {
-		@apply !ml-3 mt-0;
+	.row.gr-gap.mobile-row > *:not(.absolute) + * {
+		@apply !ml-3 !mt-0;
 	}
 
 	.row.gr-form-gap > .form + .form {

ui/pnpm-lock.yaml

@@ -117,7 +117,7 @@ importers:
       '@gradio/utils': link:../utils
       '@gradio/video': link:../video
       mime-types: 2.1.34
-      svelte-i18n: 3.3.13_svelte@3.47.0
+      svelte-i18n: 3.3.13
 
   packages/atoms:
     specifiers: {}
@@ -4257,6 +4257,20 @@ packages:
     dependencies:
       svelte: 3.47.0
 
+  /svelte-i18n/3.3.13:
+    resolution: {integrity: sha512-RQM+ys4+Y9ztH//tX22H1UL2cniLNmIR+N4xmYygV6QpQ6EyQvloZiENRew8XrVzfvJ8HaE8NU6/yurLkl7z3g==}
+    engines: {node: '>= 11.15.0'}
+    hasBin: true
+    peerDependencies:
+      svelte: ^3.25.1
+    dependencies:
+      deepmerge: 4.2.2
+      estree-walker: 2.0.2
+      intl-messageformat: 9.11.4
+      sade: 1.8.1
+      tiny-glob: 0.2.9
+    dev: false
+
   /svelte-i18n/3.3.13_svelte@3.47.0:
     resolution: {integrity: sha512-RQM+ys4+Y9ztH//tX22H1UL2cniLNmIR+N4xmYygV6QpQ6EyQvloZiENRew8XrVzfvJ8HaE8NU6/yurLkl7z3g==}
     engines: {node: '>= 11.15.0'}