specialized-agents

Running

App Files Files Community

pvanand commited on Aug 17, 2024

Commit

e61c33a

verified ·

1 Parent(s): 1ddf5a9

Create digiyatra

Browse files

Files changed (1) hide show

static/digiyatra +436 -0

static/digiyatra ADDED Viewed

	@@ -0,0 +1,436 @@

+<!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/[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-rag-chat.hf.space/chat/', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-API-Key': '44d5c2ac18ced6fc25c1e57dcd06fc0b31fb4ad97bf56e67540671a647465df4'
+                        },
+                        body: JSON.stringify({
+                            query: message,
+                            index_id: 'digi_yatra_cleaned_twitter_data_v0_20_rows',
+                            model_id: 'openai/gpt-4o-mini',
+                            conversation_id: this.conversationId,
+                            user_id: 'string'
+                            enable_followup: true
+                        })
+                    });
+                    const reader = response.body.getReader();
+                    let rawResponse = '';
+                    let jsonResponse = null;
+                    let streamingIndex = this.messages.push({ type: 'bot', content: 'Thinking...' }) - 1;
+                    while (true) {
+                        const { done, value } = await reader.read();
+                        if (done) break;
+                        const chunk = new TextDecoder().decode(value);
+                        if (chunk.startsWith('<json>')) {
+                            jsonResponse = JSON.parse(chunk.slice(6));
+                        } else {
+                            rawResponse += chunk;
+                            this.$set(this.messages, streamingIndex, { type: 'bot', content: marked.parse(rawResponse) });
+                        }
+                    }
+                    this.messages.splice(streamingIndex, 1);
+                    this.renderParsedResponse(rawResponse, jsonResponse);
+                } catch (error) {
+                    console.error('Error:', error);
+                    this.messages.push({ type: 'bot', content: 'An error occurred while processing your request.' });
+                }
+                this.$nextTick(() => this.scrollToBottom());
+            },
+            renderParsedResponse(rawResponse, jsonResponse) {
+                let botResponse = rawResponse + '\n\n';
+                let responseForAudio = rawResponse.replace(/#/g, '');
+                if (jsonResponse && jsonResponse.clarification) {
+                    jsonResponse.clarification.forEach((item, questionIndex) => {
+                        botResponse += `**${item.question}**\n\n`;
+                        botResponse += '<div class="option-buttons">';
+                        item.options.forEach((option, optionIndex) => {
+                            const escapedOption = option.replace(/'/g, "\\'");
+                            botResponse += `<button class="option-button" onclick="app.toggleOption('${escapedOption}', ${questionIndex}, ${optionIndex})">${option}</button>`;
+                        });
+                        botResponse += '</div>\n\n';
+                    });
+                }
+                if (botResponse) {
+                    const markedContent = marked.parse(botResponse);
+                    const messageIndex = this.messages.push({
+                        type: 'bot',
+                        content: markedContent,
+                        audio: null,
+                        isPlaying: false
+                    }) - 1;
+                    this.$nextTick(async () => {
+                        document.querySelectorAll('pre code').forEach((block) => {
+                            hljs.highlightBlock(block);
+                        });
+                        this.scrollToBottom();
+                        this.updateButtonStates();
+                        if (responseForAudio) {
+                            const audioUrl = await this.convertToSpeech(responseForAudio);
+                            if (audioUrl) {
+                                this.$set(this.messages[messageIndex], 'audio', audioUrl);
+                                this.$forceUpdate();
+                            }
+                        }
+                    });
+                }
+            },
+                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>