initial commit

app.py

@@ -13,11 +13,21 @@ st.set_page_config(
     initial_sidebar_state="expanded",
 )
 
+# Initialize mode in session state
+if 'mode' not in st.session_state:
+    st.session_state['mode'] = 'Light Mode'
+
+# Light/Dark mode toggle
+mode = st.sidebar.selectbox('Select Mode', options=['Light Mode', 'Dark Mode'], index=0 if st.session_state['mode'] == 'Light Mode' else 1)
+
+st.session_state['mode'] = mode
+
 # Custom CSS to improve styling and responsiveness
-def local_css():
-    st.markdown(
-        """
+def local_css(mode='Light Mode'):
+    if mode == 'Light Mode':
+        css_string = '''
         <style>
+        /* Light mode CSS */
         /* Main layout */
         .main {
             background-color: #f0f2f6;
@@ -26,7 +36,7 @@ def local_css():
         .title h1 {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             text-align: center;
-            color: #ff4b4b;
+            color: #000000; /* Black color */
             font-size: 3rem;
             margin-bottom: 20px;
         }
@@ -38,32 +48,32 @@ def local_css():
         }
         /* Sidebar styling */
         [data-testid="stSidebar"] {
-            background-color: #ff4b4b;
+            background-color: #ffffff; /* White color */
         }
         [data-testid="stSidebar"] .css-ng1t4o {
-            color: white;
+            color: #000000; /* Black color */
         }
         [data-testid="stSidebar"] .css-1d391kg {
-            color: white;
+            color: #000000; /* Black color */
         }
         /* File uploader styling */
         .stFileUploader {
-            border: 2px dashed #ff4b4b;
+            border: 2px dashed #000000; /* Black color */
             border-radius: 10px;
             padding: 20px;
             text-align: center;
-            color: #ff4b4b;
-            background-color: #ffffff;
+            color: #000000; /* Black color */
+            background-color: #ffffff; /* White background */
             font-weight: bold;
         }
         /* File uploader hover effect */
         .stFileUploader:hover {
-            background-color: #ffe5e5;
+            background-color: #e0e0e0;
         }
         /* Button styling */
         .stButton>button {
-            background-color: #ff4b4b;
-            color: white;
+            background-color: #000000; /* Black background */
+            color: #ffffff; /* White text */
             border: none;
             padding: 0.7rem 1.5rem;
             border-radius: 5px;
@@ -72,22 +82,23 @@ def local_css():
             margin-top: 10px;
         }
         .stButton>button:hover {
-            background-color: #e04343;
-            color: white;
+            background-color: #333333; /* Darker black */
+            color: #ffffff;
         }
         /* Headers styling */
         h2 {
-            color: #ff4b4b;
+            color: #000000; /* Black color */
             margin-top: 30px;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         h3 {
-            color: #ff4b4b;
+            color: #000000; /* Black color */
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         /* Text styling */
         .stMarkdown p {
             font-size: 1.1rem;
+            color: #000000;
         }
         /* Footer styling */
         footer {
@@ -125,20 +136,129 @@ def local_css():
             border: 2px solid transparent;
         }
         .sample-images img:hover {
-            border: 2px solid #ff4b4b;
+            border: 2px solid #000000; /* Black border on hover */
         }
         </style>
-        """,
-        unsafe_allow_html=True
-    )
-
-local_css()
-
-# Hugging Face API key
-API_KEY = st.secrets["HF_API_KEY"]
+        '''
+    else:
+        css_string = '''
+        <style>
+        /* Dark mode CSS */
+        /* Main layout */
+        .main {
+            background-color: #1e1e1e;
+        }
+        /* Title styling */
+        .title h1 {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            text-align: center;
+            color: #ffffff; /* White color */
+            font-size: 3rem;
+            margin-bottom: 20px;
+        }
+        /* Image styling */
+        .st-image img {
+            border-radius: 15px;
+            margin-bottom: 20px;
+            max-width: 100%;
+        }
+        /* Sidebar styling */
+        [data-testid="stSidebar"] {
+            background-color: #333333; /* Dark gray */
+        }
+        [data-testid="stSidebar"] .css-ng1t4o {
+            color: #ffffff; /* White color */
+        }
+        [data-testid="stSidebar"] .css-1d391kg {
+            color: #ffffff; /* White color */
+        }
+        /* File uploader styling */
+        .stFileUploader {
+            border: 2px dashed #ffffff; /* White color */
+            border-radius: 10px;
+            padding: 20px;
+            text-align: center;
+            color: #ffffff; /* White color */
+            background-color: #1e1e1e; /* Dark background */
+            font-weight: bold;
+        }
+        /* File uploader hover effect */
+        .stFileUploader:hover {
+            background-color: #333333;
+        }
+        /* Button styling */
+        .stButton>button {
+            background-color: #ffffff; /* White background */
+            color: #000000; /* Black text */
+            border: none;
+            padding: 0.7rem 1.5rem;
+            border-radius: 5px;
+            font-size: 1.1rem;
+            font-weight: bold;
+            margin-top: 10px;
+        }
+        .stButton>button:hover {
+            background-color: #e0e0e0; /* Lighter gray */
+            color: #000000;
+        }
+        /* Headers styling */
+        h2 {
+            color: #ffffff; /* White color */
+            margin-top: 30px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        h3 {
+            color: #ffffff; /* White color */
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        /* Text styling */
+        .stMarkdown p {
+            font-size: 1.1rem;
+            color: #ffffff; /* White text */
+        }
+        /* Footer styling */
+        footer {
+            visibility: hidden;
+        }
+        /* Hide sidebar on small screens */
+        @media only screen and (max-width: 600px) {
+            [data-testid="stSidebar"] {
+                display: none;
+            }
+            .main .block-container {
+                padding-left: 1rem;
+                padding-right: 1rem;
+            }
+            .title h1 {
+                font-size: 2rem;
+            }
+            .stButton>button {
+                width: 100%;
+            }
+        }
+        /* Sample images grid */
+        .sample-images {
+            display: flex;
+            justify-content: center;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+        .sample-images img {
+            width: 150px;
+            height: 150px;
+            object-fit: cover;
+            border-radius: 10px;
+            cursor: pointer;
+            border: 2px solid transparent;
+        }
+        .sample-images img:hover {
+            border: 2px solid #ffffff; /* White border on hover */
+        }
+        </style>
+        '''
+    st.markdown(css_string, unsafe_allow_html=True)
 
-# Initialize the Hugging Face Inference Client
-client = InferenceClient(api_key=API_KEY)
+local_css(st.session_state['mode'])
 
 # Load the image classification pipeline
 @st.cache_resource
@@ -156,6 +276,8 @@ def get_ingredients_qwen(food_name):
     Generate a list of ingredients for the given food item using Qwen NLP model.
     Returns a clean, comma-separated list of ingredients.
     """
+    API_KEY = st.secrets["HF_API_KEY"]
+    client = InferenceClient(api_key=API_KEY)
     messages = [
         {
             "role": "user",
@@ -164,7 +286,7 @@ def get_ingredients_qwen(food_name):
         }
     ]
     try:
-        completion = client.chat.completions.create(
+        completion = client.chat_completions.create(
             model="Qwen/Qwen2.5-Coder-32B-Instruct",
             messages=messages,
             max_tokens=50
@@ -200,53 +322,54 @@ sample_images = {
 }
 
 cols = st.columns(len(sample_images))
+selected_sample = None
 for idx, (name, file_path) in enumerate(sample_images.items()):
     with cols[idx]:
         if st.button(f"{name}", key=name):
-            uploaded_file = file_path
+            selected_sample = file_path
 
 # File uploader
 st.subheader("Upload a food image:")
 uploaded_file = st.file_uploader("", type=["jpg", "png", "jpeg"])
 
-if 'uploaded_file' in locals() and uploaded_file is not None:
-    # Display the uploaded image
-    if isinstance(uploaded_file, str):
-        # Sample image selected
-        image = Image.open(uploaded_file)
-    else:
-        # User uploaded image
-        image = Image.open(uploaded_file)
+if selected_sample:
+    # Sample image selected
+    image = Image.open(selected_sample)
+    st.image(image, caption="Selected Sample Image", use_container_width=True)
+    classify = st.button("Classify", key="classify_sample")
+elif uploaded_file is not None:
+    # User uploaded image
+    image = Image.open(uploaded_file)
     st.image(image, caption="Uploaded Image", use_container_width=True)
-
-    # Classification button
-    if st.button("Classify"):
-        with st.spinner("Classifying..."):
-            # Make predictions
-            predictions = pipe_classification(image)
-
-            # Display only the top prediction
-            top_food = predictions[0]['label']
-            st.header(f"🍽️ Food: {top_food}")
-
-            # Generate and display ingredients for the top prediction
-            st.subheader("📝 Ingredients")
-            try:
-                ingredients = get_ingredients_qwen(top_food)
-                st.write(ingredients)
-            except Exception as e:
-                st.error(f"Error generating ingredients: {e}")
-
-            st.subheader("💡 Healthier Alternatives")
-            try:
-                client_gradio = Client("https://8a56cb969da1f9d721.gradio.live/")
-                result = client_gradio.predict(
-                    query=f"What's a healthy {top_food} recipe, and why is it healthy?",
-                    api_name="/get_response"
-                )
-                st.write(result)
-            except Exception as e:
-                st.error(f"Unable to contact RAG: {e}")
+    classify = st.button("Classify", key="classify_upload")
 else:
     st.info("Please select or upload an image to get started.")
+    classify = False
+
+if classify:
+    with st.spinner("Classifying..."):
+        # Make predictions
+        predictions = pipe_classification(image)
+
+        # Display only the top prediction
+        top_food = predictions[0]['label']
+        st.header(f"🍽️ Food: {top_food}")
+
+        # Generate and display ingredients for the top prediction
+        st.subheader("📝 Ingredients")
+        try:
+            ingredients = get_ingredients_qwen(top_food)
+            st.write(ingredients)
+        except Exception as e:
+            st.error(f"Error generating ingredients: {e}")
 
+        st.subheader("💡 Healthier Alternatives")
+        try:
+            client_gradio = Client("https://8a56cb969da1f9d721.gradio.live/")
+            result = client_gradio.predict(
+                query=f"What's a healthy {top_food} recipe, and why is it healthy?",
+                api_name="/get_response"
+            )
+            st.write(result)
+        except Exception as e:
+            st.error(f"Unable to contact RAG: {e}")