00:00:00
Hola qué tal sean todos ustedes
00:00:01
Bienvenidos a un nuevo video Mi nombre
00:00:04
es Fernando y en este video vamos a
00:00:06
construir un chatbot utilizando gemini
00:00:09
Pro si no has visto cómo utilizar gemini
00:00:12
pro y gemini Pro Vision te dejo por acá
00:00:14
los links al video anterior en donde
00:00:16
explicamos todo eso así que cómo vamos a
00:00:19
hacer esto bien Vamos a utilizar la
00:00:21
librería de Google generative Ai vamos a
00:00:25
obtener nuestra picki con eso vamos a
00:00:27
poder tener acceso al modelo Pro luego
00:00:31
vamos a codear un Script este Script va
00:00:33
a tener tres componentes principales el
00:00:35
primero va a ser inicializar el modelo
00:00:38
el segundo va a ser una función la cual
00:00:39
va a recibir la pregunta y va a retornar
00:00:42
noos la respuesta la cual es básicamente
00:00:44
hace inferencia respecto a la
00:00:46
conversación y la tercera es un
00:00:48
componente que va a lanzar una interfaz
00:00:50
en gradio Y eso va a ser básicamente
00:00:54
todo así que sin más vamos a comenzar
00:00:57
primero vamos a ir a la documentación
00:01:00
como les comentaba vamos a utilizar
00:01:02
Google generative Ai y para esto voy a
00:01:05
ir en esta parte en un momento para
00:01:07
obtener mi Api Ke Así que primero vamos
00:01:12
a
00:01:13
crear un directorio yo aquí le llamo
00:01:18
chatbot y primero vamos a crear un
00:01:20
archivo pun el cual va a contener mi
00:01:23
llave
00:01:25
Google
00:01:28
p
00:01:30
y listo en este momento ya tenemos
00:01:32
nuestra apik ahora vamos a crear el
00:01:35
archivo principal el archivo Main voy a
00:01:38
primero desarrollar la aplicación y
00:01:41
después vamos a agregar los
00:01:42
requerimientos y finalmente vamos a
00:01:44
meter todo esto dentro de un contenedor
00:01:46
de docker Así que vamos primero con lo
00:01:49
principal lo más divertido y lo más
00:01:50
emocionante
00:01:52
Main este va a ser el Script principal
00:01:55
aquí yo voy a agregar mis librerías por
00:01:56
ejemplo
00:01:58
radio
00:02:04
voy a utilizar os la librería os para
00:02:06
poder cargar la variable de ambiente en
00:02:08
el Script y
00:02:10
finalmente únicamente utilizaré estas
00:02:13
tres librerías ahora vamos a comenzar
00:02:16
con nuestra clase dijimos que vamos a
00:02:18
tener tres componentes principales
00:02:19
entonces voy a utilizar tres funciones
00:02:21
vamos a llamar esta clase G
00:02:28
chatbot vamos tener nuestro
00:02:33
constructor y vamos a por por el momento
00:02:36
no hacer nada okay Por el momento no
00:02:38
haremos nada ahora la primer función la
00:02:41
que va a inicializar el chatbot vamos a
00:02:45
llamarle ahora qué es lo que voy a hacer
00:02:47
aquí lo que voy a hacer es setear
00:02:49
primero mi kei vamos a
00:02:54
hacerlo en esta línea hemos únicamente
00:02:57
seteado la piqui esto nos dará acceso
00:03:00
como ya lo comentamos al modelo ahora en
00:03:02
la siguiente línea yo voy a inicializar
00:03:04
G Pro vamos a
00:03:06
hacerlo en este momento hemos creado una
00:03:09
instancia del modelo gemini Pro ahora
00:03:13
voy a utilizar la capacidad de chatbot
00:03:16
para generar un atributo de la clase
00:03:18
llamada
00:03:24
chatbot resumiendo lo que hace esta
00:03:26
función es samos el Ke inicializa
00:03:29
generamos una instancia del modelo gm
00:03:31
Pro e inicializando un atributo llamado
00:03:34
chatbot eh que es básicamente un
00:03:36
componente de gemeni y listo con eso
00:03:39
tendríamos la parte de inicialización de
00:03:42
geminii chat Bot ahora lo que seguiría
00:03:45
es hacer una función la cual se va a
00:03:47
encargar de recibir la pregunta la
00:03:50
pregunta que le vamos a hacer a gemen y
00:03:52
cómo vamos a retornar la respuesta o
00:03:54
cómo la vamos a manejar en este caso
00:03:56
como quiero desplegarla en una interfaz
00:03:57
de gradio voy a utilizar un componente
00:04:00
que se llama conversación que es una
00:04:01
lista en la cual vamos a ir agregando
00:04:04
toda la conversación y al mismo tiempo
00:04:06
voy a ir por la respuesta y Lo agrego la
00:04:08
conversación Así que vamos a
00:04:12
hacerlo perfecto en la línea 15 lo que
00:04:16
hemos hecho es dada una pregunta dado un
00:04:18
question en este caso que es un String
00:04:21
se lo pasamos al método Send message de
00:04:23
nuestro de nuestro atributo es s pun
00:04:26
chatbot se llama chatbot entonces
00:04:29
chatbot Send message me va a retornar un
00:04:32
response luego lo que yo tengo que hacer
00:04:35
para poder gestionar Cómo se va a ir
00:04:37
viendo esta conversación en gradio es
00:04:40
utilizar conversation que conversation
00:04:42
va a ser un componente de gradio que
00:04:43
vamos a ver más adelante Así que yo
00:04:46
únicamente tengo que agregar a
00:04:48
conversation la tupla de la pregunta y
00:04:50
la
00:04:53
respuesta como ya lo vimos en el video
00:04:56
anterior eh el response contiene
00:04:59
diferentes atributos para los cuales yo
00:05:02
únicamente quiero el text lo cual
00:05:03
contiene la respuesta que voy a utilizar
00:05:06
entonces en esta parte hemos generado
00:05:09
una instancia de la conversación la cual
00:05:12
se va a ir agregando a esta lista y
00:05:14
finalmente tengo que
00:05:16
retornar voy a hacer esto y ahorita
00:05:19
explico por
00:05:22
qué retornamos dos componentes retorno
00:05:26
una Stream un Stream vacío y retorno
00:05:28
conversación Eh Esto es básicamente
00:05:31
porque en el comportamiento que quiero
00:05:33
manejar con gradio voy a recibir un
00:05:36
Stream vacío el cual va a suplir a lo
00:05:39
que yo escriba en un textbox cuando tú
00:05:41
escribes tu pregunta se va a borrar la
00:05:43
pregunta porque se va a mostrar ahora en
00:05:44
el chat y conversación porque quiero
00:05:47
mostrar la siguiente parte de la
00:05:48
conversación únicamente es por eso por
00:05:51
eso retornamos a estos dos componentes
00:05:52
que en la siguiente función tendrán más
00:05:54
sentido así que vamos a hacerlo de una
00:05:57
vez y justamente vamos a Ahora sí
00:06:01
codificar la parte de gradio que es por
00:06:04
eso me gusta mucho gradio es muy muy
00:06:06
sencillo de utilizar voy a utilizar un
00:06:09
componente que se llama de gradio que se
00:06:10
llaman blogs y con eso va a ser más que
00:06:13
suficiente para poder modelar nuestro
00:06:15
chatbot luego vamos a generar un
00:06:18
contexto una vez dentro del contexto
00:06:21
vamos a tener tres componentes el
00:06:23
chatbot como tal la pregunta que Vamos a
00:06:26
ingresar y un botón que limpie la
00:06:28
conversación así que vamos a utilizar
00:06:30
este grandioso componente chatbot se
00:06:32
llama chatbot es igual a este componente
00:06:35
me permite como ya lo comenté tener esta
00:06:38
este comportamiento tipo chatbot lo cual
00:06:41
es Genial question que es un textbox así
00:06:46
las
00:06:48
text
00:06:50
Box y le vamos a poner una etiqueta que
00:06:53
diga Pregúntame Ah sí Pregúntame y
00:06:58
finalmente un botón de Clear qué es lo
00:07:01
que va a limpiar este botón básicamente
00:07:03
va a limpiar question y va a limpiar
00:07:07
chatbot que chatbot nuevamente es el
00:07:09
componente que va a mostrar esta
00:07:11
conversación en una parte vamos a tener
00:07:14
la pregunta y en la otra la respuesta
00:07:15
pregunta respuesta en un momento vamos a
00:07:17
ver y listo una vez que tenemos estos
00:07:21
tres componentes cómo los manipulamos
00:07:22
Okay vamos a utilizar un evento llamado
00:07:25
soft meit que viene de question question
00:07:28
es un texto Box cuando demos enter en el
00:07:31
textbox es que estamos enviando la
00:07:33
pregunta en este momento se genera el
00:07:35
evento el cual va a llamar a la función
00:07:38
response le va a pasar el contenido de
00:07:40
question y va a
00:07:42
aceptar lo que nos retorne get response
00:07:45
que va va a ser la lista vacía y el
00:07:48
estado actual de la conversación vamos a
00:07:49
hacerlo la función que voy a llamar
00:07:51
self.get
00:07:53
response los inputs esta parte son los
00:07:57
inputs que van a ser pues
00:08:00
chatbot y lo que voy a recibir es el
00:08:04
siguiente es question que va a ser nada
00:08:08
y chatbot que va a ser el siguiente
00:08:10
estado cu se va a convertir en en un
00:08:13
Stream vacío para que cuando deamos
00:08:15
enter se limpia y el siguiente estado
00:08:18
actual del chatbot y una vez que tenemos
00:08:21
definido este comportamiento si vimos
00:08:23
fueron unas cuantas líneas para utilizar
00:08:26
gradio una vez que hemos hecho esto
00:08:29
basta con lanzar hacer un launch demo
00:08:31
that launch launch Okay y vamos a poner
00:08:35
on boog por si sale algún box de box
00:08:39
true vamos a poner el server name en
00:08:43
donde lo vamos a desplegar como va a ser
00:08:46
dentro de un contenedor tengo que
00:08:47
hacerlo esto tengo que hacerlo así si yo
00:08:49
le pongo local Host me va a tirar un
00:08:51
error
00:08:52
eh si no lo haces dentro de un
00:08:54
contenedor de docker puedes dejarle
00:08:56
local Host porque lo voy a hacer dentro
00:08:58
del contenedor yo le pongo este server
00:09:00
name y el puerto en el que va a
00:09:01
funcionar
00:09:03
server
00:09:05
Port es igual al 7860 me parece que es
00:09:09
el el que utilice y listo listo perfecto
00:09:15
okay ya tenemos nuestros tres
00:09:17
componentes nuestras tres funciones
00:09:19
inicialización del modelo obtener la
00:09:21
respuesta y gradio que básicamente esta
00:09:23
parte de gradio interactúa con get
00:09:25
response Okay ya está mi Script
00:09:28
únicamente necesito agregar mi If name y
00:09:33
lo que voy a hacer aquí es inicializar
00:09:35
la clase vamos a G C es igual a gemini
00:09:41
chatbot listo Ah una vez que hago esta
00:09:44
parte para que se inicialice vamos a
00:09:47
llamarle aquí self
00:09:49
init entonces en el constructor
00:09:52
inicializo y después lanzamos y. lch
00:09:58
gradio y esto sería básicamente todo
00:10:03
ahora ya tenemos el Script principal si
00:10:05
no hay ningún Bo por lo que sea debería
00:10:09
funcionar correctamente ahora vamos a
00:10:11
agregar requerimientos una vez que hemos
00:10:14
pasado la parte divertid vamos a ver
00:10:16
requerimientos
00:10:21
requirement bien eso los tengo por acá
00:10:24
vamos a hacer un copy and
00:10:26
paste y únicamente necesito estas dos
00:10:29
librerías necesito radio gradio Necesito
00:10:33
la librería de goog generative Ai y
00:10:36
listo ahora como dijimos que lo íbamos a
00:10:39
meter dentro de un contenedor de docker
00:10:42
como aquí nos gusta hacerlo eh vamos a
00:10:44
crear nuestra imagen de docker vamos a
00:10:46
crear un docker
00:10:50
file y dentro vamos a agregar unas
00:10:54
instrucciones listo estamos utilizando
00:10:57
python 3.11 desde el python 3.8 hacia
00:11:00
arriba podemos ocuparlo y ocupo el 11
00:11:02
genero mi eh archivo de trabajo mi
00:11:04
directorio de trabajo app copio los
00:11:07
requerimientos instalo todos los
00:11:09
requerimientos que como vimos son dos eh
00:11:12
comúnmente me gusta agregar un usuario
00:11:14
el cual tenga eh permisos de sudo lo cu
00:11:17
lo cual estoy haciendo acá y seteo el
00:11:19
usuario con el que voy a trabajar que es
00:11:21
a una vez hecho esto genero mi entry
00:11:25
Point que básicamente cuando corra el
00:11:26
contenedor va a ser el Script que se va
00:11:28
lanzar que va a ser básicamente m y eso
00:11:31
es básicamente todo ahora lo que yo
00:11:34
tendría que hacer solamente es construir
00:11:36
y correr el contenedor Así que vamos a
00:11:38
hacerlo Vamos vamos vamos vamos ahora lo
00:11:40
que vamos a hacer es Construir la imagen
00:11:42
docker bu vamos a llamarle gemini
00:11:47
chatbot y en el directorio actual
00:11:50
construimos la imagen y esperemos a que
00:11:53
se
00:11:56
[Música]
00:11:57
construya
00:12:00
Listo ya se construyó la imagen images
00:12:04
allí tenemos nuestra imagen y
00:12:08
chatbot ahí lo tenemos Okay ahora lo que
00:12:11
vamos a hacer es correr para correrlo
00:12:13
vamos a hacer un docker Run vamos a
00:12:16
hacer un menos y t en un detach Mode y
00:12:22
vamos a setear el archivo de
00:12:24
configuración recordemos que tenemos un
00:12:26
archivo de configuración en donde eh
00:12:29
tengo mi mi Google apq Entonces menos m
00:12:33
file es el archivo
00:12:38
punto luego comúnmente una práctica que
00:12:42
suelo hacer es montar el Script
00:12:45
principal por si suele ver algún Box
00:12:47
pueda manipularlo y que los cambios se
00:12:49
vean eh No tengan que reconstruir la
00:12:51
imagen entonces me gusta montar vamos a
00:12:53
hacer un menos B va entonces nuevamente
00:12:58
únicamente por si tengo tengo algún boj
00:12:59
algún typo pueda arreglarlo en ese
00:13:01
momento sin reconstruir la imagen y
00:13:03
finalmente Vamos a ponerle Cómo se va a
00:13:05
llamar mi contenedor menos name vamos a
00:13:08
llamarle
00:13:11
G chat Bot
00:13:14
container B1 ahora agregaré el puerto el
00:13:18
puerto que vamos a utilizar es el 78 70
00:13:22
78 60 dos puntos vamos a hacer un
00:13:25
Forward de este Puerto voy a expandir un
00:13:27
poquitito más para acá esto
00:13:29
Ah
00:13:33
7860 y la imagen se llama
00:13:38
jy
00:13:40
chatbot chatbot listo en detach Mode
00:13:44
vamos aar el archivo de
00:13:46
configuración montamos mi Script le
00:13:49
ponemos un
00:13:51
nombre hacemos Forward el puerto y listo
00:13:55
vamos a darle enter y parece que todo
00:13:58
viene a ver docker
00:13:59
[Música]
00:14:02
container sí está corriendo así que si
00:14:05
yo voy a mi eh local Host en el
00:14:08
7860 vamos a abrir
00:14:11
Chrome vamos a hacer un Sí y un local
00:14:16
Host 78 60 y allí tenemos nuestra
00:14:19
interfaz de gradio ahora sí vamos a
00:14:23
comenzar a preguntarle cosas al chatbot
00:14:26
aquí tenemos la parte esta es la sección
00:14:28
del chat Bot en donde vamos a ir viendo
00:14:30
ese ese comportamiento aquí tenemos la
00:14:32
parte de Pregúntame la cual se va a
00:14:34
limpiar una vez que le haga la pregunta
00:14:36
y un botón de Clear si ya tengo una
00:14:38
conversación muy larga hago un Clear Así
00:14:40
que vamos a decirle hola al chatbot
00:14:44
y muy bien fue muy rápido a ver s super
00:14:47
está yendo bien qué bueno que no hubo
00:14:49
ningún bg eh qué le preguntamos a ver
00:14:51
voy a preguntarle algo eh escribe una
00:14:55
función en python para calcular el
00:14:59
enésimo número de
00:15:03
fibonacci vamos a ver qué me dice gemini
00:15:06
Pro muy bien a ver vamos a rar Okay me
00:15:11
gusta me encanta O sea que te formatea
00:15:14
la parte del código se ve impresionante
00:15:17
Así que Okay vamos a ver escribe una
00:15:19
función en python para calcular el
00:15:21
número de
00:15:22
fibonacci muy bien Esto es la solución
00:15:24
eh Como clásica es recursiva esta esta
00:15:29
función no está
00:15:32
optimizada y el tiempo de complejidad
00:15:34
cabe mencionar es dos a la n creo que
00:15:37
por allí tenemos un video explicando
00:15:39
fimon Pero bueno Esta es recursiva y es
00:15:42
do a la
00:15:45
n Sí sí a ver deja le pregunto Cuál es
00:15:51
la
00:15:53
complejidad a
00:15:55
ver la complejidad de la
00:15:59
solución anterior en tiempo y espacio
00:16:05
tiene queir dos a la n y en espacio ha
00:16:08
de ser eh Ah constante vamos a ver qué
00:16:13
nos dice
00:16:15
eh Mira incluso la la optimizó la
00:16:18
complejidad es 2 a la n Okay eso lo que
00:16:21
justo comentamos eh Por lo tanto el
00:16:24
llamada el número de llamadas recursivas
00:16:26
crece exponencialmente lo cual es eh yo
00:16:29
había dicho constante la solución
00:16:30
espacio es es eh lineal Sí justamente
00:16:34
porque estamos generando el stack eh de
00:16:37
del del cálculo previo y estamos
00:16:39
haciendo una asignación de la variable
00:16:41
de forma
00:16:42
eh lineal conforme crece el número de
00:16:45
iteraciones
00:16:46
e Sí justamente yo le quería preguntar
00:16:49
cuál es la optimización y es con
00:16:51
programación dinámica con memoization Ah
00:16:55
Sí justo y aquí tenemos la utilización
00:16:57
de memoization que hay dos enfoques en
00:17:01
programación dinámica es bottom up o top
00:17:04
down eh y aquí nos está dando una de
00:17:07
estas y justamente se vuelve lineal
00:17:09
Ahora sí muy bien muy bien Ahora vamos a
00:17:12
decirle vamos a preguntarle qué le
00:17:14
podemos preguntar Dame tres Dame tres
00:17:18
consejos para escribir mi resume mi
00:17:24
cb vamos a esperar tres consejos para
00:17:27
escribir mi
00:17:30
curriculum
00:17:32
mm Okay muy bien Me encanta cómo cómo se
00:17:36
ve esta forma interactiva está muy buena
00:17:38
y esto es lo que les comentaba el
00:17:40
comportamiento chatbot que que te da
00:17:42
este gradio superb Okay Eh vamos a
00:17:46
preguntarle una última
00:17:50
cosa Quién es
00:17:54
squirtle de
00:17:57
Pokémon
00:17:59
sabrá no
00:18:01
sé está preguntando por las cosas
00:18:04
aleatorias a ver qui me
00:18:09
comenta es un Pokémon tipo agua que
00:18:12
justamente es
00:18:14
este Ok este un caparazón
00:18:18
claro listo Pues nada este vamos a ver
00:18:21
qué más tenemos por acá y y bueno vamos
00:18:23
a limpiar esto y se limpia todo vamos a
00:18:26
solamente testear lo que porque creo que
00:18:29
ya no lo resalt
00:18:31
este Qué es un gpu
00:18:35
eh Ah
00:18:38
Dímelo responde en
00:18:41
[Música]
00:18:46
viñetas se limpió aquí el texto vamos a
00:18:49
ver que va a haber aquí texto y va a
00:18:51
estar por acá Arribita pero a ver si lo
00:18:53
da viñ no
00:18:57
s puse viñetas este ah no sí Mira sí lo
00:19:02
organizó justamente y bueno lo que
00:19:04
quería Resaltar Es que aquí ya no
00:19:05
tenemos la pregunta la tenemos aquí
00:19:07
Arribita Y tenemos este comportamiento
00:19:09
de chada Así que listo listo listo listo
00:19:12
listo vamos a darle un Clear y sin más
00:19:16
sin más Hemos llegado a la parte final
00:19:18
del video espero les haya gustado les
00:19:20
haya encantado Mi nombre es Fernando y
00:19:24
nos vemos en el siguiente video Bye
00:19:49
[Música]
00:20:17
m
