File size: 1,981 Bytes
29580f3 df4085a 29580f3 07b52cf 29580f3 07b52cf 29580f3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<script lang="ts">
import { resolve_wasm_src } from "@gradio/wasm/svelte";
import type { HTMLImgAttributes } from "svelte/elements";
import { createEventDispatcher } from "svelte";
import Canvas from "./Canvas.svelte"
import AnnotatedImageData from "./AnnotatedImageData";
interface Props extends HTMLImgAttributes {
"data-testid"?: string;
}
export let src: HTMLImgAttributes["src"] = undefined;
export let interactive: boolean;
export let boxesAlpha: number;
export let labelList: string[];
export let labelColors: string[];
export let boxMinSize: number;
export let handleSize: number;
export let boxThickness: number;
export let boxSelectedThickness: number;
export let value: null | AnnotatedImageData;
export let disableEditBoxes: boolean;
let resolved_src: typeof src;
// The `src` prop can be updated before the Promise from `resolve_wasm_src` is resolved.
// In such a case, the resolved value for the old `src` has to be discarded,
// This variable `latest_src` is used to pick up only the value resolved for the latest `src` prop.
let latest_src: typeof src;
$: {
// In normal (non-Wasm) Gradio, the `<img>` element should be rendered with the passed `src` props immediately
// without waiting for `resolve_wasm_src()` to resolve.
// If it waits, a blank image is displayed until the async task finishes
// and it leads to undesirable flickering.
// So set `src` to `resolved_src` here.
resolved_src = src;
latest_src = src;
const resolving_src = src;
resolve_wasm_src(resolving_src).then((s) => {
if (latest_src === resolving_src) {
resolved_src = s;
}
});
}
const dispatch = createEventDispatcher<{
change: undefined;
}>();
</script>
<Canvas
bind:value
on:change={() => dispatch("change")}
{interactive}
boxAlpha={boxesAlpha}
choices={labelList}
choicesColors={labelColors}
{boxMinSize}
{handleSize}
{boxThickness}
{boxSelectedThickness}
{disableEditBoxes}
imageUrl={resolved_src}
/>
|