Spaces:

parrotmaker
/

ai-canvas

Running

App Files Files Community

parrotmaker commited on Jun 17

Commit

535e1e3

verified ·

1 Parent(s): 50d915d

Update app.py

Browse files

Files changed (1) hide show

app.py +53 -44

app.py CHANGED Viewed

@@ -3,26 +3,16 @@ from transformers import pipeline
 import zipfile
 import io
-# Load AI assistant (can change model to faster one if needed)
 assistant = pipeline("text-generation", model="Salesforce/codegen-350M-multi", max_new_tokens=512)
-def generate_code(prompt):
-    formatted = f"Create a full website. Include:\n[HTML]\n...HTML here...\n[CSS]\n...CSS here...\n[JS]\n...JS here...\nUser Prompt: {prompt}"
-    response = assistant(formatted)[0]["generated_text"]
-    # Try to split out HTML, CSS, JS sections
-    html = css = js = ""
-    if "[HTML]" in response and "[CSS]" in response and "[JS]" in response:
-        try:
-            html = response.split("[HTML]")[1].split("[CSS]")[0].strip()
-            css = response.split("[CSS]")[1].split("[JS]")[0].strip()
-            js = response.split("[JS]")[1].strip()
-        except:
-            html = response
-    else:
-        html = response
-    return html, css, js, f"✅ AI generated your website!"
 def combine_code(html, css, js):
     return f"""
@@ -39,46 +29,65 @@ def combine_code(html, css, js):
 """
 def export_zip(html, css, js):
-    in_memory = io.BytesIO()
-    with zipfile.ZipFile(in_memory, 'w') as zf:
-        zf.writestr("index.html", f"<!DOCTYPE html><html><head><link rel='stylesheet' href='style.css'></head><body>\n{html}\n<script src='script.js'></script></body></html>")
         zf.writestr("style.css", css)
         zf.writestr("script.js", js)
-    in_memory.seek(0)
-    return (in_memory, "website.zip")
 with gr.Blocks(css="""
-body { font-family: 'Courier New', monospace; background-color: #1e1e1e; color: white; }
-.gr-button { background-color: #007acc; color: white; border: none; }
-.gr-code textarea { background-color: #252526; color: white; font-size: 14px; }
-.gr-textbox textarea { background-color: #1e1e1e; color: white; }
 .gr-markdown h2 { color: #61dafb; }
 """) as demo:
     with gr.Row():
         with gr.Column(scale=1):
             gr.Markdown("## 🤖 AI Assistant")
-            prompt = gr.Textbox(label="Describe the website you want", placeholder="e.g., A landing page for a pet adoption service")
-            generate_btn = gr.Button("✨ Generate Website")
-            status = gr.Textbox(label="Status")
         with gr.Column(scale=2):
-            gr.Markdown("## 💻 Code Editor (HTML / CSS / JS)")
             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("JavaScript"):
-                    js_editor = gr.Code(language="javascript", label="JavaScript")
-            run_btn = gr.Button("▶️ Preview")
-            preview = gr.HTML()
-            zip_btn = gr.Button("📦 Export as ZIP")
-            zip_file = gr.File()
-    # Button Actions
-    generate_btn.click(generate_code, inputs=prompt, outputs=[html_editor, css_editor, js_editor, status])
-    run_btn.click(combine_code, inputs=[html_editor, css_editor, js_editor], outputs=preview)
-    zip_btn.click(export_zip, inputs=[html_editor, css_editor, js_editor], outputs=zip_file)
 demo.launch()

 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"""
 """
 def export_zip(html, css, js):
+    mem = io.BytesIO()
+    with zipfile.ZipFile(mem, 'w') as zf:
+        zf.writestr("index.html", f"<!DOCTYPE html><html><head><link rel='stylesheet' href='style.css'></head><body>{html}<script src='script.js'></script></body></html>")
         zf.writestr("style.css", css)
         zf.writestr("script.js", 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()