import gradio as gr
from utils import generate_website_code, preview_website

with gr.Blocks(theme=gr.themes.Soft(), title="AI Website Builder") as demo:
    gr.Markdown("""
    # 🤖 AI Website Builder
    Create stunning websites using powerful Hugging Face models. Preview your code in real-time!
    
    [Built with anycoder](https://huggingface.co/spaces/akhaliq/anycoder)
    """)
    
    with gr.Row():
        with gr.Column(scale=1):
            prompt = gr.Textbox(
                label="Describe your website",
                placeholder="E.g., 'A modern portfolio website for a photographer with a dark theme'",
                lines=3
            )
            
            model_choice = gr.Dropdown(
                choices=[
                    "OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5",
                    "Salesforce/codegen-350M-mono",
                    "Salesforce/codegen-2B-mono",
                    "bigcode/starcoder",
                    "meta-llama/Llama-2-70b-chat-hf",
                    "meta-llama/Llama-2-13b-chat-hf",
                    "mistralai/Mistral-7B-Instruct-v0.2",
                    "HuggingFaceH4/zephyr-7b-beta",
                    "google/gemma-7b-it",
                    "microsoft/Phi-3-mini-4k-instruct"
                ],
                value="Salesforce/codegen-2B-mono",
                label="Choose AI Model"
            )
            
            generate_btn = gr.Button("Generate Website", variant="primary")
            
        with gr.Column(scale=2):
            with gr.Tab("Code"):
                code_output = gr.Code(
                    label="Generated HTML/CSS/JS",
                    language="html",
                    interactive=True,
                    lines=20
                )
            with gr.Tab("Preview"):
                preview_output = gr.HTML(label="Website Preview")
                
    with gr.Row():
        with gr.Column():
            gr.Examples(
                examples=[
                    ["A simple landing page for a startup with a blue theme"],
                    ["A personal blog with a clean, minimalist design"],
                    ["An e-commerce product showcase page with cards"],
                    ["A restaurant menu with images and pricing"],
                ],
                inputs=[prompt]
            )
    
    generate_btn.click(
        generate_website_code,
        inputs=[prompt, model_choice],
        outputs=code_output
    ).then(
        preview_website,
        inputs=code_output,
        outputs=preview_output
    )
    
    code_output.change(
        preview_website,
        inputs=code_output,
        outputs=preview_output
    )

demo.launch()