Spaces:

Ronaldodev
/

yo-ha-asr

Sleeping

App Files Files Community

Ronaldodev commited on 14 days ago

Commit

2d05242

verified ·

1 Parent(s): d64e640

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +476 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,476 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>STT Yoruba/Hausa</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .container {
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            max-width: 700px;
+            width: 100%;
+            padding: 40px;
+        }
+        h1 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 10px;
+            font-size: 2.5em;
+        }
+        .subtitle {
+            text-align: center;
+            color: #666;
+            margin-bottom: 30px;
+            font-size: 1.1em;
+        }
+        .language-selector {
+            display: flex;
+            gap: 10px;
+            justify-content: center;
+            margin-bottom: 30px;
+        }
+        .lang-btn {
+            padding: 15px 40px;
+            border: 2px solid #667eea;
+            background: white;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: bold;
+            transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .lang-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+        }
+        .lang-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border-color: transparent;
+        }
+        .upload-area {
+            border: 3px dashed #e0e0e0;
+            border-radius: 15px;
+            padding: 40px;
+            text-align: center;
+            margin-bottom: 20px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .upload-area:hover {
+            border-color: #667eea;
+            background: #f8f9ff;
+        }
+        .upload-area.dragover {
+            border-color: #667eea;
+            background: #f0f2ff;
+        }
+        #fileInput {
+            display: none;
+        }
+        .upload-icon {
+            font-size: 4em;
+            margin-bottom: 10px;
+        }
+        .record-section {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .record-btn {
+            padding: 20px 40px;
+            font-size: 18px;
+            border: none;
+            border-radius: 50px;
+            cursor: pointer;
+            font-weight: bold;
+            transition: all 0.3s;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .record-btn.inactive {
+            background: #4CAF50;
+            color: white;
+        }
+        .record-btn.recording {
+            background: #f44336;
+            color: white;
+            animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+        .transcribe-btn {
+            width: 100%;
+            padding: 15px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 10px;
+            font-size: 18px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s;
+            margin-bottom: 20px;
+        }
+        .transcribe-btn:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
+        }
+        .transcribe-btn:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+        }
+        .result-box {
+            background: #f5f5f5;
+            border-radius: 10px;
+            padding: 20px;
+            margin-top: 20px;
+            display: none;
+        }
+        .result-box.show {
+            display: block;
+        }
+        .result-label {
+            font-weight: bold;
+            color: #555;
+            margin-bottom: 10px;
+        }
+        .result-text {
+            font-size: 18px;
+            color: #333;
+            line-height: 1.6;
+        }
+        .loading {
+            text-align: center;
+            color: #667eea;
+            font-weight: bold;
+            margin-top: 20px;
+            display: none;
+        }
+        .spinner {
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #667eea;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 20px auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .error {
+            background: #ffebee;
+            color: #c62828;
+            padding: 15px;
+            border-radius: 10px;
+            margin-top: 20px;
+            display: none;
+            border-left: 4px solid #c62828;
+        }
+        .success {
+            background: #e8f5e9;
+            color: #2e7d32;
+            padding: 15px;
+            border-radius: 10px;
+            margin-top: 20px;
+            display: none;
+            border-left: 4px solid #2e7d32;
+        }
+        .file-info {
+            background: #e3f2fd;
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+            display: none;
+        }
+        @media (max-width: 768px) {
+            .container {
+                padding: 20px;
+            }
+            h1 {
+                font-size: 1.8em;
+            }
+            .language-selector {
+                flex-direction: column;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🎤 Speech-to-Text</h1>
+        <p class="subtitle">Yoruba & Hausa</p>
+        <!-- Sélection de langue -->
+        <div class="language-selector">
+            <button class="lang-btn active" data-lang="yoruba">
+                <span>🇳🇬</span>
+                <span>Yoruba</span>
+            </button>
+            <button class="lang-btn" data-lang="hausa">
+                <span>🇳🇬</span>
+                <span>Hausa</span>
+            </button>
+        </div>
+        <!-- Zone d'enregistrement -->
+        <div class="record-section">
+            <button class="record-btn inactive" id="recordBtn">
+                <span id="recordIcon">🎙️</span>
+                <span id="recordText">Enregistrer</span>
+            </button>
+            <div style="margin-top: 10px; color: #666;" id="recordTimer"></div>
+        </div>
+        <div style="text-align: center; margin: 20px 0; color: #999;">OU</div>
+        <!-- Zone d'upload -->
+        <div class="upload-area" id="uploadArea">
+            <div class="upload-icon">📁</div>
+            <div><strong>Cliquez pour choisir un fichier</strong></div>
+            <div style="margin-top: 5px; color: #999;">ou glissez-déposez un fichier audio</div>
+            <div style="margin-top: 10px; color: #999; font-size: 0.9em;">(MP3, WAV, M4A, OGG)</div>
+            <input type="file" id="fileInput" accept="audio/*">
+        </div>
+        <!-- Info fichier -->
+        <div class="file-info" id="fileInfo"></div>
+        <!-- Bouton transcrire -->
+        <button class="transcribe-btn" id="transcribeBtn" disabled>
+            Transcrire
+        </button>
+        <!-- Loading -->
+        <div class="loading" id="loading">
+            <div class="spinner"></div>
+            <p>Transcription en cours...</p>
+        </div>
+        <!-- Messages -->
+        <div class="error" id="error"></div>
+        <div class="success" id="success"></div>
+        <!-- Résultat -->
+        <div class="result-box" id="resultBox">
+            <div class="result-label">📝 Transcription :</div>
+            <div class="result-text" id="resultText"></div>
+        </div>
+    </div>
+    <script>
+        let selectedLanguage = 'yoruba';
+        let selectedFile = null;
+        let mediaRecorder = null;
+        let audioChunks = [];
+        let recordingStartTime = null;
+        let timerInterval = null;
+        // Éléments DOM
+        const langBtns = document.querySelectorAll('.lang-btn');
+        const uploadArea = document.getElementById('uploadArea');
+        const fileInput = document.getElementById('fileInput');
+        const fileInfo = document.getElementById('fileInfo');
+        const transcribeBtn = document.getElementById('transcribeBtn');
+        const recordBtn = document.getElementById('recordBtn');
+        const recordIcon = document.getElementById('recordIcon');
+        const recordText = document.getElementById('recordText');
+        const recordTimer = document.getElementById('recordTimer');
+        const loading = document.getElementById('loading');
+        const errorDiv = document.getElementById('error');
+        const successDiv = document.getElementById('success');
+        const resultBox = document.getElementById('resultBox');
+        const resultText = document.getElementById('resultText');
+        // Sélection de langue
+        langBtns.forEach(btn => {
+            btn.addEventListener('click', function() {
+                langBtns.forEach(b => b.classList.remove('active'));
+                this.classList.add('active');
+                selectedLanguage = this.dataset.lang;
+            });
+        });
+        // Upload de fichier
+        uploadArea.addEventListener('click', () => fileInput.click());
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('dragover');
+        });
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('dragover');
+        });
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('dragover');
+            const file = e.dataTransfer.files[0];
+            if (file && file.type.startsWith('audio/')) {
+                handleFile(file);
+            } else {
+                showError('Veuillez déposer un fichier audio valide');
+            }
+        });
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) {
+                handleFile(e.target.files[0]);
+            }
+        });
+        function handleFile(file) {
+            selectedFile = file;
+            fileInfo.innerHTML = `
+                <strong>📄 Fichier sélectionné :</strong><br>
+                ${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)
+            `;
+            fileInfo.style.display = 'block';
+            transcribeBtn.disabled = false;
+            resultBox.classList.remove('show');
+        }
+        // Enregistrement audio
+        recordBtn.addEventListener('click', toggleRecording);
+        async function toggleRecording() {
+            if (mediaRecorder && mediaRecorder.state === 'recording') {
+                // Arrêter l'enregistrement
+                mediaRecorder.stop();
+                clearInterval(timerInterval);
+                recordTimer.textContent = '';
+            } else {
+                // Démarrer l'enregistrement
+                try {
+                    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                    mediaRecorder = new MediaRecorder(stream);
+                    audioChunks = [];
+                    mediaRecorder.ondataavailable = (e) => {
+                        audioChunks.push(e.data);
+                    };
+                    mediaRecorder.onstop = () => {
+                        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+                        const audioFile = new File([audioBlob], 'recording.wav', { type: 'audio/wav' });
+                        handleFile(audioFile);
+                        // Arrêter le stream
+                        stream.getTracks().forEach(track => track.stop());
+                        // Reset UI
+                        recordBtn.classList.remove('recording');
+                        recordBtn.classList.add('inactive');
+                        recordIcon.textContent = '🎙️';
+                        recordText.textContent = 'Enregistrer';
+                    };
+                    mediaRecorder.start();
+                    recordBtn.classList.remove('inactive');
+                    recordBtn.classList.add('recording');
+                    recordIcon.textContent = '⏹️';
+                    recordText.textContent = 'Arrêter';
+                    // Timer
+                    recordingStartTime = Date.now();
+                    timerInterval = setInterval(updateTimer, 1000);
+                } catch (err) {
+                    showError('Impossible d\'accéder au microphone');
+                    console.error(err);
+                }
+            }
+        }
+        function updateTimer() {
+            const elapsed = Math.floor((Date.now() - recordingStartTime) / 1000);
+            const minutes = Math.floor(elapsed / 60);
+            const seconds = elapsed % 60;
+            recordTimer.textContent = `⏱️ ${minutes}:${seconds.toString().padStart(2, '0')}`;
+        }
+        // Transcription
+        transcribeBtn.addEventListener('click', transcribe);
+        async function transcribe() {
+            if (!selectedFile) {
+                showError('Aucun fichier sélectionné');
+                return;
+            }
+            loading.style.display = 'block';
+            errorDiv.style.display = 'none';
+            successDiv.style.display = 'none';
+            resultBox.classList.remove('show');
+            transcribeBtn.disabled = true;
+            const formData = new FormData();
+            formData.append('audio', selectedFile);
+            formData.append('language', selectedLanguage);
+            try {
+                const response = await fetch('/stt', {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await response.json();
+                if (data.success) {
+                    resultText.textContent = data.transcription;
+                    resultBox.classList.add('show');
+                    showSuccess('✅ Transcription réussie !');
+                } else {
+                    showError(data.error || 'Erreur lors de la transcription');
+                }
+            } catch (error) {
+                showError('Erreur de connexion au serveur');
+                console.error(error);
+            } finally {
+                loading.style.display = 'none';
+                transcribeBtn.disabled = false;
+            }
+        }
+        function showError(message) {
+            errorDiv.textContent = '❌ ' + message;
+            errorDiv.style.display = 'block';
+            setTimeout(() => {
+                errorDiv.style.display = 'none';
+            }, 5000);
+        }
+        function showSuccess(message) {
+            successDiv.textContent = message;
+            successDiv.style.display = 'block';
+            setTimeout(() => {
+                successDiv.style.display = 'none';
+            }, 3000);
+        }
+    </script>
+</body>
+</html>