import base64 import re from typing import Dict, List, Tuple import gradio as gr from transformers import pipeline History = List[Tuple[str, str]] Messages = List[Dict[str, str]] css = """ #submit-btn { background-color: #8ac926; border: none; border-radius: 50px; padding: 12px 24px; font-size: 2rem; font-weight: bold; text-transform: uppercase; gap: 8px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transform: rotate(-1deg) scale(1); margin: 0 auto; max-width: 400px; margin-top: 1rem; } #submit-btn:hover { background-color: #6ca91d; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: rotate(-1deg) scale(1.05); } .yap-button { background-color: #8ac926; border: none; border-radius: 50px; padding: 12px 24px; font-size: 2rem; font-weight: bold; text-transform: uppercase; gap: 8px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transform: rotate(-1deg) scale(1); margin: 0 auto; max-width: 400px; margin-top: 1rem; transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.5s ease; } .yap-button:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: rotate(-1deg) scale(1.05); animation: unset; } .yap-button:active { outline: none; } .yap-button img { margin-right: 0; width: 1.7rem; height: 1.7rem; } .stop-yap-button { background-color: #EE4141; } .column { margin: 0 auto; width: 90vw; max-width: 1024px; } .logo-row { display: flex; justify-content: center; margin: 0 10px; } .logo-row svg { width: 100%; height: 100%; transition: all 0.3s ease; } .logo-row svg:hover { transform: rotate(-1deg) scale(1.05); } .browser-window { background-color: #f0f0f0; height: 400px; width: 100%; border-radius: 10px; } .url-bar { background-color: #ddd; height: 40px; width: 100%; z-index: 100; top: 10px; position: relative; display: flex; justify-content: center; } .url-bar-input { background-color: white; width: 98%; height: 30px; position: absolute; } #browser-window { background-color: #2c2c2c; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin: 0 auto; margin-bottom: 0rem; display: flex; flex-direction: column; height: 65vh; } #browser-address-bar { background-color: #3c3c3c; padding: 8px; display: flex; align-items: center; } #browser-address { background-color: #2c2c2c; border: none; padding: 6px 12px; border-radius: 4px; flex-grow: 1; margin: 0 8px; font-size: 0.9rem; font-family: "Ubuntu Mono"; } .browser-button { background-color: transparent; border: none; color: #888; font-size: 1.2rem; cursor: pointer; padding: 0 8px; } #preview-window { flex-grow: 1; background-color: #fff; overflow: auto; position: relative; } #version-navigation { display: flex; justify-content: space-between; align-items: center; font-size: 14px; } .version-nav-button { background-color: #3c3c3c; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; margin-bottom: 0px; } .version-nav-button:hover { background-color: #4c4c4c; } .version-nav-button:disabled { opacity: 0.5; cursor: not-allowed; } .textbox { width: 100%; max-width: 100%; } .form { width: 100%; max-width: 100%; } """ svg = """ """ def remove_code_block(text): pattern = r'```html\n(.+?)\n```' match = re.search(pattern, text, re.DOTALL) if match: return match.group(1).strip() else: return text.strip() def send_to_preview(code): encoded_html = base64.b64encode(code.encode('utf-8')).decode('utf-8') iframe_src = f"data:text/html;charset=utf-8;base64,{encoded_html}" browser_template = """
Version x of x
""" return browser_template.format(iframe_src) def generate_website(query: str): system_prompt = "You are a helpful web development assistant. When asked to create a website, respond with clean, modern HTML code wrapped in ```html``` tags. Include any necessary CSS within a style tag. Make the design responsive and visually appealing." pipe = pipeline("text-generation", model="Qwen/Qwen2.5-0.5B") input_text = f"{system_prompt}\n\nUser: {query}\nAssistant:" try: response = pipe(input_text, max_length=2048, num_return_sequences=1)[0]['generated_text'] assistant_response = response.split("Assistant:")[-1].strip() clean_html = remove_code_block(assistant_response) preview_html = send_to_preview(clean_html) return preview_html except Exception as e: return send_to_preview(f"

Error: {str(e)}

") with gr.Blocks(css=css) as demo: with gr.Column(elem_classes="column"): with gr.Row(): gr.HTML(value=svg, elem_classes="logo-row") with gr.Row(): with gr.Column(): chatbot = gr.Chatbot(label="Chatbot", type="messages") text_input = gr.Textbox( elem_classes="textbox", label="Describe the website you want to build", placeholder="Example: Create a modern landing page with a hero section and contact form", lines=3 ) with gr.Column(elem_classes="column"): preview = gr.HTML(elem_id="preview-window", value=send_to_preview("")) submit_btn = gr.Button("Generate", variant="primary", elem_id="submit-btn") def on_submit(message, history): history = history or [] print(message) history.append({"role": "user", "content": message}) preview_html = generate_website(message) return history, preview_html, gr.Textbox(value=None) submit_btn.click( fn=on_submit, inputs=[text_input, chatbot], outputs=[chatbot, preview, text_input], ) if __name__ == "__main__": demo.queue().launch()