@gradio/core 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @gradio/core
 
+## 0.18.0
+
+### Features
+
+- [#11224](https://github.com/gradio-app/gradio/pull/11224) [`834e92c`](https://github.com/gradio-app/gradio/commit/834e92c187f200665c78c344f0b38f5adede807b) - Fix re-rendering with key when setting a value to None.  Thanks @aliabid94!
+- [#10832](https://github.com/gradio-app/gradio/pull/10832) [`d457438`](https://github.com/gradio-app/gradio/commit/d4574381bdd12709183c3affe740fada82b8baea) - Screen recording.  Thanks @dawoodkhan82!
+
 ## 0.17.0
 
 ### Features

package/dist/src/Blocks.svelte

@@ -1,6 +1,7 @@
 <script>import { tick, onMount } from "svelte";
 import { _ } from "svelte-i18n";
 import { Client } from "@gradio/client";
+import { writable } from "svelte/store";
 import { setupi18n } from "./i18n";
 import { ApiDocs, ApiRecorder, Settings } from "./api_docs/";
 import { Toast } from "@gradio/statustracker";
@@ -9,7 +10,9 @@ import { prefix_css } from "./css";
 import logo from "./images/logo.svg";
 import api_logo from "./api_docs/img/api-logo.svg";
 import settings_logo from "./api_docs/img/settings-logo.svg";
+import record_stop from "./api_docs/img/record-stop.svg";
 import { create_components, AsyncFunction } from "./init";
+import * as screen_recorder from "./screen_recorder";
 export let root;
 export let components;
 export let layout;
@@ -74,6 +77,8 @@ export let search_params;
 let api_docs_visible = search_params.get("view") === "api" && show_api;
 let settings_visible = search_params.get("view") === "settings";
 let api_recorder_visible = search_params.get("view") === "api-recorder" && show_api;
+let allow_zoom = true;
+let allow_video_trim = true;
 function set_api_docs_visible(visible) {
   api_recorder_visible = false;
   api_docs_visible = visible;
@@ -99,6 +104,17 @@ let api_calls = [];
 export let render_complete = false;
 async function handle_update(data, fn_index) {
   const dep = dependencies.find((dep2) => dep2.id === fn_index);
+  const input_type = components.find(
+    (comp) => comp.id === dep?.inputs[0]
+  )?.type;
+  if (allow_zoom && dep && input_type !== "dataset") {
+    if (dep && dep.inputs && dep.inputs.length > 0 && $is_screen_recording) {
+      screen_recorder.zoom(true, dep.inputs, 1);
+    }
+    if (dep && dep.outputs && dep.outputs.length > 0 && $is_screen_recording) {
+      screen_recorder.zoom(false, dep.outputs, 2);
+    }
+  }
   if (!dep) {
     return;
   }
@@ -285,6 +301,9 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
     }
   }
   async function make_prediction(payload2, streaming = false) {
+    if (allow_video_trim) {
+      screen_recorder.markRemoveSegmentStart();
+    }
     if (api_recorder_visible) {
       api_calls = [...api_calls, JSON.parse(JSON.stringify(payload2))];
     }
@@ -472,6 +491,9 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
         });
       }
     }
+    if (allow_video_trim) {
+      screen_recorder.markRemoveSegmentEnd();
+    }
   }
 }
 function trigger_share(title2, description) {
@@ -612,6 +634,7 @@ function set_status(statuses) {
 function isCustomEvent(event) {
   return "detail" in event;
 }
+let is_screen_recording = writable(false);
 onMount(() => {
   document.addEventListener("visibilitychange", function() {
     if (document.visibilityState === "hidden") {
@@ -621,7 +644,23 @@ onMount(() => {
   is_mobile_device = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
     navigator.userAgent
   );
+  screen_recorder.initialize(
+    root,
+    (title2, message, type) => {
+      add_new_message(title2, message, type);
+    },
+    (isRecording) => {
+      $is_screen_recording = isRecording;
+    }
+  );
 });
+function screen_recording() {
+  if ($is_screen_recording) {
+    screen_recorder.stopRecording();
+  } else {
+    screen_recorder.startRecording();
+  }
+}
 </script>
 
 <svelte:head>
@@ -677,6 +716,17 @@ onMount(() => {
 				{$_("common.built_with_gradio")}
 				<img src={logo} alt={$_("common.logo")} />
 			</a>
+			<div class="divider" class:hidden={!$is_screen_recording}>·</div>
+			<button
+				class:hidden={!$is_screen_recording}
+				on:click={() => {
+					screen_recording();
+				}}
+				class="record"
+			>
+				{$_("common.stop_recording")}
+				<img src={record_stop} alt={$_("common.stop_recording")} />
+			</button>
 			<div class="divider">·</div>
 			<button
 				on:click={() => {
@@ -749,9 +799,14 @@ onMount(() => {
 		/>
 		<div class="api-docs-wrap">
 			<Settings
+				bind:allow_zoom
+				bind:allow_video_trim
 				on:close={(event) => {
 					set_settings_visible(false);
 				}}
+				on:start_recording={(event) => {
+					screen_recording();
+				}}
 				pwa_enabled={app.config.pwa}
 				{root}
 				{space_id}
@@ -791,7 +846,8 @@ onMount(() => {
 	}
 
 	.show-api,
-	.settings {
+	.settings,
+	.record {
 		display: flex;
 		align-items: center;
 	}
@@ -811,13 +867,20 @@ onMount(() => {
 		width: var(--size-4);
 	}
 
+	.record img {
+		margin-right: var(--size-1);
+		margin-left: var(--size-1);
+		width: var(--size-3);
+	}
+
 	.built-with {
 		display: flex;
 		align-items: center;
 	}
 
 	.built-with:hover,
-	.settings:hover {
+	.settings:hover,
+	.record:hover {
 		color: var(--body-text-color);
 	}
 
@@ -888,4 +951,8 @@ onMount(() => {
 	.show-api:hover {
 		color: var(--body-text-color);
 	}
+
+	.hidden {
+		display: none;
+	}
 </style>

package/dist/src/api_docs/Settings.svelte

@@ -4,9 +4,13 @@ export let root;
 export let space_id;
 export let pwa_enabled;
 import { BaseDropdown as Dropdown } from "@gradio/dropdown";
+import { BaseCheckbox as Checkbox } from "@gradio/checkbox";
 import { language_choices, changeLocale } from "../i18n";
 import { locale, _ } from "svelte-i18n";
 import { setupi18n } from "../i18n";
+import record from "./img/record.svg";
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
 if (root === "") {
   root = location.protocol + "//" + location.host + location.pathname;
 }
@@ -38,6 +42,8 @@ onMount(() => {
 });
 let current_locale;
 let current_theme = "system";
+export let allow_zoom = true;
+export let allow_video_trim = true;
 locale.subscribe((value) => {
   if (value) {
     current_locale = value;
@@ -47,6 +53,12 @@ function handleLanguageChange(e) {
   const new_locale = e.detail;
   changeLocale(new_locale);
 }
+function handleZoomChange(e) {
+  allow_zoom = e.detail;
+}
+function handleVideoTrimChange(e) {
+  allow_video_trim = e.detail;
+}
 setupi18n();
 </script>
 
@@ -112,6 +124,44 @@ setupi18n();
 		{/if}
 	</p>
 </div>
+<div class="banner-wrap">
+	<h2>{$_("common.screen_studio")} <span class="beta-tag">beta</span></h2>
+	<p class="padded">
+		Screen Studio allows you to record your screen and generates a video of your
+		app with automatically adding zoom in and zoom out effects as well as
+		trimming the video to remove the prediction time.
+		<br /><br />
+		Start recording by clicking the <i>Start Recording</i> button below and then
+		sharing the current browser tab of your Gradio demo. Use your app as you
+		would normally to generate a prediction.
+		<br />
+		Stop recording by clicking the <i>Stop Recording</i> button in the footer of
+		the demo.
+		<br /><br />
+		<Checkbox
+			label="Include automatic zoom in/out"
+			interactive={true}
+			value={allow_zoom}
+			on:change={handleZoomChange}
+		/>
+		<Checkbox
+			label="Include automatic video trimming"
+			interactive={true}
+			value={allow_video_trim}
+			on:change={handleVideoTrimChange}
+		/>
+	</p>
+	<button
+		class="record-button"
+		on:click={() => {
+			dispatch("close");
+			dispatch("start_recording");
+		}}
+	>
+		<img src={record} alt="Start Recording" />
+		Start Recording
+	</button>
+</div>
 
 <style>
 	.banner-wrap {
@@ -142,7 +192,8 @@ setupi18n();
 		margin-left: var(--size-2);
 	}
 
-	.theme-button {
+	.theme-button,
+	.record-button {
 		display: flex;
 		align-items: center;
 		border: 1px solid var(--border-color-primary);
@@ -154,6 +205,15 @@ setupi18n();
 		cursor: pointer;
 	}
 
+	.record-button img {
+		margin-right: var(--size-1);
+		margin-left: var(--size-1);
+		width: var(--size-3);
+	}
+	.record-button:hover {
+		border-color: red;
+	}
+
 	.current-theme {
 		border: 1px solid var(--body-text-color-subdued);
 		color: var(--body-text-color);
@@ -173,4 +233,17 @@ setupi18n();
 		all: unset;
 		cursor: pointer;
 	}
+
+	.beta-tag {
+		position: relative;
+		top: -5px;
+		font-size: var(--text-xs);
+		background-color: var(--color-accent);
+		color: white;
+		padding: 2px 6px;
+		border-radius: 10px;
+		margin-left: 5px;
+		font-weight: normal;
+		text-transform: uppercase;
+	}
 </style>

package/dist/src/api_docs/Settings.svelte.d.ts

@@ -4,9 +4,12 @@ declare const __propDef: {
         root: string;
         space_id: string | null;
         pwa_enabled: boolean | undefined;
+        allow_zoom?: boolean | undefined;
+        allow_video_trim?: boolean | undefined;
     };
     events: {
         close: CustomEvent<any>;
+        start_recording: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/src/api_docs/img/record-stop.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>record [#982]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-380.000000, -3839.000000)" fill="#FF0000"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M338,3689 C338,3691.209 336.209,3693 334,3693 C331.791,3693 330,3691.209 330,3689 C330,3686.791 331.791,3685 334,3685 C336.209,3685 338,3686.791 338,3689 M334,3697 C329.589,3697 326,3693.411 326,3689 C326,3684.589 329.589,3681 334,3681 C338.411,3681 342,3684.589 342,3689 C342,3693.411 338.411,3697 334,3697 M334,3679 C328.477,3679 324,3683.477 324,3689 C324,3694.523 328.477,3699 334,3699 C339.523,3699 344,3694.523 344,3689 C344,3683.477 339.523,3679 334,3679" id="record-[#982]"> </path> </g> </g> </g> </g></svg>

package/dist/src/api_docs/img/record.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>record [#982]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-380.000000, -3839.000000)" fill="#808080"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M338,3689 C338,3691.209 336.209,3693 334,3693 C331.791,3693 330,3691.209 330,3689 C330,3686.791 331.791,3685 334,3685 C336.209,3685 338,3686.791 338,3689 M334,3697 C329.589,3697 326,3693.411 326,3689 C326,3684.589 329.589,3681 334,3681 C338.411,3681 342,3684.589 342,3689 C342,3693.411 338.411,3697 334,3697 M334,3679 C328.477,3679 324,3683.477 324,3689 C324,3694.523 328.477,3699 334,3699 C339.523,3699 344,3694.523 344,3689 C344,3683.477 339.523,3679 334,3679" id="record-[#982]"> </path> </g> </g> </g> </g></svg>

package/dist/src/init.js

@@ -80,10 +80,15 @@ export function create_components(initial_layout) {
      * Rerender the layout when the config has been modified to attach new components
      */
     function rerender_layout({ render_id, components, layout, root, dependencies }) {
+        components.forEach((c) => {
+            for (const prop in c.props) {
+                if (c.props[prop] === null) {
+                    c.props[prop] = undefined;
+                }
+            }
+        });
         let replacement_components = [];
         let new_components = [];
-        console.log("old_keys", keys_per_render_id[render_id]);
-        console.log("new_keys", components.map((c) => c.key));
         components.forEach((c) => {
             if (c.key == null || !keys_per_render_id[render_id]?.includes(c.key)) {
                 new_components.push(c);
@@ -92,7 +97,6 @@ export function create_components(initial_layout) {
                 replacement_components.push(c);
             }
         });
-        console.log(new_components.length, replacement_components.length);
         let _constructor_map = preload_all_components(new_components, root);
         _constructor_map.forEach((v, k) => {
             constructor_map.set(k, v);

package/dist/src/lang/en.json

@@ -69,6 +69,10 @@
 		"language": "Language",
 		"display_theme": "Display Theme",
 		"pwa": "Progressive Web App",
+		"record": "Record",
+		"stop_recording": "Stop Recording",
+		"screen_studio": "Screen Studio",
+		"share_gradio_tab": "[Sharing] Gradio Tab",
 		"run": "Run"
 	},
 	"dataframe": {

package/dist/src/screen_recorder.d.ts

@@ -0,0 +1,16 @@
+import type { ToastMessage } from "@gradio/statustracker";
+export declare function initialize(rootPath: string, add_new_message: (title: string, message: string, type: ToastMessage["type"]) => void, recordingStateCallback?: (isRecording: boolean) => void): void;
+export declare function startRecording(): Promise<void>;
+export declare function stopRecording(): void;
+export declare function isCurrentlyRecording(): boolean;
+export declare function markRemoveSegmentStart(): void;
+export declare function markRemoveSegmentEnd(): void;
+export declare function clearRemoveSegment(): void;
+export declare function addZoomEffect(is_input: boolean, params: {
+    boundingBox: {
+        topLeft: [number, number];
+        bottomRight: [number, number];
+    };
+    duration?: number;
+}): void;
+export declare function zoom(is_input: boolean, elements: number[], duration?: number): void;

package/dist/src/screen_recorder.js

@@ -0,0 +1,255 @@
+let isRecording = false;
+let mediaRecorder = null;
+let recordedChunks = [];
+let recordingStartTime = 0;
+let animationFrameId = null;
+let removeSegment = {};
+let root;
+let add_message_callback;
+let onRecordingStateChange = null;
+let zoomEffects = [];
+export function initialize(rootPath, add_new_message, recordingStateCallback) {
+    root = rootPath;
+    add_message_callback = add_new_message;
+    if (recordingStateCallback) {
+        onRecordingStateChange = recordingStateCallback;
+    }
+}
+export async function startRecording() {
+    if (isRecording) {
+        return;
+    }
+    try {
+        const originalTitle = document.title;
+        document.title = "[Sharing] Gradio Tab";
+        const stream = await navigator.mediaDevices.getDisplayMedia({
+            video: {
+                width: { ideal: 1920 },
+                height: { ideal: 1080 },
+                frameRate: { ideal: 30 }
+            },
+            audio: true,
+            selfBrowserSurface: "include"
+        });
+        document.title = originalTitle;
+        const options = {
+            videoBitsPerSecond: 5000000
+        };
+        mediaRecorder = new MediaRecorder(stream, options);
+        recordedChunks = [];
+        removeSegment = {};
+        mediaRecorder.ondataavailable = handleDataAvailable;
+        mediaRecorder.onstop = handleStop;
+        mediaRecorder.start(1000);
+        isRecording = true;
+        if (onRecordingStateChange) {
+            onRecordingStateChange(true);
+        }
+        recordingStartTime = Date.now();
+    }
+    catch (error) {
+        add_message_callback("Recording Error", "Failed to start recording: " + error.message, "error");
+    }
+}
+export function stopRecording() {
+    if (!isRecording || !mediaRecorder) {
+        return;
+    }
+    mediaRecorder.stop();
+    isRecording = false;
+    if (onRecordingStateChange) {
+        onRecordingStateChange(false);
+    }
+}
+export function isCurrentlyRecording() {
+    return isRecording;
+}
+export function markRemoveSegmentStart() {
+    if (!isRecording) {
+        return;
+    }
+    const currentTime = (Date.now() - recordingStartTime) / 1000;
+    removeSegment.start = currentTime;
+}
+export function markRemoveSegmentEnd() {
+    if (!isRecording || removeSegment.start === undefined) {
+        return;
+    }
+    const currentTime = (Date.now() - recordingStartTime) / 1000;
+    removeSegment.end = currentTime;
+}
+export function clearRemoveSegment() {
+    removeSegment = {};
+}
+export function addZoomEffect(is_input, params) {
+    if (!isRecording) {
+        return;
+    }
+    const FPS = 30;
+    const currentTime = (Date.now() - recordingStartTime) / 1000;
+    const currentFrame = is_input
+        ? Math.floor((currentTime - 2) * FPS)
+        : Math.floor(currentTime * FPS);
+    if (params.boundingBox &&
+        params.boundingBox.topLeft &&
+        params.boundingBox.bottomRight &&
+        params.boundingBox.topLeft.length === 2 &&
+        params.boundingBox.bottomRight.length === 2) {
+        const newEffectDuration = params.duration || 2.0;
+        const newEffectEndFrame = currentFrame + Math.floor(newEffectDuration * FPS);
+        const hasOverlap = zoomEffects.some((existingEffect) => {
+            const existingEffectEndFrame = existingEffect.start_frame +
+                Math.floor((existingEffect.duration || 2.0) * FPS);
+            return ((currentFrame >= existingEffect.start_frame &&
+                currentFrame <= existingEffectEndFrame) ||
+                (newEffectEndFrame >= existingEffect.start_frame &&
+                    newEffectEndFrame <= existingEffectEndFrame) ||
+                (currentFrame <= existingEffect.start_frame &&
+                    newEffectEndFrame >= existingEffectEndFrame));
+        });
+        if (!hasOverlap) {
+            zoomEffects.push({
+                boundingBox: params.boundingBox,
+                start_frame: currentFrame,
+                duration: newEffectDuration
+            });
+        }
+    }
+}
+export function zoom(is_input, elements, duration = 2.0) {
+    if (!isRecording) {
+        return;
+    }
+    try {
+        setTimeout(() => {
+            if (!elements || elements.length === 0) {
+                return;
+            }
+            let minLeft = Infinity;
+            let minTop = Infinity;
+            let maxRight = 0;
+            let maxBottom = 0;
+            let foundElements = false;
+            for (const elementId of elements) {
+                const selector = `#component-${elementId}`;
+                const element = document.querySelector(selector);
+                if (element) {
+                    foundElements = true;
+                    const rect = element.getBoundingClientRect();
+                    minLeft = Math.min(minLeft, rect.left);
+                    minTop = Math.min(minTop, rect.top);
+                    maxRight = Math.max(maxRight, rect.right);
+                    maxBottom = Math.max(maxBottom, rect.bottom);
+                }
+            }
+            if (!foundElements) {
+                return;
+            }
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const boxWidth = Math.min(maxRight, viewportWidth) - Math.max(0, minLeft);
+            const boxHeight = Math.min(maxBottom, viewportHeight) - Math.max(0, minTop);
+            const widthPercentage = boxWidth / viewportWidth;
+            const heightPercentage = boxHeight / viewportHeight;
+            if (widthPercentage >= 0.8 || heightPercentage >= 0.8) {
+                return;
+            }
+            const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+            let topLeft = [
+                Math.max(0, minLeft) / viewportWidth,
+                Math.max(0, minTop) / viewportHeight
+            ];
+            let bottomRight = [
+                Math.min(maxRight, viewportWidth) / viewportWidth,
+                Math.min(maxBottom, viewportHeight) / viewportHeight
+            ];
+            if (isSafari) {
+                topLeft[0] = Math.max(0, topLeft[0] * 0.9);
+                bottomRight[0] = Math.min(1, bottomRight[0] * 0.9);
+                const width = bottomRight[0] - topLeft[0];
+                const center = (topLeft[0] + bottomRight[0]) / 2;
+                const newCenter = center * 0.9;
+                topLeft[0] = Math.max(0, newCenter - width / 2);
+                bottomRight[0] = Math.min(1, newCenter + width / 2);
+            }
+            topLeft[0] = Math.max(0, topLeft[0]);
+            topLeft[1] = Math.max(0, topLeft[1]);
+            bottomRight[0] = Math.min(1, bottomRight[0]);
+            bottomRight[1] = Math.min(1, bottomRight[1]);
+            addZoomEffect(is_input, {
+                boundingBox: {
+                    topLeft,
+                    bottomRight
+                },
+                duration: duration
+            });
+        }, 300);
+    }
+    catch (error) {
+        // pass
+    }
+}
+function handleDataAvailable(event) {
+    if (event.data.size > 0) {
+        recordedChunks.push(event.data);
+    }
+}
+function handleStop() {
+    isRecording = false;
+    if (onRecordingStateChange) {
+        onRecordingStateChange(false);
+    }
+    const blob = new Blob(recordedChunks, {
+        type: "video/mp4"
+    });
+    handleRecordingComplete(blob);
+    const screenStream = mediaRecorder?.stream?.getTracks() || [];
+    screenStream.forEach((track) => track.stop());
+    if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+    }
+}
+async function handleRecordingComplete(recordedBlob) {
+    try {
+        add_message_callback("Processing video", "This may take a few seconds...", "info");
+        const formData = new FormData();
+        formData.append("video", recordedBlob, "recording.mp4");
+        if (removeSegment.start !== undefined && removeSegment.end !== undefined) {
+            formData.append("remove_segment_start", removeSegment.start.toString());
+            formData.append("remove_segment_end", removeSegment.end.toString());
+        }
+        if (zoomEffects.length > 0) {
+            formData.append("zoom_effects", JSON.stringify(zoomEffects));
+        }
+        const response = await fetch(root + "/gradio_api/process_recording", {
+            method: "POST",
+            body: formData
+        });
+        if (!response.ok) {
+            throw new Error(`Server returned ${response.status}: ${response.statusText}`);
+        }
+        const processedBlob = await response.blob();
+        const defaultFilename = `gradio-screen-recording-${new Date().toISOString().replace(/:/g, "-").replace(/\..+/, "")}.mp4`;
+        saveWithDownloadAttribute(processedBlob, defaultFilename);
+        zoomEffects = [];
+    }
+    catch (error) {
+        add_message_callback("Processing Error", "Failed to process recording. Saving original version.", "warning");
+        const defaultFilename = `gradio-screen-recording-${new Date().toISOString().replace(/:/g, "-").replace(/\..+/, "")}.mp4`;
+        saveWithDownloadAttribute(recordedBlob, defaultFilename);
+    }
+}
+function saveWithDownloadAttribute(blob, suggestedName) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.style.display = "none";
+    a.href = url;
+    a.download = suggestedName;
+    document.body.appendChild(a);
+    a.click();
+    setTimeout(() => {
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }, 100);
+}