Spaces:

Coco-18
/

Kapamtalk

Sleeping

App Files Files Community

Coco-18 commited on Mar 17

Commit

6fe5cfd

verified ·

1 Parent(s): eddb57d

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +384 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,384 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Speech Processing App</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        h1, h2 {
+            color: #2c3e50;
+            text-align: center;
+        }
+        .container {
+            background-color: white;
+            border-radius: 8px;
+            padding: 20px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            margin-bottom: 20px;
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+        select, button, input[type="text"], textarea {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font-size: 16px;
+        }
+        button {
+            background-color: #3498db;
+            color: white;
+            border: none;
+            cursor: pointer;
+            font-weight: bold;
+            margin-top: 10px;
+            transition: background-color 0.3s;
+        }
+        button:hover {
+            background-color: #2980b9;
+        }
+        .result {
+            margin-top: 15px;
+            padding: 15px;
+            border-radius: 4px;
+            border-left: 4px solid #3498db;
+            background-color: #ecf0f1;
+            word-wrap: break-word;
+        }
+        .status {
+            margin-top: 10px;
+            font-style: italic;
+            color: #7f8c8d;
+        }
+        .recorder-controls {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 10px;
+        }
+        .recorder-controls button {
+            flex: 1;
+        }
+        .recording-indicator {
+            height: 15px;
+            width: 15px;
+            border-radius: 50%;
+            background-color: gray;
+            display: inline-block;
+            margin-right: 5px;
+        }
+        .recording {
+            background-color: red;
+            animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+        audio {
+            width: 100%;
+            margin-top: 10px;
+        }
+        .tab-container {
+            display: flex;
+            margin-bottom: 20px;
+        }
+        .tab {
+            padding: 10px 20px;
+            background-color: #ddd;
+            cursor: pointer;
+            border-radius: 5px 5px 0 0;
+            border: 1px solid #ccc;
+            border-bottom: none;
+            margin-right: 5px;
+        }
+        .tab.active {
+            background-color: white;
+            font-weight: bold;
+        }
+        .tab-content {
+            display: none;
+        }
+        .tab-content.active {
+            display: block;
+        }
+        .loader {
+            display: none;
+            border: 5px solid #f3f3f3;
+            border-top: 5px solid #3498db;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 2s linear infinite;
+            margin: 20px auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <h1>Speech Processing App</h1>
+    <div class="tab-container">
+        <div class="tab active" onclick="openTab(event, 'asr-tab')">Speech Recognition</div>
+        <div class="tab" onclick="openTab(event, 'tts-tab')">Text to Speech</div>
+    </div>
+    <div id="asr-tab" class="tab-content active">
+        <div class="container">
+            <h2>Automatic Speech Recognition</h2>
+            <div class="form-group">
+                <label for="asr-language">Language:</label>
+                <select id="asr-language">
+                    <option value="kapampangan">Kapampangan</option>
+                    <option value="tagalog">Tagalog</option>
+                    <option value="english" selected>English</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label>Audio Input:</label>
+                <div class="recorder-controls">
+                    <button id="record-button">
+                        <span class="recording-indicator" id="record-indicator"></span> Record
+                    </button>
+                    <button id="stop-button" disabled>Stop Recording</button>
+                </div>
+                <p class="status" id="recording-status">Not recording</p>
+                <label>Or upload audio file:</label>
+                <input type="file" id="audio-upload" accept="audio/*">
+            </div>
+            <button id="transcribe-button">Transcribe</button>
+            <div class="loader" id="asr-loader"></div>
+            <div id="asr-result" class="result" style="display: none;">
+                <h3>Transcription Result:</h3>
+                <p id="transcription-text"></p>
+            </div>
+        </div>
+    </div>
+    <div id="tts-tab" class="tab-content">
+        <div class="container">
+            <h2>Text to Speech</h2>
+            <div class="form-group">
+                <label for="tts-language">Language:</label>
+                <select id="tts-language">
+                    <option value="kapampangan" selected>Kapampangan</option>
+                    <option value="tagalog">Tagalog</option>
+                    <option value="english">English</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="text-input">Enter Text:</label>
+                <textarea id="text-input" rows="5" placeholder="Type the text you want to convert to speech..."></textarea>
+            </div>
+            <button id="synthesize-button">Generate Speech</button>
+            <div class="loader" id="tts-loader"></div>
+            <div id="tts-result" class="result" style="display: none;">
+                <h3>Generated Audio:</h3>
+                <audio id="audio-player" controls></audio>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Global variables for recording
+        let mediaRecorder;
+        let audioChunks = [];
+        let isRecording = false;
+        // Initialize the application
+        document.addEventListener('DOMContentLoaded', function() {
+            // Tab navigation
+            document.getElementById('asr-tab').classList.add('active');
+            // Recording functionality
+            const recordButton = document.getElementById('record-button');
+            const stopButton = document.getElementById('stop-button');
+            const recordingStatus = document.getElementById('recording-status');
+            const recordIndicator = document.getElementById('record-indicator');
+            recordButton.addEventListener('click', async () => {
+                if (!isRecording) {
+                    try {
+                        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                        mediaRecorder = new MediaRecorder(stream);
+                        audioChunks = [];
+                        mediaRecorder.ondataavailable = (event) => {
+                            audioChunks.push(event.data);
+                        };
+                        mediaRecorder.onstop = () => {
+                            isRecording = false;
+                            recordButton.disabled = false;
+                            stopButton.disabled = true;
+                            recordingStatus.textContent = "Recording finished";
+                            recordIndicator.classList.remove('recording');
+                        };
+                        mediaRecorder.start();
+                        isRecording = true;
+                        recordButton.disabled = true;
+                        stopButton.disabled = false;
+                        recordingStatus.textContent = "Recording...";
+                        recordIndicator.classList.add('recording');
+                    } catch (err) {
+                        alert("Could not access microphone: " + err.message);
+                    }
+                }
+            });
+            stopButton.addEventListener('click', () => {
+                if (isRecording && mediaRecorder) {
+                    mediaRecorder.stop();
+                }
+            });
+            // ASR functionality
+            const transcribeButton = document.getElementById('transcribe-button');
+            const asrLanguage = document.getElementById('asr-language');
+            const asrLoader = document.getElementById('asr-loader');
+            const asrResult = document.getElementById('asr-result');
+            const transcriptionText = document.getElementById('transcription-text');
+            const audioUpload = document.getElementById('audio-upload');
+            transcribeButton.addEventListener('click', async () => {
+                let audioFile;
+                // Check if we have a recording or uploaded file
+                if (audioChunks.length > 0) {
+                    audioFile = new Blob(audioChunks, { type: 'audio/webm' });
+                } else if (audioUpload.files.length > 0) {
+                    audioFile = audioUpload.files[0];
+                } else {
+                    alert("Please record audio or upload an audio file first.");
+                    return;
+                }
+                const formData = new FormData();
+                formData.append('audio', audioFile);
+                formData.append('language', asrLanguage.value);
+                // Show loader
+                asrLoader.style.display = 'block';
+                asrResult.style.display = 'none';
+                try {
+                    const response = await fetch('/asr', {
+                        method: 'POST',
+                        body: formData,
+                    });
+                    const data = await response.json();
+                    if (response.ok) {
+                        transcriptionText.textContent = data.transcription;
+                        asrResult.style.display = 'block';
+                    } else {
+                        alert('Error: ' + (data.error || 'Unknown error'));
+                    }
+                } catch (error) {
+                    alert('Failed to connect to server: ' + error.message);
+                } finally {
+                    asrLoader.style.display = 'none';
+                }
+            });
+            // TTS functionality
+            const synthesizeButton = document.getElementById('synthesize-button');
+            const ttsLanguage = document.getElementById('tts-language');
+            const textInput = document.getElementById('text-input');
+            const ttsLoader = document.getElementById('tts-loader');
+            const ttsResult = document.getElementById('tts-result');
+            const audioPlayer = document.getElementById('audio-player');
+            synthesizeButton.addEventListener('click', async () => {
+                const text = textInput.value.trim();
+                if (!text) {
+                    alert('Please enter some text.');
+                    return;
+                }
+                // Show loader
+                ttsLoader.style.display = 'block';
+                ttsResult.style.display = 'none';
+                try {
+                    const response = await fetch('/tts', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({
+                            text: text,
+                            language: ttsLanguage.value
+                        }),
+                    });
+                    const data = await response.json();
+                    if (response.ok) {
+                        // Update audio player with new source
+                        audioPlayer.src = data.file_url;
+                        ttsResult.style.display = 'block';
+                    } else {
+                        alert('Error: ' + (data.error || 'Unknown error'));
+                    }
+                } catch (error) {
+                    alert('Failed to connect to server: ' + error.message);
+                } finally {
+                    ttsLoader.style.display = 'none';
+                }
+            });
+        });
+        // Tab navigation function
+        function openTab(evt, tabName) {
+            // Hide all tab content
+            const tabContents = document.getElementsByClassName('tab-content');
+            for (let i = 0; i < tabContents.length; i++) {
+                tabContents[i].classList.remove('active');
+            }
+            // Remove active class from tabs
+            const tabs = document.getElementsByClassName('tab');
+            for (let i = 0; i < tabs.length; i++) {
+                tabs[i].classList.remove('active');
+            }
+            // Show the selected tab content and add active class to the button
+            document.getElementById(tabName).classList.add('active');
+            evt.currentTarget.classList.add('active');
+        }
+    </script>
+</body>
+</html>