fixes

pages/4_Report.py

@@ -23,7 +23,7 @@ def render_report():
     st.markdown("""
     <div style='text-align: justify'>
 
-    The project is a <b>recipe recommendation system</b> that allows users to either <b>type a textual query</b> or <b>upload images of food items</b>. Based on the inputs — including user-provided tags and detected ingredients — the application returns the most relevant recipes using semantic search and image classification.
+    The project is a <b>recipe recommendation system</b> that allows users to either <b>type a textual query</b> or <b>upload images of food items</b>. Based on the inputs, including user-provided tags and detected ingredients, the application returns the most relevant recipes using semantic search and image classification.
 
     <h4>1.1 NLP Task:</h4>
 
@@ -55,7 +55,7 @@ def render_report():
     st.subheader("2. Introduction")
     
     st.markdown("""
-    In an increasingly digital culinary world, users often look for personalized recipe recommendations based on either what they have at hand or what they crave. While traditional recipe search engines rely heavily on keyword matching, they fail to understand the deeper semantic context of ingredients, cooking methods, and dietary preferences. Similarly, visual recognition of food items can play a key role in enabling intuitive, image-based search experiences — especially for users unsure of ingredient names or spelling.
+    In an increasingly digital culinary world, users often look for personalized recipe recommendations based on either what they have at hand or what they crave. While traditional recipe search engines rely heavily on keyword matching, they fail to understand the deeper semantic context of ingredients, cooking methods, and dietary preferences. Similarly, visual recognition of food items can play a key role in enabling intuitive, image-based search experiences, especially for users unsure of ingredient names or spelling.
 
     This project aims to build an **end-to-end multimodal recipe recommendation system** that supports both **natural language queries** and **image-based inputs**. Users can either type a textual query such as “healthy vegetarian salad” or upload an image of a food item (e.g., pear, onion), and the system will return the most relevant recipes. This is achieved by integrating two advanced deep learning pipelines:
 
@@ -71,11 +71,11 @@ def render_report():
     st.markdown("## 3. CV: Produce Classification Task")
 
     st.markdown("""
-    For our Produce Classification task, we manually captured images of **tomato, onion, pear, and strawberry**, collecting a total of **12,000 images** — approximately **3,000 per category**.  
+    For our Produce Classification task, we manually captured images of **tomato, onion, pear, and strawberry**, collecting a total of **12,000 images**, approximately **3,000 per category**.  
     Within each category, we introduced **3 intra-class variations**, with around **1,000 samples per variation**, by photographing the produce in different physical states:
 
     - **Whole:** The item is uncut and intact (e.g., an entire pear or onion).
-    - **Halved/Hulled:** The item is partially cut — for example, a strawberry with the hull removed or a fruit sliced in half.
+    - **Halved/Hulled:** The item is partially cut, for example, a strawberry with the hull removed or a fruit sliced in half.
     - **Sliced:** The item is cut into smaller segments or slices, such as onion rings or tomato wedges.
 
     These variations allow the model to generalize better by learning visual features across different presentations, shapes, and cross-sections of each produce type.
@@ -109,12 +109,12 @@ def render_report():
     st.markdown("""
     <div style='text-align: justify;'>
 
-    This RGB histogram plot shows the <b>distribution of pixel intensities</b> for the <b>Red, Green, and Blue channels</b> in one sample image per class. It’s a <b>visual summary of color composition</b> and can reveal important patterns about your dataset.
+    This RGB histogram plot shows the <b>distribution of pixel intensities</b> for the <b>Red, Green, and Blue channels</b> per class. It’s a <b>visual summary of color composition</b> and can reveal important patterns about your dataset.
 
     </div>
     """, unsafe_allow_html=True)
 
-    st.image("assets/images/part1_image_histogram.png", caption="RGB histogram distribution for one image per class", use_container_width=True)
+    st.image("assets/images/part1_image_histogram.png", caption="RGB histogram distribution per class", use_container_width=True)
 
     st.markdown("""
     From the above histograms, we observe the following:
@@ -135,7 +135,7 @@ def render_report():
         **1. Onion**
         - Red & Green: Sharp peaks at 140–150  
         - Blue: Broad peak around 100  
-        - Likely reflects white/yellow onion layers with soft shadows; blue may be from background or lighting  
+        - Likely reflects white/yellow onion layers with soft shadows.
         - The model may learn to detect mid-range blue with red-green spikes
         """)
 
@@ -156,7 +156,6 @@ def render_report():
         - Green & Blue: Peaks between 50–120  
         - Red: Moderate and spread around 100–150  
         - Suggests soft green/yellow pear tones with consistent lighting  
-        - Minimal intra-class variation makes this class stable for classification
         """)
 
     with col4:
@@ -189,7 +188,7 @@ def render_report():
 
     1. **Blurriness of All Average Images**  
     - High blur indicates significant variation in object position, orientation, and size.  
-    - No consistent alignment or cropping — objects appear in different parts of the frame.
+    - No consistent alignment or cropping, objects appear in different parts of the frame.
 
     2. **Centered Color Blobs**  
     - Each average image displays a dominant center color:  
@@ -229,7 +228,7 @@ def render_report():
     Although the typical split is 70:15:15, we opted to test on more data to better evaluate generalization and avoid overfitting.
 
     Due to hardware constraints (GPU memory limits), we used a **batch size of 32**. We employed the **Adam optimizer** with a learning rate of **0.0001**.            
-    We also implemented **early stopping** with a patience of 5 epochs — meaning training stops if no improvement is seen in validation accuracy for 5 consecutive epochs.
+    We also implemented **early stopping** with a patience of 5 epochs, meaning training stops if no improvement is seen in validation accuracy for 5 consecutive epochs.
     """)
 
     # Insert training & validation graph
@@ -253,7 +252,7 @@ def render_report():
 
     From the confusion matrix, it is evident that the model demonstrates strong **class separability** and **robust generalization**, with only **17 total misclassifications out of 3,035 test samples**.
 
-    This confirms that the model is capable of distinguishing even visually similar classes with high precision.
+    This confirms that the model is capable of distinguishing these classes with high precision.
     """)
 
     st.markdown("""
@@ -282,7 +281,7 @@ def render_report():
 
     Most misclassifications occurred between **strawberry** and **onion**. These classes exhibited greater variation in object positioning. In some cases, the objects (onion or strawberry) were **partially hidden**, with only a small portion visible, and were also affected by **poor lighting conditions**. Such combinations made it challenging for the model to make accurate predictions.
 
-    However, with an F1-score of **99%** for these classes, we can confidently conclude that the model performed well overall — especially on images where the object was **clearly visible**, **fully within the frame**, and in **good general condition**. This further suggests that the model is **robust and ready for real-world use**.
+    However, with an F1-score of **99%** for these classes, we can confidently conclude that the model performed well overall, especially on images where the object was **clearly visible**, **fully within the frame**, and in **good general condition**. This further suggests that the model is **robust and ready for real-world use**.
 
     Notably, we did not observe any misclassifications for **pear** and **tomato**. Based on our earlier data analysis, images in these classes were generally **well-centered and localized**, which likely contributed to the model's high accuracy (100%) in those categories.
     """)
@@ -296,7 +295,7 @@ def render_report():
 
     To understand what our model has actually learned and how it perceives different food items internally, we visualized **feature maps** extracted from various convolutional layers of **EfficientNet-B0**.
 
-    The image below shows a **single most-activated channel per layer** for each class: Onion, Pear, Tomato, and Strawberry — across **9 convolutional stages**.
+    The image below shows a **single most-activated channel per layer** for each class (Onion, Pear, Tomato, and Strawberry), across **9 convolutional stages**.
 
     """)
 
@@ -320,7 +319,7 @@ def render_report():
 
     3. **Deep Layers (Conv 7–9):**
     - Feature maps become **coarser and more focused**, losing most spatial resolution.
-    - The network now highlights only **key discriminative regions** — often the **center mass** of the object.
+    - The network now highlights only **key discriminative regions**, often the **center mass** of the object.
     - While the original shape is nearly lost, **strong activation in a focused area** indicates high confidence in classification.
     - This shows the model is no longer looking at superficial textures, but **has learned what features truly define each class**.
 
@@ -343,11 +342,11 @@ def render_report():
     st.markdown("""
     As mentioned earlier, we have **3,000 images per class**, and within each class, there are **1,000 images per variation** of **whole**, **halved/hulled**, and **sliced/cored**.  
 
-    These variations not only help make our main classification model more **robust to presentation differences**, but also allow us to analyze how the model performs under **intra-class variation** — that is, variation within the same object category.
+    These variations not only help make our main classification model more **robust to presentation differences**, but also allow us to analyze how the model performs under **intra-class variation**, that is, variation within the same object category.
 
     ### Importance of Intra-Class Variation analysis:
 
-    - In real-world settings (e.g., cooking, grocery shelves, or user-uploaded photos), food items can appear in multiple forms — whole, cut, or partially visible.
+    - In real-world settings (e.g., cooking, grocery shelves, or user-uploaded photos), food items can appear in multiple forms (whole, cut, or partially visible).
     - A model that performs well only on whole items may fail when the object is sliced or obscured.
     - By training and evaluating a separate **variation classifier**, we can:
         - Assess the **distinctiveness** of each variation within a class.
@@ -369,7 +368,7 @@ def render_report():
 
     As we are using the **EfficientNet-B0** model, all images in our dataset are resized to <b>224×224</b> pixels. This is the standard input size for EfficientNet and ensures compatibility with pre-trained weights, as well as efficient GPU utilization during training.
 
-    Below are sample resized images for each class — <b>onion, pear, strawberry, and tomato</b> — showing their intra-class variations: <b>whole, halved/hulled, and sliced</b>.  
+    Below are sample resized images for each class (<b>onion, pear, strawberry, and tomato</b>) showing their intra-class variations: <b>whole, halved/hulled, and sliced</b>.  
     These samples provide a visual sense of the input data and the diversity of presentation styles within each category.
 
     For training purposes, the images were normalized by dividing each pixel value by <b>255</b>.
@@ -398,7 +397,7 @@ def render_report():
     st.markdown("""
     <div style='text-align: justify;'>
 
-    This RGB histogram plot shows the <b>distribution of pixel intensities</b> for the <b>Red, Green, and Blue channels</b> in one sample image per class. It’s a <b>visual summary of color composition</b> and can reveal important patterns about your dataset.
+    This RGB histogram plot shows the <b>distribution of pixel intensities</b> for the <b>Red, Green, and Blue channels</b> of images per class. It’s a <b>visual summary of color composition</b> and can reveal important patterns about your dataset.
 
     </div>
     """, unsafe_allow_html=True)
@@ -421,12 +420,12 @@ def render_report():
     - All three channels peak around pixel values 130–150.
     - Histogram is **smoother and more centered**, indicating balanced exposure and color.
     - Slight red dominance in the mid-range may be due to the red/pink inner rings being more exposed.
-    - **Interpretation:** Sliced onions offer the most uniform and balanced appearance across all channels — useful for training stability.
-
+    - **Interpretation:** Sliced onions offer the most uniform and balanced appearance across all channels.
+                
     **3. Whole**
     - Shows **high red peaks** near pixel value 220 and strong green variation around 120–150.
     - Blue is less dominant and shows more fluctuation in the mid-range.
-    - Histogram is noisier with more channel separation — likely due to outer skin, glare, or inconsistent lighting.
+    - Histogram is noisier with more channel separation, likely due to outer skin, glare, or inconsistent lighting.
     - **Interpretation:** Whole onions are visually more complex, capturing skins, glare, and full curvature. This leads to higher variation.  
         - To capture this complexity effectively, using **RGB channels** is essential.
 
@@ -474,7 +473,7 @@ def render_report():
     -  **Lighting Conditions:**
         - Halved images show the best exposure balance.
         - Sliced images include darker regions, hinting at variability in data quality.
-        - Whole pears are consistently lit but may be low contrast.
+        - Whole pears are consistently lit.
 
     - **Model Implications:**
         - Halved pears are optimal for training due to stable exposure.
@@ -499,8 +498,7 @@ def render_report():
     **2. Sliced**
     - Displays a **strong green peak near 140** and red around 130–150, which are consistent with the **flesh and seedy outer layer** of strawberries.
     - Blue is subdued across the entire range, which is expected for strawberries.
-    - Histogram is **tighter and more concentrated** than hulled, with fewer highlights and shadows.
-    - **Interpretation:** Sliced strawberries appear more uniform and less reflective, providing a **clean but slightly less diverse color profile than hulled**.
+    - **Interpretation:** Sliced strawberries appear more uniform and less reflective, providing a **clean color profile**.
 
     **3. Whole**
     - Broad red and green peaks from **100–160**, with visible spikes around **140–150**, typical of a fully intact strawberry's surface.
@@ -546,7 +544,7 @@ def render_report():
     - Strong **red peak near 150–160** represents the core tomato surface.
     - Green and blue show defined peaks around 90–130, suggesting presence of both background and stem/leaf regions.
     - Well-defined, multi-peak structure shows moderate saturation and **good contrast**.
-    - **Interpretation:** Whole tomatoes appear cleanly illuminated and well-captured, with a **balanced mix of object and background**. Likely it will be stable and reliable variation for model training.
+    - **Interpretation:** Whole tomatoes appear cleanly illuminated and well-captured, with a **balanced mix of object and background**.
 
     **Dataset Insights**
 
@@ -670,7 +668,7 @@ def render_report():
     st.image("assets/images/part2_avg_tomato.png", caption="Average image tomato variations", use_container_width=True)
 
     st.markdown("""
-    **isual Observations**
+    **Visual Observations**
 
     1. **Diced**
         - Multiple reddish blobs are visible but still form a centralized mass.
@@ -693,7 +691,7 @@ def render_report():
     """)
 
 
-    st.markdown("### 3.4 Image Analysis conclusion")
+    st.markdown("### 4.4 Image Analysis conclusion")
 
     st.markdown("""
     The combination of average images and RGB histogram plots reveals that, in general, all classes (onion, pear, strawberry, tomato) demonstrate a strong central focus in their average images. This is ideal for convolutional neural networks (CNNs), which exploit spatial locality. However, such consistency may limit generalization to real-world, off-centered samples.
@@ -717,7 +715,7 @@ def render_report():
     st.markdown("### 4.5 Training and Results")
 
     st.markdown("""
-    We used a dataset of **3,000 manually labeled images per class**, with 1,000 images for each intra-class variation — **whole**, **halved/hulled**, and **sliced** — across four categories: **tomato**, **onion**, **pear**, and **strawberry**.
+    We used a dataset of **3,000 manually labeled images per class**, with 1,000 images for each intra-class variation (**whole**, **halved/hulled**, and **sliced**) across four categories: **tomato**, **onion**, **pear**, and **strawberry**.
 
     The dataset was split using either a **60:20:20 ratio** or, in some cases, a **50:25:25 ratio** for training, validation, and testing, respectively.
     """)
@@ -751,9 +749,9 @@ def render_report():
     From the average image analysis, these classes showed **higher visual noise and blur**, indicating significant intra-class variation. Without augmentation, the model risked **overfitting to noise** and generalizing poorly. Rotation-based augmentation helped expose the model to diverse orientations and reduce this risk.
 
     **Why no augmentation for pear and tomato?**  
-    Our analysis of their average images and RGB histograms revealed that these classes were **well-centered**, **well-lit**, and had **limited background variation**. As a result, the model could learn from them effectively without augmentation. Although classification performance may degrade in real-world scenarios with cluttered or complex backgrounds, in **ideal settings** — where images are centered and consistently lit — these classes are expected to yield **strong performance even without augmentation**.
+    Our analysis of their average images and RGB histograms revealed that these classes were **well-centered**, **well-lit**, and had **limited background variation**. As a result, the model could learn from them effectively without augmentation. Although classification performance may degrade in real-world scenarios with cluttered or complex backgrounds, in **ideal settings** where images are centered and consistently lit, these classes are expected to yield **strong performance even without augmentation**.
 
-    Due to hardware constraints (GPU memory limits), we used a **batch size of 32**. We also implemented **early stopping** with a patience of 3 epochs — meaning training stops if no improvement is seen in validation accuracy for 5 consecutive epochs.
+    Due to hardware constraints (GPU memory limits), we used a **batch size of 32**. We also implemented **early stopping** with a patience of 3 epochs, meaning training stops if no improvement is seen in validation accuracy for 3 consecutive epochs.
     """)
 
 
@@ -824,10 +822,10 @@ def render_report():
     Minor confusion is observed between **hulled and whole**, likely due to similar color and shape. Still, the model maintains excellent overall accuracy and balance.
     
     3. **Pear**  
-    Perfect classification across all classes — no false positives or false negatives — reflecting highly consistent, separable visual features in the dataset.
+    Perfect classification across all classes (no false positives or false negatives), reflecting highly consistent, separable visual features in the dataset.
 
     4. **Tomato**  
-    No misclassifications were made; the model distinguishes **diced, sliced, and whole** tomatoes perfectly — likely due to strong shape and texture differences across classes.
+    No misclassifications were made. The model distinguishes **diced, sliced, and whole** tomatoes perfectly, likely due to strong shape and texture differences across classes.
     """)
 
     st.markdown("""
@@ -866,7 +864,7 @@ def render_report():
 
     To understand what our model has actually learned and how it perceives different food items internally, we visualized **feature maps** extracted from various convolutional layers of **EfficientNet-B0**.
 
-    The image below shows the **single most-activated channel per layer** for each intraclass variation — whole, halved/hulled, and sliced — of the main classes: Onion, Pear, Tomato, and Strawberry, across **9 convolutional stages**.
+    The image below shows the **single most-activated channel per layer** for each intraclass variation (whole, halved/hulled, and sliced) of the main classes: Onion, Pear, Tomato, and Strawberry, across **9 convolutional stages**.
     """)
 
     st.markdown("""