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

web/removebg: differentiate messaging even more, add temporary logging

Browse source
This commit is contained in:
wukko 2025-01-17 01:45:11 +06:00
parent cc3e3be118
commit b85771dc1d
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 26 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -40,24 +40,31 @@ const removeImageBackground = async (file: File) => {
dtype: "fp32", dtype: "fp32",
}); });
console.log("we're past model loading!");
const processor = await AutoProcessor.from_pretrained(models[model_type].id, {}); const processor = await AutoProcessor.from_pretrained(models[model_type].id, {});
console.log("now also past processor!");
if (model && processor) { if (model && processor) {
const { pixel_values } = await processor(image); const { pixel_values } = await processor(image);
console.log("got pixel values");
const { output } = await model({ [models[model_type].input]: pixel_values }); const { output } = await model({ [models[model_type].input]: pixel_values });
console.log("got output");
const mask = await RawImage.fromTensor(output[0].mul(255).to('uint8')).resize(image.width, image.height); const mask = await RawImage.fromTensor(output[0].mul(255).to('uint8')).resize(image.width, image.height);
console.log("got the mask");
self.postMessage({ self.postMessage({
cobaltRemoveBgWorker: { cobaltRemoveBgWorker: {
result: maskImage(image, mask), result: maskImage(image, mask),
} }
}); });
} }
} }
self.onmessage = async (event: MessageEvent) => { self.onmessage = async (event: MessageEvent) => {
if (event.data.file) { if (event.data.cobaltRemoveBgWorker.file) {
await removeImageBackground(event.data.file); await removeImageBackground(event.data.cobaltRemoveBgWorker.file);
self.close();
} }
self.close();
} }

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import settings from "$lib/state/settings"; import settings from "$lib/state/settings";
import RemoveBgWorker from '$lib/workers/removebg?worker'; import RemoveBgWorker from "$lib/workers/removebg?worker";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
@ -23,9 +23,11 @@
if (canvas && result) { if (canvas && result) {
canvas.width = result.width; canvas.width = result.width;
canvas.height = result.height; canvas.height = result.height;
canvas.getContext('bitmaprenderer')?.transferFromImageBitmap(result); canvas
.getContext("bitmaprenderer")
?.transferFromImageBitmap(result);
} }
} };
const processImage = async () => { const processImage = async () => {
if (!file) return; if (!file) return;
@ -33,9 +35,12 @@
state = "busy"; state = "busy";
worker = new RemoveBgWorker(); worker = new RemoveBgWorker();
worker.postMessage({ file }); worker.postMessage({
cobaltRemoveBgWorker: { file },
});
worker.onmessage = async (event) => { worker.onmessage = async (event) => {
console.log("event received by removebg page:", event) console.log("event received by removebg page:", event);
const eventData = event.data.cobaltRemoveBgWorker; const eventData = event.data.cobaltRemoveBgWorker;
if (eventData.result) { if (eventData.result) {
state = "done"; state = "done";
@ -47,18 +52,18 @@
state = "empty"; state = "empty";
console.error("bg removal worker exploded:", e); console.error("bg removal worker exploded:", e);
worker.terminate(); worker.terminate();
} };
}; };
const exportImage = async () => { const exportImage = async () => {
if (!file) return; if (!file) return;
const resultBlob = await new Promise<Blob>((resolve, reject) => { const resultBlob = await new Promise<Blob>((resolve, reject) => {
canvas.toBlob(blob => { canvas.toBlob((blob) => {
if (blob) resolve(blob); if (blob) resolve(blob);
else reject(); else reject();
}, "image/png") }, "image/png");
}) });
return await downloadFile({ return await downloadFile({
file: new File([resultBlob], `${file.name} (cutout).png`, { file: new File([resultBlob], `${file.name} (cutout).png`, {
@ -134,7 +139,7 @@
<div class="button-row"> <div class="button-row">
<button <button
on:click={() => { on:click={() => {
state = "empty" state = "empty";
file = undefined; file = undefined;
}} }}
> >