Infrastructure: Implement master/dev/vX branching, save git path, and fix username casing
This commit is contained in:
Daniel Bedeleanu
281
frontend/components/AIOnboarding.tsx
Normal file
281
frontend/components/AIOnboarding.tsx
Normal file
@@ -0,0 +1,281 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useRef } from 'react';
|
||||
import { toast } from 'react-hot-toast';
|
||||
import { Camera, Check, RefreshCw, X, Image as ImageIcon, Sparkles, Hash, Layout } from 'lucide-react';
|
||||
import { inventoryApi } from '@/lib/api';
|
||||
|
||||
interface AIOnboardingProps {
|
||||
onCancel: () => void;
|
||||
onComplete: (itemData: any) => void;
|
||||
categories: any[];
|
||||
}
|
||||
|
||||
export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnboardingProps) {
|
||||
const [image, setImage] = useState<string | null>(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [extractedData, setExtractedData] = useState<any>(null);
|
||||
|
||||
const cameraInputRef = useRef<HTMLInputElement>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => setImage(reader.result as string);
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
};
|
||||
|
||||
const processImage = async () => {
|
||||
if (!image) return;
|
||||
setUploading(true);
|
||||
|
||||
try {
|
||||
const blob = await (await fetch(image)).blob();
|
||||
const formData = new FormData();
|
||||
formData.append('file', blob, 'label.jpg');
|
||||
|
||||
const data = await inventoryApi.analyzeLabel(formData);
|
||||
|
||||
if (data.error) {
|
||||
toast.error(`AI Error: ${data.error}`);
|
||||
setUploading(false); // Force stop loading state
|
||||
return;
|
||||
}
|
||||
|
||||
setExtractedData(data);
|
||||
toast.success("AI extraction complete!");
|
||||
} catch (error) {
|
||||
toast.error("Failed to process image with AI");
|
||||
console.error(error);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const confirmOnboarding = async () => {
|
||||
// Sanitize data for the backend (Pydantic validation)
|
||||
const newItem = {
|
||||
name: String(extractedData.name || "New AI Item"),
|
||||
category: String(extractedData.category || "Uncategorized"),
|
||||
type: extractedData.type ? String(extractedData.type) : null,
|
||||
part_number: extractedData.part_number ? String(extractedData.part_number) : null,
|
||||
color: extractedData.color ? String(extractedData.color) : null,
|
||||
specs: String(extractedData.specs || ""),
|
||||
barcode: String(extractedData.barcode || extractedData.part_number || extractedData.serial_number || `AI-${Date.now()}`),
|
||||
quantity: parseFloat(String(extractedData.quantity || 1)),
|
||||
min_quantity: 1.0,
|
||||
labels_data: JSON.stringify(extractedData)
|
||||
};
|
||||
onComplete(newItem);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 bg-slate-950 flex flex-col p-6 animate-in fade-in slide-in-from-bottom-5 duration-300">
|
||||
<div className="flex justify-between items-center mb-6 shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-primary/20 rounded-xl">
|
||||
<Sparkles className="text-primary w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-bold">AI Discovery</h2>
|
||||
<p className="text-[10px] text-slate-500 uppercase font-black tracking-widest">Powered by Gemini 1.5</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={onCancel} className="p-2 hover:bg-slate-900 rounded-full transition-colors">
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!image ? (
|
||||
<div className="flex-1 flex flex-col gap-6 min-h-0">
|
||||
<div className="flex-1 flex flex-col items-center justify-center border-2 border-dashed border-slate-800 rounded-[2.5rem] bg-slate-900/30 overflow-hidden px-4">
|
||||
<div className="w-20 h-20 bg-slate-900 rounded-3xl flex items-center justify-center mb-6 shadow-inner">
|
||||
<Camera size={32} className="text-slate-500" />
|
||||
</div>
|
||||
<p className="text-slate-300 mb-2 text-center font-bold">Label Insight Mode</p>
|
||||
<p className="text-[11px] text-slate-500 px-8 text-center uppercase tracking-widest leading-relaxed">
|
||||
Scan or upload a sharp photo of the item specifications
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 h-28 shrink-0">
|
||||
<button
|
||||
onClick={() => cameraInputRef.current?.click()}
|
||||
className="flex flex-col items-center justify-center gap-2 bg-primary text-white rounded-3xl font-bold shadow-2xl shadow-primary/20 active:scale-95 transition-all"
|
||||
>
|
||||
<Camera size={24} />
|
||||
<span className="text-sm">Scan Camera</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="flex flex-col items-center justify-center gap-2 bg-slate-900 text-slate-200 border border-slate-800 rounded-3xl font-bold active:scale-95 transition-all"
|
||||
>
|
||||
<ImageIcon size={24} />
|
||||
<span className="text-sm">Upload Photo</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<input type="file" ref={cameraInputRef} onChange={handleFileChange} accept="image/*" capture="environment" className="hidden" />
|
||||
<input type="file" ref={fileInputRef} onChange={handleFileChange} accept="image/*" className="hidden" />
|
||||
</div>
|
||||
) : !extractedData ? (
|
||||
<div className="flex-1 flex flex-col gap-6 min-h-0 overflow-hidden">
|
||||
<div className="relative flex-1 min-h-0 rounded-[2.5rem] overflow-hidden border-4 border-slate-900 shadow-2xl bg-slate-900">
|
||||
<img src={image} className="w-full h-full object-contain" alt="Captured label" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
|
||||
|
||||
{uploading && (
|
||||
<div className="absolute inset-0 bg-slate-950/60 backdrop-blur-sm flex flex-col items-center justify-center gap-4 z-10 transition-all">
|
||||
<div className="relative">
|
||||
<RefreshCw className="w-12 h-12 text-primary animate-spin" />
|
||||
<Sparkles className="absolute -top-2 -right-2 text-amber-400 w-6 h-6 animate-pulse" />
|
||||
</div>
|
||||
<p className="text-white font-black tracking-tight uppercase text-xs">Gemini is processing...</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 shrink-0 pb-2">
|
||||
<button
|
||||
onClick={() => setImage(null)}
|
||||
disabled={uploading}
|
||||
className="px-6 py-4 bg-slate-900 border border-slate-800 text-slate-400 rounded-2xl font-bold transition-all active:scale-95 disabled:opacity-50"
|
||||
>
|
||||
Retake
|
||||
</button>
|
||||
<button
|
||||
onClick={processImage}
|
||||
disabled={uploading}
|
||||
className="flex-1 py-4 bg-primary text-white rounded-2xl font-black text-lg shadow-xl shadow-primary/30 flex items-center justify-center gap-3 active:scale-95 disabled:opacity-50 hover:bg-blue-500"
|
||||
>
|
||||
{uploading ? "ANALYZING..." : "EXTRACT DATA"}
|
||||
{!uploading && <Check size={20} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 flex flex-col gap-6 overflow-hidden">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] text-slate-500 font-black uppercase tracking-[0.2em]">Validation Mask</span>
|
||||
<span className="text-[10px] bg-green-500/10 text-green-400 px-2 py-0.5 rounded-full font-bold">AI READY</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto space-y-4 pr-1 scrollbar-hide">
|
||||
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
|
||||
<label className="text-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Item Name</label>
|
||||
<textarea
|
||||
value={extractedData.name || ''}
|
||||
onChange={(e) => setExtractedData({...extractedData, name: e.target.value})}
|
||||
className="bg-transparent w-full text-xl font-bold outline-none text-white placeholder:text-slate-700 resize-none h-20"
|
||||
placeholder="Product name..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
|
||||
<label className="text-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Category Group</label>
|
||||
<select
|
||||
value={extractedData.category || ''}
|
||||
onChange={(e) => setExtractedData({...extractedData, category: e.target.value})}
|
||||
className="bg-transparent w-full font-bold outline-none text-slate-200"
|
||||
>
|
||||
<option value="" className="bg-slate-900 font-bold">Other / New</option>
|
||||
{categories.map(c => (
|
||||
<option key={c.id} value={c.name} className="bg-slate-900">{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
|
||||
<label className="text-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Item Type</label>
|
||||
<input
|
||||
value={extractedData.type || ''}
|
||||
onChange={(e) => setExtractedData({...extractedData, type: e.target.value})}
|
||||
className="bg-transparent w-full font-bold outline-none text-slate-200"
|
||||
placeholder="e.g. SFP+"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
|
||||
<label className="text-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Item Color</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full" style={{backgroundColor: extractedData.color || 'transparent'}} />
|
||||
<input
|
||||
value={extractedData.color || ''}
|
||||
onChange={(e) => setExtractedData({...extractedData, color: e.target.value})}
|
||||
className="bg-transparent w-full font-bold outline-none text-slate-200"
|
||||
placeholder="e.g. Turquoise"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
|
||||
<label className="text-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Technical Specifications</label>
|
||||
<textarea
|
||||
value={extractedData.specs || ''}
|
||||
onChange={(e) => setExtractedData({...extractedData, specs: e.target.value})}
|
||||
className="bg-transparent w-full text-sm leading-relaxed outline-none resize-none h-20 text-slate-300"
|
||||
placeholder="Technical details..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
|
||||
<label className="text-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Part Number (P/N)</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Hash size={14} className="text-primary/60" />
|
||||
<input
|
||||
value={extractedData.part_number || ''}
|
||||
onChange={(e) => setExtractedData({...extractedData, part_number: e.target.value})}
|
||||
className="bg-transparent w-full font-mono text-sm outline-none text-slate-200"
|
||||
placeholder="ID code..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
|
||||
<label className="text-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Initial Stock</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Layout size={14} className="text-amber-500/60" />
|
||||
<input
|
||||
type="number"
|
||||
value={extractedData.quantity || 1}
|
||||
onChange={(e) => setExtractedData({...extractedData, quantity: parseInt(e.target.value)})}
|
||||
className="bg-transparent w-full font-black text-lg outline-none text-slate-200"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-900/30 p-4 rounded-[1.5rem] border border-slate-800/50">
|
||||
<label className="text-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block">System Metadata (S/N if found)</label>
|
||||
<div className="text-[10px] text-slate-500 font-mono flex flex-wrap gap-2">
|
||||
{extractedData.serial_number && <span>S/N: {extractedData.serial_number}</span>}
|
||||
{extractedData.additional_data && <span>+ More Data</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 shrink-0">
|
||||
<button
|
||||
onClick={confirmOnboarding}
|
||||
className="py-5 bg-primary text-white rounded-[1.8rem] font-black text-lg shadow-2xl shadow-primary/20 active:scale-95 transition-all hover:bg-blue-500"
|
||||
>
|
||||
CONFIRM TO CATALOG
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setExtractedData(null)}
|
||||
className="py-3 text-[10px] text-slate-600 font-bold uppercase tracking-widest hover:text-slate-400"
|
||||
>
|
||||
Reset Extraction
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
347
frontend/components/Scanner.tsx
Normal file
347
frontend/components/Scanner.tsx
Normal file
@@ -0,0 +1,347 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Html5Qrcode, Html5QrcodeSupportedFormats } from 'html5-qrcode';
|
||||
import { Camera, RefreshCw, XCircle, Type, Search } from 'lucide-react';
|
||||
import { createWorker } from 'tesseract.js';
|
||||
import { toast } from 'react-hot-toast';
|
||||
|
||||
interface ScannerProps {
|
||||
onScanSuccess: (decodedText: string) => void;
|
||||
onOCRMatch?: (text: string) => void;
|
||||
paused?: boolean;
|
||||
}
|
||||
|
||||
export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerProps) {
|
||||
const html5QrCodeRef = useRef<Html5Qrcode | null>(null);
|
||||
const [isStarted, setIsStarted] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isOCRMode, setIsOCRMode] = useState(false);
|
||||
const [ocrProcessing, setOcrProcessing] = useState(false);
|
||||
const [zoom, setZoom] = useState(1);
|
||||
const [maxZoom, setMaxZoom] = useState(1);
|
||||
const [hasZoom, setHasZoom] = useState(false);
|
||||
const [detectedWords, setDetectedWords] = useState<{ text: string, bbox: { x0: number, y0: number, x1: number, y1: number } }[]>([]);
|
||||
const [isSelecting, setIsSelecting] = useState(false);
|
||||
const [capturedImage, setCapturedImage] = useState<string | null>(null);
|
||||
const isBusy = useRef(false);
|
||||
const scannerId = "reader-container-unique";
|
||||
|
||||
useEffect(() => {
|
||||
if (!html5QrCodeRef.current) {
|
||||
html5QrCodeRef.current = new Html5Qrcode(scannerId);
|
||||
}
|
||||
|
||||
const startScanner = async () => {
|
||||
if (isBusy.current) return;
|
||||
isBusy.current = true;
|
||||
try {
|
||||
if (html5QrCodeRef.current?.isScanning) {
|
||||
await html5QrCodeRef.current.stop();
|
||||
}
|
||||
|
||||
const config = {
|
||||
fps: 15, // Lower FPS for stability
|
||||
qrbox: { width: 280, height: 280 },
|
||||
aspectRatio: 1.0,
|
||||
formatsToSupport: [
|
||||
Html5QrcodeSupportedFormats.QR_CODE,
|
||||
Html5QrcodeSupportedFormats.CODE_128,
|
||||
Html5QrcodeSupportedFormats.CODE_39,
|
||||
Html5QrcodeSupportedFormats.EAN_13,
|
||||
Html5QrcodeSupportedFormats.UPC_A,
|
||||
Html5QrcodeSupportedFormats.DATAMATRIX
|
||||
],
|
||||
// Simplified constraints for maximum compatibility
|
||||
videoConstraints: {
|
||||
facingMode: "environment"
|
||||
}
|
||||
};
|
||||
|
||||
await html5QrCodeRef.current?.start(
|
||||
{ facingMode: "environment" },
|
||||
config,
|
||||
(decodedText) => {
|
||||
onScanSuccess(decodedText);
|
||||
},
|
||||
() => {} // Ignore frame errors
|
||||
);
|
||||
|
||||
// Check for zoom capability via video track
|
||||
const video = document.querySelector(`#${scannerId} video`) as HTMLVideoElement;
|
||||
const track = (video?.srcObject as MediaStream)?.getVideoTracks()[0];
|
||||
const caps = track?.getCapabilities() as any;
|
||||
if (track && caps?.zoom) {
|
||||
setHasZoom(true);
|
||||
setMaxZoom(caps.zoom.max || 3);
|
||||
}
|
||||
|
||||
setIsStarted(true);
|
||||
setError(null);
|
||||
} catch (err: any) {
|
||||
const errorMsg = String(err);
|
||||
if (!errorMsg.includes("is already starting") && !errorMsg.includes("already under transition")) {
|
||||
console.error("Scanner failed", err);
|
||||
setError(errorMsg || "Failed to access camera");
|
||||
setIsStarted(false);
|
||||
}
|
||||
} finally {
|
||||
isBusy.current = false;
|
||||
}
|
||||
};
|
||||
|
||||
if (!paused) {
|
||||
startScanner();
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (html5QrCodeRef.current?.isScanning) {
|
||||
html5QrCodeRef.current.stop()
|
||||
.then(() => {
|
||||
setIsStarted(false);
|
||||
})
|
||||
.catch(e => console.error("Stop failed", e));
|
||||
}
|
||||
};
|
||||
}, [paused, onScanSuccess]); // Minimal deps
|
||||
|
||||
// Separate effect for OCR interval to avoid restarting scanner
|
||||
useEffect(() => {
|
||||
let intervalId: any;
|
||||
if (isOCRMode && isStarted && !paused) {
|
||||
intervalId = setInterval(() => {
|
||||
handleOCR();
|
||||
}, 5000); // 5 seconds is safer
|
||||
}
|
||||
return () => {
|
||||
if (intervalId) clearInterval(intervalId);
|
||||
};
|
||||
}, [isOCRMode, isStarted, paused]);
|
||||
|
||||
const handleOCR = async () => {
|
||||
if (ocrProcessing) return;
|
||||
setOcrProcessing(true);
|
||||
try {
|
||||
const video = document.querySelector(`#${scannerId} video`) as HTMLVideoElement;
|
||||
if (!video) return;
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
|
||||
const vWidth = video.videoWidth || 1280;
|
||||
const vHeight = video.videoHeight || 720;
|
||||
|
||||
// Digital Zoom/Crop: 60% of center
|
||||
const cropFactor = 0.6;
|
||||
const sw = vWidth * cropFactor;
|
||||
const sh = vHeight * cropFactor;
|
||||
const sx = (vWidth - sw) / 2;
|
||||
const sy = (vHeight - sh) / 2;
|
||||
|
||||
canvas.width = 1200;
|
||||
canvas.height = (sh / sw) * 1200;
|
||||
|
||||
console.log(`OCR Capture: ${vWidth}x${vHeight} -> ${canvas.width}x${canvas.height}`);
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (ctx) {
|
||||
// More balanced filter for both paper and metal labels
|
||||
ctx.filter = 'grayscale(100%) contrast(180%) brightness(105%)';
|
||||
ctx.drawImage(video, sx, sy, sw, sh, 0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
// Timeout protection for worker initialization (especially when offline for first run)
|
||||
const workerPromise = createWorker('eng');
|
||||
const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject(new Error("OCR Engine timeout - check internet for first run")), 8000));
|
||||
|
||||
const worker = await Promise.race([workerPromise, timeoutPromise]) as any;
|
||||
const dataUrl = canvas.toDataURL('image/jpeg', 0.85);
|
||||
|
||||
// DIAGNOSTIC: Set captured image early so user can see what was sent to AI
|
||||
setCapturedImage(dataUrl);
|
||||
|
||||
const result = await worker.recognize(dataUrl);
|
||||
console.log("OCR Result Size:", result.data?.text?.length);
|
||||
|
||||
const data = result.data;
|
||||
|
||||
// FALLBACK: If we have text but no word coordinates
|
||||
if (data && data.text && (!data.words || data.words.length === 0)) {
|
||||
console.log("Fallback to direct match");
|
||||
onOCRMatch(data.text);
|
||||
await worker.terminate();
|
||||
setCapturedImage(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data || !data.words || data.words.length === 0) {
|
||||
console.warn("OCR produced no text or words.");
|
||||
toast.error("Label not readable. Try better light or zoom.");
|
||||
await worker.terminate();
|
||||
setCapturedImage(null);
|
||||
return;
|
||||
}
|
||||
|
||||
// Store words with their bounding boxes
|
||||
const words = data.words.map((w: any) => ({
|
||||
text: w.text,
|
||||
bbox: w.bbox
|
||||
}));
|
||||
|
||||
setDetectedWords(words);
|
||||
setIsSelecting(true);
|
||||
await worker.terminate();
|
||||
} catch (err) {
|
||||
console.error("OCR failed", err);
|
||||
toast.error("OCR selection failed");
|
||||
} finally {
|
||||
setOcrProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleWordSelect = (text: string) => {
|
||||
onOCRMatch(text);
|
||||
// Reset selection state
|
||||
setIsSelecting(false);
|
||||
setCapturedImage(null);
|
||||
setDetectedWords([]);
|
||||
};
|
||||
|
||||
const cn = (...classes: any[]) => classes.filter(Boolean).join(' ');
|
||||
|
||||
return (
|
||||
<div className="relative w-full max-w-[340px] mx-auto overflow-hidden rounded-[2.5rem] shadow-2xl bg-black border-[3px] border-slate-800 shadow-blue-500/10">
|
||||
<div className="absolute inset-0 z-10 pointer-events-none flex items-center justify-center">
|
||||
<div className="w-[280px] h-[280px] border-2 border-primary/50 rounded-3xl relative">
|
||||
<div className="absolute top-0 left-0 w-8 h-8 border-t-4 border-l-4 border-primary rounded-tl-xl" />
|
||||
<div className="absolute top-0 right-0 w-8 h-8 border-t-4 border-r-4 border-primary rounded-tr-xl" />
|
||||
<div className="absolute bottom-0 left-0 w-8 h-8 border-b-4 border-l-4 border-primary rounded-bl-xl" />
|
||||
<div className="absolute bottom-0 right-0 w-8 h-8 border-b-4 border-r-4 border-primary rounded-br-xl" />
|
||||
<div className="absolute top-0 left-0 right-0 h-0.5 bg-primary/50 shadow-[0_0_15px_rgba(59,130,246,0.8)] animate-scan-fast" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id={scannerId} className="w-full aspect-square bg-slate-900" />
|
||||
|
||||
<div className="absolute top-4 right-4 z-30 flex gap-2">
|
||||
<button
|
||||
onClick={() => setIsOCRMode(!isOCRMode)}
|
||||
className={cn(
|
||||
"p-2 rounded-xl border backdrop-blur-md transition-all",
|
||||
isOCRMode ? "bg-primary border-primary text-white shadow-lg" : "bg-slate-900/50 border-slate-700 text-slate-300"
|
||||
)}
|
||||
>
|
||||
<Type size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Selection UI */}
|
||||
{isSelecting && capturedImage && (
|
||||
<div className="absolute inset-0 z-50 bg-slate-950 flex flex-col">
|
||||
<div className="relative flex-1 bg-black flex items-center justify-center overflow-hidden">
|
||||
<img src={capturedImage} className="max-w-full max-h-full object-contain" id="ocr-canvas-preview" />
|
||||
{/* Render Bounding Boxes */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="relative" style={{ width: '100%', height: '100%' }}>
|
||||
{detectedWords.map((w, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => handleWordSelect(w.text)}
|
||||
className="absolute border border-primary bg-primary/20 rounded-sm active:bg-primary/50 transition-colors pointer-events-auto"
|
||||
style={{
|
||||
left: `${(w.bbox.x0 / 1600) * 100}%`,
|
||||
top: `${(w.bbox.y0 / (1600 * (9/16))) * 100}%`, // Assuming 16:9 ratio, this may need adjustment based on real canvas aspect
|
||||
width: `${((w.bbox.x1 - w.bbox.x0) / 1600) * 100}%`,
|
||||
height: `${((w.bbox.y1 - w.bbox.y0) / (1600 * (9/16))) * 100}%`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 bg-slate-900 border-t border-slate-800 flex flex-col gap-4">
|
||||
<p className="text-sm font-bold text-center text-primary">Tap the correct text on the label</p>
|
||||
<button
|
||||
onClick={() => { setIsSelecting(false); setCapturedImage(null); }}
|
||||
className="w-full py-4 bg-slate-800 text-white rounded-2xl font-black text-xs uppercase tracking-widest"
|
||||
>
|
||||
Cancel & Rescan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isOCRMode && (
|
||||
<div className="absolute inset-0 z-20 pointer-events-none border-2 border-primary/30 rounded-[2rem] animate-pulse" />
|
||||
)}
|
||||
|
||||
{!isStarted && !error && (
|
||||
<div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-slate-900 text-slate-300 gap-4">
|
||||
<RefreshCw className="w-8 h-8 animate-spin text-primary" />
|
||||
<p className="text-sm font-medium">Initializing camera...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-slate-900 text-slate-300 px-8 text-center gap-4">
|
||||
<XCircle className="w-10 h-10 text-red-500" />
|
||||
<div>
|
||||
<p className="font-bold text-white">Camera Error</p>
|
||||
<p className="text-xs text-slate-400 mt-1">{error}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="mt-4 px-6 py-2 bg-slate-800 rounded-full text-sm font-bold hover:bg-slate-700 transition-colors"
|
||||
>
|
||||
Try Again
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="absolute bottom-6 left-0 right-0 z-30 flex flex-col items-center gap-4 px-6">
|
||||
{hasZoom && (
|
||||
<button
|
||||
onClick={async () => {
|
||||
// Cycle through: 1x -> 2x -> Max/2 -> Max
|
||||
let nextZoom = 1;
|
||||
if (zoom === 1) nextZoom = Math.min(2, maxZoom);
|
||||
else if (zoom < maxZoom / 2) nextZoom = Math.floor(maxZoom / 2);
|
||||
else if (zoom < maxZoom) nextZoom = maxZoom;
|
||||
else nextZoom = 1;
|
||||
|
||||
const video = document.querySelector(`#${scannerId} video`) as HTMLVideoElement;
|
||||
const track = (video?.srcObject as MediaStream)?.getVideoTracks()[0];
|
||||
if (track) {
|
||||
await track.applyConstraints({ advanced: [{ zoom: nextZoom }] as any });
|
||||
setZoom(nextZoom);
|
||||
}
|
||||
}}
|
||||
className="bg-slate-900/90 backdrop-blur-md border border-slate-700 text-white w-14 h-14 rounded-full flex flex-col items-center justify-center shadow-2xl active:scale-95 transition-transform"
|
||||
>
|
||||
<span className="text-xs font-black">{zoom.toFixed(1)}x</span>
|
||||
<span className="text-[8px] uppercase text-primary font-bold">Zoom</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{isOCRMode ? (
|
||||
<button
|
||||
onClick={handleOCR}
|
||||
disabled={ocrProcessing}
|
||||
className={cn(
|
||||
"w-full py-4 rounded-2xl font-black text-xs uppercase tracking-[0.2em] flex items-center justify-center gap-3 shadow-2xl transition-all active:scale-95 border border-white/10",
|
||||
ocrProcessing ? "bg-slate-800 text-slate-500" : "bg-primary text-white"
|
||||
)}
|
||||
>
|
||||
{ocrProcessing ? <RefreshCw className="animate-spin" size={18} /> : <Search size={18} />}
|
||||
{ocrProcessing ? "Analyzing..." : "Find by Label (OCR)"}
|
||||
</button>
|
||||
) : (
|
||||
<div className="bg-black/40 backdrop-blur-sm py-2 px-6 rounded-full border border-white/5">
|
||||
<p className="text-[10px] text-center text-slate-300 uppercase tracking-widest font-black">
|
||||
Center barcode for auto-scan
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user