add app.py

app.py

@@ -0,0 +1,310 @@
+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()