Update app.py

app.py

@@ -1,100 +1,145 @@
 import streamlit as st
-from transformers import AutoTokenizer, AutoModelForCausalLM
-import torch
+import requests
 import json
 from pathlib import Path
 
-# Enable Streamlit caching
-@st.cache_resource
-def load_model():
-    # Using a smaller model for faster loading
-    model_name = "Salesforce/codegen-350M-mono"  # Much smaller than CodeLlama
-    tokenizer = AutoTokenizer.from_pretrained(model_name)
-    model = AutoModelForCausalLM.from_pretrained(
-        model_name,
-        torch_dtype=torch.float16,
-        low_cpu_mem_usage=True,
-        device_map="auto"
-    )
-    return tokenizer, model
+# Pre-defined components and templates
+COMPONENTS = {
+    "navbar": """
+    <nav class="bg-white shadow">
+        <div class="max-w-7xl mx-auto px-4">
+            <div class="flex justify-between h-16">
+                <div class="flex">
+                    <div class="flex-shrink-0 flex items-center">
+                        <a href="/" class="text-xl font-bold">Logo</a>
+                    </div>
+                    <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
+                        <a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1">Home</a>
+                        <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1">About</a>
+                        <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1">Services</a>
+                        <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1">Contact</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+    """,
+    "hero": """
+    <div class="relative bg-white overflow-hidden">
+        <div class="max-w-7xl mx-auto">
+            <div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
+                <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
+                    <div class="sm:text-center lg:text-left">
+                        <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
+                            <span class="block xl:inline">Your Awesome</span>
+                            <span class="block text-indigo-600 xl:inline">Website Title</span>
+                        </h1>
+                        <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
+                            Your compelling description goes here.
+                        </p>
+                        <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
+                            <div class="rounded-md shadow">
+                                <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
+                                    Get Started
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </main>
+            </div>
+        </div>
+    </div>
+    """,
+    "features": """
+    <div class="py-12 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+                <!-- Feature 1 -->
+                <div class="p-6 border rounded-lg">
+                    <h3 class="text-lg font-medium text-gray-900">Feature 1</h3>
+                    <p class="mt-2 text-base text-gray-500">Description of feature 1</p>
+                </div>
+                <!-- Feature 2 -->
+                <div class="p-6 border rounded-lg">
+                    <h3 class="text-lg font-medium text-gray-900">Feature 2</h3>
+                    <p class="mt-2 text-base text-gray-500">Description of feature 2</p>
+                </div>
+                <!-- Feature 3 -->
+                <div class="p-6 border rounded-lg">
+                    <h3 class="text-lg font-medium text-gray-900">Feature 3</h3>
+                    <p class="mt-2 text-base text-gray-500">Description of feature 3</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    """
+}
 
-def generate_code(model, tokenizer, prompt, max_length=500):
-    inputs = tokenizer(prompt, return_tensors="pt").to(model.device)
-    with torch.no_grad():  # Disable gradient calculation for inference
-        outputs = model.generate(
-            inputs.input_ids,
-            max_length=max_length,
-            num_return_sequences=1,
-            temperature=0.7,
-            top_p=0.95,
-            do_sample=True
-        )
-    return tokenizer.decode(outputs[0], skip_special_tokens=True)
+def generate_website():
+    # Base HTML template with Tailwind CSS
+    html_template = """
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>{title}</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+    </head>
+    <body>
+        {components}
+    </body>
+    </html>
+    """
+    return html_template
 
 def main():
-    st.set_page_config(page_title="Fast Web Generator", layout="wide")
+    st.set_page_config(page_title="Fast Web Builder", layout="wide")
     
-    st.title("⚡ Fast Web Generator")
+    st.title("🚀 Fast Web Builder")
     
-    # Initialize model with caching
-    with st.spinner("Loading model... (first run only)"):
-        tokenizer, model = load_model()
+    # Simple configuration
+    title = st.text_input("Website Title", "My Awesome Website")
     
-    # Simplified interface
-    col1, col2 = st.columns([2, 1])
+    # Component selection
+    st.subheader("Select Components")
+    use_navbar = st.checkbox("Navigation Bar", value=True)
+    use_hero = st.checkbox("Hero Section", value=True)
+    use_features = st.checkbox("Features Section", value=True)
     
-    with col1:
-        description = st.text_area(
-            "Describe your website",
-            height=150,
-            placeholder="E.g., Create a responsive landing page with a navigation bar, hero section, and contact form"
+    # Color scheme
+    color_scheme = st.selectbox(
+        "Color Scheme",
+        ["Default", "Dark", "Light", "Colorful"]
+    )
+    
+    if st.button("Generate Website"):
+        # Build components string
+        components = ""
+        if use_navbar:
+            components += COMPONENTS["navbar"]
+        if use_hero:
+            components += COMPONENTS["hero"]
+        if use_features:
+            components += COMPONENTS["features"]
+        
+        # Generate complete website
+        website = generate_website().format(
+            title=title,
+            components=components
         )
         
-        generate_type = st.radio(
-            "What would you like to generate?",
-            ["HTML/CSS", "JavaScript", "Full Stack"],
-            horizontal=True
+        # Show preview
+        st.subheader("Preview")
+        st.components.v1.html(website, height=600)
+        
+        # Download option
+        st.download_button(
+            "Download Website",
+            website,
+            file_name="website.html",
+            mime="text/html"
         )
-    
-    with col2:
-        st.subheader("Quick Settings")
-        use_tailwind = st.checkbox("Use Tailwind CSS", value=True)
-        responsive = st.checkbox("Make Responsive", value=True)
-        dark_mode = st.checkbox("Add Dark Mode", value=False)
-    
-    if st.button("🚀 Generate Code"):
-        with st.spinner("Generating your code..."):
-            # Construct prompt based on settings
-            prompt_template = f"""
-            Create a website with these specifications:
-            Description: {description}
-            CSS Framework: {"Tailwind" if use_tailwind else "Plain CSS"}
-            Features: {"Responsive, " if responsive else ""}{"Dark mode, " if dark_mode else ""}
-            
-            Generate the code:
-            """
-            
-            generated_code = generate_code(model, tokenizer, prompt_template)
-            
-            # Display code
-            st.code(generated_code, language="html")
-            
-            # Add download button
-            st.download_button(
-                "📥 Download Code",
-                generated_code,
-                file_name="generated_website.html",
-                mime="text/html"
-            )
-    
-    # Add helpful tips
-    with st.expander("💡 Tips for better results"):
-        st.markdown("""
-        - Be specific in your description
-        - Mention key features you want
-        - Specify color schemes if important
-        - Describe the layout structure
-        """)
 
 if __name__ == "__main__":
     main()