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\n" + result
return new_html, css, js, "✅ AI suggestion appended."
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(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()