Spaces:

awacke1
/

SectorMultiplayerChatServer

Running

App Files Files Community

awacke1 commited on Mar 2

Commit

88b617e

verified ·

1 Parent(s): f55a08c

Update frontend/index.html

Browse files

Files changed (1) hide show

frontend/index.html +204 -3

frontend/index.html CHANGED Viewed

@@ -1,10 +1,211 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Paste Image to Chat</title>
 </head>
 <body>
-  <div id="paste-target">Paste an image here (Ctrl+V)</div>
-  <script src="main.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
 <html>
 <head>
+    <title>ASR and Image Paster Demo</title>
+    <style>
+        body {
+            font-family: sans-serif;
+            padding: 20px;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        button {
+            padding: 10px 20px;
+            margin: 10px 5px;
+            font-size: 16px;
+        }
+        #status {
+            margin: 10px 0;
+            padding: 10px;
+            background: #e8f5e9;
+            border-radius: 4px;
+        }
+        #output {
+            white-space: pre-wrap;
+            padding: 15px;
+            background: #f5f5f5;
+            border-radius: 4px;
+            margin: 10px 0;
+            min-height: 100px;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        .controls {
+            margin: 10px 0;
+        }
+        #paste-target {
+            border: 2px dashed #ccc;
+            padding: 20px;
+            text-align: center;
+            cursor: pointer;
+            margin: 10px 0;
+        }
+    </style>
 </head>
 <body>
+    <div class="controls">
+        <button id="start">Start Listening</button>
+        <button id="stop" disabled>Stop Listening</button>
+        <button id="clear">Clear Text</button>
+    </div>
+    <div id="status">Ready</div>
+    <div id="output"></div>
+    <div id="paste-target">Paste an image here (Ctrl+V)</div>
+    <input type="hidden" id="streamlit-data" value="">
+    <script>
+        // Streamlit communication functions
+        function sendMessageToStreamlitClient(type, data) {
+            var outData = Object.assign({
+                isStreamlitMessage: true,
+                type: type,
+            }, data);
+            window.parent.postMessage(outData, "*");
+        }
+        function init() {
+            sendMessageToStreamlitClient("streamlit:componentReady", {apiVersion: 1});
+        }
+        function setFrameHeight(height) {
+            sendMessageToStreamlitClient("streamlit:setFrameHeight", {height: height});
+        }
+        function sendDataToPython(data) {
+            sendMessageToStreamlitClient("streamlit:setComponentValue", data);
+        }
+        // ASR Setup
+        if (!('webkitSpeechRecognition' in window)) {
+            alert('Speech recognition not supported');
+        } else {
+            const recognition = new webkitSpeechRecognition();
+            const startButton = document.getElementById('start');
+            const stopButton = document.getElementById('stop');
+            const clearButton = document.getElementById('clear');
+            const status = document.getElementById('status');
+            const output = document.getElementById('output');
+            let fullTranscript = '';
+            let lastUpdateTime = Date.now();
+            recognition.continuous = true;
+            recognition.interimResults = true;
+            const startRecognition = () => {
+                try {
+                    recognition.start();
+                    status.textContent = 'Listening...';
+                    startButton.disabled = true;
+                    stopButton.disabled = false;
+                } catch (e) {
+                    console.error(e);
+                    status.textContent = 'Error: ' + e.message;
+                }
+            };
+            window.addEventListener('load', () => {
+                setTimeout(startRecognition, 1000);
+            });
+            startButton.onclick = startRecognition;
+            stopButton.onclick = () => {
+                recognition.stop();
+                status.textContent = 'Stopped';
+                startButton.disabled = false;
+                stopButton.disabled = true;
+            };
+            clearButton.onclick = () => {
+                fullTranscript = '';
+                output.textContent = '';
+                sendDataToPython({ transcript: '', type: 'text' });
+            };
+            recognition.onresult = (event) => {
+                let interimTranscript = '';
+                let finalTranscript = '';
+                for (let i = event.resultIndex; i < event.results.length; i++) {
+                    const transcript = event.results[i][0].transcript;
+                    if (event.results[i].isFinal) {
+                        finalTranscript += transcript + '\n';
+                    } else {
+                        interimTranscript += transcript;
+                    }
+                }
+                if (finalTranscript || (Date.now() - lastUpdateTime > 5000)) {
+                    if (finalTranscript) {
+                        fullTranscript += finalTranscript;
+                        sendDataToPython({ transcript: fullTranscript, type: 'text' });
+                    }
+                    lastUpdateTime = Date.now();
+                }
+                output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
+                output.scrollTop = output.scrollHeight;
+            };
+            recognition.onend = () => {
+                if (!stopButton.disabled) {
+                    try {
+                        recognition.start();
+                        console.log('Restarted recognition');
+                    } catch (e) {
+                        console.error('Failed to restart recognition:', e);
+                        status.textContent = 'Error restarting: ' + e.message;
+                        startButton.disabled = false;
+                        stopButton.disabled = true;
+                    }
+                }
+            };
+            recognition.onerror = (event) => {
+                console.error('Recognition error:', event.error);
+                status.textContent = 'Error: ' + event.error;
+                if (event.error === 'not-allowed' || event.error === 'service-not-allowed') {
+                    startButton.disabled = false;
+                    stopButton.disabled = true;
+                }
+            };
+        }
+        // Image Pasting Setup
+        const pasteTarget = document.getElementById('paste-target');
+        pasteTarget.addEventListener("paste", (pasteEvent) => {
+            const items = (pasteEvent.clipboardData || window.clipboardData).items;
+            for (let i = 0; i < items.length; i++) {
+                if (items[i].type.indexOf('image') !== -1) {
+                    const blob = items[i].getAsFile();
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        sendDataToPython({ image: e.target.result, type: 'image' });
+                        pasteTarget.innerHTML = "<p>Image pasted! Processing...</p>";
+                    };
+                    reader.readAsDataURL(blob);
+                }
+            }
+            pasteEvent.preventDefault();
+        });
+        // Handle data from Python (if needed)
+        function onDataFromPython(event) {
+            if (event.data.type !== "streamlit:render") return;
+            // Could handle Python-sent data here if needed
+        }
+        // Hook things up
+        window.addEventListener("message", onDataFromPython);
+        init();
+        // Set iframe height
+        window.addEventListener("load", function() {
+            window.setTimeout(function() {
+                setFrameHeight(document.documentElement.clientHeight);
+            }, 0);
+        });
+    </script>
 </body>
 </html>