Spaces:

matuteiglesias
/

test-rag-agent

Running

App Files Files Community

matuteiglesias commited on May 3

Commit

a525178

verified ·

1 Parent(s): e731900

Add 2 files

Browse files

Files changed (1) hide show

index.html +323 -38

index.html CHANGED Viewed

@@ -1,41 +1,326 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>My app</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta charset="utf-8">
     <style>
-      body {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        height: 100dvh;
-        font-family: "Arial", sans-serif;
-        text-align: center;
-      }
-      .arrow {
-        position: absolute;
-        bottom: 32px;
-        left: 0px;
-        width: 100px;
-        transform: rotate(30deg);
-      }
-      h1 {
-        font-size: 50px;
-      }
-      h1 span {
-        color: #acacac;
-        font-size: 32px;
-      }
     </style>
-  </head>
-  <body>
-    <h1>
-      <span>I'm ready to work,</span><br />
-      Ask me anything.
-    </h1>
-    <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
-    <script></script>
-  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=matuteiglesias/test-rag-agent" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RAG Chat Agent</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        .chat-container {
+            height: calc(100vh - 200px);
+        }
+        .message-animation {
+            animation: fadeIn 0.3s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .typing-indicator span {
+            animation: bounce 1.5s infinite ease-in-out;
+            display: inline-block;
+        }
+        .typing-indicator span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-indicator span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-5px); }
+        }
     </style>
+</head>
+<body class="bg-gray-100">
+    <div class="container mx-auto max-w-4xl p-4">
+        <header class="bg-white rounded-lg shadow-md p-6 mb-6">
+            <div class="flex items-center justify-between">
+                <div>
+                    <h1 class="text-3xl font-bold text-indigo-600">RAG Chat Agent</h1>
+                    <p class="text-gray-600">Retrieval-Augmented Generation powered by Hugging Face</p>
+                </div>
+                <div class="flex space-x-2">
+                    <button id="clear-chat" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg transition">
+                        <i class="fas fa-trash-alt mr-2"></i>Clear Chat
+                    </button>
+                    <button id="settings-btn" class="bg-indigo-100 hover:bg-indigo-200 text-indigo-700 px-4 py-2 rounded-lg transition">
+                        <i class="fas fa-cog mr-2"></i>Settings
+                    </button>
+                </div>
+            </div>
+        </header>
+        <div class="bg-white rounded-lg shadow-md overflow-hidden">
+            <!-- Chat area -->
+            <div id="chat-area" class="chat-container p-4 overflow-y-auto">
+                <div class="text-center py-10 text-gray-500">
+                    <i class="fas fa-robot text-4xl mb-4 text-indigo-400"></i>
+                    <h3 class="text-xl font-medium">Welcome to RAG Chat</h3>
+                    <p class="mt-2">Ask me anything and I'll retrieve relevant information to answer your questions.</p>
+                </div>
+            </div>
+            <!-- Input area -->
+            <div class="border-t border-gray-200 p-4 bg-gray-50">
+                <div id="typing-indicator" class="typing-indicator mb-2 text-gray-500 hidden">
+                    <span>.</span><span>.</span><span>.</span>
+                </div>
+                <div class="flex space-x-2">
+                    <input
+                        id="user-input"
+                        type="text"
+                        placeholder="Type your question here..."
+                        class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                        autocomplete="off"
+                    >
+                    <button
+                        id="send-btn"
+                        class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg transition flex items-center justify-center"
+                    >
+                        <i class="fas fa-paper-plane mr-2"></i>Send
+                    </button>
+                </div>
+                <div class="mt-2 text-xs text-gray-500 flex justify-between">
+                    <span>Press Enter to send</span>
+                    <span id="status-indicator" class="text-green-500 hidden">Connected</span>
+                </div>
+            </div>
+        </div>
+        <!-- Settings modal -->
+        <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+            <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-xl font-bold text-gray-800">Settings</h3>
+                    <button id="close-settings" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Model</label>
+                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
+                            <option>facebook/rag-token-nq</option>
+                            <option>facebook/rag-sequence-nq</option>
+                            <option>custom-model</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Retrieval Documents</label>
+                        <input type="file" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm">
+                        <p class="mt-1 text-xs text-gray-500">Upload documents to enhance retrieval (PDF, TXT, DOCX)</p>
+                    </div>
+                    <div>
+                        <label class="flex items-center">
+                            <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
+                            <span class="ml-2 text-sm text-gray-700">Show confidence scores</span>
+                        </label>
+                    </div>
+                </div>
+                <div class="mt-6 flex justify-end space-x-3">
+                    <button id="cancel-settings" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50">
+                        Cancel
+                    </button>
+                    <button id="save-settings" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
+                        Save
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Source references modal -->
+        <div id="sources-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+            <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-xl font-bold text-gray-800">Retrieved Sources</h3>
+                    <button id="close-sources" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div id="sources-content" class="space-y-4">
+                    <!-- Sources will be populated here -->
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // DOM elements
+            const chatArea = document.getElementById('chat-area');
+            const userInput = document.getElementById('user-input');
+            const sendBtn = document.getElementById('send-btn');
+            const clearChatBtn = document.getElementById('clear-chat');
+            const settingsBtn = document.getElementById('settings-btn');
+            const settingsModal = document.getElementById('settings-modal');
+            const closeSettings = document.getElementById('close-settings');
+            const cancelSettings = document.getElementById('cancel-settings');
+            const saveSettings = document.getElementById('save-settings');
+            const sourcesModal = document.getElementById('sources-modal');
+            const closeSources = document.getElementById('close-sources');
+            const sourcesContent = document.getElementById('sources-content');
+            const typingIndicator = document.getElementById('typing-indicator');
+            const statusIndicator = document.getElementById('status-indicator');
+            // Simulate connection status
+            setTimeout(() => {
+                statusIndicator.classList.remove('hidden');
+            }, 1000);
+            // Send message function
+            function sendMessage() {
+                const message = userInput.value.trim();
+                if (!message) return;
+                // Add user message to chat
+                addMessage('user', message);
+                userInput.value = '';
+                // Show typing indicator
+                typingIndicator.classList.remove('hidden');
+                // Simulate API call with timeout
+                setTimeout(() => {
+                    typingIndicator.classList.add('hidden');
+                    // Simulated response (in a real app, this would come from your RAG backend)
+                    const responses = [
+                        "Based on the retrieved information, I can tell you that...",
+                        "The documents I found suggest that...",
+                        "According to my sources...",
+                        "I couldn't find a definitive answer, but here's what I discovered..."
+                    ];
+                    const randomResponse = responses[Math.floor(Math.random() * responses.length)];
+                    const sources = [
+                        { title: "Research Paper on Topic X", snippet: "The study found that..." },
+                        { title: "Wikipedia Article", snippet: "According to Wikipedia..." },
+                        { title: "Technical Documentation", snippet: "The official docs state..." }
+                    ];
+                    addMessage('bot', randomResponse, sources);
+                    // Scroll to bottom
+                    chatArea.scrollTop = chatArea.scrollHeight;
+                }, 1500);
+            }
+            // Add message to chat
+            function addMessage(sender, content, sources = null) {
+                const messageDiv = document.createElement('div');
+                messageDiv.classList.add('message-animation', 'mb-4');
+                if (sender === 'user') {
+                    messageDiv.innerHTML = `
+                        <div class="flex justify-end">
+                            <div class="bg-indigo-600 text-white rounded-l-lg rounded-br-lg max-w-3/4 p-4">
+                                <p>${content}</p>
+                            </div>
+                        </div>
+                    `;
+                } else {
+                    messageDiv.innerHTML = `
+                        <div class="flex">
+                            <div class="bg-gray-200 text-gray-800 rounded-r-lg rounded-bl-lg max-w-3/4 p-4">
+                                <p>${content}</p>
+                                ${sources ? `<button class="view-sources mt-2 text-xs text-indigo-600 hover:text-indigo-800" data-sources='${JSON.stringify(sources)}'>
+                                    <i class="fas fa-book-open mr-1"></i>View sources
+                                </button>` : ''}
+                            </div>
+                        </div>
+                    `;
+                }
+                chatArea.appendChild(messageDiv);
+                // Remove welcome message if it's still there
+                const welcomeMessage = chatArea.querySelector('.text-center');
+                if (welcomeMessage) {
+                    welcomeMessage.remove();
+                }
+                // Add event listeners to view sources buttons
+                if (sender === 'bot' && sources) {
+                    const viewSourcesBtn = messageDiv.querySelector('.view-sources');
+                    viewSourcesBtn.addEventListener('click', function() {
+                        const sourcesData = JSON.parse(this.getAttribute('data-sources'));
+                        showSources(sourcesData);
+                    });
+                }
+                // Scroll to bottom
+                chatArea.scrollTop = chatArea.scrollHeight;
+            }
+            // Show sources modal
+            function showSources(sources) {
+                sourcesContent.innerHTML = '';
+                sources.forEach((source, index) => {
+                    const sourceDiv = document.createElement('div');
+                    sourceDiv.classList.add('p-4', 'border', 'border-gray-200', 'rounded-lg');
+                    sourceDiv.innerHTML = `
+                        <h4 class="font-medium text-indigo-600">${source.title}</h4>
+                        <p class="mt-2 text-gray-700">${source.snippet}</p>
+                        <div class="mt-3 flex justify-end">
+                            <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded">
+                                <i class="fas fa-external-link-alt mr-1"></i>View full document
+                            </button>
+                        </div>
+                    `;
+                    sourcesContent.appendChild(sourceDiv);
+                });
+                sourcesModal.classList.remove('hidden');
+            }
+            // Event listeners
+            sendBtn.addEventListener('click', sendMessage);
+            userInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    sendMessage();
+                }
+            });
+            clearChatBtn.addEventListener('click', function() {
+                chatArea.innerHTML = `
+                    <div class="text-center py-10 text-gray-500">
+                        <i class="fas fa-robot text-4xl mb-4 text-indigo-400"></i>
+                        <h3 class="text-xl font-medium">Welcome to RAG Chat</h3>
+                        <p class="mt-2">Ask me anything and I'll retrieve relevant information to answer your questions.</p>
+                    </div>
+                `;
+            });
+            settingsBtn.addEventListener('click', function() {
+                settingsModal.classList.remove('hidden');
+            });
+            closeSettings.addEventListener('click', function() {
+                settingsModal.classList.add('hidden');
+            });
+            cancelSettings.addEventListener('click', function() {
+                settingsModal.classList.add('hidden');
+            });
+            saveSettings.addEventListener('click', function() {
+                // In a real app, you would save settings here
+                settingsModal.classList.add('hidden');
+            });
+            closeSources.addEventListener('click', function() {
+                sourcesModal.classList.add('hidden');
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=matuteiglesias/test-rag-agent" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>