yapdemo / app.py
Hannah
add app.py
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()