Spaces:

parrotmaker
/

ai-canvas

Running

App Files Files Community

parrotmaker commited on Jun 17

Commit

cc76d5e

verified ·

1 Parent(s): 535e1e3

Update app.py

Browse files

Files changed (1) hide show

app.py +34 -65

app.py CHANGED Viewed

@@ -3,30 +3,15 @@ from transformers import pipeline
 import zipfile
 import io
-# Lightweight open model
 assistant = pipeline("text-generation", model="Salesforce/codegen-350M-multi", max_new_tokens=512)
 def generate_code(prompt, html, css, js):
-    base_prompt = f"# HTML, CSS, and JavaScript website task:\n# {prompt}\n"
-    result = assistant(base_prompt)[0]["generated_text"]
-    # Append output to current HTML
-    new_html = html + "\n<!-- AI Suggestion -->\n" + result
-    return new_html, css, js, "✅ AI suggestion appended."
 def combine_code(html, css, js):
-    return f"""
-<!DOCTYPE html>
-<html>
-<head>
-  <style>{css}</style>
-</head>
-<body>
-{html}
-<script>{js}</script>
-</body>
-</html>
-"""
 def export_zip(html, css, js):
     mem = io.BytesIO()
@@ -37,57 +22,41 @@ def export_zip(html, css, js):
     mem.seek(0)
     return (mem, "website.zip")
-with gr.Blocks(css="""
-body { font-family: 'Inter', sans-serif; background-color: #1e1e1e; color: #ffffff; }
-.gr-button { background-color: #007acc; color: white; border: none; border-radius: 8px; margin-right: 0.5rem; }
-.gr-textbox textarea, .gr-code textarea { background-color: #252526; color: white; font-size: 14px; }
-.gr-markdown h2 { color: #61dafb; }
-.gr-tabitem { background-color: #1e1e1e; }
-""") as demo:
     with gr.Row():
-        with gr.Column(scale=1):
-            gr.Markdown("## 🤖 AI Assistant")
-            user_prompt = gr.Textbox(label="Ask AI to add or edit something:", placeholder="e.g., Add a sticky navbar or change background color")
-            ai_status = gr.Textbox(label="Status")
-            gr.Markdown("### AI Response Log")
-            ai_log = gr.Textbox(lines=12, interactive=False, label="Raw AI Output")
-        with gr.Column(scale=2):
-            gr.Markdown("## 💻 Code Workspace")
-            # Menu bar
-            with gr.Row():
-                generate_btn = gr.Button("✨ Ask AI")
-                preview_btn = gr.Button("▶️ Preview Website")
-                export_btn = gr.Button("📦 Export as ZIP")
-                zip_out = gr.File(interactive=False)
             with gr.Tabs():
-                with gr.Tab("Editor"):
-                    with gr.Tabs():
-                        with gr.Tab("HTML"):
-                            html_editor = gr.Code(language="html", label="HTML")
-                        with gr.Tab("CSS"):
-                            css_editor = gr.Code(language="css", label="CSS")
-                        with gr.Tab("JS"):
-                            js_editor = gr.Code(language="javascript", label="JavaScript")
                 with gr.Tab("Preview"):
                     live_preview = gr.HTML()
-    # Hook up buttons
-    generate_btn.click(
-        generate_code,
-        [user_prompt, html_editor, css_editor, js_editor],
-        [html_editor, css_editor, js_editor, ai_status]
-    )
-    generate_btn.click(
-        generate_code,
-        [user_prompt, html_editor, css_editor, js_editor],
-        ai_log
-    )
-    preview_btn.click(combine_code, [html_editor, css_editor, js_editor], live_preview)
-    export_btn.click(export_zip, [html_editor, css_editor, js_editor], zip_out)
 demo.launch()

 import zipfile
 import io
 assistant = pipeline("text-generation", model="Salesforce/codegen-350M-multi", max_new_tokens=512)
 def generate_code(prompt, html, css, js):
+    result = assistant(f"# Task: {prompt}\n")[0]["generated_text"]
+    new_html = html + "\n<!-- AI edit -->\n" + result
+    return new_html, css, js
 def combine_code(html, css, js):
+    return f"""<!DOCTYPE html><html><head><style>{css}</style></head><body>{html}<script>{js}</script></body></html>"""
 def export_zip(html, css, js):
     mem = io.BytesIO()
     mem.seek(0)
     return (mem, "website.zip")
+with gr.Blocks() as demo:
     with gr.Row():
+        # Left: AI Assistant
+        with gr.Column(scale=1, min_width=250):
+            gr.Markdown("### 🤖 Assistant")
+            ai_chat_log = gr.Textbox(label="AI Output", lines=18, interactive=False)
+            ai_input = gr.Textbox(label="Write what you want ✨")
+            ai_button = gr.Button("Generate")
+        # Right: Code Editor and Tools
+        with gr.Column(scale=3):
+            with gr.Row(equal_height=True):
+                with gr.Row():
+                    html_tab = gr.Button("index.html")
+                    css_tab = gr.Button("styles.css")
+                    js_tab = gr.Button("script.js")
+                    plus_tab = gr.Button("+")
+                with gr.Row():
+                    preview_button = gr.Button("▶️ Run")
+                    download_button = gr.Button("📦 Download")
+                    zip_file = gr.File(interactive=False)
             with gr.Tabs():
+                with gr.Tab("HTML"):
+                    html_editor = gr.Code(language="html", label=None)
+                with gr.Tab("CSS"):
+                    css_editor = gr.Code(language="css", label=None)
+                with gr.Tab("JS"):
+                    js_editor = gr.Code(language="javascript", label=None)
                 with gr.Tab("Preview"):
                     live_preview = gr.HTML()
+    # Logic hooks
+    ai_button.click(generate_code, [ai_input, html_editor, css_editor, js_editor], [html_editor, css_editor, js_editor])
+    preview_button.click(combine_code, [html_editor, css_editor, js_editor], live_preview)
+    download_button.click(export_zip, [html_editor, css_editor, js_editor], zip_file)
 demo.launch()