Upload folder using huggingface_hub

.gitignore

@@ -0,0 +1,327 @@
+### Generated by gibo (https://github.com/simonwhitaker/gibo)
+### https://raw.github.com/github/gitignore/5445a270254a0b4443b20ed0033c4094959f937e/Python.gitignore
+
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/latest/usage/project/#working-with-version-control
+.pdm.toml
+.pdm-python
+.pdm-build/
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+### Generated by gibo (https://github.com/simonwhitaker/gibo)
+### https://raw.github.com/github/gitignore/5445a270254a0b4443b20ed0033c4094959f937e/Node.gitignore
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+### Generated by gibo (https://github.com/simonwhitaker/gibo)
+### https://raw.github.com/github/gitignore/5445a270254a0b4443b20ed0033c4094959f937e/Global/macOS.gitignore
+
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk

README.md

@@ -1,12 +1,311 @@
 ---
-title: Gradio Bbox Annotator
-emoji: 🌖
-colorFrom: pink
-colorTo: green
+tags: [gradio-custom-component, SimpleImage, image, annotation, bbox]
+title: gradio_imageannotator
+short_description: Bounding box annotation tool
+colorFrom: blue
+colorTo: yellow
 sdk: gradio
-sdk_version: 5.8.0
-app_file: app.py
 pinned: false
+app_file: space.py
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# `gradio_bbox_annotator`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.1.0%20-%20orange"> <a href="https://github.com/kyamagu/gradio-bbox-annotator/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
+
+Bounding box annotation tool
+
+## Installation
+
+```bash
+pip install gradio_bbox_annotator
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_bbox_annotator import BBoxAnnotator
+
+
+example = BBoxAnnotator().example_value()
+
+demo = gr.Interface(
+    lambda x: x,
+    BBoxAnnotator(value=example, show_label=False),  # interactive version of your component
+    BBoxAnnotator(show_label=False),  # static version of your component
+    examples=[[example]],  # uncomment this line to view the "example version" of your component
+)
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `BBoxAnnotator`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+    | Path
+    | tuple[
+        str | Path,
+        list[tuple[int, int, int, int, str | None]],
+    ]
+    | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">A path or URL for the image, or a tuple of the image and list of (left, top, right, bottom, label) annotations.</td>
+</tr>
+
+<tr>
+<td align="left"><code>categories</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">a list of categories to choose from when annotating the image.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Timer | float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.</td>
+</tr>
+
+<tr>
+<td align="left"><code>inputs</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Component | Sequence[Component] | set[Component] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will display label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_download_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will display button to download annotations.</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will place the component in a container - providing some extra padding around the border.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `clear` | This listener is triggered when the user clears the BBoxAnnotator using the clear button for the component. |
+| `change` | Triggered when the value of the BBoxAnnotator changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+| `upload` | This listener is triggered when the user uploads a file into the BBoxAnnotator. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Is passed, a tuple of `str` containing the path to the image and a list of annotations.
+- **As input:** Should return, expects a `str` or `pathlib.Path` object containing the path to the image, or a tuple of.
+
+ ```python
+ def predict(
+     value: tuple[str, list[tuple[int, int, int, int, str | None]]]
+    | None
+ ) -> str
+    | pathlib.Path
+    | tuple[
+        str | pathlib.Path,
+        list[tuple[int, int, int, int, str | None]],
+    ]
+    | None:
+     return value
+ ```
+ 

app.py

@@ -0,0 +1,17 @@
+
+import gradio as gr
+from gradio_bbox_annotator import BBoxAnnotator
+
+
+example = BBoxAnnotator().example_value()
+
+demo = gr.Interface(
+    lambda x: x,
+    BBoxAnnotator(value=example, show_label=False),  # interactive version of your component
+    BBoxAnnotator(show_label=False),  # static version of your component
+    examples=[[example]],  # uncomment this line to view the "example version" of your component
+)
+
+
+if __name__ == "__main__":
+    demo.launch()

css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

requirements.txt

@@ -0,0 +1 @@
+gradio_bbox_annotator

space.py

@@ -0,0 +1,146 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'BBoxAnnotator': {'description': 'Creates an image component that can be used to upload images with bounding box annotations (as an input)\nor display images with bounding box annotations (as an output). This component can be used to annotate\nimages.', 'members': {'__init__': {'value': {'type': 'str\n    | Path\n    | tuple[\n        str | Path,\n        list[tuple[int, int, int, int, str | None]],\n    ]\n    | None', 'default': 'None', 'description': 'A path or URL for the image, or a tuple of the image and list of (left, top, right, bottom, label) annotations.'}, 'categories': {'type': 'list[str] | None', 'default': 'None', 'description': 'a list of categories to choose from when annotating the image.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.'}, 'every': {'type': 'Timer | float | None', 'default': 'None', 'description': 'Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.'}, 'inputs': {'type': 'Component | Sequence[Component] | set[Component] | None', 'default': 'None', 'description': 'Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.'}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': 'If True, will display button to download annotations.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}, 'key': {'type': 'int | str | None', 'default': 'None', 'description': 'if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.'}}, 'postprocess': {'value': {'type': 'str\n    | pathlib.Path\n    | tuple[\n        str | pathlib.Path,\n        list[tuple[int, int, int, int, str | None]],\n    ]\n    | None', 'description': 'Expects a `str` or `pathlib.Path` object containing the path to the image, or a tuple of'}}, 'preprocess': {'return': {'type': 'tuple[str, list[tuple[int, int, int, int, str | None]]]\n    | None', 'description': 'A tuple of `str` containing the path to the image and a list of annotations.'}, 'value': None}}, 'events': {'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the BBoxAnnotator using the clear button for the component.'}, 'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the BBoxAnnotator changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the BBoxAnnotator.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'BBoxAnnotator': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_bbox_annotator`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.1.0%20-%20orange"> <a href="https://github.com/kyamagu/gradio-bbox-annotator/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
+</div>
+
+Bounding box annotation tool
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_bbox_annotator
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_bbox_annotator import BBoxAnnotator
+
+
+example = BBoxAnnotator().example_value()
+
+demo = gr.Interface(
+    lambda x: x,
+    BBoxAnnotator(value=example, show_label=False),  # interactive version of your component
+    BBoxAnnotator(show_label=False),  # static version of your component
+    examples=[[example]],  # uncomment this line to view the "example version" of your component
+)
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `BBoxAnnotator`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["BBoxAnnotator"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["BBoxAnnotator"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Is passed, a tuple of `str` containing the path to the image and a list of annotations.
+- **As output:** Should return, expects a `str` or `pathlib.Path` object containing the path to the image, or a tuple of.
+
+ ```python
+def predict(
+    value: tuple[str, list[tuple[int, int, int, int, str | None]]]
+    | None
+) -> str
+    | pathlib.Path
+    | tuple[
+        str | pathlib.Path,
+        list[tuple[int, int, int, int, str | None]],
+    ]
+    | None:
+    return value
+```
+""", elem_classes=["md-custom", "BBoxAnnotator-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          BBoxAnnotator: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/.gitignore

@@ -0,0 +1,327 @@
+### Generated by gibo (https://github.com/simonwhitaker/gibo)
+### https://raw.github.com/github/gitignore/5445a270254a0b4443b20ed0033c4094959f937e/Python.gitignore
+
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/latest/usage/project/#working-with-version-control
+.pdm.toml
+.pdm-python
+.pdm-build/
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+### Generated by gibo (https://github.com/simonwhitaker/gibo)
+### https://raw.github.com/github/gitignore/5445a270254a0b4443b20ed0033c4094959f937e/Node.gitignore
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+### Generated by gibo (https://github.com/simonwhitaker/gibo)
+### https://raw.github.com/github/gitignore/5445a270254a0b4443b20ed0033c4094959f937e/Global/macOS.gitignore
+
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk

src/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

src/README.md

@@ -0,0 +1,311 @@
+---
+tags: [gradio-custom-component, SimpleImage, image, annotation, bbox]
+title: gradio_imageannotator
+short_description: Bounding box annotation tool
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_bbox_annotator`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.1.0%20-%20orange"> <a href="https://github.com/kyamagu/gradio-bbox-annotator/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
+
+Bounding box annotation tool
+
+## Installation
+
+```bash
+pip install gradio_bbox_annotator
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_bbox_annotator import BBoxAnnotator
+
+
+example = BBoxAnnotator().example_value()
+
+demo = gr.Interface(
+    lambda x: x,
+    BBoxAnnotator(value=example, show_label=False),  # interactive version of your component
+    BBoxAnnotator(show_label=False),  # static version of your component
+    examples=[[example]],  # uncomment this line to view the "example version" of your component
+)
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `BBoxAnnotator`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+    | Path
+    | tuple[
+        str | Path,
+        list[tuple[int, int, int, int, str | None]],
+    ]
+    | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">A path or URL for the image, or a tuple of the image and list of (left, top, right, bottom, label) annotations.</td>
+</tr>
+
+<tr>
+<td align="left"><code>categories</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">a list of categories to choose from when annotating the image.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Timer | float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.</td>
+</tr>
+
+<tr>
+<td align="left"><code>inputs</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Component | Sequence[Component] | set[Component] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will display label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_download_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will display button to download annotations.</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will place the component in a container - providing some extra padding around the border.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `clear` | This listener is triggered when the user clears the BBoxAnnotator using the clear button for the component. |
+| `change` | Triggered when the value of the BBoxAnnotator changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+| `upload` | This listener is triggered when the user uploads a file into the BBoxAnnotator. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Is passed, a tuple of `str` containing the path to the image and a list of annotations.
+- **As input:** Should return, expects a `str` or `pathlib.Path` object containing the path to the image, or a tuple of.
+
+ ```python
+ def predict(
+     value: tuple[str, list[tuple[int, int, int, int, str | None]]]
+    | None
+ ) -> str
+    | pathlib.Path
+    | tuple[
+        str | pathlib.Path,
+        list[tuple[int, int, int, int, str | None]],
+    ]
+    | None:
+     return value
+ ```
+ 

src/backend/gradio_bbox_annotator/__init__.py

@@ -0,0 +1,4 @@
+
+from .bbox_annotator import BBoxAnnotator
+
+__all__ = ['BBoxAnnotator']

src/backend/gradio_bbox_annotator/bbox_annotator.py

@@ -0,0 +1,187 @@
+"""gr.BboxAnnotator() component."""
+
+from __future__ import annotations
+
+from collections.abc import Sequence
+from pathlib import Path
+from typing import TYPE_CHECKING, Any
+
+from gradio_client import handle_file
+from gradio_client.documentation import document
+
+from gradio.components.base import Component
+from gradio.data_classes import FileData, GradioModel
+from gradio.events import Events
+
+if TYPE_CHECKING:
+    from gradio.components import Timer
+
+
+EXAMPLE_IMAGE_URL = (
+    "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"
+)
+
+
+class Annotation(GradioModel):
+    """Bounding box annotation data."""
+    left: int
+    top: int
+    right: int
+    bottom: int
+    label: str | None
+
+    @property
+    def width(self) -> int:
+        return self.right - self.left
+
+    @property
+    def height(self) -> int:
+        return self.bottom - self.top
+
+
+class AnnotatedImage(GradioModel):
+    """Annotated image data."""
+    image: FileData
+    annotations: list[Annotation]
+
+
+@document()
+class BBoxAnnotator(Component):
+    """
+    Creates an image component that can be used to upload images with bounding box annotations (as an input)
+    or display images with bounding box annotations (as an output). This component can be used to annotate
+    images.
+    """
+
+    EVENTS = [
+        Events.clear,
+        Events.change,
+        Events.upload,
+    ]
+
+    data_model = AnnotatedImage
+
+    def __init__(
+        self,
+        value: str
+        | Path
+        | tuple[str | Path, list[tuple[int, int, int, int, str | None]]]
+        | None = None,
+        *,
+        categories: list[str] | None = None,
+        label: str | None = None,
+        every: Timer | float | None = None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        show_label: bool | None = None,
+        show_download_button: bool = True,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = None,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        key: int | str | None = None,
+    ):
+        """
+        Parameters:
+            value: A path or URL for the image, or a tuple of the image and list of (left, top, right, bottom, label) annotations.
+            categories: a list of categories to choose from when annotating the image.
+            label: the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.
+            every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
+            inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
+            show_label: if True, will display label.
+            show_download_button: If True, will display button to download annotations.
+            container: If True, will place the component in a container - providing some extra padding around the border.
+            scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
+            min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
+            interactive: if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.
+            visible: If False, component will be hidden.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
+        """
+        self.show_download_button = show_download_button
+        self.categories = categories or []
+        super().__init__(
+            label=label,
+            every=every,
+            inputs=inputs,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            interactive=interactive,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            key=key,
+            value=value,
+        )
+
+    def preprocess(
+        self, payload: AnnotatedImage | FileData | None
+    ) -> tuple[str, list[tuple[int, int, int, int, str | None]]] | None:
+        """
+        Parameters:
+            payload: An AnnotatedImage or FileData object containing the image and annotations.
+        Returns:
+            A tuple of `str` containing the path to the image and a list of annotations.
+        """
+        if payload is None:
+            return None
+        elif isinstance(payload, FileData):
+            return (payload.path, [])
+        return (
+            payload.image.path,
+            [(a.left, a.top, a.right, a.bottom, a.label) for a in payload.annotations],
+        )
+
+    def postprocess(
+        self,
+        value: str
+        | Path
+        | tuple[str | Path, list[tuple[int, int, int, int, str | None]]]
+        | None,
+    ) -> AnnotatedImage | None:
+        """
+        Parameters:
+            value: Expects a `str` or `pathlib.Path` object containing the path to the image, or a tuple of
+                the image and a list of annotations.
+        Returns:
+            An AnnotatedImage object containing the image and annotation data.
+        """
+        if value is None:
+            return None
+        elif isinstance(value, (str, Path)):
+            return AnnotatedImage(
+                image=FileData(path=str(value), orig_name=Path(value).name),
+                annotations=[],
+            )
+        return AnnotatedImage(
+            image=FileData(path=str(value[0]), orig_name=Path(value[0]).name),
+            annotations=[
+                Annotation(left=x[0], top=x[1], right=x[2], bottom=x[3], label=x[4])
+                for x in value[1]
+            ],
+        )
+
+    def example_payload(self) -> Any:
+        return AnnotatedImage(
+            image=handle_file(EXAMPLE_IMAGE_URL),
+            annotations=[
+                Annotation(left=0, top=0, right=60, bottom=67, label="bus"),
+                Annotation(left=29, top=52, right=36, bottom=63, label="wheel"),
+                Annotation(left=50, top=41, right=56, bottom=53, label="wheel"),
+            ],
+        )
+
+    def example_value(self) -> Any:
+        return (EXAMPLE_IMAGE_URL, [
+            (0, 0, 60, 67, "bus"),
+            (29, 52, 36, 63, "wheel"),
+            (50, 41, 56, 53, "wheel"),
+        ])

src/backend/gradio_bbox_annotator/bbox_annotator.pyi

@@ -0,0 +1,328 @@
+"""gr.BBoxAnnotator() component."""
+
+from __future__ import annotations
+
+from collections.abc import Sequence
+from pathlib import Path
+from typing import TYPE_CHECKING, Any
+
+from gradio_client import handle_file
+from gradio_client.documentation import document
+
+from gradio.components.base import Component
+from gradio.data_classes import FileData, GradioModel
+from gradio.events import Events
+
+if TYPE_CHECKING:
+    from gradio.components import Timer
+
+
+EXAMPLE_IMAGE_URL = (
+    "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"
+)
+
+
+class Annotation(GradioModel):
+    """Bounding box annotation data."""
+    left: int
+    top: int
+    right: int
+    bottom: int
+    label: str | None
+
+    @property
+    def width(self) -> int:
+        return self.right - self.left
+
+    @property
+    def height(self) -> int:
+        return self.bottom - self.top
+
+
+class AnnotatedImage(GradioModel):
+    """Annotated image data."""
+    image: FileData
+    annotations: list[Annotation]
+
+from gradio.events import Dependency
+
+@document()
+class BBoxAnnotator(Component):
+    """
+    Creates an image component that can be used to upload images with bounding box annotations (as an input)
+    or display images with bounding box annotations (as an output). This component can be used to annotate
+    images.
+    """
+
+    EVENTS = [
+        Events.clear,
+        Events.change,
+        Events.upload,
+    ]
+
+    data_model = AnnotatedImage
+
+    def __init__(
+        self,
+        value: str
+        | Path
+        | tuple[str | Path, list[tuple[int, int, int, int, str | None]]]
+        | None = None,
+        *,
+        categories: list[str] | None = None,
+        label: str | None = None,
+        every: Timer | float | None = None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        show_label: bool | None = None,
+        show_download_button: bool = True,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = None,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        key: int | str | None = None,
+    ):
+        """
+        Parameters:
+            value: A path or URL for the image, or a tuple of the image and list of (left, top, right, bottom, label) annotations.
+            categories: a list of categories to choose from when annotating the image.
+            label: the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.
+            every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
+            inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
+            show_label: if True, will display label.
+            show_download_button: If True, will display button to download annotations.
+            container: If True, will place the component in a container - providing some extra padding around the border.
+            scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
+            min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
+            interactive: if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.
+            visible: If False, component will be hidden.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
+        """
+        self.show_download_button = show_download_button
+        self.categories = categories or []
+        super().__init__(
+            label=label,
+            every=every,
+            inputs=inputs,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            interactive=interactive,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            key=key,
+            value=value,
+        )
+
+    def preprocess(
+        self, payload: AnnotatedImage | FileData | None
+    ) -> tuple[str, list[tuple[int, int, int, int, str | None]]] | None:
+        """
+        Parameters:
+            payload: An AnnotatedImage or FileData object containing the image and annotations.
+        Returns:
+            A tuple of `str` containing the path to the image and a list of annotations.
+        """
+        if payload is None:
+            return None
+        elif isinstance(payload, FileData):
+            return (payload.path, [])
+        return (
+            payload.image.path,
+            [(a.left, a.top, a.right, a.bottom, a.label) for a in payload.annotations],
+        )
+
+    def postprocess(
+        self,
+        value: str
+        | Path
+        | tuple[str | Path, list[tuple[int, int, int, int, str | None]]]
+        | None,
+    ) -> AnnotatedImage | None:
+        """
+        Parameters:
+            value: Expects a `str` or `pathlib.Path` object containing the path to the image, or a tuple of
+                the image and a list of annotations.
+        Returns:
+            An AnnotatedImage object containing the image and annotation data.
+        """
+        if value is None:
+            return None
+        elif isinstance(value, (str, Path)):
+            return AnnotatedImage(
+                image=FileData(path=str(value), orig_name=Path(value).name),
+                annotations=[],
+            )
+        return AnnotatedImage(
+            image=FileData(path=str(value[0]), orig_name=Path(value[0]).name),
+            annotations=[
+                Annotation(left=x[0], top=x[1], right=x[2], bottom=x[3], label=x[4])
+                for x in value[1]
+            ],
+        )
+
+    def example_payload(self) -> Any:
+        return AnnotatedImage(
+            image=handle_file(EXAMPLE_IMAGE_URL),
+            annotations=[
+                Annotation(left=0, top=0, right=60, bottom=67, label="bus"),
+                Annotation(left=29, top=52, right=36, bottom=63, label="wheel"),
+                Annotation(left=50, top=41, right=56, bottom=53, label="wheel"),
+            ],
+        )
+
+    def example_value(self) -> Any:
+        return (EXAMPLE_IMAGE_URL, [
+            (0, 0, 60, 67, "bus"),
+            (29, 52, 36, 63, "wheel"),
+            (50, 41, 56, 53, "wheel"),
+        ])
+    from typing import Callable, Literal, Sequence, Any, TYPE_CHECKING
+    from gradio.blocks import Block
+    if TYPE_CHECKING:
+        from gradio.components import Timer
+
+    
+    def clear(self,
+        fn: Callable[..., Any] | None = None,
+        inputs: Block | Sequence[Block] | set[Block] | None = None,
+        outputs: Block | Sequence[Block] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: Timer | float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True,
+    
+        ) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: list of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: list of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: if True, will scroll to output component on completion
+            show_progress: how to show the progress animation while event is running: "full" shows a spinner which covers the output component area as well as a runtime display in the upper right corner, "minimal" only shows the runtime display, "hidden" shows no progress animation at all
+            queue: if True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: if True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: if False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: if False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: a list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
+            trigger_mode: if "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: if set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: if set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False.
+        
+        """
+        ...
+    
+    def change(self,
+        fn: Callable[..., Any] | None = None,
+        inputs: Block | Sequence[Block] | set[Block] | None = None,
+        outputs: Block | Sequence[Block] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: Timer | float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True,
+    
+        ) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: list of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: list of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: if True, will scroll to output component on completion
+            show_progress: how to show the progress animation while event is running: "full" shows a spinner which covers the output component area as well as a runtime display in the upper right corner, "minimal" only shows the runtime display, "hidden" shows no progress animation at all
+            queue: if True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: if True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: if False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: if False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: a list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
+            trigger_mode: if "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: if set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: if set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False.
+        
+        """
+        ...
+    
+    def upload(self,
+        fn: Callable[..., Any] | None = None,
+        inputs: Block | Sequence[Block] | set[Block] | None = None,
+        outputs: Block | Sequence[Block] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: Timer | float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True,
+    
+        ) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: list of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: list of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: if True, will scroll to output component on completion
+            show_progress: how to show the progress animation while event is running: "full" shows a spinner which covers the output component area as well as a runtime display in the upper right corner, "minimal" only shows the runtime display, "hidden" shows no progress animation at all
+            queue: if True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: if True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: if False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: if False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: a list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
+            trigger_mode: if "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: if set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: if set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False.
+        
+        """
+        ...

src/backend/gradio_bbox_annotator/templates/example/index.js

@@ -0,0 +1,117 @@
+const {
+  SvelteComponent: h,
+  append_hydration: y,
+  attr: c,
+  children: b,
+  claim_element: u,
+  detach: f,
+  element: _,
+  empty: d,
+  init: k,
+  insert_hydration: v,
+  noop: o,
+  safe_not_equal: p,
+  src_url_equal: m,
+  toggle_class: r
+} = window.__gradio__svelte__internal;
+function g(s) {
+  let l, e, t;
+  return {
+    c() {
+      l = _("div"), e = _("img"), this.h();
+    },
+    l(i) {
+      l = u(i, "DIV", { class: !0 });
+      var a = b(l);
+      e = u(a, "IMG", { src: !0, alt: !0, class: !0 }), a.forEach(f), this.h();
+    },
+    h() {
+      m(e.src, t = /*value*/
+      s[0].image.url) || c(e, "src", t), c(e, "alt", ""), c(e, "class", "svelte-giydt1"), c(l, "class", "container svelte-giydt1"), r(
+        l,
+        "table",
+        /*type*/
+        s[1] === "table"
+      ), r(
+        l,
+        "gallery",
+        /*type*/
+        s[1] === "gallery"
+      ), r(
+        l,
+        "selected",
+        /*selected*/
+        s[2]
+      );
+    },
+    m(i, a) {
+      v(i, l, a), y(l, e);
+    },
+    p(i, a) {
+      a & /*value*/
+      1 && !m(e.src, t = /*value*/
+      i[0].image.url) && c(e, "src", t), a & /*type*/
+      2 && r(
+        l,
+        "table",
+        /*type*/
+        i[1] === "table"
+      ), a & /*type*/
+      2 && r(
+        l,
+        "gallery",
+        /*type*/
+        i[1] === "gallery"
+      ), a & /*selected*/
+      4 && r(
+        l,
+        "selected",
+        /*selected*/
+        i[2]
+      );
+    },
+    d(i) {
+      i && f(l);
+    }
+  };
+}
+function q(s) {
+  let l, e = (
+    /*value*/
+    s[0] && g(s)
+  );
+  return {
+    c() {
+      e && e.c(), l = d();
+    },
+    l(t) {
+      e && e.l(t), l = d();
+    },
+    m(t, i) {
+      e && e.m(t, i), v(t, l, i);
+    },
+    p(t, [i]) {
+      /*value*/
+      t[0] ? e ? e.p(t, i) : (e = g(t), e.c(), e.m(l.parentNode, l)) : e && (e.d(1), e = null);
+    },
+    i: o,
+    o,
+    d(t) {
+      t && f(l), e && e.d(t);
+    }
+  };
+}
+function w(s, l, e) {
+  let { value: t } = l, { type: i } = l, { selected: a = !1 } = l;
+  return s.$$set = (n) => {
+    "value" in n && e(0, t = n.value), "type" in n && e(1, i = n.type), "selected" in n && e(2, a = n.selected);
+  }, [t, i, a];
+}
+class E extends h {
+  constructor(l) {
+    super(), k(this, l, w, q, p, { value: 0, type: 1, selected: 2 });
+  }
+}
+export {
+  E as default
+};

src/backend/gradio_bbox_annotator/templates/example/style.css

@@ -0,0 +1 @@
+.container.svelte-giydt1 img{width:100%;height:100%}.container.selected.svelte-giydt1.svelte-giydt1{border-color:var(--border-color-accent)}.container.table.svelte-giydt1.svelte-giydt1{margin:0 auto;border:2px solid var(--border-color-primary);border-radius:var(--radius-lg);overflow:hidden;width:var(--size-20);height:var(--size-20);object-fit:cover}.container.gallery.svelte-giydt1.svelte-giydt1{height:var(--size-20);max-height:var(--size-20);object-fit:cover}.container.svelte-giydt1 img.svelte-giydt1{object-fit:cover}

src/demo/app.py

@@ -0,0 +1,17 @@
+
+import gradio as gr
+from gradio_bbox_annotator import BBoxAnnotator
+
+
+example = BBoxAnnotator().example_value()
+
+demo = gr.Interface(
+    lambda x: x,
+    BBoxAnnotator(value=example, show_label=False),  # interactive version of your component
+    BBoxAnnotator(show_label=False),  # static version of your component
+    examples=[[example]],  # uncomment this line to view the "example version" of your component
+)
+
+
+if __name__ == "__main__":
+    demo.launch()

src/demo/css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

src/demo/requirements.txt

@@ -0,0 +1 @@
+gradio_bbox_annotator

src/demo/space.py

@@ -0,0 +1,146 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'BBoxAnnotator': {'description': 'Creates an image component that can be used to upload images with bounding box annotations (as an input)\nor display images with bounding box annotations (as an output). This component can be used to annotate\nimages.', 'members': {'__init__': {'value': {'type': 'str\n    | Path\n    | tuple[\n        str | Path,\n        list[tuple[int, int, int, int, str | None]],\n    ]\n    | None', 'default': 'None', 'description': 'A path or URL for the image, or a tuple of the image and list of (left, top, right, bottom, label) annotations.'}, 'categories': {'type': 'list[str] | None', 'default': 'None', 'description': 'a list of categories to choose from when annotating the image.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.'}, 'every': {'type': 'Timer | float | None', 'default': 'None', 'description': 'Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.'}, 'inputs': {'type': 'Component | Sequence[Component] | set[Component] | None', 'default': 'None', 'description': 'Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.'}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': 'If True, will display button to download annotations.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}, 'key': {'type': 'int | str | None', 'default': 'None', 'description': 'if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.'}}, 'postprocess': {'value': {'type': 'str\n    | pathlib.Path\n    | tuple[\n        str | pathlib.Path,\n        list[tuple[int, int, int, int, str | None]],\n    ]\n    | None', 'description': 'Expects a `str` or `pathlib.Path` object containing the path to the image, or a tuple of'}}, 'preprocess': {'return': {'type': 'tuple[str, list[tuple[int, int, int, int, str | None]]]\n    | None', 'description': 'A tuple of `str` containing the path to the image and a list of annotations.'}, 'value': None}}, 'events': {'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the BBoxAnnotator using the clear button for the component.'}, 'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the BBoxAnnotator changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the BBoxAnnotator.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'BBoxAnnotator': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_bbox_annotator`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.1.0%20-%20orange"> <a href="https://github.com/kyamagu/gradio-bbox-annotator/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
+</div>
+
+Bounding box annotation tool
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_bbox_annotator
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_bbox_annotator import BBoxAnnotator
+
+
+example = BBoxAnnotator().example_value()
+
+demo = gr.Interface(
+    lambda x: x,
+    BBoxAnnotator(value=example, show_label=False),  # interactive version of your component
+    BBoxAnnotator(show_label=False),  # static version of your component
+    examples=[[example]],  # uncomment this line to view the "example version" of your component
+)
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `BBoxAnnotator`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["BBoxAnnotator"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["BBoxAnnotator"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Is passed, a tuple of `str` containing the path to the image and a list of annotations.
+- **As output:** Should return, expects a `str` or `pathlib.Path` object containing the path to the image, or a tuple of.
+
+ ```python
+def predict(
+    value: tuple[str, list[tuple[int, int, int, int, str | None]]]
+    | None
+) -> str
+    | pathlib.Path
+    | tuple[
+        str | pathlib.Path,
+        list[tuple[int, int, int, int, str | None]],
+    ]
+    | None:
+    return value
+```
+""", elem_classes=["md-custom", "BBoxAnnotator-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          BBoxAnnotator: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/frontend/Example.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { AnnotatedImage } from "./shared/utils";
+
+	export let value: null | AnnotatedImage;
+	export let type: "gallery" | "table";
+	export let selected = false;
+</script>
+
+{#if value}
+	<div
+		class="container"
+		class:table={type === "table"}
+		class:gallery={type === "gallery"}
+		class:selected
+	>
+		<img src={value.image.url} alt="" />
+	</div>
+{/if}
+
+<style>
+	.container :global(img) {
+		width: 100%;
+		height: 100%;
+	}
+
+	.container.selected {
+		border-color: var(--border-color-accent);
+	}
+
+	.container.table {
+		margin: 0 auto;
+		border: 2px solid var(--border-color-primary);
+		border-radius: var(--radius-lg);
+		overflow: hidden;
+		width: var(--size-20);
+		height: var(--size-20);
+		object-fit: cover;
+	}
+
+	.container.gallery {
+		height: var(--size-20);
+		max-height: var(--size-20);
+		object-fit: cover;
+	}
+	.container img {
+		object-fit: cover;
+	}
+</style>

src/frontend/Index.svelte

@@ -0,0 +1,109 @@
+<svelte:options accessors={true} />
+
+<script context="module" lang="ts">
+	export { default as BaseImageUploader } from "./shared/ImageUploader.svelte";
+	export { default as BaseStaticImage } from "./shared/ImagePreview.svelte";
+	export { default as BaseExample } from "./Example.svelte";
+</script>
+
+<script lang="ts">
+	import type { Gradio } from "@gradio/utils";
+	import ImagePreview from "./shared/ImagePreview.svelte";
+	import ImageUploader from "./shared/ImageUploader.svelte";
+	import type { AnnotatedImage } from "./shared/utils";
+
+	import { Block, UploadText } from "@gradio/atoms";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: null | AnnotatedImage = null;
+	export let label: string;
+	export let show_label: boolean;
+	export let show_download_button: boolean;
+	export let container = true;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let loading_status: LoadingStatus;
+	export let interactive: boolean;
+	export let root: string;
+	export let placeholder: string | undefined = undefined;
+	export let categories: string[] = [];
+
+	export let gradio: Gradio<{
+		change: never;
+		upload: never;
+		clear: never;
+		clear_status: LoadingStatus;
+	}>;
+
+	$: value, gradio.dispatch("change");
+
+	let dragging: boolean;
+</script>
+
+{#if !interactive}
+	<Block
+		{visible}
+		variant={"solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		allow_overflow={false}
+		{container}
+		{scale}
+		{min_width}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+		/>
+		<ImagePreview
+			{value}
+			{label}
+			{show_label}
+			{show_download_button}
+			i18n={gradio.i18n}
+		/>
+	</Block>
+{:else}
+	<Block
+		{visible}
+		variant={value === null ? "dashed" : "solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		allow_overflow={false}
+		{container}
+		{scale}
+		{min_width}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+		/>
+
+		<ImageUploader
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={(...args) => gradio.client.stream(...args)}
+			bind:value
+			{root}
+			on:clear={() => gradio.dispatch("clear")}
+			on:drag={({ detail }) => (dragging = detail)}
+			on:upload={() => gradio.dispatch("upload")}
+			{label}
+			{show_label}
+			{categories}
+		>
+			<UploadText i18n={gradio.i18n} type="image" {placeholder} />
+		</ImageUploader>
+	</Block>
+{/if}

src/frontend/gradio.config.js

@@ -0,0 +1,15 @@
+import commonjs from "vite-plugin-commonjs";
+
+export default {
+  plugins: [
+    commonjs({
+      filter: (id) => id.includes("node_modules/deepmerge")
+    })
+  ],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

src/frontend/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "gradio_imageannotator",
+  "version": "0.8.8",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "dependencies": {
+    "@gradio/atoms": "0.11.1",
+    "@gradio/client": "1.8.0",
+    "@gradio/icons": "0.8.1",
+    "@gradio/statustracker": "0.9.5",
+    "@gradio/upload": "0.14.1",
+    "@gradio/utils": "0.8.0",
+    "@gradio/wasm": "0.15.0",
+    "cropperjs": "^1.5.12",
+    "deepmerge": "2.2.1",
+    "lazy-brush": "^1.0.1",
+    "resize-observer-polyfill": "^1.5.1",
+    "svelte-i18n": "^4.0.1"
+  },
+  "devDependencies": {
+    "@gradio/preview": "^0.13.0",
+    "@tsconfig/svelte": "^5.0.4",
+    "svelte-preprocess": "^6.0.3",
+    "typescript": "^5.7.2",
+    "vite-plugin-commonjs": "^0.10.4"
+  },
+  "main_changeset": true,
+  "main": "./Index.svelte",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./base": {
+      "gradio": "./shared/ImagePreview.svelte",
+      "svelte": "./dist/shared/ImagePreview.svelte",
+      "types": "./dist/shared/ImagePreview.svelte.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/simpleimage"
+  }
+}

src/frontend/shared/AnnotationView.svelte

@@ -0,0 +1,281 @@
+<script lang="ts">
+    import { Toolbar, IconButton } from "@gradio/atoms";
+    import { Sketch, Square, Trash } from "@gradio/icons";
+	import { type AnnotatedImage, type Annotation, clamp } from "./utils";
+    import BoxCursor from "./BoxCursor.svelte";
+    import BoxPreview from "./BoxPreview.svelte";
+
+	export let value: null | AnnotatedImage = null;
+	export let interactive: boolean = false;
+    export let show_legend: boolean = true;
+
+    export let categories: string[] = [];
+    export let colorMap: { [key: string]: string } = {};
+
+	// Image coordinates and scale information.
+	type ImageRect = {
+		left: number;
+		top: number;
+        right: number;
+        bottom: number;
+		width: number;
+		height: number;
+		naturalWidth: number;
+		naturalHeight: number;
+	};
+	let imageRect: ImageRect = {
+		left: 0,
+		top: 0,
+        right: 1,
+        bottom: 1,
+		width: 1,
+		height: 1,
+		naturalWidth: 2,
+		naturalHeight: 2,
+	};
+    let imageFrame: HTMLDivElement;
+    let imageElement: HTMLImageElement;
+
+    // Display coordinates of the annotations.
+	let displayAnnotations: Annotation[] = [];
+
+    // Cursor box position in display coordinates.
+    let cursor: BoxCursor;
+
+    // State variables.    
+    let selected: number | null = null;
+    let inserting: boolean = false;
+    let currentCategory: string = "";
+
+	// Attach resize observer to the image element position and size.
+	function onResize(node: HTMLDivElement) {
+		const resizeObserver = new ResizeObserver(() => {
+            imageRect = {
+                left: imageElement.offsetLeft,
+                top: imageElement.offsetTop,
+                right: imageElement.offsetLeft + imageElement.offsetWidth,
+                bottom: imageElement.offsetTop + imageElement.offsetHeight,
+                width: imageElement.offsetWidth,
+                height: imageElement.offsetHeight,
+                naturalWidth: imageElement.naturalWidth,
+                naturalHeight: imageElement.naturalHeight,
+            };
+		});
+		resizeObserver.observe(node);
+		return {
+			destroy() { resizeObserver.disconnect(); }
+		};
+	}
+
+    // Resize annotations to the display size and positions.
+	function updateDisplayAnnotations(value: AnnotatedImage | null, imageRect: ImageRect) {
+		displayAnnotations = value?.annotations.map((annotation) => {
+			return {
+				left: annotation.left / (imageRect.naturalWidth - 1) * imageRect.width + imageRect.left,
+				top: annotation.top / (imageRect.naturalHeight - 1) * imageRect.height + imageRect.top,
+				right: annotation.right / (imageRect.naturalWidth - 1) * imageRect.width + imageRect.left,
+				bottom: annotation.bottom / (imageRect.naturalHeight - 1) * imageRect.height + imageRect.top,
+				label: annotation.label,
+			} as Annotation;
+		}) || [];
+
+        if (selected !== null) {
+            cursor.setPosition(displayAnnotations[selected])
+        }
+	}
+	$: updateDisplayAnnotations(value, imageRect);
+
+    // Select an annotation box and show a cursor box.
+    function onSelect(event: MouseEvent, index: number) {
+        if (inserting) return;
+        selected = index;
+        cursor.setPosition(displayAnnotations[selected])
+        event.stopPropagation();
+        cursor.emitCursorMousedown({ clientX: event.clientX, clientY: event.clientY });
+    }
+
+    // Add a new annotation box if inserting, otherwise cancel the selection.
+    function onFrameMousedown(event: MouseEvent) {
+        if (!value) return;
+        // Cancel the selection if the click is outside the boxes.
+        selected = null;
+        if (!inserting) return;
+
+        // Add a new annotation box on insertion mode.
+        const rect = imageFrame.getBoundingClientRect();
+        const point = {
+            left: (event.clientX - rect.left - imageRect.left) / imageRect.width * (imageRect.naturalWidth - 1),
+            top: (event.clientY - rect.top - imageRect.top) / imageRect.height * (imageRect.naturalHeight - 1),
+        };
+        value.annotations.push({
+            left: clamp(point.left, 0, imageRect.naturalWidth - 1),
+            top: clamp(point.top, 0, imageRect.naturalHeight - 1),
+            right: clamp(point.left, 0, imageRect.naturalWidth - 1),
+            bottom: clamp(point.top, 0, imageRect.naturalHeight - 1),
+            label: currentCategory || null,
+        });
+        selected = value.annotations.length - 1;
+        updateDisplayAnnotations(value, imageRect);
+        inserting = false;
+        currentCategory = "";
+
+        cursor.emitAnchorMousedown("se", { clientX: event.clientX, clientY: event.clientY });
+    }
+
+    // Update the annotation box position when the cursor box changes.
+    function onCursorChange(): void {
+        if (value !== null && selected !== null) {
+            // Transform from the display coordinates to the image coordinates.
+            const position = cursor.getPosition();
+            const rect = {
+                left: (position.left - imageRect.left) / imageRect.width * (imageRect.naturalWidth - 1),
+                top: (position.top - imageRect.top) / imageRect.height * (imageRect.naturalHeight - 1),
+                right: (position.right - imageRect.left) / imageRect.width * (imageRect.naturalWidth - 1),
+                bottom: (position.bottom - imageRect.top) / imageRect.height * (imageRect.naturalHeight - 1),
+            }
+            value.annotations[selected].left = clamp(Math.round(rect.left), 0, imageRect.naturalWidth - 1);
+            value.annotations[selected].top = clamp(Math.round(rect.top), 0, imageRect.naturalHeight - 1);
+            value.annotations[selected].right = clamp(Math.round(rect.right), 0, imageRect.naturalWidth - 1);
+            value.annotations[selected].bottom = clamp(Math.round(rect.bottom), 0, imageRect.naturalHeight - 1);
+        }
+    }
+
+    // Remove an annotation box.
+    function removeAnnotation(): void {
+        // TODO: Invoke when the delete key is pressed.
+        if (value !== null && selected !== null) {
+            value.annotations.splice(selected, 1);
+            selected = null;
+            value = value;
+        }
+    }
+
+    // Switch to the inserting mode.
+    function onClickInsertion(label: string): void {
+        selected = null;
+        inserting = (inserting && currentCategory === label) ? false : true;
+        currentCategory = label;
+    }
+
+    // Update categories on value change.
+    function updateLabels(value: AnnotatedImage | null) {
+        if (value) {
+            for (let annotation of value.annotations) {
+                const label = annotation.label || "";
+                if (!categories.includes(label)) {
+                    categories.push(label);
+                }
+            }
+            categories = categories;
+        }
+    }
+    $: updateLabels(value);
+
+    // Update colormap on categories change.
+    function updateColorMap(categories: string[]) {
+        for (let label of categories) {
+            if (!colorMap[label]) {
+                const index = Object.keys(colorMap).length;
+                const hue = Math.round((index + 4) / 8 * 360) % 360;  // Start from blue.
+                colorMap[label] = `hsl(${hue}, 100%, 50%)`;
+            }
+        }
+        colorMap = colorMap;
+    }
+    $: updateColorMap(categories);
+</script>
+
+{#if value !== null}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div
+        bind:this={imageFrame}
+        class="image-frame"
+        use:onResize
+        on:mousedown|stopPropagation|preventDefault={onFrameMousedown}
+    >
+        <img
+            bind:this={imageElement} 
+            class:inserting={interactive && inserting}
+            src={value.image.url}
+            alt="background"
+            loading="lazy"
+        />
+        {#each displayAnnotations as annotation, index}
+            <BoxPreview
+                {annotation}
+                {interactive}
+                selectable={!inserting}
+                active={!interactive || selected !== index}
+                --box-color={colorMap[annotation.label || ""]}
+                --cursor={inserting ? "crosshair" : "default"}
+                on:mousedown={(event) => {if (interactive && !inserting) onSelect(event, index)}}
+            />
+        {/each}
+        <BoxCursor
+            bind:this={cursor}
+            active={interactive && selected !== null}
+            frame={imageRect}
+            --box-color={selected !== null ? colorMap[value.annotations[selected]?.label || ""] : "white"}
+            on:change={onCursorChange}
+        />
+    </div>
+    {#if interactive}
+        <Toolbar show_border={true}>
+            {#each categories as category}
+                <IconButton
+                    Icon={(categories.length > 1) ? Square : Sketch}
+                    show_label={categories.length > 1}
+                    label={category}
+                    size="medium"
+                    padded={true}
+                    hasPopup={true}
+                    highlight={inserting && category === currentCategory}
+                    color={colorMap[category] || "white"}
+                    on:click={() => { onClickInsertion(category); }}
+                />
+            {/each}
+            <IconButton
+                Icon={Trash}
+                label="Remove"
+                size="medium"
+                padded={true}
+                disabled={selected === null}
+                on:click={removeAnnotation}
+            />
+        </Toolbar>
+    {:else if show_legend && categories.length > 0}
+        <Toolbar show_border={true}>
+            {#each categories as category}
+                <IconButton
+                    Icon={Square}
+                    show_label={true}
+                    label={category}
+                    size="medium"
+                    padded={true}
+                    color={colorMap[category] || "white"}
+                />
+            {/each}
+        </Toolbar>
+    {/if}
+{/if}
+
+<style>
+	.image-frame {
+		position: relative;
+		width: 100%;
+		height: 100%;
+        padding: 10px;
+	}
+	.image-frame :global(img) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: contain;
+        user-select: none;
+        -moz-user-select: none;
+        -webkit-user-drag: none;
+	}
+    .inserting {
+        cursor: crosshair;
+    }
+</style>

src/frontend/shared/BoxCursor.svelte

@@ -0,0 +1,293 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+    import { type Box, clamp } from "./utils";
+
+    export let frame: Box;
+    export let dragging: boolean = false;
+    export let active: boolean = false;
+
+    type AnchorLocation = "nw" | "w" | "sw" | "s" | "se" | "e" | "ne" | "n";
+
+    let left: number = 0;
+    let top: number = 0;
+    let right: number = 0;
+    let bottom: number = 0;
+
+    export function setPosition(box: Box): void {
+        left = box.left;
+        top = box.top;
+        right = box.right;
+        bottom = box.bottom;
+    }
+
+    export function getPosition(): Box {
+        return { left, top, right, bottom };
+    }
+
+    let cursorBody: HTMLDivElement | null = null;
+    let anchor: { [key in AnchorLocation]: HTMLDivElement | null } = {
+        nw: null,
+        n: null,
+        ne: null,
+        w: null,
+        sw: null,
+        s: null,
+        se: null,
+        e: null,
+    };
+
+	const dispatch = createEventDispatcher<{
+		change?: Box;
+        drag?: never;
+	}>();
+
+    $: if (dragging) dispatch("drag");
+
+    // Drag to move the cursor.
+    function onCursorMousedown(event: MouseEvent): void {
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const offset: Box = { left, top, right, bottom };
+        const width = right - left;
+        const height = bottom - top;
+
+        dragging = true;
+
+        function onCursorMousemove(event: MouseEvent): void {
+            const dx = clamp(event.clientX - startX, frame.left - offset.left, frame.right - offset.right);
+            const dy = clamp(event.clientY - startY, frame.top - offset.top, frame.bottom - offset.bottom);
+            left = offset.left + dx;
+            top = offset.top + dy;
+            right = offset.right + dx;
+            bottom = offset.bottom + dy;
+            dispatch("change", { left, top, right, bottom });
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        function onCursorMouseup(event: MouseEvent): void {
+            // TODO: Case when the cursor is outside the window.
+            window.removeEventListener("mousemove", onCursorMousemove);
+            window.removeEventListener("mouseup", onCursorMouseup);
+            event.preventDefault();
+            event.stopPropagation();
+            dragging = false;
+        }
+
+        window.addEventListener("mousemove", onCursorMousemove);
+        window.addEventListener("mouseup", onCursorMouseup);
+    }
+
+    // Drag to resize the cursor.
+    function onAnchorMousedown(event: MouseEvent, location: string): void {
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const offset = { left, top, right, bottom };
+
+        dragging = true;
+
+        function onAnchorMousemove(event: MouseEvent): void {
+            const dx = event.clientX - startX;
+            const dy = event.clientY - startY;
+
+            if (location.includes("w")) {
+                if (offset.left + dx <= offset.right) {
+                    left = clamp(offset.left + dx, frame.left, frame.right);
+                }
+                else {
+                    left = offset.right;
+                    right = clamp(offset.left + dx, frame.left, frame.right);
+                }
+            }
+            else if (location.includes("e")) {
+                if (offset.right + dx >= offset.left) {
+                    right = clamp(offset.right + dx, frame.left, frame.right);
+                }
+                else {
+                    right = offset.left;
+                    left = clamp(offset.right + dx, frame.left, frame.right);
+                }
+            }
+
+            if (location.includes("n")) {
+                if (offset.top + dy <= offset.bottom) {
+                    top = clamp(offset.top + dy, frame.top, frame.bottom);
+                }
+                else {
+                    top = offset.bottom;
+                    bottom = clamp(offset.top + dy, frame.top, frame.bottom);
+                }
+            }
+            else if (location.includes("s")) {
+                if (offset.bottom + dy >= offset.top) {
+                    bottom = clamp(offset.bottom + dy, frame.top, frame.bottom);
+                }
+                else {
+                    bottom = offset.bottom;
+                    top = clamp(offset.bottom + dy, frame.top, frame.bottom);
+                }
+            }
+            dispatch("change", { left, top, right, bottom });
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        function onAnchorMouseup(event: MouseEvent): void {
+            window.removeEventListener("mousemove", onAnchorMousemove);
+            window.removeEventListener("mouseup", onAnchorMouseup);
+            event.preventDefault();
+            event.stopPropagation();
+            dragging = false;
+        }
+
+        window.addEventListener("mousemove", onAnchorMousemove);
+        window.addEventListener("mouseup", onAnchorMouseup);
+    }
+
+    export function emitCursorMousedown(options: any = null): void {
+        cursorBody?.dispatchEvent(new MouseEvent("mousedown", options));
+    }
+
+    export function emitAnchorMousedown(location: AnchorLocation, options: any = null): void {
+        anchor[location]?.dispatchEvent(new MouseEvent("mousedown", options));
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+    bind:this={cursorBody}
+    class="box-cursor"
+    class:inactive={!active}
+    class:selectable={active && !dragging}
+    style:left={left + "px"}
+    style:top={top + "px"}
+    style:width={(right - left) + "px"}
+    style:height={(bottom - top) + "px"}
+    on:mousedown|stopPropagation|preventDefault={onCursorMousedown}
+    on:click|stopPropagation|preventDefault
+>
+</div>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+    bind:this={anchor.nw}
+    class="box-anchor"
+    class:inactive={!active}
+    style:cursor="nwse-resize"
+    style:left={(left - 5) + "px"}
+    style:top={(top - 5) + "px"}
+    on:mousedown|stopPropagation|preventDefault={(event) => onAnchorMousedown(event, "nw")}
+    on:click|stopPropagation|preventDefault
+>
+</div>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+    bind:this={anchor.w}
+    class="box-anchor"
+    class:inactive={!active}
+    style:cursor="ew-resize"
+    style:left={(left - 5) + "px"}
+    style:top={((top + bottom) / 2 - 5) + "px"}
+    on:mousedown|stopPropagation|preventDefault={(event) => onAnchorMousedown(event, "w")}
+    on:click|stopPropagation|preventDefault
+>
+</div>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+    bind:this={anchor.sw}
+    class="box-anchor"
+    class:inactive={!active}
+    style:cursor="nesw-resize"
+    style:left={(left - 5) + "px"}
+    style:top={(bottom - 5) + "px"}
+    on:mousedown|stopPropagation|preventDefault={(event) => onAnchorMousedown(event, "sw")}
+    on:click|stopPropagation|preventDefault
+>
+</div>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+    bind:this={anchor.s}
+    class="box-anchor"
+    class:inactive={!active}
+    style:cursor="ns-resize"
+    style:left={((left + right) / 2 - 5) + "px"}
+    style:top={(bottom - 5) + "px"}
+    on:mousedown|stopPropagation|preventDefault={(event) => onAnchorMousedown(event, "s")}
+    on:click|stopPropagation|preventDefault
+>
+</div>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+    bind:this={anchor.se}
+    class="box-anchor"
+    class:inactive={!active}
+    style:cursor="nwse-resize"
+    style:left={(right - 5) + "px"}
+    style:top={(bottom - 5) + "px"}
+    on:mousedown|stopPropagation|preventDefault={(event) => onAnchorMousedown(event, "se")}
+    on:click|stopPropagation|preventDefault
+>
+</div>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+    bind:this={anchor.e}
+    class="box-anchor"
+    class:inactive={!active}
+    style:cursor="ew-resize"
+    style:left={(right - 5) + "px"}
+    style:top={((top + bottom) / 2 - 5) + "px"}
+    on:mousedown|stopPropagation|preventDefault={(event) => onAnchorMousedown(event, "e")}
+    on:click|stopPropagation|preventDefault
+></div>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+    bind:this={anchor.ne}
+    class="box-anchor"
+    class:inactive={!active}
+    style:cursor="nesw-resize"
+    style:left={(right - 5) + "px"}
+    style:top={(top - 5) + "px"}
+    on:mousedown|stopPropagation|preventDefault={(event) => onAnchorMousedown(event, "ne")}
+    on:click|stopPropagation|preventDefault
+>
+</div>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+    bind:this={anchor.n}
+    class="box-anchor"
+    class:inactive={!active}
+    style:cursor="ns-resize"
+    style:left={((left + right) / 2 - 5) + "px"}
+    style:top={(top - 5) + "px"}
+    on:mousedown|stopPropagation|preventDefault={(event) => onAnchorMousedown(event, "n")}
+    on:click|stopPropagation|preventDefault
+></div>
+
+<style>
+    .box-cursor {
+        position: absolute;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--box-color, white);
+        cursor: move;
+    }
+    .box-cursor:hover {
+        background-color: color-mix(in hsl, var(--box-color) 10%, transparent);
+    }
+    .inactive {
+        display: none;
+    }
+    .box-anchor {
+        position: absolute;
+        border: 1px solid white;
+        background-color: var(--box-color, white);
+        width: 10px;
+        height: 10px;
+    }
+</style>

src/frontend/shared/BoxPreview.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import {type Annotation} from "./utils";
+
+    export let annotation: Annotation;
+    export let interactive: boolean;
+    export let selectable: boolean;
+    export let active: boolean = true;
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+    class="box-preview"
+    class:selectable={interactive && selectable}
+    class:inactive={!active}
+    style:left={annotation.left + "px"}
+    style:top={annotation.top + "px"}
+    style:width={(annotation.right - annotation.left) + "px"}
+    style:height={(annotation.bottom - annotation.top) + "px"}
+    data-label={annotation.label}
+    on:mousedown
+>
+</div>
+
+<style>
+.box-preview {
+    position: absolute;
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--box-color, white);
+    cursor: var(--cursor, default);
+}
+.selectable {
+    cursor: pointer;
+}
+.selectable:hover {
+    background-color: color-mix(in hsl, var(--box-color) 10%, transparent);
+}
+.inactive {
+    display: none;
+}
+</style>

src/frontend/shared/ImagePreview.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import {
+		BlockLabel,
+		Empty,
+		IconButton,
+		IconButtonWrapper
+	} from "@gradio/atoms";
+	import { Download } from "@gradio/icons";
+	import { DownloadLink } from "@gradio/wasm/svelte";
+
+	import { Image as ImageIcon } from "@gradio/icons";
+	import type { I18nFormatter } from "@gradio/utils";
+	import AnnotationView from "./AnnotationView.svelte";
+	import { type AnnotatedImage, encodeToDataURL } from "./utils";
+
+	export let value: null | AnnotatedImage = null;
+	export let label: string | undefined = undefined;
+	export let show_label: boolean;
+	export let show_download_button = true;
+	export let i18n: I18nFormatter;
+	export let categories: string[] = [];
+</script>
+
+<BlockLabel
+	{show_label}
+	Icon={ImageIcon}
+	label={label || i18n("image.image")}
+/>
+{#if value === null || !value.image.url}
+	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
+{:else}
+	<IconButtonWrapper>
+		{#if show_download_button}
+			<DownloadLink href={encodeToDataURL(value)} download={(value.image.orig_name || "image") + ".json"}>
+				<IconButton Icon={Download} label={i18n("common.download")} />
+			</DownloadLink>
+		{/if}
+	</IconButtonWrapper>
+	<AnnotationView {value} {categories}/>
+{/if}

src/frontend/shared/ImageUploader.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { createEventDispatcher, tick } from "svelte";
+	import { BlockLabel, IconButton, IconButtonWrapper } from "@gradio/atoms";
+	import { Image as ImageIcon, Clear as ClearIcon } from "@gradio/icons";
+
+	import { Upload } from "@gradio/upload";
+	import type { FileData, Client } from "@gradio/client";
+	import AnnotationView from "./AnnotationView.svelte";
+	import type { AnnotatedImage } from "./utils";
+
+	export let value: null | AnnotatedImage = null;
+	export let label: string | undefined = undefined;
+	export let show_label: boolean;
+	export let root: string;
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream"];
+	export let categories: string[] = [];
+
+	let upload_component: Upload;
+	let uploading = false;
+
+	function handle_upload({ detail }: CustomEvent<FileData>): void {
+		// TODO: Support annotation upload via JSON.
+		value = { image: detail, annotations: [] } as AnnotatedImage;
+		dispatch("upload");
+	}
+	$: if (uploading) value = null;
+
+	const dispatch = createEventDispatcher<{
+		change?: never;
+		clear?: never;
+		drag: boolean;
+		upload?: never;
+	}>();
+
+	let dragging = false;
+	$: dispatch("drag", dragging);
+</script>
+
+<BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} />
+
+<div data-testid="image" class="image-container">
+	{#if value?.image.url}
+		<IconButtonWrapper>
+			<IconButton
+				Icon={ClearIcon}
+				label="Remove Image"
+				on:click={(event) => {
+					value = null;
+					dispatch("clear");
+					event.stopPropagation();
+				}}
+			/>
+		</IconButtonWrapper>
+	{/if}
+	<div class="upload-container">
+		<Upload
+			{upload}
+			{stream_handler}
+			hidden={value !== null}
+			bind:this={upload_component}
+			bind:uploading
+			bind:dragging
+			filetype="image/*"
+			on:load={handle_upload}
+			on:error
+			{root}
+		>
+			{#if value === null}
+				<slot />
+			{/if}
+		</Upload>
+		{#if value !== null}
+			<AnnotationView bind:value {categories} interactive={true} />
+		{/if}
+	</div>
+</div>
+
+<style>
+	.upload-container {
+		height: 100%;
+		width: 100%;
+		flex-shrink: 1;
+		max-height: 100%;
+	}
+	.image-container {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		max-height: 100%;
+	}
+</style>

src/frontend/shared/utils.ts

@@ -0,0 +1,25 @@
+import type { FileData } from "@gradio/client";
+
+export interface Box {
+	left: number,
+	top: number,
+	right: number,
+	bottom: number,
+};
+
+export interface Annotation extends Box {
+    label: string | null,
+};
+
+export type AnnotatedImage = {
+    image: FileData,
+    annotations: Annotation[]
+};
+
+export function clamp(value: number, min: number, max: number): number {
+	return Math.min(Math.max(value, min), max);
+}
+
+export function encodeToDataURL(data: any, mimeType: string = "application/json", charset: string = "utf-8"): string {
+	return "data:" + mimeType + ";charset=" + charset + "," + encodeURIComponent(JSON.stringify(data));
+}

src/frontend/tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "extends": "@tsconfig/svelte/tsconfig.json"
+}

src/pyproject.toml

@@ -0,0 +1,46 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_bbox_annotator"
+version = "0.1.0"
+description = "Bounding box annotation tool"
+readme = "README.md"
+license = "apache-2.0"
+requires-python = ">=3.10"
+authors = [{ name = "Kota Yamaguchi", email = "[email protected]" }]
+keywords = ["gradio-custom-component", "image", "annotation", "bbox"]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<6.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Programming Language :: Python :: 3.12',
+  'Programming Language :: Python :: 3.13',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+[project.urls]
+repository = "https://github.com/kyamagu/gradio-bbox-annotator"
+# space = "your space url"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_bbox_annotator/templates", "*.pyi"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_bbox_annotator"]