# `gradio_image_prompter_visible_box`
<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.1.0%20-%20orange">
A gradio component to upload images and process point/box prompts with more visible boxes.
## Installation
```bash
pip install gradio_image_prompter_visible_box
```
## Usage
```python
import gradio as gr
from gradio_image_prompter import ImagePrompter
demo = gr.Interface(
lambda prompts: (prompts["image"], prompts["points"]),
ImagePrompter(show_label=False),
[gr.Image(show_label=False), gr.Dataframe(label="Points")],
)
if __name__ == '__main__':
demo.launch()
```
## `ImagePrompter`
### 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 | _Image.Image | np.ndarray | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">A PIL Image, numpy array, path or URL for the default value. If callable, it will be called set the initial value.</td>
</tr>
<tr>
<td align="left"><code>height</code></td>
<td align="left" style="width: 25%;">
```python
int | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">Height of the displayed image in pixels.</td>
</tr>
<tr>
<td align="left"><code>width</code></td>
<td align="left" style="width: 25%;">
```python
int | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">Width of the displayed image in pixels.</td>
</tr>
<tr>
<td align="left"><code>image_mode</code></td>
<td align="left" style="width: 25%;">
```python
Literal[
"1",
"L",
"P",
"RGB",
"RGBA",
"CMYK",
"YCbCr",
"LAB",
"HSV",
"I",
"F",
]
```
</td>
<td align="left"><code>"RGB"</code></td>
<td align="left">"RGB" if color, or "L" if black and white. See https://pillow.readthedocs.io/en/stable/handbook/concepts.html.</td>
</tr>
<tr>
<td align="left"><code>sources</code></td>
<td align="left" style="width: 25%;">
```python
list[Literal["upload", "clipboard"]] | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">List of sources for the image.</td>
</tr>
<tr>
<td align="left"><code>type</code></td>
<td align="left" style="width: 25%;">
```python
Literal["numpy", "pil", "filepath"]
```
</td>
<td align="left"><code>"numpy"</code></td>
<td align="left">The format the image is converted before being passed into the prediction function.</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.</td>
</tr>
<tr>
<td align="left"><code>every</code></td>
<td align="left" style="width: 25%;">
```python
float | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">If `value` is a callable, run the function 'every' number of seconds while the client connection is open.</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 image.</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 width compared to adjacent Components in a Row. Should be an integer.</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.</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.</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.</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.</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.</td>
</tr>
<tr>
<td align="left"><code>show_share_button</code></td>
<td align="left" style="width: 25%;">
```python
bool | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">If True, show a share icon that allows user to share outputs to Hugging Face Spaces Discussions.</td>
</tr>
</tbody></table>
### Events
| name | description |
|:-----|:------------|
| `clear` | This listener is triggered when the user clears the ImagePrompter using the X button for the component. |
| `change` | Triggered when the value of the ImagePrompter 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. |
| `stream` | This listener is triggered when the user streams the ImagePrompter. |
| `select` | Event listener for when the user selects or deselects the ImagePrompter. Uses event data gradio.SelectData to carry `value` referring to the label of the ImagePrompter, and `selected` to refer to state of the ImagePrompter. See EventData documentation on how to use this event data |
| `upload` | This listener is triggered when the user uploads a file into the ImagePrompter. |
### 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, passes the uploaded image as a `numpy.array`, `PIL.Image` or `str` filepath depending on `type`. For SVGs, the `type` parameter is ignored and the filepath of the SVG is returned.
```python
def predict(
value: PromptValue | None
) -> PromptValue:
return value
```
Raw data
{
"_id": null,
"home_page": null,
"name": "gradio-image-prompter-visible-box",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "gradio-custom-component, gradio-template-Image",
"author": null,
"author_email": "\"nikigoli based on work of (PhyscalX)\" <niki@adainnovations.ai>",
"download_url": "https://files.pythonhosted.org/packages/89/32/324a25c6f4171f5d627b378925271a777645e6e8da71e768f9b97d062fe0/gradio_image_prompter_visible_box-0.1.0.tar.gz",
"platform": null,
"description": "\n# `gradio_image_prompter_visible_box`\n<img alt=\"Static Badge\" src=\"https://img.shields.io/badge/version%20-%200.1.0%20-%20orange\"> \n\nA gradio component to upload images and process point/box prompts with more visible boxes.\n\n## Installation\n\n```bash\npip install gradio_image_prompter_visible_box\n```\n\n## Usage\n\n```python\nimport gradio as gr\nfrom gradio_image_prompter import ImagePrompter\n\ndemo = gr.Interface(\n lambda prompts: (prompts[\"image\"], prompts[\"points\"]),\n ImagePrompter(show_label=False),\n [gr.Image(show_label=False), gr.Dataframe(label=\"Points\")],\n)\nif __name__ == '__main__':\n demo.launch()\n\n```\n\n## `ImagePrompter`\n\n### Initialization\n\n<table>\n<thead>\n<tr>\n<th align=\"left\">name</th>\n<th align=\"left\" style=\"width: 25%;\">type</th>\n<th align=\"left\">default</th>\n<th align=\"left\">description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td align=\"left\"><code>value</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nstr | _Image.Image | np.ndarray | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">A PIL Image, numpy array, path or URL for the default value. If callable, it will be called set the initial value.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>height</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">Height of the displayed image in pixels.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>width</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">Width of the displayed image in pixels.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>image_mode</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nLiteral[\n \"1\",\n \"L\",\n \"P\",\n \"RGB\",\n \"RGBA\",\n \"CMYK\",\n \"YCbCr\",\n \"LAB\",\n \"HSV\",\n \"I\",\n \"F\",\n]\n```\n\n</td>\n<td align=\"left\"><code>\"RGB\"</code></td>\n<td align=\"left\">\"RGB\" if color, or \"L\" if black and white. See https://pillow.readthedocs.io/en/stable/handbook/concepts.html.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>sources</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nlist[Literal[\"upload\", \"clipboard\"]] | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">List of sources for the image.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>type</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nLiteral[\"numpy\", \"pil\", \"filepath\"]\n```\n\n</td>\n<td align=\"left\"><code>\"numpy\"</code></td>\n<td align=\"left\">The format the image is converted before being passed into the prediction function.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>label</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nstr | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">The label for this component.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>every</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nfloat | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">If `value` is a callable, run the function 'every' number of seconds while the client connection is open.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>show_label</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">if True, will display label.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>show_download_button</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<td align=\"left\">If True, will display button to download image.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>container</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<td align=\"left\">If True, will place the component in a container - providing some extra padding around the border.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>scale</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">relative width compared to adjacent Components in a Row. Should be an integer.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>min_width</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint\n```\n\n</td>\n<td align=\"left\"><code>160</code></td>\n<td align=\"left\">minimum pixel width, will wrap if not sufficient screen space to satisfy this value.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>interactive</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">if True, will allow users to upload and edit an image; if False, can only be used to display images.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>visible</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<td align=\"left\">If False, component will be hidden.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>elem_id</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nstr | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">An optional string that is assigned as the id of this component in the HTML DOM.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>elem_classes</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nlist[str] | str | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">An optional list of strings that are assigned as the classes of this component in the HTML DOM.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>render</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<td align=\"left\">If False, component will not render be rendered in the Blocks context.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>show_share_button</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">If True, show a share icon that allows user to share outputs to Hugging Face Spaces Discussions.</td>\n</tr>\n</tbody></table>\n\n\n### Events\n\n| name | description |\n|:-----|:------------|\n| `clear` | This listener is triggered when the user clears the ImagePrompter using the X button for the component. |\n| `change` | Triggered when the value of the ImagePrompter 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. |\n| `stream` | This listener is triggered when the user streams the ImagePrompter. |\n| `select` | Event listener for when the user selects or deselects the ImagePrompter. Uses event data gradio.SelectData to carry `value` referring to the label of the ImagePrompter, and `selected` to refer to state of the ImagePrompter. See EventData documentation on how to use this event data |\n| `upload` | This listener is triggered when the user uploads a file into the ImagePrompter. |\n\n\n\n### User function\n\nThe impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).\n\n- When used as an Input, the component only impacts the input signature of the user function.\n- When used as an output, the component only impacts the return signature of the user function.\n\nThe code snippet below is accurate in cases where the component is used as both an input and an output.\n\n- **As output:** Is passed, passes the uploaded image as a `numpy.array`, `PIL.Image` or `str` filepath depending on `type`. For SVGs, the `type` parameter is ignored and the filepath of the SVG is returned.\n\n\n ```python\n def predict(\n value: PromptValue | None\n ) -> PromptValue:\n return value\n ```\n \n",
"bugtrack_url": null,
"license": null,
"summary": "A gradio component to upload images and process point/box prompts with more visible boxes.",
"version": "0.1.0",
"project_urls": null,
"split_keywords": [
"gradio-custom-component",
" gradio-template-image"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "7a521a50dd52f6ddca98a7d51a989aa8d9346380b97974a329ffc43f4ee75a68",
"md5": "8c7b8ccb3e1973115905fcb34d79ee15",
"sha256": "d3c4d956ec762d361cfd588239197f12b391cdd0eda327031fc374cae2b44756"
},
"downloads": -1,
"filename": "gradio_image_prompter_visible_box-0.1.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "8c7b8ccb3e1973115905fcb34d79ee15",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 7582,
"upload_time": "2024-07-06T18:40:59",
"upload_time_iso_8601": "2024-07-06T18:40:59.839954Z",
"url": "https://files.pythonhosted.org/packages/7a/52/1a50dd52f6ddca98a7d51a989aa8d9346380b97974a329ffc43f4ee75a68/gradio_image_prompter_visible_box-0.1.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "8932324a25c6f4171f5d627b378925271a777645e6e8da71e768f9b97d062fe0",
"md5": "21a664597681df1d277ac08d785e31c8",
"sha256": "a4cda0e43908662ac2a0ce9a04804945e22c66c197cd0406d21cb43e8c99115f"
},
"downloads": -1,
"filename": "gradio_image_prompter_visible_box-0.1.0.tar.gz",
"has_sig": false,
"md5_digest": "21a664597681df1d277ac08d785e31c8",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 125276,
"upload_time": "2024-07-06T18:41:02",
"upload_time_iso_8601": "2024-07-06T18:41:02.070488Z",
"url": "https://files.pythonhosted.org/packages/89/32/324a25c6f4171f5d627b378925271a777645e6e8da71e768f9b97d062fe0/gradio_image_prompter_visible_box-0.1.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-07-06 18:41:02",
"github": false,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"lcname": "gradio-image-prompter-visible-box"
}
JSON