Update app.py

app.py

@@ -14,22 +14,38 @@ def main():
             st.image("image.jpg", use_column_width=True)
         with col2:
             st.markdown(
-            """
-            <h3 style='text-align: center;'>Lorem ipsum dolor sit amet!</h3>
-            
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque.</p>            
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque.</p>            
-            """,
-            unsafe_allow_html=True)
-        st.markdown(
-            """
-            <div style='text-align: center;'>
-                <h3 style='text-align: center;'>About the demo</h3>
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque.</p>
-            
-            </div>
-            """, 
-            unsafe_allow_html=True)
+                """
+                <h3 style='text-align: center;'>Jewellery Font Type Detection - Proposed Solution Demo</h3>
+                
+                <p>The challenge is to identify the correct order ID from a list by using both the OCR detected text and font type of custom-made jewelry.</p>
+
+                <h4>Proposed Solution</h4>
+                <p>Our proposed solution involves bolstering an OCR engine with a custom-trained CNN for font type classification. In this demo, we have trained two custom CNNs to classify two font types using a synthetic dataset of 1000 images for each font, generated using NumPy, PIL, and OpenCV. The dataset consists of text images rendered with different fonts, utilizing variations in font size and positioning to create diversity. However, training an accurate custom CNN for the given problem requires thousands of images due to the similar nature of the font types used in custom jewelry.</p>
+
+                <p>There are two potential solutions to overcome this challenge:</p>
+
+                <h5>Solution 1</h5>
+                <p>Pre-process the image to a level where we can generate a similar synthetic dataset.</p>
+
+                <h5>Solution 2</h5>
+                <p>Use Photoshop batch actions to create thousands of realistic images.</p>
+
+                """, unsafe_allow_html=True
+            )
+        
+        st.subheader("Otsu's Thresholding")
+        col3, col4 = st.columns([2, 1])
+        with col4:
+            st.image('otsu.PNG', use_column_width=True)
+
+        with col3:
+            st.markdown("""<p>In initial testing, we found that Otsu thresholding can pre-process images to a similar level of a synthetic dataset. See the image :</p>
+            <p>Otsu's method assumes that the image contains two distinct intensity distributions, corresponding to the foreground and background regions. 
+            It calculates the threshold that minimizes the intra-class variance or maximizes the inter-class variance. 
+            By choosing the threshold that maximizes the inter-class variance, Otsu's thresholding effectively separates the two classes, resulting in a binary image.</p> """, unsafe_allow_html=True)
+
+        colab_link = '[<img src="https://colab.research.google.com/assets/colab-badge.svg">](https://colab.research.google.com/drive/1tq35g7ym1c73uDlAcy2KChIXsqlNY-RL?usp=sharing)'
+        st.markdown(colab_link, unsafe_allow_html=True)
 
     with tabs[1]:
         st.write('## Find Order')