adjust font

app.py

@@ -167,24 +167,63 @@ with gradio.Blocks(
     title="LaRI Demo",
 ) as demo:
 
-    gradio.Markdown(
-        "<h1 style='text-align: center;'>LaRI: Layered Ray Intersections for Single-view 3D Geometric Reasoning</h1>",
-        elem_id="title",
-    )
+    # gradio.Markdown(
+    #     "<h1 style='text-align: center;'>LaRI: Layered Ray Intersections for Single-view 3D Geometric Reasoning</h1>",
+    #     elem_id="title",
+    # )
+
 
-    gradio.Markdown(
+    gradio.HTML(
+        """
+        <h1 style="text-align: center; font-size: 28px; font-weight: bold; margin-bottom: 1em;">
+            LaRI: Layered Ray Intersections for Single-view 3D Geometric Reasoning
+        </h1>
         """
-        This is the official demo of Layered Ray Intersection (<a href="https://ruili3.github.io/lari/index.html" target="_blank" style="color: #2a9d8f;">LaRI</a>). For a quick start, click the images in 'Examples' and then click the 'Process' Button.
+    )
+
+    # gradio.Markdown(
+    #     """
+    #     This is the official demo of Layered Ray Intersection (<a href="https://ruili3.github.io/lari/index.html" target="_blank" style="color: #2a9d8f;">LaRI</a>). For a quick start, click the images in 'Examples' and then click the 'Process' Button.
         
-        You can try with your own images with following steps:
-        - Load an image;
-        - Click the 'Process' button;
-        - Browse layered depth maps (z-channel of the resulting LaRI point map) by tunning 'Layer ID';
+    #     You can try with your own images with following steps:
+    #     - Load an image;
+    #     - Click the 'Process' button;
+    #     - Browse layered depth maps (z-channel of the resulting LaRI point map) by tunning 'Layer ID';
 
-        Note that in '3D Point Cloud', different color denotes diffrent intersection layers, i.e., <b style="color: #FFBD1C;">layer 1</b>, <b style="color: #FB5607;">layer 2</b>, <b style="color: #F15BB5;">layer 3</b>, <b style="color: #8338EC;">layer 4</b>.
+    #     Note that in '3D Point Cloud', different color denotes diffrent intersection layers, i.e., <b style="color: #FFBD1C;">layer 1</b>, <b style="color: #FB5607;">layer 2</b>, <b style="color: #F15BB5;">layer 3</b>, <b style="color: #8338EC;">layer 4</b>.
+    #     """
+    # )
+
+
+    gradio.HTML(
+        """
+        <p style="font-size: 16px; line-height: 1.6;">
+        This is the official demo of Layered Ray Intersection 
+        (<a href="https://ruili3.github.io/lari/index.html" target="_blank" style="color: #2a9d8f; font-weight: bold;">LaRI</a>). 
+        For a quick start, click the images in 'Examples' and then click the 'Process' Button.
+        </p>
+
+        <p style="font-size: 16px; line-height: 1.6;">
+        You can try with your own images with the following steps:
+        <ul>
+            <li>Load an image</li>
+            <li>Click the 'Process' button</li>
+            <li>Browse layered depth maps (z-channel of the resulting LaRI point map) by tuning 'Layer ID'</li>
+        </ul>
+        </p>
+
+        <p style="font-size: 16px; line-height: 1.6;">
+        Note that in <b>3D Point Cloud</b>, different colors denote different intersection layers:
+        <span style="color: #FFBD1C;"><b>Layer 1</b></span>, 
+        <span style="color: #FB5607;"><b>Layer 2</b></span>, 
+        <span style="color: #F15BB5;"><b>Layer 3</b></span>, 
+        <span style="color: #8338EC;"><b>Layer 4</b></span>.
+        </p>
         """
     )
 
+
+
     # , <b style="color: #3A86FF;">layer 5</b>.
     lari_map = gradio.State(None)
     valid_mask = gradio.State(None)
@@ -265,16 +304,16 @@ with gradio.Blocks(
         outputs=depth_output,
     )
 
-    gradio.Examples(examples=["assets/cole_hardware.png",
-                              "assets/3m_tape.png",
-                              "assets/horse.png",
-                              "assets/rhino.png",
-                              "assets/alphabet.png",
-                              "assets/martin_wedge.png",
-                              "assets/d_rose.png",
-                              "assets/ace.png",
-                              "assets/bifidus.png",
-                              "assets/fem.png", 
+    gradio.Examples(examples=["./assets/cole_hardware.png",
+                              "./assets/3m_tape.png",
+                              "./assets/horse.png",
+                              "./assets/rhino.png",
+                              "./assets/alphabet.png",
+                              "./assets/martin_wedge.png",
+                              "./assets/d_rose.png",
+                              "./assets/ace.png",
+                              "./assets/bifidus.png",
+                              "./assets/fem.png", 
                               ], 
                               inputs=image_input)