File size: 2,623 Bytes
114d818
299f2c4
 
 
114d818
50d915d
f80e4d3
535e1e3
cc76d5e
 
 
299f2c4
 
cc76d5e
114d818
299f2c4
535e1e3
 
 
299f2c4
 
535e1e3
 
114d818
cc76d5e
299f2c4
cc76d5e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
535e1e3
299f2c4
cc76d5e
 
 
 
 
 
535e1e3
 
299f2c4
cc76d5e
 
 
 
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
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()