Fix style and display of error overlay for gradio.

templates.py

@@ -91,15 +91,30 @@ def load_js(demo_type: DemoType) -> str:
 
 def update_iframe_js(demo_type: DemoType) -> str:
     if demo_type == DemoType.GRADIO:
-        return f"""async (code) => {{       
+        return f"""async (code, requirements) => {{       
                 async function update() {{
                     // Remove existing stylesheet so it will be reloaded;
                     // see https://github.com/gradio-app/gradio/blob/200237d73c169f39514465efc163db756969d3ac/js/app/src/lite/css.ts#L41
                     const demoFrameWindow = document.getElementById('gradio-iframe').contentWindow;
-                    demoFrameWindow.document.querySelector("head style").remove();
+                    const oldStyle = demoFrameWindow.document.querySelector("head style");
+                    oldStyle.remove();
                     const appController = demoFrameWindow.window.appController;
                     const newCode = code + ` # Update tag ${{Math.random()}}`;
-                    appController.run_code(newCode);
+                    try {{
+                        await appController.run_code(newCode);
+                    }}
+                    catch (e) {{
+                        // Replace old style if code error prevented new style from loading.
+                        const newStyle = demoFrameWindow.document.querySelector("head style");
+                        if (!newStyle) {{
+                            demoFrameWindow.document.head.appendChild(oldStyle);
+                        }}
+                        // Hide app so the error traceback is visible.
+                        // First div in main is the error traceback, second is the app.
+                        const appBody = demoFrameWindow.document.querySelectorAll("div.main > div")[1];
+                        appBody.style.visibility = "hidden";
+                        return e;
+                    }}
                 }};
                 await update();
                 
@@ -110,7 +125,7 @@ def update_iframe_js(demo_type: DemoType) -> str:
                 history.replaceState({{}}, '', currentUrl.href);
             }}"""
     elif demo_type == DemoType.STREAMLIT:
-        return f"""async (code) => {{       
+        return f"""async (code, requirements) => {{       
             async function update() {{
                 const appController = document.getElementById('stlite-iframe').contentWindow.window.appController;
                 const newCode = code + ` # Update tag ${{Math.random()}}`;