Getting a blank page when trying to run web-ui (Svelte-JS-Error)
Hi there,
When I try to run speaches with this docker-compose.yaml-File (via docker compose up) I'm getting a blank screen and a console error.
docker-compose.yaml:
services:
speaches:
container_name: speaches
image: ghcr.io/speaches-ai/speaches:latest-cuda-12.6.3
restart: unless-stopped
ports:
- 3011:8000
volumes:
- /media/data/Docker/Containers/speeches:/home/ubuntu/.cache/huggingface/hub
runtime: nvidia
deploy:
resources:
reservations:
devices:
- driver: nvidia
count: all
capabilities: [gpu]
JS-Console-Error:
Uncaught (in promise) Error: [svelte-i18n] Cannot format a message without first setting the initial locale.
xs runtime.js:516
Nt Index.svelte:453
no svelte.js:1
Gt Index.svelte:485
connectedCallback main.ts:109
Ws main.ts:207
<anonymous> main.ts:210
[runtime.js:516:11](http://localhost:3011/node_modules/.pnpm/[email protected][email protected]/node_modules/svelte-i18n/dist/runtime.js)
Could you guys please check this? :)
Greetings
Edit: The bug does not exist in ghcr.io/speaches-ai/speaches:latest-cuda-12.4.1.
Can confirm, the bug is present in 0.9.0-rc.1 as well as 0.8.3, but absent in 0.8.2.
I have the same problem with cpu versions 0.8.3, 0.8.2, 0.8.1, 0.8.0.
Below is my docker-compose.yaml:
services:
speaches:
extends:
file: compose.yaml
service: speaches
image: ghcr.io/speaches-ai/speaches:0.8.2-cpu
build:
args:
BASE_IMAGE: ubuntu:24.04
# volumes:
# - ./hf-hub-cache:/home/ubuntu/.cache/huggingface/hub
volumes:
- hf-hub-cache:/home/ubuntu/.cache/huggingface/hub
volumes:
hf-hub-cache:
logs
speaches | INFO: 10.11.11.224:56922 - "GET /manifest.json HTTP/1.1" 404 Not Found
speaches | INFO: 10.11.11.123:35288 - "GET /manifest.json HTTP/1.1" 404 Not Found
speaches | INFO: 10.11.11.123:35304 - "GET / HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35318 - "GET /assets/index-DJ2rNx9E.js HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35304 - "GET /assets/index-rsZ55Oi2.css HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35318 - "GET /assets/svelte/svelte.js HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35318 - "GET /assets/Index-BgyqPiU2.js HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35304 - "GET /assets/Embed-DP0vgn8y.js HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35342 - "GET /assets/StreamingBar.svelte_svelte_type_style_lang-DlRzv56K.js HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35334 - "GET /assets/index-DYtg3pip.js HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35358 - "GET /assets/StreamingBar-Cgs5stVH.css HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35372 - "GET /assets/MarkdownCode-DVeJpfiO.css HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35318 - "GET /assets/IconButtonWrapper-BqcF4N5S.css HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35304 - "GET /assets/DownloadLink-CqD3Uu0l.css HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35342 - "GET /assets/Index-BJ_RfjVB.css HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35334 - "GET /assets/MarkdownCode.svelte_svelte_type_style_lang-Bl8p72Ow.js HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35358 - "GET /assets/prism-python-CeMtt1IT.js HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35304 - "GET /assets/DownloadLink.svelte_svelte_type_style_lang-C_5UIfol.js HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35372 - "GET /assets/IconButton-C_HS7fTi.js HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35318 - "GET /assets/Clear-By3xiIwg.js HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35318 - "GET /assets/ru-BgQGKwpu.js HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35318 - "GET /favicon.ico HTTP/1.1" 200 OK
speaches | INFO: 10.11.11.123:35386 - "GET /manifest.json HTTP/1.1" 404 Not Found
speaches | INFO: 10.11.11.123:35402 - "GET /assets/index-rsZ55Oi2.css HTTP/1.1" 200 OK
html content
<!doctype html>
<html
lang="en"
style="
margin: 0;
padding: 0;
min-height: 100%;
display: flex;
flex-direction: column;
"
>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta property="og:title" content="Gradio" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{url}" />
<meta property="og:description" content="Click to try out the app!" />
<meta
property="og:image"
content="https://raw.githubusercontent.com/gradio-app/gradio/main/js/_website/src/lib/assets/img/header-image.jpg"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@Gradio" />
<meta name="twitter:title" content="Gradio" />
<meta name="twitter:description" content="Click to try out the app!" />
<meta
name="twitter:image"
content="https://raw.githubusercontent.com/gradio-app/gradio/main/js/_website/src/lib/assets/img/header-image.jpg"
/>
<style>
:root {
--bg: white;
--col: #27272a;
--bg-dark: #0f0f11;
--col-dark: #f4f4f5;
}
body {
background: var(--bg);
color: var(--col);
font-family: Arial, Helvetica, sans-serif;
}
@media (prefers-color-scheme: dark) {
body {
background: var(--bg-dark);
color: var(--col-dark);
}
}
</style>
<meta property="og:url" content="https://gradio.app/" />
<meta property="og:type" content="website" />
<meta property="og:image" content="" />
<meta property="og:title" content="Speaches Playground" />
<meta
property="og:description"
content=""
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@teamGradio" />
<meta name="twitter:title" content="Speaches Playground" />
<meta
name="twitter:description"
content=""
/>
<meta name="twitter:image" content="" />
<script data-gradio-mode>
window.__gradio_mode__ = "app";
window.iFrameResizer = {
heightCalculationMethod: "taggedElement"
};
window.parent?.postMessage(
{ type: "SET_SCROLLING", enabled: false },
"*"
);
</script>
<script>window.gradio_config = {"version":"5.36.2","api_prefix":"/gradio_api","mode":"blocks","app_id":14849029540832939579,"dev_mode":false,"analytics_enabled":false,"components":[{"id":1,"type":"markdown","props":{"value":"# Speaches Playground","show_label":false,"rtl":false,"latex_delimiters":[{"left":"$$","right":"$$","display":true}],"visible":true,"elem_classes":[],"preserved_by_key":["value"],"sanitize_html":true,"line_breaks":false,"header_links":false,"show_copy_button":false,"container":false,"padding":false,"name":"markdown","_selectable":false},"skip_api":false,"component_class_id":"6a915426a8e63514cbbe4d4e11a0e046b1b14fbe7fe6e606c95cbbfa6732a067","key":null,"api_info":{"type":"string"},"api_info_as_input":{"type":"string"},"api_info_as_output":{"type":"string"},"example_inputs":"# Hello!"},{"id":2,"type":"markdown","props":{"value":"### Consider supporting the project by starring the [speaches-ai/speaches repository on GitHub](https://github.com/speaches-ai/speaches).","show_label":false,"rtl":false,"latex_delimiters":[{"left":"$$","right":"$$","display":true}],"visible":true,"elem_classes":[],"preserved_by_key":["value"],"sanitize_html":true,"line_breaks":false,"header_links":false,"show_copy_button":false,"container":false,"padding":false,"name":"markdown","_selectable":false},"skip_api":false,"component_class_id":"6a915426a8e63514cbbe4d4e11a0e046b1b14fbe7fe6e606c95cbbfa6732a067","key":null,"api_info":{"type":"string"},"api_info_as_input":{"type":"string"},"api_info_as_output":{"type":"string"},"example_inputs":"# Hello!"},{"id":3,"type":"markdown","props":{"value":"### Documentation Website: https://speaches.ai","show_label":false,"rtl":false,"latex_delimiters":[{"left":"$$","right":"$$","display":true}],"visible":true,"elem_classes":[],"preserved_by_key":["value"],"sanitize_html":true,"line_breaks":false,"header_links":false,"show_copy_button":false,"container":false,"padding":false,"name":"markdown","_selectable":false},"skip_api":false,"component_class_id":"6a915426a8e63514cbbe4d4e11a0e046b1b14fbe7fe6e606c95cbbfa6732a067","key":null,"api_info":{"type":"string"},"api_info_as_input":{"type":"string"},"api_info_as_output":{"type":"string"},"example_inputs":"# Hello!"},{"id":4,"type":"markdown","props":{"value":"### For additional details regarding the parameters, see the [API Documentation](https://speaches.ai/api)","show_label":false,"rtl":false,"latex_delimiters":[{"left":"$$","right":"$$","display":true}],"visible":true,"elem_classes":[],"preserved_by_key":["value"],"sanitize_html":true,"line_breaks":false,"header_links":false,"show_copy_button":false,"container":false,"padding":false,"name":"markdown","_selectable":false},"skip_api":false,"component_class_id":"6a915426a8e63514cbbe4d4e11a0e046b1b14fbe7fe6e606c95cbbfa6732a067","key":null,"api_info":{"type":"string"},"api_info_as_input":{"type":"string"},"api_info_as_output":{"type":"string"},"example_inputs":"# Hello!"},{"id":5,"type":"tabitem","props":{"label":"Audio Chat","visible":true,"interactive":true,"preserved_by_key":[],"name":"tab","_selectable":true},"skip_api":true,"component_class_id":"1e36163867a5f3726855e0faac60fa371b978f6e5dc6a0c640d3220cdfc10aae","key":null},{"id":6,"type":"state","props":{"time_to_live":null,"delete_callback":"\u003cfunction State.__init__.\u003clocals\u003e.\u003clambda\u003e at 0x7d387d5e09a0\u003e","name":"state","_selectable":false},"skip_api":true,"component_class_id":"e303f7f6f90c08ef7b199cb5ca4306d2f00e3273981168bcec50ca6822bba69b","key":null},{"id":7,"type":"dropdown","props":{"choices":[],"type":"value","allow_custom_value":false,"filterable":true,"label":"Chat Model","info":"For this dropdown to be populated, you need to switch to a different tab and then come back to this tab.","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"preserved_by_key":["value"],"name":"dropdown","_selectable":false},"skip_api":false,"component_class_id":"1eb3583ab2bc4c42f2eb965e4ca0730d4697891f2ede8feae49db4ba69e9293e","key":null,"api_info":{"type":"string","enum":[]},"api_info_as_input":{"type":"string","enum":[]},"api_info_as_output":{"type":"string","enum":[]},"example_inputs":null},{"id":8,"type":"checkbox","props":{"value":true,"label":"Stream","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"preserved_by_key":["value"],"name":"checkbox","_selectable":false},"skip_api":false,"component_class_id":"b04df5721a6617f5c0fb1c58cc1eaf74431c2c53c4f38b02d07e790218c8ebc0","key":null,"api_info":{"type":"boolean"},"api_info_as_input":{"type":"boolean"},"api_info_as_output":{"type":"boolean"},"example_inputs":true},{"id":11,"type":"browserstate","props":{"default_value":[],"storage_key":"_saved_conversations_10","secret":"s906HXHgQB0hpUsB","name":"browserstate","_selectable":false},"skip_api":false,"component_class_id":"18c0fdf5bcfa176643f96f02773c5f6723d0b42ddce5cee95a793845078b2558","key":null,"api_info":{"type":{},"description":"any json-serializable value"},"api_info_as_input":{"type":{},"description":"any json-serializable value"},"api_info_as_output":{"type":{},"description":"any json-serializable value"},"example_inputs":"test"},{"id":12,"type":"state","props":{"time_to_live":null,"delete_callback":"\u003cfunction State.__init__.\u003clocals\u003e.\u003clambda\u003e at 0x7d387d5e0f40\u003e","name":"state","_selectable":false},"skip_api":true,"component_class_id":"e303f7f6f90c08ef7b199cb5ca4306d2f00e3273981168bcec50ca6822bba69b","key":null},{"id":13,"type":"state","props":{"time_to_live":null,"delete_callback":"\u003cfunction State.__init__.\u003clocals\u003e.\u003clambda\u003e at 0x7d387d49fce0\u003e","name":"state","_selectable":false},"skip_api":true,"component_class_id":"e303f7f6f90c08ef7b199cb5ca4306d2f00e3273981168bcec50ca6822bba69b","key":null},{"id":14,"type":"state","props":{"time_to_live":null,"delete_callback":"\u003cfunction State.__init__.\u003clocals\u003e.\u003clambda\u003e at 0x7d387d49fd80\u003e","name":"state","_selectable":false},"skip_api":true,"component_class_id":"e303f7f6f90c08ef7b199cb5ca4306d2f00e3273981168bcec50ca6822bba69b","key":null},{"id":15,"type":"column","props":{"scale":1,"min_width":320,"variant":"default","visible":true,"show_progress":false,"preserved_by_key":[],"name":"column"},"skip_api":true,"component_class_id":"39aa67db7cc92399c3a33ebdba65a2da8aca051cbcf44ac0ddbf0e057cf14383","key":null},{"id":16,"type":"chatbot","props":{"_undoable":true,"_retryable":true,"likeable":false,"value":[],"type":"messages","label":"Chatbot","show_label":true,"container":true,"scale":1,"min_width":160,"visible":true,"elem_classes":[],"autoscroll":true,"preserved_by_key":["value"],"height":400,"resizable":false,"latex_delimiters":[{"left":"$$","right":"$$","display":true}],"rtl":false,"show_share_button":false,"show_copy_button":false,"avatar_images":[null,null],"sanitize_html":true,"render_markdown":true,"feedback_options":["Like","Dislike"],"line_breaks":true,"examples":[],"show_copy_all_button":false,"allow_file_downloads":true,"group_consecutive_messages":true,"allow_tags":false,"name":"chatbot","_selectable":false},"skip_api":false,"component_class_id":"b7ec226c94c02b89ccde3c773e39dad4c2f4e311f53c54635f7565eb300411c7","key":null,"api_info":{"$defs":{"ComponentMessage":{"properties":{"component":{"title":"Component","type":"string"},"value":{"title":"Value"},"constructor_args":{"additionalProperties":true,"title":"Constructor Args","type":"object"},"props":{"additionalProperties":true,"title":"Props","type":"object"}},"required":["component","value","constructor_args","props"],"title":"ComponentMessage","type":"object"},"FileData":{"description":"The FileData class is a subclass of the GradioModel class that represents a file object within a Gradio interface. It is used to store file data and metadata when a file is uploaded.\n\nAttributes:\n path: The server file path where the file is stored.\n url: The normalized server URL pointing to the file.\n size: The size of the file in bytes.\n orig_name: The original filename before upload.\n mime_type: The MIME type of the file.\n is_stream: Indicates whether the file is a stream.\n meta: Additional metadata used internally (should not be changed).","properties":{"path":{"title":"Path","type":"string"},"url":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Url"},"size":{"anyOf":[{"type":"integer"},{"type":"null"}],"default":null,"title":"Size"},"orig_name":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Orig Name"},"mime_type":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Mime Type"},"is_stream":{"default":false,"title":"Is Stream","type":"boolean"},"meta":{"$ref":"#/$defs/FileDataMeta"}},"required":["path"],"title":"FileData","type":"object"},"FileDataMeta":{"properties":{"_type":{"const":"gradio.FileData","title":"Type","type":"string"}},"required":["_type"],"title":"FileDataMeta","type":"object"},"FileMessage":{"properties":{"file":{"$ref":"#/$defs/FileData"},"alt_text":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Alt Text"}},"required":["file"],"title":"FileMessage","type":"object"},"Message":{"properties":{"role":{"title":"Role","type":"string"},"metadata":{"anyOf":[{"$ref":"#/$defs/MetadataDict"},{"type":"null"}],"default":null},"content":{"anyOf":[{"type":"string"},{"$ref":"#/$defs/FileMessage"},{"$ref":"#/$defs/ComponentMessage"}],"title":"Content"},"options":{"anyOf":[{"items":{"$ref":"#/$defs/OptionDict"},"type":"array"},{"type":"null"}],"default":null,"title":"Options"}},"required":["role","content"],"title":"Message","type":"object"},"MetadataDict":{"description":"A typed dictionary to represent metadata for a message in the Chatbot component. An\ninstance of this dictionary is used for the `metadata` field in a ChatMessage when\nthe chat message should be displayed as a thought.\nParameters:\n title: The title of the \"thought\" message. Required if the message is to be displayed as a thought.\n id: The ID of the message. Only used for nested thoughts. Nested thoughts can be nested by setting the parent_id to the id of the parent thought.\n parent_id: The ID of the parent message. Only used for nested thoughts.\n log: A string message to display next to the thought title in a subdued font.\n duration: The duration of the message in seconds. Appears next to the thought title in a subdued font inside a parentheses.\n status: if set to `\"pending\"`, a spinner appears next to the thought title and the accordion is initialized open. If `status` is `\"done\"`, the thought accordion is initialized closed. If `status` is not provided, the thought accordion is initialized open and no spinner is displayed.","properties":{"title":{"title":"Title","type":"string"},"id":{"anyOf":[{"type":"integer"},{"type":"string"}],"title":"Id"},"parent_id":{"anyOf":[{"type":"integer"},{"type":"string"}],"title":"Parent Id"},"log":{"title":"Log","type":"string"},"duration":{"title":"Duration","type":"number"},"status":{"enum":["pending","done"],"title":"Status","type":"string"}},"title":"MetadataDict","type":"object"},"OptionDict":{"description":"A typed dictionary to represent an option in a ChatMessage. A list of these\ndictionaries is used for the `options` field in a ChatMessage.\nParameters:\n value: The value to return when the option is selected.\n label: The text to display in the option, if different from the value.","properties":{"value":{"title":"Value","type":"string"},"label":{"title":"Label","type":"string"}},"required":["value"],"title":"OptionDict","type":"object"}},"items":{"$ref":"#/$defs/Message"},"title":"ChatbotDataMessages","type":"array","additional_description":null},"api_info_as_input":{"$defs":{"ComponentMessage":{"properties":{"component":{"title":"Component","type":"string"},"value":{"title":"Value"},"constructor_args":{"additionalProperties":true,"title":"Constructor Args","type":"object"},"props":{"additionalProperties":true,"title":"Props","type":"object"}},"required":["component","value","constructor_args","props"],"title":"ComponentMessage","type":"object"},"FileData":{"description":"The FileData class is a subclass of the GradioModel class that represents a file object within a Gradio interface. It is used to store file data and metadata when a file is uploaded.\n\nAttributes:\n path: The server file path where the file is stored.\n url: The normalized server URL pointing to the file.\n size: The size of the file in bytes.\n orig_name: The original filename before upload.\n mime_type: The MIME type of the file.\n is_stream: Indicates whether the file is a stream.\n meta: Additional metadata used internally (should not be changed).","properties":{"path":{"title":"Path","type":"string"},"url":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Url"},"size":{"anyOf":[{"type":"integer"},{"type":"null"}],"default":null,"title":"Size"},"orig_name":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Orig Name"},"mime_type":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Mime Type"},"is_stream":{"default":false,"title":"Is Stream","type":"boolean"},"meta":{"$ref":"#/$defs/FileDataMeta"}},"required":["path"],"title":"FileData","type":"object"},"FileDataMeta":{"properties":{"_type":{"const":"gradio.FileData","title":"Type","type":"string"}},"required":["_type"],"title":"FileDataMeta","type":"object"},"FileMessage":{"properties":{"file":{"$ref":"#/$defs/FileData"},"alt_text":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Alt Text"}},"required":["file"],"title":"FileMessage","type":"object"},"Message":{"properties":{"role":{"title":"Role","type":"string"},"metadata":{"anyOf":[{"$ref":"#/$defs/MetadataDict"},{"type":"null"}],"default":null},"content":{"anyOf":[{"type":"string"},{"$ref":"#/$defs/FileMessage"},{"$ref":"#/$defs/ComponentMessage"}],"title":"Content"},"options":{"anyOf":[{"items":{"$ref":"#/$defs/OptionDict"},"type":"array"},{"type":"null"}],"default":null,"title":"Options"}},"required":["role","content"],"title":"Message","type":"object"},"MetadataDict":{"description":"A typed dictionary to represent metadata for a message in the Chatbot component. An\ninstance of this dictionary is used for the `metadata` field in a ChatMessage when\nthe chat message should be displayed as a thought.\nParameters:\n title: The title of the \"thought\" message. Required if the message is to be displayed as a thought.\n id: The ID of the message. Only used for nested thoughts. Nested thoughts can be nested by setting the parent_id to the id of the parent thought.\n parent_id: The ID of the parent message. Only used for nested thoughts.\n log: A string message to display next to the thought title in a subdued font.\n duration: The duration of the message in seconds. Appears next to the thought title in a subdued font inside a parentheses.\n status: if set to `\"pending\"`, a spinner appears next to the thought title and the accordion is initialized open. If `status` is `\"done\"`, the thought accordion is initialized closed. If `status` is not provided, the thought accordion is initialized open and no spinner is displayed.","properties":{"title":{"title":"Title","type":"string"},"id":{"anyOf":[{"type":"integer"},{"type":"string"}],"title":"Id"},"parent_id":{"anyOf":[{"type":"integer"},{"type":"string"}],"title":"Parent Id"},"log":{"title":"Log","type":"string"},"duration":{"title":"Duration","type":"number"},"status":{"enum":["pending","done"],"title":"Status","type":"string"}},"title":"MetadataDict","type":"object"},"OptionDict":{"description":"A typed dictionary to represent an option in a ChatMessage. A list of these\ndictionaries is used for the `options` field in a ChatMessage.\nParameters:\n value: The value to return when the option is selected.\n label: The text to display in the option, if different from the value.","properties":{"value":{"title":"Value","type":"string"},"label":{"title":"Label","type":"string"}},"required":["value"],"title":"OptionDict","type":"object"}},"items":{"$ref":"#/$defs/Message"},"title":"ChatbotDataMessages","type":"array","additional_description":null},"api_info_as_output":{"$defs":{"ComponentMessage":{"properties":{"component":{"title":"Component","type":"string"},"value":{"title":"Value"},"constructor_args":{"additionalProperties":true,"title":"Constructor Args","type":"object"},"props":{"additionalProperties":true,"title":"Props","type":"object"}},"required":["component","value","constructor_args","props"],"title":"ComponentMessage","type":"object"},"FileData":{"description":"The FileData class is a subclass of the GradioModel class that represents a file object within a Gradio interface. It is used to store file data and metadata when a file is uploaded.\n\nAttributes:\n path: The server file path where the file is stored.\n url: The normalized server URL pointing to the file.\n size: The size of the file in bytes.\n orig_name: The original filename before upload.\n mime_type: The MIME type of the file.\n is_stream: Indicates whether the file is a stream.\n meta: Additional metadata used internally (should not be changed).","properties":{"path":{"title":"Path","type":"string"},"url":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Url"},"size":{"anyOf":[{"type":"integer"},{"type":"null"}],"default":null,"title":"Size"},"orig_name":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Orig Name"},"mime_type":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Mime Type"},"is_stream":{"default":false,"title":"Is Stream","type":"boolean"},"meta":{"$ref":"#/$defs/FileDataMeta"}},"required":["path"],"title":"FileData","type":"object"},"FileDataMeta":{"properties":{"_type":{"const":"gradio.FileData","title":"Type","type":"string"}},"required":["_type"],"title":"FileDataMeta","type":"object"},"FileMessage":{"properties":{"file":{"$ref":"#/$defs/FileData"},"alt_text":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Alt Text"}},"required":["file"],"title":"FileMessage","type":"object"},"Message":{"properties":{"role":{"title":"Role","type":"string"},"metadata":{"anyOf":[{"$ref":"#/$defs/MetadataDict"},{"type":"null"}],"default":null},"content":{"anyOf":[{"type":"string"},{"$ref":"#/$defs/FileMessage"},{"$ref":"#/$defs/ComponentMessage"}],"title":"Content"},"options":{"anyOf":[{"items":{"$ref":"#/$defs/OptionDict"},"type":"array"},{"type":"null"}],"default":null,"title":"Options"}},"required":["role","content"],"title":"Message","type":"object"},"MetadataDict":{"description":"A typed dictionary to represent metadata for a message in the Chatbot component. An\ninstance of this dictionary is used for the `metadata` field in a ChatMessage when\nthe chat message should be displayed as a thought.\nParameters:\n title: The title of the \"thought\" message. Required if the message is to be displayed as a thought.\n id: The ID of the message. Only used for nested thoughts. Nested thoughts can be nested by setting the parent_id to the id of the parent thought.\n parent_id: The ID of the parent message. Only used for nested thoughts.\n log: A string message to display next to the thought title in a subdued font.\n duration: The duration of the message in seconds. Appears next to the thought title in a subdued font inside a parentheses.\n status: if set to `\"pending\"`, a spinner appears next to the thought title and the accordion is initialized open. If `status` is `\"done\"`, the thought accordion is initialized closed. If `status` is not provided, the thought accordion is initialized open and no spinner is displayed.","properties":{"title":{"title":"Title","type":"string"},"id":{"anyOf":[{"type":"integer"},{"type":"string"}],"title":"Id"},"parent_id":{"anyOf":[{"type":"integer"},{"type":"string"}],"title":"Parent Id"},"log":{"title":"Log","type":"string"},"duration":{"title":"Duration","type":"number"},"status":{"enum":["pending","done"],"title":"Status","type":"string"}},"title":"MetadataDict","type":"object"},"OptionDict":{"description":"A typed dictionary to represent an option in a ChatMessage. A list of these\ndictionaries is used for the `options` field in a ChatMessage.\nParameters:\n value: The value to return when the option is selected.\n label: The text to display in the option, if different from the value.","properties":{"value":{"title":"Value","type":"string"},"label":{"title":"Label","type":"string"}},"required":["value"],"title":"OptionDict","type":"object"}},"items":{"$ref":"#/$defs/Message"},"title":"ChatbotDataMessages","type":"array","additional_description":null},"example_inputs":[{"role":"user","metadata":null,"content":"Hello!","options":null},{"role":"assistant","metadata":null,"content":"How can I help you?","options":null}]},{"id":17,"type":"group","props":{"visible":true,"preserved_by_key":[],"name":"group"},"skip_api":true,"component_class_id":"188e18cb95afdcffe81f11fd6a238f41b067a14e7f407daf90d862c6e01de45f","key":null},{"id":18,"type":"row","props":{"variant":"default","visible":true,"equal_height":false,"show_progress":false,"preserved_by_key":[],"name":"row"},"skip_api":true,"component_class_id":"c982a43f8c102b88467a1a47b9e28e26e7418985cdc995ead36dcc837b7473dd","key":null},{"id":9,"type":"multimodaltextbox","props":{"sources":["microphone","upload"],"file_count":"multiple","lines":1,"max_lines":20,"placeholder":"Enter message or upload file...","show_label":false,"container":true,"min_width":160,"interactive":true,"visible":true,"autofocus":false,"autoscroll":true,"elem_classes":[],"preserved_by_key":["value"],"rtl":false,"submit_btn":true,"stop_btn":false,"max_plain_text_length":1000,"name":"multimodaltextbox","_selectable":false},"skip_api":false,"component_class_id":"7bed37bdbbb697576107da0522b4488cf8ae394a60b04dc2350fc40ccc7f4bf4","key":null,"api_info":{"$defs":{"FileData":{"description":"The FileData class is a subclass of the GradioModel class that represents a file object within a Gradio interface. It is used to store file data and metadata when a file is uploaded.\n\nAttributes:\n path: The server file path where the file is stored.\n url: The normalized server URL pointing to the file.\n size: The size of the file in bytes.\n orig_name: The original filename before upload.\n mime_type: The MIME type of the file.\n is_stream: Indicates whether the file is a stream.\n meta: Additional metadata used internally (should not be changed).","properties":{"path":{"title":"Path","type":"string"},"url":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Url"},"size":{"anyOf":[{"type":"integer"},{"type":"null"}],"default":null,"title":"Size"},"orig_name":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Orig Name"},"mime_type":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Mime Type"},"is_stream":{"default":false,"title":"Is Stream","type":"boolean"},"meta":{"$ref":"#/$defs/FileDataMeta"}},"required":["path"],"title":"FileData","type":"object"},"FileDataMeta":{"properties":{"_type":{"const":"gradio.FileData","title":"Type","type":"string"}},"required":["_type"],"title":"FileDataMeta","type":"object"}},"properties":{"text":{"title":"Text","type":"string"},"files":{"items":{"$ref":"#/$defs/FileData"},"title":"Files","type":"array"}},"required":["text"],"title":"MultimodalData","type":"object","additional_description":null},"api_info_as_input":{"$defs":{"FileData":{"description":"The FileData class is a subclass of the GradioModel class that represents a file object within a Gradio interface. It is used to store file data and metadata when a file is uploaded.\n\nAttributes:\n path: The server file path where the file is stored.\n url: The normalized server URL pointing to the file.\n size: The size of the file in bytes.\n orig_name: The original filename before upload.\n mime_type: The MIME type of the file.\n is_stream: Indicates whether the file is a stream.\n meta: Additional metadata used internally (should not be changed).","properties":{"path":{"title":"Path","type":"string"},"url":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Url"},"size":{"anyOf":[{"type":"integer"},{"type":"null"}],"default":null,"title":"Size"},"orig_name":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Orig Name"},"mime_type":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Mime Type"},"is_stream":{"default":false,"title":"Is Stream","type":"boolean"},"meta":{"$ref":"#/$defs/FileDataMeta"}},"required":["path"],"title":"FileData","type":"object"},"FileDataMeta":{"properties":{"_type":{"const":"gradio.FileData","title":"Type","type":"string"}},"required":["_type"],"title":"FileDataMeta","type":"object"}},"properties":{"text":{"title":"Text","type":"string"},"files":{"items":{"$ref":"#/$defs/FileData"},"title":"Files","type":"array"}},"required":["text"],"title":"MultimodalData","type":"object","additional_description":null},"api_info_as_output":{"$defs":{"FileData":{"description":"The FileData class is a subclass of the GradioModel class that represents a file object within a Gradio interface. It is used to store file data and metadata when a file is uploaded.\n\nAttributes:\n path: The server file path where the file is stored.\n url: The normalized server URL pointing to the file.\n size: The size of the file in bytes.\n orig_name: The original filename before upload.\n mime_type: The MIME type of the file.\n is_stream: Indicates whether the file is a stream.\n meta: Additional metadata used internally (should not be changed).","properties":{"path":{"title":"Path","type":"string"},"url":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Url"},"size":{"anyOf":[{"type":"integer"},{"type":"null"}],"default":null,"title":"Size"},"orig_name":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Orig Name"},"mime_type":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Mime Type"},"is_stream":{"default":false,"title":"Is Stream","type":"boolean"},"meta":{"$ref":"#/$defs/FileDataMeta"}},"required":["path"],"title":"FileData","type":"object"},"FileDataMeta":{"properties":{"_type":{"const":"gradio.FileData","title":"Type","type":"string"}},"required":["_type"],"title":"FileDataMeta","type":"object"}},"properties":{"text":{"title":"Text","type":"string"},"files":{"items":{"$ref":"#/$defs/FileData"},"title":"Files","type":"array"}},"required":["text"],"title":"MultimodalData","type":"object","additional_description":null},"example_inputs":{"text":"Describe this image","files":[{"path":"https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png","meta":{"_type":"gradio.FileData"},"orig_name":"bus.png","url":"https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"}]}},{"id":19,"type":"form","props":{"scale":1,"min_width":160,"preserved_by_key":[],"name":"form"},"skip_api":true,"component_class_id":"c593301863472c86a00926023772c7dabe9fb2d912479b8f8c82cfbb5d8d8dea","key":null},{"id":20,"type":"button","props":{"value":"Fake API","variant":"secondary","size":"lg","visible":false,"interactive":true,"elem_classes":[],"preserved_by_key":["value"],"name":"button","_selectable":false},"skip_api":true,"component_class_id":"19a5ee29375a3ed8fbd54d5090d5b09b967bbce762dbb988b82d910237e2e9d1","key":null},{"id":21,"type":"json","props":{"label":"Response","show_label":true,"container":true,"min_width":160,"visible":false,"elem_classes":[],"preserved_by_key":["value"],"open":false,"show_indices":false,"max_height":500,"name":"json","_selectable":false},"skip_api":false,"component_class_id":"3fea3c92124711af055c1729f0d4d3ccbc62060a83edab38fc934ae6714f7226","key":null,"api_info":{"type":{},"description":"any valid json"},"api_info_as_input":{"type":{},"description":"any valid json"},"api_info_as_output":{"type":{},"description":"any valid json"},"example_inputs":{"foo":"bar"}},{"id":22,"type":"state","props":{"time_to_live":null,"delete_callback":"\u003cfunction State.__init__.\u003clocals\u003e.\u003clambda\u003e at 0x7d387d4fc040\u003e","name":"state","_selectable":false},"skip_api":true,"component_class_id":"e303f7f6f90c08ef7b199cb5ca4306d2f00e3273981168bcec50ca6822bba69b","key":null},{"id":23,"type":"state","props":{"time_to_live":null,"delete_callback":"\u003cfunction State.__init__.\u003clocals\u003e.\u003clambda\u003e at 0x7d387d4fc0e0\u003e","name":"state","_selectable":false},"skip_api":true,"component_class_id":"e303f7f6f90c08ef7b199cb5ca4306d2f00e3273981168bcec50ca6822bba69b","key":null},{"id":24,"type":"form","props":{"scale":0,"min_width":0,"preserved_by_key":[],"name":"form"},"skip_api":true,"component_class_id":"c593301863472c86a00926023772c7dabe9fb2d912479b8f8c82cfbb5d8d8dea","key":null},{"id":25,"type":"form","props":{"scale":0,"min_width":0,"preserved_by_key":[],"name":"form"},"skip_api":true,"component_class_id":"c593301863472c86a00926023772c7dabe9fb2d912479b8f8c82cfbb5d8d8dea","key":null},{"id":26,"type":"tabitem","props":{"label":"Speech-to-Text","visible":true,"interactive":true,"preserved_by_key":[],"name":"tab","_selectable":true},"skip_api":true,"component_class_id":"1e36163867a5f3726855e0faac60fa371b978f6e5dc6a0c640d3220cdfc10aae","key":null},{"id":27,"type":"audio","props":{"streamable":false,"sources":["upload","microphone"],"type":"filepath","show_label":true,"container":true,"min_width":160,"visible":true,"streaming":false,"elem_classes":[],"preserved_by_key":["value"],"autoplay":false,"show_share_button":false,"editable":true,"waveform_options":{"waveform_color":null,"waveform_progress_color":null,"trim_region_color":null,"show_recording_waveform":true,"show_controls":false,"skip_length":5,"sample_rate":44100},"loop":false,"recording":false,"name":"audio","_selectable":false},"skip_api":false,"component_class_id":"3421b15df65e6ca607890536c0c3c922cc2f7fb9834bc9910360df0f499c7957","key":null,"api_info":{"$defs":{"FileDataMeta":{"properties":{"_type":{"const":"gradio.FileData","title":"Type","type":"string"}},"required":["_type"],"title":"FileDataMeta","type":"object"}},"properties":{"path":{"title":"Path","type":"string"},"url":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Url"},"size":{"anyOf":[{"type":"integer"},{"type":"null"}],"default":null,"title":"Size"},"orig_name":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Orig Name"},"mime_type":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Mime Type"},"is_stream":{"default":false,"title":"Is Stream","type":"boolean"},"meta":{"$ref":"#/$defs/FileDataMeta"}},"required":["path"],"title":"FileData","type":"object","additional_description":"The FileData class is a subclass of the GradioModel class that represents a file object within a Gradio interface. It is used to store file data and metadata when a file is uploaded.\n\nAttributes:\n path: The server file path where the file is stored.\n url: The normalized server URL pointing to the file.\n size: The size of the file in bytes.\n orig_name: The original filename before upload.\n mime_type: The MIME type of the file.\n is_stream: Indicates whether the file is a stream.\n meta: Additional metadata used internally (should not be changed)."},"api_info_as_input":{"$defs":{"FileDataMeta":{"properties":{"_type":{"const":"gradio.FileData","title":"Type","type":"string"}},"required":["_type"],"title":"FileDataMeta","type":"object"}},"properties":{"path":{"title":"Path","type":"string"},"url":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Url"},"size":{"anyOf":[{"type":"integer"},{"type":"null"}],"default":null,"title":"Size"},"orig_name":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Orig Name"},"mime_type":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Mime Type"},"is_stream":{"default":false,"title":"Is Stream","type":"boolean"},"meta":{"$ref":"#/$defs/FileDataMeta"}},"required":["path"],"title":"FileData","type":"object","additional_description":"The FileData class is a subclass of the GradioModel class that represents a file object within a Gradio interface. It is used to store file data and metadata when a file is uploaded.\n\nAttributes:\n path: The server file path where the file is stored.\n url: The normalized server URL pointing to the file.\n size: The size of the file in bytes.\n orig_name: The original filename before upload.\n mime_type: The MIME type of the file.\n is_stream: Indicates whether the file is a stream.\n meta: Additional metadata used internally (should not be changed)."},"api_info_as_output":{"$defs":{"FileDataMeta":{"properties":{"_type":{"const":"gradio.FileData","title":"Type","type":"string"}},"required":["_type"],"title":"FileDataMeta","type":"object"}},"properties":{"path":{"title":"Path","type":"string"},"url":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Url"},"size":{"anyOf":[{"type":"integer"},{"type":"null"}],"default":null,"title":"Size"},"orig_name":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Orig Name"},"mime_type":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Mime Type"},"is_stream":{"default":false,"title":"Is Stream","type":"boolean"},"meta":{"$ref":"#/$defs/FileDataMeta"}},"required":["path"],"title":"FileData","type":"object","additional_description":"The FileData class is a subclass of the GradioModel class that represents a file object within a Gradio interface. It is used to store file data and metadata when a file is uploaded.\n\nAttributes:\n path: The server file path where the file is stored.\n url: The normalized server URL pointing to the file.\n size: The size of the file in bytes.\n orig_name: The original filename before upload.\n mime_type: The MIME type of the file.\n is_stream: Indicates whether the file is a stream.\n meta: Additional metadata used internally (should not be changed)."},"example_inputs":{"path":"https://github.com/gradio-app/gradio/raw/main/test/test_files/audio_sample.wav","meta":{"_type":"gradio.FileData"},"orig_name":"audio_sample.wav","url":"https://github.com/gradio-app/gradio/raw/main/test/test_files/audio_sample.wav"}},{"id":28,"type":"dropdown","props":{"choices":[],"type":"value","allow_custom_value":false,"filterable":true,"label":"Model","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"preserved_by_key":["value"],"name":"dropdown","_selectable":false},"skip_api":false,"component_class_id":"1eb3583ab2bc4c42f2eb965e4ca0730d4697891f2ede8feae49db4ba69e9293e","key":null,"api_info":{"type":"string","enum":[]},"api_info_as_input":{"type":"string","enum":[]},"api_info_as_output":{"type":"string","enum":[]},"example_inputs":null},{"id":29,"type":"dropdown","props":{"choices":[["transcribe","transcribe"],["translate","translate"]],"value":"transcribe","type":"value","allow_custom_value":false,"filterable":true,"label":"Task","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"preserved_by_key":["value"],"name":"dropdown","_selectable":false},"skip_api":false,"component_class_id":"1eb3583ab2bc4c42f2eb965e4ca0730d4697891f2ede8feae49db4ba69e9293e","key":null,"api_info":{"type":"string","enum":["transcribe","translate"]},"api_info_as_input":{"type":"string","enum":["transcribe","translate"]},"api_info_as_output":{"type":"string","enum":["transcribe","translate"]},"example_inputs":"transcribe"},{"id":30,"type":"slider","props":{"minimum":0.0,"maximum":1.0,"value":0.0,"step":0.1,"label":"Temperature","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"preserved_by_key":["value"],"show_reset_button":true,"name":"slider","_selectable":false},"skip_api":false,"component_class_id":"e98da04ac550b2ad020a9e213612e53225a9e943d3ce46e3109b296076c61ac3","key":null,"api_info":{"type":"number","description":"numeric value between 0.0 and 1.0"},"api_info_as_input":{"type":"number","description":"numeric value between 0.0 and 1.0"},"api_info_as_output":{"type":"number","description":"numeric value between 0.0 and 1.0"},"example_inputs":0.0},{"id":31,"type":"checkbox","props":{"value":true,"label":"Stream","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"preserved_by_key":["value"],"name":"checkbox","_selectable":false},"skip_api":false,"component_class_id":"b04df5721a6617f5c0fb1c58cc1eaf74431c2c53c4f38b02d07e790218c8ebc0","key":null,"api_info":{"type":"boolean"},"api_info_as_input":{"type":"boolean"},"api_info_as_output":{"type":"boolean"},"example_inputs":true},{"id":32,"type":"button","props":{"value":"Generate","variant":"secondary","size":"lg","visible":true,"interactive":true,"elem_classes":[],"preserved_by_key":["value"],"name":"button","_selectable":false},"skip_api":true,"component_class_id":"19a5ee29375a3ed8fbd54d5090d5b09b967bbce762dbb988b82d910237e2e9d1","key":null},{"id":33,"type":"textbox","props":{"type":"text","lines":1,"show_label":true,"container":true,"min_width":160,"visible":true,"autofocus":false,"autoscroll":true,"elem_classes":[],"preserved_by_key":["value"],"rtl":false,"show_copy_button":false,"submit_btn":false,"stop_btn":false,"name":"textbox","_selectable":false},"skip_api":false,"component_class_id":"0f14a55320600be09227d1f550a400611ad59b12952e1b4bf7f73d3825512c43","key":null,"api_info":{"type":"string"},"api_info_as_input":{"type":"string"},"api_info_as_output":{"type":"string"},"example_inputs":"Hello!!"},{"id":34,"type":"form","props":{"scale":0,"min_width":0,"preserved_by_key":[],"name":"form"},"skip_api":true,"component_class_id":"c593301863472c86a00926023772c7dabe9fb2d912479b8f8c82cfbb5d8d8dea","key":null},{"id":35,"type":"form","props":{"scale":0,"min_width":0,"preserved_by_key":[],"name":"form"},"skip_api":true,"component_class_id":"c593301863472c86a00926023772c7dabe9fb2d912479b8f8c82cfbb5d8d8dea","key":null},{"id":36,"type":"tabitem","props":{"label":"Text-to-Speech","visible":true,"interactive":true,"preserved_by_key":[],"name":"tab","_selectable":true},"skip_api":true,"component_class_id":"1e36163867a5f3726855e0faac60fa371b978f6e5dc6a0c640d3220cdfc10aae","key":null},{"id":37,"type":"textbox","props":{"value":"A rainbow is an optical phenomenon caused by refraction, internal reflection and dispersion of light in water droplets resulting in a continuous spectrum of light appearing in the sky.","type":"text","lines":3,"label":"Input Text","show_label":true,"container":true,"min_width":160,"visible":true,"autofocus":false,"autoscroll":true,"elem_classes":[],"preserved_by_key":["value"],"rtl":false,"show_copy_button":false,"submit_btn":false,"stop_btn":false,"name":"textbox","_selectable":false},"skip_api":false,"component_class_id":"0f14a55320600be09227d1f550a400611ad59b12952e1b4bf7f73d3825512c43","key":null,"api_info":{"type":"string"},"api_info_as_input":{"type":"string"},"api_info_as_output":{"type":"string"},"example_inputs":"Hello!!"},{"id":38,"type":"dropdown","props":{"choices":[],"type":"value","allow_custom_value":false,"filterable":true,"label":"Model","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"preserved_by_key":["value"],"name":"dropdown","_selectable":false},"skip_api":false,"component_class_id":"1eb3583ab2bc4c42f2eb965e4ca0730d4697891f2ede8feae49db4ba69e9293e","key":null,"api_info":{"type":"string","enum":[]},"api_info_as_input":{"type":"string","enum":[]},"api_info_as_output":{"type":"string","enum":[]},"example_inputs":null},{"id":39,"type":"dropdown","props":{"choices":[],"type":"value","allow_custom_value":false,"filterable":true,"label":"Voice","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"preserved_by_key":["value"],"name":"dropdown","_selectable":false},"skip_api":false,"component_class_id":"1eb3583ab2bc4c42f2eb965e4ca0730d4697891f2ede8feae49db4ba69e9293e","key":null,"api_info":{"type":"string","enum":[]},"api_info_as_input":{"type":"string","enum":[]},"api_info_as_output":{"type":"string","enum":[]},"example_inputs":null},{"id":40,"type":"dropdown","props":{"choices":[["mp3","mp3"],["flac","flac"],["wav","wav"],["pcm","pcm"]],"value":"wav","type":"value","allow_custom_value":false,"filterable":true,"label":"Response Format","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"preserved_by_key":["value"],"name":"dropdown","_selectable":false},"skip_api":false,"component_class_id":"1eb3583ab2bc4c42f2eb965e4ca0730d4697891f2ede8feae49db4ba69e9293e","key":null,"api_info":{"type":"string","enum":["mp3","flac","wav","pcm"]},"api_info_as_input":{"type":"string","enum":["mp3","flac","wav","pcm"]},"api_info_as_output":{"type":"string","enum":["mp3","flac","wav","pcm"]},"example_inputs":"mp3"},{"id":41,"type":"slider","props":{"minimum":0.25,"maximum":4.0,"value":1.0,"step":0.05,"label":"Speed","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"preserved_by_key":["value"],"show_reset_button":true,"name":"slider","_selectable":false},"skip_api":false,"component_class_id":"e98da04ac550b2ad020a9e213612e53225a9e943d3ce46e3109b296076c61ac3","key":null,"api_info":{"type":"number","description":"numeric value between 0.25 and 4.0"},"api_info_as_input":{"type":"number","description":"numeric value between 0.25 and 4.0"},"api_info_as_output":{"type":"number","description":"numeric value between 0.25 and 4.0"},"example_inputs":0.25},{"id":42,"type":"number","props":{"label":"Desired Sample Rate","info":"\nSetting this will resample the generated audio to the desired sample rate.\nYou may want to set this if you are going to use \u0027rhasspy/piper-voices\u0027 with voices of different qualities but want to keep the same sample rate.\nDefault: None (No resampling)\n","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"preserved_by_key":["value"],"minimum":8000,"maximum":48000,"step":1,"name":"number","_selectable":false},"skip_api":false,"component_class_id":"773c780f54bb3155c530518f81daf7fb815bb157d78086135f776d26bf8b8467","key":null,"api_info":{"type":"number"},"api_info_as_input":{"type":"number"},"api_info_as_output":{"type":"number"},"example_inputs":3},{"id":43,"type":"button","props":{"value":"Generate Speech","variant":"secondary","size":"lg","visible":true,"interactive":true,"elem_classes":[],"preserved_by_key":["value"],"name":"button","_selectable":false},"skip_api":true,"component_class_id":"19a5ee29375a3ed8fbd54d5090d5b09b967bbce762dbb988b82d910237e2e9d1","key":null},{"id":44,"type":"audio","props":{"streamable":false,"sources":["upload","microphone"],"type":"filepath","show_label":true,"container":true,"min_width":160,"visible":true,"streaming":false,"elem_classes":[],"preserved_by_key":["value"],"autoplay":false,"show_share_button":false,"editable":true,"waveform_options":{"waveform_color":null,"waveform_progress_color":null,"trim_region_color":null,"show_recording_waveform":true,"show_controls":false,"skip_length":5,"sample_rate":44100},"loop":false,"recording":false,"name":"audio","_selectable":false},"skip_api":false,"component_class_id":"3421b15df65e6ca607890536c0c3c922cc2f7fb9834bc9910360df0f499c7957","key":null,"api_info":{"$defs":{"FileDataMeta":{"properties":{"_type":{"const":"gradio.FileData","title":"Type","type":"string"}},"required":["_type"],"title":"FileDataMeta","type":"object"}},"properties":{"path":{"title":"Path","type":"string"},"url":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Url"},"size":{"anyOf":[{"type":"integer"},{"type":"null"}],"default":null,"title":"Size"},"orig_name":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Orig Name"},"mime_type":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Mime Type"},"is_stream":{"default":false,"title":"Is Stream","type":"boolean"},"meta":{"$ref":"#/$defs/FileDataMeta"}},"required":["path"],"title":"FileData","type":"object","additional_description":"The FileData class is a subclass of the GradioModel class that represents a file object within a Gradio interface. It is used to store file data and metadata when a file is uploaded.\n\nAttributes:\n path: The server file path where the file is stored.\n url: The normalized server URL pointing to the file.\n size: The size of the file in bytes.\n orig_name: The original filename before upload.\n mime_type: The MIME type of the file.\n is_stream: Indicates whether the file is a stream.\n meta: Additional metadata used internally (should not be changed)."},"api_info_as_input":{"$defs":{"FileDataMeta":{"properties":{"_type":{"const":"gradio.FileData","title":"Type","type":"string"}},"required":["_type"],"title":"FileDataMeta","type":"object"}},"properties":{"path":{"title":"Path","type":"string"},"url":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Url"},"size":{"anyOf":[{"type":"integer"},{"type":"null"}],"default":null,"title":"Size"},"orig_name":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Orig Name"},"mime_type":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Mime Type"},"is_stream":{"default":false,"title":"Is Stream","type":"boolean"},"meta":{"$ref":"#/$defs/FileDataMeta"}},"required":["path"],"title":"FileData","type":"object","additional_description":"The FileData class is a subclass of the GradioModel class that represents a file object within a Gradio interface. It is used to store file data and metadata when a file is uploaded.\n\nAttributes:\n path: The server file path where the file is stored.\n url: The normalized server URL pointing to the file.\n size: The size of the file in bytes.\n orig_name: The original filename before upload.\n mime_type: The MIME type of the file.\n is_stream: Indicates whether the file is a stream.\n meta: Additional metadata used internally (should not be changed)."},"api_info_as_output":{"$defs":{"FileDataMeta":{"properties":{"_type":{"const":"gradio.FileData","title":"Type","type":"string"}},"required":["_type"],"title":"FileDataMeta","type":"object"}},"properties":{"path":{"title":"Path","type":"string"},"url":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Url"},"size":{"anyOf":[{"type":"integer"},{"type":"null"}],"default":null,"title":"Size"},"orig_name":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Orig Name"},"mime_type":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Mime Type"},"is_stream":{"default":false,"title":"Is Stream","type":"boolean"},"meta":{"$ref":"#/$defs/FileDataMeta"}},"required":["path"],"title":"FileData","type":"object","additional_description":"The FileData class is a subclass of the GradioModel class that represents a file object within a Gradio interface. It is used to store file data and metadata when a file is uploaded.\n\nAttributes:\n path: The server file path where the file is stored.\n url: The normalized server URL pointing to the file.\n size: The size of the file in bytes.\n orig_name: The original filename before upload.\n mime_type: The MIME type of the file.\n is_stream: Indicates whether the file is a stream.\n meta: Additional metadata used internally (should not be changed)."},"example_inputs":{"path":"https://github.com/gradio-app/gradio/raw/main/test/test_files/audio_sample.wav","meta":{"_type":"gradio.FileData"},"orig_name":"audio_sample.wav","url":"https://github.com/gradio-app/gradio/raw/main/test/test_files/audio_sample.wav"}},{"id":45,"type":"form","props":{"scale":0,"min_width":0,"preserved_by_key":[],"name":"form"},"skip_api":true,"component_class_id":"c593301863472c86a00926023772c7dabe9fb2d912479b8f8c82cfbb5d8d8dea","key":null},{"id":46,"type":"tabs","props":{"visible":true,"preserved_by_key":[],"name":"tabs"},"skip_api":true,"component_class_id":"35cd63a75bce626c66e24c46dfb579197717c596782d14cef85fb22af21e4e32","key":null}],"css":"","connect_heartbeat":true,"js":"","head":"","title":"Speaches Playground","space_id":null,"enable_queue":true,"show_error":true,"show_api":true,"is_colab":false,"max_file_size":null,"stylesheets":["https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600\u0026display=swap"],"theme":"default","protocol":"sse_v3","body_css":{"body_background_fill":"white","body_text_color":"#27272a","body_background_fill_dark":"#0f0f11","body_text_color_dark":"#f4f4f5"},"fill_height":false,"fill_width":false,"theme_hash":"63194d3741d384f9f85db890247b6c0ef9e7abac0f297f40a15c59fe4baba916","pwa":false,"pages":[["","Home"]],"page":{"":{"layout":{"id":0,"children":[{"id":1},{"id":2},{"id":3},{"id":4},{"id":46,"children":[{"id":5,"children":[{"id":6},{"id":25,"children":[{"id":7},{"id":8}]},{"id":24,"children":[{"id":11}]},{"id":12},{"id":13},{"id":14},{"id":15,"children":[{"id":16},{"id":17,"children":[{"id":18,"children":[{"id":19,"children":[{"id":9}]}]}]},{"id":20},{"id":21},{"id":22},{"id":23}]}]},{"id":26,"children":[{"id":27},{"id":34,"children":[{"id":28},{"id":29},{"id":30},{"id":31}]},{"id":32},{"id":35,"children":[{"id":33}]}]},{"id":36,"children":[{"id":45,"children":[{"id":37},{"id":38},{"id":39},{"id":40},{"id":41},{"id":42}]},{"id":43},{"id":44}]}]}]},"components":[1,2,3,4,5,6,7,8,11,12,13,14,15,16,17,18,9,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46],"dependencies":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39]}},"mcp_server":false,"i18n_translations":null,"dependencies":[{"id":0,"targets":[[9,"submit"]],"inputs":[9],"outputs":[9,13],"backend_fn":true,"js":null,"queue":false,"api_name":"_clear_and_save_textbox","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":1,"targets":[[null,"then"]],"inputs":[13,16],"outputs":[16],"backend_fn":true,"js":null,"queue":false,"api_name":"_append_message_to_history","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":0,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":2,"targets":[[null,"then"]],"inputs":[13,22,7,8,6],"outputs":[14,16],"backend_fn":true,"js":null,"queue":true,"api_name":"_submit_fn","scroll_to_output":false,"show_progress":"minimal","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":true,"cancel":false},"collects_event_data":false,"trigger_after":1,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":3,"targets":[[null,"then"]],"inputs":[16],"outputs":[22,23],"backend_fn":true,"js":null,"queue":false,"api_name":"lambda","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":2,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":4,"targets":[[null,"then"]],"inputs":[],"outputs":[9],"backend_fn":true,"js":null,"queue":true,"api_name":"lambda_1","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":3,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":5,"targets":[[null,"then"]],"inputs":[12,22,11],"outputs":[12,11],"backend_fn":true,"js":null,"queue":false,"api_name":"_save_conversation","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":4,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":6,"targets":[[20,"click"]],"inputs":[9,22,7,8,6],"outputs":[21,22],"backend_fn":true,"js":null,"queue":true,"api_name":"chat","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":true,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":true,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":7,"targets":[[16,"retry"]],"inputs":[22],"outputs":[22,13],"backend_fn":true,"js":null,"queue":false,"api_name":"_pop_last_user_message","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":8,"targets":[[null,"then"]],"inputs":[13,22],"outputs":[16],"backend_fn":true,"js":null,"queue":false,"api_name":"_append_message_to_history_1","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":7,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":9,"targets":[[null,"then"]],"inputs":[],"outputs":[9],"backend_fn":true,"js":null,"queue":true,"api_name":"lambda_2","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":8,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":10,"targets":[[null,"then"]],"inputs":[13,22,7,8,6],"outputs":[14,16],"backend_fn":true,"js":null,"queue":true,"api_name":"_submit_fn_1","scroll_to_output":false,"show_progress":"minimal","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":true,"cancel":false},"collects_event_data":false,"trigger_after":9,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":11,"targets":[[null,"then"]],"inputs":[16],"outputs":[22,23],"backend_fn":true,"js":null,"queue":false,"api_name":"lambda_3","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":10,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":12,"targets":[[null,"then"]],"inputs":[],"outputs":[9],"backend_fn":true,"js":null,"queue":true,"api_name":"lambda_4","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":11,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":13,"targets":[[null,"then"]],"inputs":[12,22,11],"outputs":[12,11],"backend_fn":true,"js":null,"queue":false,"api_name":"_save_conversation_1","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":12,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":14,"targets":[[9,"submit"]],"inputs":[],"outputs":[9],"backend_fn":true,"js":null,"queue":false,"api_name":"lambda_5","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":15,"targets":[[16,"retry"]],"inputs":[],"outputs":[9],"backend_fn":true,"js":null,"queue":false,"api_name":"lambda_6","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":16,"targets":[[16,"example_select"]],"inputs":[],"outputs":[9],"backend_fn":true,"js":null,"queue":false,"api_name":"lambda_7","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":17,"targets":[[null,"then"]],"inputs":[],"outputs":[9],"backend_fn":true,"js":null,"queue":false,"api_name":"lambda_8","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":2,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":18,"targets":[[null,"then"]],"inputs":[],"outputs":[9],"backend_fn":true,"js":null,"queue":false,"api_name":"lambda_9","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":10,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":19,"targets":[[9,"stop"]],"inputs":[],"outputs":[],"backend_fn":false,"js":null,"queue":false,"api_name":"unnamed","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":20,"targets":[[9,"stop"]],"inputs":[],"outputs":[],"backend_fn":false,"js":null,"queue":false,"api_name":"unnamed_1","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[2,10],"types":{"generator":false,"cancel":true},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":21,"targets":[[16,"undo"]],"inputs":[16],"outputs":[16,9],"backend_fn":true,"js":null,"queue":false,"api_name":"_pop_last_user_message_1","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":22,"targets":[[null,"then"]],"inputs":[16],"outputs":[22,23],"backend_fn":true,"js":null,"queue":false,"api_name":"lambda_10","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":21,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":23,"targets":[[null,"then"]],"inputs":[12,22,11],"outputs":[12,11],"backend_fn":true,"js":null,"queue":false,"api_name":"_save_conversation_2","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":22,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":24,"targets":[[16,"option_select"]],"inputs":[16],"outputs":[16,13],"backend_fn":true,"js":null,"queue":true,"api_name":"option_clicked","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":true,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":25,"targets":[[null,"then"]],"inputs":[13,22,7,8,6],"outputs":[14,16],"backend_fn":true,"js":null,"queue":true,"api_name":"_submit_fn_2","scroll_to_output":false,"show_progress":"minimal","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":true,"cancel":false},"collects_event_data":false,"trigger_after":24,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":26,"targets":[[null,"then"]],"inputs":[16],"outputs":[22,23],"backend_fn":true,"js":null,"queue":false,"api_name":"lambda_11","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":25,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":27,"targets":[[null,"then"]],"inputs":[12,22,11],"outputs":[12,11],"backend_fn":true,"js":null,"queue":false,"api_name":"_save_conversation_3","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":26,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":28,"targets":[[16,"clear"]],"inputs":[16],"outputs":[22,23],"backend_fn":true,"js":null,"queue":false,"api_name":"lambda_12","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":29,"targets":[[null,"then"]],"inputs":[12,11],"outputs":[12,11],"backend_fn":true,"js":null,"queue":false,"api_name":"_delete_conversation","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":28,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":30,"targets":[[23,"change"]],"inputs":[23],"outputs":[16],"backend_fn":true,"js":null,"queue":true,"api_name":"lambda_13","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"always_last","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":31,"targets":[[null,"then"]],"inputs":[16],"outputs":[22,23],"backend_fn":true,"js":null,"queue":false,"api_name":"lambda_14","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":30,"trigger_only_on_success":false,"trigger_mode":"once","show_api":false,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":32,"targets":[[5,"select"]],"inputs":[],"outputs":[7],"backend_fn":true,"js":null,"queue":true,"api_name":"update_chat_model_dropdown","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":true,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":33,"targets":[[32,"click"]],"inputs":[27,28,29,30,31],"outputs":[33],"backend_fn":true,"js":null,"queue":true,"api_name":"whisper_handler","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":true,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":true,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":34,"targets":[[26,"select"]],"inputs":[],"outputs":[28],"backend_fn":true,"js":null,"queue":true,"api_name":"update_whisper_model_dropdown","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":true,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":35,"targets":[[38,"change"]],"inputs":[38],"outputs":[39],"backend_fn":true,"js":null,"queue":true,"api_name":"update_voices_dropdown","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"always_last","show_api":true,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":36,"targets":[[43,"click"]],"inputs":[37,38,39,40,41,42],"outputs":[44],"backend_fn":true,"js":null,"queue":true,"api_name":"handle_audio_speech","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":true,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":37,"targets":[[36,"select"]],"inputs":[],"outputs":[38],"backend_fn":true,"js":null,"queue":true,"api_name":"update_model_dropdown","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":true,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":38,"targets":[[36,"select"]],"inputs":[38],"outputs":[39],"backend_fn":true,"js":null,"queue":true,"api_name":"update_voices_dropdown_1","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":true,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null},{"id":39,"targets":[[null,"load"]],"inputs":[],"outputs":[42],"backend_fn":true,"js":null,"queue":true,"api_name":"lambda_15","scroll_to_output":false,"show_progress":"full","show_progress_on":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":true,"rendered_in":null,"render_id":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null,"js_implementation":null}],"layout":{"id":0,"children":[{"id":1},{"id":2},{"id":3},{"id":4},{"id":46,"children":[{"id":5,"children":[{"id":6},{"id":25,"children":[{"id":7},{"id":8}]},{"id":24,"children":[{"id":11}]},{"id":12},{"id":13},{"id":14},{"id":15,"children":[{"id":16},{"id":17,"children":[{"id":18,"children":[{"id":19,"children":[{"id":9}]}]}]},{"id":20},{"id":21},{"id":22},{"id":23}]}]},{"id":26,"children":[{"id":27},{"id":34,"children":[{"id":28},{"id":29},{"id":30},{"id":31}]},{"id":32},{"id":35,"children":[{"id":33}]}]},{"id":36,"children":[{"id":45,"children":[{"id":37},{"id":38},{"id":39},{"id":40},{"id":41},{"id":42}]},{"id":43},{"id":44}]}]}]},"root":"http://10.11.11.156:8000","username":null,"deep_link_state":"none","current_page":""};</script><script>window.gradio_api_info = {"named_endpoints":{"/chat":{"parameters":[{"label":"parameter_9","parameter_name":"message","parameter_has_default":false,"parameter_default":null,"type":{"$defs":{"FileData":{"description":"The FileData class is a subclass of the GradioModel class that represents a file object within a Gradio interface. It is used to store file data and metadata when a file is uploaded.\n\nAttributes:\n path: The server file path where the file is stored.\n url: The normalized server URL pointing to the file.\n size: The size of the file in bytes.\n orig_name: The original filename before upload.\n mime_type: The MIME type of the file.\n is_stream: Indicates whether the file is a stream.\n meta: Additional metadata used internally (should not be changed).","properties":{"path":{"title":"Path","type":"string"},"url":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Url"},"size":{"anyOf":[{"type":"integer"},{"type":"null"}],"default":null,"title":"Size"},"orig_name":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Orig Name"},"mime_type":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Mime Type"},"is_stream":{"default":false,"title":"Is Stream","type":"boolean"},"meta":{"$ref":"#/$defs/FileDataMeta"}},"required":["path"],"title":"FileData","type":"object"},"FileDataMeta":{"properties":{"_type":{"const":"gradio.FileData","title":"Type","type":"string"}},"required":["_type"],"title":"FileDataMeta","type":"object"}},"properties":{"text":{"title":"Text","type":"string"},"files":{"items":{"$ref":"#/$defs/FileData"},"title":"Files","type":"array"}},"required":["text"],"title":"MultimodalData","type":"object","additional_description":null},"python_type":{"type":"dict(text: str, files: list[filepath])","description":null},"component":"Multimodaltextbox","example_input":{"text":"Describe this image","files":[{"path":"https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png","meta":{"_type":"gradio.FileData"},"orig_name":"bus.png","url":"https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"}]}},{"label":"Chat Model","parameter_name":"model","parameter_has_default":false,"parameter_default":null,"type":{"type":"string","enum":[]},"python_type":{"type":"Literal[]","description":""},"component":"Dropdown","example_input":null},{"label":"Stream","parameter_name":"stream","parameter_has_default":true,"parameter_default":true,"type":{"type":"boolean"},"python_type":{"type":"bool","description":""},"component":"Checkbox","example_input":true}],"returns":[{"label":"Response","type":{"type":{},"description":"any valid json"},"python_type":{"type":"str | float | bool | list | dict","description":"any valid json"},"component":"Json"}],"show_api":true},"/update_chat_model_dropdown":{"parameters":[],"returns":[{"label":"Chat Model","type":{"type":"string","enum":[]},"python_type":{"type":"Literal[]","description":""},"component":"Dropdown"}],"show_api":true},"/whisper_handler":{"parameters":[{"label":"parameter_27","parameter_name":"file_path","parameter_has_default":false,"parameter_default":null,"type":{"$defs":{"FileDataMeta":{"properties":{"_type":{"const":"gradio.FileData","title":"Type","type":"string"}},"required":["_type"],"title":"FileDataMeta","type":"object"}},"properties":{"path":{"title":"Path","type":"string"},"url":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Url"},"size":{"anyOf":[{"type":"integer"},{"type":"null"}],"default":null,"title":"Size"},"orig_name":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Orig Name"},"mime_type":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Mime Type"},"is_stream":{"default":false,"title":"Is Stream","type":"boolean"},"meta":{"$ref":"#/$defs/FileDataMeta"}},"required":["path"],"title":"FileData","type":"object","additional_description":"The FileData class is a subclass of the GradioModel class that represents a file object within a Gradio interface. It is used to store file data and metadata when a file is uploaded.\n\nAttributes:\n path: The server file path where the file is stored.\n url: The normalized server URL pointing to the file.\n size: The size of the file in bytes.\n orig_name: The original filename before upload.\n mime_type: The MIME type of the file.\n is_stream: Indicates whether the file is a stream.\n meta: Additional metadata used internally (should not be changed)."},"python_type":{"type":"filepath","description":"The FileData class is a subclass of the GradioModel class that represents a file object within a Gradio interface. It is used to store file data and metadata when a file is uploaded.\n\nAttributes:\n path: The server file path where the file is stored.\n url: The normalized server URL pointing to the file.\n size: The size of the file in bytes.\n orig_name: The original filename before upload.\n mime_type: The MIME type of the file.\n is_stream: Indicates whether the file is a stream.\n meta: Additional metadata used internally (should not be changed)."},"component":"Audio","example_input":{"path":"https://github.com/gradio-app/gradio/raw/main/test/test_files/audio_sample.wav","meta":{"_type":"gradio.FileData"},"orig_name":"audio_sample.wav","url":"https://github.com/gradio-app/gradio/raw/main/test/test_files/audio_sample.wav"}},{"label":"Model","parameter_name":"model","parameter_has_default":false,"parameter_default":null,"type":{"type":"string","enum":[]},"python_type":{"type":"Literal[]","description":""},"component":"Dropdown","example_input":null},{"label":"Task","parameter_name":"task","parameter_has_default":true,"parameter_default":"transcribe","type":{"type":"string","enum":["transcribe","translate"]},"python_type":{"type":"Literal[\u0027transcribe\u0027, \u0027translate\u0027]","description":""},"component":"Dropdown","example_input":"transcribe"},{"label":"Temperature","parameter_name":"temperature","parameter_has_default":true,"parameter_default":0.0,"type":{"type":"number","description":"numeric value between 0.0 and 1.0"},"python_type":{"type":"float","description":""},"component":"Slider","example_input":0.0},{"label":"Stream","parameter_name":"stream","parameter_has_default":true,"parameter_default":true,"type":{"type":"boolean"},"python_type":{"type":"bool","description":""},"component":"Checkbox","example_input":true}],"returns":[{"label":"value_33","type":{"type":"string"},"python_type":{"type":"str","description":""},"component":"Textbox"}],"show_api":true},"/update_whisper_model_dropdown":{"parameters":[],"returns":[{"label":"Model","type":{"type":"string","enum":[]},"python_type":{"type":"Literal[]","description":""},"component":"Dropdown"}],"show_api":true},"/update_voices_dropdown":{"parameters":[{"label":"Model","parameter_name":"model_id","parameter_has_default":false,"parameter_default":null,"type":{"type":"string","enum":[]},"python_type":{"type":"Literal[]","description":""},"component":"Dropdown","example_input":null}],"returns":[{"label":"Voice","type":{"type":"string","enum":[]},"python_type":{"type":"Literal[]","description":""},"component":"Dropdown"}],"show_api":true},"/handle_audio_speech":{"parameters":[{"label":"Input Text","parameter_name":"text","parameter_has_default":true,"parameter_default":"A rainbow is an optical phenomenon caused by refraction, internal reflection and dispersion of light in water droplets resulting in a continuous spectrum of light appearing in the sky.","type":{"type":"string"},"python_type":{"type":"str","description":""},"component":"Textbox","example_input":"Hello!!"},{"label":"Model","parameter_name":"model","parameter_has_default":false,"parameter_default":null,"type":{"type":"string","enum":[]},"python_type":{"type":"Literal[]","description":""},"component":"Dropdown","example_input":null},{"label":"Voice","parameter_name":"voice","parameter_has_default":false,"parameter_default":null,"type":{"type":"string","enum":[]},"python_type":{"type":"Literal[]","description":""},"component":"Dropdown","example_input":null},{"label":"Response Format","parameter_name":"response_format","parameter_has_default":true,"parameter_default":"wav","type":{"type":"string","enum":["mp3","flac","wav","pcm"]},"python_type":{"type":"Literal[\u0027mp3\u0027, \u0027flac\u0027, \u0027wav\u0027, \u0027pcm\u0027]","description":""},"component":"Dropdown","example_input":"mp3"},{"label":"Speed","parameter_name":"speed","parameter_has_default":true,"parameter_default":1.0,"type":{"type":"number","description":"numeric value between 0.25 and 4.0"},"python_type":{"type":"float","description":""},"component":"Slider","example_input":0.25},{"label":"Desired Sample Rate","parameter_name":"sample_rate","parameter_has_default":false,"parameter_default":null,"type":{"type":"number"},"python_type":{"type":"float","description":""},"component":"Number","example_input":3}],"returns":[{"label":"value_44","type":{"$defs":{"FileDataMeta":{"properties":{"_type":{"const":"gradio.FileData","title":"Type","type":"string"}},"required":["_type"],"title":"FileDataMeta","type":"object"}},"properties":{"path":{"title":"Path","type":"string"},"url":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Url"},"size":{"anyOf":[{"type":"integer"},{"type":"null"}],"default":null,"title":"Size"},"orig_name":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Orig Name"},"mime_type":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Mime Type"},"is_stream":{"default":false,"title":"Is Stream","type":"boolean"},"meta":{"$ref":"#/$defs/FileDataMeta"}},"required":["path"],"title":"FileData","type":"object","additional_description":"The FileData class is a subclass of the GradioModel class that represents a file object within a Gradio interface. It is used to store file data and metadata when a file is uploaded.\n\nAttributes:\n path: The server file path where the file is stored.\n url: The normalized server URL pointing to the file.\n size: The size of the file in bytes.\n orig_name: The original filename before upload.\n mime_type: The MIME type of the file.\n is_stream: Indicates whether the file is a stream.\n meta: Additional metadata used internally (should not be changed)."},"python_type":{"type":"filepath","description":""},"component":"Audio"}],"show_api":true},"/update_model_dropdown":{"parameters":[],"returns":[{"label":"Model","type":{"type":"string","enum":[]},"python_type":{"type":"Literal[]","description":""},"component":"Dropdown"}],"show_api":true},"/update_voices_dropdown_1":{"parameters":[{"label":"Model","parameter_name":"model_id","parameter_has_default":false,"parameter_default":null,"type":{"type":"string","enum":[]},"python_type":{"type":"Literal[]","description":""},"component":"Dropdown","example_input":null}],"returns":[{"label":"Voice","type":{"type":"string","enum":[]},"python_type":{"type":"Literal[]","description":""},"component":"Dropdown"}],"show_api":true},"/lambda_15":{"parameters":[],"returns":[{"label":"Desired Sample Rate","type":{"type":"number"},"python_type":{"type":"float","description":""},"component":"Number"}],"show_api":true}},"unnamed_endpoints":{}};</script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="anonymous"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"
async
></script>
<link rel="manifest" href="/manifest.json" />
<script type="module" crossorigin src="./assets/index-DJ2rNx9E.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-rsZ55Oi2.css">
</head>
<body
style="
width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
flex-grow: 1;
"
>
<gradio-app
control_page_title="true"
embed="false"
eager="true"
style="display: flex; flex-direction: column; flex-grow: 1"
>
</gradio-app>
<script>
const ce = document.getElementsByTagName("gradio-app");
if (ce[0]) {
ce[0].addEventListener("domchange", () => {
document.body.style.padding = "0";
});
document.body.style.padding = "0";
}
</script>
</body>
</html>
I have the same problem with the latest cpu version with qutebrowser, but the ui properly shows up in chromium.
This bug seems to appear only when my browser default language is not standard English (en_us).
PS. kudos for using qutebrowser 🙃
This bug seems to appear only when my browser default language is not standard English (en_us).
PS. kudos for using qutebrowser 🙃
Thanks to this I can load the UI :) In chrome, go to chrome://settings/languages and move "English (USA)" to the top, then reload the page.
I can confirm that not having an english locale breaks speaches. In qutebrowser having this in the config.py :
c.content.headers.accept_language = (
"fr-FR, fr, fr-CH;q=0.9, en-US, en;q=0.8, de;q=0.7;"
)
doesn't work, I get this error in the web console:
runtime.js:516 Uncaught (in promise) Error: [svelte-i18n] Cannot format a message without first setting the initial locale.
at xs (runtime.js:516:11)
at Nt (Index.svelte:453:17)
at no (svelte.js:1:24277)
at new Gt (Index.svelte:485:70)
at HTMLElement.connectedCallback (main.ts:109:15)
manifest.json:1
But this :
c.content.headers.accept_language = (
"en-US, en;q=0.9, fr-FR, fr, fr-CH;q=0.8, de;q=0.7;"
)
makes the speaches web UI show up properly.