Capítulo 4: Construyendo un Chatbot Simple con Memoria
Ejercicios Prácticos — Capítulo 4
Ejercicio 1: Crear un Chatbot Básico en Streamlit
Tarea:
Construye un chatbot usando Streamlit que acepte la entrada del usuario, la envíe a GPT-4o y muestre la respuesta en la interfaz de usuario.
Solución:
import streamlit as st
import openai
import os
from dotenv import load_dotenv
load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")
st.title("💬 Simple GPT-4o Chatbot")
user_input = st.text_input("You:", "")
if user_input:
messages = [
{"role": "system", "content": "You are a helpful assistant."},
{"role": "user", "content": user_input}
]
response = openai.ChatCompletion.create(
model="gpt-4o",
messages=messages
)
st.write("🤖", response["choices"][0]["message"]["content"])
Ejercicio 2: Agregar Memoria Basada en Sesiones en Streamlit
Tarea:
Modifica tu chatbot para que recuerde la conversación completa durante una única sesión del navegador.
Solución:
if "messages" not in st.session_state:
st.session_state.messages = [{"role": "system", "content": "You are a helpful assistant."}]
for msg in st.session_state.messages[1:]:
st.write(f"**{msg['role'].capitalize()}:** {msg['content']}")
user_input = st.text_input("You:")
if user_input:
st.session_state.messages.append({"role": "user", "content": user_input})
response = openai.ChatCompletion.create(
model="gpt-4o",
messages=st.session_state.messages
)
reply = response["choices"][0]["message"]["content"]
st.session_state.messages.append({"role": "assistant", "content": reply})
st.write("🤖", reply)
Ejercicio 3: Agregar Memoria de Chat en Flask Usando Session
Tarea:
Crea un chatbot en Flask que mantenga el historial de conversación usando el objeto session de Flask.
Solución:
from flask import Flask, request, render_template, session
import openai
import os
from flask_session import Session
from dotenv import load_dotenv
load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")
app = Flask(__name__)
app.secret_key = os.urandom(24)
app.config["SESSION_TYPE"] = "filesystem"
Session(app)
@app.route("/", methods=["GET", "POST"])
def chat():
if "history" not in session:
session["history"] = [{"role": "system", "content": "You are a helpful assistant."}]
if request.method == "POST":
user_input = request.form["user_input"]
session["history"].append({"role": "user", "content": user_input})
response = openai.ChatCompletion.create(
model="gpt-4o",
messages=session["history"]
)
reply = response["choices"][0]["message"]["content"]
session["history"].append({"role": "assistant", "content": reply})
return render_template("chat.html", history=session["history"][1:])
Ejercicio 4: Limitar la Memoria a los Mensajes Más Recientes
Tarea:
Evita que la memoria de la sesión crezca demasiado eliminando los mensajes más antiguos cuando el historial supere las 20 entradas.
Solución (Streamlit):
MAX_HISTORY = 20
if len(st.session_state.messages) > MAX_HISTORY:
st.session_state.messages = [st.session_state.messages[0]] + st.session_state.messages[-MAX_HISTORY:]
Solución (Flask):
if len(session["history"]) > MAX_HISTORY:
session["history"] = [session["history"][0]] + session["history"][-MAX_HISTORY:]
Ejercicio 5: Estilizar la Interfaz del Chat en Streamlit
Tarea:
Mejora tu interfaz de Streamlit usando st.chat_message()
para hacer que el chatbot se vea como una conversación real.
Solución:
st.set_page_config(page_title="Chatbot", page_icon="🤖")
st.title("🤖 GPT-4o Assistant")
if "messages" not in st.session_state:
st.session_state.messages = [{"role": "system", "content": "You are a helpful assistant."}]
for msg in st.session_state.messages[1:]:
with st.chat_message(msg["role"]):
st.markdown(msg["content"])
user_input = st.chat_input("Say something...")
if user_input:
st.session_state.messages.append({"role": "user", "content": user_input})
with st.chat_message("user"):
st.markdown(user_input)
with st.chat_message("assistant"):
with st.spinner("Thinking..."):
response = openai.ChatCompletion.create(
model="gpt-4o",
messages=st.session_state.messages
)
reply = response["choices"][0]["message"]["content"]
st.markdown(reply)
st.session_state.messages.append({"role": "assistant", "content": reply})
Resumen de lo que Practicaste
- Creación de interfaces de chat simples y efectivas con Streamlit y Flask
- Preservación de memoria de conversación de múltiples turnos
- Estructuración de interfaces de chat limpias y legibles
- Gestión del historial de mensajes para optimizar el uso de la API
- Implementación de sesiones del lado del servidor en Flask para mantener la continuidad
Has construido un chatbot que se ve bien, responde ágilmente y mantiene el contexto como un profesional. En la siguiente sección, llevaremos la memoria al siguiente nivel usando bases de datos vectoriales para una memoria semántica persistente que perdure más allá de la sesión.
Ejercicios Prácticos — Capítulo 4
Ejercicio 1: Crear un Chatbot Básico en Streamlit
Tarea:
Construye un chatbot usando Streamlit que acepte la entrada del usuario, la envíe a GPT-4o y muestre la respuesta en la interfaz de usuario.
Solución:
import streamlit as st
import openai
import os
from dotenv import load_dotenv
load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")
st.title("💬 Simple GPT-4o Chatbot")
user_input = st.text_input("You:", "")
if user_input:
messages = [
{"role": "system", "content": "You are a helpful assistant."},
{"role": "user", "content": user_input}
]
response = openai.ChatCompletion.create(
model="gpt-4o",
messages=messages
)
st.write("🤖", response["choices"][0]["message"]["content"])
Ejercicio 2: Agregar Memoria Basada en Sesiones en Streamlit
Tarea:
Modifica tu chatbot para que recuerde la conversación completa durante una única sesión del navegador.
Solución:
if "messages" not in st.session_state:
st.session_state.messages = [{"role": "system", "content": "You are a helpful assistant."}]
for msg in st.session_state.messages[1:]:
st.write(f"**{msg['role'].capitalize()}:** {msg['content']}")
user_input = st.text_input("You:")
if user_input:
st.session_state.messages.append({"role": "user", "content": user_input})
response = openai.ChatCompletion.create(
model="gpt-4o",
messages=st.session_state.messages
)
reply = response["choices"][0]["message"]["content"]
st.session_state.messages.append({"role": "assistant", "content": reply})
st.write("🤖", reply)
Ejercicio 3: Agregar Memoria de Chat en Flask Usando Session
Tarea:
Crea un chatbot en Flask que mantenga el historial de conversación usando el objeto session de Flask.
Solución:
from flask import Flask, request, render_template, session
import openai
import os
from flask_session import Session
from dotenv import load_dotenv
load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")
app = Flask(__name__)
app.secret_key = os.urandom(24)
app.config["SESSION_TYPE"] = "filesystem"
Session(app)
@app.route("/", methods=["GET", "POST"])
def chat():
if "history" not in session:
session["history"] = [{"role": "system", "content": "You are a helpful assistant."}]
if request.method == "POST":
user_input = request.form["user_input"]
session["history"].append({"role": "user", "content": user_input})
response = openai.ChatCompletion.create(
model="gpt-4o",
messages=session["history"]
)
reply = response["choices"][0]["message"]["content"]
session["history"].append({"role": "assistant", "content": reply})
return render_template("chat.html", history=session["history"][1:])
Ejercicio 4: Limitar la Memoria a los Mensajes Más Recientes
Tarea:
Evita que la memoria de la sesión crezca demasiado eliminando los mensajes más antiguos cuando el historial supere las 20 entradas.
Solución (Streamlit):
MAX_HISTORY = 20
if len(st.session_state.messages) > MAX_HISTORY:
st.session_state.messages = [st.session_state.messages[0]] + st.session_state.messages[-MAX_HISTORY:]
Solución (Flask):
if len(session["history"]) > MAX_HISTORY:
session["history"] = [session["history"][0]] + session["history"][-MAX_HISTORY:]
Ejercicio 5: Estilizar la Interfaz del Chat en Streamlit
Tarea:
Mejora tu interfaz de Streamlit usando st.chat_message()
para hacer que el chatbot se vea como una conversación real.
Solución:
st.set_page_config(page_title="Chatbot", page_icon="🤖")
st.title("🤖 GPT-4o Assistant")
if "messages" not in st.session_state:
st.session_state.messages = [{"role": "system", "content": "You are a helpful assistant."}]
for msg in st.session_state.messages[1:]:
with st.chat_message(msg["role"]):
st.markdown(msg["content"])
user_input = st.chat_input("Say something...")
if user_input:
st.session_state.messages.append({"role": "user", "content": user_input})
with st.chat_message("user"):
st.markdown(user_input)
with st.chat_message("assistant"):
with st.spinner("Thinking..."):
response = openai.ChatCompletion.create(
model="gpt-4o",
messages=st.session_state.messages
)
reply = response["choices"][0]["message"]["content"]
st.markdown(reply)
st.session_state.messages.append({"role": "assistant", "content": reply})
Resumen de lo que Practicaste
- Creación de interfaces de chat simples y efectivas con Streamlit y Flask
- Preservación de memoria de conversación de múltiples turnos
- Estructuración de interfaces de chat limpias y legibles
- Gestión del historial de mensajes para optimizar el uso de la API
- Implementación de sesiones del lado del servidor en Flask para mantener la continuidad
Has construido un chatbot que se ve bien, responde ágilmente y mantiene el contexto como un profesional. En la siguiente sección, llevaremos la memoria al siguiente nivel usando bases de datos vectoriales para una memoria semántica persistente que perdure más allá de la sesión.
Ejercicios Prácticos — Capítulo 4
Ejercicio 1: Crear un Chatbot Básico en Streamlit
Tarea:
Construye un chatbot usando Streamlit que acepte la entrada del usuario, la envíe a GPT-4o y muestre la respuesta en la interfaz de usuario.
Solución:
import streamlit as st
import openai
import os
from dotenv import load_dotenv
load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")
st.title("💬 Simple GPT-4o Chatbot")
user_input = st.text_input("You:", "")
if user_input:
messages = [
{"role": "system", "content": "You are a helpful assistant."},
{"role": "user", "content": user_input}
]
response = openai.ChatCompletion.create(
model="gpt-4o",
messages=messages
)
st.write("🤖", response["choices"][0]["message"]["content"])
Ejercicio 2: Agregar Memoria Basada en Sesiones en Streamlit
Tarea:
Modifica tu chatbot para que recuerde la conversación completa durante una única sesión del navegador.
Solución:
if "messages" not in st.session_state:
st.session_state.messages = [{"role": "system", "content": "You are a helpful assistant."}]
for msg in st.session_state.messages[1:]:
st.write(f"**{msg['role'].capitalize()}:** {msg['content']}")
user_input = st.text_input("You:")
if user_input:
st.session_state.messages.append({"role": "user", "content": user_input})
response = openai.ChatCompletion.create(
model="gpt-4o",
messages=st.session_state.messages
)
reply = response["choices"][0]["message"]["content"]
st.session_state.messages.append({"role": "assistant", "content": reply})
st.write("🤖", reply)
Ejercicio 3: Agregar Memoria de Chat en Flask Usando Session
Tarea:
Crea un chatbot en Flask que mantenga el historial de conversación usando el objeto session de Flask.
Solución:
from flask import Flask, request, render_template, session
import openai
import os
from flask_session import Session
from dotenv import load_dotenv
load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")
app = Flask(__name__)
app.secret_key = os.urandom(24)
app.config["SESSION_TYPE"] = "filesystem"
Session(app)
@app.route("/", methods=["GET", "POST"])
def chat():
if "history" not in session:
session["history"] = [{"role": "system", "content": "You are a helpful assistant."}]
if request.method == "POST":
user_input = request.form["user_input"]
session["history"].append({"role": "user", "content": user_input})
response = openai.ChatCompletion.create(
model="gpt-4o",
messages=session["history"]
)
reply = response["choices"][0]["message"]["content"]
session["history"].append({"role": "assistant", "content": reply})
return render_template("chat.html", history=session["history"][1:])
Ejercicio 4: Limitar la Memoria a los Mensajes Más Recientes
Tarea:
Evita que la memoria de la sesión crezca demasiado eliminando los mensajes más antiguos cuando el historial supere las 20 entradas.
Solución (Streamlit):
MAX_HISTORY = 20
if len(st.session_state.messages) > MAX_HISTORY:
st.session_state.messages = [st.session_state.messages[0]] + st.session_state.messages[-MAX_HISTORY:]
Solución (Flask):
if len(session["history"]) > MAX_HISTORY:
session["history"] = [session["history"][0]] + session["history"][-MAX_HISTORY:]
Ejercicio 5: Estilizar la Interfaz del Chat en Streamlit
Tarea:
Mejora tu interfaz de Streamlit usando st.chat_message()
para hacer que el chatbot se vea como una conversación real.
Solución:
st.set_page_config(page_title="Chatbot", page_icon="🤖")
st.title("🤖 GPT-4o Assistant")
if "messages" not in st.session_state:
st.session_state.messages = [{"role": "system", "content": "You are a helpful assistant."}]
for msg in st.session_state.messages[1:]:
with st.chat_message(msg["role"]):
st.markdown(msg["content"])
user_input = st.chat_input("Say something...")
if user_input:
st.session_state.messages.append({"role": "user", "content": user_input})
with st.chat_message("user"):
st.markdown(user_input)
with st.chat_message("assistant"):
with st.spinner("Thinking..."):
response = openai.ChatCompletion.create(
model="gpt-4o",
messages=st.session_state.messages
)
reply = response["choices"][0]["message"]["content"]
st.markdown(reply)
st.session_state.messages.append({"role": "assistant", "content": reply})
Resumen de lo que Practicaste
- Creación de interfaces de chat simples y efectivas con Streamlit y Flask
- Preservación de memoria de conversación de múltiples turnos
- Estructuración de interfaces de chat limpias y legibles
- Gestión del historial de mensajes para optimizar el uso de la API
- Implementación de sesiones del lado del servidor en Flask para mantener la continuidad
Has construido un chatbot que se ve bien, responde ágilmente y mantiene el contexto como un profesional. En la siguiente sección, llevaremos la memoria al siguiente nivel usando bases de datos vectoriales para una memoria semántica persistente que perdure más allá de la sesión.
Ejercicios Prácticos — Capítulo 4
Ejercicio 1: Crear un Chatbot Básico en Streamlit
Tarea:
Construye un chatbot usando Streamlit que acepte la entrada del usuario, la envíe a GPT-4o y muestre la respuesta en la interfaz de usuario.
Solución:
import streamlit as st
import openai
import os
from dotenv import load_dotenv
load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")
st.title("💬 Simple GPT-4o Chatbot")
user_input = st.text_input("You:", "")
if user_input:
messages = [
{"role": "system", "content": "You are a helpful assistant."},
{"role": "user", "content": user_input}
]
response = openai.ChatCompletion.create(
model="gpt-4o",
messages=messages
)
st.write("🤖", response["choices"][0]["message"]["content"])
Ejercicio 2: Agregar Memoria Basada en Sesiones en Streamlit
Tarea:
Modifica tu chatbot para que recuerde la conversación completa durante una única sesión del navegador.
Solución:
if "messages" not in st.session_state:
st.session_state.messages = [{"role": "system", "content": "You are a helpful assistant."}]
for msg in st.session_state.messages[1:]:
st.write(f"**{msg['role'].capitalize()}:** {msg['content']}")
user_input = st.text_input("You:")
if user_input:
st.session_state.messages.append({"role": "user", "content": user_input})
response = openai.ChatCompletion.create(
model="gpt-4o",
messages=st.session_state.messages
)
reply = response["choices"][0]["message"]["content"]
st.session_state.messages.append({"role": "assistant", "content": reply})
st.write("🤖", reply)
Ejercicio 3: Agregar Memoria de Chat en Flask Usando Session
Tarea:
Crea un chatbot en Flask que mantenga el historial de conversación usando el objeto session de Flask.
Solución:
from flask import Flask, request, render_template, session
import openai
import os
from flask_session import Session
from dotenv import load_dotenv
load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")
app = Flask(__name__)
app.secret_key = os.urandom(24)
app.config["SESSION_TYPE"] = "filesystem"
Session(app)
@app.route("/", methods=["GET", "POST"])
def chat():
if "history" not in session:
session["history"] = [{"role": "system", "content": "You are a helpful assistant."}]
if request.method == "POST":
user_input = request.form["user_input"]
session["history"].append({"role": "user", "content": user_input})
response = openai.ChatCompletion.create(
model="gpt-4o",
messages=session["history"]
)
reply = response["choices"][0]["message"]["content"]
session["history"].append({"role": "assistant", "content": reply})
return render_template("chat.html", history=session["history"][1:])
Ejercicio 4: Limitar la Memoria a los Mensajes Más Recientes
Tarea:
Evita que la memoria de la sesión crezca demasiado eliminando los mensajes más antiguos cuando el historial supere las 20 entradas.
Solución (Streamlit):
MAX_HISTORY = 20
if len(st.session_state.messages) > MAX_HISTORY:
st.session_state.messages = [st.session_state.messages[0]] + st.session_state.messages[-MAX_HISTORY:]
Solución (Flask):
if len(session["history"]) > MAX_HISTORY:
session["history"] = [session["history"][0]] + session["history"][-MAX_HISTORY:]
Ejercicio 5: Estilizar la Interfaz del Chat en Streamlit
Tarea:
Mejora tu interfaz de Streamlit usando st.chat_message()
para hacer que el chatbot se vea como una conversación real.
Solución:
st.set_page_config(page_title="Chatbot", page_icon="🤖")
st.title("🤖 GPT-4o Assistant")
if "messages" not in st.session_state:
st.session_state.messages = [{"role": "system", "content": "You are a helpful assistant."}]
for msg in st.session_state.messages[1:]:
with st.chat_message(msg["role"]):
st.markdown(msg["content"])
user_input = st.chat_input("Say something...")
if user_input:
st.session_state.messages.append({"role": "user", "content": user_input})
with st.chat_message("user"):
st.markdown(user_input)
with st.chat_message("assistant"):
with st.spinner("Thinking..."):
response = openai.ChatCompletion.create(
model="gpt-4o",
messages=st.session_state.messages
)
reply = response["choices"][0]["message"]["content"]
st.markdown(reply)
st.session_state.messages.append({"role": "assistant", "content": reply})
Resumen de lo que Practicaste
- Creación de interfaces de chat simples y efectivas con Streamlit y Flask
- Preservación de memoria de conversación de múltiples turnos
- Estructuración de interfaces de chat limpias y legibles
- Gestión del historial de mensajes para optimizar el uso de la API
- Implementación de sesiones del lado del servidor en Flask para mantener la continuidad
Has construido un chatbot que se ve bien, responde ágilmente y mantiene el contexto como un profesional. En la siguiente sección, llevaremos la memoria al siguiente nivel usando bases de datos vectoriales para una memoria semántica persistente que perdure más allá de la sesión.