Spaces:

GamerC0der
/

test-2

Sleeping

App Files Files Community

GamerC0der commited on Jan 8

Commit

93e926b

verified ·

1 Parent(s): a6c6e8e

Update app.py

Browse files

Files changed (1) hide show

app.py +147 -178

app.py CHANGED Viewed

@@ -4,6 +4,9 @@ import json
 from curl_cffi import requests
 from openai import OpenAI
 import re
 PORT = 7860
 STT_URL = "https://multi-modal.ai.cloudflare.com/api/inference?model=@cf/deepgram/nova-3&field=audio"
@@ -21,7 +24,7 @@ def simple_md(text):
     text = re.sub(r'\n', r'<br>', text)
     return text
-HTML = """
 <!DOCTYPE html>
 <html>
 <head>
@@ -29,188 +32,73 @@ HTML = """
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
 <body>
-    <h1>Multi-Modal Playground</h1>
     <h2>STT (Nova-3)</h2>
-    <p>Upload audio:</p>
-    <input type="file" id="audioFile" accept="audio/*">
-    <button onclick="transcribe()">Transcribe</button>
-    <p>Status: <span id="status">Idle</span></p>
-    <pre id="result" style="background:#eee;padding:10px"></pre>
     <h2>TTS (AURA-1)</h2>
-    <p>Enter text:</p>
-    <input type="text" id="textInput" placeholder="Enter text to speak" style="width:100%;">
-    <button onclick="generateAudio()">Generate Audio</button>
-    <p>Status: <span id="statusTTS">Idle</span></p>
-    <audio id="audioPlayer" controls style="width:100%;"></audio>
-    <h2>Chat (Llama)</h2>
-    <div id="messages" style="height:300px;overflow-y:scroll;border:1px solid #ccc;padding:10px;margin-bottom:10px;background:#eee;"></div>
-    <input type="text" id="chatInput" placeholder="Type message..." style="width:70%;">
-    <button onclick="sendMessage()">Send</button>
-    <p>Status: <span id="statusChat">Idle</span></p>
-    <h2>Voice Chat</h2>
-    <button id="micBtn" onclick="toggleRecord()" style="font-size:48px;"><i class="fas fa-microphone"></i></button>
-    <p>Status: <span id="statusVoice">Click to start recording</span></p>
-    <audio id="voicePlayer" style="display:none;"></audio>
-    <script>
-        let chatMessages = [];
-        let mediaRecorder;
-        let audioChunks = [];
-        let voiceStream;
-        function renderMD(text) {
-            return text.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>')
-                       .replace(/\*(.*?)\*/g, '<i>$1</i>')
-                       .replace(/`(.*?)`/g, '<code>$1</code>')
-                       .replace(/\n/g, '<br>');
-        }
-        function addMessage(role, content) {
-            const div = document.getElementById('messages');
-            const msg = document.createElement('div');
-            msg.innerHTML = `<strong>${role}:</strong> ${renderMD(content)}`;
-            div.appendChild(msg);
-            div.scrollTop = div.scrollHeight;
-        }
-        async function sendMessage() {
-            const input = document.getElementById('chatInput');
-            const text = input.value.trim();
-            if (!text) return;
-            addMessage('user', text);
-            input.value = '';
-            document.getElementById('statusChat').innerText = 'Thinking...';
-            chatMessages.push({role: 'user', content: text});
-            try {
-                const res = await fetch('/api/chat', {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({messages: chatMessages})
-                });
-                const data = await res.json();
-                const response = data.response;
-                addMessage('assistant', response);
-                chatMessages.push({role: 'assistant', content: response});
-                document.getElementById('statusChat').innerText = 'Done';
-            } catch (e) {
-                console.error('Chat error:', e);
-                document.getElementById('statusChat').innerText = 'Error';
-            }
-        }
-        async function toggleRecord() {
-            const btn = document.getElementById('micBtn');
-            if (!mediaRecorder || mediaRecorder.state === 'inactive') {
-                try {
-                    voiceStream = await navigator.mediaDevices.getUserMedia({audio: true});
-                    mediaRecorder = new MediaRecorder(voiceStream);
-                    audioChunks = [];
-                    mediaRecorder.ondataavailable = e => audioChunks.push(e.data);
-                    mediaRecorder.onstop = processVoice;
-                    mediaRecorder.start();
-                    btn.style.color = 'red';
-                    document.getElementById('statusVoice').innerText = 'Recording... Click to stop';
-                } catch (e) {
-                    console.error('Mic error:', e);
-                    document.getElementById('statusVoice').innerText = 'Error accessing mic';
-                }
-            } else {
-                mediaRecorder.stop();
-                btn.style.color = 'black';
-                document.getElementById('statusVoice').innerText = 'Processing...';
-            }
-        }
-        async function processVoice() {
-            const audioBlob = new Blob(audioChunks, {type: 'audio/webm'});
-            if (voiceStream) {
-                voiceStream.getTracks().forEach(track => track.stop());
-            }
-            document.getElementById('statusVoice').innerText = 'Transcribing...';
-            try {
-                const sttRes = await fetch('/api/stt', {method: 'POST', body: audioBlob});
-                const sttData = await sttRes.json();
-                let userText = '';
-                if (sttData.results && sttData.results.channels && sttData.results.channels[0] &&
-                    sttData.results.channels[0].alternatives && sttData.results.channels[0].alternatives[0]) {
-                    userText = sttData.results.channels[0].alternatives[0].transcript;
-                }
-                if (!userText) {
-                    document.getElementById('statusVoice').innerText = 'No speech detected';
-                    return;
-                }
-                document.getElementById('statusVoice').innerText = 'Thinking...';
-                const chatRes = await fetch('/api/chat', {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({messages: [{role: 'user', content: userText}]})
-                });
-                const chatData = await chatRes.json();
-                const response = chatData.response;
-                document.getElementById('statusVoice').innerText = 'Generating speech...';
-                const ttsRes = await fetch('/api/tts', {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({text: response})
-                });
-                const ttsData = await ttsRes.json();
-                const audioPlayer = document.getElementById('voicePlayer');
-                audioPlayer.src = 'data:audio/webm;base64,' + ttsData.audio;
-                audioPlayer.play();
-                document.getElementById('statusVoice').innerText = 'Done';
-            } catch (e) {
-                console.error('Voice process error:', e);
-                document.getElementById('statusVoice').innerText = 'Error';
-            }
-        }
-        async function transcribe() {
-            const file = document.getElementById('audioFile').files[0];
-            if (!file) return;
-            document.getElementById('status').innerText = 'Processing...';
-            try {
-                const res = await fetch('/api/stt', {method: 'POST', body: file});
-                const data = await res.json();
-                document.getElementById('result').innerText = JSON.stringify(data, null, 2);
-                document.getElementById('status').innerText = 'Done';
-            } catch (e) {
-                console.error('STT error:', e);
-                document.getElementById('status').innerText = 'Error';
-            }
-        }
-        async function generateAudio() {
-            const text = document.getElementById('textInput').value;
-            if (!text) return;
-            document.getElementById('statusTTS').innerText = 'Generating...';
-            try {
-                const res = await fetch('/api/tts', {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({text: text})
-                });
-                const data = await res.json();
-                document.getElementById('audioPlayer').src = 'data:audio/webm;base64,' + data.audio;
-                document.getElementById('statusTTS').innerText = 'Done';
-            } catch (e) {
-                console.error('TTS error:', e);
-                document.getElementById('statusTTS').innerText = 'Error';
-            }
-        }
-        // Enter key for chat
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('chatInput').addEventListener('keypress', function(e) {
-                if (e.key === 'Enter') {
-                    sendMessage();
-                }
-            });
-        });
-    </script>
 </body>
 </html>
 """
@@ -221,12 +109,13 @@ class Handler(http.server.BaseHTTPRequestHandler):
             self.send_response(200)
             self.send_header("Content-type", "text/html")
             self.end_headers()
-            self.wfile.write(HTML.encode())
         else:
             self.send_error(404)
     def do_POST(self):
         if self.path == '/api/stt':
             content_length = int(self.headers['Content-Length'])
             body = self.rfile.read(content_length)
             r = requests.post(STT_URL, data=body, impersonate="chrome")
@@ -234,6 +123,84 @@ class Handler(http.server.BaseHTTPRequestHandler):
             self.send_header("Content-type", "application/json")
             self.end_headers()
             self.wfile.write(r.content)
         elif self.path == '/api/tts':
             content_length = int(self.headers['Content-Length'])
             body_str = self.rfile.read(content_length).decode('utf-8')
@@ -248,6 +215,7 @@ class Handler(http.server.BaseHTTPRequestHandler):
             self.send_header("Content-type", "application/json")
             self.end_headers()
             self.wfile.write(json.dumps(response).encode())
         elif self.path == '/api/chat':
             content_length = int(self.headers['Content-Length'])
             body_str = self.rfile.read(content_length).decode('utf-8')
@@ -267,6 +235,7 @@ class Handler(http.server.BaseHTTPRequestHandler):
             self.send_header("Content-type", "application/json")
             self.end_headers()
             self.wfile.write(json.dumps(response).encode())
         else:
             self.send_error(404)

 from curl_cffi import requests
 from openai import OpenAI
 import re
+import cgi
+import urllib.parse
+from html import escape
 PORT = 7860
 STT_URL = "https://multi-modal.ai.cloudflare.com/api/inference?model=@cf/deepgram/nova-3&field=audio"
     text = re.sub(r'\n', r'<br>', text)
     return text
+MAIN_HTML = """
 <!DOCTYPE html>
 <html>
 <head>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
 <body>
+    <h1>Multi-Modal Playground (No JS)</h1>
     <h2>STT (Nova-3)</h2>
+    <form action="/stt" method="post" enctype="multipart/form-data">
+        <p>Upload audio:</p>
+        <input type="file" name="audio" accept="audio/*" required>
+        <button type="submit">Transcribe</button>
+    </form>
     <h2>TTS (AURA-1)</h2>
+    <form action="/tts" method="post">
+        <p>Enter text:</p>
+        <input type="text" name="text" placeholder="Enter text to speak" style="width:100%;" required>
+        <button type="submit">Generate Audio</button>
+    </form>
+    <h2>Chat (Llama) - Single Turn</h2>
+    <form action="/chat" method="post">
+        <p>Enter message:</p>
+        <textarea name="message" placeholder="Type your message..." style="width:100%; height:60px;" required></textarea>
+        <button type="submit">Send</button>
+    </form>
+    <hr>
+    <a href="/">Refresh Playground</a>
+</body>
+</html>
+"""
+STT_RESULT_HTML = """
+<!DOCTYPE html>
+<html>
+<head><title>STT Result</title></head>
+<body>
+    <h1>STT Transcription Result</h1>
+    <pre style="background:#eee;padding:10px;white-space:pre-wrap;">{result}</pre>
+    <a href="/">Back to Playground</a>
+</body>
+</html>
+"""
+TTS_RESULT_HTML = """
+<!DOCTYPE html>
+<html>
+<head><title>TTS Result</title></head>
+<body>
+    <h1>TTS Generated Audio</h1>
+    <audio controls style="width:100%;">
+        <source src="data:audio/webm;base64,{audio_b64}" type="audio/webm">
+        Your browser does not support the audio element.
+    </audio>
+    <p><a href="/">Back to Playground</a></p>
+</body>
+</html>
+"""
+CHAT_RESULT_HTML = """
+<!DOCTYPE html>
+<html>
+<head><title>Chat Result</title></head>
+<body>
+    <h1>Chat Response</h1>
+    <div style="border:1px solid #ccc;padding:10px;margin-bottom:10px;background:#eee;">
+        <strong>You:</strong> {user_message}<br><br>
+        <strong>Assistant:</strong> {response}
+    </div>
+    <p><a href="/">Back to Playground</a></p>
 </body>
 </html>
 """
             self.send_response(200)
             self.send_header("Content-type", "text/html")
             self.end_headers()
+            self.wfile.write(MAIN_HTML.encode())
         else:
             self.send_error(404)
     def do_POST(self):
         if self.path == '/api/stt':
+            # Keep old API endpoint for compatibility (though not used in JS-less)
             content_length = int(self.headers['Content-Length'])
             body = self.rfile.read(content_length)
             r = requests.post(STT_URL, data=body, impersonate="chrome")
             self.send_header("Content-type", "application/json")
             self.end_headers()
             self.wfile.write(r.content)
+            return
+        elif self.path == '/stt':
+            form = cgi.FieldStorage(
+                fp=self.rfile,
+                headers=self.headers,
+                environ={'REQUEST_METHOD': 'POST'}
+            )
+            if 'audio' in form:
+                fileitem = form['audio']
+                if fileitem.file:
+                    body = fileitem.file.read()
+                    r = requests.post(STT_URL, data=body, impersonate="chrome")
+                    try:
+                        result_json = json.dumps(r.json(), indent=2)
+                    except:
+                        result_json = str(r.text)
+                    result_html = STT_RESULT_HTML.format(result=escape(result_json))
+                    self.send_response(200)
+                    self.send_header("Content-type", "text/html")
+                    self.end_headers()
+                    self.wfile.write(result_html.encode())
+                    return
+            self.send_error(400, "No audio file")
+        elif self.path == '/tts':
+            form = cgi.FieldStorage(
+                fp=self.rfile,
+                headers=self.headers,
+                environ={'REQUEST_METHOD': 'POST'}
+            )
+            if 'text' in form:
+                text = form['text'].value.strip()
+                if text:
+                    tts_payload = {"model": "@cf/myshell-ai/melotts", "params": {"prompt": text}}
+                    r = requests.post(TTS_URL, json=tts_payload, impersonate="chrome")
+                    resp_data = r.json()
+                    audio_b64 = resp_data["response"]["audio"]
+                    result_html = TTS_RESULT_HTML.format(audio_b64=escape(audio_b64))
+                    self.send_response(200)
+                    self.send_header("Content-type", "text/html")
+                    self.end_headers()
+                    self.wfile.write(result_html.encode())
+                    return
+            self.send_error(400, "No text provided")
+        elif self.path == '/chat':
+            form = cgi.FieldStorage(
+                fp=self.rfile,
+                headers=self.headers,
+                environ={'REQUEST_METHOD': 'POST'}
+            )
+            if 'message' in form:
+                user_message = form['message'].value.strip()
+                if user_message:
+                    messages = [{"role": "user", "content": user_message}]
+                    completion = client.chat.completions.create(
+                        model="meta/llama-3.2-1b-instruct",
+                        messages=messages,
+                        temperature=0.2,
+                        top_p=0.7,
+                        max_tokens=1024,
+                        stream=False
+                    )
+                    response_text = completion.choices[0].message.content
+                    response_html = simple_md(escape(response_text))
+                    result_html = CHAT_RESULT_HTML.format(
+                        user_message=escape(user_message),
+                        response=response_html
+                    )
+                    self.send_response(200)
+                    self.send_header("Content-type", "text/html")
+                    self.end_headers()
+                    self.wfile.write(result_html.encode())
+                    return
+            self.send_error(400, "No message provided")
+        # Keep old /api/tts and /api/chat for compatibility (though not used)
         elif self.path == '/api/tts':
             content_length = int(self.headers['Content-Length'])
             body_str = self.rfile.read(content_length).decode('utf-8')
             self.send_header("Content-type", "application/json")
             self.end_headers()
             self.wfile.write(json.dumps(response).encode())
         elif self.path == '/api/chat':
             content_length = int(self.headers['Content-Length'])
             body_str = self.rfile.read(content_length).decode('utf-8')
             self.send_header("Content-type", "application/json")
             self.end_headers()
             self.wfile.write(json.dumps(response).encode())
         else:
             self.send_error(404)