Update app.py

app.py

@@ -378,8 +378,9 @@ def process_and_analyze(image):
 # Create Gradio interface
 def create_interface():
     with gr.Blocks() as demo:
-        # Add the icon above the title
-        gr.HTML('<img src="appendix/icon.webp" width="100" alt="Icon">')
+        # Add the icon above the title using a Gradio Image component
+        with gr.Row():
+            gr.Image(value="appendix/icon.webp", width=100, show_label=False, interactive=False)
         
         gr.Markdown("# Image Anomaly-Surprise Detection")
         gr.Markdown(
@@ -388,19 +389,12 @@ def create_interface():
             "locations, social scenarios, settings, and roles."
         )
         
-        # Add example images as a table
-        gr.HTML(
-            """
-            <table>
-              <tr>
-                <td><img src="appendix/gradio_example.png" width="250" alt="Image 1"></td>
-                <td><img src="appendix/gradio_example2.png" width="250" alt="Image 2"></td>
-                <td><img src="appendix/gradio_example3.png" width="250" alt="Image 3"></td>
-                <td><img src="appendix/gradio_example4.png" width="250" alt="Image 4"></td>
-              </tr>
-            </table>
-            """
-        )
+        # Display example images in a row using Gradio Image components
+        with gr.Row():
+            gr.Image(value="appendix/gradio_example.png", width=250, show_label=False, interactive=False)
+            gr.Image(value="appendix/gradio_example2.png", width=250, show_label=False, interactive=False)
+            gr.Image(value="appendix/gradio_example3.png", width=250, show_label=False, interactive=False)
+            gr.Image(value="appendix/gradio_example4.png", width=250, show_label=False, interactive=False)
 
         with gr.Row():
             with gr.Column():