Add download button to model3d output (#3014)

* download button

* update model3d demo

* changelog

* Update CHANGELOG.md

* Update CHANGELOG.md

* add download button to filepreview

* remove icon from file comp

* notebook

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

CHANGELOG.md

@@ -14,8 +14,6 @@ io.launch()
 ```
 <img width="1087" alt="image" src="https://user-images.githubusercontent.com/41651716/213260197-dc5d80b4-6e50-4b3a-a764-94980930ac38.png">
 
-
-
 ### conversational Demo
 ```python
 chatbot = gr.Interface.load("models/microsoft/DialoGPT-medium",
@@ -27,6 +25,14 @@ chatbot.launch()
 
 By [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3011](https://github.com/gradio-app/gradio/pull/3011) 
 
+### Download Button added to Model3D Output Component
+
+No need for an additional file output component to enable model3d file downloads anymore. We now added a download button to the model3d component itself.
+
+<img width="739" alt="Screenshot 2023-01-18 at 3 52 45 PM" src="https://user-images.githubusercontent.com/12725292/213294198-5f4fda35-bde7-450c-864f-d5683e7fa29a.png">
+
+By [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 3014](https://github.com/gradio-app/gradio/pull/3014) 
+
 ## Bug Fixes:
 * Fixes bug where interpretation event was not configured correctly by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2993](https://github.com/gradio-app/gradio/pull/2993) 
 * Fix relative import bug in reload mode by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2992](https://github.com/gradio-app/gradio/pull/2992) 

demo/model3D/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: model3D"]}, {"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": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/Bunny.obj https://github.com/gradio-app/gradio/raw/main/demo/model3D/files/Bunny.obj\n", "!wget -q -O files/Duck.glb https://github.com/gradio-app/gradio/raw/main/demo/model3D/files/Duck.glb\n", "!wget -q -O files/Fox.gltf https://github.com/gradio-app/gradio/raw/main/demo/model3D/files/Fox.gltf\n", "!wget -q -O files/face.obj https://github.com/gradio-app/gradio/raw/main/demo/model3D/files/face.obj\n", "!wget -q -O files/source.txt https://github.com/gradio-app/gradio/raw/main/demo/model3D/files/source.txt"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "\n", "\n", "def load_mesh(mesh_file_name):\n", "    return mesh_file_name, mesh_file_name\n", "\n", "\n", "demo = gr.Interface(\n", "    fn=load_mesh,\n", "    inputs=gr.Model3D(),\n", "    outputs=[\n", "        gr.Model3D(\n", "            clear_color=[0.0, 0.0, 0.0, 0.0],  label=\"3D Model\"),\n", "        gr.File(label=\"Download 3D Model\")\n", "    ],\n", "    examples=[\n", "        [os.path.join(os.path.abspath(''), \"files/Bunny.obj\")],\n", "        [os.path.join(os.path.abspath(''), \"files/Duck.glb\")],\n", "        [os.path.join(os.path.abspath(''), \"files/Fox.gltf\")],\n", "        [os.path.join(os.path.abspath(''), \"files/face.obj\")],\n", "    ],\n", ")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: model3D"]}, {"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": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/Bunny.obj https://github.com/gradio-app/gradio/raw/main/demo/model3D/files/Bunny.obj\n", "!wget -q -O files/Duck.glb https://github.com/gradio-app/gradio/raw/main/demo/model3D/files/Duck.glb\n", "!wget -q -O files/Fox.gltf https://github.com/gradio-app/gradio/raw/main/demo/model3D/files/Fox.gltf\n", "!wget -q -O files/face.obj https://github.com/gradio-app/gradio/raw/main/demo/model3D/files/face.obj\n", "!wget -q -O files/source.txt https://github.com/gradio-app/gradio/raw/main/demo/model3D/files/source.txt"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "\n", "\n", "def load_mesh(mesh_file_name):\n", "    return mesh_file_name\n", "\n", "\n", "demo = gr.Interface(\n", "    fn=load_mesh,\n", "    inputs=gr.Model3D(),\n", "    outputs=gr.Model3D(\n", "            clear_color=[0.0, 0.0, 0.0, 0.0],  label=\"3D Model\"),\n", "    examples=[\n", "        [os.path.join(os.path.abspath(''), \"files/Bunny.obj\")],\n", "        [os.path.join(os.path.abspath(''), \"files/Duck.glb\")],\n", "        [os.path.join(os.path.abspath(''), \"files/Fox.gltf\")],\n", "        [os.path.join(os.path.abspath(''), \"files/face.obj\")],\n", "    ],\n", ")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/model3D/run.py

@@ -3,17 +3,14 @@
 
 
 def load_mesh(mesh_file_name):
-    return mesh_file_name, mesh_file_name
+    return mesh_file_name
 
 
 demo = gr.Interface(
     fn=load_mesh,
     inputs=gr.Model3D(),
-    outputs=[
-        gr.Model3D(
+    outputs=gr.Model3D(
             clear_color=[0.0, 0.0, 0.0, 0.0],  label="3D Model"),
-        gr.File(label="Download 3D Model")
-    ],
     examples=[
         [os.path.join(os.path.dirname(__file__), "files/Bunny.obj")],
         [os.path.join(os.path.dirname(__file__), "files/Duck.glb")],

ui/packages/file/src/FilePreview.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import type { FileData } from "@gradio/upload";
+	import { Download } from "@gradio/icons";
+	import { IconButton } from "@gradio/atoms";
 	import {
 		display_file_name,
 		download_files,

ui/packages/icons/src/Download.svelte

@@ -0,0 +1,16 @@
+<svg
+	width="100%"
+	height="100%"
+	viewBox="0 0 24 24"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	xml:space="preserve"
+	stroke="currentColor"
+	style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path fill="currentColor" d="M17 12L12 17M12 17L7 12M12 17V4M17 20H7" />
+</svg>

ui/packages/icons/src/index.ts

@@ -22,3 +22,4 @@ export { default as TextHighlight } from "./TextHighlight.svelte";
 export { default as Tree } from "./Tree.svelte";
 export { default as Undo } from "./Undo.svelte";
 export { default as Video } from "./Video.svelte";
+export { default as Download } from "./Download.svelte";

ui/packages/model3D/src/Model3D.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { FileData } from "@gradio/upload";
-	import { BlockLabel } from "@gradio/atoms";
-	import { File } from "@gradio/icons";
+	import { BlockLabel, IconButton } from "@gradio/atoms";
+	import { File, Download } from "@gradio/icons";
+	import { download_files } from "./utils";
 
 	export let value: FileData | null;
 	export let clearColor: Array<number> = [0, 0, 0, 0];
@@ -76,13 +77,37 @@
 </script>
 
 <BlockLabel {show_label} Icon={File} label={label || "3D Model"} />
+{#if value}
+	<div class="model3D">
+		<div class="download">
+			<a
+				href={download_files(value)}
+				target={window.__is_colab__ ? "_blank" : null}
+				download={window.__is_colab__ ? null : value.orig_name || value.name}
+			>
+				<IconButton Icon={Download} label="Download" />
+			</a>
+		</div>
 
-<canvas bind:this={canvas} />
+		<canvas bind:this={canvas} />
+	</div>
+{/if}
 
 <style>
+	.model3D {
+		display: flex;
+		position: relative;
+		width: var(--size-full);
+		height: var(--size-full);
+	}
 	canvas {
 		width: var(--size-full);
 		height: var(--size-full);
 		object-fit: contain;
 	}
+	.download {
+		position: absolute;
+		top: 6px;
+		right: 6px;
+	}
 </style>

ui/packages/model3D/src/utils.ts

@@ -0,0 +1,38 @@
+import type { FileData } from "@gradio/upload";
+
+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;
+};
+
+export const display_file_name = (value: FileData): string => {
+	var str: string;
+	str = value.orig_name || value.name;
+	if (str.length > 30) {
+		return `${str.substr(0, 30)}...`;
+	} else return str;
+};
+
+export const download_files = (value: FileData): string => {
+	return value.data;
+};
+
+export const display_file_size = (
+	value: FileData | Array<FileData>
+): string => {
+	var total_size = 0;
+	if (Array.isArray(value)) {
+		for (var file of value) {
+			if (file.size !== undefined) total_size += file.size;
+		}
+	} else {
+		total_size = value.size || 0;
+	}
+	return prettyBytes(total_size);
+};