Spaces:

srivatsavdamaraju
/

test

Running

App Files Files Community

srivatsavdamaraju commited on 20 days ago

Commit

baa1a8a

•

1 Parent(s): 681370c

Update index.html

Browse files

Files changed (1) hide show

index.html +262 -18

index.html CHANGED Viewed

@@ -1,19 +1,263 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Flowise Chatbot</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;
+    }
+    #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;
+    }
+    /* Position the observer output on the left side */
+    #observer-output {
+      position: fixed;
+      top: 20px; /* Adjust the top margin if needed */
+      left: 20px; /* Move it to the left side */
+      width: 350px;
+      max-height: 500px; /* Adjust the max-height */
+      background-color: #fff;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      padding: 10px;
+      overflow-y: auto;
+    }
+    /* Adjust the margins and layout of the observer sections */
+    .observer-section {
+      margin-bottom: 20px;
+    }
+    .observer-section h4 {
+      font-size: 16px;
+      margin: 0;
+      color: #007bff;
+    }
+    .observer-section pre {
+      margin-top: 5px;
+      background-color: #f0f0f0;
+      padding: 10px;
+      border-radius: 5px;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+    /* Bot response section styling */
+    #bot-response {
+      margin-top: 20px;
+      background-color: #f0f0f0;
+      padding: 10px;
+      border-radius: 5px;
+      color: #007bff;
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+  <!-- Chatbot Container -->
+  <div id="chat-container">
+    <div id="chat-header">
+      <h3>Chatbot</h3>
+    </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>
+  <!-- Observer Output Section -->
+  <div id="observer-output">
+    <div class="observer-section" id="user-input-section">
+      <h4>User Input:</h4>
+      <pre id="user-input-output">Waiting for input...</pre>
+    </div>
+    <div class="observer-section" id="messages-section">
+      <h4>Messages:</h4>
+      <pre id="messages-output">Waiting for messages...</pre>
+    </div>
+    <div class="observer-section" id="loading-section">
+      <h4>Loading State:</h4>
+      <pre id="loading-output">Bot is idle...</pre>
+    </div>
+    <!-- Bot response section -->
+    <div id="bot-response">
+      Latest Bot Response: <span id="latest-bot-response">Waiting for bot response...</span>
+    </div>
+  </div>
+  <script type="module">
+    import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
+    // Initialize the chatbot
+    Chatbot.init({
+      chatflowid: '7db12b23-ad83-4da7-9f8d-d0d8e20477d2',  // Your chat flow ID
+      apiHost: 'https://srivatsavdamaraju-flowiseollama.hf.space',  // Your API host URL
+      observersConfig: {
+        // When the user input changes
+        observeUserInput: (userInput) => {
+          console.log({ userInput });
+          // Update the User Input section in the observer output
+          document.getElementById('user-input-output').textContent = userInput;
+        },
+        // When the bot messages stack changes
+        observeMessages: (messages) => {
+          console.log({ messages });
+          // Update the Messages section in the observer output
+          document.getElementById('messages-output').textContent = JSON.stringify(messages, null, 2);
+          // Filter out only the bot's latest message
+          const botMessages = messages.filter(message => message.type === 'apiMessage');
+          if (botMessages.length > 0) {
+            const latestBotMessage = botMessages[botMessages.length - 1].message; // Get the last message from bot
+            console.log('Latest Bot response:', latestBotMessage);
+            // Display the latest bot response in the designated section
+            document.getElementById('latest-bot-response').textContent = latestBotMessage;
+            // Use the SpeechSynthesis API to speak out the latest bot response (only once)
+            speakText(latestBotMessage);
+          }
+          // Render the bot messages in the chat window
+          renderMessages(messages);
+        },
+        // When the bot loading state changes
+        observeLoading: (loading) => {
+          console.log({ loading });
+          // Update the Loading State section in the observer output
+          document.getElementById('loading-output').textContent = loading ? 'Bot is thinking...' : 'Bot is idle...';
+        },
+      },
+    });
+    // Function to render messages in the chat window
+    function renderMessages(messages) {
+      const chatBody = document.getElementById('chat-body');
+      chatBody.innerHTML = ''; // Clear previous messages
+      messages.forEach(message => {
+        const messageElement = document.createElement('div');
+        messageElement.classList.add(message.type === 'userMessage' ? 'user' : 'bot');
+        messageElement.textContent = message.message;
+        chatBody.appendChild(messageElement);
+      });
+      // Scroll to the bottom of the chat
+      chatBody.scrollTop = chatBody.scrollHeight;
+    }
+    // Function to speak the latest bot response using SpeechSynthesis API
+    let utterance;
+    function speakText(text) {
+      // Check if there's any ongoing speech, and stop it before starting new speech
+      if (window.speechSynthesis.speaking) {
+        window.speechSynthesis.cancel(); // Stop any current speech
+      }
+      // Create a new speech synthesis utterance
+      utterance = new SpeechSynthesisUtterance(text);
+      // Optionally set properties such as pitch, rate, and volume
+      utterance.pitch = 1; // Normal pitch
+      utterance.rate = 1;  // Normal speed
+      utterance.volume = 1; // Full volume
+      // Speak the text
+      window.speechSynthesis.speak(utterance);
+    }
+    // Listen for the "Esc" key to stop speech
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        // Stop the speech if Esc is pressed
+        window.speechSynthesis.cancel();
+      }
+    });
+    // Send button functionality
+    document.getElementById('send-btn').addEventListener('click', () => {
+      const userInput = document.getElementById('user-input').value;
+      if (userInput.trim() !== '') {
+        // Add user message to the chat body
+        renderMessages([
+          ...Chatbot.messages,
+          { type: 'userMessage', message: userInput }
+        ]);
+        // Clear the input field
+        document.getElementById('user-input').value = '';
+        // Send the user input to the chatbot
+        Chatbot.sendMessage(userInput);
+      }
+    });
+    // Optionally, allow pressing "Enter" to send the message
+    document.getElementById('user-input').addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        document.getElementById('send-btn').click();
+      }
+    });
+  </script>
+</body>
 </html>