Update app.py

app.py

@@ -1,7 +1,7 @@
 import os
 import sys
 import uvicorn
-from fastapi import FastAPI, Query, HTTPException, BackgroundTasks
+from fastapi import FastAPI, Query, HTTPException
 from fastapi.responses import HTMLResponse
 from starlette.middleware.cors import CORSMiddleware
 from datasets import load_dataset, list_datasets
@@ -152,7 +152,7 @@ async def download_and_process_datasets():
     unify_datasets()
     upload_model_to_hub()
 
-# Inicializar FastAPI
+# Inicializar FastAPI con lifespan events para evitar DeprecationWarning
 app = FastAPI()
 
 # Configuración de CORS
@@ -194,151 +194,140 @@ async def index():
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>GPT-2 Chatbot</title>
+        <!-- Bootstrap CSS for a professional interface -->
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
         <style>
-            /* Existing styles */
-            /* Add styles for the model selector */
-            .model-selector {
-                margin-bottom: 10px;
-            }
             body {
+                background-color: #f8f9fa;
                 font-family: Arial, sans-serif;
-                margin: 0;
-                padding: 0;
-                background-color: #f4f4f4;
             }
             .container {
                 max-width: 800px;
-                margin: auto;
-                padding: 20px;
+                margin-top: 50px;
             }
             .chat-container {
-                background-color: #fff;
-                border-radius: 8px;
-                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-                overflow: hidden;
-                margin-bottom: 20px;
-                animation: fadeInUp 0.5s ease forwards;
+                background-color: #ffffff;
+                border-radius: 10px;
+                box-shadow: 0 0 15px rgba(0,0,0,0.2);
+                padding: 20px;
                 display: flex;
                 flex-direction: column;
+                height: 600px;
             }
             .chat-box {
                 flex: 1;
                 overflow-y: auto;
-                padding: 10px;
+                margin-bottom: 15px;
             }
             .chat-input {
-                width: calc(100% - 20px);
-                border: none;
-                border-top: 1px solid #ddd;
+                width: 100%;
                 padding: 10px;
+                border: 1px solid #ced4da;
+                border-radius: 5px;
                 font-size: 16px;
-                outline: none;
             }
             .chat-input:focus {
-                border-top: 1px solid #007bff;
+                outline: none;
+                border-color: #80bdff;
+                box-shadow: 0 0 5px rgba(0,123,255,0.5);
             }
             .user-message {
+                text-align: right;
                 margin-bottom: 10px;
-                padding: 8px 12px;
-                border-radius: 8px;
+            }
+            .user-message .message {
+                display: inline-block;
                 background-color: #007bff;
                 color: #fff;
+                padding: 10px 15px;
+                border-radius: 15px;
                 max-width: 70%;
-                word-wrap: break-word;
-                align-self: flex-end;
             }
             .bot-message {
+                text-align: left;
                 margin-bottom: 10px;
-                padding: 8px 12px;
-                border-radius: 8px;
-                background-color: #4CAF50;
+            }
+            .bot-message .message {
+                display: inline-block;
+                background-color: #6c757d;
                 color: #fff;
+                padding: 10px 15px;
+                border-radius: 15px;
                 max-width: 70%;
-                word-wrap: break-word;
             }
             .toggle-history {
                 text-align: center;
                 cursor: pointer;
                 color: #007bff;
-                margin-bottom: 10px;
+                margin-top: 10px;
             }
             .history-container {
                 display: none;
-            }
-            .history-container.show {
-                display: block;
-            }
-            .history-container .history-content {
-                max-height: 200px;
+                background-color: #ffffff;
+                border-radius: 10px;
+                box-shadow: 0 0 15px rgba(0,0,0,0.2);
+                padding: 20px;
+                margin-top: 20px;
+                max-height: 300px;
                 overflow-y: auto;
             }
-            @keyframes fadeInUp {
-                from {
-                    opacity: 0;
-                    transform: translateY(20px);
-                }
-                to {
-                    opacity: 1;
-                    transform: translateY(0);
-                }
-            }
         </style>
     </head>
     <body>
         <div class="container">
-            <h1 style="text-align: center;">GPT-2 Chatbot</h1>
-            <div class="chat-container" id="chat-container">
+            <h1 class="text-center mb-4">GPT-2 Chatbot</h1>
+            <div class="chat-container">
                 <div class="chat-box" id="chat-box">
                 </div>
-                <input type="text" class="chat-input" id="user-input" placeholder="Type your message...">
-                <button onclick="retryLastMessage()">Retry Last Message</button>
-            </div>
-            <div class="toggle-history" onclick="toggleHistory()">Toggle History</div>
-            <div class="history-container" id="history-container">
-                <h2>Chat History</h2>
-                <div class="history-content" id="history-content"></div>
+                <input type="text" class="chat-input" id="user-input" placeholder="Type your message..." onkeypress="handleKeyPress(event)">
+                <button class="btn btn-primary mt-3" onclick="sendMessage()">Send</button>
+                <div class="toggle-history mt-3" onclick="toggleHistory()">Toggle History</div>
+                <div class="history-container" id="history-container">
+                    <h3>Chat History</h3>
+                    <div id="history-content"></div>
+                </div>
             </div>
         </div>
+
+        <!-- Bootstrap JS (optional) -->
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
         <script>
             function toggleHistory() {
                 const historyContainer = document.getElementById('history-container');
-                historyContainer.classList.toggle('show');
+                historyContainer.classList.toggle('d-none');
             }
 
             function saveMessage(sender, message) {
                 const historyContent = document.getElementById('history-content');
                 const messageElement = document.createElement('div');
-                messageElement.className = `${sender}-message`;
-                messageElement.innerText = message;
+                messageElement.className = sender === 'user' ? 'user-message' : 'bot-message';
+                messageElement.innerHTML = `<div class="message">${message}</div>`;
                 historyContent.appendChild(messageElement);
             }
 
             function appendMessage(sender, message) {
                 const chatBox = document.getElementById('chat-box');
                 const messageElement = document.createElement('div');
-                messageElement.className = `${sender}-message`;
-                messageElement.innerText = message;
+                messageElement.className = sender === 'user' ? 'user-message' : 'bot-message';
+                messageElement.innerHTML = `<div class="message">${message}</div>`;
                 chatBox.appendChild(messageElement);
                 chatBox.scrollTop = chatBox.scrollHeight;
             }
 
-            const chatContainer = document.getElementById('chat-container');
-            const chatBox = document.getElementById('chat-box');
-            const userInput = document.getElementById('user-input');
-
-            userInput.addEventListener('keyup', function(event) {
-                if (event.keyCode === 13) {
+            function handleKeyPress(event) {
+                if (event.key === 'Enter') {
                     event.preventDefault();
                     sendMessage();
                 }
-            });
+            }
 
             function sendMessage() {
+                const userInput = document.getElementById('user-input');
                 const userMessage = userInput.value.trim();
                 if (userMessage === '') return;
 
-                saveMessage('user', userMessage);
                 appendMessage('user', userMessage);
+                saveMessage('user', userMessage);
                 userInput.value = '';
 
                 fetch(`/autocomplete?q=${encodeURIComponent(userMessage)}`)
@@ -351,20 +340,21 @@ async def index():
                 .then(data => {
                     const botMessages = data.result;
                     botMessages.forEach(message => {
-                        saveMessage('bot', message);
                         appendMessage('bot', message);
+                        saveMessage('bot', message);
                     });
                 })
                 .catch(error => {
                     console.error('Error:', error);
-                    saveMessage('bot', "Sorry, I'm not available right now. Please try again later.");
                     appendMessage('bot', "Sorry, I'm not available right now. Please try again later.");
+                    saveMessage('bot', "Sorry, I'm not available right now. Please try again later.");
                 });
             }
 
             function retryLastMessage() {
-                const lastUserMessage = document.querySelector('.user-message:last-of-type');
+                const lastUserMessage = document.querySelector('.user-message:last-of-type .message');
                 if (lastUserMessage) {
+                    const userInput = document.getElementById('user-input');
                     userInput.value = lastUserMessage.innerText;
                     sendMessage();
                 }
@@ -390,7 +380,7 @@ async def autocomplete(q: str = Query(..., title='query')):
         return {"result": [response]}
     except Exception as e:
         logger.error(f"Ignored error in autocomplete: {e}", exc_info=True)
-        return {"result": []}
+        return {"result": ["Sorry, I encountered an error processing your request."]}
 
 if __name__ == '__main__':
     port = 7860  # Configurar FastAPI para que inicie en el puerto 7860