| import os |
| import gc |
| import uvicorn |
| from fastapi import FastAPI |
| from fastapi.responses import HTMLResponse |
| from fastapi.middleware.cors import CORSMiddleware |
| from pydantic import BaseModel |
| from huggingface_hub import hf_hub_download |
| from llama_cpp import Llama |
|
|
| |
| |
| |
| print("⚙️ Configurando entorno para CPU...") |
|
|
| |
| |
| |
| REPO_ID = "lmstudio-community/gemma-3-4b-it-GGUF" |
| FILENAME = "gemma-3-4b-it-Q4_K_M.gguf" |
|
|
| print(f"📦 Descargando/Verificando modelo: {FILENAME}...") |
|
|
| try: |
| |
| model_path = hf_hub_download( |
| repo_id=REPO_ID, |
| filename=FILENAME |
| ) |
| |
| |
| |
| |
| llm = Llama( |
| model_path=model_path, |
| n_ctx=8192, |
| n_threads=max(1, os.cpu_count() - 1), |
| verbose=False |
| ) |
| print("✅ Modelo Gemma 3 4B GGUF cargado correctamente en CPU.") |
|
|
| except Exception as e: |
| print(f"❌ Error crítico cargando el modelo: {e}") |
| print("💡 Sugerencia: Verifica que el repo y filename existan en Hugging Face.") |
| raise e |
|
|
| |
| |
| |
| app = FastAPI( |
| title="MTP Gemma 3 4B CPU", |
| description="Versión optimizada para CPU (Gemma 3 4B GGUF)", |
| version="4.0" |
| ) |
|
|
| app.add_middleware( |
| CORSMiddleware, |
| allow_origins=["*"], |
| allow_methods=["*"], |
| allow_headers=["*"], |
| ) |
|
|
| class PromptRequest(BaseModel): |
| text: str |
| max_tokens: int = 1024 |
| temperature: float = 0.7 |
| top_p: float = 0.9 |
|
|
| |
| SYSTEM_PROMPT_TEXT = ( |
| "Eres MTP Gemma 3, una inteligencia artificial avanzada desarrollada por Teszen AI. " |
| "Tu objetivo es ser útil, preciso y amigable. " |
| "Responde siempre en formato Markdown bien estructurado. " |
| "Tus capacidades incluyen razonamiento avanzado y comprensión de contexto." |
| ) |
|
|
| |
| |
| |
| @app.post("/generate") |
| def generate(req: PromptRequest): |
| try: |
| |
| |
| |
| full_prompt = ( |
| f"<start_of_turn>user\n" |
| f"{SYSTEM_PROMPT_TEXT}\n\n" |
| f"{req.text}<end_of_turn>\n" |
| f"<start_of_turn>model\n" |
| ) |
|
|
| output = llm( |
| full_prompt, |
| max_tokens=req.max_tokens, |
| temperature=req.temperature, |
| top_p=req.top_p, |
| stop=["<end_of_turn>", "<eos>"], |
| echo=False |
| ) |
|
|
| reply = output["choices"][0]["text"].strip() |
|
|
| return {"reply": reply} |
|
|
| except Exception as e: |
| print(f"Error en generación: {e}") |
| return {"reply": f"❌ Error interno del servidor: {str(e)}"} |
|
|
| |
| |
| |
| @app.get("/", response_class=HTMLResponse) |
| def chat_ui(): |
| return """ |
| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
| <title>MTP Gemma 3 | Teszen AI</title> |
| |
| <!-- Fuentes e Iconos --> |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| |
| <!-- Markdown y Highlight.js --> |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> |
| |
| <style> |
| :root { |
| --bg-color: #0f1012; |
| --chat-bg: #161719; |
| --input-bg: #202124; |
| /* Color distintivo para Gemma 3: Un gradiente sutil o un azul cian Google */ |
| --primary: #4285F4; |
| --primary-glow: rgba(66, 133, 244, 0.4); |
| --text-main: #e8eaed; |
| --text-secondary: #9aa0a6; |
| --user-bubble: #2b2d31; |
| --bot-bubble: transparent; |
| --border: #303134; |
| } |
| |
| * { box-sizing: border-box; outline: none; } |
| |
| body { |
| margin: 0; |
| font-family: 'Outfit', sans-serif; |
| background-color: var(--bg-color); |
| color: var(--text-main); |
| height: 100vh; |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| } |
| |
| /* --- Header --- */ |
| header { |
| padding: 15px 24px; |
| background: rgba(15, 16, 18, 0.85); |
| backdrop-filter: blur(12px); |
| border-bottom: 1px solid var(--border); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| z-index: 100; |
| } |
| |
| .brand { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
| |
| .logo-container { |
| position: relative; |
| width: 42px; |
| height: 42px; |
| } |
| |
| .logo { |
| width: 100%; |
| height: 100%; |
| border-radius: 50%; |
| object-fit: cover; |
| border: 2px solid var(--primary); |
| box-shadow: 0 0 15px var(--primary-glow); |
| } |
| |
| .brand-text h1 { |
| margin: 0; |
| font-size: 1.1rem; |
| font-weight: 600; |
| letter-spacing: 0.5px; |
| } |
| |
| .brand-text span { |
| font-size: 0.75rem; |
| color: var(--primary); |
| background: rgba(66, 133, 244, 0.1); |
| padding: 2px 8px; |
| border-radius: 6px; |
| margin-left: 8px; |
| border: 1px solid rgba(66, 133, 244, 0.2); |
| } |
| |
| .status-dot { |
| width: 8px; |
| height: 8px; |
| background: #00ff88; |
| border-radius: 50%; |
| box-shadow: 0 0 8px #00ff88; |
| } |
| |
| /* --- Chat Area --- */ |
| #chat-container { |
| flex: 1; |
| padding: 20px; |
| overflow-y: auto; |
| scroll-behavior: smooth; |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| max-width: 900px; |
| margin: 0 auto; |
| width: 100%; |
| } |
| |
| .message { |
| display: flex; |
| gap: 16px; |
| opacity: 0; |
| transform: translateY(10px); |
| animation: slideIn 0.3s forwards; |
| } |
| |
| @keyframes slideIn { |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .avatar { |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| flex-shrink: 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: #333; |
| overflow: hidden; |
| } |
| |
| .avatar img { width: 100%; height: 100%; object-fit: cover; } |
| .avatar i { font-size: 1.1rem; color: #fff; } |
| |
| .bot-avatar { background: transparent; border: 1px solid var(--primary); } |
| .user-avatar { background: var(--border); } |
| |
| .content { |
| flex: 1; |
| max-width: 85%; |
| font-size: 0.98rem; |
| line-height: 1.6; |
| } |
| |
| .user-msg { flex-direction: row-reverse; } |
| |
| .user-msg .content { |
| background: var(--user-bubble); |
| padding: 12px 18px; |
| border-radius: 18px 4px 18px 18px; |
| color: #fff; |
| box-shadow: 0 4px 15px rgba(0,0,0,0.1); |
| } |
| |
| .bot-msg .content { |
| background: var(--bot-bubble); |
| padding: 0 10px; |
| color: var(--text-main); |
| } |
| |
| /* Markdown Styles */ |
| .bot-msg .content p { margin-top: 0; margin-bottom: 10px; } |
| .bot-msg .content pre { |
| background: #1e1e1e !important; |
| padding: 15px; |
| border-radius: 12px; |
| overflow-x: auto; |
| border: 1px solid #333; |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.9rem; |
| } |
| .bot-msg .content code { |
| font-family: 'JetBrains Mono', monospace; |
| background: rgba(255,255,255,0.1); |
| padding: 2px 5px; |
| border-radius: 4px; |
| font-size: 0.85em; |
| } |
| .bot-msg .content ul, .bot-msg .content ol { padding-left: 20px; } |
| .bot-msg .content blockquote { |
| border-left: 3px solid var(--primary); |
| margin: 0; |
| padding-left: 15px; |
| color: var(--text-secondary); |
| } |
| |
| /* --- Footer / Input --- */ |
| .input-area { |
| padding: 20px; |
| background: var(--bg-color); |
| border-top: 1px solid var(--border); |
| } |
| |
| .input-wrapper { |
| max-width: 900px; |
| margin: 0 auto; |
| position: relative; |
| background: var(--input-bg); |
| border-radius: 24px; |
| padding: 8px 8px 8px 20px; |
| display: flex; |
| align-items: flex-end; |
| border: 1px solid transparent; |
| transition: border-color 0.3s, box-shadow 0.3s; |
| } |
| |
| .input-wrapper:focus-within { |
| border-color: var(--primary); |
| box-shadow: 0 0 15px rgba(66, 133, 244, 0.15); |
| } |
| |
| textarea { |
| flex: 1; |
| background: transparent; |
| border: none; |
| color: white; |
| font-family: inherit; |
| font-size: 1rem; |
| resize: none; |
| max-height: 150px; |
| padding: 12px 0; |
| height: 48px; |
| } |
| |
| textarea::placeholder { color: var(--text-secondary); } |
| |
| .btn-send { |
| width: 42px; |
| height: 42px; |
| border: none; |
| border-radius: 50%; |
| background: var(--primary); |
| color: white; |
| cursor: pointer; |
| margin-left: 10px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: transform 0.2s, background 0.2s; |
| } |
| |
| .btn-send:hover { background: #5b96f5; transform: scale(1.05); } |
| .btn-send:disabled { background: #444; cursor: not-allowed; transform: none; } |
| |
| /* --- Typing Indicator --- */ |
| .typing { |
| display: flex; |
| gap: 4px; |
| padding: 10px 0; |
| display: none; |
| } |
| .dot { |
| width: 6px; |
| height: 6px; |
| background: var(--text-secondary); |
| border-radius: 50%; |
| animation: bounce 1.4s infinite ease-in-out both; |
| } |
| .dot:nth-child(1) { animation-delay: -0.32s; } |
| .dot:nth-child(2) { animation-delay: -0.16s; } |
| |
| @keyframes bounce { |
| 0%, 80%, 100% { transform: scale(0); } |
| 40% { transform: scale(1); } |
| } |
| |
| ::-webkit-scrollbar { width: 8px; } |
| ::-webkit-scrollbar-track { background: transparent; } |
| ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } |
| </style> |
| </head> |
| |
| <body> |
| |
| <header> |
| <div class="brand"> |
| <div class="logo-container"> |
| <img src="https://i.postimg.cc/yxS54PF3/IMG-3082.jpg" |
| class="logo" |
| alt="MTP Gemma" |
| onerror="this.onerror=null; this.src='https://cdn-icons-png.flaticon.com/512/4712/4712027.png'"> |
| </div> |
| <div class="brand-text"> |
| <h1>MTP Gemma <span>3 | 4B CPU</span></h1> |
| </div> |
| </div> |
| <div title="Online" class="status-dot"></div> |
| </header> |
| |
| <div id="chat-container"> |
| <div class="message bot-msg"> |
| <div class="avatar bot-avatar"> |
| <img src="https://i.postimg.cc/yxS54PF3/IMG-3082.jpg" onerror="this.style.display='none';this.nextElementSibling.style.display='block'"> |
| <i class="fa-solid fa-robot" style="display:none"></i> |
| </div> |
| <div class="content"> |
| <p>Hola, soy <strong>MTP Gemma 3</strong>. 💎<br> |
| Corriendo la arquitectura 4B optimizada en CPU. ¿Qué vamos a crear hoy?</p> |
| </div> |
| </div> |
| </div> |
| |
| <div id="typing-indicator" style="padding-left: 70px; display: none;"> |
| <div class="typing"> |
| <div class="dot"></div> |
| <div class="dot"></div> |
| <div class="dot"></div> |
| </div> |
| </div> |
| |
| <div class="input-area"> |
| <div class="input-wrapper"> |
| <textarea id="userInput" placeholder="Escribe tu mensaje aquí..." rows="1"></textarea> |
| <button id="sendBtn" class="btn-send" onclick="sendMessage()"> |
| <i class="fa-solid fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| |
| <script> |
| const chatContainer = document.getElementById('chat-container'); |
| const userInput = document.getElementById('userInput'); |
| const sendBtn = document.getElementById('sendBtn'); |
| const typingIndicator = document.getElementById('typing-indicator'); |
| |
| // Auto-resize |
| userInput.addEventListener('input', function() { |
| this.style.height = 'auto'; |
| this.style.height = (this.scrollHeight) + 'px'; |
| if(this.value === '') this.style.height = '48px'; |
| }); |
| |
| userInput.addEventListener('keydown', (e) => { |
| if (e.key === 'Enter' && !e.shiftKey) { |
| e.preventDefault(); |
| sendMessage(); |
| } |
| }); |
| |
| function appendMessage(text, isUser) { |
| const div = document.createElement('div'); |
| div.className = `message ${isUser ? 'user-msg' : 'bot-msg'}`; |
| |
| let avatarHTML = isUser ? |
| `<div class="avatar user-avatar"><i class="fa-solid fa-user"></i></div>` : |
| `<div class="avatar bot-avatar"> |
| <img src="https://i.postimg.cc/yxS54PF3/IMG-3082.jpg" onerror="this.style.display='none';this.nextElementSibling.style.display='block'"> |
| <i class="fa-solid fa-robot" style="display:none"></i> |
| </div>`; |
| |
| let contentHTML = isUser ? |
| text.replace(/</g, "<").replace(/>/g, ">").replace(/\\n/g, "<br>") : |
| marked.parse(text); |
| |
| div.innerHTML = `${avatarHTML}<div class="content">${contentHTML}</div>`; |
| chatContainer.appendChild(div); |
| |
| if (!isUser) { |
| div.querySelectorAll('pre code').forEach((block) => hljs.highlightElement(block)); |
| } |
| |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| } |
| |
| async function sendMessage() { |
| const text = userInput.value.trim(); |
| if (!text) return; |
| |
| userInput.value = ''; |
| userInput.style.height = '48px'; |
| userInput.disabled = true; |
| sendBtn.disabled = true; |
| |
| appendMessage(text, true); |
| typingIndicator.style.display = 'block'; |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| |
| try { |
| const response = await fetch('/generate', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ text: text }) |
| }); |
| |
| const data = await response.json(); |
| typingIndicator.style.display = 'none'; |
| |
| if (data.reply) { |
| appendMessage(data.reply, false); |
| } else { |
| appendMessage("❌ Error: Respuesta vacía del servidor.", false); |
| } |
| |
| } catch (error) { |
| typingIndicator.style.display = 'none'; |
| appendMessage(`❌ Error de conexión: ${error.message}`, false); |
| } finally { |
| userInput.disabled = false; |
| sendBtn.disabled = false; |
| userInput.focus(); |
| } |
| } |
| </script> |
| |
| </body> |
| </html> |
| """ |
|
|
| |
| |
| |
| if __name__ == "__main__": |
| port = int(os.environ.get("PORT", 7860)) |
| uvicorn.run(app, host="0.0.0.0", port=port) |
|
|
|
|
|
|
