@gradio/core 0.16.1 → 0.18.0

package/dist/src/init.js

@@ -24,7 +24,7 @@ export function create_components(initial_layout) {
     const layout_store = writable(initial_layout);
     let _components = [];
     let app;
-    let keyed_component_values = {};
+    let keys_per_render_id = {};
     let _rootNode;
     function set_event_specific_args(dependencies) {
         dependencies.forEach((dep) => {
@@ -42,7 +42,6 @@ export function create_components(initial_layout) {
         // make sure the state is settled before proceeding
         flush();
         app = _app;
-        store_keyed_values(_components);
         _components = components;
         inputs = new Set();
         outputs = new Set();
@@ -81,7 +80,24 @@ 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 }) {
-        let _constructor_map = preload_all_components(components, root);
+        components.forEach((c) => {
+            for (const prop in c.props) {
+                if (c.props[prop] === null) {
+                    c.props[prop] = undefined;
+                }
+            }
+        });
+        let replacement_components = [];
+        let new_components = [];
+        components.forEach((c) => {
+            if (c.key == null || !keys_per_render_id[render_id]?.includes(c.key)) {
+                new_components.push(c);
+            }
+            else {
+                replacement_components.push(c);
+            }
+        });
+        let _constructor_map = preload_all_components(new_components, root);
         _constructor_map.forEach((v, k) => {
             constructor_map.set(k, v);
         });
@@ -104,17 +120,27 @@ export function create_components(initial_layout) {
             }
         };
         add_to_current_children(current_element);
-        store_keyed_values(all_current_children);
         Object.entries(instance_map).forEach(([id, component]) => {
             let _id = Number(id);
             if (component.rendered_in === render_id) {
-                delete instance_map[_id];
-                if (_component_map.has(_id)) {
-                    _component_map.delete(_id);
+                let replacement_component = replacement_components.find((c) => c.key === component.key);
+                if (component.key != null && replacement_component !== undefined) {
+                    const instance = instance_map[component.id];
+                    for (const prop in replacement_component.props) {
+                        if (!replacement_component.props.preserved_by_key?.includes(prop)) {
+                            instance.props[prop] = replacement_component.props[prop];
+                        }
+                    }
+                }
+                else {
+                    delete instance_map[_id];
+                    if (_component_map.has(_id)) {
+                        _component_map.delete(_id);
+                    }
                 }
             }
         });
-        components.forEach((c) => {
+        new_components.forEach((c) => {
             instance_map[c.id] = c;
             _component_map.set(c.id, c);
         });
@@ -123,12 +149,17 @@ export function create_components(initial_layout) {
         }
         walk_layout(layout, root, _components.concat(components), current_element.parent).then(() => {
             layout_store.set(_rootNode);
+            keys_per_render_id[render_id] = components
+                .map((c) => c.key)
+                .filter((c) => c != null);
         });
         set_event_specific_args(dependencies);
     }
     async function walk_layout(node, root, components, parent) {
         const instance = instance_map[node.id];
-        instance.component = (await constructor_map.get(instance.component_class_id || instance.type))?.default;
+        if (!instance.component) {
+            instance.component = (await constructor_map.get(instance.component_class_id || instance.type))?.default;
+        }
         instance.parent = parent;
         if (instance.type === "dataset") {
             instance.props.component_map = get_component(instance.type, instance.component_class_id, root, components, instance.props.components).example_components;
@@ -138,10 +169,6 @@ export function create_components(initial_layout) {
         }
         instance.props.interactive = determine_interactivity(instance.id, instance.props.interactive, instance.props.value, inputs, outputs);
         instance.props.server = process_server_fn(instance.id, instance.props.server_fns, app);
-        if (instance.key != null &&
-            keyed_component_values[instance.key] !== undefined) {
-            instance.props.value = keyed_component_values[instance.key];
-        }
         _component_map.set(instance.id, instance);
         if (node.children) {
             instance.children = await Promise.all(node.children.map((v) => walk_layout(v, root, components, instance)));
@@ -178,13 +205,6 @@ export function create_components(initial_layout) {
     }
     let update_scheduled = false;
     let update_scheduled_store = writable(false);
-    function store_keyed_values(components) {
-        components.forEach((c) => {
-            if (c.key != null) {
-                keyed_component_values[c.key] = c.props.value;
-            }
-        });
-    }
     function flush() {
         layout_store.update((layout) => {
             for (let i = 0; i < pending_updates.length; i++) {

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": {
@@ -98,7 +102,8 @@
 		"runtime_error": "there is a runtime error",
 		"space_not_working": "\"Space isn't working because\" {0}",
 		"space_paused": "the space is paused",
-		"use_via_api": "Use via API"
+		"use_via_api": "Use via API",
+		"use_via_api_or_mcp": "Use via API or MCP"
 	},
 	"file": {
 		"uploading": "Uploading..."

package/dist/src/lang/es.json

@@ -88,7 +88,8 @@
 		"runtime_error": "hay un error de ejecución",
 		"space_not_working": "\"El Space no funciona porque\" {0}",
 		"space_paused": "el space está pausado",
-		"use_via_api": "Usar vía API"
+		"use_via_api": "Usar vía API",
+		"use_via_api_or_mcp": "Usar vía API o MCP"
 	},
 	"file": {
 		"uploading": "Subiendo..."

package/dist/src/lang/fr.json

@@ -89,7 +89,8 @@
 		"runtime_error": "il y a une erreur d'exécution",
 		"space_not_working": "\"Le Space ne fonctionne pas car\" {0}",
 		"space_paused": "le Space est en pause",
-		"use_via_api": "Utiliser via l'API"
+		"use_via_api": "Utiliser via API",
+		"use_via_api_or_mcp": "Utiliser via API ou MCP"
 	},
 	"file": {
 		"uploading": "Téléchargement..."

package/dist/src/lang/ja.json

@@ -87,7 +87,8 @@
 		"runtime_error": "ランタイムエラーがあります",
 		"space_not_working": "\"Spaceが動作していません。理由：\" {0}",
 		"space_paused": "Spaceが一時停止されています",
-		"use_via_api": "APIを介して使用"
+		"use_via_api": "APIを介して使用",
+		"use_via_api_or_mcp": "APIまたはMCP経由で使用"
 	},
 	"file": {
 		"uploading": "アップロード中..."

package/dist/src/lang/ko.json

@@ -87,7 +87,8 @@
 		"runtime_error": "런타임 오류가 있습니다",
 		"space_not_working": "\"Space가 작동하지 않는 이유:\" {0}",
 		"space_paused": "space가 일시 중지되었습니다",
-		"use_via_api": "API를 통해 사용"
+		"use_via_api": "API를 통해 사용",
+		"use_via_api_or_mcp": "API 또는 MCP를 통해 사용"
 	},
 	"file": {
 		"uploading": "업로드 중..."

package/dist/src/lang/lt.json

@@ -97,7 +97,8 @@
 		"runtime_error": "yra vykdymo klaida",
 		"space_not_working": "\"Erdvė neveikia, nes\" {0}",
 		"space_paused": "erdvė yra pristabdyta",
-		"use_via_api": "Naudoti per API"
+		"use_via_api": "Naudoti per API",
+		"use_via_api_or_mcp": "Naudoti per API arba MCP"
 	},
 	"file": {
 		"uploading": "Įkeliama..."

package/dist/src/lang/nb.json

@@ -87,7 +87,8 @@
 		"runtime_error": "Det er en kjøretidsfeil",
 		"space_not_working": "\"Space fungerer ikke fordi\" {0}",
 		"space_paused": "Space er pauset",
-		"use_via_api": "Bruk via API"
+		"use_via_api": "Bruk via API",
+		"use_via_api_or_mcp": "Bruk via API eller MCP"
 	},
 	"file": {
 		"uploading": "Laster opp..."

package/dist/src/lang/nl.json

@@ -97,7 +97,8 @@
 		"runtime_error": "Er is een runtime-fout",
 		"space_not_working": "\"Space werkt niet omdat\" {0}",
 		"space_paused": "De Space is gepauzeerd",
-		"use_via_api": "Gebruik via API"
+		"use_via_api": "Gebruik via API",
+		"use_via_api_or_mcp": "Gebruik via API of MCP"
 	},
 	"file": {
 		"uploading": "Uploaden..."

package/dist/src/lang/pl.json

@@ -87,7 +87,8 @@
 		"runtime_error": "Wystąpił błąd wykonania",
 		"space_not_working": "\"Space nie działa, ponieważ\" {0}",
 		"space_paused": "Space jest wstrzymany",
-		"use_via_api": "Użyj przez API"
+		"use_via_api": "Użyj przez API",
+		"use_via_api_or_mcp": "Użyj przez API lub MCP"
 	},
 	"file": {
 		"uploading": "Przesyłanie..."

package/dist/src/lang/pt-BR.json

@@ -98,6 +98,7 @@
 		"space_not_working": "\"O Space não está funcionando porque\" {0}",
 		"space_paused": "O Space está pausado",
 		"use_via_api": "Usar via API",
+		"use_via_api_or_mcp": "Usar via API ou MCP",
 		"runtime_error": "Houve um erro de execução"
 	},
 	"file": {

package/dist/src/lang/pt.json

@@ -87,7 +87,8 @@
 		"runtime_error": "Há um erro de execução",
 		"space_not_working": "\"O Space não está a funcionar porque\" {0}",
 		"space_paused": "O Space está em pausa",
-		"use_via_api": "Utilizar via API"
+		"use_via_api": "Usar via API",
+		"use_via_api_or_mcp": "Usar via API ou MCP"
 	},
 	"file": {
 		"uploading": "A carregar..."

package/dist/src/lang/ro.json

@@ -87,7 +87,8 @@
 		"runtime_error": "Există o eroare de execuție",
 		"space_not_working": "\"Space-ul nu funcționează deoarece\" {0}",
 		"space_paused": "Space-ul este în pauză",
-		"use_via_api": "Utilizați prin API"
+		"use_via_api": "Utilizați prin API",
+		"use_via_api_or_mcp": "Utilizați prin API sau MCP"
 	},
 	"file": {
 		"uploading": "Se încarcă..."

package/dist/src/lang/ru.json

@@ -87,7 +87,8 @@
 		"runtime_error": "Произошла ошибка выполнения",
 		"space_not_working": "\"Space не работает, потому что\" {0}",
 		"space_paused": "Space приостановлен",
-		"use_via_api": "Использовать через API"
+		"use_via_api": "Использовать через API",
+		"use_via_api_or_mcp": "Использовать через API или MCP"
 	},
 	"file": {
 		"uploading": "Загрузка..."

package/dist/src/lang/sv.json

@@ -87,7 +87,8 @@
 		"runtime_error": "Det finns ett körtidsfel",
 		"space_not_working": "\"Space fungerar inte eftersom\" {0}",
 		"space_paused": "Space är pausat",
-		"use_via_api": "Använd via API"
+		"use_via_api": "Använd via API",
+		"use_via_api_or_mcp": "Använd via API eller MCP"
 	},
 	"file": {
 		"uploading": "Laddar upp..."

package/dist/src/lang/ta.json

@@ -97,7 +97,8 @@
 		"runtime_error": "இயக்க நேர பிழை உள்ளது",
 		"space_not_working": "\"Space செயல்படவில்லை ஏனெனில்\" {0}",
 		"space_paused": "Space இடைநிறுத்தப்பட்டுள்ளது",
-		"use_via_api": "API மூலம் பயன்படுத்தவும்"
+		"use_via_api": "API மூலம் பயன்படுத்தவும்",
+		"use_via_api_or_mcp": "API அல்லது MCP மூலம் பயன்படுத்தவும்"
 	},
 	"file": {
 		"uploading": "பதிவேற்றுகிறது..."

package/dist/src/lang/th.json

@@ -87,7 +87,8 @@
 		"runtime_error": "เกิดข้อผิดพลาดขณะทำงาน",
 		"space_not_working": "\"Space ใช้งานไม่ได้เนื่องจาก\" {0}",
 		"space_paused": "Space ถูกหยุดชั่วคราว",
-		"use_via_api": "ใช้งานผ่าน API"
+		"use_via_api": "ใช้งานผ่าน API",
+		"use_via_api_or_mcp": "ใช้งานผ่าน API หรือ MCP"
 	},
 	"file": {
 		"uploading": "กำลังอัปโหลด..."

package/dist/src/lang/tr.json

@@ -97,7 +97,8 @@
 		"runtime_error": "Bir çalışma zamanı hatası var",
 		"space_not_working": "\"Space çalışmıyor çünkü\" {0}",
 		"space_paused": "Space duraklatıldı",
-		"use_via_api": "API üzerinden kullan"
+		"use_via_api": "API üzerinden kullan",
+		"use_via_api_or_mcp": "API veya MCP üzerinden kullan"
 	},
 	"file": {
 		"uploading": "Yükleniyor..."

package/dist/src/lang/uk.json

@@ -97,7 +97,8 @@
 		"runtime_error": "Є помилка виконання",
 		"space_not_working": "\"Space не працює, оскільки\" {0}",
 		"space_paused": "Space призупинено",
-		"use_via_api": "Використовувати через API"
+		"use_via_api": "Використовувати через API",
+		"use_via_api_or_mcp": "Використовувати через API або MCP"
 	},
 	"file": {
 		"uploading": "Завантаження..."

package/dist/src/lang/ur.json

@@ -97,7 +97,8 @@
 		"runtime_error": "رن ٹائم میں خطا ہے",
 		"space_not_working": "\"Space کام نہیں کر رہا ہے کیونکہ\" {0}",
 		"space_paused": "Space موقوف ہے",
-		"use_via_api": "API کے ذریعے استعمال کریں"
+		"use_via_api": "API کے ذریعے استعمال کریں",
+		"use_via_api_or_mcp": "API یا MCP کے ذریعے استعمال کریں"
 	},
 	"file": {
 		"uploading": "اپلوڈ ہو رہا ہے..."

package/dist/src/lang/uz.json

@@ -97,7 +97,8 @@
 		"runtime_error": "Bajarilish vaqti xatosi mavjud",
 		"space_not_working": "\"Space ishlamayapti, chunki\" {0}",
 		"space_paused": "Space to'xtatilgan",
-		"use_via_api": "API orqali foydalaning"
+		"use_via_api": "API orqali foydalaning",
+		"use_via_api_or_mcp": "API yoki MCP orqali foydalaning"
 	},
 	"file": {
 		"uploading": "Yuklanmoqda..."

package/dist/src/lang/zh-CN.json

@@ -87,7 +87,8 @@
 		"runtime_error": "存在运行时错误",
 		"space_not_working": "\"Space 无法工作，原因：\" {0}",
 		"space_paused": "Space 已暂停",
-		"use_via_api": "通过 API 使用"
+		"use_via_api": "通过 API 使用",
+		"use_via_api_or_mcp": "通过 API 或 MCP 使用"
 	},
 	"file": {
 		"uploading": "正在上传..."

package/dist/src/lang/zh-TW.json

@@ -97,7 +97,8 @@
 		"runtime_error": "有執行時錯誤",
 		"space_not_working": "\"Space 無法運作，因為\" {0}",
 		"space_paused": "Space 已暫停",
-		"use_via_api": "透過 API 使用"
+		"use_via_api": "透過 API 使用",
+		"use_via_api_or_mcp": "透過 API 或 MCP 使用"
 	},
 	"file": {
 		"uploading": "上傳中..."

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);
+}