Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Chatbot</title> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script> | |
| <style> | |
| :root { | |
| --accent-color: #003366; /* Navy blue */ | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| line-height: 1.6; | |
| margin: 0 auto; | |
| padding: 0px; | |
| background-color: #f5f7fa; | |
| color: #333; | |
| } | |
| h2 { | |
| color: var(--accent-color); | |
| border-bottom: 2px solid var(--accent-color); | |
| padding-bottom: 10px; | |
| margin-top: 0; | |
| } | |
| #app { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 10px; | |
| } | |
| .chat-container { | |
| background-color: #ffffff; | |
| border-radius: 10px; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| height: 99vh; | |
| } | |
| .messages { | |
| flex-grow: 1; | |
| overflow-y: auto; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .message { | |
| max-width: 80%; | |
| margin-bottom: 20px; | |
| padding: 12px 16px; | |
| border-radius: 18px; | |
| font-size: 14px; | |
| line-height: 1.4; | |
| word-wrap: break-word; | |
| overflow-wrap: break-word; | |
| } | |
| .user-message { | |
| background-color: #364e67; | |
| color: #ffffff; | |
| align-self: flex-end; | |
| } | |
| .bot-message { | |
| background-color: #f0f2f5; | |
| color: #333; | |
| align-self: flex-start; | |
| background-color: #ffffff; | |
| padding: 30px; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| word-break: break-word; | |
| } | |
| .input-area { | |
| display: flex; | |
| padding: 10px; | |
| background-color: #ffffff; | |
| border-top: 1px solid #e0e0e0; | |
| } | |
| #user-input { | |
| flex-grow: 1; | |
| padding: 12px; | |
| border: 1px solid #d0d0d0; | |
| border-radius: 20px; | |
| font-size: 14px; | |
| outline: none; | |
| } | |
| .send-button { | |
| background-color: #007bff; | |
| color: #ffffff; | |
| border: none; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| margin-left: 10px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: background-color 0.3s; | |
| } | |
| .send-button:hover { | |
| background-color: #0056b3; | |
| } | |
| .send-button svg { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .reset-button { | |
| background-color: #f44336; | |
| color: #ffffff; | |
| border: none; | |
| border-radius: 20px; | |
| padding: 8px 16px; | |
| margin-left: 10px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| transition: background-color 0.3s; | |
| } | |
| .reset-button:hover { | |
| background-color: #d32f2f; | |
| } | |
| .option-buttons { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .option-button { | |
| background-color: #f0f2f5; | |
| border: 1px solid #d0d0d0; | |
| border-radius: 20px; | |
| padding: 8px 16px; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: background-color 0.3s, transform 0.1s; | |
| } | |
| .option-button:hover { | |
| background-color: #e4e6e9; | |
| transform: translateY(-2px); | |
| } | |
| .option-button:active { | |
| transform: translateY(0); | |
| } | |
| .option-button.selected { | |
| background-color: #9fb4cd; | |
| border-color: #c9d9ec; | |
| } | |
| .play-button { | |
| background-color: #4CAF50; | |
| border: none; | |
| color: white; | |
| padding: 10px 20px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-size: 16px; | |
| margin: 4px 2px; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| } | |
| .audio-button { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| padding: 0; | |
| margin-top: 10px; | |
| } | |
| .audio-button svg { | |
| width: 24px; | |
| height: 24px; | |
| } | |
| .audio-button:focus { | |
| outline: none; | |
| } | |
| @media (max-width: 600px) { | |
| #app { | |
| padding: 10px; | |
| } | |
| .chat-container { | |
| height: 90vh; | |
| } | |
| .message { | |
| max-width: 90%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <div class="chat-container"> | |
| <div class="messages" ref="messageContainer"> | |
| <div v-for="(message, index) in messages" :key="index" | |
| :class="['message', message.type === 'user' ? 'user-message' : 'bot-message']"> | |
| <div v-html="message.content"></div> | |
| <button v-if="message.type === 'bot' && message.audio" @click="toggleAudio(index)" class="audio-button"> | |
| <svg v-if="!message.isPlaying" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <polygon points="5 3 19 12 5 21 5 3"></polygon> | |
| </svg> | |
| <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <rect x="6" y="4" width="4" height="16"></rect> | |
| <rect x="14" y="4" width="4" height="16"></rect> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="input-area"> | |
| <input type="text" id="user-input" v-model="userInput" @keyup.enter="sendMessage" placeholder="Type your message..."> | |
| <button class="send-button" @click="sendMessage"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <line x1="22" y1="2" x2="11" y2="13"></line> | |
| <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon> | |
| </svg> | |
| </button> | |
| <button class="reset-button" @click="resetConversation">Reset</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| marked.setOptions({ | |
| highlight: function (code, lang) { | |
| if (lang && hljs.getLanguage(lang)) { | |
| return hljs.highlight(code, { language: lang }).value; | |
| } else { | |
| return hljs.highlightAuto(code).value; | |
| } | |
| }, | |
| sanitize: false | |
| }); | |
| const app = new Vue({ | |
| el: '#app', | |
| data: { | |
| messages: [], | |
| userInput: '', | |
| selectedOptions: {}, | |
| conversationId: '', | |
| currentAudio: null, | |
| }, | |
| methods: { | |
| async sendMessage() { | |
| if (!this.userInput.trim()) return; | |
| this.messages.push({ type: 'user', content: marked.parse(this.userInput) }); | |
| const message = this.userInput; | |
| this.userInput = ''; | |
| this.selectedOptions = {}; | |
| try { | |
| const response = await fetch('https://pvanand-general-chat.hf.space/v2/followup-agent', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'X-API-Key': '44d5c2ac18ced6fc25c1e57dcd06fc0b31fb4ad97bf56e67540671a647465df4' | |
| }, | |
| body: JSON.stringify({ | |
| query: message, | |
| model_id: 'openai/gpt-4o-mini', | |
| conversation_id: this.conversationId, | |
| user_id: 'string' | |
| }) | |
| }); | |
| const reader = response.body.getReader(); | |
| let rawResponse = ''; | |
| let jsonData = null; | |
| let streamingIndex = this.messages.push({ type: 'bot', content: '' }) - 1; | |
| while (true) { | |
| const { done, value } = await reader.read(); | |
| if (done) break; | |
| const chunk = new TextDecoder().decode(value); | |
| console.log(chunk) | |
| if (chunk.includes('<json>')) { | |
| const [textPart, jsonPart] = chunk.split('<json>'); | |
| rawResponse += textPart; | |
| jsonData = JSON.parse(jsonPart); | |
| } else { | |
| rawResponse += chunk; | |
| } | |
| // Remove <interact> </interact> section | |
| rawResponse = rawResponse.replace(/<interact>[\s\S]*?<\/interact>/g, ''); | |
| this.$set(this.messages[streamingIndex], 'content', marked.parse(rawResponse)); | |
| } | |
| if (jsonData) { | |
| this.renderClarificationQuestions(jsonData.clarification, streamingIndex); | |
| } | |
| } catch (error) { | |
| console.error('Error:', error); | |
| this.messages.push({ type: 'bot', content: 'An error occurred while processing your request.' }); | |
| } | |
| this.$nextTick(() => this.scrollToBottom()); | |
| }, | |
| renderClarificationQuestions(clarification, messageIndex) { | |
| if (!clarification || clarification.length === 0) return; | |
| let clarificationHtml = ''; | |
| clarification.forEach((item, questionIndex) => { | |
| clarificationHtml += `<strong>${item.question}</strong><br>`; | |
| clarificationHtml += '<div class="option-buttons">'; | |
| item.options.forEach((option, optionIndex) => { | |
| const escapedOption = option.replace(/'/g, "\\'"); | |
| clarificationHtml += `<button class="option-button" onclick="app.toggleOption('${escapedOption}', ${questionIndex}, ${optionIndex})">${option}</button>`; | |
| }); | |
| clarificationHtml += '</div><br>'; | |
| }); | |
| this.$set(this.messages[messageIndex], 'content', this.messages[messageIndex].content + marked.parse(clarificationHtml)); | |
| this.$nextTick(() => { | |
| this.scrollToBottom(); | |
| this.updateButtonStates(); | |
| }); | |
| }, | |
| toggleOption(option, questionIndex, optionIndex) { | |
| if (!this.selectedOptions[questionIndex]) { | |
| this.$set(this.selectedOptions, questionIndex, []); | |
| } | |
| const index = this.selectedOptions[questionIndex].indexOf(option); | |
| if (index > -1) { | |
| this.selectedOptions[questionIndex].splice(index, 1); | |
| } else { | |
| this.selectedOptions[questionIndex].push(option); | |
| } | |
| this.updateInputFromSelectedOptions(); | |
| this.updateButtonStates(); | |
| }, | |
| updateInputFromSelectedOptions() { | |
| this.userInput = Object.entries(this.selectedOptions) | |
| .map(([questionIndex, options]) => | |
| `Q${parseInt(questionIndex) + 1}: ${options.join(', ')}`) | |
| .join(' | '); | |
| this.$nextTick(() => document.getElementById('user-input').focus()); | |
| }, | |
| updateButtonStates() { | |
| Object.entries(this.selectedOptions).forEach(([questionIndex, options]) => { | |
| const buttons = document.querySelectorAll(`.option-buttons:nth-of-type(${parseInt(questionIndex) + 1}) .option-button`); | |
| buttons.forEach((button) => { | |
| if (options.includes(button.textContent)) { | |
| button.classList.add('selected'); | |
| } else { | |
| button.classList.remove('selected'); | |
| } | |
| }); | |
| }); | |
| }, | |
| resetConversation() { | |
| this.conversationId = uuid.v4(); | |
| this.messages = [{ type: 'bot', content: 'Conversation reset. How can I help you?' }]; | |
| this.selectedOptions = {}; | |
| this.userInput = ''; | |
| }, | |
| scrollToBottom() { | |
| const container = this.$refs.messageContainer; | |
| container.scrollTop = container.scrollHeight; | |
| }, | |
| async convertToSpeech(text) { | |
| const voice = 'en-US-JennyNeural'; | |
| const encodedText = encodeURIComponent(text); | |
| try { | |
| const response = await fetch(`https://pvanand-audio-chat.hf.space/tts?text=${encodedText}&voice=${voice}`, { | |
| method: 'GET', | |
| headers: { | |
| 'accept': 'application/json' | |
| } | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`HTTP error! status: ${response.status}`); | |
| } | |
| const blob = await response.blob(); | |
| return URL.createObjectURL(blob); | |
| } catch (error) { | |
| console.error('Error:', error); | |
| return null; | |
| } | |
| }, | |
| toggleAudio(index) { | |
| const message = this.messages[index]; | |
| if (this.currentAudio && this.currentAudio !== message.audioElement) { | |
| this.currentAudio.pause(); | |
| this.messages.forEach(m => { | |
| if (m.audioElement === this.currentAudio) { | |
| m.isPlaying = false; | |
| } | |
| }); | |
| } | |
| if (!message.audioElement) { | |
| message.audioElement = new Audio(message.audio); | |
| message.audioElement.addEventListener('ended', () => { | |
| message.isPlaying = false; | |
| this.$forceUpdate(); | |
| }); | |
| } | |
| if (message.isPlaying) { | |
| message.audioElement.pause(); | |
| } else { | |
| message.audioElement.play(); | |
| this.currentAudio = message.audioElement; | |
| } | |
| message.isPlaying = !message.isPlaying; | |
| this.$forceUpdate(); | |
| } | |
| }, | |
| mounted() { | |
| this.resetConversation(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |