Initial Commit

app.py

@@ -9,16 +9,102 @@ from gradio_client import Client
 st.set_page_config(
     page_title="Food Image Recognition with Ingredients",
     page_icon="🍔",
-    layout="wide",
+    layout="centered",
     initial_sidebar_state="expanded",
 )
 
 # Custom CSS to improve styling and responsiveness
-def local_css(file_name):
-    with open(file_name) as f:
-        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
+def local_css():
+    st.markdown(
+        """
+        <style>
+        /* Main layout */
+        .main {
+            background-color: #f0f2f6;
+        }
+        /* Title styling */
+        .title h1 {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            text-align: center;
+            color: #ff4b4b;
+            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: #ff4b4b;
+        }
+        [data-testid="stSidebar"] .css-ng1t4o {
+            color: white;
+        }
+        [data-testid="stSidebar"] .css-1d391kg {
+            color: white;
+        }
+        /* File uploader styling */
+        .css-1y0tads {
+            background-color: #ff4b4b;
+            color: white;
+            border: none;
+            border-radius: 5px;
+        }
+        .css-1y0tads:hover {
+            background-color: #e04343;
+            color: white;
+        }
+        /* Button styling */
+        .stButton>button {
+            background-color: #ff4b4b;
+            color: white;
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 5px;
+            font-size: 1rem;
+            font-weight: bold;
+            margin-top: 10px;
+        }
+        .stButton>button:hover {
+            background-color: #e04343;
+            color: white;
+        }
+        /* Headers styling */
+        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 */
+        .stMarkdown p {
+            font-size: 1.1rem;
+        }
+        /* Footer styling */
+        footer {
+            visibility: hidden;
+        }
+        /* Mobile responsiveness */
+        @media only screen and (max-width: 600px) {
+            .title h1 {
+                font-size: 2rem;
+            }
+            .stButton>button {
+                width: 100%;
+            }
+        }
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
 
-local_css("style.css")
+local_css()
 
 # Hugging Face API key
 API_KEY = st.secrets["HF_API_KEY"]
@@ -60,51 +146,55 @@ def get_ingredients_qwen(food_name):
     except Exception as e:
         return f"Error generating ingredients: {e}"
 
-# Streamlit app setup
-st.title("Food Image Recognition with Ingredients")
+# Main content
+st.markdown('<div class="title"><h1>Food Image Recognition with Ingredients</h1></div>', unsafe_allow_html=True)
 
 # Add banner image
-st.image("IR_IMAGE.png", caption="Food Recognition Model", use_column_width=True)
+st.image("IR_IMAGE.png", use_column_width=True)
 
 # Sidebar for model information
 with st.sidebar:
     st.title("Model Information")
-    st.write("**Image Classification Model**: Shresthadev403/food-image-classification")
-    st.write("**LLM for Ingredients**: Qwen/Qwen2.5-Coder-32B-Instruct")
+    st.write("**Image Classification Model**")
+    st.write("Shresthadev403/food-image-classification")
+    st.write("**LLM for Ingredients**")
+    st.write("Qwen/Qwen2.5-Coder-32B-Instruct")
     st.markdown("---")
     st.markdown("<p style='text-align: center;'>Developed by Muhammad Hassan Butt.</p>", unsafe_allow_html=True)
 
-# Main content
+# File uploader
 uploaded_file = st.file_uploader("Choose a food image...", type=["jpg", "png", "jpeg"])
 
 if uploaded_file is not None:
     # Display the uploaded image
     image = Image.open(uploaded_file)
     st.image(image, caption="Uploaded Image", use_column_width=True)
-    st.write("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}")
+    # 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}")

style.css

@@ -1,74 +0,0 @@
-/* General settings */
-body {
-    background-color: #f5f5f5;
-}
-
-/* Title styling */
-h1 {
-    text-align: center;
-    color: #333333;
-    font-size: 2.5rem;
-    margin-bottom: 20px;
-}
-
-/* Image styling */
-.st-image > img {
-    border-radius: 10px;
-    margin-bottom: 20px;
-}
-
-/* Sidebar styling */
-.css-1d391kg {
-    background-color: #ffffff;
-    border-right: 1px solid #e6e6e6;
-}
-
-.stSidebar > div {
-    padding: 20px;
-}
-
-/* Text elements */
-h2 {
-    color: #4285F4;
-    margin-top: 30px;
-}
-
-h3 {
-    color: #333333;
-}
-
-/* File uploader styling */
-.css-1cpxqw2 {
-    background-color: #4285F4;
-    color: #ffffff;
-    border: none;
-    border-radius: 5px;
-}
-
-.css-1cpxqw2:hover {
-    background-color: #357ae8;
-    color: #ffffff;
-}
-
-/* Footer styling */
-footer {
-    visibility: hidden;
-}
-
-/* Adjustments for mobile devices */
-@media only screen and (max-width: 600px) {
-    /* Adjust title size */
-    h1 {
-        font-size: 2rem;
-    }
-
-    /* Adjust image size */
-    .st-image > img {
-        width: 100%;
-    }
-
-    /* Sidebar adjustments */
-    .css-1d391kg {
-        width: 100%;
-    }
-}