Upload folder using huggingface_hub

README.md

@@ -1,19 +1,3 @@
----
-tags:
-- gradio-custom-component
-- gradio-template-Image
-- bounding box
-- annotator
-- annotate
-- boxes
-title: gradio_image_annotation V0.2.2
-colorFrom: yellow
-colorTo: green
-sdk: docker
-pinned: false
-license: apache-2.0
-short_description: A Gradio component for image annotation
----
 
 # `gradio_image_annotation`
 <a href="https://pypi.org/project/gradio_image_annotation/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_image_annotation"></a>  

app.py

@@ -24,18 +24,32 @@ example_annotation = {
     ]
 }
 
-example_crop = {
-    "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png",
-    "boxes": [
-        {
-            "xmin": 30,
-            "ymin": 70,
-            "xmax": 530,
-            "ymax": 500,
-            "color": (100, 200, 255)
-        }
-    ]
-}
+examples_crop = [
+    {
+        "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png",
+        "boxes": [
+            {
+                "xmin": 30,
+                "ymin": 70,
+                "xmax": 530,
+                "ymax": 500,
+                "color": (100, 200, 255),
+            }
+        ],
+    },
+    {
+        "image": "https://gradio-builds.s3.amazonaws.com/demo-files/base.png",
+        "boxes": [
+            {
+                "xmin": 636,
+                "ymin": 575,
+                "xmax": 801,
+                "ymax": 697,
+                "color": (255, 0, 0),
+            },
+        ],
+    },
+]
 
 
 def crop(annotations):
@@ -66,7 +80,7 @@ with gr.Blocks() as demo:
     with gr.Tab("Crop"):
         with gr.Row():
             annotator_crop = image_annotator(
-                example_crop,
+                examples_crop[0],
                 image_type="numpy",
                 disable_edit_boxes=True,
                 single_box=True,
@@ -75,6 +89,7 @@ with gr.Blocks() as demo:
         button_crop = gr.Button("Crop")
         button_crop.click(crop, annotator_crop, image_crop)
 
+        gr.Examples(examples_crop, annotator_crop)
 
 if __name__ == "__main__":
     demo.launch()

space.py

@@ -1,3 +1,19 @@
+---
+tags:
+- gradio-custom-component
+- gradio-template-Image
+- bounding box
+- annotator
+- annotate
+- boxes
+title: gradio_image_annotation V0.2.2
+colorFrom: yellow
+colorTo: green
+sdk: docker
+pinned: false
+license: apache-2.0
+short_description: A Gradio component for image annotation
+---
 
 import gradio as gr
 from app import demo as app

src/backend/gradio_image_annotation/image_annotator.py

@@ -298,6 +298,25 @@ class image_annotator(Component):
         
         return AnnotatedImageData(image=image, boxes=boxes)
 
+    def process_example(self, value: dict | None) -> FileData | None:
+        if value is None:
+            return None
+        if not isinstance(value, dict):
+            raise ValueError(f"``value`` must be a dict. Got {type(value)}")
+
+        image = value.setdefault("image", None)
+        if image is not None:
+            if isinstance(image, str) and image.lower().endswith(".svg"):
+                image = FileData(path=image, orig_name=Path(image).name)
+            else:
+                saved = image_utils.save_image(image, self.GRADIO_CACHE)
+                orig_name = Path(saved).name if Path(saved).exists() else None
+                image = FileData(path=saved, orig_name=orig_name)
+        else:
+            raise ValueError(f"An image must be provided. Got {value}")
+
+        return image
+
     def example_inputs(self) -> Any:
         return {
             "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png",

src/demo/app.py

@@ -24,18 +24,32 @@ example_annotation = {
     ]
 }
 
-example_crop = {
-    "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png",
-    "boxes": [
-        {
-            "xmin": 30,
-            "ymin": 70,
-            "xmax": 530,
-            "ymax": 500,
-            "color": (100, 200, 255)
-        }
-    ]
-}
+examples_crop = [
+    {
+        "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png",
+        "boxes": [
+            {
+                "xmin": 30,
+                "ymin": 70,
+                "xmax": 530,
+                "ymax": 500,
+                "color": (100, 200, 255),
+            }
+        ],
+    },
+    {
+        "image": "https://gradio-builds.s3.amazonaws.com/demo-files/base.png",
+        "boxes": [
+            {
+                "xmin": 636,
+                "ymin": 575,
+                "xmax": 801,
+                "ymax": 697,
+                "color": (255, 0, 0),
+            },
+        ],
+    },
+]
 
 
 def crop(annotations):
@@ -66,7 +80,7 @@ with gr.Blocks() as demo:
     with gr.Tab("Crop"):
         with gr.Row():
             annotator_crop = image_annotator(
-                example_crop,
+                examples_crop[0],
                 image_type="numpy",
                 disable_edit_boxes=True,
                 single_box=True,
@@ -75,6 +89,7 @@ with gr.Blocks() as demo:
         button_crop = gr.Button("Crop")
         button_crop.click(crop, annotator_crop, image_crop)
 
+        gr.Examples(examples_crop, annotator_crop)
 
 if __name__ == "__main__":
     demo.launch()

src/demo/space.py

@@ -1,3 +1,19 @@
+---
+tags:
+- gradio-custom-component
+- gradio-template-Image
+- bounding box
+- annotator
+- annotate
+- boxes
+title: gradio_image_annotation V0.2.2
+colorFrom: yellow
+colorTo: green
+sdk: docker
+pinned: false
+license: apache-2.0
+short_description: A Gradio component for image annotation
+---
 
 import gradio as gr
 from app import demo as app

src/frontend/Example.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-	import Image from "./shared/ImageCanvas.svelte";
 	import type { FileData } from "@gradio/client";
 
 	export let value: null | FileData;
-	export let samples_dir: string;
 	export let type: "gallery" | "table";
 	export let selected = false;
 </script>
@@ -16,7 +14,7 @@
 	class:border={value}
 >
 	{#if value}
-		<Image src={samples_dir + value.path} alt="" />
+		<img src={value.url} alt="" />
 	{/if}
 </div>