Spaces:

hmb
/

yapdemo

Sleeping

File size: 10,927 Bytes

c281498

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 = """
    <svg xmlns="http://www.w3.org/2000/svg" width="260" viewBox="0 0 150 40">
    <defs><clipPath id="a"><path d="M0 .05h149.945v39.9H0Zm0 0"/>
    </clipPath><clipPath id="b"><path d="M129.797.05c11.129 0 20.148 8.934 20.148 19.95s-9.02 19.95-20.148 19.95H20.148C9.02 39.95 0 31.015 0 20S9.02.05 20.148.05Zm0 0"/>
    </clipPath></defs><g clip-path="url(#a)"><g clip-path="url(#b)"><path style="stroke:none;fill-rule:nonzero;fill:#0d63e7;fill-opacity:1" d="M0 .05h150v39.9H0Zm0 0"/></g></g>
    <path style="stroke:none;fill-rule:nonzero;fill:#edeff4;fill-opacity:1" d="M40.305 12.145c.722.5 1.086.984 1.086 1.453 0 .277-.172.664-.512 1.164l-4.797 7.105v4.203c0 .336-.012.59-.031.758a1.701 1.701 0 0 1-.215.582c-.117.223-.316.375-.598.465-.285.086-.664.129-1.136.129-.473 0-.852-.043-1.133-.129-.282-.09-.48-.25-.598-.477a2.01 2.01 0 0 1-.215-.593 7.328 7.328 0 0 1-.031-.778v-4.16l-4.797-7.105c-.344-.5-.512-.887-.512-1.164 0-.47.325-.922.973-1.356.652-.43 1.121-.648 1.398-.648.286 0 .508.062.676.18.25.16.516.46.801.902l3.441 5.449 3.442-5.45c.281-.44.523-.73.734-.87.207-.14.45-.211.723-.211.273 0 .707.183 1.3.55ZM52.008 12.98l6.004 12.278c.25.5.375.875.375 1.12 0 .528-.43 1.005-1.29 1.43-.503.25-.902.376-1.19.376-.29 0-.528-.067-.712-.196a1.309 1.309 0 0 1-.402-.422 23.181 23.181 0 0 1-.336-.664l-1.156-2.375h-6.156l-1.153 2.375c-.152.297-.27.508-.351.641-.078.133-.211.266-.399.406-.187.14-.422.211-.715.211-.285 0-.68-.125-1.18-.37-.863-.411-1.292-.884-1.292-1.411 0-.246.125-.621.383-1.121l5.996-12.297c.164-.336.41-.61.742-.816a1.962 1.962 0 0 1 1.058-.31c.797 0 1.387.384 1.774 1.145Zm-1.801 5.282-1.46 3.011h2.952ZM71.625 15.094c.383.777.574 1.64.574 2.594 0 .953-.191 1.816-.574 2.585-.383.77-.879 1.383-1.484 1.836-1.23.942-2.504 1.41-3.825 1.41h-2.773v2.489c0 .332-.016.586-.04.754a1.75 1.75 0 0 1-.206.582c-.207.394-.785.593-1.734.593-1.04 0-1.645-.269-1.82-.812-.09-.25-.138-.629-.138-1.14V13.772c0-.335.008-.585.032-.757a1.85 1.85 0 0 1 .21-.586c.208-.395.79-.594 1.739-.594h4.754c1.305 0 2.57.469 3.8 1.41.606.453 1.102 1.07 1.485 1.848Zm-5.285 4.531c.441 0 .875-.164 1.305-.484.433-.32.652-.805.652-1.446 0-.648-.219-1.136-.652-1.468-.43-.329-.872-.493-1.329-.493h-2.773v3.891ZM88.66 12.98l6.008 12.278c.246.5.371.875.371 1.12 0 .528-.426 1.005-1.285 1.43-.504.25-.902.376-1.192.376-.289 0-.527-.067-.714-.196a1.336 1.336 0 0 1-.399-.422 21.218 21.218 0 0 1-.34-.664l-1.152-2.375h-6.156l-1.156 2.375a8.617 8.617 0 0 1-.348.641 1.565 1.565 0 0 1-.402.406c-.184.14-.422.211-.711.211-.29 0-.68-.125-1.18-.37-.863-.411-1.293-.884-1.293-1.411 0-.246.125-.621.379-1.121l6-12.297c.16-.336.406-.61.742-.816a1.959 1.959 0 0 1 1.055-.31c.8 0 1.39.384 1.773 1.145Zm-1.797 5.282-1.46 3.011h2.952ZM108.281 15.094c.383.777.574 1.64.574 2.594 0 .953-.19 1.816-.574 2.585-.386.77-.879 1.383-1.488 1.836-1.227.942-2.504 1.41-3.824 1.41h-2.774v2.489c0 .332-.011.586-.035.754a1.843 1.843 0 0 1-.207.582c-.21.394-.789.593-1.738.593-1.035 0-1.64-.269-1.817-.812-.093-.25-.136-.629-.136-1.14V13.772c0-.335.008-.585.031-.757a1.85 1.85 0 0 1 .21-.586c.208-.395.79-.594 1.74-.594h4.753c1.3 0 2.57.469 3.797 1.41.61.453 1.102 1.07 1.488 1.848Zm-5.285 4.531c.442 0 .875-.164 1.305-.484.433-.32.648-.805.648-1.446 0-.648-.215-1.136-.648-1.468-.43-.329-.871-.493-1.332-.493h-2.774v3.891ZM122.32 15.094c.383.777.575 1.64.575 2.594 0 .953-.192 1.816-.575 2.585-.382.77-.879 1.383-1.488 1.836-1.227.942-2.504 1.41-3.82 1.41h-2.778v2.489c0 .332-.011.586-.035.754a1.75 1.75 0 0 1-.207.582c-.21.394-.785.593-1.738.593-1.035 0-1.64-.269-1.817-.812-.093-.25-.136-.629-.136-1.14V13.772c0-.335.008-.585.031-.757a1.85 1.85 0 0 1 .211-.586c.207-.395.789-.594 1.738-.594h4.754c1.3 0 2.57.469 3.797 1.41.61.453 1.106 1.07 1.488 1.848Zm-5.285 4.531c.442 0 .875-.164 1.305-.484.433-.32.652-.805.652-1.446 0-.648-.219-1.136-.652-1.468-.43-.329-.871-.493-1.328-.493h-2.778v3.891Zm0 0"/></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 = """
<div id="browser-window">
  <div id="browser-address-bar">
    <button class="browser-button">&#8592;</button>
    <button class="browser-button">&#8594;</button>
    <button class="browser-button">&#8635;</button>
    <input
      type="text"
      id="browser-address"
    />
    <button class="browser-button maximize-toggle">
        ↗
    </button>
  </div>
  <div id="preview-window" class="gradient-background">
    <iframe
      src="{}"
      style="width: 100%; height: 100%; border: none; background: white;"
    ></iframe>
  </div>
  <div id="version-navigation">
    <button class="version-nav-button">&#8592;</button>
    <span class="version-info">Version x of x</span>
    <button class="version-nav-button">&#8594;</button>
  </div>
</div>
"""
    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"<p>Error: {str(e)}</p>")



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()