5: Creación de Proyecto IA Básico - 2

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

🎯 Tema: Construyendo la Interfaz Web para Nuestro Chatbot con Flask

📚 Introducción: ¿Por Qué Necesitamos una Interfaz Web?

Analogía: Imagina que tu programa de IA es como un cerebro muy inteligente, pero sin ojos, boca u oídos. La interfaz web es como darle a ese cerebro:

  • 👂 Oídos: Para escuchar las preguntas del usuario

  • 👄 Boca: Para responder de manera clara

  • 👀 Ojos: Para mostrar la conversación completa

🏗️ Parte 1: Estructura Básica de HTML

Esquema Visual de un Documento HTML:

text
<!DOCTYPE html>          → Declara que es HTML5
<html>                  → Contenedor principal
  <head>               → Información para el navegador
    <meta charset>     → Configuración de caracteres
    <title>           → Título en la pestaña
  </head>
  <body>              → Contenido visible
    <!-- Todo lo que ve el usuario va aquí -->
  </body>
</html>

Ejemplo Paso a Paso:

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Chat con IA - Ollama</title>
</head>
<body>
    <!-- TODO: Aquí va nuestro contenido -->
</body>
</html>

Explicación sencilla:

  • lang="es": Le dice al navegador "hablo español"

  • charset="UTF-8": Usa todos los caracteres del español (ñ, á, é, í, ó, ú)

  • El título aparece en la pestaña del navegador

🎨 Parte 2: Creando el Formulario

Analogía del Formulario:

Es como un buzón de correos:

  • Input text: La hoja donde escribes tu carta (pregunta)

  • Botón Submit: El sello que envía la carta al cartero (servidor)

Código Explicado:

html
<h2>Chat Con IA (Ollama + Flask)</h2>
<form method="POST">
    <input type="text" 
           name="user_input" 
           placeholder="Escribe tu pregunta" 
           style="width: 80%;">
    <button type="submit">Enviar</button>
</form>

¿Qué hace cada parte?

  1. <h2>: Un título visible en la página

  2. method="POST": Dice "envía los datos de manera segura"

  3. name="user_input": Es como ponerle una etiqueta a tu pregunta

  4. placeholder: Texto gris que desaparece cuando escribes

  5. style="width: 80%": Ocupa el 80% del ancho disponible

💬 Parte 3: Mostrando la Conversación

Esquema del Área de Texto:

text
┌────────────────────────────────────────────┐
│ Tú: Hola, ¿cómo estás?                     │
│ IA: ¡Hola! Estoy bien, ¿y tú?              │
│ Tú: ¿Qué puedes hacer?                     │
│ IA: Puedo responder preguntas, ayudar...   │
│                                            │
│                                            │
│                                            │
└────────────────────────────────────────────┘

Código con Explicación:

html
<textarea rows="20" cols="100" readonly style="margin-top: 20px">
{% for sender, message in conversation %}
{{ sender }}: {{ message }}
{% endfor %}
</textarea>

Desglose:

  • rows="20": 20 líneas de altura

  • cols="100": 100 caracteres de ancho

  • readonly: Solo lectura (no se puede escribir directamente)

  • margin-top: 20px: 20 píxeles de espacio arriba

🔄 Parte 4: El Ciclo de Conversación (For Loop)

Analogía:

Imagina que conversation es un álbum de fotos:

  • Cada foto tiene: Quién la tomó (sender) + La foto misma (message)

  • El for loop es como pasar página por página mostrando cada foto

Ejemplo Visual:

python
# Así se ve conversation en Python:
conversation = [
    ("Tú", "¿Qué es Python?"),
    ("IA", "Python es un lenguaje de programación..."),
    ("Tú", "¿Y qué puedo hacer con él?"),
]
jinja2
{# Así lo procesa el for en HTML: #}
{% for sender, message in conversation %}
{{ sender }}: {{ message }}
{% endfor %}

{# Resultado: #}
Tú: ¿Qué es Python?
IA: Python es un lenguaje de programación...
Tú: ¿Y qué puedo hacer con él?

🚀 Parte 5: Ejecutando Nuestra Aplicación

Pasos para Probar:

  1. Guarda el archivo como index.html en la carpeta templates/

  2. Archivo Python principal:

python
from flask import Flask, render_template, request
import requests

app = Flask(__name__)
conversation = []  # Nuestro "álbum de conversaciones"

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
        user_input = request.form["user_input"]
        conversation.append(("Tú", user_input))
        # Aquí luego agregaremos la respuesta de la IA
    
    return render_template("index.html", conversation=conversation)

if __name__ == "__main__":
    app.run(debug=True)

  1. Estructura de carpetas:

text
mi_chatbot/
├── app.py
└── templates/
    └── index.html

  1. Ejecuta:

bash
python app.py

  1. Abre en el navegador: http://localhost:5000

🎯 Diagrama de Flujo Completo:

text
Usuario escribe pregunta
         ↓
Formulario envía a Flask
         ↓
Flask recibe con request.form["user_input"]
         ↓
Agrega a conversation: ("Tú", pregunta)
         ↓
Renderiza HTML con conversation actualizada
         ↓
Navegador muestra pregunta en textarea

📝 Cuestionario de Repaso

Pregunta 1: ¿Para qué sirve charset="UTF-8" en HTML?

a) Para hacer la página más rápida
b) Para usar caracteres especiales como ñ, á, é
c) Para conectar con la base de datos
Respuesta correcta: b

Pregunta 2: ¿Qué hace el atributo readonly en un textarea?

a) Lo hace invisible
b) Evita que el usuario escriba directamente en él
c) Lo convierte en un campo obligatorio
Respuesta correcta: b

Pregunta 3: En el código {% for sender, message in conversation %}, ¿qué es conversation?

a) Una variable de Python con la lista de mensajes
b) Un comando especial de HTML
c) Una función de JavaScript
Respuesta correcta: a

Pregunta 4: ¿Por qué usamos method="POST" en el formulario?

a) Para enviar datos de manera segura al servidor
b) Para hacer la página más bonita
c) Para conectar con una API externa
Respuesta correcta: a

Pregunta 5: ¿Qué muestra {{ sender }}: {{ message }}?

a) Solo el nombre de quien envía
b) Solo el mensaje
c) Quién envía y qué dijo
Respuesta correcta: c

💡 Consejos Finales para Principiantes:

  1. Copiar y pegar está bien: Al principio, no te preocupes por memorizar todo

  2. Prueba cambios pequeños: Cambia colores, textos, tamaños para ver qué pasa

  3. Usa "Vista de desarrollador" en el navegador (F12) para debuggear

  4. Recarga siempre después de cambiar el código

  5. Los errores son amigos: Cada error te enseña algo nuevo

📂 Código Final Completado:

index.html:

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Chat con IA - Ollama</title>
</head>
<body>
    <h2>Chat Con IA (Ollama + Flask)</h2>
    
    <form method="POST">
        <input type="text" 
               name="user_input" 
               placeholder="Escribe tu pregunta" 
               style="width: 80%;">
        <button type="submit">Enviar</button>
    </form>
    
    <textarea rows="20" cols="100" readonly style="margin-top: 20px">
{% for sender, message in conversation %}
{{ sender }}: {{ message }}
{% endfor %}
    </textarea>
</body>
</html>

app.py (versión básica):

python
from flask import Flask, render_template, request

app = Flask(__name__)
conversation = []

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
        pregunta = request.form["user_input"]
        conversation.append(("Tú", pregunta))
        # En la próxima clase añadiremos la IA
    
    return render_template("index.html", conversation=conversation)

if __name__ == "__main__":
    app.run(debug=True)

✅ ¡Felicidades! Has creado la interfaz visual de tu chatbot. En la siguiente clase conectaremos la IA de verdad

Comentarios

Publicar un comentario

Entradas más populares de este blog

1-Instalación y Primeros Pasos con Ollama

https://docs.google.com/presentation/d/e/2PACX-1vSICqBtlni1cnRyRZIWjBnn6v--HblEpiWQlvzmpCNkdd8TZjnfwZ3qgzyXg655HMu51mtxOLGNueMp/pub?start=false&loop=false&delayms=3000 🎯  Tema del Tutorial: "Inteligencia Artificial Local con Ollama: Tu Primer Modelo de IA sin Internet" Índice Visual text 1. ¿QUÉ ES OLLAMA? 🤖 │ 2. INSTALACIÓN PASO A PASO 📥 │ 3. TU PRIMER MODELO DE IA 🧠 │ 4. CHATEANDO CON TU IA 💬 │ 5. RECURSOS Y PRÓXIMOS PASOS 🚀 1. ¿QUÉ ES OLLAMA? 🤖 Definición Simple: Ollama es como una  "mochila digital"  que te permite llevar modelos de inteligencia artificial (como ChatGPT) en tu computadora, sin necesidad de internet. Analogía: Imagina que normalmente usas  Netflix  (necesitas internet para ver películas). Ollama es como tener un  DVD player  con tus películas favoritas, ¡siempre disponible sin conexión! ¿Para qué sirve? Ejecutar modelos de IA localmente Privacidad total (tus preguntas no salen de tu computadora) Funciona s...
Leer más

3- Creando tu Primer Entorno Virtual Python con Flask

 https://docs.google.com/presentation/d/e/2PACX-1vTygk-5apLh_TrGm0qH-RDWmpKchPG0CnHqZah8f6wyia4wvJ2liPdqwUsib6T6dvUWMnNsLvz30Ppy/pub?start=false&loop=false&delayms=3000 🎯   Tema del Tutorial: "Tu Primer Entorno de Programación Python: Entornos Virtuales y Flask" Índice Visual text 1. PREPARANDO LAS HERRAMIENTAS 🔧 │ 2. ¿QUÉ ES UN ENTORNO VIRTUAL? 🎪 │ 3. INSTALANDO VISUAL STUDIO CODE 💻 │ 4. INSTALANDO PYTHON 🐍 │ 5. CREANDO TU PRIMER ENTORNO VIRTUAL ⚡ │ 6. SOLUCIONANDO PROBLEMAS COMUNES 🛠️ │ 7. PRÓXIMOS PASOS 🚀 1. PREPARANDO LAS HERRAMIENTAS 🔧 Las 3 Herramientas Esenciales: text 1. Python 🐍 - El "motor" de nuestro programa 2. Visual Studio Code 💻 - El "taller" donde trabajamos 3. Flask 🌐 - El "marco" para construir aplicaciones web Analogía del Carpintero: Python  = Las herramientas (martillo, sierra) VS Code  = El taller de trabajo Flask  = Los planos para construir una mesa Entorno Virtual  = Una caja de herram...
Leer más

2- Cómo Usar Ollama con Postman (APIs y Comunicación)

https://docs.google.com/presentation/d/e/2PACX-1vQ9LSuAjKMwDa3RnlvU6AF-bV5_cftsPsjbA20Up6jvXMm2STg681NcxTNUEAH_S8OLdxtMNmD0DqQf/pub?start=false&loop=false&delayms=3000 🎯  Tema del Tutorial: "Hablando con tu IA: Cómo Conectar Ollama con Postman usando APIs" Índice Visual text 1. ¿QUÉ VAMOS A HACER? 🎯 │ 2. INSTALANDO POSTMAN 📬 │ 3. LA MAGIA DE LAS APIS 🔌 │ 4. TU PRIMERA CONSULTA API 💬 │ 5. ERRORES COMUNES Y SOLUCIONES 🔧 │ 6. PRÓXIMOS PASOS 🚀 1. ¿QUÉ VAMOS A HACER? 🎯 Objetivo del Tutorial: Vamos a aprender a comunicarnos con Ollama usando  Postman , que es como un "mensajero profesional" entre tu computadora y el modelo de IA. Analogía Simple: Imagina que Ollama es un  chef  en la cocina (tu computadora). Postman es el  mesero  que toma tu pedido y te trae la comida. ¡Vamos a aprender a hacer el pedido correctamente! ¿Por qué usar Postman? Para programadores que quieren integrar Ollama en sus apps Para hacer pruebas más avanzadas...
Leer más