progress bar format and lint

Author: Zizico2

next.config.ts

@@ -3,6 +3,23 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   /* config options here */
   reactCompiler: true,
+  async headers() {
+    return [
+      {
+        source: "/(.*)",
+        headers: [
+          {
+            key: "Cross-Origin-Opener-Policy",
+            value: "same-origin",
+          },
+          {
+            key: "Cross-Origin-Embedder-Policy",
+            value: "require-corp",
+          },
+        ],
+      },
+    ];
+  },
 };
 
 export default nextConfig;

src/components/BackgroundRemoverApp.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@cloudflare/kumo/components/button";
+import { Meter } from "@cloudflare/kumo/components/meter";
 import { cva } from "class-variance-authority";
 import Image from "next/image";
 import { useState } from "react";
@@ -23,15 +24,6 @@ const previewContainerStyles = cva([
   "bg-[repeating-conic-gradient(#80808020_0%_25%,transparent_0%_50%)]",
   "bg-size-[20px_20px]",
 ]);
-const progressBarContainerStyles = cva([
-  "w-full bg-(--surface-tint) rounded-full h-2 mb-2",
-]);
-const progressBarStyles = cva([
-  "bg-(--accent) h-2 rounded-full transition-[width] duration-300",
-]);
-const progressTextStyles = cva([
-  "text-[0.85rem] text-(--foreground-muted) text-center",
-]);
 
 export default function BackgroundRemoverApp() {
   const [imageData, setImageData] = useState<ImageData | null>(null);
@@ -71,6 +63,8 @@ export default function BackgroundRemoverApp() {
       const { removeBackground } = await import("@imgly/background-removal");
 
       const blob = await removeBackground(imageData.src, {
+        model: "isnet",
+        device: "gpu",
         progress: (key, current, total) => {
           setProgress({ key, current, total });
         },
@@ -150,15 +144,14 @@ export default function BackgroundRemoverApp() {
 
       {isProcessing && progress && (
         <div className="mb-4">
-          <div className={progressBarContainerStyles()}>
-            <div
-              className={progressBarStyles()}
-              style={{ width: `${progressPercent}%` }}
-            />
-          </div>
-          <p className={progressTextStyles()}>
-            {progress.key} — {progressPercent}%
-          </p>
+          <Meter
+            label={
+              progress.key.includes("fetch")
+                ? "Fetching model…"
+                : "Removing background…"
+            }
+            value={progressPercent}
+          />
         </div>
       )}