Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Fix + tests * Rest of code lol * add changeset * lint * lint + comments * bind to upload * add changeset * Update breezy-foxes-search.md --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
- Loading branch information
1 parent
d92de49
commit 2f805a7
Showing
12 changed files
with
136 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
--- | ||
"@gradio/image": patch | ||
"@gradio/upload": patch | ||
"gradio": patch | ||
--- | ||
|
||
fix:Small but important bugfixes for gr.Image: The upload event was not triggering at all. The paste-from-clipboard was not triggering an upload event. The clear button was not triggering a change event. The change event was triggering infinitely. Uploaded images were not preserving their original names. Uploading a new image should clear out the previous image. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_component_events"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", " with gr.Row():\n", " with gr.Column():\n", " input_img = gr.Image(type=\"filepath\", label=\"Input Image\", sources=[\"upload\", \"clipboard\"])\n", " with gr.Column():\n", " output_img = gr.Image(type=\"filepath\", label=\"Output Image\", sources=[\"upload\", \"clipboard\"])\n", " with gr.Column():\n", " num_change = gr.Number(label=\"# Change Events\", value=0)\n", " num_load = gr.Number(label=\"# Upload Events\", value=0)\n", " num_change_o = gr.Number(label=\"# Change Events Output\", value=0)\n", " num_clear = gr.Number(label=\"# Clear Events\", value=0)\n", " input_img.upload(lambda s, n: (s, n + 1), [input_img, num_load], [output_img, num_load])\n", " input_img.change(lambda n: n + 1, num_change, num_change)\n", " input_img.clear(lambda n: n + 1, num_clear, num_clear)\n", " output_img.change(lambda n: n + 1, num_change_o, num_change_o)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import gradio as gr | ||
|
||
with gr.Blocks() as demo: | ||
with gr.Row(): | ||
with gr.Column(): | ||
input_img = gr.Image(type="filepath", label="Input Image", sources=["upload", "clipboard"]) | ||
with gr.Column(): | ||
output_img = gr.Image(type="filepath", label="Output Image", sources=["upload", "clipboard"]) | ||
with gr.Column(): | ||
num_change = gr.Number(label="# Change Events", value=0) | ||
num_load = gr.Number(label="# Upload Events", value=0) | ||
num_change_o = gr.Number(label="# Change Events Output", value=0) | ||
num_clear = gr.Number(label="# Clear Events", value=0) | ||
input_img.upload(lambda s, n: (s, n + 1), [input_img, num_load], [output_img, num_load]) | ||
input_img.change(lambda n: n + 1, num_change, num_change) | ||
input_img.clear(lambda n: n + 1, num_clear, num_clear) | ||
output_img.change(lambda n: n + 1, num_change_o, num_change_o) | ||
|
||
if __name__ == "__main__": | ||
demo.launch() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import { test, expect, drag_and_drop_file } from "@gradio/tootils"; | ||
import fs from "fs"; | ||
|
||
test("Image click-to-upload uploads image successfuly. Clear button dispatches event correctly. Downloading the file works and has the correct name.", async ({ | ||
page | ||
}) => { | ||
await page.getByRole("button", { name: "Drop Image Here" }).click(); | ||
const uploader = await page.locator("input[type=file]"); | ||
await Promise.all([ | ||
uploader.setInputFiles(["./test/files/cheetah1.jpg"]), | ||
page.waitForResponse("**/upload?*?*") | ||
]); | ||
|
||
await expect(page.getByLabel("# Change Events").first()).toHaveValue("1"); | ||
await expect(await page.getByLabel("# Upload Events")).toHaveValue("1"); | ||
await expect(await page.getByLabel("# Change Events Output")).toHaveValue( | ||
"1" | ||
); | ||
|
||
const downloadPromise = page.waitForEvent("download"); | ||
await page.getByLabel("Download").click(); | ||
const download = await downloadPromise; | ||
// Automatically convert to png in the backend since PIL is very picky | ||
await expect(download.suggestedFilename()).toBe("cheetah1.png"); | ||
|
||
await page.getByLabel("Remove Image").click(); | ||
await expect(page.getByLabel("# Clear Events")).toHaveValue("1"); | ||
await expect(page.getByLabel("# Change Events").first()).toHaveValue("2"); | ||
}); | ||
|
||
test("Image drag-to-upload uploads image successfuly.", async ({ page }) => { | ||
await drag_and_drop_file( | ||
page, | ||
"input[type=file]", | ||
"./test/files/cheetah1.jpg", | ||
"cheetag1.jpg", | ||
"image/*" | ||
); | ||
await page.waitForResponse("**/upload?*"); | ||
await expect(page.getByLabel("# Change Events").first()).toHaveValue("1"); | ||
await expect(page.getByLabel("# Upload Events")).toHaveValue("1"); | ||
}); | ||
|
||
test("Image copy from clipboard dispatches upload event.", async ({ page }) => { | ||
// Need to make request from inside browser for blob to be formatted correctly | ||
// tried lots of different things | ||
await page.evaluate(async () => { | ||
const blob = await ( | ||
await fetch( | ||
`https://gradio-builds.s3.amazonaws.com/assets/PDFDisplay.png` | ||
) | ||
).blob(); | ||
navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]); | ||
}); | ||
|
||
await page.pause(); | ||
await page.getByLabel("clipboard-image-toolbar-btn").click(); | ||
await page.pause(); | ||
await expect(page.getByLabel("# Change Events").first()).toHaveValue("1"); | ||
await expect(page.getByLabel("# Upload Events")).toHaveValue("1"); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters