Spaces:
Running
Running
| import gradio as gr | |
| from transformers import pipeline | |
| 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() | |
| 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() 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() |