https://docs.google.com/presentation/d/e/2PACX-1vQ31Uffn7BpFAaAPrx7ekyonjf4r0Z8cONxHqiFxiiNOrLYwaKE2u6tnveG0sRP-IchHnlxGPLkAtOp/pub?start=false&loop=false&delayms=3000

Creando tu Primer Chatbot con Flask y Ollama

🎯 ¿Qué Vamos a Construir?

Vamos a crear una aplicación web simple que te permita chatear con un modelo de inteligencia artificial, usando Flask (un framework web de Python) y Ollama (para ejecutar modelos de IA localmente).

¡Imagina que es como construir tu propio ChatGPT personal!

📚 Capítulo 1: Entendiendo el Entorno Virtual

¿Por qué Necesitamos un Entorno Virtual?

Analogía: Imagina que tienes diferentes proyectos como:

🎨 Proyecto A: Necesita pinturas acrílicas (Python 3.11)
🖌️ Proyecto B: Necesita acuarelas (Python 3.13)

Si mezclas todo en la misma mesa, ¡se hará un desastre! Los entornos virtuales son como mesas separadas para cada proyecto.

Visualización:

SIN Entorno Virtual:
┌─────────────────────────────────┐
│   SISTEMA PRINCIPAL             │
│   • Python 3.13                 │
│   • Flask (versión nueva)       │
│   • Proyecto A                  │
│   • Proyecto B ← ¡CONFLICTO!    │
└─────────────────────────────────┘

CON Entorno Virtual:
┌─────────────────┐  ┌─────────────────┐
│  ENTORNO A      │  │  ENTORNO B      │
│  • Python 3.11  │  │  • Python 3.13  │
│  • Flask 2.0    │  │  • Flask 3.0    │
│  ┌─────────────┐│  │  ┌─────────────┐│
│  │ Proyecto A  ││  │  │ Proyecto B  ││
│  └─────────────┘│  │  └─────────────┘│
└─────────────────┘  └─────────────────┘

Cómo Crear y Activar un Entorno Virtual:

# Crear entorno virtual (se crea carpeta 'venv')
python -m venv venv

# Activar en Windows (PowerShell)
.\venv\Scripts\Activate.ps1

# Verificar versión de Python
python --version  # Muestra: Python 3.11.1

📦 Capítulo 2: Instalando Dependencias

¿Qué es pip?

Es el "gestor de paquetes" de Python, como una tienda de aplicaciones donde puedes descargar herramientas para tu proyecto.

Instalación Correcta:

# CORRECTO: Instalar Flask y requests
pip install flask requests

# ¡OJO! En el material dice 'request' (singular)
# Debe ser 'requests' (plural) ← Así se llama el paquete

¿Qué Instalamos?

Paquete	¿Para qué sirve?	Ejemplo Analógico
Flask	Crea servidores web	Como un restaurante que atiende pedidos
requests	Hace peticiones HTTP	Como un mensajero que envía/recibe paquetes

🏗️ Capítulo 3: Estructura del Proyecto

Organización de Carpetas:

OLLAMA-FASK-APP/          ← Carpeta principal del proyecto
│
├── venv/                 ← Entorno virtual (NO tocar)
│
├── templates/            ← Carpeta ESPECIAL de Flask
│   └── index.html        ← Página web (vista)
│
└── app.py               ← Código principal (cerebro)

Regla IMPORTANTE: Flask BUSCA automáticamente la carpeta templates para los archivos HTML.

💻 Capítulo 4: El Código Paso a Paso

Parte 1 - Importaciones y Configuración

# Importar las herramientas necesarias
from flask import Flask, render_template, request  # Herramientas de Flask
import requests  # Para comunicarse con Ollama

# Crear la aplicación Flask (el "restaurante")
app = Flask(__name__)

# Memoria del chatbot (guarda la conversación)
conversation = []  # Lista vacía, como un cuaderno de notas

# Dirección del modelo de IA (donde vive Ollama)
OLLAMA_URL = "http://localhost:11434/api/generate"
MODEL_NAME = "gemma3:4b"  # Nombre del modelo a usar

Parte 2 - La Ruta Principal (El "Mesero")

@app.route("/", methods=["GET", "POST"])
def index():
    global conversation  # Usar la variable global conversation
    
    # Si el usuario envía un mensaje (POST)
    if request.method == "POST":
        user_input = request.form["user_input"]  # Leer lo que escribió el usuario
        
        # Preparar el paquete para Ollama
        payload = {
            "model": MODEL_NAME,
            "prompt": user_input,
            "stream": False
        }
        
        # Enviar mensaje a Ollama y recibir respuesta
        response = requests.post(OLLAMA_URL, json=payload)  # ¡OJO: requests, no request!
        result = response.json()  # Convertir respuesta a diccionario Python
        
        # Guardar en la conversación
        conversation.append("Tú: " + user_input)
        conversation.append("IA: " + result["response"])
    
    # Mostrar la página web con la conversación
    return render_template("index.html", conversation=conversation)

Diagrama del Flujo:

Usuario escribe → [Formulario HTML] → Flask recibe → Prepara datos → Envía a Ollama
      ↑                                                            ↓
      ← [Muestra respuesta] ← Flask procesa ← Ollama responde ←

Parte 3 - Ejecutar la Aplicación

if __name__ == "__main__":
    app.run(debug=True)  # Iniciar el servidor con modo depuración

¿Qué hace debug=True?

🔄 Recarga automática al cambiar el código
🐛 Muestra errores detallados en el navegador
⚠️ SOLO para desarrollo, no para producción

🌐 Capítulo 5: La Interfaz Web (HTML)

Archivo: `templates/index.html`

<!DOCTYPE html>
<html>
<head>
    <title>Chat con IA</title>
    <style>
        body { font-family: Arial; max-width: 600px; margin: 40px auto; }
        .chat-box { border: 2px solid #ccc; padding: 20px; height: 400px; overflow-y: auto; }
        .user { color: blue; margin: 10px 0; }
        .ia { color: green; margin: 10px 0; }
        input { width: 70%; padding: 10px; }
        button { padding: 10px 20px; background: #4CAF50; color: white; border: none; }
    </style>
</head>
<body>
    <h1>💬 Chat con IA Local</h1>
    
    <div class="chat-box">
        {% for mensaje in conversation %}
            {% if "Tú:" in mensaje %}
                <div class="user"><strong>👤 Tú:</strong> {{ mensaje[4:] }}</div>
            {% else %}
                <div class="ia"><strong>🤖 IA:</strong> {{ mensaje[4:] }}</div>
            {% endif %}
        {% endfor %}
    </div>
    
    <form method="POST" style="margin-top: 20px;">
        <input type="text" name="user_input" placeholder="Escribe tu mensaje..." required>
        <button type="submit">Enviar</button>
    </form>
</body>
</html>

🚀 Capítulo 6: Ejecutar Todo el Proyecto

Paso a Paso:

Asegúrate que Ollama esté corriendo:
powershell
```
ollama serve
```
Activa el entorno virtual:
powershell
```
.\venv\Scripts\Activate.ps1
```
Ejecuta la aplicación:
powershell
```
python app.py
```
Abre tu navegador en:
text
```
http://localhost:5000
```

Resultado Esperado:

✅ Servidor Flask iniciado en http://localhost:5000
✅ Página web con cuadro de chat visible
✅ Puedes escribir y recibir respuestas de la IA

📝 Capítulo 7: Errores Comunes y Soluciones

Error 1: "ModuleNotFoundError: No module named 'requests'"

Solución:

pip install requests  # Instalar correctamente

Error 2: Plantilla no encontrada

Solución: Asegúrate que:

La carpeta se llama EXACTAMENTE templates (en plural)
index.html está DENTRO de templates/
La estructura es correcta

Error 3: Ollama no responde

Solución:

Verifica que Ollama esté ejecutándose
Prueba en el navegador: http://localhost:11434
Asegúrate de tener el modelo descargado:
powershell
```
ollama pull gemma3:4b
```

📊 Resumen Visual: Arquitectura Completa

┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│   NAVEGADOR │    │    FLASK    │    │   OLLAMA    │
│   (Cliente) │    │ (Servidor)  │    │   (Modelo)  │
└──────┬──────┘    └──────┬──────┘    └──────┬──────┘
       │                  │                   │
       │ 1. Página HTML   │                   │
       │ ←─────────────── │                   │
       │                  │                   │
       │ 2. Mensaje usuario                  │
       │ ───────────────→ │                   │
       │                  │                   │
       │                  │ 3. Petición API   │
       │                  │ ────────────────→ │
       │                  │                   │
       │                  │ 4. Respuesta IA   │
       │                  │ ←───────────────  │
       │                  │                   │
       │ 5. Actualizar chat                   │
       │ ←─────────────── │                   │
└──────┴──────┘    └──────┴──────┘    └──────┴──────┘

❓ Cuestionario de Repaso

Pregunta 1:

¿Para qué sirve un entorno virtual en Python?
a) Para navegar por Internet de forma segura
b) Para aislar las dependencias de cada proyecto ✓
c) Para hacer el código más rápido
d) Para conectar con bases de datos

Pregunta 2:

¿Qué comando instala correctamente Flask y requests?
a) pip install flask request
b) pip install flask-requests
c) pip install flask requests ✓
d) python install flask

Pregunta 3:

¿Dónde debe estar el archivo index.html en un proyecto Flask?
a) En la carpeta principal del proyecto
b) En una carpeta llamada templates/ ✓
c) En la carpeta venv/
d) En una carpeta llamada html/

Pregunta 4:

¿Qué hace la línea app = Flask(__name__)?
a) Importa una base de datos
b) Crea una instancia de la aplicación Flask ✓
c) Configura el entorno virtual
d) Inicia el servidor web

Pregunta 5:

¿Cómo se accede al texto que el usuario escribe en un formulario en Flask?
a) request.text["user_input"]
b) request.get["user_input"]
c) request.form["user_input"] ✓
d) request.data["user_input"]

Pregunta 6:

¿Qué puerto usa Flask por defecto?
a) 3000
b) 8080
c) 11434
d) 5000 ✓

Pregunta 7:

Si ves debug=True en app.run(), ¿qué significa?
a) La aplicación está lista para producción
b) Se activa el modo desarrollo con recarga automática ✓
c) Los errores se ocultan al usuario
d) La aplicación será más rápida

🎉 ¡Felicidades!

Ahora has aprendido a:

✅ Crear y usar entornos virtuales
✅ Instalar dependencias con pip
✅ Estructurar un proyecto Flask
✅ Crear rutas y manejar formularios
✅ Conectar con una API (Ollama)
✅ Usar plantillas HTML
✅ Ejecutar una aplicación web completa

Próximo reto: ¿Podrías agregar un botón para "limpiar la conversación" o cambiar entre diferentes modelos de IA? ¡Manos a la obra!

4-Creando tu Primer Chatbot con Flask y Ollama