Universidad Central del Ecuador
NUEVAS TECNOLOGIAS E INNOVACION
EN SISTEMAS DE INFORMACION
SISTEMAS DE INFORMACIÓN S2 - 001
INTEGRANTES:
NOEMI ALVEAR
ALVA GÓMEZ
JOSSELYN NOGUERA
JAIR VILLAFUERTE
SAMANTA TUQUERES
Un chatbot es un programa diseñado para simular una conversación con
¿? personas mediante texto o voz. Se usa en sitios web, apps, redes sociales o
servicios de mensajería.
TIPOS DE CHATBOTS
Basados en reglas: Solo responden a comandos o frases específicas. No
aprenden.
Con inteligencia artificial (IA): Usan técnicas como procesamiento del lenguaje natural
(NLP) y aprendizaje automático para entender y generar respuestas más naturales.
¿CÓMO FUNCIONA UN CHATBOT CON IA?
[Link] del usuario: El usuario escribe.
[Link] del lenguaje natural (NLP): El bot analiza
lo que se dijo para entender la intención.
[Link] de decisión o modelo de IA: El sistema busca la
mejor respuesta según lo aprendido.
[Link]ón de respuesta: El chatbot responde con un
texto (o voz) que intenta ser útil, claro y coherente.
TÉCNICAS UTILIZADAS EN UN
CHATBOT INTELIGENTE
NLP (Procesamiento de Lenguaje Natural): Para entender y
generar lenguaje humano.
Machine Learning (Aprendizaje automático): Para aprender de
conversaciones anteriores.
Redes neuronales: Usadas en modelos como GPT o BERT
para crear respuestas naturales.
Bases de datos: Para guardar información de preguntas
frecuentes, usuarios, etc.
VENTAJAS
01 Respuesta inmediata 24/7.
02 Ahorro de tiempo y dinero.
03 Mejora la experiencia del usuario.
Puede fallar si no entiende A veces da respuestas Requiere entrenamiento
bien el contexto. genéricas o poco útiles. y datos para ser
efectivo.
APLICACIONES COMUNES
Educación Ventas automatizadas.
Atención al cliente
Marketing
Asistentes personales
PLANTEAMIENTO DEL PROYECTO
Para este proyecto nos apoyamos en ChatGPT para facilitarnos el
desarrollo. Primero, generamos un formulario donde le pedíamos
que nos creara una plantilla de chat estilo Telegram, diseñada para
hacer preguntas sobre documentos PDF.
Con la respuesta de ChatGPT, fuimos ajustando y personalizando
el código para que cumpliera con los requisitos dados.
VS CODE
Para desarrollar todo este proyecto utilizamos Visual Studio Code
como editor de código.
Nos ayudó a organizar los archivos, trabajar con Python, HTML,
CSS y JavaScript en un solo lugar, y facilitó la integración con el
servidor Flask y las pruebas locales.
LENGUAJES UTILIZADOS
En este proyecto utilizamos varios lenguajes para cubrir todas las
partes de la aplicación:
HTML para crear la estructura de la página web.
CSS para diseñar y dar estilo a la interfaz.
JavaScript para manejar la interacción y la lógica del chat en el
frontend.
Python para el backend, usando Flask para crear el servidor
que conecta con la API y procesa las preguntas.
USO DE LA API DE CONSULTA
En el programa, utilizamos una API de consulta externa llamada
ChatPDF, que permite subir archivos PDF y realizar preguntas
sobre su contenido. Cuando el usuario envía una pregunta desde
el chat, el backend la envía a esta API junto con los PDFs
previamente subidos, y la API procesa la consulta para devolver
una respuesta basada en la información contenida en los
documentos. Luego, esta respuesta se muestra en el chat para el
usuario.
¿CÓMO FUNCIONA EL PROGRAMA? [Link]
Interfaz sencilla: La página muestra un chat con un diseño tipo Telegram, donde el usuario puede escribir su
pregunta en un cuadro de texto.
Enviar preguntas: El usuario escribe su consulta en el campo de texto y presiona el botón “Enviar” para mandar el
mensaje.
Mostrar respuestas: Las preguntas y respuestas se muestran en el área principal del chat, llamada chat-
messages.
Conexión con código externo: El archivo [Link] se encarga de manejar la lógica del chat: captura la pregunta, la
envía al servidor o procesa la respuesta, y actualiza la pantalla.
Diseño adaptable: Gracias a los estilos en [Link], la aplicación se ve bien tanto en computadoras como en
dispositivos móviles.
CHATPDF_CLIENT
En la carpeta ./uploads se colocan los archivos PDF que
01 queremos consultar.
El backend sube todos esos PDFs a la API de ChatPDF y
guarda sus IDs (sourceIds).
02
Consulta del usuario:
Cuando el usuario escribe una pregunta en el chat
(frontend), esa pregunta se envía al backend.
El backend hace la pregunta a cada PDF subido,
03 usando los sourceIds, enviando el mensaje a la
API de ChatPDF.
CHATPDF_CLIENT
Respuesta inteligente:
01 La API devuelve una respuesta basada en el contenido del
PDF. El backend recoge la primera respuesta útil que
recibe.
Mostrar respuesta:
02 Finalmente, la respuesta se envía de vuelta al
frontend y se muestra en el área de mensajes del chat.
IMPORTACIONES INICIALIZACIÓN RUTAS DEFINIDAS
Flask para crear el servidor web. Se crea la app Flask con las carpetas estáticas y / (GET): Renderiza la plantilla [Link] (el chat).
CORS para permitir peticiones cruzadas. /ask (POST): Recibe una pregunta desde el
de templates definidas.
frontend, procesa la consulta a los PDFs y devuelve
Se habilita CORS para permitir llamadas desde una respuesta JSON.
el frontend.
CONCLUSIONES
En conclusión, el proyecto del chatbot dirigido a estudiantes universitarios sobre
preguntas de Inteligencia Artificial ha demostrado ser una herramienta innovadora y
eficaz para reforzar el aprendizaje en esta disciplina. Su diseño interactivo y amigable
permitió a los estudiantes explorar conceptos clave de forma dinámica, recibir
retroalimentación inmediata y fomentar su autonomía en el estudio.
MUCHAS
GRACIAS