Update app.py

app.py

@@ -1,6 +1,5 @@
 import os
 import gradio as gr
-import google.generativeai as genai
 import pandas as pd
 import plotly.express as px
 import plotly.graph_objects as go
@@ -13,14 +12,15 @@ import re
 import time
 import numpy as np
 import pdfplumber
+import requests
 from dotenv import load_dotenv
 from cassandra.cluster import Cluster
 from cassandra.auth import PlainTextAuthProvider
 from cassandra.query import SimpleStatement
 from langchain.text_splitter import RecursiveCharacterTextSplitter
 from langchain_community.vectorstores import Cassandra
-from langchain_community.embeddings import VertexAIEmbeddings
-from google.oauth2 import service_account
+from langchain_openai import OpenAIEmbeddings
+from PIL import Image, ImageDraw, ImageFont
 
 # Load environment variables
 load_dotenv()
@@ -32,46 +32,43 @@ current_product = ""
 query_counts = {"circuit breaker": 0, "motor starter": 0, "contactor": 0, "switch": 0, "relay": 0, "other": 0}
 daily_queries = [0, 0, 0, 0, 0, 6, 8, 10, 7, 9, 12, 15, 11, 14]  # Mock data for chart
 
-# Initialize Gemini API with service account credentials
-def init_gemini_api():
-    """Initialize Google Gemini API with service account credentials from Hugging Face Secrets"""
+# Initialize OpenAI API
+def init_openai_api():
+    """Initialize OpenAI API with API key from Hugging Face Secrets"""
     try:
-        # Retrieve service account JSON from Hugging Face Secrets
-        service_account_json = os.getenv("SERVICE_ACCOUNT_JSON")
-        if not service_account_json:
-            raise ValueError("SERVICE_ACCOUNT_JSON is not set in environment variables")
-            
-        # Convert the single-line string back to JSON format
-        service_account_dict = json.loads(service_account_json)
-        
-        # Write it to a temporary JSON file
-        credentials_path = "service_account.json"
-        with open(credentials_path, "w") as f:
-            json.dump(service_account_dict, f)
-        
-        # Load credentials from the temporary file
-        credentials = service_account.Credentials.from_service_account_file(
-            credentials_path,
-            scopes=["https://www.googleapis.com/auth/cloud-platform"]
-        )
+        # Get API key from environment (set by Hugging Face Secrets)
+        openai_api_key = os.getenv("OPENAI_API_KEY")
+        if not openai_api_key:
+            print("OPENAI_API_KEY is not set in environment variables")
+            return False
         
-        # Configure Gemini API with credentials
-        genai.configure(credentials=credentials)
-        print("Gemini API initialized with service account credentials from Hugging Face Secrets")
+        # Set as environment variable for libraries that use it directly
+        os.environ["OPENAI_API_KEY"] = openai_api_key
+        print("OpenAI API initialized with API key from Hugging Face Secrets")
         return True
         
     except Exception as e:
-        print(f"Error initializing Gemini API with service account: {e}")
-        
-        # Fallback to API key method if service account fails
-        try:
-            genai.configure(api_key=os.getenv("GEMINI_API_KEY", ""))
-            print("Gemini API initialized with API key")
-            return True
-            
-        except Exception as e2:
-            print(f"Fallback to API key also failed: {e2}")
+        print(f"Error initializing OpenAI API: {e}")
+        return False
+
+# Initialize Mistral API
+def init_mistral_api():
+    """Initialize Mistral API with API key from Hugging Face Secrets"""
+    try:
+        # Get API key from environment (set by Hugging Face Secrets)
+        mistral_api_key = os.getenv("MISTRAL_API_KEY")
+        if not mistral_api_key:
+            print("MISTRAL_API_KEY is not set in environment variables")
             return False
+        
+        # Set as environment variable for libraries that use it directly
+        os.environ["MISTRAL_API_KEY"] = mistral_api_key
+        print("Mistral API initialized with API key from Hugging Face Secrets")
+        return True
+        
+    except Exception as e:
+        print(f"Error initializing Mistral API: {e}")
+        return False
 
 # Initialize Astra DB connection
 def init_astra_db():
@@ -157,11 +154,11 @@ def init_s3_client():
 
 # Initialize embedding model
 def get_embeddings_model():
-    """Initialize the embeddings model for vector generation"""
+    """Initialize the OpenAI embeddings model for vector generation"""
     try:
-        embeddings = VertexAIEmbeddings(
-            project=os.getenv("GOOGLE_CLOUD_PROJECT"),
-            location=os.getenv("GOOGLE_CLOUD_LOCATION")
+        embeddings = OpenAIEmbeddings(
+            model="text-embedding-ada-002",
+            openai_api_key=os.getenv("OPENAI_API_KEY")
         )
         return embeddings
     except Exception as e:
@@ -428,38 +425,96 @@ def get_product_images(product):
         print(f"Error retrieving product images: {e}")
         return []
 
-# Analyze product image with Gemini Vision
-def analyze_product_image_with_vision(image_data, query):
-    """Analyze product image using Gemini Pro Vision"""
-    if not image_data:
-        return "No image data available for analysis"
+# Get response from OpenAI API
+def get_openai_response(query, context_chunks=None):
+    """Get enhanced response from OpenAI model using RAG"""
+    start_time = time.time()
     
     try:
-        # Use Gemini 1.0 Pro Vision model
-        model_name = "gemini-1.0-pro-vision-001"
-        model = genai.GenerativeModel(model_name)
-        
-        # Create a vision-enabled prompt
-        response = model.generate_content([
-            "Analyze this ABB product image and answer the following question:",
-            query,
-            genai.types.Part.from_data(image_data, mime_type="image/jpeg")
-        ])
-        
-        return response.text
+        # Detect product type from query
+        product_keywords = {"circuit breaker": 0, "motor starter": 0, "contactor": 0, "switch": 0, "relay": 0}
+        detected_product = "other"
+        
+        for keyword in product_keywords:
+            if keyword in query.lower():
+                product_keywords[keyword] += 1
+                if product_keywords[keyword] > product_keywords.get(detected_product, -1):
+                    detected_product = keyword
+        
+        # If no context chunks provided, search the vector DB
+        if not context_chunks:
+            context_chunks = search_vector_db(query, product_type=detected_product if detected_product != "other" else None)
+            
+        # Build context from retrieved chunks
+        context_text = "\n\n".join([chunk["content"] for chunk in context_chunks]) if context_chunks else ""
+        
+        # Create prompt with context
+        prompt = f"""
+        You are an assistant specialized in ABB products and solutions. Answer the following query about ABB products with accurate and helpful information.
+        
+        Use the following product information to inform your response:
+        {context_text}
+        
+        If the information above doesn't contain relevant details, use your general knowledge about industrial electrical equipment, but be clear about what information comes from the ABB catalog versus general knowledge.
+        
+        User query: {query}
+        """
+        
+        # Call OpenAI API
+        headers = {
+            "Content-Type": "application/json",
+            "Authorization": f"Bearer {os.getenv('OPENAI_API_KEY')}"
+        }
+        
+        payload = {
+            "model": "gpt-4o",
+            "messages": [
+                {"role": "system", "content": "You are an assistant specialized in ABB products and solutions."},
+                {"role": "user", "content": prompt}
+            ],
+            "temperature": 0.7,
+            "max_tokens": 800
+        }
+        
+        response = requests.post(
+            "https://api.openai.com/v1/chat/completions",
+            headers=headers,
+            json=payload
+        )
+        
+        if response.status_code == 200:
+            response_json = response.json()
+            response_text = response_json["choices"][0]["message"]["content"]
+        else:
+            # Fallback to Mistral if OpenAI fails
+            print(f"OpenAI API error: {response.status_code}, {response.text}")
+            response_text = get_mistral_response(query, context_chunks)
+        
+        # Update query counts for analytics
+        if detected_product in query_counts:
+            query_counts[detected_product] += 1
+        else:
+            query_counts["other"] += 1
+            
+        # Log analytics
+        response_time = time.time() - start_time
+        log_query_analytics(query, detected_product, response_time)
+        
+        return response_text, detected_product
     except Exception as e:
-        print(f"Error analyzing image with Gemini Vision: {e}")
-        return "Error analyzing image. Please try a different query."
+        print(f"Error processing chat request with OpenAI: {e}")
+        # Fallback to Mistral
+        try:
+            return get_mistral_response(query, context_chunks)
+        except:
+            return "Sorry, I encountered an error processing your request. Please try again.", "other"
 
-def get_gemini_response(query, context_chunks=None):
-    """Get enhanced response from Gemini model using RAG"""
+# Get response from Mistral API (fallback)
+def get_mistral_response(query, context_chunks=None):
+    """Get enhanced response from Mistral model using RAG (fallback)"""
     start_time = time.time()
     
     try:
-        # Set up the model
-        model_name = "gemini-2.0-flash-001"
-        model = genai.GenerativeModel(model_name)
-        
         # Detect product type from query
         product_keywords = {"circuit breaker": 0, "motor starter": 0, "contactor": 0, "switch": 0, "relay": 0}
         detected_product = "other"
@@ -489,8 +544,34 @@ def get_gemini_response(query, context_chunks=None):
         User query: {query}
         """
         
-        # Generate response using Gemini
-        response = model.generate_content(prompt)
+        # Call Mistral API
+        headers = {
+            "Content-Type": "application/json",
+            "Authorization": f"Bearer {os.getenv('MISTRAL_API_KEY')}"
+        }
+        
+        payload = {
+            "model": "mistral-large-latest",
+            "messages": [
+                {"role": "system", "content": "You are an assistant specialized in ABB products and solutions."},
+                {"role": "user", "content": prompt}
+            ],
+            "temperature": 0.7,
+            "max_tokens": 800
+        }
+        
+        response = requests.post(
+            "https://api.mistral.ai/v1/chat/completions",
+            headers=headers,
+            json=payload
+        )
+        
+        if response.status_code == 200:
+            response_json = response.json()
+            response_text = response_json["choices"][0]["message"]["content"]
+        else:
+            print(f"Mistral API error: {response.status_code}, {response.text}")
+            response_text = "Sorry, I encountered an error processing your request. Please try again."
         
         # Update query counts for analytics
         if detected_product in query_counts:
@@ -502,12 +583,12 @@ def get_gemini_response(query, context_chunks=None):
         response_time = time.time() - start_time
         log_query_analytics(query, detected_product, response_time)
         
-        return response.text, detected_product
+        return response_text, detected_product
     except Exception as e:
-        print(f"Error processing chat request: {e}")
+        print(f"Error processing chat request with Mistral: {e}")
         return "Sorry, I encountered an error processing your request. Please try again.", "other"
 
-def chat_response(query, history):
+def process_message(query, history):
     """Process query using RAG and generate response with product images"""
     global messages, product_images, current_product
     
@@ -517,8 +598,12 @@ def chat_response(query, history):
     # Get context from vector database
     context_chunks = search_vector_db(query)
     
-    # Get LLM response with RAG
-    response_text, detected_product = get_gemini_response(query, context_chunks)
+    # Get LLM response with RAG (try OpenAI first, fallback to Mistral)
+    try:
+        response_text, detected_product = get_openai_response(query, context_chunks)
+    except Exception as e:
+        print(f"Error with OpenAI, falling back to Mistral: {e}")
+        response_text, detected_product = get_mistral_response(query, context_chunks)
     
     # Format new history entry
     new_history = history.copy()
@@ -536,6 +621,24 @@ def chat_response(query, history):
     
     return new_history
 
+def reset_chat(history):
+    """Reset the chat history"""
+    return []
+
+def process_pdfs_from_s3(bucket_name, prefix):
+    """Process PDFs from S3 bucket"""
+    # Set environment variable for S3 bucket
+    os.environ["S3_BUCKET_NAME"] = bucket_name
+    
+    # Process PDFs
+    result = process_pdf_catalogs()
+    
+    # Return result as string
+    if result["status"] == "success":
+        return f"Successfully processed {result['files_processed']} files, {result['chunks_processed']} chunks, and {result['images_processed']} images."
+    else:
+        return f"Error: {result['message']}"
+
 def render_images():
     """Render product images as HTML (if available)"""
     if not product_images:
@@ -554,397 +657,219 @@ def render_images():
     html += "</div>"
     return html
 
-def render_product_distribution_chart():
-    """Render product distribution chart using Plotly"""
-    # Create a pie chart for product category distribution
-    categories = list(query_counts.keys())
-    values = list(query_counts.values())
-    
-    fig = go.Figure(data=[go.Pie(
-        labels=categories,
-        values=values,
-        hole=.3,
-        marker_colors=['#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe', '#dbeafe', '#f1f5f9']
-    )])
-    
-    fig.update_layout(
-        title="Product Query Distribution",
-        margin=dict(t=40, b=20, l=20, r=20),
-        height=300,
-        legend=dict(yanchor="top", y=0.99, xanchor="left", x=0.01, orientation="h")
-    )
-    
-    return fig
+def setup_and_update():
+    """Setup the system and update status"""
+    # Initialize APIs
+    openai_initialized = init_openai_api()
+    mistral_initialized = init_mistral_api()
+    
+    # Initialize database and other services
+    global astra_session, astra_keyspace, s3_client, embeddings_model
+    astra_session, astra_keyspace = init_astra_db()
+    s3_client = init_s3_client()
+    embeddings_model = get_embeddings_model()
+    
+    # Return status
+    if openai_initialized and mistral_initialized:
+        return "System is ready. You can start chatting!"
+    else:
+        return "System initialization incomplete. Some features may not work properly."
 
-def render_query_volume_chart():
-    """Render query volume chart using Plotly"""
-    # Create a line chart for query volume over time
-    days = list(range(1, len(daily_queries) + 1))
-    
-    fig = go.Figure()
-    fig.add_trace(go.Scatter(
-        x=days,
-        y=daily_queries,
-        mode='lines+markers',
-        name='Queries',
-        line=dict(color='#3b82f6', width=2),
-        marker=dict(color='#3b82f6', size=8)
-    ))
-    
-    fig.update_layout(
-        title="Daily Query Volume",
-        xaxis_title="Day",
-        yaxis_title="Number of Queries",
-        margin=dict(t=40, b=20, l=20, r=20),
-        height=300
-    )
-    
-    return fig
+def create_gradio_app():
+    # Define CSS styles for a more modern, appealing interface
+    custom_css = """
+    :root {
+        --primary-color: #FF000C;
+        --secondary-color: #212832;
+        --background-color: var(--body-background-fill);
+        --card-color: var(--block-background-fill);
+        --text-color: var(--body-text-color);
+        --border-radius: 12px;
+        --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
 
-def render_metrics():
-    """Render system metrics for the analytics tab with Plotly charts"""
-    # Create metrics display with interactive charts
-    
-    # For system metrics section, use HTML
-    html = """
-    <div style='padding: 16px;'>
-        <h3 style='margin-bottom: 16px; font-size: 18px;'>System Metrics</h3>
-        
-        <div style='display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 24px;'>
-            <div style='background: #f3f4f6; border-radius: 8px; padding: 16px;'>
-                <h4 style='font-size: 16px; margin-bottom: 8px; display: flex; align-items: center;'>
-                    <svg style='margin-right: 8px;' xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>
-                    Document Processing
-                </h4>
-                <p style='font-size: 14px; color: #6b7280;'>4 PDF catalogs processed</p>
-                <p style='font-size: 14px; color: #6b7280;'>1,248 text chunks extracted</p>
-                <p style='font-size: 14px; color: #6b7280;'>136 images extracted</p>
-            </div>
-            
-            <div style='background: #f3f4f6; border-radius: 8px; padding: 16px;'>
-                <h4 style='font-size: 16px; margin-bottom: 8px; display: flex; align-items: center;'>
-                    <svg style='margin-right: 8px;' xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 18V6M7 10l5-4 5 4M7 14l5 4 5-4"/></svg>
-                    Vector Database
-                </h4>
-                <p style='font-size: 14px; color: #6b7280;'>Astra DB connected</p>
-                <p style='font-size: 14px; color: #6b7280;'>1,248 text vectors stored</p>
-                <p style='font-size: 14px; color: #6b7280;'>136 product images stored</p>
-            </div>
-            
-            <div style='background: #f3f4f6; border-radius: 8px; padding: 16px;'>
-                <h4 style='font-size: 16px; margin-bottom: 8px; display: flex; align-items: center;'>
-                    <svg style='margin-right: 8px;' xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
-                    LLM Model
-                </h4>
-                <p style='font-size: 14px; color: #6b7280;'>Using: Gemini 2.0 Flash</p>
-                <p style='font-size: 14px; color: #6b7280;'>Vision: Gemini 1.0 Pro Vision</p>
-                <p style='font-size: 14px; color: #6b7280;'>Embeddings: VertexAI Embeddings</p>
-                <p style='font-size: 14px; color: #6b7280;'>Using Service Account Auth</p>
-            </div>
-        </div>
-    </div>
-    """
-    
-    return html
+    .app-header {
+        background-color: var(--secondary-color);
+        padding: 20px;
+        border-radius: var(--border-radius);
+        margin-bottom: 20px;
+        box-shadow: var(--shadow);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
 
-def render_advanced_pdf_ingestion():
-    """UI for PDF catalog ingestion from S3"""
-    html = """
-    <div style='padding: 16px;'>
-        <h3 style='margin-bottom: 16px; font-size: 18px;'>PDF Catalog Ingestion</h3>
-        <p style='margin-bottom: 16px; color: #6b7280;'>
-            Upload ABB product catalogs to S3 and process them for the knowledge base.
-        </p>
-        
-        <div style='background: #f3f4f6; border-radius: 8px; padding: 16px; margin-bottom: 16px;'>
-            <h4 style='font-size: 16px; margin-bottom: 8px;'>Current Status</h4>
-            <ul style='list-style: disc; margin-left: 24px;'>
-                <li style='margin-bottom: 4px;'>Connected to S3 bucket: <span style='font-weight: 500;'>abb-product-catalogs</span></li>
-                <li style='margin-bottom: 4px;'>4 catalogs processed</li>
-                <li style='margin-bottom: 4px;'>1,248 text chunks extracted and stored</li>
-                <li style='margin-bottom: 4px;'>136 product images extracted and stored</li>
-                <li style='margin-bottom: 4px;'>Last processed: March 8, 2025</li>
-            </ul>
-        </div>
-        
-        <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 16px;'>
-            <div style='background: #f3f4f6; border-radius: 8px; padding: 16px;'>
-                <h4 style='font-size: 16px; margin-bottom: 8px;'>Available Catalogs</h4>
-                <table style='width: 100%; border-collapse: collapse;'>
-                    <thead>
-                        <tr style='border-bottom: 1px solid #d1d5db;'>
-                            <th style='text-align: left; padding: 8px 4px;'>Filename</th>
-                            <th style='text-align: left; padding: 8px 4px;'>Size</th>
-                            <th style='text-align: left; padding: 8px 4px;'>Status</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr style='border-bottom: 1px solid #d1d5db;'>
-                            <td style='padding: 8px 4px;'>circuit_breaker_catalog.pdf</td>
-                            <td style='padding: 8px 4px;'>4.2 MB</td>
-                            <td style='padding: 8px 4px;'><span style='color: #059669;'>Processed</span></td>
-                        </tr>
-                        <tr style='border-bottom: 1px solid #d1d5db;'>
-                            <td style='padding: 8px 4px;'>motor_starter_catalog.pdf</td>
-                            <td style='padding: 8px 4px;'>3.8 MB</td>
-                            <td style='padding: 8px 4px;'><span style='color: #059669;'>Processed</span></td>
-                        </tr>
-                        <tr style='border-bottom: 1px solid #d1d5db;'>
-                            <td style='padding: 8px 4px;'>contactor_catalog.pdf</td>
-                            <td style='padding: 8px 4px;'>2.7 MB</td>
-                            <td style='padding: 8px 4px;'><span style='color: #059669;'>Processed</span></td>
-                        </tr>
-                        <tr style='border-bottom: 1px solid #d1d5db;'>
-                            <td style='padding: 8px 4px;'>relay_catalog.pdf</td>
-                            <td style='padding: 8px 4px;'>1.9 MB</td>
-                            <td style='padding: 8px 4px;'><span style='color: #059669;'>Processed</span></td>
-                        </tr>
-                        <tr>
-                            <td style='padding: 8px 4px;'>switch_catalog_2024.pdf</td>
-                            <td style='padding: 8px 4px;'>3.1 MB</td>
-                            <td style='padding: 8px 4px;'><span style='color: #dc2626;'>Not Processed</span></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-            
-            <div style='background: #f3f4f6; border-radius: 8px; padding: 16px;'>
-                <h4 style='font-size: 16px; margin-bottom: 16px;'>Process Catalogs</h4>
-                <button id="process-btn" style='background: #3b82f6; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-weight: 500;'>
-                    Process All Catalogs
-                </button>
-                <p style='margin-top: 16px; color: #6b7280; font-size: 14px;'>
-                    This will process all PDF catalogs in the S3 bucket, extract text and images, 
-                    generate embeddings, and store them in the vector database.
-                </p>
-            </div>
-        </div>
-    </div>
+    .app-header img {
+        max-width: 120px;
+    }
+
+    .app-title {
+        color: white;
+        margin: 0;
+        font-size: 24px;
+        font-weight: 600;
+    }
+
+    .status-card, .catalog-card, .chat-card {
+        background-color: var(--card-color);
+        border-radius: var(--border-radius);
+        padding: 15px;
+        margin-bottom: 20px;
+        box-shadow: var(--shadow);
+    }
+
+    .chat-card {
+        height: 100%;
+    }
+
+    .message {
+        padding: 10px 15px;
+        border-radius: 8px;
+        margin-bottom: 10px;
+        max-width: 85%;
+    }
+
+    .user-message {
+        background-color: var(--primary-color);
+        color: white;
+        margin-left: auto;
+    }
+
+    .bot-message {
+        background-color: #f0f0f0;
+        color: var(--text-color);
+        margin-right: auto;
+    }
+
+    .footer {
+        text-align: center;
+        margin-top: 20px;
+        font-size: 12px;
+        color: var(--text-color);
+    }
+
+    .action-button {
+        background-color: var(--primary-color);
+        color: white;
+        border: none;
+        border-radius: var(--border-radius);
+        padding: 8px 16px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+
+    .action-button:hover {
+        opacity: 0.9;
+    }
     """
-    
-    return html
 
-# For the image extraction and serving part, we need to add a function to temporarily store and serve images
-def serve_product_image(image_id):
-    """Retrieve an image from Astra DB and serve it temporarily"""
-    if not astra_session:
-        return None
-    
-    try:
-        # Query Astra DB for the specific image
-        query = f"""
-            SELECT image_data, metadata
-            FROM {astra_keyspace}.product_images
-            WHERE id = %s
-        """
-        
-        rows = astra_session.execute(query, (image_id,))
-        
-        # Get the first matching row
-        for row in rows:
-            image_data = row.image_data
-            metadata = json.loads(row.metadata)
-            
-            # Create a temporary file to serve
-            temp_dir = os.path.join(os.getcwd(), "temp_images")
-            os.makedirs(temp_dir, exist_ok=True)
-            
-            # Create a filename with the mime type
-            mime_type = metadata.get("mime_type", "jpg")
-            temp_file = os.path.join(temp_dir, f"{image_id}.{mime_type}")
-            
-            # Write the image to the temporary file
-            with open(temp_file, "wb") as f:
-                f.write(image_data)
-            
-            # Return the temporary file path
-            return temp_file
-    except Exception as e:
-        print(f"Error serving product image: {e}")
-        return None
+    # Create the Gradio interface
+    with gr.Blocks(css=custom_css) as app:
+        # Setup status variable
+        setup_status = gr.State("System is setting up. Please wait...")
+        status_display = gr.Markdown("System is setting up. Please wait...")
 
-# Update the get_product_images function to use the temporary file paths
-def get_product_images(product):
-    """Get product images from Astra DB and return temporary file paths"""
-    global product_images
-    
-    if not astra_session:
-        return []
-    
-    try:
-        # Query Astra DB for images related to the product
-        query = f"""
-            SELECT id, product_type, metadata
-            FROM {astra_keyspace}.product_images
-            WHERE product_type = %s
-            LIMIT 4
-        """
-        
-        rows = astra_session.execute(query, (product,))
-        
-        # Store image paths for display
-        image_paths = []
-        for row in rows:
-            # Get the image ID and serve it
-            image_id = row.id
-            temp_file = serve_product_image(image_id)
-            
-            if temp_file:
-                # Use relative path for serving in the UI
-                rel_path = os.path.relpath(temp_file, os.getcwd())
-                image_paths.append(rel_path)
-        
-        # If no images found, use placeholder paths
-        if not image_paths:
-            # Create directory for placeholder images if it doesn't exist
-            placeholder_dir = os.path.join(os.getcwd(), "placeholder_images")
-            os.makedirs(placeholder_dir, exist_ok=True)
-            
-            # Create placeholder images
-            for i in range(2):
-                placeholder_file = os.path.join(
-                    placeholder_dir, 
-                    f"placeholder-{product.lower().replace(' ', '-')}-{i+1}.jpg"
-                )
-                # Create a simple placeholder image if it doesn't exist
-                if not os.path.exists(placeholder_file):
-                    # Generate a simple colored rectangle as placeholder
-                    from PIL import Image, ImageDraw, ImageFont
-                    img = Image.new('RGB', (400, 300), color=(240, 240, 240))
-                    d = ImageDraw.Draw(img)
-                    d.rectangle([(0, 0), (400, 300)], outline=(200, 200, 200))
-                    try:
-                        font = ImageFont.truetype("arial.ttf", 20)
-                    except IOError:
-                        font = ImageFont.load_default()
-                    
-                    d.text((120, 120), f"ABB {product}", fill=(100, 100, 100), font=font)
-                    img.save(placeholder_file)
-                
-                image_paths.append(os.path.relpath(placeholder_file, os.getcwd()))
-        
-        return image_paths
-    except Exception as e:
-        print(f"Error retrieving product images: {e}")
-        return []
+        with gr.Column(scale=1):
+            # Modern header
+            with gr.Row(elem_classes="app-header"):
+                with gr.Column(scale=1):
+                    gr.Image(value="https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/ABB_logo.svg/2560px-ABB_logo.svg.png",
+                             width=120,
+                             height=120,
+                             interactive=False,
+                             label="ABB Logo")
+                with gr.Column(scale=3):
+                    gr.HTML('<h1 class="app-title">Ginnie</h1>')
+                    gr.HTML('<p class="app-subtitle">Your AI assistant for ABB product information</p>')
 
-# Update the render_images function to display actual images
-def render_images():
-    """Render product images as HTML (if available)"""
-    if not product_images:
-        return ""
-    
-    html = "<div style='margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;'>"
-    for i, image_path in enumerate(product_images):
-        # Convert backslashes to forward slashes for URLs
-        url_path = image_path.replace("\\", "/")
-        html += f"""
-        <div style='background: #f3f4f6; border-radius: 6px; padding: 8px; text-align: center;'>
-            <div style='height: 180px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;'>
-                <img src="/{url_path}" alt="Product Image {i+1}" style="max-width: 100%; max-height: 160px; object-fit: contain;">
-            </div>
-            <p style='margin-top: 4px; font-size: 12px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;'>{os.path.basename(image_path)}</p>
-        </div>
-        """
-    html += "</div>"
-    return html
+            # Chat interface
+            with gr.Row():
+                with gr.Column(scale=3):
+                    # Chat interface with custom styling
+                    gr.HTML('<div class="content-card">')
+                    chatbot = gr.Chatbot(
+                        value=[],
+                        elem_id="chatbot",
+                        height=500,
+                        show_copy_button=True,
+                        avatar_images=["https://ui-avatars.com/api/?name=You&background=0D8ABC&color=fff",
+                                      "https://ui-avatars.com/api/?name=Ginnie&background=FF000C&color=fff"]
+                    )
 
-# Setup cleanup function to remove temporary image files
-def cleanup_temp_files():
-    """Clean up temporary image files that are older than 1 hour"""
-    try:
-        temp_dirs = ["temp_images", "placeholder_images"]
-        current_time = time.time()
-        
-        for dir_name in temp_dirs:
-            if os.path.exists(dir_name):
-                for filename in os.listdir(dir_name):
-                    file_path = os.path.join(dir_name, filename)
-                    # Check if the file is older than 1 hour
-                    if os.path.isfile(file_path) and (current_time - os.path.getmtime(file_path) > 3600):
-                        os.remove(file_path)
-    except Exception as e:
-        print(f"Error cleaning up temporary files: {e}")
+                    # Message input with better styling
+                    with gr.Row(elem_classes="input-area"):
+                        msg = gr.Textbox(
+                            placeholder="Ask about ABB products...",
+                            label="",
+                            lines=2,
+                            max_lines=5,
+                            show_label=False
+                        )
 
-# Schedule periodic cleanup of temporary files
-def schedule_cleanup():
-    """Schedule periodic cleanup of temporary files"""
-    import threading
-    
-    # Run cleanup
-    cleanup_temp_files()
-    
-    # Schedule next cleanup in 30 minutes
-    threading.Timer(1800, schedule_cleanup).start()
-
-# Initialize Gemini API, Astra DB, S3 client, and embedding model
-gemini_initialized = init_gemini_api()
-astra_session, astra_keyspace = init_astra_db()
-s3_client = init_s3_client()
-embeddings_model = get_embeddings_model()
-
-# Initialize main UI
-def create_ui():
-    """Create the main Gradio UI with tabs for chat, analytics, and admin"""
-    with gr.Blocks(title="ABB Product Assistant", css="") as demo:
-        gr.Markdown("# ABB Product Assistant")
-        
-        with gr.Tabs() as tabs:
-            # Chat tab
-            with gr.TabItem("Chat"):
-                chatbot = gr.Chatbot(value=[], elem_id="chatbot")
-                with gr.Row():
-                    msg = gr.Textbox(placeholder="Ask about ABB products...", scale=4)
-                    submit = gr.Button("Send", scale=1)
-                
-                gr.HTML(render_images, elem_id="product-images")
-                
-                # Set up chat functionality
-                submit.click(
-                    chat_response,
-                    [msg, chatbot],
-                    [chatbot],
-                    queue=False
-                ).then(
-                    lambda: "",
-                    None,
-                    [msg],
-                    queue=False
-                )
-                
-                msg.submit(
-                    chat_response,
-                    [msg, chatbot],
-                    [chatbot],
-                    queue=False
-                ).then(
-                    lambda: "",
-                    None,
-                    [msg],
-                    queue=False
-                )
-            
-            # Analytics tab
-            with gr.TabItem("Analytics"):
-                gr.HTML(render_metrics)
-                
-                with gr.Row():
-                    with gr.Column():
-                        gr.Plot(render_product_distribution_chart)
-                    with gr.Column():
-                        gr.Plot(render_query_volume_chart)
-            
-            # Admin tab
-            with gr.TabItem("Admin"):
-                gr.HTML(render_advanced_pdf_ingestion)
-    
-    return demo
+                        send_btn = gr.Button("Send", elem_classes="primary-button")
+
+                    with gr.Row():
+                        clear_btn = gr.Button("Clear Chat", elem_classes="secondary-button")
+                    gr.HTML('</div>')
+
+                with gr.Column(scale=1):
+                    # Quick tips card
+                    gr.HTML('<div class="status-card">')
+                    gr.HTML('''
+                    <h3>Quick Tips</h3>
+                    <ul>
+                        <li>Ask about specific ABB products</li>
+                        <li>Inquire about technical specifications</li>
+                        <li>Ask about installation and maintenance</li>
+                        <li>Get help with troubleshooting</li>
+                    </ul>
+                    ''')
+                    gr.HTML('</div>')
+
+                    # Admin settings
+                    with gr.Accordion("Admin Settings", open=False):
+                        with gr.Tab("Process PDFs"):
+                            s3_bucket = gr.Textbox(label="S3 Bucket Name")
+                            s3_prefix = gr.Textbox(label="S3 Prefix (folder)", value="catalogs/")
+                            process_btn = gr.Button("Process PDFs from S3", elem_classes="action-button")
+                            result_text = gr.Textbox(label="Processing Result")
+
+            # Set up event handlers
+            send_btn.click(
+                process_message,
+                [msg, chatbot],
+                [chatbot],
+                api_name="send_message"
+            )
+
+            msg.submit(
+                process_message,
+                [msg, chatbot],
+                [chatbot],
+                api_name="send_message_enter"
+            )
+
+            clear_btn.click(
+                reset_chat,
+                [chatbot],
+                [chatbot],
+                api_name="clear_chat"
+            )
+
+            process_btn.click(
+                process_pdfs_from_s3,
+                [s3_bucket, s3_prefix],
+                [result_text],
+                api_name="process_pdfs"
+            )
+
+        # Add the system setup to run when the app loads
+        app.load(setup_and_update, None, status_display)
+
+    return app
 
 # Start the application
 if __name__ == "__main__":
-    # Schedule cleanup of temporary files
-    schedule_cleanup()
-    
     # Create and launch the UI
-    demo = create_ui()
+    demo = create_gradio_app()
     demo.launch(share=True)