specialized-agents

Running

App Files Files Community

pvanand commited on Sep 17, 2024

Commit

ce8215d

verified ·

1 Parent(s): d0b1be4

Create presentation-agent.html

Browse files

Files changed (1) hide show

static/presentation-agent.html +301 -0

static/presentation-agent.html ADDED Viewed

	@@ -0,0 +1,301 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Presentation Chatbot</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <style>
+        :root {
+            --primary-color: #007bff;
+            --secondary-color: #6c757d;
+            --background-color: #ffffff;
+            --text-color: #333333;
+            --message-bg-user: #e9ecef;
+            --message-bg-bot: #f8f9fa;
+            --input-bg: #ffffff;
+            --border-color: #dee2e6;
+            --scrollbar-thumb: #adb5bd;
+            --scrollbar-track: #f1f3f5;
+        }
+        body.dark-mode {
+            --primary-color: #4da3ff;
+            --secondary-color: #a1a8ae;
+            --background-color: #1a1a1a;
+            --text-color: #ffffff;
+            --message-bg-user: #2c2c2c;
+            --message-bg-bot: #383838;
+            --input-bg: #2c2c2c;
+            --border-color: #4a4a4a;
+            --scrollbar-thumb: #4a4a4a;
+            --scrollbar-track: #2c2c2c;
+        }
+        body {
+            background-color: var(--background-color);
+            color: var(--text-color);
+            transition: background-color 0.3s, color 0.3s;
+        }
+        html, body, #app {
+            height: 100%;
+        }
+        .chat-outer-container {
+            max-width: 800px;
+            height: 100vh;
+            margin: 0 auto;
+            display: flex;
+            flex-direction: column;
+        }
+        .chat-container {
+            flex-grow: 1;
+            overflow-y: auto;
+            padding: 1rem;
+            scrollbar-width: thin;
+            scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+        }
+        .chat-container::-webkit-scrollbar {
+            width: 8px;
+        }
+        .chat-container::-webkit-scrollbar-track {
+            background: var(--scrollbar-track);
+        }
+        .chat-container::-webkit-scrollbar-thumb {
+            background-color: var(--scrollbar-thumb);
+            border-radius: 4px;
+            border: 2px solid var(--scrollbar-track);
+        }
+        .message {
+            padding: 0.75rem;
+            margin-bottom: 1rem;
+            border-radius: 15px;
+        }
+        .user-message {
+            background-color: var(--message-bg-user);
+            border-radius: 15px 15px 0 15px;
+        }
+        .bot-message {
+            background-color: var(--message-bg-bot);
+            border-radius: 15px 15px 15px 0;
+        }
+        .loading-spinner {
+            width: 3rem;
+            height: 3rem;
+            color: var(--primary-color);
+        }
+        .presentation-iframe {
+            width: 100%;
+            height: 60vh;
+            border: none;
+        }
+        .input-container {
+            padding: 1rem;
+            background-color: var(--input-bg);
+            border-top: 1px solid var(--border-color);
+            position: relative;
+        }
+        .reset-button {
+            position: absolute;
+            top: -40px;
+            right: 10px;
+            background-color: var(--secondary-color);
+            color: var(--background-color);
+            border: none;
+            border-radius: 50%;
+            width: 36px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        .reset-button:hover {
+            background-color: var(--primary-color);
+        }
+        .mode-toggle {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            background: none;
+            border: none;
+            color: var(--text-color);
+            font-size: 1.5rem;
+            cursor: pointer;
+            z-index: 1000;
+        }
+        input[type="text"] {
+            background-color: var(--input-bg);
+            color: var(--text-color);
+            border: 1px solid var(--border-color);
+        }
+        input[type="text"]::placeholder {
+            color: var(--secondary-color);
+        }
+        .btn-primary {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+        .btn-primary:hover {
+            background-color: var(--secondary-color);
+            border-color: var(--secondary-color);
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <button @click="toggleDarkMode" class="mode-toggle" :title="isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'">
+            <i :class="isDarkMode ? 'fas fa-sun' : 'fas fa-moon'"></i>
+        </button>
+        <div class="chat-outer-container">
+            <div class="chat-container">
+                <h1 class="text-center mb-4">Presentation Chatbot</h1>
+                <div v-for="(message, index) in chatHistory" :key="index" class="message" :class="message.type === 'user' ? 'user-message' : 'bot-message'">
+                    <div v-if="message.type === 'bot'" v-html="message.content"></div>
+                    <div v-else>{{ message.content }}</div>
+                    <iframe v-if="message.html" :srcdoc="message.html" class="presentation-iframe mt-2"></iframe>
+                </div>
+                <div v-if="isLoading" class="text-center">
+                    <div class="spinner-border loading-spinner" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                </div>
+            </div>
+            <div class="alert alert-danger" v-if="errorMessage">{{ errorMessage }}</div>
+            <div class="input-container">
+                <form @submit.prevent="sendMessage" class="d-flex">
+                    <input v-model="userInput" type="text" class="form-control me-2" placeholder="Type your message...">
+                    <button type="submit" class="btn btn-primary" :disabled="isLoading">Send</button>
+                </form>
+                <button @click="resetConversation" class="reset-button" title="Reset Conversation">
+                    <i class="fas fa-redo"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        const { createApp } = Vue;
+        createApp({
+            data() {
+                return {
+                    userInput: '',
+                    chatHistory: [],
+                    conversationId: '',
+                    isLoading: false,
+                    errorMessage: '',
+                    AUTH_TOKEN: "44d5c2ac18ced6fc25c1e57dcd06fc0b31fb4ad97bf56e67540671a647465df4",
+                    modelId: 'openai/gpt-4o-mini',
+                    isDarkMode: false
+                }
+            },
+            mounted() {
+                this.resetConversation();
+                this.isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+                this.applyDarkMode();
+            },
+            updated() {
+                this.scrollToBottom();
+            },
+            methods: {
+                async sendMessage() {
+                    if (!this.userInput.trim()) return;
+                    this.chatHistory.push({ type: 'user', content: this.userInput });
+                    const userMessage = this.userInput;
+                    this.userInput = '';
+                    this.isLoading = true;
+                    this.errorMessage = '';
+                    const payload = {
+                        prompt: userMessage,
+                        model_id: this.modelId,
+                        conversation_id: this.conversationId,
+                        user_id: "web_user"
+                    };
+                    try {
+                        const response = await fetch('https://pvanand-audio-chat.hf.space/presentation-agent', {
+                            method: 'POST',
+                            headers: {
+                                'accept': 'application/json',
+                                'X-API-Key': this.AUTH_TOKEN,
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify(payload)
+                        });
+                        if (!response.ok) {
+                            const errorText = await response.text();
+                            throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`);
+                        }
+                        const data = await response.json();
+                        const botMessage = {
+                            type: 'bot',
+                            content: data.response ? marked.parse(data.response) : '',
+                            html: data.html_presentation || null
+                        };
+                        this.chatHistory.push(botMessage);
+                    } catch (error) {
+                        this.errorMessage = `Error: ${error.message}`;
+                        setTimeout(() => {
+                            this.errorMessage = '';
+                        }, 5000);
+                    } finally {
+                        this.isLoading = false;
+                    }
+                },
+                resetConversation() {
+                    this.chatHistory = [];
+                    this.conversationId = this.generateUUID();
+                    this.errorMessage = '';
+                },
+                generateUUID() {
+                    return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+                },
+                scrollToBottom() {
+                    this.$nextTick(() => {
+                        const container = this.$el.querySelector('.chat-container');
+                        container.scrollTop = container.scrollHeight;
+                    });
+                },
+                toggleDarkMode() {
+                    this.isDarkMode = !this.isDarkMode;
+                    this.applyDarkMode();
+                },
+                applyDarkMode() {
+                    if (this.isDarkMode) {
+                        document.body.classList.add('dark-mode');
+                    } else {
+                        document.body.classList.remove('dark-mode');
+                    }
+                }
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>