Benjamin_Boenisch/breakpilot-lehrer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace IPA/syllable checkboxes with full dropdowns in vocab-worksheet
Some checks failed
CI / go-lint (push) Has been skipped
Details
CI / python-lint (push) Has been skipped
Details
CI / nodejs-lint (push) Has been skipped
Details
CI / test-go-school (push) Successful in 47s
Details
CI / test-go-edu-search (push) Successful in 47s
Details
CI / test-python-klausur (push) Failing after 2m41s
Details
CI / test-python-agent-core (push) Successful in 39s
Details
CI / test-nodejs-website (push) Successful in 42s
Details

Browse Source 
Vocab worksheet now has the same IPA/syllable mode options as the
OCR pipeline grid editor: Auto, nur EN, nur DE, Alle, Aus.
Previously only had on/off checkboxes mapping to auto/none.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-04-12 10:10:22 +02:00
parent 0f17eb3cd9
commit bf9d24e108
1 changed files with 32 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
studio-v2/app/vocab-worksheet/page.tsx
View File

@@ -157,8 +157,8 @@ export default function VocabWorksheetPage() {
const [includeSolutions, setIncludeSolutions] = useState(true) const [includeSolutions, setIncludeSolutions] = useState(true)
const [lineHeight, setLineHeight] = useState('normal') const [lineHeight, setLineHeight] = useState('normal')
const [selectedFormat, setSelectedFormat] = useState<WorksheetFormat>('standard') const [selectedFormat, setSelectedFormat] = useState<WorksheetFormat>('standard')
const [showIpa, setShowIpa] = useState(false) const [ipaMode, setIpaMode] = useState<'auto' | 'en' | 'de' | 'all' | 'none'>('none')
const [showSyllables, setShowSyllables] = useState(false) const [syllableMode, setSyllableMode] = useState<'auto' | 'en' | 'de' | 'all' | 'none'>('none')
// Export state // Export state
const [worksheetId, setWorksheetId] = useState<string | null>(null) const [worksheetId, setWorksheetId] = useState<string | null>(null)
@@ -440,9 +440,7 @@ export default function VocabWorksheetPage() {
const API_BASE = getApiBase() const API_BASE = getApiBase()
try { try {
const ipaParam = showIpa ? 'auto' : 'none' const res = await fetch(`${API_BASE}/api/v1/vocab/sessions/${session!.id}/process-single-page/${pageIndex}?ipa_mode=${ipaMode}&syllable_mode=${syllableMode}`, {
const syllableParam = showSyllables ? 'auto' : 'none'
const res = await fetch(`${API_BASE}/api/v1/vocab/sessions/${session!.id}/process-single-page/${pageIndex}?ipa_mode=${ipaParam}&syllable_mode=${syllableParam}`, {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ ocr_prompts: ocrPrompts }), body: JSON.stringify({ ocr_prompts: ocrPrompts }),
@@ -1965,21 +1963,35 @@ export default function VocabWorksheetPage() {
{/* OCR display options */} {/* OCR display options */}
<div className={`p-4 rounded-xl border ${isDark ? 'bg-white/5 border-white/10' : 'bg-gray-50 border-gray-200'} space-y-3`}> <div className={`p-4 rounded-xl border ${isDark ? 'bg-white/5 border-white/10' : 'bg-gray-50 border-gray-200'} space-y-3`}>
<h4 className={`text-sm font-medium ${isDark ? 'text-white/70' : 'text-slate-600'}`}>Anzeigeoptionen</h4> <h4 className={`text-sm font-medium ${isDark ? 'text-white/70' : 'text-slate-600'}`}>Anzeigeoptionen</h4>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-3">
<label className={`flex items-center gap-3 cursor-pointer ${isDark ? 'text-white' : 'text-slate-900'}`}> <div>
<input type="checkbox" checked={showIpa} onChange={(e) => setShowIpa(e.target.checked)} className="w-5 h-5 rounded border-2 border-purple-500 text-purple-500 focus:ring-purple-500" /> <label className={`block text-sm mb-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Lautschrift (IPA)</label>
<div> <select
<span>Lautschrift (IPA) anzeigen</span> value={ipaMode}
<p className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>z.B. achieve [əˈtʃiːv]</p> onChange={(e) => setIpaMode(e.target.value as typeof ipaMode)}
</div> className={`w-full px-3 py-2 rounded-lg border text-sm ${isDark ? 'bg-white/10 border-white/20 text-white' : 'bg-white border-gray-200 text-slate-900'}`}
</label> >
<label className={`flex items-center gap-3 cursor-pointer ${isDark ? 'text-white' : 'text-slate-900'}`}> <option value="none">Aus</option>
<input type="checkbox" checked={showSyllables} onChange={(e) => setShowSyllables(e.target.checked)} className="w-5 h-5 rounded border-2 border-purple-500 text-purple-500 focus:ring-purple-500" /> <option value="auto">Auto (erkannte EN-Woerter)</option>
<div> <option value="en">Nur Englisch</option>
<span>Silbentrennung anzeigen</span> <option value="de">Nur Deutsch</option>
<p className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>z.B. Schmet|ter|ling</p> <option value="all">Alle (EN + DE)</option>
</div> </select>
</label> </div>
<div>
<label className={`block text-sm mb-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Silbentrennung</label>
<select
value={syllableMode}
onChange={(e) => setSyllableMode(e.target.value as typeof syllableMode)}
className={`w-full px-3 py-2 rounded-lg border text-sm ${isDark ? 'bg-white/10 border-white/20 text-white' : 'bg-white border-gray-200 text-slate-900'}`}
>
<option value="none">Aus</option>
<option value="auto">Original (nur wo im Scan vorhanden)</option>
<option value="en">Nur Englisch</option>
<option value="de">Nur Deutsch</option>
<option value="all">Alle</option>
</select>
</div>
</div> </div>
</div> </div>