Buckets:
| <meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"Custom Web UI","local":"custom-web-ui","sections":[{"title":"Extension point: gradio_builder","local":"extension-point-gradiobuilder","sections":[{"title":"Builder signature","local":"builder-signature","sections":[],"depth":3}],"depth":2},{"title":"Option 1: Add a custom tab","local":"option-1-add-a-custom-tab","sections":[],"depth":2},{"title":"Option 2: Custom tab that wraps or reuses the default","local":"option-2-custom-tab-that-wraps-or-reuses-the-default","sections":[],"depth":2},{"title":"Option 3: Custom Quick Start or README only","local":"option-3-custom-quick-start-or-readme-only","sections":[],"depth":2},{"title":"Migration from custom HTML override (e.g. wildfire)","local":"migration-from-custom-html-override-eg-wildfire","sections":[],"depth":2},{"title":"Summary","local":"summary","sections":[],"depth":2}],"depth":1}"> | |
| <link href="/docs/openenv/pr_749/en/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload"> | |
| <link rel="modulepreload" href="/docs/openenv/pr_749/en/_app/immutable/entry/start.85477f45.js"> | |
| <link rel="modulepreload" href="/docs/openenv/pr_749/en/_app/immutable/chunks/scheduler.2b22cead.js"> | |
| <link rel="modulepreload" href="/docs/openenv/pr_749/en/_app/immutable/chunks/singletons.63566282.js"> | |
| <link rel="modulepreload" href="/docs/openenv/pr_749/en/_app/immutable/chunks/paths.dd876c7b.js"> | |
| <link rel="modulepreload" href="/docs/openenv/pr_749/en/_app/immutable/entry/app.51835dc5.js"> | |
| <link rel="modulepreload" href="/docs/openenv/pr_749/en/_app/immutable/chunks/preload-helper.0820fbc7.js"> | |
| <link rel="modulepreload" href="/docs/openenv/pr_749/en/_app/immutable/chunks/index.1a0e8013.js"> | |
| <link rel="modulepreload" href="/docs/openenv/pr_749/en/_app/immutable/nodes/0.167255c0.js"> | |
| <link rel="modulepreload" href="/docs/openenv/pr_749/en/_app/immutable/chunks/each.e59479a4.js"> | |
| <link rel="modulepreload" href="/docs/openenv/pr_749/en/_app/immutable/nodes/45.9098c5e8.js"> | |
| <link rel="modulepreload" href="/docs/openenv/pr_749/en/_app/immutable/chunks/Heading.c0d3f116.js"> | |
| <link rel="modulepreload" href="/docs/openenv/pr_749/en/_app/immutable/chunks/MermaidChart.svelte_svelte_type_style_lang.21bcf336.js"> | |
| <link rel="modulepreload" href="/docs/openenv/pr_749/en/_app/immutable/chunks/CodeBlock.c8d73295.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"title":"Custom Web UI","local":"custom-web-ui","sections":[{"title":"Extension point: gradio_builder","local":"extension-point-gradiobuilder","sections":[{"title":"Builder signature","local":"builder-signature","sections":[],"depth":3}],"depth":2},{"title":"Option 1: Add a custom tab","local":"option-1-add-a-custom-tab","sections":[],"depth":2},{"title":"Option 2: Custom tab that wraps or reuses the default","local":"option-2-custom-tab-that-wraps-or-reuses-the-default","sections":[],"depth":2},{"title":"Option 3: Custom Quick Start or README only","local":"option-3-custom-quick-start-or-readme-only","sections":[],"depth":2},{"title":"Migration from custom HTML override (e.g. wildfire)","local":"migration-from-custom-html-override-eg-wildfire","sections":[],"depth":2},{"title":"Summary","local":"summary","sections":[],"depth":2}],"depth":1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <div class="items-center shrink-0 min-w-[100px] max-sm:min-w-[50px] justify-end ml-auto flex" style="float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"><div class="inline-flex rounded-md max-sm:rounded-sm"><button class="inline-flex items-center gap-1 h-7 max-sm:h-7 px-2 max-sm:px-1.5 text-sm font-medium text-gray-800 border border-r-0 rounded-l-md max-sm:rounded-l-sm border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-live="polite"><span class="inline-flex items-center justify-center rounded-md p-0.5 max-sm:p-0 hover:text-gray-800 dark:hover:text-gray-200"><svg class="sm:size-3.5 size-3" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg></span> <span>Copy page</span></button> <button class="inline-flex items-center justify-center w-6 max-sm:w-5 h-7 max-sm:h-7 disabled:pointer-events-none text-sm text-gray-500 hover:text-gray-700 dark:hover:text-white rounded-r-md max-sm:rounded-r-sm border border-l transition border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-haspopup="menu" aria-expanded="false" aria-label="Open copy menu"><svg class="transition-transform text-gray-400 overflow-visible sm:size-3.5 size-3 rotate-0" width="1em" height="1em" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="currentColor"></path></svg></button></div> </div> <h1 class="relative group"><a id="custom-web-ui" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#custom-web-ui"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Custom Web UI</span></h1> <p data-svelte-h="svelte-bxuagu">When <code>ENABLE_WEB_INTERFACE=true</code>, the server serves a default Gradio app at <code>/web</code> with Reset/Step/Get state, Quick Start, and README. Environment authors can <strong>add</strong> a custom tab by providing a custom Gradio builder.</p> <h2 class="relative group"><a id="extension-point-gradiobuilder" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#extension-point-gradiobuilder"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Extension point: gradio_builder</span></h2> <p data-svelte-h="svelte-18iqhie"><code>create_app()</code> accepts an optional <strong><code>gradio_builder</code></strong> callable. When set, the UI at <code>/web</code> is built with <a href="https://www.gradio.app/4.44.1/docs/gradio/tabbedinterface" rel="nofollow">Gradio’s TabbedInterface</a>: the <strong>first tab (“Playground”)</strong> is the default OpenEnv UI, and the <strong>second tab (“Custom”)</strong> is the <code>gr.Blocks</code> returned by your builder. Users can switch between the default Playground and your custom interface without losing either. The same <code>/web/reset</code>, <code>/web/step</code>, <code>/web/state</code>, and <code>/web/metadata</code> API routes remain available; your custom tab can use the provided <code>web_manager</code> in-process or call those endpoints.</p> <h3 class="relative group"><a id="builder-signature" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#builder-signature"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Builder signature</span></h3> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-python "><!-- HTML_TAG_START --><span class="hljs-keyword">def</span> <span class="hljs-title function_">my_gradio_builder</span>(<span class="hljs-params"> | |
| web_manager, <span class="hljs-comment"># WebInterfaceManager: .reset_environment(), .step_environment(), .get_state()</span> | |
| action_fields, <span class="hljs-comment"># list[dict]: from action schema for form generation</span> | |
| metadata, <span class="hljs-comment"># EnvironmentMetadata | None: name, readme_content, etc.</span> | |
| is_chat_env, <span class="hljs-comment"># bool: True if single message input</span> | |
| title, <span class="hljs-comment"># str: app title (e.g. metadata.name)</span> | |
| quick_start_md, <span class="hljs-comment"># str: Quick Start markdown (class names already replaced)</span> | |
| </span>) -> gr.Blocks: | |
| ...<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-q67sst">Return a <code>gr.Blocks</code> instance. It is shown in the <strong>“Custom”</strong> tab of a tabbed interface; the <strong>“Playground”</strong> tab always shows the default OpenEnv UI. Core applies the same theme/css when mounting.</p> <hr> <h2 class="relative group"><a id="option-1-add-a-custom-tab" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#option-1-add-a-custom-tab"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Option 1: Add a custom tab</span></h2> <p data-svelte-h="svelte-1hoo1ue">Provide a builder that returns your own <code>gr.Blocks</code>; it appears as the second tab (“Custom”) next to the default “Playground” tab:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-python "><!-- HTML_TAG_START --><span class="hljs-comment"># server/app.py</span> | |
| <span class="hljs-keyword">from</span> openenv.core.env_server.http_server <span class="hljs-keyword">import</span> create_app | |
| <span class="hljs-keyword">from</span> .my_environment <span class="hljs-keyword">import</span> MyEnvironment | |
| <span class="hljs-keyword">from</span> ..models <span class="hljs-keyword">import</span> MyAction, MyObservation | |
| <span class="hljs-keyword">from</span> .gradio_ui <span class="hljs-keyword">import</span> build_my_gradio_app <span class="hljs-comment"># your module</span> | |
| app = create_app( | |
| MyEnvironment, | |
| MyAction, | |
| MyObservation, | |
| env_name=<span class="hljs-string">"my_env"</span>, | |
| gradio_builder=build_my_gradio_app, | |
| )<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1tgi404">In <code>server/gradio_ui.py</code> implement <code>build_my_gradio_app(web_manager, action_fields, metadata, is_chat_env, title, quick_start_md)</code> returning a <code>gr.Blocks</code> (e.g. env-specific visualizations, extra controls). Use <code>web_manager.reset_environment()</code>, <code>web_manager.step_environment(action_data)</code>, and <code>web_manager.get_state()</code> in your Gradio event handlers. The default Playground tab remains available in the first tab.</p> <hr> <h2 class="relative group"><a id="option-2-custom-tab-that-wraps-or-reuses-the-default" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#option-2-custom-tab-that-wraps-or-reuses-the-default"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Option 2: Custom tab that wraps or reuses the default</span></h2> <p data-svelte-h="svelte-1n4p46x">Your builder can call the core <code>build_gradio_app</code> to get a Blocks instance and embed it inside your custom tab (e.g. in a <code>gr.Tabs</code> or as one section). That way your “Custom” tab can show both the default layout and additional content in one place.</p> <hr> <h2 class="relative group"><a id="option-3-custom-quick-start-or-readme-only" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#option-3-custom-quick-start-or-readme-only"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Option 3: Custom Quick Start or README only</span></h2> <p data-svelte-h="svelte-1p5yu1i">You don’t need a custom builder only to change text. The default UI uses:</p> <ul data-svelte-h="svelte-1ft24or"><li><strong>Quick Start</strong>: generated from <code>get_quick_start_markdown(metadata, action_cls, observation_cls)</code> (init-style class names).</li> <li><strong>README</strong>: <code>metadata.readme_content</code> (loaded from the env’s README).</li></ul> <p data-svelte-h="svelte-zq37mh">So you can influence the default UI by ensuring <code>metadata</code> and README are correct. To change the Quick Start template itself (e.g. different wording or placeholders), you would use a custom <code>gradio_builder</code> that calls <code>build_gradio_app</code> with a custom <code>quick_start_md</code> string you build yourself (or by copying and adapting the default template from the core).</p> <hr> <h2 class="relative group"><a id="migration-from-custom-html-override-eg-wildfire" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#migration-from-custom-html-override-eg-wildfire"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Migration from custom HTML override (e.g. wildfire)</span></h2> <p data-svelte-h="svelte-1jxv1r3">Environments that currently override <code>/web</code> with custom HTML (e.g. by removing the default route and adding a GET <code>/web</code> that returns HTML) should migrate to a <strong>gradio_builder</strong> that returns a <code>gr.Blocks</code> app. The custom UI then appears in the <strong>“Custom”</strong> tab alongside the default <strong>“Playground”</strong> tab. Benefits:</p> <ul data-svelte-h="svelte-jps05i"><li>Single, supported extension point using <a href="https://www.gradio.app/4.44.1/docs/gradio/tabbedinterface" rel="nofollow">TabbedInterface</a>.</li> <li>No need to remove or override routes; the default UI stays in the first tab.</li> <li>Same <code>/web</code> path; both tabs can use <code>web_manager</code> or <code>/web/reset</code>, <code>/web/step</code>, <code>/web/state</code>.</li></ul> <p data-svelte-h="svelte-1ybg215">If you need a non-Gradio custom UI (e.g. static HTML/JS), you can still register your own route after <code>create_app</code> (e.g. at <code>/web/custom</code> or another path), but the main <code>/web</code> slot is the Gradio tabbed app when <code>ENABLE_WEB_INTERFACE=true</code>.</p> <hr> <h2 class="relative group"><a id="summary" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#summary"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Summary</span></h2> <table data-svelte-h="svelte-1o6bmil"><thead><tr><th>Goal</th> <th>Approach</th></tr></thead> <tbody><tr><td>Use default UI only</td> <td>Do not pass <code>gradio_builder</code>.</td></tr> <tr><td>Add a custom tab</td> <td>Pass <code>gradio_builder=my_builder</code>; return your own <code>gr.Blocks</code> (shown in “Custom” tab).</td></tr> <tr><td>Custom tab + default inside</td> <td>In your builder, call <code>build_gradio_app(...)</code> and embed or wrap it in your Blocks.</td></tr> <tr><td>Change Quick Start / README</td> <td>Rely on metadata/README, or custom builder that builds custom markdown.</td></tr></tbody></table> <p data-svelte-h="svelte-fgxn3f">The default Playground tab is built with <code>openenv.core.env_server.gradio_ui.build_gradio_app</code>; you can import and call it with the same arguments if your custom tab needs to embed or extend it.</p> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/openenv/blob/main/docs/source/guides/customizing-web-ui.md" target="_blank"><svg class="mr-1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M31,16l-7,7l-1.41-1.41L28.17,16l-5.58-5.59L24,9l7,7z"></path><path d="M1,16l7-7l1.41,1.41L3.83,16l5.58,5.59L8,23l-7-7z"></path><path d="M12.419,25.484L17.639,6.552l1.932,0.518L14.351,26.002z"></path></svg> <span data-svelte-h="svelte-zjs2n5"><span class="underline">Update</span> on GitHub</span></a> <p></p> | |
| <script> | |
| { | |
| __sveltekit_1qwoa43 = { | |
| assets: "/docs/openenv/pr_749/en", | |
| base: "/docs/openenv/pr_749/en", | |
| env: {} | |
| }; | |
| const element = document.currentScript.parentElement; | |
| const data = [null,null]; | |
| Promise.all([ | |
| import("/docs/openenv/pr_749/en/_app/immutable/entry/start.85477f45.js"), | |
| import("/docs/openenv/pr_749/en/_app/immutable/entry/app.51835dc5.js") | |
| ]).then(([kit, app]) => { | |
| kit.start(app, element, { | |
| node_ids: [0, 45], | |
| data, | |
| form: null, | |
| error: null | |
| }); | |
| }); | |
| } | |
| </script> | |
Xet Storage Details
- Size:
- 25.7 kB
- Xet hash:
- 743cede089de11277cebf478241ce14abdcca052c786f4827d828742e365f4ec
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.