Spaces:
Running
Running
Update app.py
Browse files
app.py
CHANGED
|
@@ -1,41 +1,11 @@
|
|
| 1 |
import gradio as gr
|
| 2 |
-
import re
|
| 3 |
|
| 4 |
def update_ui(code):
|
| 5 |
try:
|
| 6 |
-
#
|
| 7 |
-
|
| 8 |
-
if html_content:
|
| 9 |
-
html_content = html_content.group(0)
|
| 10 |
-
else:
|
| 11 |
-
html_content = code # If no <html> tag, assume all is HTML content
|
| 12 |
-
|
| 13 |
-
# Extract CSS if present in a <style> tag
|
| 14 |
-
css_content = re.search(r'<style[^>]*>[\s\S]*?<\/style>', code, re.IGNORECASE)
|
| 15 |
-
css_string = ''
|
| 16 |
-
if css_content:
|
| 17 |
-
css_string = css_content.group(0)
|
| 18 |
-
|
| 19 |
-
# Remove <style> tags for direct application
|
| 20 |
-
css_only = re.sub(r'<style>|<\/style>', '', css_string) if css_string else ''
|
| 21 |
-
|
| 22 |
-
# Extract JavaScript if present in a <script> tag
|
| 23 |
-
js_content = re.search(r'<script[^>]*>[\s\S]*?<\/script>', code, re.IGNORECASE)
|
| 24 |
-
js_string = ''
|
| 25 |
-
if js_content:
|
| 26 |
-
js_string = js_content.group(0)
|
| 27 |
-
|
| 28 |
-
# Remove <script> tags for Gradio's js= parameter
|
| 29 |
-
js_only = re.sub(r'<script>|<\/script>', '', js_string) if js_string else ''
|
| 30 |
-
|
| 31 |
-
# Combine HTML with CSS for preview
|
| 32 |
-
ui_output = f"""
|
| 33 |
-
<style>{css_only}</style>
|
| 34 |
-
{html_content}
|
| 35 |
-
"""
|
| 36 |
-
return ui_output, js_only
|
| 37 |
except Exception as e:
|
| 38 |
-
return "",
|
| 39 |
|
| 40 |
def interface():
|
| 41 |
with gr.Blocks() as demo:
|
|
@@ -43,12 +13,34 @@ def interface():
|
|
| 43 |
with gr.Row():
|
| 44 |
code_input = gr.Code(label="Write your HTML/CSS/JS here", language="html")
|
| 45 |
with gr.Column():
|
| 46 |
-
#
|
| 47 |
ui_preview = gr.HTML(label="UI Preview")
|
| 48 |
error_output = gr.Textbox(label="Error", interactive=False)
|
| 49 |
|
| 50 |
-
#
|
| 51 |
-
code_input.change(
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 52 |
return demo
|
| 53 |
|
| 54 |
if __name__ == "__main__":
|
|
|
|
| 1 |
import gradio as gr
|
|
|
|
| 2 |
|
| 3 |
def update_ui(code):
|
| 4 |
try:
|
| 5 |
+
# Here, we're not parsing JavaScript out but passing the whole code through
|
| 6 |
+
return code, ""
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 7 |
except Exception as e:
|
| 8 |
+
return "", str(e)
|
| 9 |
|
| 10 |
def interface():
|
| 11 |
with gr.Blocks() as demo:
|
|
|
|
| 13 |
with gr.Row():
|
| 14 |
code_input = gr.Code(label="Write your HTML/CSS/JS here", language="html")
|
| 15 |
with gr.Column():
|
| 16 |
+
# For JavaScript to work, you need to use the _js argument in the HTML component
|
| 17 |
ui_preview = gr.HTML(label="UI Preview")
|
| 18 |
error_output = gr.Textbox(label="Error", interactive=False)
|
| 19 |
|
| 20 |
+
# We'll use the _js argument to inject JavaScript directly into the HTML component
|
| 21 |
+
code_input.change(
|
| 22 |
+
fn=update_ui,
|
| 23 |
+
inputs=code_input,
|
| 24 |
+
outputs=[ui_preview, error_output],
|
| 25 |
+
_js="""
|
| 26 |
+
function(code) {
|
| 27 |
+
// This function runs in the browser context, not Python
|
| 28 |
+
const tempDiv = document.createElement('div');
|
| 29 |
+
tempDiv.innerHTML = code;
|
| 30 |
+
|
| 31 |
+
// Extract scripts from the code
|
| 32 |
+
const scripts = tempDiv.querySelectorAll('script');
|
| 33 |
+
for (let script of scripts) {
|
| 34 |
+
const newScript = document.createElement('script');
|
| 35 |
+
newScript.textContent = script.textContent;
|
| 36 |
+
script.parentNode.replaceChild(newScript, script);
|
| 37 |
+
}
|
| 38 |
+
|
| 39 |
+
// Return the HTML content without the script tags for Gradio to display
|
| 40 |
+
return tempDiv.innerHTML;
|
| 41 |
+
}
|
| 42 |
+
"""
|
| 43 |
+
)
|
| 44 |
return demo
|
| 45 |
|
| 46 |
if __name__ == "__main__":
|