| import { useState } from "react"; |
| import { ChevronDown, ChevronUp, Eye } from "lucide-react"; |
| import type { ImageResult } from "@/types"; |
| import { getImageUrl } from "@/services/api"; |
|
|
| interface ImageResultCardProps { |
| result: ImageResult; |
| index: number; |
| } |
|
|
| export function ImageResultCard({ result, index }: ImageResultCardProps) { |
| const [expanded, setExpanded] = useState(false); |
|
|
| const hasError = !!result.error; |
|
|
| return ( |
| <div |
| className={[ |
| "rounded-xl border transition-all duration-200", |
| hasError |
| ? "border-red-500/20 bg-red-500/5" |
| : "border-surface-500 bg-surface-700 hover:border-surface-400", |
| ].join(" ")} |
| > |
| <div |
| className="flex items-center gap-4 p-4 cursor-pointer" |
| onClick={() => setExpanded((e) => !e)} |
| > |
| {/* Index badge */} |
| <div className="w-8 h-8 rounded-lg bg-surface-600 flex items-center justify-center flex-shrink-0"> |
| <span className="text-xs font-mono text-slate-400">{index + 1}</span> |
| </div> |
| |
| {/* Preview thumbnail */} |
| {result.previewUrl && ( |
| <div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0 border border-surface-500"> |
| <img |
| src={result.previewUrl} |
| alt={result.filename} |
| className="w-full h-full object-cover" |
| /> |
| </div> |
| )} |
| |
| {/* Name + status */} |
| <div className="flex-1 min-w-0"> |
| <p className="font-medium text-white text-sm truncate">{result.filename}</p> |
| {hasError ? ( |
| <p className="text-red-400 text-xs mt-0.5"> |
| {typeof result.error === "string" ? result.error : JSON.stringify(result.error)} |
| </p> |
| ) : ( |
| <div className="flex items-center gap-2 mt-1 flex-wrap"> |
| {result.angles.map((angle, i) => ( |
| <span |
| key={i} |
| className="text-xs px-2 py-0.5 rounded-full bg-brand-500/15 text-brand-400 font-medium border border-brand-500/20" |
| > |
| {angle} |
| </span> |
| ))} |
| {result.review && ( |
| <span className="text-xs px-2 py-0.5 rounded-full bg-amber-500/15 text-amber-400 font-medium border border-amber-500/20"> |
| Needs review |
| </span> |
| )} |
| </div> |
| )} |
| </div> |
| |
| {/* Expand */} |
| <div className="flex-shrink-0 text-slate-500"> |
| {expanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />} |
| </div> |
| </div> |
| |
| {/* Expanded view */} |
| {expanded && !hasError && ( |
| <div className="px-4 pb-4 border-t border-surface-600 pt-4 animate-fade-in space-y-4"> |
| {/* Local preview always shown */} |
| {result.previewUrl && ( |
| <div> |
| <p className="text-xs text-slate-400 mb-2 font-medium uppercase tracking-wider"> |
| Uploaded Image |
| </p> |
| <div className="rounded-lg overflow-hidden border border-surface-500 max-w-sm"> |
| <img |
| src={result.previewUrl} |
| alt={result.filename} |
| className="w-full object-contain max-h-64 bg-surface-900" |
| /> |
| </div> |
| </div> |
| )} |
| |
| {/* Backend detection overlays (only when available) */} |
| {result.fileDetails && ( |
| <div> |
| <p className="text-xs text-slate-400 mb-2 font-medium uppercase tracking-wider"> |
| Detection Outputs |
| </p> |
| <div className="grid grid-cols-3 gap-3"> |
| {[ |
| { label: "Original", path: result.fileDetails.main_img_name }, |
| { label: "Car Detection", path: result.fileDetails.car_detection }, |
| { label: "Part Detection", path: result.fileDetails.part_detection }, |
| ].map(({ label, path }) => ( |
| <a |
| key={label} |
| href={getImageUrl(path)} |
| target="_blank" |
| rel="noopener noreferrer" |
| className="group relative rounded-lg overflow-hidden border border-surface-500 hover:border-brand-500/50 transition-colors block" |
| > |
| <div className="aspect-square bg-surface-800"> |
| <img |
| src={getImageUrl(path)} |
| alt={label} |
| className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" |
| onError={(e) => { |
| e.currentTarget.style.display = "none"; |
| }} |
| /> |
| </div> |
| <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-2"> |
| <span className="text-white text-xs font-medium flex items-center gap-1"> |
| <Eye className="w-3 h-3" /> {label} |
| </span> |
| </div> |
| <p className="text-center text-xs text-slate-400 py-1.5 bg-surface-800"> |
| {label} |
| </p> |
| </a> |
| ))} |
| </div> |
| </div> |
| )} |
| </div> |
| )} |
| </div> |
| ); |
| } |
|
|
