Centered help modal, add dataset format guide, add welcome popup

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import HelpModal from '@/components/HelpModal';
+import QuickTourPopup from '@/components/QuickTourPopup';
 
 
 import TextInput from '@/components/TextInput';
@@ -424,6 +425,7 @@ export default function Home() {
         datasetName={datasetName}
       />
       <HelpModal isOpen={isHelpOpen} onClose={() => setIsHelpOpen(false)} />
+      <QuickTourPopup />
     </main>
   );
 }

src/components/HelpModal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { X, Keyboard, Mic, Save, Search, SkipForward, Bookmark, HelpCircle } from 'lucide-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';
 
@@ -23,36 +23,36 @@ export default function HelpModal({ isOpen, onClose }: HelpModalProps) {
                         onClick={onClose}
                     />
                     <motion.div
-                        initial={{ opacity: 0, scale: 0.95, y: 20 }}
-                        animate={{ opacity: 1, scale: 1, y: 0 }}
-                        exit={{ opacity: 0, scale: 0.95, y: 20 }}
-                        className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl z-50 max-h-[85vh] overflow-y-auto"
+                        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>
-                            <CardHeader>
+                        <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">
+                                    <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">
+                            <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>Speaker ID</strong> and <strong>Dataset Name</strong>.</li>
-                                        <li>Paste your text sentences into the text area and click <strong>Load Sentences</strong>.</li>
-                                        <li>Press <strong>Spacebar</strong> or click the microphone to start recording.</li>
+                                        <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 <strong>Ctrl + S</strong> or click "Save & Next" to save and move to the next sentence.</li>
-                                        <li>When finished, go to <strong>Settings</strong> to export your dataset.</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>
 
@@ -64,19 +64,19 @@ export default function HelpModal({ isOpen, onClose }: HelpModalProps) {
                                         </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" />
+                                                <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" />
+                                                <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" />
+                                                <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" />
+                                                <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>
@@ -90,27 +90,125 @@ export default function HelpModal({ isOpen, onClose }: HelpModalProps) {
                                         <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-1.5 rounded text-xs">Space</kbd>
+                                                <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-1.5 rounded text-xs">Ctrl + S</kbd>
+                                                <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-1.5 rounded text-xs">→</kbd>
+                                                <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-1.5 rounded text-xs">←</kbd>
+                                                <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-1.5 rounded text-xs">Ctrl + F</kbd>
+                                                <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>

src/components/QuickTourPopup.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Mic2, HelpCircle } from 'lucide-react';
+
+export default function QuickTourPopup() {
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        // Show popup after a brief delay
+        const showTimer = setTimeout(() => {
+            setIsVisible(true);
+        }, 500);
+
+        // Hide popup after 3 seconds
+        const hideTimer = setTimeout(() => {
+            setIsVisible(false);
+        }, 3500);
+
+        return () => {
+            clearTimeout(showTimer);
+            clearTimeout(hideTimer);
+        };
+    }, []);
+
+    return (
+        <AnimatePresence>
+            {isVisible && (
+                <motion.div
+                    initial={{ opacity: 0, y: 50, scale: 0.9 }}
+                    animate={{ opacity: 1, y: 0, scale: 1 }}
+                    exit={{ opacity: 0, y: 20, scale: 0.95 }}
+                    transition={{ type: 'spring', damping: 20, stiffness: 300 }}
+                    className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50"
+                >
+                    <div className="bg-primary text-primary-foreground px-6 py-4 rounded-2xl shadow-2xl shadow-primary/25 flex items-center gap-4 max-w-md">
+                        <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center flex-shrink-0">
+                            <Mic2 className="w-6 h-6" />
+                        </div>
+                        <div>
+                            <h3 className="font-bold text-lg">Welcome to TTS Dataset Collector!</h3>
+                            <p className="text-sm opacity-90 mt-1">
+                                Click the <HelpCircle className="w-4 h-4 inline mx-1" /> icon anytime for help & shortcuts
+                            </p>
+                        </div>
+                    </div>
+                </motion.div>
+            )}
+        </AnimatePresence>
+    );
+}