merged master

gradio/interface.py

@@ -591,7 +591,7 @@ class Interface(Launchable):
                 continue
 
     def launch(self, **args):
-        if self.allow_flagging:
+        if self.allow_flagging != "never":
             self.flagging_callback.setup(self.flagging_dir)
         super().launch(**args)
 

test/test_flagging.py

@@ -67,5 +67,26 @@ class TestHuggingFaceDatasetSaver(unittest.TestCase):
             self.assertEqual(row_count, 2)  # 3 rows written including header
 
 
+class TestDisableFlagging(unittest.TestCase):
+    def test_flagging_no_permission_error_with_flagging_disabled(self):
+        with tempfile.TemporaryDirectory() as tmpdirname:
+            os.chmod(tmpdirname, 0o444)  # Make directory read-only
+            nonwritable_path = os.path.join(tmpdirname, "flagging_dir")
+
+            io = gr.Interface(
+                lambda x: x,
+                "text",
+                "text",
+                allow_flagging="never",
+                flagging_dir=nonwritable_path,
+            )
+            try:
+                io.launch(prevent_thread_lock=True)
+            except PermissionError:
+                self.fail("launch() raised a PermissionError unexpectedly")
+
+        io.close()
+
+
 if __name__ == "__main__":
     unittest.main()

ui/packages/app/public/lang/README.md

@@ -0,0 +1,14 @@
+# How to add support for more languages
+
+We would love to support more languages for Gradio 🌎
+
+To add your language, do the following steps:
+
+1. Create a new json file in this directory
+2. Name the file after the language code (Here's a list: http://4umi.com/web/html/languagecodes.php)
+3. Please provide clear and complete translations. Take a look at the [`en.json`](https://github.com/gradio-app/gradio/blob/master/ui/packages/app/public/lang/en.json) file for the corresponding English text.
+4. Lastly, the json file will need to be imported and added into the [`i18n.js` file](https://github.com/gradio-app/gradio/blob/master/ui/packages/app/src/i18n.js)
+
+**Example:** take a look at this [pull request which adds support for Urdu](https://github.com/gradio-app/gradio/pull/621/files)
+
+That's it! 

ui/packages/app/public/lang/de.json

@@ -0,0 +1,18 @@
+{
+  "interface": {
+    "submit": "Absenden",
+    "clear": "Löschen",
+    "interpret": "Ersteller",
+    "flag": "Flag",
+    "examples": "Beispiele",
+    "drop_image": "Bild hier ablegen",
+    "drop_video": "Video hier ablegen",
+    "drop_audio": "Audio hier ablegen",
+    "drop_file": "Datei hier ablegen",
+    "drop_csv": "CSV Datei hier ablegen",
+    "or": "oder",
+    "click_to_upload": "Hochladen",
+    "view_api": "API anschauen",
+    "built_with_Gradio": "Mit Gradio erstellt"
+  }
+}

ui/packages/app/public/lang/es.json

@@ -5,14 +5,14 @@
     "interpret": "Interpretar",
     "flag": "Avisar",
     "examples": "Ejemplos",
-    "drop_image": "Coloque la Imagen Aquí",
+    "drop_image": "Coloque la imagen aquí",
-    "drop_video": "Coloque la Video Aquí",
+    "drop_video": "Coloque el video aquí",
-    "drop_audio": "Coloque la Audio Aquí",
+    "drop_audio": "Coloque el audio aquí",
-    "drop_file": "Coloque la Archivo Aquí",
+    "drop_file": "Coloque el archivo aquí",
-    "drop_csv": "Coloque el CSV Aquí",
+    "drop_csv": "Coloque el CSV aquí",
     "or": "o",
-    "click_to_upload": "Haga Clic para Cargar",
+    "click_to_upload": "Haga click para cargar",
-    "view_api": "Para ver la API",
+    "view_api": "Ver la API",
     "built_with_Gradio": "Construido con Gradio"
   }
 }

ui/packages/app/public/lang/ur.json

@@ -0,0 +1,19 @@
+{
+    "interface": {
+      "submit": "جمع کریں",
+      "clear": "ہٹا دیں",
+      "interpret": "تشریح کریں",
+      "flag": "نشان لگائیں",
+      "examples": "مثالیں",
+      "drop_image": "یہاں تصویر ڈراپ کریں",
+      "drop_video": "یہاں ویڈیو ڈراپ کریں",
+      "drop_audio": "یہاں آڈیو ڈراپ کریں",
+      "drop_file": "یہاں فائل ڈراپ کریں",
+      "drop_csv": "یہاں فائل ڈراپ کریں",
+      "or": "یا",
+      "click_to_upload": "اپ لوڈ کے لیے کلک کریں",
+      "view_api": "API دیکھیں",
+      "built_with_Gradio": "کے ساتھ بنایا گیا Gradio"
+    }
+  }
+  

ui/packages/app/src/components/input/DataFrame/DataFrame.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
 	import { tick } from "svelte";
 
-	export let label = "Title";
 	export let headers: Array<string> = [];
-	export let values: Array<Array<string | number>> = [
+	export let values: Array<Array<string | number>> = [["", "", ""]];
-		["Frank", 32, "Male"],
+	export let default_data: Array<Array<string | number>> = [];
-		["Beatrice", 99, "Female"],
+
-		["Simone", 999, "Male"]
+	if ($$props.default) values = $$props.default;
-	];
 
 	export let setValue: (val: typeof values) => typeof values;
 	export let editable = true;
@@ -126,6 +124,20 @@
 					editing = id;
 				}
 				break;
+			case "Backspace":
+				if (!editable) break;
+				if (!editing) {
+					event.preventDefault();
+					data[i][j].value = "";
+				}
+				break;
+			case "Delete":
+				if (!editable) break;
+				if (!editing) {
+					event.preventDefault();
+					data[i][j].value = "";
+				}
+				break;
 			default:
 				break;
 		}
@@ -272,8 +284,6 @@
 	};
 </script>
 
-<h4 id="title">{label}</h4>
-
 <div class="shadow overflow-hidden border-gray-200 rounded-sm relative">
 	<table
 		id="grid"

ui/packages/app/src/components/utils/helpers.test.ts

@@ -1,24 +1,93 @@
-import { assert, describe, expect, it } from "vitest";
+import { assert, describe, test } from "vitest";
-import { prettyBytes } from "./helpers";
+import { prettyBytes, deepCopy, randInt, getNextColor } from "./helpers";
 
 describe("prettyBytes", () => {
-	it("handle B", () => {
+	test("handle B", () => {
 		assert.equal(prettyBytes(10), "10.0 B");
 	});
 
-	it("handles KB", () => {
+	test("handles KB", () => {
 		assert.equal(prettyBytes(1_300), "1.3 KB");
 	});
 
-	it("handles MB", () => {
+	test("handles MB", () => {
 		assert.equal(prettyBytes(1_300_000), "1.2 MB");
 	});
 
-	it("handles GB", () => {
+	test("handles GB", () => {
 		assert.equal(prettyBytes(1_300_000_123), "1.2 GB");
 	});
 
-	it("handles PB", () => {
+	test("handles PB", () => {
 		assert.equal(prettyBytes(1_300_000_123_000), "1.2 PB");
 	});
 });
+
+describe("deepCopy", () => {
+	test("handle arrays", () => {
+		const array = [1, 2, 3];
+		const copy = deepCopy(array);
+		assert.ok(array !== copy);
+		assert.deepEqual(array, copy);
+	});
+
+	test("handle objects", () => {
+		const obj = { a: 1, b: 2, c: 3 };
+		const copy = deepCopy(obj);
+		assert.ok(obj !== copy);
+		assert.deepEqual(obj, copy);
+	});
+
+	test("handle complex structures", () => {
+		const obj = {
+			a: 1,
+			b: {
+				a: 1,
+				b: {
+					a: 1,
+					b: { a: 1, b: 2, c: 3 },
+					c: [
+						1,
+						2,
+						{ a: 1, b: { a: 1, b: { a: 1, b: 2, c: 3 }, c: [1, 2, 3] } }
+					]
+				},
+				c: 3
+			},
+			c: 3
+		};
+		const copy = deepCopy(obj);
+		assert.ok(obj !== copy);
+		assert.deepEqual(obj, copy);
+	});
+});
+
+describe("randInt", () => {
+	test("returns a random number", () => {
+		assert.typeOf(randInt(0, 10), "number");
+	});
+
+	test("respects min and max", () => {
+		const n = randInt(0, 10);
+		assert.ok(n >= 0 && n <= 10);
+	});
+
+	test("respects min and max when negative", () => {
+		const n = randInt(-100, -10);
+		assert.ok(n > -100 && n < -10);
+	});
+});
+
+describe("getNextColor", () => {
+	test("returns a color", () => {
+		assert.equal(getNextColor(0), "rgba(255, 99, 132, 1)");
+	});
+
+	test("returns a color when index is very high", () => {
+		assert.ok(
+			getNextColor(999999999).match(
+				/rgba\([0-9]{1,3}, [0-9]{1,3}, [0-9]{1,3}, [0-9]\)/
+			)
+		);
+	});
+});

ui/packages/app/src/components/utils/helpers.ts

@@ -15,8 +15,7 @@ export function randInt(min: number, max: number): number {
 	return Math.floor(Math.random() * (max - min) + min);
 }
 
-export const getNextColor = (index: number, alpha?: number): string => {
+export const getNextColor = (index: number, alpha: number = 1): string => {
-	alpha = alpha || 1;
 	let default_colors = [
 		[255, 99, 132],
 		[54, 162, 235],

ui/packages/app/src/i18n.js

@@ -1,9 +1,11 @@
 import { addMessages, init, getLocaleFromNavigator } from "svelte-i18n";
 import en from "../public/lang/en.json";
 import es from "../public/lang/es.json";
+import ur from "../public/lang/ur.json";
 
 addMessages("en", en);
 addMessages("es", es);
+addMessages("ur", ur);
 
 export function setupi18n() {
 	init({