| | 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) |
| |
|
| |
|
| |
|
