Spaces:

atlury
/

digitalhuman

Running

App Files Files Community

atlury commited on Sep 15, 2024

Commit

1ad72f4

verified ·

1 Parent(s): f1943e1

Create index.html

Browse files

Files changed (1) hide show

index.html +216 -0

index.html ADDED Viewed

	@@ -0,0 +1,216 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Voice Chat Bot</title>
+    <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@ricky0123/vad-web@0.0.18/dist/bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2"></script>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f0f0f0;
+            color: #333;
+        }
+        h1 {
+            text-align: center;
+            color: #2c3e50;
+        }
+        #chat-container {
+            display: flex;
+            flex-direction: column;
+            height: 70vh;
+        }
+        #conversation {
+            flex-grow: 1;
+            border: 1px solid #ccc;
+            padding: 10px;
+            overflow-y: scroll;
+            background-color: white;
+            border-radius: 5px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        #controls {
+            display: flex;
+            justify-content: center;
+            margin-top: 20px;
+        }
+        button {
+            font-size: 18px;
+            padding: 10px 20px;
+            margin: 0 10px;
+            background-color: #3498db;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        button:hover {
+            background-color: #2980b9;
+        }
+        button:disabled {
+            background-color: #bdc3c7;
+            cursor: not-allowed;
+        }
+        #visualizer {
+            width: 100%;
+            height: 100px;
+            background-color: #34495e;
+            margin-top: 20px;
+            border-radius: 5px;
+            overflow: hidden;
+        }
+        .bar {
+            width: 5px;
+            height: 100%;
+            background-color: #3498db;
+            display: inline-block;
+            margin-right: 1px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Voice Chat Bot</h1>
+    <div id="chat-container">
+        <div id="conversation"></div>
+        <div id="visualizer"></div>
+        <div id="controls">
+            <button id="startButton">Start Listening</button>
+            <button id="stopButton" disabled>Stop Listening</button>
+        </div>
+    </div>
+    <script type="module">
+        import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
+        env.localModelPath = './models';
+        const conversationDiv = document.getElementById('conversation');
+        const startButton = document.getElementById('startButton');
+        const stopButton = document.getElementById('stopButton');
+        const visualizer = document.getElementById('visualizer');
+        let myvad;
+        let sttPipeline;
+        let ttsPipeline;
+        let audioContext;
+        let analyser;
+        let dataArray;
+        let bars;
+        function createVisualizer() {
+            const barCount = 64;
+            for (let i = 0; i < barCount; i++) {
+                const bar = document.createElement('div');
+                bar.className = 'bar';
+                visualizer.appendChild(bar);
+            }
+            bars = visualizer.getElementsByClassName('bar');
+        }
+        function updateVisualizer() {
+            analyser.getByteFrequencyData(dataArray);
+            for (let i = 0; i < bars.length; i++) {
+                const barHeight = dataArray[i] / 2;
+                bars[i].style.height = barHeight + 'px';
+            }
+            requestAnimationFrame(updateVisualizer);
+        }
+        async function initializePipelines() {
+            try {
+                sttPipeline = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny.en');
+                ttsPipeline = await pipeline('text-to-speech', 'Xenova/mms-tts-eng', {
+                    quantized: false,
+                });
+                addMessage('System', 'Voice Chat Bot initialized. Click "Start Listening" to begin.');
+            } catch (error) {
+                console.error('Error initializing pipelines:', error);
+                addMessage('System', 'Error initializing Voice Chat Bot. Please check the console for details.');
+            }
+        }
+        async function processSpeech(audio) {
+            try {
+                if (!sttPipeline || !ttsPipeline) {
+                    throw new Error('Pipelines not initialized');
+                }
+                const transcription = await sttPipeline(audio);
+                addMessage('User', transcription.text);
+                const botResponse = `I heard you say: "${transcription.text}". This is a placeholder response.`;
+                addMessage('Bot', botResponse);
+                const speechOutput = await ttsPipeline(botResponse);
+                playAudio(speechOutput.audio);
+            } catch (error) {
+                console.error('Error processing speech:', error);
+                addMessage('System', 'Error processing speech. Please try again.');
+            }
+        }
+        function addMessage(sender, message) {
+            const messageElement = document.createElement('p');
+            messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
+            conversationDiv.appendChild(messageElement);
+            conversationDiv.scrollTop = conversationDiv.scrollHeight;
+        }
+        function playAudio(audioArray) {
+            const audioBuffer = audioContext.createBuffer(1, audioArray.length, 16000);
+            const channelData = audioBuffer.getChannelData(0);
+            channelData.set(audioArray);
+            const source = audioContext.createBufferSource();
+            source.buffer = audioBuffer;
+            source.connect(analyser);
+            analyser.connect(audioContext.destination);
+            source.start();
+        }
+        async function startListening() {
+            try {
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 128;
+                dataArray = new Uint8Array(analyser.frequencyBinCount);
+                myvad = await vad.MicVAD.new({
+                    onSpeechEnd: (audio) => {
+                        processSpeech(audio);
+                    }
+                });
+                await myvad.start();
+                startButton.disabled = true;
+                stopButton.disabled = false;
+                addMessage('System', 'Listening...');
+                updateVisualizer();
+            } catch (error) {
+                console.error('Error starting VAD:', error);
+                addMessage('System', 'Error starting voice detection. Please check your microphone and try again.');
+            }
+        }
+        function stopListening() {
+            if (myvad) {
+                myvad.pause();
+                startButton.disabled = false;
+                stopButton.disabled = true;
+                addMessage('System', 'Stopped listening.');
+            }
+        }
+        startButton.addEventListener('click', startListening);
+        stopButton.addEventListener('click', stopListening);
+        createVisualizer();
+        initializePipelines();
+    </script>
+</body>
+</html>