openenv/pr_739/en/_app/immutable/nodes/45.bc8eca72.js

import{s as Ne,n as ze,o as De}from"../chunks/scheduler.2b22cead.js";import{S as qe,i as Oe,e as s,s as l,c as d,h as Ke,a as i,d as a,b as o,f as Fe,g as m,j as r,k as Pe,l as et,m as n,n as u,t as c,o as p,p as y}from"../chunks/index.1a0e8013.js";import{C as tt,H as M}from"../chunks/Heading.8250c9c7.js";import{C as Ye}from"../chunks/CodeBlock.acc2b0c1.js";import{E as at}from"../chunks/MermaidChart.svelte_svelte_type_style_lang.5df0e759.js";function nt(Be){let b,F,V,P,f,Y,w,N,h,ke="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.",z,g,D,T,Ee='<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.',q,_,O,J,K,$,We="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.",ee,te,ae,v,ne,U,Ze="Provide a builder that returns your own <code>gr.Blocks</code>; it appears as the second tab (“Custom”) next to the default “Playground” tab:",le,C,oe,I,Ae="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.",se,ie,re,j,de,B,He="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.",me,ue,ce,k,pe,E,Le="You don’t need a custom builder only to change text. The default UI uses:",ye,W,xe="<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>",be,Z,Ge="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).",Me,fe,we,A,he,H,Se="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:",ge,L,Xe='<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>',Te,x,Re="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>.",_e,Je,$e,G,ve,S,Ve="<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>",Ue,X,Qe="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.",Ce,R,Ie,Q,je;return f=new tt({props:{containerStyle:"float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"}}),w=new M({props:{title:"Custom Web UI",local:"custom-web-ui",headingTag:"h1"}}),g=new M({props:{title:"Extension point: gradio_builder",local:"extension-point-gradiobuilder",headingTag:"h2"}}),_=new M({props:{title:"Builder signature",local:"builder-signature",headingTag:"h3"}}),J=new Ye({props:{code:"ZGVmJTIwbXlfZ3JhZGlvX2J1aWxkZXIoJTBBJTIwJTIwJTIwJTIwd2ViX21hbmFnZXIlMkMlMjAlMjAlMjAlMjAlMjAlMjAlMjMlMjBXZWJJbnRlcmZhY2VNYW5hZ2VyJTNBJTIwLnJlc2V0X2Vudmlyb25tZW50KCklMkMlMjAuc3RlcF9lbnZpcm9ubWVudCgpJTJDJTIwLmdldF9zdGF0ZSgpJTBBJTIwJTIwJTIwJTIwYWN0aW9uX2ZpZWxkcyUyQyUyMCUyMCUyMCUyMCUyMyUyMGxpc3QlNUJkaWN0JTVEJTNBJTIwZnJvbSUyMGFjdGlvbiUyMHNjaGVtYSUyMGZvciUyMGZvcm0lMjBnZW5lcmF0aW9uJTBBJTIwJTIwJTIwJTIwbWV0YWRhdGElMkMlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjMlMjBFbnZpcm9ubWVudE1ldGFkYXRhJTIwJTdDJTIwTm9uZSUzQSUyMG5hbWUlMkMlMjByZWFkbWVfY29udGVudCUyQyUyMGV0Yy4lMEElMjAlMjAlMjAlMjBpc19jaGF0X2VudiUyQyUyMCUyMCUyMCUyMCUyMCUyMyUyMGJvb2wlM0ElMjBUcnVlJTIwaWYlMjBzaW5nbGUlMjBtZXNzYWdlJTIwaW5wdXQlMEElMjAlMjAlMjAlMjB0aXRsZSUyQyUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMyUyMHN0ciUzQSUyMGFwcCUyMHRpdGxlJTIwKGUuZy4lMjBtZXRhZGF0YS5uYW1lKSUwQSUyMCUyMCUyMCUyMHF1aWNrX3N0YXJ0X21kJTJDJTIwJTIwJTIzJTIwc3RyJTNBJTIwUXVpY2slMjBTdGFydCUyMG1hcmtkb3duJTIwKGNsYXNzJTIwbmFtZXMlMjBhbHJlYWR5JTIwcmVwbGFjZWQpJTBBKSUyMC0lM0UlMjBnci5CbG9ja3MlM0ElMEElMjAlMjAlMjAlMjAuLi4=",highlighted:`<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>) -&gt; gr.Blocks:
    ...`,lang:"python",wrap:!1}}),v=new M({props:{title:"Option 1: Add a custom tab",local:"option-1-add-a-custom-tab",headingTag:"h2"}}),C=new Ye({props:{code:"JTIzJTIwc2VydmVyJTJGYXBwLnB5JTBBZnJvbSUyMG9wZW5lbnYuY29yZS5lbnZfc2VydmVyLmh0dHBfc2VydmVyJTIwaW1wb3J0JTIwY3JlYXRlX2FwcCUwQWZyb20lMjAubXlfZW52aXJvbm1lbnQlMjBpbXBvcnQlMjBNeUVudmlyb25tZW50JTBBZnJvbSUyMC4ubW9kZWxzJTIwaW1wb3J0JTIwTXlBY3Rpb24lMkMlMjBNeU9ic2VydmF0aW9uJTBBZnJvbSUyMC5ncmFkaW9fdWklMjBpbXBvcnQlMjBidWlsZF9teV9ncmFkaW9fYXBwJTIwJTIwJTIzJTIweW91ciUyMG1vZHVsZSUwQSUwQWFwcCUyMCUzRCUyMGNyZWF0ZV9hcHAoJTBBJTIwJTIwJTIwJTIwTXlFbnZpcm9ubWVudCUyQyUwQSUyMCUyMCUyMCUyME15QWN0aW9uJTJDJTBBJTIwJTIwJTIwJTIwTXlPYnNlcnZhdGlvbiUyQyUwQSUyMCUyMCUyMCUyMGVudl9uYW1lJTNEJTIybXlfZW52JTIyJTJDJTBBJTIwJTIwJTIwJTIwZ3JhZGlvX2J1aWxkZXIlM0RidWlsZF9teV9ncmFkaW9fYXBwJTJDJTBBKQ==",highlighted:`<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">&quot;my_env&quot;</span>,
    gradio_builder=build_my_gradio_app,
)`,lang:"python",wrap:!1}}),j=new M({props:{title:"Option 2: Custom tab that wraps or reuses the default",local:"option-2-custom-tab-that-wraps-or-reuses-the-default",headingTag:"h2"}}),k=new M({props:{title:"Option 3: Custom Quick Start or README only",local:"option-3-custom-quick-start-or-readme-only",headingTag:"h2"}}),A=new M({props:{title:"Migration from custom HTML override (e.g. wildfire)",local:"migration-from-custom-html-override-eg-wildfire",headingTag:"h2"}}),G=new M({props:{title:"Summary",local:"summary",headingTag:"h2"}}),R=new at({props:{source:"https://github.com/huggingface/openenv/blob/main/docs/source/guides/customizing-web-ui.md"}}),{c(){b=s("meta"),F=l(),V=s("p"),P=l(),d(f.$$.fragment),Y=l(),d(w.$$.fragment),N=l(),h=s("p"),h.innerHTML=ke,z=l(),d(g.$$.fragment),D=l(),T=s("p"),T.innerHTML=Ee,q=l(),d(_.$$.fragment),O=l(),d(J.$$.fragment),K=l(),$=s("p"),$.innerHTML=We,ee=l(),te=s("hr"),ae=l(),d(v.$$.fragment),ne=l(),U=s("p"),U.innerHTML=Ze,le=l(),d(C.$$.fragment),oe=l(),I=s("p"),I.innerHTML=Ae,se=l(),ie=s("hr"),re=l(),d(j.$$.fragment),de=l(),B=s("p"),B.innerHTML=He,me=l(),ue=s("hr"),ce=l(),d(k.$$.fragment),pe=l(),E=s("p"),E.textContent=Le,ye=l(),W=s("ul"),W.innerHTML=xe,be=l(),Z=s("p"),Z.innerHTML=Ge,Me=l(),fe=s("hr"),we=l(),d(A.$$.fragment),he=l(),H=s("p"),H.innerHTML=Se,ge=l(),L=s("ul"),L.innerHTML=Xe,Te=l(),x=s("p"),x.innerHTML=Re,_e=l(),Je=s("hr"),$e=l(),d(G.$$.fragment),ve=l(),S=s("table"),S.innerHTML=Ve,Ue=l(),X=s("p"),X.innerHTML=Qe,Ce=l(),d(R.$$.fragment),Ie=l(),Q=s("p"),this.h()},l(e){const t=Ke("svelte-u9bgzb",document.head);b=i(t,"META",{name:!0,content:!0}),t.forEach(a),F=o(e),V=i(e,"P",{}),Fe(V).forEach(a),P=o(e),m(f.$$.fragment,e),Y=o(e),m(w.$$.fragment,e),N=o(e),h=i(e,"P",{"data-svelte-h":!0}),r(h)!=="svelte-bxuagu"&&(h.innerHTML=ke),z=o(e),m(g.$$.fragment,e),D=o(e),T=i(e,"P",{"data-svelte-h":!0}),r(T)!=="svelte-18iqhie"&&(T.innerHTML=Ee),q=o(e),m(_.$$.fragment,e),O=o(e),m(J.$$.fragment,e),K=o(e),$=i(e,"P",{"data-svelte-h":!0}),r($)!=="svelte-q67sst"&&($.innerHTML=We),ee=o(e),te=i(e,"HR",{}),ae=o(e),m(v.$$.fragment,e),ne=o(e),U=i(e,"P",{"data-svelte-h":!0}),r(U)!=="svelte-1hoo1ue"&&(U.innerHTML=Ze),le=o(e),m(C.$$.fragment,e),oe=o(e),I=i(e,"P",{"data-svelte-h":!0}),r(I)!=="svelte-1tgi404"&&(I.innerHTML=Ae),se=o(e),ie=i(e,"HR",{}),re=o(e),m(j.$$.fragment,e),de=o(e),B=i(e,"P",{"data-svelte-h":!0}),r(B)!=="svelte-1n4p46x"&&(B.innerHTML=He),me=o(e),ue=i(e,"HR",{}),ce=o(e),m(k.$$.fragment,e),pe=o(e),E=i(e,"P",{"data-svelte-h":!0}),r(E)!=="svelte-1p5yu1i"&&(E.textContent=Le),ye=o(e),W=i(e,"UL",{"data-svelte-h":!0}),r(W)!=="svelte-1ft24or"&&(W.innerHTML=xe),be=o(e),Z=i(e,"P",{"data-svelte-h":!0}),r(Z)!=="svelte-zq37mh"&&(Z.innerHTML=Ge),Me=o(e),fe=i(e,"HR",{}),we=o(e),m(A.$$.fragment,e),he=o(e),H=i(e,"P",{"data-svelte-h":!0}),r(H)!=="svelte-1jxv1r3"&&(H.innerHTML=Se),ge=o(e),L=i(e,"UL",{"data-svelte-h":!0}),r(L)!=="svelte-jps05i"&&(L.innerHTML=Xe),Te=o(e),x=i(e,"P",{"data-svelte-h":!0}),r(x)!=="svelte-1ybg215"&&(x.innerHTML=Re),_e=o(e),Je=i(e,"HR",{}),$e=o(e),m(G.$$.fragment,e),ve=o(e),S=i(e,"TABLE",{"data-svelte-h":!0}),r(S)!=="svelte-1o6bmil"&&(S.innerHTML=Ve),Ue=o(e),X=i(e,"P",{"data-svelte-h":!0}),r(X)!=="svelte-fgxn3f"&&(X.innerHTML=Qe),Ce=o(e),m(R.$$.fragment,e),Ie=o(e),Q=i(e,"P",{}),Fe(Q).forEach(a),this.h()},h(){Pe(b,"name","hf:doc:metadata"),Pe(b,"content",lt)},m(e,t){et(document.head,b),n(e,F,t),n(e,V,t),n(e,P,t),u(f,e,t),n(e,Y,t),u(w,e,t),n(e,N,t),n(e,h,t),n(e,z,t),u(g,e,t),n(e,D,t),n(e,T,t),n(e,q,t),u(_,e,t),n(e,O,t),u(J,e,t),n(e,K,t),n(e,$,t),n(e,ee,t),n(e,te,t),n(e,ae,t),u(v,e,t),n(e,ne,t),n(e,U,t),n(e,le,t),u(C,e,t),n(e,oe,t),n(e,I,t),n(e,se,t),n(e,ie,t),n(e,re,t),u(j,e,t),n(e,de,t),n(e,B,t),n(e,me,t),n(e,ue,t),n(e,ce,t),u(k,e,t),n(e,pe,t),n(e,E,t),n(e,ye,t),n(e,W,t),n(e,be,t),n(e,Z,t),n(e,Me,t),n(e,fe,t),n(e,we,t),u(A,e,t),n(e,he,t),n(e,H,t),n(e,ge,t),n(e,L,t),n(e,Te,t),n(e,x,t),n(e,_e,t),n(e,Je,t),n(e,$e,t),u(G,e,t),n(e,ve,t),n(e,S,t),n(e,Ue,t),n(e,X,t),n(e,Ce,t),u(R,e,t),n(e,Ie,t),n(e,Q,t),je=!0},p:ze,i(e){je||(c(f.$$.fragment,e),c(w.$$.fragment,e),c(g.$$.fragment,e),c(_.$$.fragment,e),c(J.$$.fragment,e),c(v.$$.fragment,e),c(C.$$.fragment,e),c(j.$$.fragment,e),c(k.$$.fragment,e),c(A.$$.fragment,e),c(G.$$.fragment,e),c(R.$$.fragment,e),je=!0)},o(e){p(f.$$.fragment,e),p(w.$$.fragment,e),p(g.$$.fragment,e),p(_.$$.fragment,e),p(J.$$.fragment,e),p(v.$$.fragment,e),p(C.$$.fragment,e),p(j.$$.fragment,e),p(k.$$.fragment,e),p(A.$$.fragment,e),p(G.$$.fragment,e),p(R.$$.fragment,e),je=!1},d(e){e&&(a(F),a(V),a(P),a(Y),a(N),a(h),a(z),a(D),a(T),a(q),a(O),a(K),a($),a(ee),a(te),a(ae),a(ne),a(U),a(le),a(oe),a(I),a(se),a(ie),a(re),a(de),a(B),a(me),a(ue),a(ce),a(pe),a(E),a(ye),a(W),a(be),a(Z),a(Me),a(fe),a(we),a(he),a(H),a(ge),a(L),a(Te),a(x),a(_e),a(Je),a($e),a(ve),a(S),a(Ue),a(X),a(Ce),a(Ie),a(Q)),a(b),y(f,e),y(w,e),y(g,e),y(_,e),y(J,e),y(v,e),y(C,e),y(j,e),y(k,e),y(A,e),y(G,e),y(R,e)}}}const lt='{"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}';function ot(Be){return De(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class ut extends qe{constructor(b){super(),Oe(this,b,ot,nt,Ne,{})}}export{ut as component};