Add A/B testing toggles for OCR quality steps

Each quality improvement step can now be toggled independently:
- CLAHE checkbox (Step 3: image enhancement on/off)
- MaxCols dropdown (Step 2: 0=unlimited, 2-5)
- MinConf dropdown (Step 1: auto/20/30/40/50/60)

Backend: Query params enhance, max_cols, min_conf on process-single-page.
Response includes active_steps dict showing which steps are enabled.
Frontend: Toggle controls in VocabularyTab above the table.

This allows empirical A/B testing of each step on the same scan.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

studio-v2/app/vocab-worksheet/components/VocabularyTab.tsx

@@ -120,6 +120,36 @@ export function VocabularyTab({ h }: { h: VocabWorksheetHook }) {
           </div>
         </div>
 
+        {/* OCR Quality Steps (A/B Testing) */}
+        <div className={`flex items-center gap-3 mb-3 flex-shrink-0 flex-wrap ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
+          <span className="text-xs font-medium">Steps:</span>
+          <label className="flex items-center gap-1 text-xs cursor-pointer">
+            <input type="checkbox" checked={h.ocrEnhance} onChange={(e) => h.setOcrEnhance(e.target.checked)} className="rounded" />
+            CLAHE
+          </label>
+          <label className="flex items-center gap-1 text-xs">
+            <span>MaxCols:</span>
+            <select value={h.ocrMaxCols} onChange={(e) => h.setOcrMaxCols(Number(e.target.value))} className={`px-1 py-0.5 text-xs rounded border ${isDark ? 'border-white/20 bg-white/10 text-white' : 'border-gray-200 bg-white text-gray-600'}`}>
+              <option value={0}>unbegrenzt</option>
+              <option value={2}>2</option>
+              <option value={3}>3</option>
+              <option value={4}>4</option>
+              <option value={5}>5</option>
+            </select>
+          </label>
+          <label className="flex items-center gap-1 text-xs">
+            <span>MinConf:</span>
+            <select value={h.ocrMinConf} onChange={(e) => h.setOcrMinConf(Number(e.target.value))} className={`px-1 py-0.5 text-xs rounded border ${isDark ? 'border-white/20 bg-white/10 text-white' : 'border-gray-200 bg-white text-gray-600'}`}>
+              <option value={0}>auto</option>
+              <option value={20}>20</option>
+              <option value={30}>30</option>
+              <option value={40}>40</option>
+              <option value={50}>50</option>
+              <option value={60}>60</option>
+            </select>
+          </label>
+        </div>
+
         {/* Error messages for failed pages */}
         {h.processingErrors.length > 0 && (
           <div className={`rounded-xl p-3 mb-3 flex-shrink-0 ${isDark ? 'bg-orange-500/20 text-orange-200 border border-orange-500/30' : 'bg-orange-100 text-orange-700 border border-orange-200'}`}>

studio-v2/app/vocab-worksheet/types.ts

@@ -140,6 +140,14 @@ export interface VocabWorksheetHook {
   showSettings: boolean
   setShowSettings: (show: boolean) => void
 
+  // OCR Quality Steps (A/B testing)
+  ocrEnhance: boolean
+  setOcrEnhance: (v: boolean) => void
+  ocrMaxCols: number
+  setOcrMaxCols: (v: number) => void
+  ocrMinConf: number
+  setOcrMinConf: (v: number) => void
+
   // QR
   showQRModal: boolean
   setShowQRModal: (show: boolean) => void

studio-v2/app/vocab-worksheet/useVocabWorksheet.ts

@@ -90,6 +90,11 @@ export function useVocabWorksheet(): VocabWorksheetHook {
   const [ocrPrompts, setOcrPrompts] = useState<OcrPrompts>(defaultOcrPrompts)
   const [showSettings, setShowSettings] = useState(false)
 
+  // OCR Quality Steps (toggle individually for A/B testing)
+  const [ocrEnhance, setOcrEnhance] = useState(true)     // Step 3: CLAHE + denoise
+  const [ocrMaxCols, setOcrMaxCols] = useState(3)         // Step 2: max columns (0=unlimited)
+  const [ocrMinConf, setOcrMinConf] = useState(0)          // Step 1: 0=auto from quality score
+
   // QR Code Upload
   const [showQRModal, setShowQRModal] = useState(false)
   const [uploadSessionId, setUploadSessionId] = useState('')
@@ -359,7 +364,14 @@ export function useVocabWorksheet(): VocabWorksheetHook {
     const API_BASE = getApiBase()
 
     try {
-      const res = await fetch(`${API_BASE}/api/v1/vocab/sessions/${session!.id}/process-single-page/${pageIndex}?ipa_mode=${ipa}&syllable_mode=${syllable}`, {
+      const params = new URLSearchParams({
+        ipa_mode: ipa,
+        syllable_mode: syllable,
+        enhance: String(ocrEnhance),
+        max_cols: String(ocrMaxCols),
+        min_conf: String(ocrMinConf),
+      })
+      const res = await fetch(`${API_BASE}/api/v1/vocab/sessions/${session!.id}/process-single-page/${pageIndex}?${params}`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ ocr_prompts: ocrPrompts }),
@@ -793,7 +805,14 @@ export function useVocabWorksheet(): VocabWorksheetHook {
       for (const pageIndex of pagesToReprocess) {
         setExtractionStatus(`Verarbeite Seite ${pageIndex + 1}...`)
         try {
-          const res = await fetch(`${API_BASE}/api/v1/vocab/sessions/${session.id}/process-single-page/${pageIndex}?ipa_mode=${ipa}&syllable_mode=${syllable}`, {
+          const params = new URLSearchParams({
+            ipa_mode: ipa,
+            syllable_mode: syllable,
+            enhance: String(ocrEnhance),
+            max_cols: String(ocrMaxCols),
+            min_conf: String(ocrMinConf),
+          })
+          const res = await fetch(`${API_BASE}/api/v1/vocab/sessions/${session.id}/process-single-page/${pageIndex}?${params}`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ ocr_prompts: ocrPrompts }),
@@ -849,6 +868,7 @@ export function useVocabWorksheet(): VocabWorksheetHook {
     processingErrors, successfulPages, failedPages, currentlyProcessingPage,
     // OCR settings
     ocrPrompts, showSettings, setShowSettings,
+    ocrEnhance, setOcrEnhance, ocrMaxCols, setOcrMaxCols, ocrMinConf, setOcrMinConf,
     // QR
     showQRModal, setShowQRModal, uploadSessionId,
     mobileUploadedFiles, selectedMobileFile, setSelectedMobileFile, setMobileUploadedFiles,