| from flask import Flask, render_template_string, request, jsonify |
| from transformers import pipeline, set_seed |
| import threading |
|
|
| |
| |
| print("Cargando modelo GPT-2...") |
| generator = pipeline('text-generation', model='openai-community/gpt2') |
| set_seed(42) |
| print("Modelo cargado.") |
|
|
| app = Flask(__name__) |
|
|
| |
| |
| HTML_TEMPLATE = """ |
| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>GPT-2 Chat Clone</title> |
| <!-- Font Awesome para iconos --> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| /* --- ESTILOS GENERALES (Reset & Colors) --- */ |
| :root { |
| --bg-color: #343541; |
| --chat-input-bg: #40414F; |
| --user-msg-bg: #343541; |
| --bot-msg-bg: #444654; |
| --text-color: #ECECF1; |
| --border-color: rgba(32,33,35,0.5); |
| --sidebar-color: #202123; |
| } |
| |
| body, html { |
| margin: 0; |
| padding: 0; |
| font-family: 'Söhne', 'Segoe UI', Helvetica, Arial, sans-serif; |
| background-color: var(--bg-color); |
| color: var(--text-color); |
| height: 100%; |
| overflow: hidden; /* Evitar scroll en el body, solo en el chat */ |
| } |
| |
| /* --- LAYOUT PRINCIPAL --- */ |
| .main-container { |
| display: flex; |
| flex-direction: column; |
| height: 100vh; |
| max-width: 100%; |
| } |
| |
| /* --- ÁREA DE CHAT --- */ |
| #chat-history { |
| flex: 1; |
| overflow-y: auto; |
| scroll-behavior: smooth; |
| padding-bottom: 150px; /* Espacio para el input fijo abajo */ |
| } |
| |
| /* Filas de mensajes (Stripe style) */ |
| .message-row { |
| width: 100%; |
| border-bottom: 1px solid rgba(0,0,0,0.1); |
| padding: 24px 0; |
| display: flex; |
| justify-content: center; |
| } |
| |
| .message-row.user { |
| background-color: var(--user-msg-bg); |
| } |
| |
| .message-row.bot { |
| background-color: var(--bot-msg-bg); |
| border-bottom: 1px solid var(--border-color); |
| } |
| |
| .message-content { |
| max-width: 768px; |
| width: 90%; |
| display: flex; |
| gap: 20px; |
| font-size: 16px; |
| line-height: 1.6; |
| } |
| |
| /* Avatares */ |
| .avatar { |
| width: 30px; |
| height: 30px; |
| border-radius: 2px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| flex-shrink: 0; |
| } |
| |
| .avatar.user { |
| background-color: #5436DA; |
| } |
| |
| .avatar.bot { |
| background-color: #19C37D; /* El verde clásico */ |
| } |
| |
| .text-content { |
| padding-top: 2px; |
| width: 100%; |
| white-space: pre-wrap; /* Mantiene saltos de línea */ |
| } |
| |
| /* --- ÁREA DE INPUT FIJA --- */ |
| .input-area { |
| position: fixed; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| background-image: linear-gradient(180deg,rgba(53,55,64,0),#353740 58.85%); |
| padding-bottom: 30px; |
| padding-top: 20px; |
| display: flex; |
| justify-content: center; |
| } |
| |
| .input-container { |
| width: 90%; |
| max-width: 768px; |
| position: relative; |
| } |
| |
| .chat-input { |
| width: 100%; |
| background-color: var(--chat-input-bg); |
| border: 1px solid rgba(32,33,35,0.5); |
| border-radius: 6px; |
| color: white; |
| padding: 12px 45px 12px 15px; |
| font-size: 16px; |
| font-family: inherit; |
| resize: none; |
| height: 50px; |
| box-shadow: 0 0 15px rgba(0,0,0,0.1); |
| outline: none; |
| } |
| |
| .chat-input:focus { |
| box-shadow: 0 0 15px rgba(0,0,0,0.3); |
| border-color: rgba(32,33,35,0); |
| } |
| |
| .send-btn { |
| position: absolute; |
| right: 12px; |
| bottom: 12px; |
| background: transparent; |
| border: none; |
| color: #8e8ea0; |
| cursor: pointer; |
| transition: color 0.2s; |
| } |
| |
| .send-btn:hover { |
| color: #d9d9e3; |
| } |
| |
| .send-btn:disabled { |
| opacity: 0.5; |
| cursor: default; |
| } |
| |
| /* --- PANTALLA DE BIENVENIDA --- */ |
| #welcome-screen { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| height: 80%; |
| text-align: center; |
| color: var(--text-color); |
| } |
| |
| .logo-big { |
| font-size: 40px; |
| font-weight: bold; |
| margin-bottom: 40px; |
| } |
| |
| .columns { |
| display: flex; |
| gap: 15px; |
| flex-wrap: wrap; |
| justify-content: center; |
| } |
| |
| .col { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| width: 240px; |
| } |
| |
| .icon-header { |
| margin-bottom: 10px; |
| font-size: 24px; |
| } |
| |
| .card { |
| background-color: #3E3F4B; |
| padding: 12px; |
| border-radius: 6px; |
| margin-bottom: 12px; |
| width: 100%; |
| font-size: 14px; |
| } |
| |
| /* --- ANIMACIONES --- */ |
| .cursor::after { |
| content: "▋"; |
| display: inline-block; |
| animation: blink 1s infinite; |
| color: var(--text-color); |
| margin-left: 2px; |
| font-size: 14px; |
| vertical-align: middle; |
| } |
| |
| @keyframes blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0; } |
| } |
| |
| /* Ocultar scrollbar pero permitir scroll */ |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #565869; |
| border-radius: 4px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: #8e8ea0; |
| } |
| |
| </style> |
| </head> |
| <body> |
| |
| <div class="main-container"> |
| <!-- Contenedor del Historial --> |
| <div id="chat-history"> |
| <!-- Pantalla de bienvenida --> |
| <div id="welcome-screen"> |
| <div class="logo-big">GPT-2</div> |
| <div class="columns"> |
| <div class="col"> |
| <div class="icon-header"><i class="fa-regular fa-sun"></i></div> |
| <h3>Examples</h3> |
| <div class="card">"Explain quantum computing in simple terms"</div> |
| <div class="card">"Got any creative ideas for a 10 year old’s birthday?"</div> |
| </div> |
| <div class="col"> |
| <div class="icon-header"><i class="fa-solid fa-bolt"></i></div> |
| <h3>Capabilities</h3> |
| <div class="card">Remembers what user said earlier in the conversation</div> |
| <div class="card">Allows user to provide follow-up corrections</div> |
| </div> |
| <div class="col"> |
| <div class="icon-header"><i class="fa-solid fa-triangle-exclamation"></i></div> |
| <h3>Limitations</h3> |
| <div class="card">May occasionally generate incorrect information</div> |
| <div class="card">Limited knowledge of world and events after 2021</div> |
| </div> |
| </div> |
| </div> |
| <!-- Los mensajes se insertarán aquí --> |
| </div> |
| |
| <!-- Input --> |
| <div class="input-area"> |
| <div class="input-container"> |
| <textarea id="user-input" class="chat-input" rows="1" placeholder="Send a message..."></textarea> |
| <button id="send-btn" class="send-btn"><i class="fa-solid fa-paper-plane"></i></button> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| const chatHistory = document.getElementById('chat-history'); |
| const userInput = document.getElementById('user-input'); |
| const sendBtn = document.getElementById('send-btn'); |
| const welcomeScreen = document.getElementById('welcome-screen'); |
| |
| let isFirstMessage = true; |
| |
| // Auto-resize del textarea |
| userInput.addEventListener('input', function() { |
| this.style.height = 'auto'; |
| this.style.height = (this.scrollHeight) + 'px'; |
| if(this.value === '') this.style.height = '50px'; |
| }); |
| |
| // Enviar con Enter (sin Shift) |
| userInput.addEventListener('keydown', function(e) { |
| if (e.key === 'Enter' && !e.shiftKey) { |
| e.preventDefault(); |
| sendMessage(); |
| } |
| }); |
| |
| sendBtn.addEventListener('click', sendMessage); |
| |
| async function sendMessage() { |
| const text = userInput.value.trim(); |
| if (!text) return; |
| |
| // 1. UI Updates |
| if (isFirstMessage) { |
| welcomeScreen.style.display = 'none'; |
| isFirstMessage = false; |
| } |
| |
| userInput.value = ''; |
| userInput.style.height = '50px'; |
| addMessage(text, 'user'); |
| |
| // Placeholder Bot (Loading) |
| const botMsgId = addMessage('', 'bot', true); |
| |
| // 2. Fetch Backend |
| try { |
| const response = await fetch('/generate', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ prompt: text }) |
| }); |
| |
| const data = await response.json(); |
| |
| // 3. Typewriter Effect |
| const botContentDiv = document.getElementById(botMsgId); |
| // Quitamos cursor de carga si existiera y empezamos a escribir |
| botContentDiv.innerHTML = '<span class="cursor"></span>'; |
| |
| typeWriter(botContentDiv, data.response); |
| |
| } catch (error) { |
| console.error(error); |
| document.getElementById(botMsgId).textContent = "Error: Could not connect to the server."; |
| } |
| } |
| |
| function addMessage(text, role, isLoading = false) { |
| const row = document.createElement('div'); |
| row.className = `message-row ${role}`; |
| |
| const content = document.createElement('div'); |
| content.className = 'message-content'; |
| |
| const avatar = document.createElement('div'); |
| avatar.className = `avatar ${role}`; |
| avatar.innerHTML = role === 'user' |
| ? '<i class="fa-solid fa-user" style="color: white; font-size: 14px;"></i>' |
| : '<i class="fa-solid fa-robot" style="color: white; font-size: 14px;"></i>'; |
| |
| const textDiv = document.createElement('div'); |
| textDiv.className = 'text-content'; |
| |
| if (isLoading) { |
| // Generamos ID único para actualizar luego |
| const id = 'msg-' + Date.now(); |
| textDiv.id = id; |
| textDiv.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i>'; // Loading icon |
| content.appendChild(avatar); |
| content.appendChild(textDiv); |
| row.appendChild(content); |
| chatHistory.appendChild(row); |
| chatHistory.scrollTop = chatHistory.scrollHeight; |
| return id; |
| } else { |
| textDiv.textContent = text; |
| content.appendChild(avatar); |
| content.appendChild(textDiv); |
| row.appendChild(content); |
| chatHistory.appendChild(row); |
| chatHistory.scrollTop = chatHistory.scrollHeight; |
| } |
| } |
| |
| function typeWriter(element, text) { |
| let i = 0; |
| element.innerHTML = '<span class="cursor"></span>'; // Iniciar cursor |
| const speed = 20; // Velocidad de escritura ms |
| |
| function type() { |
| if (i < text.length) { |
| // Insertamos el caracter ANTES del cursor |
| const char = text.charAt(i); |
| // Manipulamos el HTML para mantener el cursor al final |
| const currentHtml = element.innerHTML; |
| // Quitamos el span del cursor, agregamos letra, agregamos cursor |
| element.innerHTML = currentHtml.replace('<span class="cursor"></span>', '') + char + '<span class="cursor"></span>'; |
| i++; |
| chatHistory.scrollTop = chatHistory.scrollHeight; // Auto scroll |
| setTimeout(type, speed); |
| } else { |
| // Al final, quitamos el cursor parpadeante |
| element.innerHTML = element.innerHTML.replace('<span class="cursor"></span>', ''); |
| } |
| } |
| type(); |
| } |
| </script> |
| </body> |
| </html> |
| """ |
|
|
| |
|
|
| @app.route('/') |
| def home(): |
| return render_template_string(HTML_TEMPLATE) |
|
|
| @app.route('/generate', methods=['POST']) |
| def generate(): |
| data = request.json |
| prompt_text = data.get('prompt', '') |
| |
| if not prompt_text: |
| return jsonify({'response': 'Please write something.'}) |
|
|
| try: |
| |
| |
| input_len = len(prompt_text.split()) |
| response = generator( |
| prompt_text, |
| max_length=input_len + 60, |
| num_return_sequences=1, |
| pad_token_id=50256, |
| no_repeat_ngram_size=2, |
| temperature=0.7, |
| top_k=50, |
| top_p=0.95 |
| ) |
| |
| full_text = response[0]['generated_text'] |
| |
| |
| |
| bot_response = full_text.replace(prompt_text, "", 1).strip() |
| |
| if not bot_response: |
| bot_response = "..." |
|
|
| return jsonify({'response': bot_response}) |
|
|
| except Exception as e: |
| return jsonify({'response': f"Error: {str(e)}"}) |
|
|
| |
| if __name__ == '__main__': |
| app.run(host='0.0.0.0', port=7860) |
|
|
|
|
|
|
