Spaces:
Running
Running
File size: 4,632 Bytes
f2f99a3 86323af f2f99a3 86323af f2f99a3 86323af f2f99a3 86323af f2f99a3 86323af f2f99a3 86323af f2f99a3 86323af f2f99a3 86323af f2f99a3 86323af f2f99a3 86323af f2f99a3 86323af f2f99a3 86323af f2f99a3 | 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 99 100 101 | import { useState } from 'react';
import EmbedPanel from './components/EmbedPanel.js';
import DetectPanel from './components/DetectPanel.js';
import ApiDocs from './components/ApiDocs.js';
import HowItWorks from './components/HowItWorks.js';
export default function App() {
const [tab, setTab] = useState<'embed' | 'detect' | 'api' | 'how'>('embed');
const isWide = tab === 'how';
return (
<div className="min-h-screen bg-zinc-950">
<header className="sticky top-0 z-10 border-b border-zinc-800/50 bg-zinc-950/80 px-6 py-4 backdrop-blur-xl">
<div className={`mx-auto flex items-center justify-between ${isWide ? 'max-w-4xl' : 'max-w-2xl'}`}>
<div className="flex items-center gap-3">
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-blue-600 to-violet-600 shadow-lg shadow-blue-600/20">
<svg className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
</div>
<h1 className="text-xl font-bold tracking-tight text-zinc-100">
<span className="text-blue-400">L</span><span className="text-blue-400">T</span>Mar<span className="text-blue-400">X</span>
</h1>
</div>
<nav className="flex gap-1 rounded-xl bg-zinc-900/80 p-1 ring-1 ring-zinc-800/50">
<button
onClick={() => setTab('embed')}
className={`rounded-lg px-4 py-1.5 text-sm font-medium transition-all ${
tab === 'embed'
? 'bg-zinc-800 text-zinc-100 shadow-sm'
: 'text-zinc-400 hover:text-zinc-200'
}`}
>
🎨 Embed
</button>
<button
onClick={() => setTab('detect')}
className={`rounded-lg px-4 py-1.5 text-sm font-medium transition-all ${
tab === 'detect'
? 'bg-zinc-800 text-zinc-100 shadow-sm'
: 'text-zinc-400 hover:text-zinc-200'
}`}
>
🔍 Detect
</button>
<button
onClick={() => setTab('api')}
className={`rounded-lg px-4 py-1.5 text-sm font-medium transition-all ${
tab === 'api'
? 'bg-zinc-800 text-zinc-100 shadow-sm'
: 'text-zinc-400 hover:text-zinc-200'
}`}
>
{'{}'} API
</button>
<button
onClick={() => setTab('how')}
className={`rounded-lg px-4 py-1.5 text-sm font-medium transition-all ${
tab === 'how'
? 'bg-zinc-800 text-zinc-100 shadow-sm'
: 'text-zinc-400 hover:text-zinc-200'
}`}
>
📐 How
</button>
</nav>
</div>
</header>
<main className={`mx-auto px-6 py-10 ${isWide ? 'max-w-4xl' : 'max-w-2xl'}`}>
<div className="mb-8">
<h2 className="text-2xl font-bold tracking-tight text-zinc-100">
{tab === 'embed' ? '🎬 Embed Watermark' : tab === 'detect' ? '🔎 Detect Watermark' : tab === 'api' ? '📖 API Reference' : '📐 How It Works'}
</h2>
<p className="mt-1 text-sm text-zinc-500">
{tab === 'embed'
? 'Embed an imperceptible 32-bit payload into your video.'
: tab === 'detect'
? 'Analyze a video to detect and extract embedded watermarks.'
: tab === 'api'
? 'Integrate LTMarX into your application.'
: 'Interactive walkthrough of the DWT/DCT watermarking pipeline.'}
</p>
</div>
{tab === 'embed' ? <EmbedPanel /> : tab === 'detect' ? <DetectPanel /> : tab === 'api' ? <ApiDocs /> : <HowItWorks />}
</main>
<footer className="border-t border-zinc-800/30 px-6 py-6">
<div className={`mx-auto ${isWide ? 'max-w-4xl' : 'max-w-2xl'}`}>
<p className="text-center text-[11px] text-zinc-700">
<span className="text-zinc-600">L</span><span className="text-zinc-600">T</span>Mar<span className="text-zinc-600">X</span> — DWT/DCT watermarking with DM-QIM and BCH error correction.
All processing happens in your browser.
</p>
</div>
</footer>
</div>
);
}
|