Update app.py

app.py

@@ -217,14 +217,14 @@ st.markdown("""
 st.header("How This Code Works")
 st.markdown("""
 1. **Utility Functions**  
-   - **generate_colorful_image**: Creates a synthetic image with a customizable proportion of blue pixels. This simulates different real-world scenarios, such as varying amounts of a brand color on packaging.
-   - **simple_threshold_blue**: Uses basic HSV thresholding to identify blue pixels. Provides a quick, broad detection method.
-   - **advanced_threshold_blue**: Combines multiple ranges for different shades of blue and applies morphological operations for noise reduction, giving more robust results.
-   - **plot_color_histogram**: Plots separate color channel (B, G, R) histograms to visualize the distribution of pixel intensities.
+   - **`generate_colorful_image`**: Creates a synthetic image with a customizable proportion of blue pixels. This simulates different real-world scenarios, such as varying amounts of a brand color on packaging.
+   - **`simple_threshold_blue`**: Uses basic HSV thresholding to identify blue pixels. Provides a quick, broad detection method.
+   - **`advanced_threshold_blue`**: Combines multiple ranges for different shades of blue and applies morphological operations for noise reduction, giving more robust results.
+   - **`plot_color_histogram`**: Plots separate color channel (B, G, R) histograms to visualize the distribution of pixel intensities.
 
 2. **Streamlit Layout**  
-   - **Sidebar**: Controls to adjust the fraction of blueish pixels and the image size. A button to generate a new random image is also included.
-   - **Main Page**: 
+   - **`Sidebar`**: Controls to adjust the fraction of blueish pixels and the image size. A button to generate a new random image is also included.
+   - **`Main Page`**: 
      - Displays the generated image and its color histogram side by side.
      - Shows the simple vs. advanced detection masks with the calculated percentage of blue. 
      - Progress bars indicate the proportion of blue visually.
@@ -233,9 +233,9 @@ st.markdown("""
    - By integrating this approach with IoT devices, large-scale manufacturing lines can automate color checks. The masks and percentage calculations serve as a foundation for real-time QA alerts, data logging, and future analytics.
 
 4. **Execution Flow**  
-   1. When the user clicks "Generate New Random Image," it calls `generate_colorful_image()` to create a fresh synthetic image.
+   1. When the user clicks "`Generate New Random Image`," it calls `generate_colorful_image()` to create a fresh synthetic image.
    2. The image is converted to RGB for display. Meanwhile, `plot_color_histogram()` renders a histogram for deeper insight into color distribution.
-   3. The **simple_threshold_blue** and **advanced_threshold_blue** functions each produce their own masks and calculations, displayed in the main interface.
+   3. The **`simple_threshold_blue`** and **`advanced_threshold_blue`** functions each produce their own masks and calculations, displayed in the main interface.
    4. By comparing the results of both methods, users can see the differences in detection accuracy and how morphological operations can refine the result.
 
 This cohesive setup ensures a **user-friendly**, **real-time** demonstration of how color segmentation can be applied to industrial use cases—especially relevant for ITC PSPD's commitments to **quality** and **innovation**.