Spaces:

kanhaiyaML
/

chat-bot

Sleeping

App Files Files Community

kanhaiyaML commited on about 1 month ago

Commit

c04034a

verified ·

1 Parent(s): 3dc9027

adding voice feature (tts - sts)

Browse files

Files changed (4) hide show

api.py +18 -1
index.html +195 -2
speak.py +28 -0
transcribe.py +26 -0

api.py CHANGED Viewed

@@ -19,6 +19,8 @@ from fastapi.responses import StreamingResponse
 from chatbot import stream_chat,generate_title,chat
 import json
 from sqlalchemy import delete
 @asynccontextmanager
@@ -146,7 +148,6 @@ async def chat_stream_route(data: MessageSend, db: AsyncSession = Depends(get_db
     messages = result.scalars().all()
     history = [{"role":m.role,"content":m.content} for m in messages]
     if len(history) == 0:
         generated_title = await generate_title(data.message)
         await db.execute(
@@ -190,3 +191,19 @@ async def chat_stream_route(data: MessageSend, db: AsyncSession = Depends(get_db
     return StreamingResponse(generate(),media_type="text/event-stream",background=background_tasks)

 from chatbot import stream_chat,generate_title,chat
 import json
 from sqlalchemy import delete
+from fastapi import UploadFile,File,Response
+from transcribe import transcribe_audio
 @asynccontextmanager
     messages = result.scalars().all()
     history = [{"role":m.role,"content":m.content} for m in messages]
     if len(history) == 0:
         generated_title = await generate_title(data.message)
         await db.execute(
     return StreamingResponse(generate(),media_type="text/event-stream",background=background_tasks)
+@app.post("/transcribe")
+async def transcribe_endpoint(audio: UploadFile = File(...)):
+    audio_bytes = await audio.read()
+    text = await transcribe_audio(audio_bytes,audio.filename)
+    return {"text": text}
+from speak import text_to_speach
+class SpeakRequest(BaseModel):
+    text: str
+@app.post("/speak")
+async def speak(request: SpeakRequest):
+    return await text_to_speach(request.text)

index.html CHANGED Viewed

@@ -1147,6 +1147,45 @@
             color: white;
             border-color: var(--accent);
         }
     </style>
 </head>
 <body>
@@ -1203,6 +1242,9 @@
                     <textarea id="messageInput" placeholder="Message KAI..." rows="1"
                     oninput="autoResize(this); toggleSend()"
                 onkeydown="handleKey(event)"></textarea>
                 <button id="sendBtn" onclick="sendMessage()">
                     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                         <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
@@ -1252,8 +1294,8 @@
 </main>
 <script>
-    const API = 'https://kanhaiyaml-chat-bot.hf.space';
-    const REVIEW_API = 'https://kanhaiyaml-chat-bot.hf.space/review';
     let currentConvId = null;
     let isTyping = false;
     let webSearchOn = false;
@@ -1261,6 +1303,96 @@
     let currentMode = 'chat';
     let sidebarCollapsed = false;
     let conversationToDelete = null;
     // ── Sidebar Toggle ──────────────────────────────────
     function toggleSidebar() {
@@ -1560,6 +1692,8 @@
                 if (streamDone) break;
             }
             msgEl.innerHTML = marked.parse(fullText);
             msgEl.style.display = 'none';
             msgEl.offsetHeight;
             msgEl.style.display = '';
@@ -1590,6 +1724,7 @@
             </div>
         `;
         area.appendChild(row);
         scrollToBottom();
     }
@@ -1674,6 +1809,64 @@
         }
     }
     // ── CODE REVIEW LOGIC ─────────────────────────────────
     const codeInput = document.getElementById('codeInput');
     const reviewQuestionInput = document.getElementById('reviewQuestionInput');

             color: white;
             border-color: var(--accent);
         }
+        .mic-btn {
+            width: 34px;
+            height: 34px;
+            background: transparent;
+            border: 1px solid var(--border);
+            border-radius: 9px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            transition: all 0.2s;
+            color: var(--text-muted);
+            font-size: 16px;
+        }
+        .mic-btn.recording {
+            background: var(--red);
+            border-color: var(--red);
+            color: white;
+            animation: pulse 1.5s infinite;
+        }
+        .speak-btn {
+            background: transparent;
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            cursor: pointer;
+            padding: 4px 8px;
+            color: var(--text-muted);
+            font-size: 14px;
+            margin-top: 6px;
+            transition: all 0.2s;
+        }
+        .speak-btn:hover {
+            background: var(--surface2);
+            color: var(--accent);
+        }
     </style>
 </head>
 <body>
                     <textarea id="messageInput" placeholder="Message KAI..." rows="1"
                     oninput="autoResize(this); toggleSend()"
                 onkeydown="handleKey(event)"></textarea>
+                <button class="mic-btn" id="micBtn" onclick="toggleRecording()" title="Voice input">
+    🎤
+</button>
                 <button id="sendBtn" onclick="sendMessage()">
                     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                         <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
 </main>
 <script>
+    const API = 'http://localhost:8000';
+    const REVIEW_API = 'http://localhost:8000/review';
     let currentConvId = null;
     let isTyping = false;
     let webSearchOn = false;
     let currentMode = 'chat';
     let sidebarCollapsed = false;
     let conversationToDelete = null;
+    let mediaRecorder = null;
+    let audioChunks = [];
+    let isRecording = false;
+    async function toggleRecording() {
+        if (isRecording) {
+            await stopRecording();
+        } else {
+            await startRecording();
+        }
+    }
+    async function startRecording() {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            mediaRecorder = new MediaRecorder(stream);
+            audioChunks = [];
+            mediaRecorder.ondataavailable = (e) => {
+                audioChunks.push(e.data);
+            };
+            mediaRecorder.onstop = async () => {
+                const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
+                await sendAudioToBackend(audioBlob);
+                stream.getTracks().forEach(track => track.stop());
+            };
+            mediaRecorder.start();
+            isRecording = true;
+            document.getElementById('micBtn').classList.add('recording');
+            document.getElementById('micBtn').innerHTML = '🔴';
+        } catch (err) {
+            alert('Microphone access denied. Please allow microphone access.');
+        }
+    }
+    async function stopRecording() {
+        if (mediaRecorder) {
+            mediaRecorder.stop();
+            isRecording = false;
+            document.getElementById('micBtn').classList.remove('recording');
+            document.getElementById('micBtn').innerHTML = '🎤';
+        }
+    }
+    async function sendAudioToBackend(audioBlob) {
+        const formData = new FormData();
+        formData.append('audio', audioBlob, 'recording.webm');
+        console.log("Sending audio, size:", audioBlob.size);
+        try {
+            const res = await fetch(`${API}/transcribe`, {
+                method: 'POST',
+                body: formData
+            });
+            console.log("Response status:", res.status);
+            if (!res.ok) {
+                const errorText = await res.text();
+                console.error("Transcription error:", errorText);
+                alert('Transcription failed: ' + errorText);
+                return;
+            }
+            const data = await res.json();
+            console.log("Transcription result:", data);
+            const transcribedText = data.text.text;  // ← fixed
+            if (!transcribedText || transcribedText.trim() === '') {
+                alert('No text detected. Please try again.');
+                return;
+            }
+            document.getElementById('messageInput').value = transcribedText;
+            toggleSend();
+            autoResize(document.getElementById('messageInput'));
+            if (transcribedText.trim()) {
+                sendMessage();
+            }
+        } catch (err) {
+            console.error('Network error:', err);
+            alert('Failed to connect to server.');
+        }
+    }
     // ── Sidebar Toggle ──────────────────────────────────
     function toggleSidebar() {
                 if (streamDone) break;
             }
             msgEl.innerHTML = marked.parse(fullText);
+            addSpeakButton(msgRow);
+            speakText(fullText);
             msgEl.style.display = 'none';
             msgEl.offsetHeight;
             msgEl.style.display = '';
             </div>
         `;
         area.appendChild(row);
+        if (!isUser) addSpeakButton(row);
         scrollToBottom();
     }
         }
     }
+    // function speakText(text) {
+    //     if ('speechSynthesis' in window) {
+    //         window.speechSynthesis.cancel();
+    //         const utterance = new SpeechSynthesisUtterance(text);
+    //         utterance.lang = 'hi-IN'
+    //         utterance.rate = 1;
+    //         utterance.pitch = 1;
+    //         window.speechSynthesis.speak(utterance);
+    //     }
+    // }
+    function addSpeakButton(row) {
+        const msgText = row.querySelector('.message-text');
+        const text = msgText.textContent;
+        const speakBtn = document.createElement('button');
+        speakBtn.className = 'speak-btn';
+        speakBtn.innerHTML = '🔊';
+        speakBtn.title = 'Listen';
+        speakBtn.onclick = () => speakText(text);
+        row.querySelector('.message-content').appendChild(speakBtn);
+    }
+    async function speakText(text) {
+        try {
+            const res = await fetch(`${API}/speak`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ text: text })
+            });
+            const audioBlob = await res.blob();
+            // Check if blob is valid
+            if (audioBlob.size < 100) {
+                console.error("Audio too small, something wrong");
+                return;
+            }
+            const audioUrl = URL.createObjectURL(audioBlob);
+            const audio = new Audio(audioUrl);
+            // Must be triggered by user click - already is since speakText is called from onclick
+            audio.load();
+            await audio.play();
+        } catch (err) {
+            console.error('Failed to speak:', err);
+            // Fallback to browser TTS
+            if ('speechSynthesis' in window) {
+                const utterance = new SpeechSynthesisUtterance(text);
+                utterance.lang = 'hi-IN';
+                window.speechSynthesis.speak(utterance);
+            }
+        }
+    }
     // ── CODE REVIEW LOGIC ─────────────────────────────────
     const codeInput = document.getElementById('codeInput');
     const reviewQuestionInput = document.getElementById('reviewQuestionInput');

speak.py ADDED Viewed

	@@ -0,0 +1,28 @@

+import httpx
+from fastapi.responses import Response
+import os
+from dotenv import load_dotenv
+load_dotenv()
+ELEVENLABS_API_KEY = os.getenv("ELEVENLABS_API_KEY")
+ELEVENLABS_VOICE_ID = os.getenv("ELEVENLABS_VOICE_ID")
+async def text_to_speach(text: str):
+    url = f"https://api.elevenlabs.io/v1/text-to-speech/{ELEVENLABS_VOICE_ID}"
+    async with httpx.AsyncClient() as client:
+        response = await client.post(
+            url,
+            headers={"xi-api-key": ELEVENLABS_API_KEY},
+            json={
+                "text": text,
+                "model_id": "eleven_multilingual_v2",
+                "voice_settings": {
+                    "stability": 0.5,
+                    "similarity_boost": 0.75
+                }
+            }
+        )
+    return Response(content=response.content, media_type="audio/mpeg")

transcribe.py ADDED Viewed

	@@ -0,0 +1,26 @@

+import tempfile
+from groq import Groq
+import os
+from dotenv import load_dotenv
+load_dotenv()
+client = Groq(api_key=os.getenv("GROQ_API_KEY"))
+async def transcribe_audio(audio_file: bytes, filename: str):
+    suffix = "." + filename.split(".")[-1]
+    with tempfile.NamedTemporaryFile(delete=False, suffix=suffix) as tmp:
+        tmp.write(audio_file)
+        tmp_path = tmp.name
+    try:
+        with open(tmp_path,"rb") as f:
+            transcription = client.audio.transcriptions.create(
+                model="whisper-large-v3-turbo",
+                file=("audio.webm",f)
+            )
+        return {"text": transcription.text}
+    finally:
+        os.remove(tmp_path)