feat: add utility tools (image info, compare, duplicates, color palette, QR, barcode)

Add 6 utility tools with API routes and frontend settings: - info: read-only image metadata inspector with channel histogram - compare: side-by-side pixel diff with similarity percentage - find-duplicates: dHash perceptual hashing for duplicate detection - color-palette: frequency-based dominant color extraction - qr-generate: QR code generator from text/URL (custom JSON route) - barcode-read: QR code reader using jsQR
2026-08-03 07:46:42 +02:00 · 2026-03-22 04:20:35 +08:00
parent aeaf783ee4
commit 0c3c64eeac
12 changed files with 1253 additions and 0 deletions
@@ -0,0 +1,106 @@
+import { useState, useRef } from "react";
+import { useFileStore } from "@/stores/file-store";
+import { Download, Loader2, Upload } from "lucide-react";
+
+function getToken(): string {
+  return localStorage.getItem("stirling-token") || "";
+}
+
+export function CompareSettings() {
+  const { files, processing, error, setProcessing, setError, setProcessedUrl } = useFileStore();
+  const [secondFile, setSecondFile] = useState<File | null>(null);
+  const [similarity, setSimilarity] = useState<number | null>(null);
+  const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
+  const secondInputRef = useRef<HTMLInputElement>(null);
+
+  const handleProcess = async () => {
+    if (files.length === 0 || !secondFile) return;
+
+    setProcessing(true);
+    setError(null);
+    setDownloadUrl(null);
+    setSimilarity(null);
+
+    try {
+      const formData = new FormData();
+      formData.append("file", files[0]);
+      formData.append("file", secondFile);
+
+      const res = await fetch("/api/v1/tools/compare", {
+        method: "POST",
+        headers: { Authorization: `Bearer ${getToken()}` },
+        body: formData,
+      });
+
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body.error || `Failed: ${res.status}`);
+      }
+
+      const result = await res.json();
+      setSimilarity(result.similarity);
+      setDownloadUrl(result.downloadUrl);
+      setProcessedUrl(result.downloadUrl);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Comparison failed");
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const hasFile = files.length > 0;
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="text-xs text-muted-foreground">Second Image</label>
+        <input
+          ref={secondInputRef}
+          type="file"
+          accept="image/*"
+          onChange={(e) => setSecondFile(e.target.files?.[0] ?? null)}
+          className="hidden"
+        />
+        <button
+          onClick={() => secondInputRef.current?.click()}
+          className="w-full mt-0.5 px-2 py-2 rounded border border-dashed border-border bg-background text-sm text-muted-foreground hover:text-foreground flex items-center justify-center gap-2"
+        >
+          <Upload className="h-4 w-4" />
+          {secondFile ? secondFile.name : "Choose second image"}
+        </button>
+      </div>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {similarity !== null && (
+        <div className="p-3 rounded-lg bg-muted">
+          <p className="text-sm text-foreground font-medium">
+            Similarity: {similarity.toFixed(1)}%
+          </p>
+          <div className="mt-1 h-2 bg-background rounded-full overflow-hidden">
+            <div
+              className="h-full rounded-full bg-primary"
+              style={{ width: `${similarity}%` }}
+            />
+          </div>
+        </div>
+      )}
+
+      <button
+        onClick={handleProcess}
+        disabled={!hasFile || !secondFile || processing}
+        className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+      >
+        {processing && <Loader2 className="h-4 w-4 animate-spin" />}
+        {processing ? "Comparing..." : "Compare"}
+      </button>
+
+      {downloadUrl && (
+        <a href={downloadUrl} download className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5">
+          <Download className="h-4 w-4" />
+          Download Diff Image
+        </a>
+      )}
+    </div>
+  );
+}