Spaces:
Configuration error
Configuration error
Update app.py
Browse files
app.py
CHANGED
|
@@ -1,22 +1,151 @@
|
|
| 1 |
import gradio as gr
|
| 2 |
-
from transformers import
|
| 3 |
-
import
|
|
|
|
|
|
|
|
|
|
| 4 |
|
| 5 |
-
|
|
|
|
|
|
|
|
|
|
| 6 |
|
| 7 |
-
|
| 8 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 9 |
|
| 10 |
-
def
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 15 |
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
import gradio as gr
|
| 2 |
+
from transformers import AutoModelForCausalLM, AutoTokenizer
|
| 3 |
+
import time
|
| 4 |
+
import os
|
| 5 |
+
from utils.zip_generator import create_zip
|
| 6 |
+
from utils.code_explainer import explain_code
|
| 7 |
|
| 8 |
+
# Load the AI model (using DeepSeek Coder 1.3B as default)
|
| 9 |
+
MODEL_NAME = "deepseek-ai/deepseek-coder-1.3b"
|
| 10 |
+
tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME)
|
| 11 |
+
model = AutoModelForCausalLM.from_pretrained(MODEL_NAME)
|
| 12 |
|
| 13 |
+
# Predefined prompts for common website types
|
| 14 |
+
PREBUILT_PROMPTS = {
|
| 15 |
+
"Portfolio": "Create a modern portfolio website with dark mode toggle, hero section, about me, projects grid, and contact form. Use Tailwind CSS for styling.",
|
| 16 |
+
"Blog": "Build a blog homepage with responsive navbar, featured post section, article cards grid, and newsletter subscription. Make it minimalist and elegant.",
|
| 17 |
+
"Landing Page": "Design a one-page landing page for a SaaS product with hero section, features, testimonials, pricing table, and CTA button. Use bright colors.",
|
| 18 |
+
"E-commerce": "Create an e-commerce product page with image gallery, product details, add to cart button, and related products section. Make it mobile-friendly."
|
| 19 |
+
}
|
| 20 |
|
| 21 |
+
def generate_website(prompt, use_prebuilt=False, explain=False):
|
| 22 |
+
start_time = time.time()
|
| 23 |
+
|
| 24 |
+
# Use prebuilt prompt if selected
|
| 25 |
+
if use_prebuilt and prompt in PREBUILT_PROMPTS:
|
| 26 |
+
prompt = PREBUILT_PROMPTS[prompt]
|
| 27 |
+
|
| 28 |
+
# Construct the full prompt for the AI
|
| 29 |
+
full_prompt = f"""Create a complete, responsive website based on this description:
|
| 30 |
+
{prompt}
|
| 31 |
|
| 32 |
+
Requirements:
|
| 33 |
+
- Use HTML, CSS, and minimal JavaScript
|
| 34 |
+
- Make it mobile-friendly
|
| 35 |
+
- Include all necessary UI elements
|
| 36 |
+
- Add comments in the code
|
| 37 |
+
|
| 38 |
+
Here's the complete code:
|
| 39 |
+
<!DOCTYPE html>
|
| 40 |
+
<html lang="en">
|
| 41 |
+
<head>
|
| 42 |
+
<meta charset="UTF-8">
|
| 43 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 44 |
+
<title>Generated Website</title>
|
| 45 |
+
<style>"""
|
| 46 |
+
|
| 47 |
+
# Generate code using the AI model
|
| 48 |
+
inputs = tokenizer(full_prompt, return_tensors="pt")
|
| 49 |
+
outputs = model.generate(**inputs, max_length=1500, temperature=0.7)
|
| 50 |
+
generated_code = tokenizer.decode(outputs[0], skip_special_tokens=True)
|
| 51 |
+
|
| 52 |
+
# Extract the HTML part (from the prompt onward)
|
| 53 |
+
html_start = generated_code.find("<!DOCTYPE html>")
|
| 54 |
+
if html_start == -1:
|
| 55 |
+
html_start = generated_code.find("<html")
|
| 56 |
+
|
| 57 |
+
if html_start != -1:
|
| 58 |
+
generated_code = generated_code[html_start:]
|
| 59 |
+
|
| 60 |
+
# Create explanation if requested
|
| 61 |
+
explanation = ""
|
| 62 |
+
if explain:
|
| 63 |
+
explanation = explain_code(generated_code)
|
| 64 |
+
|
| 65 |
+
# Generate downloadable ZIP
|
| 66 |
+
zip_path = create_zip(generated_code)
|
| 67 |
+
|
| 68 |
+
processing_time = time.time() - start_time
|
| 69 |
+
|
| 70 |
+
return generated_code, zip_path, explanation, f"Generated in {processing_time:.2f} seconds"
|
| 71 |
+
|
| 72 |
+
# Gradio UI
|
| 73 |
+
with gr.Blocks(title="AI Website Builder", theme=gr.themes.Soft()) as demo:
|
| 74 |
+
gr.Markdown("# 🚀 AI Website Builder")
|
| 75 |
+
gr.Markdown("Describe the website you want and we'll generate the code for you!")
|
| 76 |
+
|
| 77 |
+
with gr.Row():
|
| 78 |
+
with gr.Column(scale=3):
|
| 79 |
+
prompt_type = gr.Dropdown(
|
| 80 |
+
choices=list(PREBUILT_PROMPTS.keys()),
|
| 81 |
+
label="Or select a prebuilt template",
|
| 82 |
+
value="Portfolio"
|
| 83 |
+
)
|
| 84 |
+
user_prompt = gr.Textbox(
|
| 85 |
+
label="Describe your website",
|
| 86 |
+
placeholder="e.g., 'A modern portfolio with dark mode and contact form'",
|
| 87 |
+
lines=3
|
| 88 |
+
)
|
| 89 |
+
explain_checkbox = gr.Checkbox(label="Explain the generated code", value=False)
|
| 90 |
+
generate_btn = gr.Button("Generate Website", variant="primary")
|
| 91 |
+
|
| 92 |
+
with gr.Column(scale=2):
|
| 93 |
+
gr.Examples(
|
| 94 |
+
examples=[
|
| 95 |
+
["A minimalist personal blog with dark mode"],
|
| 96 |
+
["A restaurant homepage with menu and reservation form"],
|
| 97 |
+
["A tech startup landing page with animated features"]
|
| 98 |
+
],
|
| 99 |
+
inputs=user_prompt,
|
| 100 |
+
label="Example Prompts"
|
| 101 |
+
)
|
| 102 |
+
|
| 103 |
+
with gr.Row():
|
| 104 |
+
code_output = gr.Code(
|
| 105 |
+
label="Generated Code",
|
| 106 |
+
language="html",
|
| 107 |
+
interactive=True
|
| 108 |
+
)
|
| 109 |
+
html_output = gr.HTML(
|
| 110 |
+
label="Live Preview",
|
| 111 |
+
interactive=False
|
| 112 |
+
)
|
| 113 |
+
|
| 114 |
+
with gr.Row():
|
| 115 |
+
time_output = gr.Textbox(label="Generation Time")
|
| 116 |
+
download_btn = gr.Button("Download Code as ZIP")
|
| 117 |
+
download_file = gr.File(label="Download", visible=False)
|
| 118 |
+
|
| 119 |
+
explanation_output = gr.Textbox(
|
| 120 |
+
label="Code Explanation",
|
| 121 |
+
visible=False,
|
| 122 |
+
lines=5
|
| 123 |
+
)
|
| 124 |
+
|
| 125 |
+
# Event handlers
|
| 126 |
+
generate_btn.click(
|
| 127 |
+
fn=generate_website,
|
| 128 |
+
inputs=[user_prompt, prompt_type, explain_checkbox],
|
| 129 |
+
outputs=[code_output, download_file, explanation_output, time_output]
|
| 130 |
+
)
|
| 131 |
+
|
| 132 |
+
code_output.change(
|
| 133 |
+
fn=lambda x: x,
|
| 134 |
+
inputs=code_output,
|
| 135 |
+
outputs=html_output
|
| 136 |
+
)
|
| 137 |
+
|
| 138 |
+
download_btn.click(
|
| 139 |
+
fn=lambda x: x,
|
| 140 |
+
inputs=download_file,
|
| 141 |
+
outputs=download_file
|
| 142 |
+
)
|
| 143 |
+
|
| 144 |
+
explain_checkbox.change(
|
| 145 |
+
fn=lambda x: gr.Textbox(visible=x),
|
| 146 |
+
inputs=explain_checkbox,
|
| 147 |
+
outputs=explanation_output
|
| 148 |
+
)
|
| 149 |
+
|
| 150 |
+
if __name__ == "__main__":
|
| 151 |
+
demo.launch()
|