ZHAW/BA_TTS_Annotation_Plattform
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve onboarding, annotation, and calibration UI

Browse Source
This commit is contained in:
smaubio
2026-04-03 16:03:24 +02:00
parent 7c82befa3d
commit 296fb21b5f
14 changed files with 185 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/CalibrationViews/CalibrationInfoView.tsx
View File

@@ -25,21 +25,17 @@ export default function CalibrationInfoView({
return (
<div className="flex flex-col h-full bg-white">
<div className="flex-1 flex items-center justify-center px-4">
<div className="max-w-2xl w-full">
<div className="max-w-[700px] w-full">
{/* Header */}
<div className="text-center mb-4">
<h1 className="text-3xl font-bold text-gray-900 mb-2">Kalibrierungsphase</h1>
<h1 className="text-3xl font-bold text-gray-900 mb-8 mt-4">Kalibrierungsphase</h1>
</div>
{/* Info Section */}
<div className="bg-blue-50 border border-blue-200 rounded-lg p-8 mb-8">
<h2 className="text-xl font-semibold text-gray-900 mb-4">Was ist die Kalibrierungsphase?</h2>
<p className="text-gray-700 mb-4">
Die Kalibrierungsphase dient dazu, Ihre individuellen Stärken und Schwächen bei der Dialekterkennung zu verstehen. Sie hören verschiedene Audiosamples und geben an, welchen Dialekt Sie hören und wie sicher Sie sich dabei sind.
</p>
<p className="text-gray-700 mb-4">
Dies hilft uns, Ihre Annotationsergebnisse später besser zu bewerten und zu
verstehen. Die Annotationen werden auf Basis Ihrer Kalibrierungsergebnisse gewichtet, sodass Ihre Stärken stärker berücksichtigt werden.
In der Kalibrierungsphase hörst du echte Dialektaufnahmen und gibst an, welchen Dialekt du erkennst und wie sicher du dir dabei bist. So können wir deine Dialektkenntnisse besser einschätzen und deine späteren Bewertungen entsprechend gewichten.
</p>
</div>
@@ -51,38 +47,38 @@ export default function CalibrationInfoView({
<span className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
1
</span>
<span>Sie hören ein Audiosample</span>
<span>Du hörst eine Audioaufnahme</span>
</li>
<li className="flex gap-3">
<span className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
2
</span>
<span>Sie wählen den Dialekt aus, den Sie gehört haben</span>
<span>Du wählst den Dialekt aus, den du gehört hast</span>
</li>
<li className="flex gap-3">
<span className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
3
</span>
<span>Sie bewerten Ihr Vertrauen in die Identifikation (von 1-5)</span>
<span>Du gibst an, wie sicher du dir bei deiner Wahl bist</span>
</li>
<li className="flex gap-3">
<span className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
4
</span>
<span>Sie wiederholen dies für alle Audiosamples</span>
<span>Dies wiederholst du für alle Aufnahmen</span>
</li>
</ol>
</div>
{/* Important Note */}
<div className="bg-amber-50 border border-amber-200 rounded-lg p-6 mb-8">
<h4 className="font-semibold text-amber-900 mb-2">ℹ️ Wichtig</h4>
<p className="text-amber-800 text-sm">
Sie können diese Seite jederzeit verlassen und später zurückkehren, um Ihre
Kalibrierung fortzusetzen. Ihre Antworten werden automatisch gespeichert.
{/* Participation Section */}
<div className="mb-8">
<p className="text-gray-700 mb-4">
Die Kalibrierung umfasst 35 Aufnahmen und dauert etwa 5–10 Minuten.
</p>
</div>
{/* Status */}
{hasExistingAnswers && (
<div className="bg-green-50 border border-green-200 rounded-lg p-6 mb-8">