docs: Add documentation, include in Tour. #1323

py/examples/tour.conf

@@ -96,6 +96,7 @@ table_pagination_download.py
 table_pagination_groups.py
 tags.py
 image.py
+image_annotator.py
 file_stream.py
 frame.py
 frame_path.py

website/sidebars.js

@@ -112,6 +112,7 @@ module.exports = {
           "widgets/form/file_upload",
           "widgets/form/frame",
           "widgets/form/image",
+          "widgets/form/image_annotator",
           "widgets/form/inline",
           "widgets/form/label",
           "widgets/form/link",

website/widgets/form/image_annotator.md

@@ -0,0 +1,29 @@
+---
+title: Image Annotator
+keywords:
+  - form
+  - image_annotator
+custom_edit_url: null
+---
+
+Use image annotator when you need to draw bounding boxes over an image. Useful for computer vision.
+
+```py
+image = 'https://images.pexels.com/photos/2696064/pexels-photo-2696064.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
+q.page['example'] = ui.form_card(box='1 1 9 10', items=[
+    ui.image_annotator(
+        name='annotator',
+        title='Drag to annotate',
+        image=image,
+        image_height='700px',
+        tags=[
+            ui.image_annotator_tag(name='p', label='Person', color='$cyan'),
+            ui.image_annotator_tag(name='f', label='Food', color='$blue'),
+        ],
+        items=[
+            ui.image_annotator_item(shape=ui.image_annotator_rect(x1=649, y1=393, x2=383, y2=25), tag='p'),
+        ],
+    ),
+    ui.button(name='submit', label='Submit', primary=True)
+])
+```