File size: 3,243 Bytes
114d818
299f2c4
 
 
114d818
299f2c4
06858da
f80e4d3
299f2c4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
114d818
299f2c4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
114d818
299f2c4
 
 
 
 
 
 
 
114d818
299f2c4
 
 
 
 
 
 
 
 
 
 
 
 
114d818
 
299f2c4
 
 
 
 
 
 
 
 
 
 
 
 
114d818
299f2c4
 
 
 
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
import gradio as gr
from transformers import pipeline
import zipfile
import io

# Load AI assistant (can change model to faster one if needed)
assistant = pipeline("text-generation", model="tiiuae/falcon-7b-instruct", max_new_tokens=1024)

def generate_code(prompt):
    formatted = f"Create a full website. Include:\n[HTML]\n...HTML here...\n[CSS]\n...CSS here...\n[JS]\n...JS here...\nUser Prompt: {prompt}"
    response = assistant(formatted)[0]["generated_text"]
    
    # Try to split out HTML, CSS, JS sections
    html = css = js = ""
    if "[HTML]" in response and "[CSS]" in response and "[JS]" in response:
        try:
            html = response.split("[HTML]")[1].split("[CSS]")[0].strip()
            css = response.split("[CSS]")[1].split("[JS]")[0].strip()
            js = response.split("[JS]")[1].strip()
        except:
            html = response
    else:
        html = response

    return html, css, js, f"✅ AI generated your website!"

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):
    in_memory = io.BytesIO()
    with zipfile.ZipFile(in_memory, 'w') as zf:
        zf.writestr("index.html", f"<!DOCTYPE html><html><head><link rel='stylesheet' href='style.css'></head><body>\n{html}\n<script src='script.js'></script></body></html>")
        zf.writestr("style.css", css)
        zf.writestr("script.js", js)
    in_memory.seek(0)
    return (in_memory, "website.zip")

with gr.Blocks(css="""
body { font-family: 'Courier New', monospace; background-color: #1e1e1e; color: white; }
.gr-button { background-color: #007acc; color: white; border: none; }
.gr-code textarea { background-color: #252526; color: white; font-size: 14px; }
.gr-textbox textarea { background-color: #1e1e1e; color: white; }
.gr-markdown h2 { color: #61dafb; }
""") as demo:
    with gr.Row():
        with gr.Column(scale=1):
            gr.Markdown("## 🤖 AI Assistant")
            prompt = gr.Textbox(label="Describe the website you want", placeholder="e.g., A landing page for a pet adoption service")
            generate_btn = gr.Button("✨ Generate Website")
            status = gr.Textbox(label="Status")

        with gr.Column(scale=2):
            gr.Markdown("## 💻 Code Editor (HTML / CSS / JS)")
            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("JavaScript"):
                    js_editor = gr.Code(language="javascript", label="JavaScript")

            run_btn = gr.Button("▶️ Preview")
            preview = gr.HTML()
            zip_btn = gr.Button("📦 Export as ZIP")
            zip_file = gr.File()

    # Button Actions
    generate_btn.click(generate_code, inputs=prompt, outputs=[html_editor, css_editor, js_editor, status])
    run_btn.click(combine_code, inputs=[html_editor, css_editor, js_editor], outputs=preview)
    zip_btn.click(export_zip, inputs=[html_editor, css_editor, js_editor], outputs=zip_file)

demo.launch()