Spaces:

broadfield-dev
/

UI_learn_js

Running

App Files Files Community

broadfield-dev commited on Feb 15

Commit

095df03

verified ·

1 Parent(s): e6d5c9e

Update app.py

Browse files

Files changed (1) hide show

app.py +52 -20

app.py CHANGED Viewed

@@ -1,42 +1,74 @@
 import gradio as gr
 def update_ui(code):
     try:
-        # Here, we're not parsing JavaScript out but passing the whole code through
-        return code, ""
     except Exception as e:
-        return "", str(e)
 def interface():
     with gr.Blocks() as demo:
-        gr.Markdown("# Learn Frontend UI with Snake Game")
         with gr.Row():
             code_input = gr.Code(label="Write your HTML/CSS/JS here", language="html")
             with gr.Column():
-                # For JavaScript to work, you need to use the _js argument in the HTML component
                 ui_preview = gr.HTML(label="UI Preview")
                 error_output = gr.Textbox(label="Error", interactive=False)
-        # We'll use the _js argument to inject JavaScript directly into the HTML component
         code_input.change(
-            fn=update_ui,
-            inputs=code_input,
-            outputs=[ui_preview, error_output],
             _js="""
-            function(code) {
-                // This function runs in the browser context, not Python
                 const tempDiv = document.createElement('div');
-                tempDiv.innerHTML = code;
-                // Extract scripts from the code
-                const scripts = tempDiv.querySelectorAll('script');
-                for (let script of scripts) {
-                    const newScript = document.createElement('script');
-                    newScript.textContent = script.textContent;
-                    script.parentNode.replaceChild(newScript, script);
                 }
-                // Return the HTML content without the script tags for Gradio to display
                 return tempDiv.innerHTML;
             }
             """

 import gradio as gr
+import re
 def update_ui(code):
     try:
+        # Extract HTML, CSS, and JavaScript using regex
+        html_content = re.search(r'<html[^>]*>[\s\S]*?<\/html>', code, re.IGNORECASE)
+        if html_content:
+            html_content = html_content.group(0)
+        else:
+            html_content = code  # If no <html> tag, assume all is HTML content
+        # Extract CSS if present in a <style> tag
+        css_content = re.search(r'<style[^>]*>[\s\S]*?<\/style>', code, re.IGNORECASE)
+        css_string = ''
+        if css_content:
+            css_string = css_content.group(0)
+        # Remove <style> tags for direct application
+        css_only = re.sub(r'<style>|<\/style>', '', css_string) if css_string else ''
+        # Extract JavaScript if present in a <script> tag
+        js_content = re.search(r'<script[^>]*>[\s\S]*?<\/script>', code, re.IGNORECASE)
+        js_string = ''
+        if js_content:
+            js_string = js_content.group(0)
+        # Remove <script> tags for Gradio's js= parameter
+        js_only = re.sub(r'<script>|<\/script>', '', js_string) if js_string else ''
+        # Combine HTML with CSS for preview, but we'll handle JS separately
+        ui_output = f"""
+        <style>{css_only}</style>
+        {html_content}
+        """
+        return ui_output, js_only, None
     except Exception as e:
+        return "", "", str(e)
 def interface():
     with gr.Blocks() as demo:
+        gr.Markdown("# Learn Frontend UI")
         with gr.Row():
             code_input = gr.Code(label="Write your HTML/CSS/JS here", language="html")
             with gr.Column():
                 ui_preview = gr.HTML(label="UI Preview")
                 error_output = gr.Textbox(label="Error", interactive=False)
+                # Hidden output to store JavaScript for _js execution
+                js_output = gr.Textbox(visible=False)
+        # Use _js to execute JavaScript in the browser context
         code_input.change(
+            fn=update_ui,
+            inputs=code_input,
+            outputs=[ui_preview, js_output, error_output],
             _js="""
+            function(code, ui_output, js_code) {
+                // Create a temporary div to parse the HTML
                 const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = ui_output;
+                // If there's JavaScript code, execute it
+                if (js_code) {
+                    const script = document.createElement('script');
+                    script.textContent = js_code;
+                    document.body.appendChild(script);
+                    // Clean up script tag after execution to prevent duplicates
+                    setTimeout(() => script.remove(), 0);
                 }
+                // Return the HTML content for Gradio to display
                 return tempDiv.innerHTML;
             }
             """