app.py

# app.py
import gradio as gr
import json
import os
import random
import string
from html_generator import generate_website_html

# CSS for styling the interface
css = """
body {
    font-family: 'Inter', sans-serif;
    background-color: #f9fafb;
}
.container {
    max-width: 900px;
    margin: 0 auto;
}
.header {
    text-align: center;
    margin-bottom: 20px;
}
.header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1f2937;
}
.header p {
    font-size: 1.1rem;
    color: #6b7280;
}
.output-container {
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}
.prompt-box {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 15px;
}
.generate-btn {
    background-color: #3b82f6 !important;
    color: white !important;
}
.generate-btn:hover {
    background-color: #2563eb !important;
}
.example-btn {
    background-color: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
}
"""

# Function to generate a random ID for the website
def generate_site_id():
    letters = string.ascii_lowercase + string.digits
    return ''.join(random.choice(letters) for i in range(8))

# List of example prompts
example_prompts = [
    "Create a landing page for a fitness app with a modern design",
    "Make a personal portfolio website for a photographer with a dark theme",
    "Design a restaurant website with menu, about us, and contact sections",
    "Build a simple e-commerce product page for a smart watch",
    "Create a tech startup landing page with features and pricing sections"
]

# Function to handle website generation
def create_website(prompt):
    site_id = generate_site_id()
    
    try:
        # Generate HTML content based on the prompt
        html_content = generate_website_html(prompt)
        
        # Save the HTML content to a file
        os.makedirs('websites', exist_ok=True)
        file_path = f"websites/{site_id}.html"
        with open(file_path, "w") as f:
            f.write(html_content)
        
        # In a real Hugging Face Space, you might use a different mechanism to serve the file
        # For demo purposes, we'll return the HTML directly
        preview_html = f"""
        <div style="padding: 10px; background-color: #f0f0f0; border-radius: 8px; margin-bottom: 10px;">
            <p><strong>Site ID:</strong> {site_id}</p>
            <p><strong>Prompt:</strong> {prompt}</p>
        </div>
        <div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
            <iframe srcdoc="{html_content.replace('"', '&quot;')}" width="100%" height="600px"></iframe>
        </div>
        """
        
        return preview_html, html_content
    
    except Exception as e:
        return f"Error generating website: {str(e)}", ""

# Define the Gradio interface
with gr.Blocks(css=css) as demo:
    with gr.Column(elem_classes="container"):
        gr.HTML("""
        <div class="header">
            <h1>🚀 InstaSite</h1>
            <p>Generate a complete website from a simple prompt. Describe what you want, and we'll create it.</p>
        </div>
        """)
        
        with gr.Row():
            prompt_input = gr.Textbox(
                placeholder="Describe the website you want to create...",
                label="Your Website Prompt",
                elem_classes="prompt-box"
            )
        
        with gr.Row():
            generate_btn = gr.Button("Generate Website", elem_classes="generate-btn")
        
        with gr.Row():
            gr.HTML("<p>Need inspiration? Try one of these examples:</p>")
        
        with gr.Row():
            example_buttons = [gr.Button(f"Example {i+1}", elem_classes="example-btn") for i in range(5)]
        
        with gr.Accordion("Advanced Options", open=False):
            gr.Checkbox(label="Include responsive design", value=True)
            gr.Checkbox(label="Generate CSS animations", value=False)
            gr.Dropdown(["Light", "Dark", "Colorful"], label="Color Theme", value="Light")
        
        output_preview = gr.HTML(elem_classes="output-container")
        output_code = gr.Code(language="html", label="HTML Code", visible=False)
        
        # Set up button actions
        generate_btn.click(create_website, inputs=[prompt_input], outputs=[output_preview, output_code])
        
        # Set up example button actions
        for i, btn in enumerate(example_buttons):
            btn.click(lambda _, i=i: example_prompts[i], outputs=prompt_input)

# Launch the app
if __name__ == "__main__":
    demo.launch(share=True)