Spaces:

Hodely
/

AmsideAi

Runtime error

App Files Files Community

Hodely commited on May 27

Commit

d3f31fd

verified ·

1 Parent(s): 7351bce

Upload 3 files

Browse files

Files changed (3) hide show

app.py +87 -0
index.html +500 -0
requirements.txt +76 -0

app.py ADDED Viewed

	@@ -0,0 +1,87 @@

+from flask import Flask, request, jsonify
+from flask_cors import CORS
+from transformers import pipeline
+import os # Necesario para acceder a variables de entorno
+app = Flask(__name__)
+CORS(app) # Habilita CORS para permitir peticiones desde tu frontend
+# Nombre del modelo de Hugging Face
+MODEL_ID = "sarvamai/sarvam-m"
+# Variable para almacenar el pipeline de la IA
+pipe = None
+# Función para cargar el modelo
+# Se llama al inicio para que el modelo esté listo
+def load_model():
+    global pipe
+    try:
+        print(f"Cargando modelo '{MODEL_ID}'. Esto puede tardar unos minutos...")
+        # El token de Hugging Face se obtiene automáticamente de la variable de entorno HF_TOKEN
+        # que configuras como un "Secret" en Hugging Face Spaces.
+        # No necesitas pasarlo explícitamente aquí si está en los Secrets.
+        # device=-1 usa CPU, device=0 usa GPU si está disponible (en Spaces, se elegirá automáticamente si el hardware lo soporta)
+        pipe = pipeline("text-generation", model=MODEL_ID, device=-1)
+        print(f"Modelo '{MODEL_ID}' cargado con éxito.")
+    except Exception as e:
+        print(f"Error al cargar el modelo '{MODEL_ID}': {e}")
+        pipe = None
+        print("El servidor no podrá responder a las solicitudes de IA.")
+# Cargar el modelo cuando la aplicación Flask se inicia
+# Usamos app.before_first_request para asegurar que se carga una vez al inicio
+@app.before_first_request
+def init_model():
+    load_model()
+@app.route('/chat', methods=['POST'])
+def chat():
+    if pipe is None:
+        return jsonify({"error": "El modelo de IA no está cargado. Por favor, revisa el log del servidor."}), 503
+    data = request.json
+    messages = data.get('messages') # El frontend envía el historial completo
+    if not messages:
+        return jsonify({"error": "No se proporcionaron mensajes."}), 400
+    try:
+        # Construimos un prompt simple para el modelo de text-generation
+        # concatenando el historial de mensajes.
+        # Esta es una una simplificación; los modelos de chat suelen tener un formato específico.
+        prompt = ""
+        for msg in messages:
+            if msg['role'] == 'user':
+                prompt += f"Usuario: {msg['content']}\n"
+            elif msg['role'] == 'assistant':
+                prompt += f"Asistente: {msg['content']}\n"
+        prompt += "Asistente:" # Indicamos que esperamos la respuesta del asistente
+        # Ajusta parámetros como max_new_tokens, temperature, do_sample según tu necesidad
+        response = pipe(prompt, max_new_tokens=250, temperature=0.7, do_sample=True, clean_up_tokenization_spaces=True)
+        # La respuesta del pipe es una lista. Tomamos el primer elemento.
+        generated_text = response[0]['generated_text']
+        # Extraemos la parte de la respuesta de la IA.
+        # Esto puede ser complicado con text-generation si el modelo repite el prompt.
+        # Aquí asumimos que la respuesta de la IA comienza después del último "Asistente:"
+        ai_response_content = generated_text.split("Asistente:", 1)[-1].strip()
+        # A veces el modelo puede generar texto vacío o solo espacios.
+        if not ai_response_content:
+            ai_response_content = "Lo siento, no pude generar una respuesta clara. ¿Puedes intentarlo de nuevo?"
+        return jsonify({"response": ai_response_content})
+    except Exception as e:
+        print(f"Error en la inferencia de la IA: {e}")
+        return jsonify({"error": f"Error interno del servidor: {str(e)}"}), 500
+if __name__ == '__main__':
+    # Obtener el puerto de la variable de entorno que proporciona Hugging Face Spaces
+    # Por defecto, en Gradio Spaces, es 7860
+    port = int(os.environ.get('PORT', 7860))
+    # ¡NUNCA USES debug=True EN PRODUCCIÓN! Solo para desarrollo.
+    app.run(debug=False, host='0.0.0.0', port=port)

index.html ADDED Viewed

	@@ -0,0 +1,500 @@

+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Amside AI - Interfaz con IA Real</title>
+    <style>
+        :root {
+            --primary-color: #22272b; /* Dark Background */
+            --secondary-color: #37404a; /* Darker Grey */
+            --accent-color: #00bcd4; /* Cyan */
+            --text-color-primary: #eee;
+            --text-color-secondary: #ccc;
+            --error-color: #f44336; /* Red accent */
+            --border-radius: 8px;
+            --box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+            --transition: all 0.3s ease-in-out;
+            --sidebar-width: 300px;
+        }
+        body {
+            font-family: 'Roboto Mono', monospace;
+            background-color: var(--primary-color);
+            color: var(--text-color-primary);
+            margin: 0;
+            display: flex;
+            min-height: 100vh;
+            padding: 0;
+        }
+        .sidebar {
+            background-color: var(--secondary-color);
+            width: var(--sidebar-width);
+            border-right: 1px solid #444d57;
+            padding: 25px;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            flex-shrink: 0;
+        }
+        .sidebar-header {
+            color: var(--text-color-primary);
+            margin-bottom: 30px;
+            text-align: left;
+            width: 100%;
+        }
+        .sidebar-header h2 {
+            margin: 0;
+            font-size: 1.8em;
+            font-weight: 400;
+        }
+        .new-chat-button {
+            background-color: var(--accent-color);
+            color: var(--text-color-primary);
+            border: none;
+            padding: 12px 18px;
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            font-size: 1em;
+            margin-bottom: 20px;
+            transition: background-color var(--transition);
+            width: 100%;
+            text-align: left;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+        }
+        .new-chat-button svg {
+            margin-right: 10px;
+        }
+        .chat-list-title {
+            font-size: 0.9em;
+            color: var(--text-color-secondary);
+            margin-bottom: 10px;
+            text-transform: uppercase;
+            letter-spacing: 0.8px;
+        }
+        .chat-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            width: 100%;
+        }
+        .chat-list li {
+            padding: 10px 15px;
+            border-radius: var(--border-radius);
+            margin-bottom: 6px;
+            cursor: pointer;
+            background-color: #2c343c;
+            color: var(--text-color-secondary);
+            transition: background-color var(--transition), color var(--transition);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .chat-list li:hover {
+            background-color: var(--accent-color);
+            color: var(--text-color-primary);
+        }
+        .chat-container {
+            background-color: var(--primary-color);
+            border-radius: var(--border-radius);
+            box-shadow: var(--box-shadow);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            flex-grow: 1;
+            margin: 20px;
+            border: 1px solid #333a40;
+        }
+        .chat-header {
+            background-color: var(--secondary-color);
+            color: var(--text-color-primary);
+            padding: 15px 20px;
+            text-align: left;
+            border-bottom: 1px solid #444d57;
+            border-top-left-radius: var(--border-radius);
+            border-top-right-radius: var(--border-radius);
+            display: flex;
+            align-items: center;
+        }
+        .chat-header button {
+            background: none;
+            border: none;
+            color: var(--text-color-primary);
+            font-size: 1em;
+            cursor: pointer;
+            margin-right: 20px;
+            padding: 8px 12px;
+            border-radius: var(--border-radius);
+            transition: background-color var(--transition);
+        }
+        .chat-header button:hover {
+            background-color: #444d57;
+        }
+        .chat-header h2 {
+            margin: 0;
+            font-size: 1.4em;
+            font-weight: 400;
+        }
+        .chat-body {
+            padding: 20px;
+            overflow-y: auto;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+        .message {
+            background-color: #2c343c;
+            color: var(--text-color-secondary);
+            border-radius: var(--border-radius);
+            padding: 10px 14px;
+            word-break: break-word;
+            align-self: flex-start;
+            max-width: 80%;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            font-size: 0.95em;
+        }
+        .error-message {
+            background-color: #422b2b;
+            color: var(--error-color);
+            border-radius: var(--border-radius);
+            padding: 10px 14px;
+            word-break: break-word;
+            align-self: flex-start;
+            max-width: 80%;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            font-size: 0.95em;
+            border: 1px solid #5a3232;
+        }
+        .user-message-container {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            max-width: 80%;
+            align-self: flex-end;
+        }
+        .user-message {
+            background-color: var(--accent-color);
+            color: var(--text-color-primary);
+            border-radius: var(--border-radius);
+            padding: 10px 14px;
+            word-break: break-word;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            font-size: 0.95em;
+            margin-bottom: 5px;
+        }
+        .loading-indicator {
+            display: flex;
+            align-self: flex-end;
+            margin-top: 5px;
+            align-items: center;
+            font-size: 0.8em;
+            color: var(--text-color-secondary);
+        }
+        .loading-spinner {
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            border-top: 2px solid var(--accent-color);
+            border-radius: 50%;
+            width: 14px;
+            height: 14px;
+            animation: spin 1s linear infinite;
+            margin-left: 6px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .input-area {
+            padding: 15px;
+            border-top: 1px solid #444d57;
+            display: flex;
+            align-items: center;
+            background-color: var(--secondary-color);
+            border-bottom-left-radius: var(--border-radius);
+            border-bottom-right-radius: var(--border-radius);
+        }
+        .input-field {
+            flex-grow: 1;
+            padding: 10px 12px;
+            border: 1px solid #555e68;
+            border-radius: var(--border-radius);
+            margin-right: 10px;
+            font-size: 0.95em;
+            color: var(--text-color-primary);
+            background-color: #2c343c;
+        }
+        .input-field:focus {
+            outline: none;
+            border-color: var(--accent-color);
+            box-shadow: 0 1px 3px rgba(var(--accent-color-rgb), 0.2);
+        }
+        .send-button {
+            background-color: var(--accent-color);
+            color: var(--text-color-primary);
+            border: none;
+            padding: 10px 15px;
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            font-size: 0.95em;
+            transition: background-color var(--transition);
+        }
+        .send-button:hover {
+            background-color: #00838f; /* Cyan darken-1 */
+        }
+    </style>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="sidebar">
+        <div class="sidebar-header">
+            <h2>Amside AI</h2>
+        </div>
+        <button class="new-chat-button" id="new-chat-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square-fill" viewBox="0 0 16 16">
+                <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
+            </svg>
+            Nueva Conversación
+        </button>
+        <h3 class="chat-list-title">Historial</h3>
+        <ul class="chat-list" id="chat-list">
+            </ul>
+    </div>
+    <div class="chat-container">
+        <div class="chat-header">
+            <button id="new-conversation-header-button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square-fill" viewBox="0 0 16 16">
+                    <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
+                </svg>
+                Nuevo
+            </button>
+            <h2>Chat</h2>
+        </div>
+        <div class="chat-body" id="chat-messages">
+            </div>
+        <div class="input-area">
+            <input type="text" class="input-field" placeholder="Escribe tu mensaje...">
+            <button class="send-button" id="send-button">Enviar</button>
+        </div>
+    </div>
+    <script>
+        const chatMessages = document.getElementById('chat-messages');
+        const inputField = document.querySelector('.input-field');
+        const sendButton = document.getElementById('send-button');
+        const chatList = document.getElementById('chat-list');
+        const newChatButtonSidebar = document.getElementById('new-chat-button');
+        const newChatButtonHeader = document.getElementById('new-conversation-header-button');
+        let chatHistory = [];
+        let currentChat = [];
+        // --- URL de tu servidor backend ---
+        // Asegúrate de que esta URL coincida con la dirección y el puerto donde se ejecuta tu app.py
+        const BACKEND_URL = 'http://127.0.0.1:5000/chat';
+        // Función para añadir un solo mensaje al chat
+        function addMessageToChat(msg) {
+            const messageContainer = document.createElement('div');
+            if (msg.sender === 'user') {
+                messageContainer.classList.add('user-message-container');
+                const userMessageDiv = document.createElement('div');
+                userMessageDiv.classList.add('user-message');
+                userMessageDiv.textContent = msg.text;
+                messageContainer.appendChild(userMessageDiv);
+            } else if (msg.sender === 'ai') {
+                const aiMessageDiv = document.createElement('div');
+                aiMessageDiv.classList.add('message');
+                aiMessageDiv.textContent = msg.text;
+                messageContainer.appendChild(aiMessageDiv);
+            } else if (msg.sender === 'error') {
+                const errorMessageDiv = document.createElement('div');
+                errorMessageDiv.classList.add('error-message');
+                errorMessageDiv.textContent = msg.text;
+                messageContainer.appendChild(errorMessageDiv);
+            }
+            chatMessages.appendChild(messageContainer);
+            scrollToBottom();
+        }
+        // Esta función se usa para cargar un historial completo (ej. al seleccionar un chat de la lista)
+        function displayChat(messages) {
+            chatMessages.innerHTML = ''; // Vaciar todo antes de cargar el historial
+            messages.forEach(msg => {
+                const messageContainer = document.createElement('div');
+                if (msg.sender === 'user') {
+                    messageContainer.classList.add('user-message-container');
+                    const userMessageDiv = document.createElement('div');
+                    userMessageDiv.classList.add('user-message');
+                    userMessageDiv.textContent = msg.text;
+                    messageContainer.appendChild(userMessageDiv);
+                } else if (msg.sender === 'ai') {
+                    const aiMessageDiv = document.createElement('div');
+                    aiMessageDiv.classList.add('message');
+                    aiMessageDiv.textContent = msg.text;
+                    messageContainer.appendChild(aiMessageDiv);
+                } else if (msg.sender === 'error') {
+                    const errorMessageDiv = document.createElement('div');
+                    errorMessageDiv.classList.add('error-message');
+                    errorMessageDiv.textContent = msg.text;
+                    messageContainer.appendChild(errorMessageDiv);
+                }
+                chatMessages.appendChild(messageContainer);
+            });
+            scrollToBottom();
+        }
+        function updateChatList() {
+            chatList.innerHTML = '';
+            chatHistory.forEach((chat, index) => {
+                const listItem = document.createElement('li');
+                listItem.textContent = chat.name.substring(0, 22) + (chat.name.length > 22 ? '...' : '');
+                listItem.addEventListener('click', () => {
+                    currentChat = chat.messages;
+                    displayChat(currentChat);
+                });
+                chatList.appendChild(listItem);
+            });
+        }
+        function saveChat(firstUserMessage) {
+            if (currentChat.length > 0 && firstUserMessage) {
+                const chatName = firstUserMessage.substring(0, 25);
+                if (!chatHistory.some(chat => chat.messages === currentChat) && currentChat.length > 1) {
+                    chatHistory.unshift({ name: chatName, messages: [...currentChat] });
+                    updateChatList();
+                }
+            }
+        }
+        function startNewChat() {
+            if (currentChat.length > 1 && currentChat[0].sender === 'ai' && currentChat[1].sender === 'user') {
+                saveChat(currentChat[1].text);
+            }
+            currentChat = [{ sender: 'ai', text: 'Bienvenido a Amside AI. Estoy aqu�� para ayudarte. ¿Qué te gustaría saber?' }];
+            displayChat(currentChat);
+        }
+        sendButton.addEventListener('click', async () => {
+            const messageText = inputField.value.trim();
+            if (messageText === '') {
+                return;
+            }
+            const isFirstUserMessageInChat = currentChat.length === 1 && currentChat[0].sender === 'ai';
+            const userMessage = { sender: 'user', text: messageText };
+            currentChat.push(userMessage);
+            const userMessageContainer = document.createElement('div');
+            userMessageContainer.classList.add('user-message-container');
+            const userMessageDiv = document.createElement('div');
+            userMessageDiv.classList.add('user-message');
+            userMessageDiv.textContent = userMessage.text;
+            userMessageContainer.appendChild(userMessageDiv);
+            const loadingIndicator = document.createElement('div');
+            loadingIndicator.classList.add('loading-indicator');
+            loadingIndicator.innerHTML = '<div class="loading-spinner"></div> Procesando...';
+            userMessageContainer.appendChild(loadingIndicator);
+            chatMessages.appendChild(userMessageContainer);
+            scrollToBottom();
+            inputField.value = '';
+            try {
+                // Preparamos los mensajes en el formato que espera el backend de Python
+                // (que a su vez los prepara para Hugging Face)
+                const messagesForBackend = currentChat.map(msg => ({
+                    role: msg.sender === 'user' ? 'user' : 'assistant',
+                    content: msg.text
+                }));
+                const response = await fetch(BACKEND_URL, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ messages: messagesForBackend }),
+                });
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+                }
+                const data = await response.json();
+                const aiResponseText = data.response; // La respuesta de la IA viene en 'response'
+                const aiResponse = { sender: 'ai', text: aiResponseText };
+                currentChat.push(aiResponse);
+                if (loadingIndicator && userMessageContainer.contains(loadingIndicator)) {
+                    loadingIndicator.remove();
+                }
+                addMessageToChat(aiResponse);
+                if (isFirstUserMessageInChat) {
+                    saveChat(messageText);
+                }
+            } catch (error) {
+                console.error("Error al obtener respuesta de la IA (backend):", error);
+                if (loadingIndicator && userMessageContainer.contains(loadingIndicator)) {
+                    loadingIndicator.remove();
+                }
+                const errorMessage = { sender: 'error', text: `Lo siento, hubo un error al conectar con la IA. Asegúrate de que el servidor está corriendo. Detalle: ${error.message}` };
+                currentChat.push(errorMessage);
+                addMessageToChat(errorMessage);
+            }
+        });
+        inputField.addEventListener('keypress', (event) => {
+            if (event.key === 'Enter') {
+                sendButton.click();
+            }
+        });
+        newChatButtonSidebar.addEventListener('click', startNewChat);
+        newChatButtonHeader.addEventListener('click', startNewChat);
+        function scrollToBottom() {
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+        // Inicializar al cargar la página
+        startNewChat();
+        updateChatList();
+    </script>
+</body>
+</html>

requirements.txt ADDED Viewed

	@@ -0,0 +1,76 @@

+absl-py==2.2.2
+annotated-types==0.7.0
+astunparse==1.6.3
+attrs==25.3.0
+blinker==1.9.0
+certifi==2025.1.31
+charset-normalizer==3.4.1
+click==8.1.8
+colorama==0.4.6
+distro==1.9.0
+filelock==3.18.0
+Flask==3.1.0
+flask-cors==5.0.1
+flatbuffers==25.2.10
+fsspec==2025.3.2
+gast==0.6.0
+google-pasta==0.2.0
+grpcio==1.71.0
+h11==0.14.0
+h5py==3.13.0
+huggingface-hub==0.30.2
+idna==3.10
+itsdangerous==2.2.0
+Jinja2==3.1.6
+jiter==0.9.0
+keras==3.9.2
+libclang==18.1.1
+lxml==5.3.2
+Markdown==3.8
+markdown-it-py==3.0.0
+MarkupSafe==3.0.2
+mdurl==0.1.2
+ml_dtypes==0.5.1
+mpmath==1.3.0
+namex==0.0.8
+networkx==3.4.2
+numpy==2.1.3
+opt_einsum==3.4.0
+optree==0.15.0
+packaging==25.0
+pillow==11.2.1
+prompt_toolkit==3.0.51
+protobuf==5.29.4
+pycryptodomex==3.22.0
+Pygments==2.19.1
+python-dotenv==1.1.0
+pytz==2025.2
+PyYAML==6.0.2
+regex==2024.11.6
+requests==2.32.3
+rich==14.0.0
+rpds-py==0.24.0
+safetensors==0.5.3
+scipy==1.15.2
+setuptools==79.0.0
+six==1.17.0
+sniffio==1.3.1
+sympy==1.13.1
+tensorboard==2.19.0
+tensorboard-data-server==0.7.2
+tensorflow==2.19.0
+termcolor==3.0.1
+tf_keras==2.19.0
+tiktoken==0.9.0
+tokenizers==0.21.1
+torch==2.6.0
+tqdm==4.67.1
+transformers==4.52.3
+typing-inspection==0.4.0
+typing_extensions==4.13.2
+tzdata==2025.2
+urllib3==2.4.0
+wcwidth==0.2.13
+Werkzeug==3.1.3
+wheel==0.45.1
+wrapt==1.17.2