Spaces:

broadfield-dev
/

UI_learn_js

Running

App Files Files Community

broadfield-dev commited on Feb 15

Commit

5c57877

verified ·

1 Parent(s): 17cccd0

Update app.py

Browse files

Files changed (1) hide show

app.py +11 -39

app.py CHANGED Viewed

@@ -2,8 +2,7 @@ import gradio as gr
 def update_ui(code):
     try:
-        # For the preview, we'll return the code as-is to be rendered in an iframe-like manner
-        # Gradio's HTML component can render HTML/CSS directly, but JS needs special handling
         return f"""
         <div style="border: 1px solid #ccc; padding: 10px; height: 400px; overflow: auto;">
             {code}
@@ -21,32 +20,29 @@ def interface():
                 ui_preview = gr.HTML(label="UI Preview")
                 error_output = gr.Textbox(label="Error", interactive=False)
-        # JavaScript execution needs to be handled client-side, so we use _js to inject it
         code_input.change(
             fn=update_ui,
             inputs=code_input,
             outputs=[ui_preview, error_output],
-            js="""
             function(code) {
                 // Create a temporary div to parse the HTML/CSS/JS
                 const tempDiv = document.createElement('div');
                 tempDiv.innerHTML = code;
                 // Handle JavaScript by creating new script elements
-                const scripts = tempDiv.querySelectorAll('script');
-                scripts.forEach(script => {
                     const newScript = document.createElement('script');
                     newScript.textContent = script.textContent;
                     document.body.appendChild(newScript);
                     script.remove(); // Remove original script to avoid double execution
                 });
-                // Wrap the content in a styled div for better presentation
-                return `
-                    <div style="border: 1px solid #ccc; padding: 10px; height: 400px; overflow: auto;">
-                        ${tempDiv.innerHTML}
-                    </div>
-                `;
             }
             """
         )
@@ -56,31 +52,7 @@ def interface():
             with gr.Column():
                 example_buttons = []
                 example_codes = [
-                    ('<h1>Hello World</h1>', "Basic Heading"),
-                    ('<p style="color: red;">This is a paragraph.</p>', "Styled Paragraph"),
-                    ('<button onclick="alert(\'Button clicked!\')">Click me</button>', "Interactive Button"),
-                    ("""
-                    <style>
-                    .box {
-                        width: 100px;
-                        height: 100px;
-                        background-color: blue;
-                    }
-                    </style>
-                    <div class="box"></div>
-                    """, "CSS Box"),
-                    ("""
-                    <style>
-                    .container {
-                        display: flex;
-                        justify-content: space-between;
-                    }
-                    </style>
-                    <div class="container">
-                        <div style="background-color: red; width: 50px; height: 50px;"></div>
-                        <div style="background-color: green; width: 50px; height: 50px;"></div>
-                    </div>
-                    """, "Flexbox Layout"),
                     ("""
                     <!DOCTYPE html>
                     <html lang="en">

 def update_ui(code):
     try:
+        # We'll return the HTML with CSS, and let JavaScript be handled by the browser
         return f"""
         <div style="border: 1px solid #ccc; padding: 10px; height: 400px; overflow: auto;">
             {code}
                 ui_preview = gr.HTML(label="UI Preview")
                 error_output = gr.Textbox(label="Error", interactive=False)
+        # Use _js to handle JavaScript execution in the browser context
         code_input.change(
             fn=update_ui,
             inputs=code_input,
             outputs=[ui_preview, error_output],
+            _js="""
             function(code) {
                 // Create a temporary div to parse the HTML/CSS/JS
                 const tempDiv = document.createElement('div');
                 tempDiv.innerHTML = code;
                 // Handle JavaScript by creating new script elements
+                const scripts = tempDiv.getElementsByTagName('script');
+                const scriptContents = Array.from(scripts).map(script => {
                     const newScript = document.createElement('script');
                     newScript.textContent = script.textContent;
                     document.body.appendChild(newScript);
                     script.remove(); // Remove original script to avoid double execution
+                    return script.textContent;
                 });
+                // Return the HTML content without the script tags for Gradio to display
+                return tempDiv.innerHTML;
             }
             """
         )
             with gr.Column():
                 example_buttons = []
                 example_codes = [
+                    # ... (your existing examples here)
                     ("""
                     <!DOCTYPE html>
                     <html lang="en">