Fix style and display of error overlay for gradio.
Browse files- templates.py +19 -4
templates.py
CHANGED
@@ -91,15 +91,30 @@ def load_js(demo_type: DemoType) -> str:
|
|
91 |
|
92 |
def update_iframe_js(demo_type: DemoType) -> str:
|
93 |
if demo_type == DemoType.GRADIO:
|
94 |
-
return f"""async (code) => {{
|
95 |
async function update() {{
|
96 |
// Remove existing stylesheet so it will be reloaded;
|
97 |
// see https://github.com/gradio-app/gradio/blob/200237d73c169f39514465efc163db756969d3ac/js/app/src/lite/css.ts#L41
|
98 |
const demoFrameWindow = document.getElementById('gradio-iframe').contentWindow;
|
99 |
-
demoFrameWindow.document.querySelector("head style")
|
|
|
100 |
const appController = demoFrameWindow.window.appController;
|
101 |
const newCode = code + ` # Update tag ${{Math.random()}}`;
|
102 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
103 |
}};
|
104 |
await update();
|
105 |
|
@@ -110,7 +125,7 @@ def update_iframe_js(demo_type: DemoType) -> str:
|
|
110 |
history.replaceState({{}}, '', currentUrl.href);
|
111 |
}}"""
|
112 |
elif demo_type == DemoType.STREAMLIT:
|
113 |
-
return f"""async (code) => {{
|
114 |
async function update() {{
|
115 |
const appController = document.getElementById('stlite-iframe').contentWindow.window.appController;
|
116 |
const newCode = code + ` # Update tag ${{Math.random()}}`;
|
|
|
91 |
|
92 |
def update_iframe_js(demo_type: DemoType) -> str:
|
93 |
if demo_type == DemoType.GRADIO:
|
94 |
+
return f"""async (code, requirements) => {{
|
95 |
async function update() {{
|
96 |
// Remove existing stylesheet so it will be reloaded;
|
97 |
// see https://github.com/gradio-app/gradio/blob/200237d73c169f39514465efc163db756969d3ac/js/app/src/lite/css.ts#L41
|
98 |
const demoFrameWindow = document.getElementById('gradio-iframe').contentWindow;
|
99 |
+
const oldStyle = demoFrameWindow.document.querySelector("head style");
|
100 |
+
oldStyle.remove();
|
101 |
const appController = demoFrameWindow.window.appController;
|
102 |
const newCode = code + ` # Update tag ${{Math.random()}}`;
|
103 |
+
try {{
|
104 |
+
await appController.run_code(newCode);
|
105 |
+
}}
|
106 |
+
catch (e) {{
|
107 |
+
// Replace old style if code error prevented new style from loading.
|
108 |
+
const newStyle = demoFrameWindow.document.querySelector("head style");
|
109 |
+
if (!newStyle) {{
|
110 |
+
demoFrameWindow.document.head.appendChild(oldStyle);
|
111 |
+
}}
|
112 |
+
// Hide app so the error traceback is visible.
|
113 |
+
// First div in main is the error traceback, second is the app.
|
114 |
+
const appBody = demoFrameWindow.document.querySelectorAll("div.main > div")[1];
|
115 |
+
appBody.style.visibility = "hidden";
|
116 |
+
return e;
|
117 |
+
}}
|
118 |
}};
|
119 |
await update();
|
120 |
|
|
|
125 |
history.replaceState({{}}, '', currentUrl.href);
|
126 |
}}"""
|
127 |
elif demo_type == DemoType.STREAMLIT:
|
128 |
+
return f"""async (code, requirements) => {{
|
129 |
async function update() {{
|
130 |
const appController = document.getElementById('stlite-iframe').contentWindow.window.appController;
|
131 |
const newCode = code + ` # Update tag ${{Math.random()}}`;
|