Upload folder using huggingface_hub

README.md

@@ -1,20 +1,3 @@
----
-tags:
-- gradio-custom-component
-- gradio-template-Image
-- bounding box
-- annotator
-- annotate
-- boxes
-title: gradio_image_annotation V0.0.8
-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>  
@@ -475,4 +458,5 @@ The code snippet below is accurate in cases where the component is used as both
      value: dict | None
  ) -> dict | None:
      return value
- ```
+ ```
+ 

app.py

@@ -1,7 +1,30 @@
 import gradio as gr
 from gradio_image_annotation import image_annotator
 
-example = {
+
+example_annotation = {
+    "image": "https://gradio-builds.s3.amazonaws.com/demo-files/base.png",
+    "boxes": [
+        {
+            "xmin": 636,
+            "ymin": 575,
+            "xmax": 801,
+            "ymax": 697,
+            "label": "Vehicle",
+            "color": (255, 0, 0)
+        },
+        {
+            "xmin": 360,
+            "ymin": 615,
+            "xmax": 386,
+            "ymax": 702,
+            "label": "Person",
+            "color": (0, 255, 0)
+        }
+    ]
+}
+
+example_crop = {
     "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png",
     "boxes": [
         {
@@ -9,8 +32,7 @@ example = {
             "ymin": 70,
             "xmax": 530,
             "ymax": 500,
-            "label": "Gradio",
-            "color": (250, 185, 0),
+            "color": (100, 200, 255)
         }
     ]
 }
@@ -29,19 +51,25 @@ def crop(annotations):
 def get_boxes_json(annotations):
     return annotations["boxes"]
 
+
 with gr.Blocks() as demo:
     with gr.Tab("Object annotation"):
         annotator = image_annotator(
-            {"image": "https://gradio-builds.s3.amazonaws.com/demo-files/base.png"},
+            example_annotation,
             label_list=["Person", "Vehicle"],
             label_colors=[(0, 255, 0), (255, 0, 0)],
         )
         button_get = gr.Button("Get bounding boxes")
         json_boxes = gr.JSON()
         button_get.click(get_boxes_json, annotator, json_boxes)
+
     with gr.Tab("Crop"):
         with gr.Row():
-            annotator_crop = image_annotator(example, image_type="numpy")
+            annotator_crop = image_annotator(
+                example_crop,
+                image_type="numpy",
+                disable_edit_boxes=True
+            )
             image_crop = gr.Image()
         button_crop = gr.Button("Crop")
         button_crop.click(crop, annotator_crop, image_crop)

src/backend/gradio_image_annotation/image_annotator.py

@@ -53,6 +53,7 @@ class image_annotator(Component):
         handle_size: int | None = None,
         box_thickness: int | None = None,
         box_selected_thickness: int | None = None,
+        disable_edit_boxes: bool | None = None,
         height: int | str | None = None,
         width: int | str | None = None,
         image_mode: Literal[
@@ -84,6 +85,7 @@ class image_annotator(Component):
             handle_size: Size of the bounding box resize handles.
             box_thickness: Thickness of the bounding box outline.
             box_selected_thickness: Thickness of the bounding box outline when it is selected.
+            disable_edit_boxes: Disables the ability to set and edit the label and color of the boxes.
             height: The height of the displayed image, specified in pixels if a number is passed, or in CSS units if a string is passed.
             width: The width of the displayed image, specified in pixels if a number is passed, or in CSS units if a string is passed.
             image_mode: "RGB" if color, or "L" if black and white. See https://pillow.readthedocs.io/en/stable/handbook/concepts.html for other supported image modes and their meaning.
@@ -140,6 +142,7 @@ class image_annotator(Component):
         self.handle_size = handle_size
         self.box_thickness = box_thickness
         self.box_selected_thickness = box_selected_thickness
+        self.disable_edit_boxes = disable_edit_boxes
         if label_list:
             self.label_list = [(l, i) for i, l in enumerate(label_list)]
         else:

src/demo/app.py

@@ -1,7 +1,30 @@
 import gradio as gr
 from gradio_image_annotation import image_annotator
 
-example = {
+
+example_annotation = {
+    "image": "https://gradio-builds.s3.amazonaws.com/demo-files/base.png",
+    "boxes": [
+        {
+            "xmin": 636,
+            "ymin": 575,
+            "xmax": 801,
+            "ymax": 697,
+            "label": "Vehicle",
+            "color": (255, 0, 0)
+        },
+        {
+            "xmin": 360,
+            "ymin": 615,
+            "xmax": 386,
+            "ymax": 702,
+            "label": "Person",
+            "color": (0, 255, 0)
+        }
+    ]
+}
+
+example_crop = {
     "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png",
     "boxes": [
         {
@@ -9,8 +32,7 @@ example = {
             "ymin": 70,
             "xmax": 530,
             "ymax": 500,
-            "label": "Gradio",
-            "color": (250, 185, 0),
+            "color": (100, 200, 255)
         }
     ]
 }
@@ -29,19 +51,25 @@ def crop(annotations):
 def get_boxes_json(annotations):
     return annotations["boxes"]
 
+
 with gr.Blocks() as demo:
     with gr.Tab("Object annotation"):
         annotator = image_annotator(
-            {"image": "https://gradio-builds.s3.amazonaws.com/demo-files/base.png"},
+            example_annotation,
             label_list=["Person", "Vehicle"],
             label_colors=[(0, 255, 0), (255, 0, 0)],
         )
         button_get = gr.Button("Get bounding boxes")
         json_boxes = gr.JSON()
         button_get.click(get_boxes_json, annotator, json_boxes)
+
     with gr.Tab("Crop"):
         with gr.Row():
-            annotator_crop = image_annotator(example, image_type="numpy")
+            annotator_crop = image_annotator(
+                example_crop,
+                image_type="numpy",
+                disable_edit_boxes=True
+            )
             image_crop = gr.Image()
         button_crop = gr.Button("Crop")
         button_crop.click(crop, annotator_crop, image_crop)

src/frontend/Index.svelte

@@ -41,6 +41,7 @@
 	export let handle_size: number;
 	export let box_thickness: number;
 	export let box_selected_thickness: number;
+	export let disable_edit_boxes: boolean;
 
 	export let gradio: Gradio<{
 		change: never;
@@ -114,6 +115,7 @@
 		handleSize={handle_size}
 		boxThickness={box_thickness}
 		boxSelectedThickness={box_selected_thickness}
+		disableEditBoxes={disable_edit_boxes}
 	>
 		{#if active_source === "upload"}
 			<UploadText i18n={gradio.i18n} type="image" />

src/frontend/shared/Canvas.svelte

@@ -17,6 +17,7 @@
 	export let value: null | AnnotatedImageData;
 	export let choices = [];
     export let choicesColors = [];
+	export let disableEditBoxes: boolean = false;
 
     let canvas: HTMLCanvasElement;
 	let ctx: CanvasRenderingContext2D;
@@ -123,51 +124,75 @@
 	}
 
     function onAddBox() {
-		newModalVisible = true;
+		if (!disableEditBoxes){
+			newModalVisible = true;
+		} else {
+			createBox();
+		}
+	}
+
+	function createBox(
+		label = null,
+		color = null,
+		xmin = null,
+		ymin = null,
+		xmax = null,
+		ymax = null
+	){
+		if (color === null || color === "") {
+			color = Colors[value.boxes.length % Colors.length];
+		} else {
+			color = colorHexToRGB(color);
+		}
+		if (label === null){
+			label = "";
+		}
+		if (xmin === null){
+			xmin = (imageWidth / 3) / scaleFactor;
+		}
+		if (xmax === null){
+			xmax = ((imageWidth / 3)*2) / scaleFactor;
+		}
+		if (ymin === null){
+			ymin = (imageHeight / 3) / scaleFactor;
+		}
+		if (ymax === null){
+			ymax = ((imageHeight / 3)*2) / scaleFactor;
+		}
+		let box = new Box(
+			draw,
+			canvasXmin,
+			canvasYmin,
+			canvasXmax,
+			canvasYmax,
+			label,
+			Math.round(xmin),
+			Math.round(ymin),
+			Math.round(xmax),
+			Math.round(ymax),
+			color,
+			boxAlpha,
+			boxMinSize,
+			handleSize,
+			boxThickness,
+			boxSelectedThickness
+		);
+		value.boxes = [box, ...value.boxes];
+		draw();
+		dispatch("change");
 	}
 
 	function onModalNewChange(event) {
 		newModalVisible = false;
 		const { detail } = event;
-        let label = detail.label;
-        let color = detail.color;
 		let ok = detail.ok;
 		if (ok) {
-			if (color === null || color === "") {
-				color = Colors[value.boxes.length % Colors.length];
-			} else {
-				color = colorHexToRGB(color);
-			}
-			let xmin = (imageWidth / 3) / scaleFactor;
-			let xmax = ((imageWidth / 3)*2) / scaleFactor;
-			let ymin = (imageHeight / 3) / scaleFactor;
-			let ymax = ((imageHeight / 3)*2) / scaleFactor;
-			let box = new Box(
-				draw,
-				canvasXmin,
-				canvasYmin,
-				canvasXmax,
-				canvasYmax,
-				label,
-				Math.round(xmin),
-				Math.round(ymin),
-				Math.round(xmax),
-				Math.round(ymax),
-				color,
-				boxAlpha,
-				boxMinSize,
-				handleSize,
-				boxThickness,
-				boxSelectedThickness
-			);
-			value.boxes = [box, ...value.boxes];
-			draw();
-			dispatch("change");
+			createBox(detail.label, detail.color)
 		}
 	}
 
 	function onEditBox() {
-		if (selectedBox >= 0 && selectedBox < value.boxes.length) {
+		if (selectedBox >= 0 && selectedBox < value.boxes.length && !disableEditBoxes) {
 			editModalVisible = true;
 		}
 	}
@@ -363,10 +388,12 @@
 			class="icon"
 			on:click={() => onAddBox()}><Add/></button
 		>
-		<button
-			class="icon"
-			on:click={() => onEditBox()}><Edit/></button
-		>
+		{#if !disableEditBoxes}
+			<button
+				class="icon"
+				on:click={() => onEditBox()}><Edit/></button
+			>
+		{/if}
 		<button
 			class="icon"
 			on:click={() => onDeleteBox()}><Clear/></button

src/frontend/shared/ImageAnnotator.svelte

@@ -30,6 +30,7 @@
 	export let boxMinSize: number;
 	export let handleSize: number;
 	export let boxThickness: number;
+	export let disableEditBoxes: boolean;
 	export let boxSelectedThickness: number;
 	export let max_file_size: number | null = null;
 	export let cli_upload: Client["upload"];
@@ -148,8 +149,9 @@
 					{labelColors}
 					{boxMinSize}
 					{interactive}
-					handleSize={handleSize}
-					boxThickness={boxThickness}
+					{handleSize}
+					{boxThickness}
+					{disableEditBoxes}
 					boxSelectedThickness={boxSelectedThickness}
 					src={value.image.url}
 				/>

src/frontend/shared/ImageCanvas.svelte

@@ -19,6 +19,7 @@
 	export let boxThickness: number;
 	export let boxSelectedThickness: number;
 	export let value: null | AnnotatedImageData;
+	export let disableEditBoxes: boolean;
 
 	let resolved_src: typeof src;
 
@@ -57,8 +58,9 @@
 	choices={labelList}
 	choicesColors={labelColors}
 	{boxMinSize}
-	handleSize={handleSize}
-	boxThickness={boxThickness}
-	boxSelectedThickness={boxSelectedThickness}
+	{handleSize}
+	{boxThickness}
+	{boxSelectedThickness}
+	{disableEditBoxes}
 	imageUrl={resolved_src}
 />

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_image_annotation"
-version = "0.0.8"
+version = "0.1.0"
 description = "A Gradio component that can be used to annotate images with bounding boxes."
 readme = "README.md"
 license = "MIT"