mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-02-23 11:39:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

1711 image upload (#2410)

Browse Source
This commit is contained in:
pngwn 2022-10-07 19:21:21 +01:00 committed by GitHub
parent 8f43b6218b
commit 996cd8b814
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 114 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -5,7 +5,8 @@
* Ensure that Gradio does not take control of the HTML page title when embedding a gradio app as a web component, this behaviour flipped by adding `control_page_title="true"` to the webcomponent. [@pngwn](https://github.com/pngwn) in [PR 2400](https://github.com/gradio-app/gradio/pull/2400)
## New Features:
No changes to highlight.
* When an `Image` component is set to `source="upload"`, it is now possible to drag and drop and image to replace a previously uploaded image by [@pngwn](https://github.com/pngwn) in [PR 1711](https://github.com/gradio-app/gradio/issues/1711)
## Bug Fixes:
No changes to highlight.
@ -22,6 +23,7 @@ No changes to highlight.
## Full Changelog:
* Speeds up Gallery component by using temporary files instead of base64 representation in the front-end by [@proxyphi](https://github.com/proxyphi), [@pngwn](https://github.com/pngwn), and [@abidlabs](https://github.com/abidlabs) in [PR 2265](https://github.com/gradio-app/gradio/pull/2265)
* Fixed some embedded demos in the guides by not loading the gradio web component in some guides by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2403](https://github.com/gradio-app/gradio/pull/2403)
* When an `Image` component is set to `source="upload"`, it is now possible to drag and drop and image to replace a previously uploaded image by [@pngwn](https://github.com/pngwn) in [PR 2400](https://github.com/gradio-app/gradio/pull/2410)
## Contributors Shoutout:
No changes to highlight.

96
ui/packages/image/src/Image.svelte
View File

@ -164,7 +164,86 @@
bind:offsetHeight={max_height}
bind:offsetWidth={max_width}
>
{#if source === "canvas"}
{#if source === "upload"}
<Upload
bind:dragging
filetype="image/x-png,image/gif,image/jpeg"
on:load={handle_upload}
include_file_metadata={false}
disable_click={!!value}
>
{#if (value === null && !static_image) || streaming}
<div class="flex flex-col">
{drop_text}
<span class="text-gray-300">- {or_text} -</span>
{upload_text}
</div>
{:else if tool === "select"}
<Cropper image={value} on:crop={handle_save} />
<ModifyUpload on:clear={(e) => (handle_clear(e), (tool = "editor"))} />
{:else if tool === "editor"}
<ModifyUpload
on:edit={() => (tool = "select")}
on:clear={handle_clear}
editable
/>
<img
class="w-full h-full object-contain"
src={value}
alt=""
class:scale-x-[-1]={source === "webcam" && mirror_webcam}
/>
{:else if (tool === "sketch" || tool === "color-sketch") && (value !== null || static_image)}
{#key static_image}
<img
bind:this={value_img}
class="absolute w-full h-full object-contain"
src={static_image || value?.image || value}
alt=""
on:load={handle_image_load}
class:scale-x-[-1]={source === "webcam" && mirror_webcam}
/>
{/key}
{#if img_width > 0}
<Sketch
{value}
bind:this={sketch}
bind:brush_radius
bind:brush_color
on:change={handle_save}
{mode}
width={img_width || max_width}
height={img_height || max_height}
container_height={container_height || max_height}
{value_img}
{source}
/>
<ModifySketch
on:undo={() => sketch.undo()}
on:clear={handle_mask_clear}
/>
{#if tool === "color-sketch" || tool === "sketch"}
<SketchSettings
bind:brush_radius
bind:brush_color
container_height={container_height || max_height}
img_width={img_width || max_width}
img_height={img_height || max_height}
{mode}
/>
{/if}
{/if}
{:else}
<img
class="w-full h-full object-contain"
src={value.image || value}
alt=""
class:scale-x-[-1]={source === "webcam" && mirror_webcam}
/>
{/if}
</Upload>
{:else if source === "canvas"}
<ModifySketch
on:undo={() => sketch.undo()}
on:clear={() => sketch.clear()}
@ -190,20 +269,7 @@
container_height={container_height || max_height}
/>
{:else if (value === null && !static_image) || streaming}
{#if source === "upload"}
<Upload
bind:dragging
filetype="image/x-png,image/gif,image/jpeg"
on:load={handle_upload}
include_file_metadata={false}
>
<div class="flex flex-col">
{drop_text}
<span class="text-gray-300">- {or_text} -</span>
{upload_text}
</div>
</Upload>
{:else if source === "webcam" && !static_image}
{#if source === "webcam" && !static_image}
<Webcam
on:capture={(e) =>
tool === "color-sketch" ? handle_upload(e) : handle_save(e, true)}

28
ui/packages/image/src/Sketch.svelte
View File

@ -28,6 +28,33 @@
$: mounted && !value && clear();
let last_value_img;
$: {
if (mounted && value_img !== last_value_img) {
last_value_img = value_img;
clear();
setTimeout(() => {
if (source === "webcam") {
ctx.temp.save();
ctx.temp.translate(width, 0);
ctx.temp.scale(-1, 1);
ctx.temp.drawImage(value_img, 0, 0);
ctx.temp.restore();
} else {
ctx.temp.drawImage(value_img, 0, 0);
}
ctx.drawing.drawImage(canvas.temp, 0, 0, width, height);
draw_lines({ lines: lines.slice() });
trigger_on_change();
}, 50);
}
}
function mid_point(p1, p2) {
return {
x: p1.x + (p2.x - p1.x) / 2,
@ -530,6 +557,7 @@
on:touchmove={name === "interface" ? handle_draw_move : undefined}
on:touchend={name === "interface" ? handle_draw_end : undefined}
on:touchcancel={name === "interface" ? handle_draw_end : undefined}
on:click|stopPropagation
/>
{/each}
</div>

2
ui/packages/upload/src/Upload.svelte
View File

@ -10,6 +10,7 @@
export let center: boolean = true;
export let flex: boolean = true;
export let file_count: string = "single";
export let disable_click = false;
let hidden_upload: HTMLInputElement;
@ -21,6 +22,7 @@
const openFileUpload = () => {
if (!click) return;
if (disable_click) return;
hidden_upload.click();
};