Update app.py

app.py

@@ -4,45 +4,118 @@ from phi.agent import Agent
 from phi.model.google import Gemini
 from phi.tools.firecrawl import FirecrawlTools
 import google.generativeai as genai
-from google.generativeai import upload_file,get_file
 import io
 import base64
-
 import time
 from pathlib import Path
 import tempfile
-
 from dotenv import load_dotenv
-load_dotenv()
-
 import os
 
+# Load environment variables
+load_dotenv()
+
+# Configure Google API
 API_KEY = os.getenv("GOOGLE_API_KEY")
 if API_KEY:
     genai.configure(api_key=API_KEY)
 
 # Page Configuration
-
 st.set_page_config(
     page_title="AI Shopping Partner",
     page_icon="🤖🛍️",
     layout="centered"
 )
 
-st.title("AI Shopping Partner")
-st.header("Powered by Agno and Google Gemini")
-#st.cache_resource
+# Custom CSS for styling
+st.markdown("""
+    <style>
+        /* Main container styling */
+        .main {
+            background-color: #f9fafb;
+            padding: 2rem;
+        }
+        
+        /* Title styling */
+        .title-text {
+            color: #2d3748;
+            font-size: 2.5rem !important;
+            font-weight: 700;
+            text-align: center;
+            margin-bottom: 1rem;
+        }
+        
+        /* Header styling */
+        .header-text {
+            color: #4a5568 !important;
+            font-size: 1.2rem !important;
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        
+        /* Upload section styling */
+        .upload-section {
+            background: white;
+            border-radius: 12px;
+            padding: 2rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            margin-bottom: 2rem;
+        }
+        
+        /* Input field styling */
+        .stTextInput input, .stTextArea textarea {
+            border: 2px solid #e2e8f0 !important;
+            border-radius: 8px !important;
+            padding: 0.75rem !important;
+        }
+        
+        /* Button styling */
+        .stButton button {
+            background: #4299e1 !important;
+            color: white !important;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-weight: 600;
+            transition: all 0.3s;
+            width: 100%;
+        }
+        
+        .stButton button:hover {
+            background: #3182ce !important;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 6px -1px rgba(66, 153, 225, 0.3);
+        }
+        
+        /* Result section styling */
+        .result-section {
+            background: white;
+            border-radius: 12px;
+            padding: 2rem;
+            margin-top: 2rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        
+        /* Product card styling */
+        .product-card {
+            border-left: 4px solid #4299e1;
+            padding: 1rem;
+            margin: 1rem 0;
+            background: #f8fafc;
+            border-radius: 8px;
+        }
+    </style>
+""", unsafe_allow_html=True)
 
-def get_gemini_response(api_key,prompt,image):   
-    model=genai.GenerativeModel(model_name="gemini-2.0-flash-exp")
-    response= model.generate_content([prompt,image])
-    return response.text
+# Page Content
+st.markdown('<p class="title-text">🤖 AI Shopping Partner 🛍️</p>', unsafe_allow_html=True)
+st.markdown('<p class="header-text">Discover perfect products with AI-powered recommendations</p>', unsafe_allow_html=True)
 
+# Initialize the Agent
 def initialize_agent():
     return Agent(
-
         name="Shopping Partner",
-        model=Gemini(id="gemini-2.0-flash-exp"),  
+        model=Gemini(id="gemini-2.0-flash-exp"),
         instructions=[
             "You are a product recommender agent specializing in finding products that match user preferences.",
             "Prioritize finding products that satisfy as many user requirements as possible, but ensure a minimum match of 50%.",
@@ -54,130 +127,99 @@ def initialize_agent():
         ],
         tools=[FirecrawlTools()],
         markdown=True
-        )
-
-#Initialize the Agent
-multimodal_Agent = initialize_agent()
-
-# Define acceptable file types and MIME types
-accepted_mime_types = ["image/jpeg", "image/png"]
-
-#File Uploader
-image_file = st.file_uploader("Upload a image File to Analyse and provide relevant shopping links",type=["jpg","jpeg","png"],help="Upload max 200mb image for AI Analysis")
-image= None
+    )
 
-#Prompt
-prompt= "What is in this photo?"
+# Initialize the Agent
+multimodal_agent = initialize_agent()
 
+# Function to get Gemini response
+def get_gemini_response(api_key, prompt, image):
+    model = genai.GenerativeModel(model_name="gemini-2.0-flash-exp")
+    response = model.generate_content([prompt, image])
+    return response.text
 
+# Image Upload Section
+with st.container():
+    st.markdown("""
+        <div class="upload-section">
+            <h3 style="color: #2d3748; margin-bottom: 1rem;">📸 Upload Product Image</h3>
+    """, unsafe_allow_html=True)
+    
+    image_file = st.file_uploader(
+        "Drag and drop or click to upload (JPEG, PNG)",
+        type=["jpg", "jpeg", "png"],
+        help="Max file size: 20MB",
+        label_visibility="collapsed"
+    )
+    
+    st.markdown("</div>", unsafe_allow_html=True)
 
+# Display Image
 if image_file is not None:
-    # Convert the uploaded file into a BytesIO stream
-    #image_stream = io.BytesIO(image_file.read())
     image = Image.open(image_file)
-    
-    try:
-        # Open the image using PIL
-        #image = Image.open(image_stream)  
-
-        # Display the image in Streamlit
-        st.image(image, caption="Uploaded Image", use_container_width=False,width=400)
-        with st.spinner("AI is processing this image and gathering insights..."):
-            response= get_gemini_response(API_KEY,prompt,image)
-            st.write(f"Product Identified using AI: {response}")
-
-    except Exception as e:
-        st.error(f"Error: Unable to open image. {e}")
-
-    # Specify the mime_type if Streamlit cannot auto-detect
-    #mime_type = image_file.type
-
-    #if mime_type:
-        #st.write(f"File MIME type detected: {mime_type}")
-        # Proceed with file processing
-    #else:
-        #st.error("Could not determine MIME type for the uploaded file. Please upload a valid file.")
-
-    #if mime_type in accepted_mime_types:
-        #st.write(f"File uploaded: {image_file.name}")
-        # Process the file as needed
-    #else:
-        #st.error(f"Unsupported file type: {mime_type}")
-
-
-
-    #prompt= st.text_input("Input prompt(e.g., 'What is in this photo?'):",key="input")
-    promptColor= st.text_input("'What Color you are looking for?'",key="inputcolor")
-    promptPurpose= st.text_input("'For what purpose you are looking for this product?'",key="inputpurpose")
-    promptBudget= st.text_input("'What is your budget?'",key="inputbudget")
-    
-    
+    st.image(image, caption="Uploaded Image", use_column_width=True)
+
+# Preferences Section
+with st.container():
+    st.markdown("### 🎨 Product Preferences")
+    col1, col2, col3 = st.columns(3)
+    with col1:
+        prompt_color = st.text_input("Preferred Color", placeholder="e.g., Navy Blue")
+    with col2:
+        prompt_purpose = st.text_input("Intended Use", placeholder="e.g., Running")
+    with col3:
+        prompt_budget = st.text_input("Budget Range", placeholder="e.g., ₹5,000-10,000")
+
+# Search Query Section
+user_query = st.text_area(
+    "🔍 Tell us more about what you're looking for:",
+    placeholder="Example: 'Looking for durable running shoes with good arch support'",
+    height=100
+)
 
-    user_query= st.text_area("What specific insights are you looking for from the image?",                 
-                 placeholder="Ask any questions related to the image content. The AI agent will analyze and gather more context if necessary",
-                 help="Share the specific questions or details you want to explore from the image."
-                 )
-    
-    if st.button("Search this Product",key="analyse_image_button"):
-        if not user_query:
-            st.warning("Please enter a query to analyse this image")
-        else:
+# Search Button
+if st.button("🚀 Find Perfect Products"):
+    if not user_query:
+        st.warning("Please describe what you're looking for")
+    else:
+        with st.spinner("🧠 AI is analyzing your preferences..."):
             try:
-                with st.spinner("AI is Processing this image and gathering insights..."):
-
-                    #Upload and process the video file
-                    #processed_image = upload_file(image_path)                                      
-                    #st.write(f"processed_image: {processed_image}")
-
-                    response= get_gemini_response(API_KEY,prompt,image)
-                    #st.write(f"Product Identified: {response}")
-
-                    
-
-                    #Prompt generation for Analysis
-                    analysis_prompt =(
-                        f"""
-                        I am looking for 
-                        {response}
-                        with the below preferences: 
-                        {promptColor} 
-                        {promptPurpose}
-                        {promptBudget}
-                        Can you provide recommendations. Always make sure that you provide hyperlinks to the product.
-                        {user_query}
-                        """
-                )
-
-                    #AI Agent Processing
-                    response = multimodal_Agent.run(analysis_prompt,image=image)
-
-                    # multimodal_Agent.print_response(
-                    # "I am looking for running shoes with the following preferences: Color: Black Purpose: Comfortable for long-distance running Budget: Under Rs. 10,000. Can you provide recommendations. Also provide links to the product. Search in Myntra"
-                    # )
-
-                #Display the result
-                st.subheader("Relevant search links for the product")
-                st.markdown(response.content)
-                #st.write(response)
-
+                # Step 1: Identify the product in the image
+                prompt = "What is in this photo?"
+                product_description = get_gemini_response(API_KEY, prompt, image)
+                
+                # Step 2: Generate analysis prompt
+                analysis_prompt = f"""
+                    I am looking for {product_description}
+                    with the below preferences:
+                    - Color: {prompt_color}
+                    - Purpose: {prompt_purpose}
+                    - Budget: {prompt_budget}
+                    Can you provide recommendations? Always make sure that you provide hyperlinks to the product.
+                    Additional details: {user_query}
+                """
+                
+                # Step 3: Get recommendations from the agent
+                response = multimodal_agent.run(analysis_prompt, image=image)
+                
+                # Display Results
+                st.markdown("""
+                    <div class="result-section">
+                        <h3 style="color: #2d3748; margin-bottom: 1rem;">🎉 Recommended Products</h3>
+                """, unsafe_allow_html=True)
+                
+                # Display the response content
+                st.markdown(response.content, unsafe_allow_html=True)
+                
+                st.markdown("</div>", unsafe_allow_html=True)
+                
             except Exception as error:
-                st.error(f"An error occured during analysis:{error}")
-            finally:
-                #Clean up temporary video file
-                # Path(image_path).unlink(missing_ok=True)
-                st.info("Clean up temporary image file")
-    #else:
-        #st.info("Upload a image file to start the Analysis")
-    
-        #Customize text area height
-    st.markdown(
-        """
-        <style>
-        .stTextArea textarea{
-            height:100px;   
-        }
-        </style>
-        """,
-        unsafe_allow_html=True
-
-    )
+                st.error(f"⚠️ An error occurred: {str(error)}")
+
+# Footer
+st.markdown("""
+    <div style="text-align: center; color: #718096; margin-top: 3rem;">
+        <hr style="margin-bottom: 1rem;">
+        <p>Powered by Gemini AI • Secure Processing • Always Learning</p>
+    </div>
+""", unsafe_allow_html=True)