Spaces:

pvanand
/

Flask-web-server

Sleeping

App Files Files Community

pvanand commited on Aug 22, 2024

Commit

7ecab78

verified ·

1 Parent(s): f2de90e

Create followup-agent.html

Browse files

Files changed (1) hide show

templates/apps-hub/followup-agent.html +415 -0

templates/apps-hub/followup-agent.html ADDED Viewed

	@@ -0,0 +1,415 @@

+<!DOCTYPE html>
+<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/vue@2.6.14/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);
+                            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>