Initial Commit

app.py

@@ -5,6 +5,21 @@ from huggingface_hub import InferenceClient
 import os
 from gradio_client import Client
 
+# Set page configuration
+st.set_page_config(
+    page_title="Food Image Recognition with Ingredients",
+    page_icon="🍔",
+    layout="wide",
+    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)
+
+local_css("style.css")
+
 # Hugging Face API key
 API_KEY = st.secrets["HF_API_KEY"]
 
@@ -49,20 +64,23 @@ def get_ingredients_qwen(food_name):
 st.title("Food Image Recognition with Ingredients")
 
 # Add banner image
-st.image("IR_IMAGE.png", caption="Food Recognition Model", use_container_width=True)
+st.image("IR_IMAGE.png", caption="Food Recognition Model", use_column_width=True)
 
 # Sidebar for model information
-st.sidebar.title("Model Information")
-st.sidebar.write("**Image Classification Model**: Shresthadev403/food-image-classification")
-st.sidebar.write("**LLM for Ingredients**: Qwen/Qwen2.5-Coder-32B-Instruct")
+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.markdown("---")
+    st.markdown("<p style='text-align: center;'>Developed by Muhammad Hassan Butt.</p>", unsafe_allow_html=True)
 
-# Upload image
+# Main content
 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_container_width=True)
+    st.image(image, caption="Uploaded Image", use_column_width=True)
     st.write("Classifying...")
 
     # Make predictions
@@ -80,13 +98,13 @@ if uploaded_file is not None:
     except Exception as e:
         st.error(f"Error generating ingredients: {e}")
 
-    st.subheader("Healthier alternatives:")
+    st.subheader("Healthier Alternatives")
     try:
-        client = Client("https://8a56cb969da1f9d721.gradio.live/")
-        result = client.predict(query=f"What's a healthy {top_food} recipe, and why is it healthy?", api_name="/get_response")
+        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}")
-
-# Footer
-st.sidebar.markdown("Developed by Muhammad Hassan Butt.")

style.css

@@ -0,0 +1,74 @@
+/* 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%;
+    }
+}