Fix Model3D download button and other issues (#6414)

* Add code

* add changeset

* add changeset

* add changeset

* Don't bind

* lint

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/shaggy-states-swim.md

@@ -0,0 +1,6 @@
+---
+"@gradio/model3d": patch
+"gradio": patch
+---
+
+fix:Fix Model3D download button and other issues

demo/model3d_component_events/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: model3d_component_events"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            input_3d = gr.Model3D(label=\"Input Model3D\")\n", "        with gr.Column():\n", "            output_3d = gr.Model3D(label=\"Output Model3D\")\n", "        with gr.Column():\n", "            num_change = gr.Number(label=\"# Change Events\", value=0)\n", "            num_load = gr.Number(label=\"# Upload Events\", value=0)\n", "            num_clear = gr.Number(label=\"# Clear Events\", value=0)\n", "            clear_value = gr.Textbox(label=\"Clear Value\", value=\"\")\n", "        input_3d.upload(lambda s, n: (s, n + 1), [input_3d, num_load], [output_3d, num_load])\n", "        input_3d.change(lambda n: n + 1, num_change, num_change)\n", "        input_3d.clear(lambda s, n: (s, n + 1), [input_3d, num_clear], [clear_value, num_clear])\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/model3d_component_events/run.py

@@ -0,0 +1,20 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            input_3d = gr.Model3D(label="Input Model3D")
+        with gr.Column():
+            output_3d = gr.Model3D(label="Output Model3D")
+        with gr.Column():
+            num_change = gr.Number(label="# Change Events", value=0)
+            num_load = gr.Number(label="# Upload Events", value=0)
+            num_clear = gr.Number(label="# Clear Events", value=0)
+            clear_value = gr.Textbox(label="Clear Value", value="")
+        input_3d.upload(lambda s, n: (s, n + 1), [input_3d, num_load], [output_3d, num_load])
+        input_3d.change(lambda n: n + 1, num_change, num_change)
+        input_3d.clear(lambda s, n: (s, n + 1), [input_3d, num_clear], [clear_value, num_clear])
+
+
+if __name__ == "__main__":
+    demo.launch()

gradio/components/model3d.py

@@ -104,7 +104,7 @@ class Model3D(Component):
     def postprocess(self, value: str | Path | None) -> FileData | None:
         if value is None:
             return value
-        return FileData(path=str(value))
+        return FileData(path=str(value), orig_name=Path(value).name)
 
     def as_example(self, input_data: str | None) -> str:
         return Path(input_data).name if input_data else ""

js/app/test/model3d_component_events.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from "@gradio/tootils";
+
+test("Model3D click-to-upload uploads file successfuly. Upload and clear events work correctly. Downloading works.", async ({
+	page
+}) => {
+	await page
+		.getByRole("button", { name: "Drop File Here - or - Click to Upload" })
+		.click();
+	const uploader = await page.locator("input[type=file]");
+	await Promise.all([
+		uploader.setInputFiles(["./test/files/face.obj"]),
+		page.waitForResponse("**/upload?*?*")
+	]);
+
+	await expect(page.getByLabel("# Change Events")).toHaveValue("1");
+	await expect(page.getByLabel("# Upload Events")).toHaveValue("1");
+
+	await page.getByLabel("Clear").nth(0).click();
+	await expect(page.getByLabel("# Change Events")).toHaveValue("2");
+	await expect(page.getByLabel("# Clear Events")).toHaveValue("1");
+	await expect(page.getByLabel("Clear Value")).toHaveValue("");
+
+	const downloadPromise = page.waitForEvent("download");
+	await page.getByLabel("Download").click();
+	const download = await downloadPromise;
+	await expect(download.suggestedFilename()).toBe("face.obj");
+});

js/model3D/Index.svelte

@@ -114,7 +114,14 @@
 			on:change={({ detail }) => (value = detail)}
 			on:drag={({ detail }) => (dragging = detail)}
 			on:change={({ detail }) => gradio.dispatch("change", detail)}
-			on:clear={() => gradio.dispatch("clear")}
+			on:clear={() => {
+				value = null;
+				gradio.dispatch("clear");
+			}}
+			on:load={({ detail }) => {
+				value = detail;
+				gradio.dispatch("upload");
+			}}
 			i18n={gradio.i18n}
 		>
 			<UploadText i18n={gradio.i18n} type="file" />

js/model3D/shared/Model3D.svelte

@@ -94,7 +94,7 @@
 		<div class="buttons">
 			<IconButton Icon={Undo} label="Undo" on:click={() => handle_undo()} />
 			<a
-				href={value.path}
+				href={value.url}
 				target={window.__is_colab__ ? "_blank" : null}
 				download={window.__is_colab__ ? null : value.orig_name || value.path}
 			>

js/model3D/shared/Model3DUpload.svelte

@@ -60,6 +60,7 @@
 		await tick();
 		reset_scene();
 		dispatch("change", value);
+		dispatch("load", value);
 	}
 
 	async function handle_clear(): Promise<void> {
@@ -70,6 +71,7 @@
 		value = null;
 		await tick();
 		dispatch("clear");
+		dispatch("change");
 	}
 
 	async function handle_undo(): Promise<void> {
@@ -80,6 +82,7 @@
 		change: FileData | null;
 		clear: undefined;
 		drag: boolean;
+		load: FileData;
 	}>();
 
 	let dragging = false;