|
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">←</button> |
|
<button class="browser-button">→</button> |
|
<button class="browser-button">↻</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">←</button> |
|
<span class="version-info">Version x of x</span> |
|
<button class="version-nav-button">→</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() |
|
|