initial commit

app.py

@@ -13,206 +13,100 @@ 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(mode='Light Mode'):
-    if mode == 'Light Mode':
-        css_string = '''
+def local_css():
+    st.markdown(
+        """
         <style>
-        /* Light mode CSS */
-        body {
+        /* Main layout */
+        .main {
             background-color: #f0f2f6;
-            color: #000000;
         }
         /* Title styling */
         .title h1 {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             text-align: center;
-            color: #000000;
+            color: #ff4b4b;
             font-size: 3rem;
             margin-bottom: 20px;
         }
         /* Image styling */
-        img {
+        .st-image img {
             border-radius: 15px;
             margin-bottom: 20px;
             max-width: 100%;
         }
         /* Sidebar styling */
         [data-testid="stSidebar"] {
-            background-color: #ffffff;
-            color: #000000;
+            background-color: #ff4b4b;
+        }
+        [data-testid="stSidebar"] .css-ng1t4o {
+            color: white;
+        }
+        [data-testid="stSidebar"] .css-1d391kg {
+            color: white;
         }
         /* File uploader styling */
         .stFileUploader {
-            border: 2px dashed #000000;
+            border: 2px dashed #ff4b4b;
             border-radius: 10px;
             padding: 20px;
             text-align: center;
-            color: #000000;
+            color: #ff4b4b;
             background-color: #ffffff;
             font-weight: bold;
         }
+        /* File uploader hover effect */
         .stFileUploader:hover {
-            background-color: #e0e0e0;
+            background-color: #ffe5e5;
         }
         /* Button styling */
-        button {
-            background-color: #000000 !important;
-            color: #ffffff !important;
-            border: none !important;
-            padding: 0.7rem 1.5rem !important;
-            border-radius: 5px !important;
-            font-size: 1.1rem !important;
-            font-weight: bold !important;
-            margin-top: 10px !important;
-        }
-        button:hover {
-            background-color: #333333 !important;
-            color: #ffffff !important;
-        }
-        /* Headers styling */
-        h2, h3 {
-            color: #000000;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-        /* Text styling */
-        p {
+        .stButton>button {
+            background-color: #ff4b4b;
+            color: white;
+            border: none;
+            padding: 0.7rem 1.5rem;
+            border-radius: 5px;
             font-size: 1.1rem;
-            color: #000000;
-        }
-        /* Hide footer */
-        footer {
-            visibility: hidden;
-        }
-        /* Responsive Design */
-        @media only screen and (max-width: 600px) {
-            [data-testid="stSidebar"] {
-                display: none;
-            }
-            .block-container {
-                padding-left: 1rem;
-                padding-right: 1rem;
-            }
-            .title h1 {
-                font-size: 2rem;
-            }
-            button {
-                width: 100% !important;
-            }
-        }
-        /* 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 #000000;
-        }
-        </style>
-        '''
-    else:
-        css_string = '''
-        <style>
-        /* Dark mode CSS */
-        body {
-            background-color: #1e1e1e;
-            color: #ffffff;
-        }
-        /* Title styling */
-        .title h1 {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            text-align: center;
-            color: #ffffff;
-            font-size: 3rem;
-            margin-bottom: 20px;
-        }
-        /* Image styling */
-        img {
-            border-radius: 15px;
-            margin-bottom: 20px;
-            max-width: 100%;
-        }
-        /* Sidebar styling */
-        [data-testid="stSidebar"] {
-            background-color: #333333;
-            color: #ffffff;
-        }
-        /* File uploader styling */
-        .stFileUploader {
-            border: 2px dashed #ffffff;
-            border-radius: 10px;
-            padding: 20px;
-            text-align: center;
-            color: #ffffff;
-            background-color: #1e1e1e;
             font-weight: bold;
+            margin-top: 10px;
         }
-        .stFileUploader:hover {
-            background-color: #333333;
-        }
-        /* Button styling */
-        button {
-            background-color: #ffffff !important;
-            color: #000000 !important;
-            border: none !important;
-            padding: 0.7rem 1.5rem !important;
-            border-radius: 5px !important;
-            font-size: 1.1rem !important;
-            font-weight: bold !important;
-            margin-top: 10px !important;
-        }
-        button:hover {
-            background-color: #e0e0e0 !important;
-            color: #000000 !important;
+        .stButton>button:hover {
+            background-color: #e04343;
+            color: white;
         }
         /* Headers styling */
-        h2, h3 {
-            color: #ffffff;
+        h2 {
+            color: #ff4b4b;
+            margin-top: 30px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        h3 {
+            color: #ff4b4b;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         /* Text styling */
-        p {
+        .stMarkdown p {
             font-size: 1.1rem;
-            color: #ffffff;
         }
-        /* Hide footer */
+        /* Footer styling */
         footer {
             visibility: hidden;
         }
-        /* Responsive Design */
+        /* Hide sidebar on small screens */
         @media only screen and (max-width: 600px) {
             [data-testid="stSidebar"] {
                 display: none;
             }
-            .block-container {
+            .main .block-container {
                 padding-left: 1rem;
                 padding-right: 1rem;
             }
             .title h1 {
                 font-size: 2rem;
             }
-            button {
-                width: 100% !important;
+            .stButton>button {
+                width: 100%;
             }
         }
         /* Sample images grid */
@@ -231,14 +125,20 @@ def local_css(mode='Light Mode'):
             border: 2px solid transparent;
         }
         .sample-images img:hover {
-            border: 2px solid #ffffff;
+            border: 2px solid #ff4b4b;
         }
         </style>
-        '''
-    st.markdown(css_string, unsafe_allow_html=True)
+        """,
+        unsafe_allow_html=True
+    )
+
+local_css()
+
+# Hugging Face API key
+API_KEY = st.secrets["HF_API_KEY"]
 
-# Apply the custom CSS based on the selected mode
-local_css(st.session_state['mode'])
+# Initialize the Hugging Face Inference Client
+client = InferenceClient(api_key=API_KEY)
 
 # Load the image classification pipeline
 @st.cache_resource
@@ -256,8 +156,6 @@ 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",
@@ -266,7 +164,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
@@ -302,54 +200,53 @@ 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):
-            selected_sample = file_path
+            uploaded_file = file_path
 
 # File uploader
 st.subheader("Upload a food image:")
 uploaded_file = st.file_uploader("", type=["jpg", "png", "jpeg"])
 
-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)
+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)
     st.image(image, caption="Uploaded Image", use_container_width=True)
-    classify = st.button("Classify", key="classify_upload")
+
+    # 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}")
 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}")