Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-02-02 08:26:22 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/cutout: add a button to cancel the job

Browse source
This commit is contained in:
wukko 2025-01-15 23:14:29 +06:00
parent 0e26424355
commit f544768784
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 36 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
web/src/lib/workers/removebg.ts
View file

@ -38,6 +38,9 @@ const removeImageBackground = async (file: File) => {
const model_type = "light"; const model_type = "light";
const model = await AutoModel.from_pretrained(models[model_type].id, { const model = await AutoModel.from_pretrained(models[model_type].id, {
progress_callback: (progress) => {
console.log(progress);
},
device: "wasm", device: "wasm",
dtype: "fp32", dtype: "fp32",
}); });

39
web/src/routes/cutout/+page.svelte
View file

@ -19,13 +19,15 @@
let state: "empty" | "busy" | "done" = "empty"; let state: "empty" | "busy" | "done" = "empty";
const worker = new RemoveBgWorker(); let worker: Worker;
const processImage = async () => { const processImage = async () => {
if (!file) return; if (!file) return;
state = "busy"; state = "busy";
worker = new RemoveBgWorker();
worker.postMessage({ file }); worker.postMessage({ file });
worker.onmessage = async (event) => { worker.onmessage = async (event) => {
const maskedCanvas = await maskImage(event.data.source, event.data.mask); const maskedCanvas = await maskImage(event.data.source, event.data.mask);
@ -39,6 +41,8 @@
result = maskedCanvas; result = maskedCanvas;
imageContainer.append(maskedCanvas); imageContainer.append(maskedCanvas);
worker.terminate();
}; };
worker.onerror = (e) => { worker.onerror = (e) => {
@ -73,12 +77,21 @@
acceptTypes={["image/*"]} acceptTypes={["image/*"]}
acceptExtensions={["jpg", "png", "webp"]} acceptExtensions={["jpg", "png", "webp"]}
/> />
{#if file}
<div class="button-row">
<button on:click={processImage}>process files</button>
<button
on:click={() => {
file = undefined;
}}
>
clear imported files
</button>
</div>
{/if}
<div class="subtext early-note"> <div class="subtext early-note">
this is a very early & basic proof-of-concept, nothing about this feature is final or complete. please don't share or talk about it. this is a very early & basic proof-of-concept, nothing about this feature is final or complete. please don't share or talk about it.
</div> </div>
{#if file}
<button on:click={processImage}>process imported stuff</button>
{/if}
{/if} {/if}
{#if state === "busy"} {#if state === "busy"}
@ -97,8 +110,22 @@
</div> </div>
{/if} {/if}
{#if state === "busy"}
<div class="button-row">
<button
on:click={() => {
worker?.terminate();
file = undefined;
state = "empty";
}}
>
cancel
</button>
</div>
{/if}
{#if state === "done"} {#if state === "done"}
<div id="finished-actions"> <div class="button-row">
<button <button
on:click={() => { on:click={() => {
state = "empty" state = "empty"
@ -140,7 +167,7 @@
box-shadow: var(--button-box-shadow); box-shadow: var(--button-box-shadow);
} }
#finished-actions { .button-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 6px; gap: 6px;