feat: initial tools service with document scanner, image & PDF tools

Self-hosted document scanner and media processing tools. - Rust Axum gateway + worker pool with NATS JetStream - Next.js 16 frontend with shadcn/ui - Scanner pipeline: edge detection, warp, binarization, OCR - Image tools: compress, resize, convert - PDF tools: merge, split, compress - CI/CD with Docker multi-stage build Co-Authored-By: Kilo <kilo@kilo.ai>
2026-07-24 13:10:59 +07:00
commit a00ad62f6c
98 changed files with 11399 additions and 0 deletions
@@ -0,0 +1,103 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { Shrink } from "lucide-react";
+import { ToolLayout } from "@/components/tools/tool-layout";
+import { UploadZone } from "@/components/tools/upload-zone";
+import { useUpload } from "@/hooks/use-upload";
+import { useJobStatus } from "@/hooks/use-job-status";
+import { ProgressBar } from "@/components/tools/progress-bar";
+import { ResultPreview } from "@/components/tools/result-preview";
+
+type PageState = "upload" | "processing" | "result" | "error";
+
+export default function ImageRemoveBgPage() {
+  const [pageState, setPageState] = useState<PageState>("upload");
+  const [jobId, setJobId] = useState<string | null>(null);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+
+  const { upload } = useUpload({
+    tool: "image-remove-bg",
+    options: { quality: 80 },
+  });
+
+  const handleComplete = useCallback(() => setPageState("result"), []);
+  const handleError = useCallback(
+    (err: string) => {
+      setErrorMsg(err);
+      setPageState("error");
+    },
+    [],
+  );
+
+  const { progress, stage, message, status, result } = useJobStatus(jobId, {
+    onComplete: handleComplete,
+    onError: handleError,
+  });
+
+  const handleUpload = useCallback(
+    async (file: File) => {
+      setErrorMsg(null);
+      const res = await upload(file);
+      if (res) {
+        setJobId(res.job_id);
+        setPageState("processing");
+      }
+    },
+    [upload],
+  );
+
+  const handleRetry = useCallback(() => {
+    setPageState("upload");
+    setJobId(null);
+    setErrorMsg(null);
+  }, []);
+
+  return (
+    <ToolLayout
+      title="Remove Background"
+      description="Hapus latar belakang"
+      icon={Shrink}
+      phase={2}
+    >
+      {pageState === "upload" && (
+        <UploadZone
+          accept="image/*"
+          tool="image-remove-bg"
+          onUpload={handleUpload}
+        />
+      )}
+
+      {pageState === "processing" && jobId && (
+        <ProgressBar
+          progress={progress}
+          stage={stage}
+          message={message}
+          status={status}
+          onRetry={handleRetry}
+        />
+      )}
+
+      {pageState === "result" && result && (
+        <ResultPreview
+          result={result}
+          onProcessAnother={handleRetry}
+        />
+      )}
+
+      {pageState === "error" && (
+        <div className="p-6 rounded-xl border border-destructive/20 bg-destructive/5 text-center">
+          <p className="text-destructive font-medium mb-4">
+            {errorMsg || "Terjadi kesalahan"}
+          </p>
+          <button
+            onClick={handleRetry}
+            className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:opacity-90"
+          >
+            Coba Lagi
+          </button>
+        </div>
+      )}
+    </ToolLayout>
+  );
+}