Update app.py

app.py

@@ -1,145 +1,262 @@
 import streamlit as st
-import requests
-import json
+from langchain.embeddings import HuggingFaceEmbeddings
+from langchain.vectorstores import FAISS
+from langchain.text_splitter import RecursiveCharacterTextSplitter
+from langchain.document_loaders import TextLoader, DirectoryLoader
+from langchain.chains import RetrievalQA
+from langchain.prompts import PromptTemplate
+from langchain.chat_models import ChatOpenAI
+import os
 from pathlib import Path
+import json
+import logging
+from typing import Dict, List, Optional
 
-# 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>
-    """
-}
+class WebDevRAG:
+    def __init__(self, api_key: str, model_name: str = "gpt-4"):
+        self.api_key = api_key
+        self.model_name = model_name
+        self.embeddings = HuggingFaceEmbeddings(
+            model_name="sentence-transformers/all-MiniLM-L6-v2"
+        )
+        self.initialize_logging()
+        self.initialize_vector_store()
+        self.setup_llm()
+        
+    def initialize_logging(self):
+        logging.basicConfig(
+            level=logging.INFO,
+            format='%(asctime)s - %(levelname)s - %(message)s'
+        )
+        self.logger = logging.getLogger(__name__)
 
-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 initialize_vector_store(self):
+        """Initialize FAISS vector store with web development knowledge"""
+        try:
+            # Load from existing if available
+            if Path("vector_store").exists():
+                self.vector_store = FAISS.load_local(
+                    "vector_store",
+                    self.embeddings
+                )
+                self.logger.info("Loaded existing vector store")
+            else:
+                self.create_new_vector_store()
+        except Exception as e:
+            self.logger.error(f"Vector store initialization failed: {e}")
+            raise
 
-def main():
-    st.set_page_config(page_title="Fast Web Builder", layout="wide")
-    
-    st.title("🚀 Fast Web Builder")
-    
-    # Simple configuration
-    title = st.text_input("Website Title", "My Awesome Website")
+    def create_new_vector_store(self):
+        """Create new vector store from knowledge base"""
+        loader = DirectoryLoader(
+            "./knowledge_base",
+            glob="**/*.txt",
+            loader_cls=TextLoader
+        )
+        documents = loader.load()
+        text_splitter = RecursiveCharacterTextSplitter(
+            chunk_size=1000,
+            chunk_overlap=200
+        )
+        texts = text_splitter.split_documents(documents)
+        self.vector_store = FAISS.from_documents(texts, self.embeddings)
+        self.vector_store.save_local("vector_store")
+        self.logger.info("Created new vector store")
+
+    def setup_llm(self):
+        """Setup LLM with custom prompts"""
+        self.llm = ChatOpenAI(
+            model_name=self.model_name,
+            temperature=0.7,
+            api_key=self.api_key
+        )
+        
+        self.qa_prompt = PromptTemplate(
+            template="""You are an expert web developer AI assistant. Using the context provided, 
+            generate high-quality, production-ready code for the user's request. Include best practices, 
+            security considerations, and modern development patterns.
+
+            Context: {context}
+            
+            Question: {question}
+            
+            Provide a detailed, professional solution with explanations for key decisions.""",
+            input_variables=["context", "question"]
+        )
+        
+        self.qa_chain = RetrievalQA.from_chain_type(
+            llm=self.llm,
+            chain_type="stuff",
+            retriever=self.vector_store.as_retriever(
+                search_kwargs={"k": 5}
+            ),
+            chain_type_kwargs={"prompt": self.qa_prompt}
+        )
+
+    def generate_code(self, 
+                     description: str, 
+                     tech_stack: Dict[str, str],
+                     requirements: List[str]) -> Dict:
+        """
+        Generate web application code based on description and requirements
+        
+        Args:
+            description: Project description
+            tech_stack: Dictionary of technology choices
+            requirements: List of specific requirements
+            
+        Returns:
+            Dictionary containing generated code and documentation
+        """
+        try:
+            # Construct detailed prompt
+            prompt = f"""
+            Project Description: {description}
+            
+            Technology Stack:
+            {json.dumps(tech_stack, indent=2)}
+            
+            Requirements:
+            {json.dumps(requirements, indent=2)}
+            
+            Generate a complete solution including:
+            1. Frontend code (component architecture)
+            2. Backend API design
+            3. Database schema
+            4. Security implementations
+            5. Deployment considerations
+            """
+            
+            # Get RAG-enhanced response
+            response = self.qa_chain.run(prompt)
+            
+            # Process and structure the response
+            return self.process_response(response)
+            
+        except Exception as e:
+            self.logger.error(f"Code generation failed: {e}")
+            raise
+
+    def process_response(self, response: str) -> Dict:
+        """Process and structure the LLM response"""
+        # Add processing logic here
+        return {
+            "frontend": self.extract_frontend_code(response),
+            "backend": self.extract_backend_code(response),
+            "database": self.extract_database_schema(response),
+            "documentation": self.extract_documentation(response)
+        }
+
+    def extract_frontend_code(self, response: str) -> Dict:
+        # Add extraction logic
+        pass
+
+    def extract_backend_code(self, response: str) -> Dict:
+        # Add extraction logic
+        pass
+
+    def extract_database_schema(self, response: str) -> Dict:
+        # Add extraction logic
+        pass
+
+    def extract_documentation(self, response: str) -> str:
+        # Add extraction logic
+        pass
+
+def create_streamlit_interface():
+    st.set_page_config(page_title="AI Web Developer", layout="wide")
     
-    # 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)
+    # API key handling
+    api_key = st.secrets["OPENAI_API_KEY"]
     
-    # Color scheme
-    color_scheme = st.selectbox(
-        "Color Scheme",
-        ["Default", "Dark", "Light", "Colorful"]
-    )
+    if "rag_system" not in st.session_state:
+        st.session_state.rag_system = WebDevRAG(api_key)
+
+    st.title("AI Web Development Assistant")
     
-    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
+    # Project Configuration
+    with st.form("project_config"):
+        description = st.text_area(
+            "Project Description",
+            "Describe your web application in detail..."
         )
         
-        # Show preview
-        st.subheader("Preview")
-        st.components.v1.html(website, height=600)
+        # Technology Stack Selection
+        col1, col2 = st.columns(2)
+        with col1:
+            frontend = st.selectbox(
+                "Frontend Framework",
+                ["React", "Vue", "Angular", "Next.js"]
+            )
+            database = st.selectbox(
+                "Database",
+                ["PostgreSQL", "MongoDB", "MySQL"]
+            )
+            
+        with col2:
+            backend = st.selectbox(
+                "Backend Framework",
+                ["Node.js/Express", "Django", "FastAPI"]
+            )
+            auth = st.selectbox(
+                "Authentication",
+                ["JWT", "OAuth2", "Session-based"]
+            )
         
-        # Download option
-        st.download_button(
-            "Download Website",
-            website,
-            file_name="website.html",
-            mime="text/html"
+        # Additional Requirements
+        requirements = st.multiselect(
+            "Additional Requirements",
+            [
+                "REST API",
+                "GraphQL",
+                "Real-time updates",
+                "File upload",
+                "Email integration",
+                "Payment processing",
+                "Admin dashboard",
+                "Analytics",
+                "SEO optimization",
+                "Mobile responsiveness",
+                "Automated testing",
+                "CI/CD pipeline"
+            ]
         )
+        
+        submitted = st.form_submit_button("Generate Solution")
+        
+        if submitted:
+            with st.spinner("Generating comprehensive solution..."):
+                tech_stack = {
+                    "frontend": frontend,
+                    "backend": backend,
+                    "database": database,
+                    "authentication": auth
+                }
+                
+                try:
+                    result = st.session_state.rag_system.generate_code(
+                        description,
+                        tech_stack,
+                        requirements
+                    )
+                    
+                    # Display results in organized tabs
+                    tabs = st.tabs(["Frontend", "Backend", "Database", "Documentation"])
+                    
+                    with tabs[0]:
+                        st.code(result["frontend"], language="javascript")
+                        
+                    with tabs[1]:
+                        st.code(result["backend"], language="python")
+                        
+                    with tabs[2]:
+                        st.code(result["database"], language="sql")
+                        
+                    with tabs[3]:
+                        st.markdown(result["documentation"])
+                        
+                except Exception as e:
+                    st.error(f"An error occurred: {str(e)}")
 
 if __name__ == "__main__":
-    main()
+    create_streamlit_interface()