add image editor howto

app.py

@@ -9,7 +9,7 @@ from PIL import Image
 import numpy as np
 import yaml
 from pathlib import Path
-from globe import title, description, modelinfor, joinus
+from globe import title, description, modelinfor, joinus, howto
 import uuid
 import tempfile
 import time
@@ -157,6 +157,9 @@ with gr.Blocks(theme=gr.themes.Base()) as demo:
             with gr.Group():
                 gr.Markdown(modelinfor)
                 gr.Markdown(joinus)
+    with gr.Row():
+        with gr.Accordion("How to use Fine-grained OCR (Color)"):
+            gr.Markdown(howto)
     with gr.Row():
         with gr.Column(scale=1):
             with gr.Group():

globe.py

@@ -52,4 +52,16 @@ tasks = [
 ]
 
 ocr_types = ["ocr", "format"]
-ocr_colors = ["red", "green", "blue"]
+ocr_colors = ["red", "green", "blue"]
+
+howto =         """
+                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.
+                4. Upload an image to the editor.
+                5. Use the drawing tools to draw a circle around the text you want to OCR.
+                6. Select the color that matches your circle in the 'OCR Color' dropdown.
+                7. Click 'Process Edited Image' to run the OCR on the selected area.
+                """
+