web: remove the early prototype of cutout functionality

at the time of this commit, there are no models that are good enough and can run in a web browser. this feature might come back when web onnx gets support for beefier models.

web/i18n/en/tabs.json

@@ -4,6 +4,5 @@
     "updates": "updates",
     "donate": "donate",
     "about": "about",
-    "remux": "remux",
-    "cutout": "cut out"
+    "remux": "remux"
 }

web/package.json

@@ -28,7 +28,6 @@
         "@fontsource-variable/noto-sans-mono": "^5.0.20",
         "@fontsource/ibm-plex-mono": "^5.0.13",
         "@fontsource/redaction-10": "^5.0.2",
-        "@huggingface/transformers": "^3.2.4",
         "@imput/libav.js-remux-cli": "^6.5.7",
         "@imput/version-info": "workspace:^",
         "@sveltejs/adapter-static": "^3.0.6",

web/src/components/sidebar/Sidebar.svelte

@@ -14,8 +14,6 @@
     import IconHeart from "@tabler/icons-svelte/IconHeart.svelte";
     import IconInfoCircle from "@tabler/icons-svelte/IconInfoCircle.svelte";
 
-    import IconCut from "@tabler/icons-svelte/IconCut.svelte";
-
     let screenWidth: number;
     let settingsLink = defaultNavPage("settings");
     let aboutLink = defaultNavPage("about");
@@ -33,7 +31,6 @@
         <div id="sidebar-actions" class="sidebar-inner-container">
             <SidebarTab name="save" path="/" icon={IconDownload} />
             <SidebarTab name="remux" path="/remux" icon={IconRepeat} beta />
-            <SidebarTab name="cutout" path="/cutout" icon={IconCut} beta />
         </div>
         <div id="sidebar-info" class="sidebar-inner-container">
             <SidebarTab name="settings" path={settingsLink} icon={IconSettings} />

web/src/components/sidebar/SidebarTab.svelte

@@ -9,7 +9,7 @@
 
     export let beta = false;
 
-    const firstTabPage = ["save", "cutout", "remux", "settings"];
+    const firstTabPage = ["save", "remux", "settings"];
 
     let tab: HTMLElement;
 

web/src/lib/workers/removebg.ts

@@ -1,70 +0,0 @@
-import { AutoModel, AutoProcessor, RawImage } from "@huggingface/transformers";
-
-const models = {
-    light: {
-        id: "briaai/RMBG-1.4",
-        input: "input",
-    },
-    heavy: {
-        id: "onnx-community/BiRefNet_lite",
-        input: "input_image",
-    }
-}
-
-export const maskImage = (image: RawImage, mask: RawImage) => {
-    const canvas = new OffscreenCanvas(image.width, image.height);
-    const ctx = canvas.getContext('2d');
-
-    if (!ctx) return;
-
-    ctx.drawImage(image.toCanvas(), 0, 0);
-
-    const pixelData = ctx.getImageData(0, 0, image.width, image.height);
-    for (let i = 0; i < mask.data.length; ++i) {
-        pixelData.data[4 * i + 3] = mask.data[i];
-    }
-    ctx.putImageData(pixelData, 0, 0);
-
-    return canvas.transferToImageBitmap();
-}
-
-const removeImageBackground = async (file: File) => {
-    const image = await RawImage.fromBlob(file);
-
-    const model_type = "light";
-    const model = await AutoModel.from_pretrained(models[model_type].id, {
-        progress_callback: (progress) => {
-            console.log(progress);
-        },
-        device: "wasm",
-        dtype: "fp32",
-    });
-
-    console.log("we're past model loading!");
-
-    const processor = await AutoProcessor.from_pretrained(models[model_type].id, {});
-
-    console.log("now also past processor!");
-
-    if (model && processor) {
-        const { pixel_values } = await processor(image);
-        console.log("got 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);
-        console.log("got the mask");
-
-        self.postMessage({
-            cobaltRemoveBgWorker: {
-                result: maskImage(image, mask),
-            }
-        });
-    }
-}
-
-self.onmessage = async (event: MessageEvent) => {
-    if (event.data.cobaltRemoveBgWorker) {
-        await removeImageBackground(event.data.cobaltRemoveBgWorker.file);
-        self.close();
-    }
-}

web/src/routes/cutout/+page.svelte

@@ -1,194 +0,0 @@
-<script lang="ts">
-    import RemoveBgWorker from "$lib/workers/removebg?worker";
-
-    import { downloadFile } from "$lib/download";
-
-    import Skeleton from "$components/misc/Skeleton.svelte";
-    import DropReceiver from "$components/misc/DropReceiver.svelte";
-    import FileReceiver from "$components/misc/FileReceiver.svelte";
-
-    let draggedOver = false;
-    let files: FileList | undefined;
-    let imageContainer: HTMLElement;
-    let canvas: HTMLCanvasElement;
-
-    let state: "empty" | "busy" | "done" = "empty";
-
-    let worker: Worker;
-
-    const renderImageToCanvas = (result: ImageBitmap) => {
-        if (canvas && result) {
-            canvas.width = result.width;
-            canvas.height = result.height;
-            canvas
-                .getContext("bitmaprenderer")
-                ?.transferFromImageBitmap(result);
-        }
-    };
-
-    const processImage = async () => {
-        if (!files) return;
-
-        state = "busy";
-        worker = new RemoveBgWorker();
-
-        worker.postMessage({
-            cobaltRemoveBgWorker: { file: files[0] },
-        });
-
-        worker.onmessage = async (event) => {
-            console.log("event received by removebg page:", event);
-            const eventData = event.data.cobaltRemoveBgWorker;
-            if (eventData.result) {
-                state = "done";
-                renderImageToCanvas(eventData.result);
-            }
-        };
-
-        worker.onerror = (e) => {
-            state = "empty";
-            console.error("bg removal worker exploded:", e);
-            worker.terminate();
-        };
-    };
-
-    const exportImage = async () => {
-        if (!files) return;
-
-        const resultBlob = await new Promise<Blob>((resolve, reject) => {
-            canvas.toBlob((blob) => {
-                if (blob) resolve(blob);
-                else reject();
-            }, "image/png");
-        });
-
-        return await downloadFile({
-            file: new File([resultBlob], `${files[0].name} (cutout).png`, {
-                type: "image/png",
-            }),
-        });
-    };
-</script>
-
-<DropReceiver bind:files bind:draggedOver id="cutout-container">
-    {#if state === "empty"}
-        <FileReceiver
-            bind:draggedOver
-            bind:files
-            acceptTypes={["image/*"]}
-            acceptExtensions={["jpg", "png", "webp"]}
-        />
-        {#if files}
-            <div class="button-row">
-                <button on:click={processImage}>process files</button>
-                <button
-                    on:click={() => {
-                        files = undefined;
-                    }}
-                >
-                    clear imported files
-                </button>
-            </div>
-        {/if}
-        <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.
-        </div>
-    {/if}
-
-    {#if state === "busy"}
-        <div>thinking very hard rn...</div>
-    {/if}
-
-    {#if state === "done"}
-        <div>thought a lot, here's what i got:</div>
-    {/if}
-
-    {#if ["busy", "done"].includes(state)}
-        <div id="image-preview" bind:this={imageContainer} class={state}>
-            {#if state === "busy"}
-                <Skeleton width="100%" height="100%" class="big" />
-            {/if}
-            <canvas bind:this={canvas}></canvas>
-        </div>
-    {/if}
-
-    {#if state === "busy"}
-        <div class="button-row">
-            <button
-                on:click={() => {
-                    worker?.terminate();
-                    files = undefined;
-                    state = "empty";
-                }}
-            >
-                cancel
-            </button>
-        </div>
-    {/if}
-
-    {#if state === "done"}
-        <div class="button-row">
-            <button
-                on:click={() => {
-                    state = "empty";
-                    files = undefined;
-                }}
-            >
-                start over
-            </button>
-            <button on:click={exportImage}>save the result</button>
-        </div>
-    {/if}
-</DropReceiver>
-
-<style>
-    :global(#cutout-container) {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        width: 100%;
-        gap: 18px;
-    }
-
-    .early-note {
-        max-width: 400px;
-        text-align: center;
-    }
-
-    #image-preview {
-        background: var(--button);
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        width: 720px;
-        height: 480px;
-        overflow: hidden;
-        border-radius: var(--border-radius);
-        box-shadow: var(--button-box-shadow);
-    }
-
-    #image-preview canvas {
-        display: none;
-    }
-
-    #image-preview.done canvas {
-        display: block;
-    }
-
-    .button-row {
-        display: flex;
-        flex-direction: row;
-        gap: 6px;
-    }
-
-    button {
-        padding: 12px 24px;
-        border-radius: 200px;
-    }
-
-    :global(canvas) {
-        height: 100%;
-    }
-</style>

web/src/routes/cutout/+page.ts

@@ -1 +0,0 @@
-export const ssr = false;

web/vite.config.ts

@@ -89,9 +89,6 @@ export default defineConfig({
         rollupOptions: {
             output: {
                 manualChunks: (id) => {
-                    if (id.includes('huggingface/transformers'))
-                        return 'hf_transformers';
-
                     if (id.includes('/web/i18n') && id.endsWith('.json')) {
                         const lang = id.split('/web/i18n/')?.[1].split('/')?.[0];
                         if (lang) {