Spaces:
Configuration error
Configuration error
| import gradio as gr | |
| from transformers import AutoModelForCausalLM, AutoTokenizer | |
| import time | |
| import os | |
| from utils.zip_generator import create_zip | |
| from utils.code_explainer import explain_code | |
| # Load the AI model (using DeepSeek Coder 1.3B as default) | |
| MODEL_NAME = "deepseek-ai/deepseek-coder-1.3b" | |
| tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME) | |
| model = AutoModelForCausalLM.from_pretrained(MODEL_NAME) | |
| # Predefined prompts for common website types | |
| PREBUILT_PROMPTS = { | |
| "Portfolio": "Create a modern portfolio website with dark mode toggle, hero section, about me, projects grid, and contact form. Use Tailwind CSS for styling.", | |
| "Blog": "Build a blog homepage with responsive navbar, featured post section, article cards grid, and newsletter subscription. Make it minimalist and elegant.", | |
| "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.", | |
| "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." | |
| } | |
| def generate_website(prompt, use_prebuilt=False, explain=False): | |
| start_time = time.time() | |
| # Use prebuilt prompt if selected | |
| if use_prebuilt and prompt in PREBUILT_PROMPTS: | |
| prompt = PREBUILT_PROMPTS[prompt] | |
| # Construct the full prompt for the AI | |
| full_prompt = f"""Create a complete, responsive website based on this description: | |
| {prompt} | |
| Requirements: | |
| - Use HTML, CSS, and minimal JavaScript | |
| - Make it mobile-friendly | |
| - Include all necessary UI elements | |
| - Add comments in the code | |
| Here's the complete code: | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Generated Website</title> | |
| <style>""" | |
| # Generate code using the AI model | |
| inputs = tokenizer(full_prompt, return_tensors="pt") | |
| outputs = model.generate(**inputs, max_length=1500, temperature=0.7) | |
| generated_code = tokenizer.decode(outputs[0], skip_special_tokens=True) | |
| # Extract the HTML part (from the prompt onward) | |
| html_start = generated_code.find("<!DOCTYPE html>") | |
| if html_start == -1: | |
| html_start = generated_code.find("<html") | |
| if html_start != -1: | |
| generated_code = generated_code[html_start:] | |
| # Create explanation if requested | |
| explanation = "" | |
| if explain: | |
| explanation = explain_code(generated_code) | |
| # Generate downloadable ZIP | |
| zip_path = create_zip(generated_code) | |
| processing_time = time.time() - start_time | |
| return generated_code, zip_path, explanation, f"Generated in {processing_time:.2f} seconds" | |
| # Gradio UI | |
| with gr.Blocks(title="AI Website Builder", theme=gr.themes.Soft()) as demo: | |
| gr.Markdown("# 🚀 AI Website Builder") | |
| gr.Markdown("Describe the website you want and we'll generate the code for you!") | |
| with gr.Row(): | |
| with gr.Column(scale=3): | |
| prompt_type = gr.Dropdown( | |
| choices=list(PREBUILT_PROMPTS.keys()), | |
| label="Or select a prebuilt template", | |
| value="Portfolio" | |
| ) | |
| user_prompt = gr.Textbox( | |
| label="Describe your website", | |
| placeholder="e.g., 'A modern portfolio with dark mode and contact form'", | |
| lines=3 | |
| ) | |
| explain_checkbox = gr.Checkbox(label="Explain the generated code", value=False) | |
| generate_btn = gr.Button("Generate Website", variant="primary") | |
| with gr.Column(scale=2): | |
| gr.Examples( | |
| examples=[ | |
| ["A minimalist personal blog with dark mode"], | |
| ["A restaurant homepage with menu and reservation form"], | |
| ["A tech startup landing page with animated features"] | |
| ], | |
| inputs=user_prompt, | |
| label="Example Prompts" | |
| ) | |
| with gr.Row(): | |
| code_output = gr.Code( | |
| label="Generated Code", | |
| language="html", | |
| interactive=True | |
| ) | |
| html_output = gr.HTML( | |
| label="Live Preview", | |
| interactive=False | |
| ) | |
| with gr.Row(): | |
| time_output = gr.Textbox(label="Generation Time") | |
| download_btn = gr.Button("Download Code as ZIP") | |
| download_file = gr.File(label="Download", visible=False) | |
| explanation_output = gr.Textbox( | |
| label="Code Explanation", | |
| visible=False, | |
| lines=5 | |
| ) | |
| # Event handlers | |
| generate_btn.click( | |
| fn=generate_website, | |
| inputs=[user_prompt, prompt_type, explain_checkbox], | |
| outputs=[code_output, download_file, explanation_output, time_output] | |
| ) | |
| code_output.change( | |
| fn=lambda x: x, | |
| inputs=code_output, | |
| outputs=html_output | |
| ) | |
| download_btn.click( | |
| fn=lambda x: x, | |
| inputs=download_file, | |
| outputs=download_file | |
| ) | |
| explain_checkbox.change( | |
| fn=lambda x: gr.Textbox(visible=x), | |
| inputs=explain_checkbox, | |
| outputs=explanation_output | |
| ) | |
| if __name__ == "__main__": | |
| demo.launch() |