Spaces:
Sleeping
Sleeping
File size: 9,859 Bytes
c3db224 2512198 86f7ae6 c3db224 86f7ae6 c3db224 86f7ae6 c3db224 86f7ae6 c3db224 86f7ae6 2512198 86f7ae6 c3db224 86f7ae6 c3db224 86f7ae6 c3db224 86f7ae6 47a9373 86f7ae6 00d117e 86f7ae6 c3db224 86f7ae6 2512198 86f7ae6 2512198 86f7ae6 2512198 86f7ae6 2512198 86f7ae6 c3db224 86f7ae6 c3db224 86f7ae6 47a9373 86f7ae6 00fec6e 86f7ae6 00fec6e 2512198 00fec6e c3db224 86f7ae6 c3db224 86f7ae6 c3db224 e849698 | 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 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MediaToolkit - Verifier</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body class="bg-slate-50 text-slate-800 flex items-center justify-center min-h-screen py-12">
<div class="container mx-auto p-4 md:p-8 max-w-5xl">
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-10">
<div class="mb-8">
<nav class="tab-nav-container" aria-label="Tabs">
<button class="tab-btn active" data-tab="verifierTab">
Subtitle Verifier
</button>
</nav>
</div>
<div id="verifierTab" class="tab-content">
<header class="text-center mb-8">
<h1 class="text-3xl md:text-4xl font-bold text-slate-900">Subtitle Verifier</h1>
<p class="text-slate-500 mt-2">Batch verify subtitles against PDF pages using Gemini.</p>
</header>
<main>
<div class="bg-slate-100 p-6 rounded-lg mb-8 border border-slate-200">
<h3 class="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
Configuration
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="apiKeyInput" class="block text-sm font-medium text-slate-700 mb-2">Gemini API Keys</label>
<textarea id="apiKeyInput" rows="5" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-3 font-mono text-xs" placeholder="Paste API keys here (one per line) for parallel processing..."></textarea>
<p class="mt-1 text-xs text-slate-500">Multiple keys = Faster processing (Round-robin).</p>
</div>
<div class="space-y-4">
<div>
<label for="pagesPerRequestInput" class="block text-sm font-medium text-slate-700 mb-2">Pages per API Call</label>
<input type="number" id="pagesPerRequestInput" value="200" min="1" max="500" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-3">
<p class="mt-1 text-xs text-slate-500">How many PDF pages to send to Gemini at once.</p>
</div>
<div>
<label for="modelSelect" class="block text-sm font-medium text-slate-700 mb-2">Select Gemini Model</label>
<select id="modelSelect" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-3 bg-white">
<option value="gemini-3-flash-preview" selected>Gemini 3 Flash</option>
<option value="gemini-3-pro-preview">Gemini 3 Pro</option>
</select>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div>
<label for="pdfUpload" class="custom-file-upload rounded-lg w-full bg-white hover:bg-slate-50 transition-colors cursor-pointer border-2 border-dashed border-slate-300 p-8 flex flex-col items-center justify-center">
<span class="mt-2 block font-semibold text-indigo-600">Upload PDF Source</span>
<span id="pdfFileName" class="mt-1 block text-sm text-slate-500">Click to select file</span>
</label>
<input type="file" id="pdfUpload" accept=".pdf" class="hidden">
</div>
<div>
<label for="srtUpload" class="custom-file-upload rounded-lg w-full bg-white hover:bg-slate-50 transition-colors cursor-pointer border-2 border-dashed border-slate-300 p-8 flex flex-col items-center justify-center">
<span class="mt-2 block font-semibold text-indigo-600">Upload SRT File</span>
<span id="srtFileName" class="mt-1 block text-sm text-slate-500">Click to select file</span>
</label>
<input type="file" id="srtUpload" accept=".srt" class="hidden">
</div>
</div>
<div class="text-center mb-8">
<button id="verifyButton" class="bg-indigo-600 text-white font-semibold py-3 px-8 rounded-lg shadow-md hover:bg-indigo-700 disabled:bg-slate-400 disabled:cursor-not-allowed transition-all duration-300 transform hover:scale-105">
Run Batch Verification
</button>
</div>
<div id="loader" class="hidden flex flex-col justify-center items-center py-10 bg-slate-50 rounded-lg w-full min-h-[200px]">
<div class="w-10 h-10 border-4 border-indigo-200 border-l-indigo-600 rounded-full animate-spin"></div>
<p id="loaderText" class="mt-4 text-slate-600 text-center font-medium">Initializing Analysis...</p>
<div class="w-full max-w-sm mt-4 bg-slate-200 rounded-full h-2.5 overflow-hidden mx-auto">
<div id="progressBar" class="bg-indigo-600 h-2.5 rounded-full transition-all duration-300 ease-out" style="width: 0%"></div>
</div>
<p id="progressPercent" class="mt-2 text-sm font-medium text-indigo-700 text-center">0%</p>
</div>
<div id="resultsWrapper" class="hidden space-y-8 mt-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-emerald-50 p-4 rounded-lg border border-emerald-100 text-center">
<p class="text-sm text-emerald-600 font-medium">Chunks</p>
<p id="statChunks" class="text-2xl font-bold text-emerald-800">0</p>
</div>
<div class="bg-indigo-50 p-4 rounded-lg border border-indigo-100 text-center">
<p class="text-sm text-indigo-600 font-medium">Corrections</p>
<p id="statCorrections" class="text-2xl font-bold text-indigo-800">0</p>
</div>
<div class="bg-rose-50 p-4 rounded-lg border border-rose-100 text-center">
<p class="text-sm text-rose-600 font-medium">OCR Alerts</p>
<p id="statOcrErrors" class="text-2xl font-bold text-rose-800">0</p>
</div>
<div class="bg-amber-50 p-4 rounded-lg border border-amber-100 text-center">
<p class="text-sm text-amber-600 font-medium">System Errors</p>
<p id="statErrors" class="text-2xl font-bold text-amber-800">0</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
<div>
<h3 class="text-lg font-semibold mb-2 text-rose-700 flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
OCR Error Reports
</h3>
<textarea id="ocrErrorOutput" readonly class="w-full h-64 bg-rose-50 text-rose-800 p-4 rounded-lg text-xs font-mono border border-rose-200 focus:outline-none resize-none"></textarea>
</div>
<div>
<h3 class="text-lg font-semibold mb-2 text-slate-700">Raw Corrections Data</h3>
<textarea id="correctedSrtOutput" readonly class="w-full h-64 bg-slate-100 text-slate-700 p-4 rounded-lg text-xs font-mono border border-slate-300 focus:outline-none resize-none"></textarea>
</div>
</div>
<div class="mt-6">
<div class="flex justify-between items-center mb-2">
<h3 class="text-lg font-semibold text-slate-700">Full JSON Response</h3>
<button id="downloadSrtBtn" class="bg-emerald-600 text-white font-semibold py-2 px-6 rounded-lg shadow hover:bg-emerald-700 transition-colors flex items-center gap-2 text-sm">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
Download Corrected SRT
</button>
</div>
<textarea id="results" readonly class="w-full h-32 bg-slate-800 text-emerald-400 p-4 rounded-lg text-xs font-mono border border-slate-700 focus:outline-none"></textarea>
</div>
</div>
<div id="errorMessage" class="hidden mt-4 text-center bg-red-100 text-red-700 p-4 rounded-lg border border-red-200 font-medium"></div>
</main>
</div>
</div>
</div>
<script src="verify.js"></script>
</body>
</html> |