robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Instant editor opening with background AI analysis

Browse Source 
- Editor opens immediately with placeholder data
- AI analyzes label in background while user can already edit
- Blue 'KI analysiert...' banner shows when AI is still working
- User edits preserved when AI results arrive (dirty field tracking)
- Model/provider shown in admin perf overlay
- Renamed 'CLOUD' to 'AI' in perf display
This commit is contained in:
robin
2025-12-26 00:02:38 +01:00
parent fb2a8d0f7b
commit 8ccd600dcb
3 changed files with 100 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/ScanAndTasteFlow.tsx
View File

@@ -138,8 +138,14 @@ export default function ScanAndTasteFlow({ isOpen, onClose, imageFile, onBottleS
if (scannerStatus === 'idle') {
// Don't change state on idle
} else if (scannerStatus === 'compressing' || scannerStatus === 'analyzing') {
} else if (scannerStatus === 'compressing') {
setState('SCANNING');
} else if (scannerStatus === 'editor_ready' || scannerStatus === 'analyzing') {
// NEW: Open editor immediately when image is ready!
if (scanner.mergedResult) {
setBottleMetadata(scanner.mergedResult);
}
setState('EDITOR');
} else if (scannerStatus === 'complete' || scannerStatus === 'queued') {
if (scanner.mergedResult) {
setBottleMetadata(scanner.mergedResult);
@@ -400,6 +406,18 @@ export default function ScanAndTasteFlow({ isOpen, onClose, imageFile, onBottleS
exit={{ y: -50, opacity: 0 }}
className="flex-1 w-full h-full flex flex-col min-h-0"
>
{/* AI Analyzing Banner - shows when AI is still processing */}
{scanner.isAnalyzing && (
<div className="bg-blue-500/10 border-b border-blue-500/20 p-3">
<div className="max-w-2xl mx-auto flex items-center gap-3">
<Loader2 size={14} className="animate-spin text-blue-500" />
<p className="text-xs font-bold text-blue-500 uppercase tracking-wider">
KI analysiert Etikett...
</p>
</div>
</div>
)}
{/* Status banners */}
{isOffline && (
<div className="bg-orange-500/10 border-b border-orange-500/20 p-4">
@@ -429,13 +447,19 @@ export default function ScanAndTasteFlow({ isOpen, onClose, imageFile, onBottleS
{isAdmin && scanner.perf && (
<div className="fixed bottom-24 left-6 right-6 z-50 p-3 bg-zinc-950/80 backdrop-blur-md rounded-2xl border border-orange-500/20 text-[9px] font-mono text-white/90 shadow-xl overflow-x-auto">
<div className="flex items-center justify-between gap-4 whitespace-nowrap">
{scanner.perf.model && (
<div className="flex items-center gap-2">
<span className="text-zinc-500">MODEL:</span>
<span className="text-purple-400 font-bold">{scanner.perf.model}</span>
</div>
)}
<div className="flex items-center gap-2">
<Clock size={10} className="text-orange-500" />
<span className="text-zinc-500">COMPRESS:</span>
<span className="text-orange-500 font-bold">{scanner.perf.compression.toFixed(0)}ms</span>
</div>
<div className="flex items-center gap-2">
<span className="text-zinc-500">CLOUD:</span>
<span className="text-zinc-500">AI:</span>
<span className="text-green-500 font-bold">{scanner.perf.cloudVision.toFixed(0)}ms</span>
</div>
<div className="flex items-center gap-2">