6. Creación de Proyecto IA Básico - 3
6: Creación de Proyecto IA Básico - 3
🎯 Tema: Conectando y Probando Nuestro Chatbot con IA Real
📚 Introducción: El Momento de la Verdad
Analogía: Imagina que has construido una radio:
📻 Parte 1: Construiste la caja (interfaz HTML)
🔌 Parte 2: Pusiste los cables (Flask + formulario)
📡 Ahora: ¡Vamos a sintonizar la estación! (conectar con la IA)
¡Hola muchachos! Hoy es el día más emocionante: ¡veremos a nuestra IA cobrar vida! 💬
🔧 Parte 1: Depurando Errores Comunes
El Error del Principiante: "request" vs "requests"
⚠️ PROBLEMA COMÚN: Confundir dos librerías similares
# ❌ INCORRECTO (así no funciona)
import requests
if requests.method == "POST": # ¡Error! requests no tiene .method
# ✅ CORRECTO (así sí funciona)
from flask import request
if request.method == "POST": # ¡Perfecto! request de FlaskEsquema Visual de las Dos Librerías:
┌─────────────────┐ ┌──────────────────┐ │ FLASK │ │ REQUESTS │ │ request │ │ requests │ ├─────────────────┤ ├──────────────────┤ │ • Para recibir │ │ • Para enviar │ │ datos del │ │ datos a otras │ │ formulario │ │ APIs │ │ • request.form │ │ • requests.post()│ │ • request.method│ │ • requests.get() │ └─────────────────┘ └──────────────────┘
Regla mnemotécnica:
Flask request = Recibir (R de Recibir)
Requests library = Enviar (S de Send/Enviar)
🚀 Parte 2: Proceso de Comunicación Completo
Diagrama de Flujo del Chatbot:
┌─────────┐ ┌────────┐ ┌─────────┐ ┌──────────┐
│ USUARIO │────▶│ FORM │────▶│ FLASK │────▶│ OLLAMA │
│ Escribe │ │ HTML │ │ app.py │ │ (IA) │
└─────────┘ └────────┘ └─────────┘ └──────────┘
│ │ │ │
│ │ │ │
◀──────────────◀───────────────◀─────────────────
Muestra Renderiza Devuelve
respuesta HTML respuestaCódigo Explicado Paso a Paso:
from flask import Flask, render_template, request
import requests # ← Para comunicarnos con Ollama
app = Flask(__name__)
conversation = []
# URL donde vive nuestro modelo de IA
OLLAMA_URL = "http://localhost:11434/api/generate"
MODEL_NAME = "gemma3:4b" # ← El cerebro que vamos a usar
@app.route("/", methods=["GET", "POST"])
def index():
if request.method == "POST":
# 1. Capturamos la pregunta del usuario
user_input = request.form["user_input"]
# 2. Guardamos la pregunta en la conversación
conversation.append(("Tú", user_input))
# 3. Preparamos la consulta para la IA
payload = {
"model": MODEL_NAME,
"prompt": user_input,
"stream": False
}
# 4. Enviamos la pregunta a Ollama
response = requests.post(OLLAMA_URL, json=payload)
# 5. Extraemos la respuesta
if response.status_code == 200:
ai_response = response.json()["response"]
# 6. Guardamos la respuesta en la conversación
conversation.append(("IA", ai_response))
else:
conversation.append(("IA", "Error: No pude contactar a la IA"))
# 7. Mostramos todo en la página web
return render_template("index.html", conversation=conversation)💬 Parte 3: Probando Nuestro Chatbot (Ejemplos Reales)
Ejemplo 1: Saludo Simple
Usuario: Hola
IA responde:
¡Hola! ¿En qué puedo ayudarte hoy?
¿Tienes alguna pregunta o necesitas información?
¡Estoy aquí para ayudarte!Ejemplo 2: Pregunta de Conocimiento
Usuario: ¿Conoces Lima, Perú?
IA responde:
¡Por supuesto! Conozco Lima, Perú.
Es la capital y la ciudad más grande del país...Esquema del Proceso de Respuesta:
┌─────────────────────────────────────────────┐
│ 1. Usuario: "¿Qué es Bitcoin?" │
│ 2. Flask envía a Ollama: │
│ {"model":"gemma3:4b", "prompt":"¿Qué.."}│
│ 3. Ollama procesa (pensando... 🤔) │
│ 4. Ollama responde: "Bitcoin es..." │
│ 5. Flask recibe y muestra │
└─────────────────────────────────────────────┘⏱️ Parte 4: Factores que Afectan la Velocidad
Tabla Comparativa de Tiempos de Respuesta:
| Tipo de Pregunta | Tiempo Estimado | ¿Por qué? |
|---|---|---|
Matemática simple (2+10) | 2-3 segundos | Cálculo rápido |
Hecho concreto (capital de España) | 3-4 segundos | Búsqueda en conocimiento |
Explicación extensa (qué son los gatos) | 5-10 segundos | Generar texto largo |
Pregunta compleja (ventajas de AI) | 10+ segundos | Procesamiento profundo |
Factores que Influyen:
┌─────────────────────────────────────┐ │ VELOCIDAD DE IA │ ├─────────────────────────────────────┤ │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │ RAM │ │ CPU │ │ GPU │ │ │ └─────┘ └─────┘ └─────┘ │ │ 16GB+ 4+ núcleos NVIDIA │ │ │ │ ┌─────────────────────────────┐ │ │ │ COMPLEJIDAD DE LA PREGUNTA │ │ │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ │ │ TAMAÑO DEL MODELO │ │ │ └─────────────────────────────┘ │ │ (gemma3:4b vs modelos grandes) │ └─────────────────────────────────────┘
Analogía:
Pensar en la IA como un estudiante:
RAM = Memoria: Cuántos libros puede tener abiertos a la vez
GPU = Velocidad de pensamiento: Qué tan rápido puede "pensar"
Pregunta compleja: Como pedirle que escriba un ensayo completo
🔍 Parte 5: Casos de Prueba y Resultados
Pruebas Realizadas y Resultados:
# Prueba 1: Matemáticas básicas
Pregunta: "¿Cuánto es 2 + 10?"
Respuesta: "12" ✅
# Prueba 2: Conocimiento geográfico
Pregunta: "Capital de España"
Respuesta: "Madrid" ✅
# Prueba 3: Lógica simple
Pregunta: "Tengo aceite y jabón, ¿cuántos productos tengo?"
Respuesta: "Tienes 2 productos" ✅
# Prueba 4: Conocimiento técnico
Pregunta: "¿Qué es Bitcoin?"
Respuesta: Explicación detallada sobre criptomonedas ✅Ejemplo de Conversación Completa:
Tú: Hola
IA: ¡Hola! ¿En qué puedo ayudarte hoy?
Tú: ¿Conoces AliExpress?
IA: Sí, AliExpress es una plataforma de comercio electrónico...
Tú: ¿Cuánto es 1000 ÷ 2?
IA: 500
Tú: ¿Qué sabes sobre los gatos?
IA: Los gatos son mamíferos carnívoros, domesticados...⚠️ Parte 6: Limitaciones y Consideraciones
Lo que NO hace nuestro chatbot (aún):
❌ No guarda historial permanente - Se borra al reiniciar
❌ No tiene memoria de conversación larga - Solo ve lo inmediato
❌ No está optimizado para múltiples usuarios - Es una demo
Posibles Mejoras Futuras:
# Ideas para expandir el proyecto:
1. Base de datos SQLite para guardar conversaciones
2. Sistema de login para múltiples usuarios
3. Mejor manejo de errores y timeouts
4. Interfaz más atractiva con CSS
5. Selección de diferentes modelos de IA📝 Cuestionario de Repaso
Pregunta 1: ¿Cuál es la diferencia entre request (Flask) y requests (librería)?
a) Son lo mismo pero con diferente nombre
b) request recibe datos del formulario, requests envía datos a APIs
c) requests es para Flask, request es para Ollama
Respuesta correcta: b
Pregunta 2: ¿Qué hace este código: response.json()["response"]?
a) Convierte la respuesta a texto plano
b) Extrae la respuesta de IA del JSON que devuelve Ollama
c) Envía un JSON a la IA
Respuesta correcta: b
Pregunta 3: ¿Por qué una pregunta sobre "los gatos" tarda más que "2+10"?
a) Porque la IA no le gustan los gatos
b) Porque genera texto más largo y complejo
c) Porque necesita conectarse a internet
Respuesta correcta: b
Pregunta 4: ¿Qué componente de hardware afecta MÁS la velocidad de la IA?
a) El disco duro
b) El monitor
c) La GPU (tarjeta gráfica)
Respuesta correcta: c
Pregunta 5: Si reiniciamos la aplicación Flask, ¿qué pasa con las conversaciones?
a) Se guardan automáticamente
b) Se pierden porque conversation es una lista en memoria
c) Se envían por email
Respuesta correcta: b
💡 Consejos Prácticos para Pruebas:
Empieza con preguntas simples para verificar que todo funciona
Prueba diferentes tipos de preguntas:
Matemáticas
Geografía
Definiciones
Opiniones
Ten paciencia con respuestas largas
Mira la consola de Flask para ver errores en tiempo real
Prueba en diferentes navegadores (Chrome, Firefox, Edge)
🎉 ¡Felicidades! Has Creado Tu Primer Chatbot Funcional
Logros de hoy:
✅ Conectamos Flask con Ollama
✅ Creamos un sistema de pregunta-respuesta real
✅ Probamos con múltiples tipos de preguntas
✅ Entendimos los factores que afectan el rendimiento
Próximo paso: ¡Mejoraremos nuestro chatbot con más funcionalidades!
📂 Código Final Completado (app.py):
from flask import Flask, render_template, request
import requests # Para comunicarnos con Ollama
app = Flask(__name__)
conversation = [] # Aquí guardamos el chat
# Configuración de Ollama
OLLAMA_URL = "http://localhost:11434/api/generate"
MODEL_NAME = "gemma3:4b" # Puedes cambiar el modelo
@app.route("/", methods=["GET", "POST"])
def index():
if request.method == "POST":
# 1. Capturar pregunta del usuario
user_question = request.form["user_input"]
# 2. Guardar pregunta en historial
conversation.append(("Tú", user_question))
try:
# 3. Preparar datos para Ollama
data = {
"model": MODEL_NAME,
"prompt": user_question,
"stream": False
}
# 4. Enviar a Ollama
ollama_response = requests.post(OLLAMA_URL, json=data, timeout=30)
# 5. Procesar respuesta
if ollama_response.status_code == 200:
ai_answer = ollama_response.json()["response"]
conversation.append(("IA", ai_answer))
else:
conversation.append(("IA", "⚠️ Error: No pude obtener respuesta"))
except requests.exceptions.Timeout:
conversation.append(("IA", "⏱️ La IA está tardando mucho..."))
except Exception as e:
conversation.append(("IA", f"❌ Error: {str(e)}"))
# 6. Mostrar todo en la página
return render_template("index.html", conversation=conversation)
if __name__ == "__main__":
app.run(debug=True, port=5000)index.html (igual que en la clase anterior)
🚀 ¡Tu chatbot está vivo y funcionando! En la próxima clase agregaremos más características
Comentarios
Publicar un comentario