Create app.py

app.py

@@ -0,0 +1,631 @@
+# ======================== app.py COMPLETO PARA HF SPACE ========================
+# Space name: TeszenAI/MTP-1.1
+# Este archivo contiene el backend y frontend completo
+
+import os
+import json
+import torch
+import torch.nn as nn
+import torch.nn.functional as F
+import math
+from fastapi import FastAPI, HTTPException
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from typing import Optional, List
+import sentencepiece as spm
+from transformers import PreTrainedModel, PretrainedConfig
+import uvicorn
+
+# ======================== DEFINIR ARQUITECTURA DEL MODELO ========================
+class LayerNorm(nn.Module):
+    def __init__(self, d_model: int, eps: float = 1e-5):
+        super().__init__()
+        self.weight = nn.Parameter(torch.ones(d_model))
+        self.bias = nn.Parameter(torch.zeros(d_model))
+        self.eps = eps
+    
+    def forward(self, x):
+        mean = x.mean(-1, keepdim=True)
+        std = x.std(-1, keepdim=True)
+        return self.weight * (x - mean) / (std + self.eps) + self.bias
+
+class MultiHeadAttention(nn.Module):
+    def __init__(self, d_model: int, n_heads: int, dropout: float = 0.1):
+        super().__init__()
+        assert d_model % n_heads == 0
+        self.d_model = d_model
+        self.n_heads = n_heads
+        self.d_k = d_model // n_heads
+        self.w_q = nn.Linear(d_model, d_model)
+        self.w_k = nn.Linear(d_model, d_model)
+        self.w_v = nn.Linear(d_model, d_model)
+        self.w_o = nn.Linear(d_model, d_model)
+        self.dropout = nn.Dropout(dropout)
+        self.scale = math.sqrt(self.d_k)
+        
+    def forward(self, x, mask=None):
+        batch_size, seq_len, _ = x.shape
+        Q = self.w_q(x).view(batch_size, seq_len, self.n_heads, self.d_k).transpose(1, 2)
+        K = self.w_k(x).view(batch_size, seq_len, self.n_heads, self.d_k).transpose(1, 2)
+        V = self.w_v(x).view(batch_size, seq_len, self.n_heads, self.d_k).transpose(1, 2)
+        scores = torch.matmul(Q, K.transpose(-2, -1)) / self.scale
+        if mask is not None:
+            scores = scores.masked_fill(mask == 0, float('-inf'))
+        attn_weights = F.softmax(scores, dim=-1)
+        attn_weights = self.dropout(attn_weights)
+        attn_output = torch.matmul(attn_weights, V)
+        attn_output = attn_output.transpose(1, 2).contiguous().view(batch_size, seq_len, self.d_model)
+        return self.w_o(attn_output)
+
+class FeedForward(nn.Module):
+    def __init__(self, d_model: int, d_ff: int, dropout: float = 0.1):
+        super().__init__()
+        self.linear1 = nn.Linear(d_model, d_ff)
+        self.linear2 = nn.Linear(d_ff, d_model)
+        self.dropout = nn.Dropout(dropout)
+        
+    def forward(self, x):
+        return self.linear2(self.dropout(F.gelu(self.linear1(x))))
+
+class TransformerBlock(nn.Module):
+    def __init__(self, d_model: int, n_heads: int, d_ff: int, dropout: float = 0.1):
+        super().__init__()
+        self.attention = MultiHeadAttention(d_model, n_heads, dropout)
+        self.feed_forward = FeedForward(d_model, d_ff, dropout)
+        self.norm1 = LayerNorm(d_model)
+        self.norm2 = LayerNorm(d_model)
+        self.dropout1 = nn.Dropout(dropout)
+        self.dropout2 = nn.Dropout(dropout)
+        
+    def forward(self, x, mask=None):
+        attn_output = self.attention(x, mask)
+        x = x + self.dropout1(attn_output)
+        x = self.norm1(x)
+        ff_output = self.feed_forward(x)
+        x = x + self.dropout2(ff_output)
+        x = self.norm2(x)
+        return x
+
+class PositionalEncoding(nn.Module):
+    def __init__(self, d_model: int, max_len: int = 5000):
+        super().__init__()
+        pe = torch.zeros(max_len, d_model)
+        position = torch.arange(0, max_len, dtype=torch.float).unsqueeze(1)
+        div_term = torch.exp(torch.arange(0, d_model, 2).float() * (-math.log(10000.0) / d_model))
+        pe[:, 0::2] = torch.sin(position * div_term)
+        pe[:, 1::2] = torch.cos(position * div_term)
+        self.register_buffer('pe', pe.unsqueeze(0))
+        
+    def forward(self, x):
+        return x + self.pe[:, :x.size(1), :]
+
+class MTPModel(nn.Module):
+    def __init__(self, vocab_size: int, d_model: int = 128, n_heads: int = 4, 
+                 n_layers: int = 4, d_ff: int = 512, dropout: float = 0.1, max_len: int = 256):
+        super().__init__()
+        self.vocab_size = vocab_size
+        self.d_model = d_model
+        self.max_len = max_len
+        self.token_embedding = nn.Embedding(vocab_size, d_model)
+        self.pos_encoding = PositionalEncoding(d_model, max_len)
+        self.blocks = nn.ModuleList([
+            TransformerBlock(d_model, n_heads, d_ff, dropout) for _ in range(n_layers)
+        ])
+        self.norm = LayerNorm(d_model)
+        self.lm_head = nn.Linear(d_model, vocab_size)
+        
+    def forward(self, x, mask=None):
+        if mask is None:
+            mask = torch.tril(torch.ones(x.size(1), x.size(1))).unsqueeze(0).unsqueeze(0).to(x.device)
+        x = self.token_embedding(x) * math.sqrt(self.d_model)
+        x = self.pos_encoding(x)
+        for block in self.blocks:
+            x = block(x, mask)
+        x = self.norm(x)
+        logits = self.lm_head(x)
+        return logits
+
+# ======================== CARGAR MODELO Y TOKENIZADOR ========================
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+
+# Cargar configuración
+with open("config.json", "r") as f:
+    config = json.load(f)
+
+# Cargar modelo
+model = MTPModel(**config).to(device)
+model.load_state_dict(torch.load("mtp_model.pt", map_location=device))
+model.eval()
+
+# Cargar tokenizador
+sp = spm.SentencePieceProcessor()
+sp.load("mtp_tokenizer.model")
+
+# ======================== FUNCIÓN DE GENERACIÓN ========================
+def generate_text(prompt: str, max_length: int = 150, temperature: float = 0.8, 
+                  top_k: int = 50, top_p: float = 0.9):
+    """Genera texto con sampling avanzado"""
+    input_ids = sp.encode(prompt)
+    generated = input_ids.copy()
+    
+    for _ in range(max_length):
+        # Preparar input
+        input_tensor = torch.tensor([generated[-model.max_len:]], dtype=torch.long).to(device)
+        
+        # Forward pass
+        with torch.no_grad():
+            logits = model(input_tensor)
+            next_logits = logits[0, -1, :] / temperature
+        
+        # Top-k filtering
+        if top_k > 0:
+            indices_to_remove = next_logits < torch.topk(next_logits, top_k)[0][..., -1, None]
+            next_logits[indices_to_remove] = float('-inf')
+        
+        # Top-p (nucleus) filtering
+        if top_p < 1.0:
+            sorted_logits, sorted_indices = torch.sort(next_logits, descending=True)
+            cumulative_probs = torch.cumsum(F.softmax(sorted_logits, dim=-1), dim=-1)
+            sorted_indices_to_remove = cumulative_probs > top_p
+            sorted_indices_to_remove[..., 1:] = sorted_indices_to_remove[..., :-1].clone()
+            sorted_indices_to_remove[..., 0] = 0
+            indices_to_remove = sorted_indices[sorted_indices_to_remove]
+            next_logits[indices_to_remove] = float('-inf')
+        
+        # Sampling
+        probs = F.softmax(next_logits, dim=-1)
+        next_token = torch.multinomial(probs, num_samples=1).item()
+        
+        # Parar en token EOS
+        if next_token == sp.eos_id():
+            break
+            
+        generated.append(next_token)
+    
+    return sp.decode(generated)
+
+# ======================== FASTAPI APP ========================
+app = FastAPI(title="MTP Chat - Mi Transformer Pequeño", 
+              description="Modelo de lenguaje desde cero para conversación")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+class ChatRequest(BaseModel):
+    message: str
+    temperature: Optional[float] = 0.8
+    max_length: Optional[int] = 150
+
+class ChatResponse(BaseModel):
+    response: str
+
+@app.post("/chat", response_model=ChatResponse)
+async def chat(request: ChatRequest):
+    """Endpoint principal para chat"""
+    try:
+        if not request.message.strip():
+            raise HTTPException(status_code=400, detail="Mensaje vacío")
+        
+        # Generar respuesta
+        response = generate_text(
+            request.message, 
+            max_length=request.max_length,
+            temperature=request.temperature
+        )
+        
+        # Limpiar respuesta (remover el prompt si se repite)
+        if response.startswith(request.message):
+            response = response[len(request.message):].strip()
+        
+        return ChatResponse(response=response)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.get("/health")
+async def health():
+    return {"status": "healthy", "model": "MTP-1.1"}
+
+# ======================== FRONTEND REACT + HTML ========================
+HTML_PAGE = """
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MTP-1.1 - Tu Asistente IA</title>
+    <script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.development.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.development.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/babel-standalone@6.26.0/babel.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+
+        #root {
+            width: 100%;
+            max-width: 1200px;
+            height: 90vh;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 30px;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* Animaciones */
+        @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); opacity: 0.6; }
+            50% { transform: scale(1.1); opacity: 1; }
+        }
+
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        @keyframes typingCursor {
+            0%, 100% { border-right-color: transparent; }
+            50% { border-right-color: #667eea; }
+        }
+
+        /* Scrollbar personalizada */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #764ba2;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+
+    <script type="text/babel">
+        const { useState, useEffect, useRef, useCallback } = React;
+
+        // Componente de mensaje con animación de escritura
+        const Message = ({ text, isUser, isTyping, onTypingComplete }) => {
+            const [displayText, setDisplayText] = useState('');
+            const [currentIndex, setCurrentIndex] = useState(0);
+            const [showCursor, setShowCursor] = useState(true);
+
+            useEffect(() => {
+                if (!isTyping && text && !isUser) {
+                    setDisplayText('');
+                    setCurrentIndex(0);
+                    let interval;
+                    const timer = setTimeout(() => {
+                        interval = setInterval(() => {
+                            setCurrentIndex(prev => {
+                                if (prev < text.length) {
+                                    setDisplayText(text.slice(0, prev + 1));
+                                    return prev + 1;
+                                } else {
+                                    clearInterval(interval);
+                                    if (onTypingComplete) onTypingComplete();
+                                    return prev;
+                                }
+                            });
+                        }, 20);
+                    }, 500);
+                    return () => {
+                        clearTimeout(timer);
+                        clearInterval(interval);
+                    };
+                } else if (isUser && text) {
+                    setDisplayText(text);
+                }
+            }, [text, isTyping, isUser]);
+
+            useEffect(() => {
+                if (isTyping && !isUser) {
+                    const cursorInterval = setInterval(() => {
+                        setShowCursor(prev => !prev);
+                    }, 500);
+                    return () => clearInterval(cursorInterval);
+                }
+            }, [isTyping]);
+
+            return (
+                <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-4 animate-slideIn`}>
+                    <div className={`flex items-start space-x-3 max-w-[70%] ${isUser ? 'flex-row-reverse space-x-reverse' : 'flex-row'}`}>
+                        <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
+                            isUser ? 'bg-gradient-to-r from-green-400 to-blue-500' : 'bg-gradient-to-r from-purple-500 to-pink-500'
+                        }`}>
+                            <i className={`fas ${isUser ? 'fa-user' : 'fa-robot'} text-white text-sm`}></i>
+                        </div>
+                        <div className={`rounded-2xl p-4 ${
+                            isUser ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white' : 'bg-gray-100 text-gray-800'
+                        } shadow-lg`}>
+                            <p className="whitespace-pre-wrap break-words" style={{ fontFamily: 'inherit' }}>
+                                {displayText}
+                                {!isUser && isTyping && displayText.length === 0 && (
+                                    <span className="inline-block w-2 h-4 ml-1 bg-purple-500 animate-pulse"></span>
+                                )}
+                                {!isUser && !isTyping && displayText.length < text?.length && (
+                                    <span className="inline-block w-2 h-4 ml-1 bg-purple-500" style={{ animation: 'typingCursor 1s step-end infinite' }}></span>
+                                )}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            );
+        };
+
+        // Componente de pensamiento
+        const ThinkingIndicator = () => (
+            <div className="flex justify-start mb-4 animate-slideIn">
+                <div className="flex items-start space-x-3">
+                    <div className="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
+                        <i className="fas fa-robot text-white text-sm"></i>
+                    </div>
+                    <div className="bg-gray-100 rounded-2xl p-4 shadow-lg">
+                        <div className="flex space-x-2">
+                            <div className="w-2 h-2 bg-purple-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
+                            <div className="w-2 h-2 bg-purple-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
+                            <div className="w-2 h-2 bg-purple-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
+                        </div>
+                        <p className="text-gray-500 text-sm mt-2">MTP está pensando...</p>
+                    </div>
+                </div>
+            </div>
+        );
+
+        // Componente principal
+        const ChatApp = () => {
+            const [messages, setMessages] = useState([]);
+            const [input, setInput] = useState('');
+            const [isThinking, setIsThinking] = useState(false);
+            const [temperature, setTemperature] = useState(0.8);
+            const [isTyping, setIsTyping] = useState(false);
+            const messagesEndRef = useRef(null);
+            const inputRef = useRef(null);
+
+            const scrollToBottom = () => {
+                messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+            };
+
+            useEffect(() => {
+                scrollToBottom();
+            }, [messages, isThinking]);
+
+            useEffect(() => {
+                inputRef.current?.focus();
+            }, []);
+
+            const sendMessage = useCallback(async () => {
+                if (!input.trim() || isThinking || isTyping) return;
+
+                const userMessage = { text: input, isUser: true, timestamp: Date.now() };
+                setMessages(prev => [...prev, userMessage]);
+                setInput('');
+                setIsThinking(true);
+
+                try {
+                    const response = await axios.post('/chat', {
+                        message: input,
+                        temperature: temperature,
+                        max_length: 200
+                    });
+
+                    setIsThinking(false);
+                    setIsTyping(true);
+                    setMessages(prev => [...prev, { 
+                        text: response.data.response, 
+                        isUser: false, 
+                        timestamp: Date.now(),
+                        isTyping: true
+                    }]);
+                } catch (error) {
+                    console.error('Error:', error);
+                    setIsThinking(false);
+                    setMessages(prev => [...prev, { 
+                        text: 'Lo siento, hubo un error al procesar tu mensaje. 😔', 
+                        isUser: false, 
+                        timestamp: Date.now() 
+                    }]);
+                }
+            }, [input, isThinking, isTyping, temperature]);
+
+            const handleTypingComplete = () => {
+                setIsTyping(false);
+            };
+
+            const clearChat = () => {
+                setMessages([]);
+                setIsThinking(false);
+                setIsTyping(false);
+            };
+
+            return (
+                <div className="flex flex-col h-full">
+                    {/* Header */}
+                    <div className="bg-gradient-to-r from-purple-600 to-pink-600 text-white p-6 shadow-lg">
+                        <div className="flex items-center justify-between">
+                            <div className="flex items-center space-x-3">
+                                <div className="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
+                                    <i className="fas fa-brain text-2xl"></i>
+                                </div>
+                                <div>
+                                    <h1 className="text-2xl font-bold">MTP-1.1</h1>
+                                    <p className="text-sm opacity-90">Mi Transformer Pequeño · IA desde cero</p>
+                                </div>
+                            </div>
+                            <div className="flex items-center space-x-3">
+                                <div className="flex items-center space-x-2 bg-white bg-opacity-20 rounded-full px-4 py-2">
+                                    <i className="fas fa-thermometer-half"></i>
+                                    <span className="text-sm">Temp:</span>
+                                    <input 
+                                        type="range" 
+                                        min="0.1" 
+                                        max="1.5" 
+                                        step="0.01"
+                                        value={temperature}
+                                        onChange={(e) => setTemperature(parseFloat(e.target.value))}
+                                        className="w-24"
+                                    />
+                                    <span className="text-sm font-mono">{temperature.toFixed(2)}</span>
+                                </div>
+                                <button 
+                                    onClick={clearChat}
+                                    className="bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full p-2 transition-all"
+                                >
+                                    <i className="fas fa-trash-alt"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Messages Area */}
+                    <div className="flex-1 overflow-y-auto p-6 bg-gray-50">
+                        {messages.length === 0 && (
+                            <div className="flex flex-col items-center justify-center h-full text-center">
+                                <div className="w-32 h-32 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mb-6 animate-pulse">
+                                    <i className="fas fa-comments text-5xl text-white"></i>
+                                </div>
+                                <h2 className="text-3xl font-bold text-gray-700 mb-2">¡Hola! Soy MTP-1.1</h2>
+                                <p className="text-gray-500 max-w-md">
+                                    Un modelo de lenguaje entrenado desde cero. Puedo ayudarte a generar texto, 
+                                    responder preguntas y mantener conversaciones. ¿Qué te gustaría hablar?
+                                </p>
+                                <div className="grid grid-cols-2 gap-4 mt-8 max-w-lg">
+                                    {["¿Qué es la inteligencia artificial?", "Cuéntame un chiste", "Explica el machine learning", "Hola, ¿cómo estás?"].map((suggestion) => (
+                                        <button
+                                            key={suggestion}
+                                            onClick={() => setInput(suggestion)}
+                                            className="bg-white border border-purple-200 hover:border-purple-400 rounded-lg p-3 text-sm transition-all"
+                                        >
+                                            {suggestion}
+                                        </button>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                        
+                        {messages.map((msg, idx) => (
+                            <Message 
+                                key={idx} 
+                                text={msg.text} 
+                                isUser={msg.isUser}
+                                isTyping={msg.isTyping && idx === messages.length - 1}
+                                onTypingComplete={idx === messages.length - 1 ? handleTypingComplete : null}
+                            />
+                        ))}
+                        
+                        {isThinking && <ThinkingIndicator />}
+                        <div ref={messagesEndRef} />
+                    </div>
+
+                    {/* Input Area */}
+                    <div className="p-6 bg-white border-t border-gray-200">
+                        <div className="flex space-x-3">
+                            <div className="flex-1 relative">
+                                <textarea
+                                    ref={inputRef}
+                                    value={input}
+                                    onChange={(e) => setInput(e.target.value)}
+                                    onKeyPress={(e) => {
+                                        if (e.key === 'Enter' && !e.shiftKey) {
+                                            e.preventDefault();
+                                            sendMessage();
+                                        }
+                                    }}
+                                    placeholder="Escribe tu mensaje aquí..."
+                                    rows="1"
+                                    className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:border-purple-500 resize-none"
+                                    style={{ fontFamily: 'inherit' }}
+                                />
+                            </div>
+                            <button
+                                onClick={sendMessage}
+                                disabled={!input.trim() || isThinking || isTyping}
+                                className="bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-xl px-6 py-3 hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                            >
+                                <i className="fas fa-paper-plane"></i>
+                            </button>
+                        </div>
+                        <div className="text-xs text-center text-gray-400 mt-3">
+                            <i className="fas fa-microchip"></i> MTP-1.1 · Modelo desde cero · 
+                            <i className="fas fa-brain ml-2"></i> ~4M parámetros
+                        </div>
+                    </div>
+                </div>
+            );
+        };
+
+        ReactDOM.render(<ChatApp />, document.getElementById('root'));
+    </script>
+
+    <style>
+        .animate-slideIn {
+            animation: slideIn 0.3s ease-out;
+        }
+        
+        .animate-bounce {
+            animation: bounce 1.4s infinite;
+        }
+        
+        @keyframes bounce {
+            0%, 60%, 100% {
+                transform: translateY(0);
+            }
+            30% {
+                transform: translateY(-10px);
+            }
+        }
+    </style>
+</body>
+</html>
+"""
+
+@app.get("/")
+async def root():
+    return HTMLResponse(HTML_PAGE)
+
+# ======================== EJECUTAR APP ========================
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=7860)