Spaces:
Sleeping
Sleeping
File size: 3,386 Bytes
114d818 299f2c4 114d818 535e1e3 50d915d f80e4d3 535e1e3 114d818 535e1e3 299f2c4 114d818 299f2c4 535e1e3 299f2c4 535e1e3 114d818 299f2c4 535e1e3 299f2c4 535e1e3 299f2c4 535e1e3 299f2c4 535e1e3 114d818 535e1e3 299f2c4 535e1e3 299f2c4 535e1e3 114d818 535e1e3 114d818 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
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() |