add groups , interface, howto images

app.py

@@ -160,14 +160,22 @@ with gr.Blocks(theme=gr.themes.Base()) as demo:
         gr.Markdown(title)
     with gr.Row():
         with gr.Column(scale=1):
-            gr.Markdown(description)
+            with gr.Group():                    
+                gr.Markdown(description)
         with gr.Column(scale=1):
             with gr.Group():
                 gr.Markdown(modelinfor)
                 gr.Markdown(joinus)
     with gr.Row():
         with gr.Accordion("How to use Fine-grained OCR (Color)", open=False):
-            gr.Markdown(howto)
+            with gr.Row():
+                with gr.Column:
+                    with gr.Group():                    
+                        gr.Markdown(howto)
+                with gr.Group():                    
+                    for i in range(5):
+                        with gr.Column():
+                            gr.Image(f"res/image/howto_{i+1}.png", label=f"How To Step {i+1}")
     with gr.Row():
         with gr.Column(scale=1):
             with gr.Group():

globe.py

@@ -35,7 +35,7 @@ modelinfor = """
 3. (Optional) Adjust parameters based on the selected task.
 4. Click **Process** to view the results.
 
-### Model Information
+## Model Information
 
 - **Model Name**: GOT-OCR 2.0
 - **Hugging Face Repository**: [ucaslcl/GOT-OCR2_0](https://huggingface.co/ucaslcl/GOT-OCR2_0)
@@ -55,7 +55,7 @@ ocr_types = ["ocr", "format"]
 ocr_colors = ["red", "green", "blue"]
 
 howto =         """
-                To use Fine-grained OCR (Color):
+                ## To use Fine-grained OCR (Color):
                 1. Click on 'Fine-grained OCR (Color)' in the task dropdown.
                 2. Set 'OCR Type' to 'ocr'.
                 3. This will display the image editor.