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\n" + result
return new_html, css, js
def combine_code(html, css, js):
return f"""{html}"""
def export_zip(html, css, js):
mem = io.BytesIO()
with zipfile.ZipFile(mem, 'w') as zf:
zf.writestr("index.html", f"{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()