Spaces:
Configuration error
Configuration error
File size: 3,365 Bytes
a8f12e6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | import { useState } from "react";
function MetaPill({ label, value }) {
return (
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/[0.04] border border-white/10 text-xs">
<span className="text-white/40 uppercase tracking-wide">{label}</span>
<span className="text-white/80 font-medium">{value}</span>
</div>
);
}
export default function CaptionResult({ result }) {
const [copied, setCopied] = useState(false);
if (!result) return null;
const copy = async () => {
try {
await navigator.clipboard.writeText(result.caption);
setCopied(true);
setTimeout(() => setCopied(false), 1500);
} catch {
/* ignore */
}
};
return (
<div className="relative rounded-2xl border border-white/10 bg-gradient-to-b from-white/[0.04] to-white/[0.01] p-6 overflow-hidden">
<div className="absolute -top-24 -right-24 w-64 h-64 bg-violet-500/10 rounded-full blur-3xl pointer-events-none" />
<div className="relative">
<div className="flex items-center gap-2 mb-3">
<div className="w-1.5 h-1.5 rounded-full bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.7)]" />
<span className="text-xs uppercase tracking-wider text-white/40">
Generated caption
</span>
</div>
<p className="text-xl md:text-2xl text-white font-medium leading-snug">
{result.caption}
</p>
<div className="flex flex-wrap gap-2 mt-5">
<MetaPill label="Model" value={result.model_version} />
<MetaPill label="Decode" value={result.decode_strategy} />
<MetaPill
label="Latency"
value={`${result.latency_ms.toFixed(1)} ms`}
/>
</div>
<div className="flex items-center justify-between mt-5 pt-4 border-t border-white/5">
<span className="text-[11px] text-white/30 font-mono truncate">
req: {result.request_id}
</span>
<button
type="button"
onClick={copy}
className="inline-flex items-center gap-1.5 text-xs text-white/70 hover:text-white px-2.5 py-1.5 rounded-md border border-white/10 hover:border-white/20 transition-colors"
>
{copied ? (
<>
<svg
viewBox="0 0 24 24"
className="w-3.5 h-3.5 text-emerald-400"
fill="none"
stroke="currentColor"
strokeWidth="2.4"
strokeLinecap="round"
strokeLinejoin="round"
>
<polyline points="20 6 9 17 4 12" />
</svg>
Copied
</>
) : (
<>
<svg
viewBox="0 0 24 24"
className="w-3.5 h-3.5"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect x="9" y="9" width="13" height="13" rx="2" />
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
</svg>
Copy
</>
)}
</button>
</div>
</div>
</div>
);
}
|