Spaces:
Sleeping
Sleeping
File size: 15,588 Bytes
88b6846 fe2bc51 88b6846 fe2bc51 88b6846 fe2bc51 88b6846 fe2bc51 88b6846 fe2bc51 88b6846 fe2bc51 88b6846 fe2bc51 88b6846 fe2bc51 88b6846 fe2bc51 88b6846 fe2bc51 88b6846 fe2bc51 88b6846 fe2bc51 88b6846 fe2bc51 88b6846 fe2bc51 88b6846 fe2bc51 88b6846 fe2bc51 88b6846 fe2bc51 88b6846 |
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 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 |
'use client';
import React from 'react';
import { X, Keyboard, Mic, Save, Search, SkipForward, Bookmark, HelpCircle, FolderDown, FileAudio, FileText, FileJson } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
interface HelpModalProps {
isOpen: boolean;
onClose: () => void;
}
export default function HelpModal({ isOpen, onClose }: HelpModalProps) {
return (
<AnimatePresence>
{isOpen && (
<>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
onClick={onClose}
/>
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
className="fixed inset-0 z-50 flex items-center justify-center p-4"
>
<Card className="w-full max-w-3xl max-h-[85vh] overflow-y-auto">
<CardHeader className="sticky top-0 bg-card z-10 border-b border-border">
<CardTitle className="flex items-center justify-between">
<div className="flex items-center gap-2">
<HelpCircle className="w-5 h-5 text-primary" />
<span>Help & Documentation</span>
</div>
<button onClick={onClose} className="text-muted-foreground hover:text-foreground p-1 rounded-lg hover:bg-secondary">
<X className="w-5 h-5" />
</button>
</CardTitle>
</CardHeader>
<CardContent className="space-y-6 pt-6">
{/* Quick Start */}
<section className="space-y-3">
<h3 className="text-lg font-semibold flex items-center gap-2">
🚀 Quick Start
</h3>
<ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground ml-2">
<li>Enter a <strong className="text-foreground">Speaker ID</strong> and <strong className="text-foreground">Dataset Name</strong>.</li>
<li>Paste your text sentences into the text area and click <strong className="text-foreground">Load Sentences</strong>.</li>
<li>Press <kbd className="bg-secondary border border-border px-1.5 py-0.5 rounded text-xs">Space</kbd> or click the microphone to start recording.</li>
<li>Rate the recording and select an emotion (optional).</li>
<li>Press <kbd className="bg-secondary border border-border px-1.5 py-0.5 rounded text-xs">Ctrl + S</kbd> or click "Save & Next" to save.</li>
<li>When finished, click <strong className="text-foreground">Download Dataset</strong> in Settings.</li>
</ol>
</section>
<div className="grid md:grid-cols-2 gap-6">
{/* Features */}
<section className="space-y-3">
<h3 className="text-lg font-semibold flex items-center gap-2">
✨ Features
</h3>
<ul className="space-y-2 text-sm">
<li className="flex items-start gap-2">
<Mic className="w-4 h-4 mt-0.5 text-primary flex-shrink-0" />
<span><strong>Emotion Tagging:</strong> Label recordings with emotions like Happy, Sad, or Whisper.</span>
</li>
<li className="flex items-start gap-2">
<Bookmark className="w-4 h-4 mt-0.5 text-primary flex-shrink-0" />
<span><strong>Bookmarks:</strong> Flag difficult sentences to review later.</span>
</li>
<li className="flex items-start gap-2">
<Search className="w-4 h-4 mt-0.5 text-primary flex-shrink-0" />
<span><strong>Search:</strong> Find specific sentences by keyword.</span>
</li>
<li className="flex items-start gap-2">
<SkipForward className="w-4 h-4 mt-0.5 text-primary flex-shrink-0" />
<span><strong>Skip:</strong> Skip irrelevant or problematic sentences.</span>
</li>
</ul>
</section>
{/* Keyboard Shortcuts */}
<section className="space-y-3">
<h3 className="text-lg font-semibold flex items-center gap-2">
⌨️ Shortcuts
</h3>
<div className="space-y-2 text-sm">
<div className="flex justify-between items-center bg-secondary/30 p-2 rounded">
<span>Start/Stop Recording</span>
<kbd className="bg-background border border-border px-2 py-0.5 rounded text-xs font-mono">Space</kbd>
</div>
<div className="flex justify-between items-center bg-secondary/30 p-2 rounded">
<span>Save & Next</span>
<kbd className="bg-background border border-border px-2 py-0.5 rounded text-xs font-mono">Ctrl + S</kbd>
</div>
<div className="flex justify-between items-center bg-secondary/30 p-2 rounded">
<span>Next Sentence</span>
<kbd className="bg-background border border-border px-2 py-0.5 rounded text-xs font-mono">→</kbd>
</div>
<div className="flex justify-between items-center bg-secondary/30 p-2 rounded">
<span>Previous Sentence</span>
<kbd className="bg-background border border-border px-2 py-0.5 rounded text-xs font-mono">←</kbd>
</div>
<div className="flex justify-between items-center bg-secondary/30 p-2 rounded">
<span>Focus Search</span>
<kbd className="bg-background border border-border px-2 py-0.5 rounded text-xs font-mono">Ctrl + F</kbd>
</div>
</div>
</section>
</div>
{/* Dataset Format */}
<section className="space-y-3 border-t border-border pt-6">
<h3 className="text-lg font-semibold flex items-center gap-2">
<FolderDown className="w-5 h-5 text-primary" />
Dataset Export Format
</h3>
<p className="text-sm text-muted-foreground">
When you download your dataset, you'll get a ZIP file with the following structure:
</p>
<div className="bg-secondary/30 rounded-lg p-4 font-mono text-sm">
<div className="space-y-1">
<div className="flex items-center gap-2">
<FolderDown className="w-4 h-4 text-yellow-500" />
<span className="font-semibold">dataset.zip</span>
</div>
<div className="ml-6 space-y-1 border-l-2 border-border pl-4">
<div className="flex items-center gap-2">
<FolderDown className="w-4 h-4 text-yellow-500" />
<span>audio/</span>
</div>
<div className="ml-6 space-y-1 border-l-2 border-border pl-4">
<div className="flex items-center gap-2 text-muted-foreground">
<FileAudio className="w-4 h-4 text-blue-500" />
<span>speaker_001_line1_hello_world.wav</span>
</div>
<div className="flex items-center gap-2 text-muted-foreground">
<FileAudio className="w-4 h-4 text-blue-500" />
<span>speaker_001_line2_how_are_you.wav</span>
</div>
</div>
<div className="flex items-center gap-2">
<FolderDown className="w-4 h-4 text-yellow-500" />
<span>transcriptions/</span>
</div>
<div className="ml-6 space-y-1 border-l-2 border-border pl-4">
<div className="flex items-center gap-2 text-muted-foreground">
<FileText className="w-4 h-4 text-green-500" />
<span>speaker_001_line1_hello_world.txt</span>
</div>
<div className="flex items-center gap-2 text-muted-foreground">
<FileText className="w-4 h-4 text-green-500" />
<span>speaker_001_line2_how_are_you.txt</span>
</div>
</div>
</div>
</div>
</div>
{/* Transcription Format */}
<div className="mt-4">
<h4 className="font-semibold text-sm mb-2 flex items-center gap-2">
<FileText className="w-4 h-4 text-green-500" />
Transcription File Format
</h4>
<div className="bg-secondary/30 rounded-lg p-4 font-mono text-xs overflow-x-auto">
<pre className="text-muted-foreground">{`[METADATA]
Recording_ID: speaker_001_line1_hello_world.wav
Speaker_ID: speaker_001
Dataset_Name: my_dataset
Timestamp: 2024-12-13T10:30:00Z
Emotion: neutral
Rating: 5
Duration: 2.5
[TEXT]
Hello world, this is a sample sentence.`}</pre>
</div>
</div>
{/* Audio Format */}
<div className="mt-4 grid md:grid-cols-2 gap-4">
<div>
<h4 className="font-semibold text-sm mb-2 flex items-center gap-2">
<FileAudio className="w-4 h-4 text-blue-500" />
Audio Format
</h4>
<ul className="text-sm text-muted-foreground space-y-1">
<li>• Format: <strong className="text-foreground">WAV</strong></li>
<li>• Sample Rate: <strong className="text-foreground">48kHz</strong></li>
<li>• Channels: <strong className="text-foreground">Mono</strong></li>
<li>• Bit Depth: <strong className="text-foreground">16-bit</strong></li>
</ul>
</div>
<div>
<h4 className="font-semibold text-sm mb-2 flex items-center gap-2">
<FileJson className="w-4 h-4 text-purple-500" />
Compatible With
</h4>
<ul className="text-sm text-muted-foreground space-y-1">
<li>• Coqui TTS</li>
<li>• Mozilla TTS</li>
<li>• VITS / SoVITS</li>
<li>• Hugging Face Datasets</li>
</ul>
</div>
</div>
</section>
</CardContent>
</Card>
</motion.div>
</>
)}
</AnimatePresence>
);
}
|