Spaces:

srivatsavdamaraju
/

test

Running

App Files Files Community

srivatsavdamaraju commited on 19 days ago

Commit

57c9567

•

1 Parent(s): baa1a8a

Create index2.html

Browse files

Files changed (1) hide show

index2.html +184 -0

index2.html ADDED Viewed

	@@ -0,0 +1,184 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Chatbot with Text-to-Speech</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f5f5f5;
+    }
+    #chat-container {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      width: 350px;
+      height: 500px;
+      background-color: #fff;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      overflow: hidden;
+      z-index: 1000; /* Ensure it's on top */
+    }
+    #chat-header {
+      background-color: #007bff;
+      color: white;
+      padding: 10px;
+      text-align: center;
+    }
+    #chat-body {
+      padding: 10px;
+      height: calc(100% - 100px);
+      overflow-y: auto;
+      background-color: #fafafa;
+    }
+    #chat-footer {
+      padding: 10px;
+      background-color: #f1f1f1;
+      display: flex;
+      justify-content: space-between;
+    }
+    input[type="text"] {
+      width: 80%;
+      padding: 8px;
+      border-radius: 5px;
+      border: 1px solid #ccc;
+    }
+    button {
+      padding: 8px 16px;
+      border: none;
+      background-color: #007bff;
+      color: white;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+    button:hover {
+      background-color: #0056b3;
+    }
+  </style>
+</head>
+<body>
+  <!-- Chatbot Container -->
+  <div id="chat-container">
+    <div id="chat-header">Chatbot</div>
+    <div id="chat-body"></div>
+    <div id="chat-footer">
+      <input type="text" id="user-input" placeholder="Type your message..." />
+      <button id="send-btn">Send</button>
+    </div>
+  </div>
+  <script type="module">
+    import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
+    let latestBotResponse = '';
+    let lastPlayedMessage = '';
+    let audio = null; // Store the audio instance to stop playback
+    // Initialize the chatbot
+    Chatbot.init({
+      chatflowid: '7db12b23-ad83-4da7-9f8d-d0d8e20477d2',
+      apiHost: 'https://srivatsavdamaraju-flowiseollama.hf.space',
+      observersConfig: {
+        observeMessages: (messages) => {
+          // Get the latest bot response
+          const botMessages = messages.filter(msg => msg.type === 'apiMessage');
+          if (botMessages.length > 0) {
+            const newBotResponse = botMessages[botMessages.length - 1].message;
+            // Trigger TTS only for new responses
+            if (newBotResponse !== latestBotResponse) {
+              latestBotResponse = newBotResponse;
+              playTTS();
+            }
+          }
+          // Render messages in the chat
+          renderMessages(messages);
+        },
+      },
+    });
+    // Function to render messages in the chat window
+    function renderMessages(messages) {
+      const chatBody = document.getElementById('chat-body');
+      chatBody.innerHTML = '';
+      messages.forEach(message => {
+        const messageDiv = document.createElement('div');
+        messageDiv.textContent = message.message;
+        chatBody.appendChild(messageDiv);
+      });
+      chatBody.scrollTop = chatBody.scrollHeight;
+    }
+    // Function to trigger TTS API and play audio
+    async function playTTS() {
+      if (!latestBotResponse || latestBotResponse === lastPlayedMessage) {
+        return; // Prevent duplicate audio playback
+      }
+      const data = {
+        text: latestBotResponse,
+        target_language: "english",
+        tts_language: "en",
+        tts_gender: "female",
+        tts_rate: "+0%",
+        tts_volume: "+0%",
+        tts_pitch: "+0Hz",
+        chatgpt_api_key: "sk-proj-at87SxqXJuEy0T0ExteiT3BlbkFJ2C9wS9z9wue4eucYSEKb"
+      };
+      try {
+        const response = await fetch('https://api-tts-marco.gov-cloud.ai/tts', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(data)
+        });
+        if (response.ok) {
+          const audioData = await response.arrayBuffer();
+          const audioBlob = new Blob([audioData], { type: 'audio/mpeg' });
+          const audioUrl = URL.createObjectURL(audioBlob);
+          // Stop previous audio if playing
+          if (audio) {
+            audio.pause();
+            audio.currentTime = 0;
+          }
+          // Play new audio
+          audio = new Audio(audioUrl);
+          audio.play();
+          lastPlayedMessage = latestBotResponse; // Update the last played message
+        } else {
+          console.error('TTS request failed:', response.statusText);
+        }
+      } catch (error) {
+        console.error('TTS Error:', error);
+      }
+    }
+    // Event listener for the Escape key to stop audio playback
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && audio) {
+        audio.pause();
+        audio.currentTime = 0; // Reset audio to start
+      }
+    });
+  </script>
+</body>
+</html>