Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| 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() | |
| 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() |