Vamos a incluir un logo personalizado en nuestra aplicación de chat.
Como puedes ver, estos elementos que aparecen aquí son los logos que vienen incluidos por defecto.
Si quieres incluir tu propio logo, por ejemplo este que ves aquí en tu aplicación de chatbot, puedes hacerlo de manera bastante sencilla.
Todo lo que necesitamos hacer es ir a GitHub y abrir un nuevo repositorio.
Le damos un nombre a este repositorio, simplemente lo llamaremos «Fluid».
Puede ser público o privado, realmente no me importa.
Todo lo demás está bien, así que simplemente presiono «crear repositorio».
Luego simplemente presionamos «crear un nuevo archivo».
Lo llamo readme.md e inserto esto de «fluid», esto es solo para que tengamos algo incluido, y luego presionamos «confirmar cambios» y confirmar.
Ahora podemos presionar «añadir archivo» y también podemos «subir archivo», así que presionamos aquí.
Y aquí podemos arrastrar y soltar esto en este repositorio, así que simplemente arrastro y suelto esto aquí.
Y una vez más, confirmar cambios.
Ahora en nuestro repositorio tenemos simplemente el readme y la captura de pantalla, y podemos simplemente presionar en esta captura de pantalla. Aquí tenemos este archivo y tan pronto como estemos en este repositorio podemos presionar sobre él.
Simplemente queremos copiar esta dirección, la ponemos en una nueva pestaña para ver si esto está funcionando, así que la envío y ahí tenemos nuestra imagen.
Y este enlace podemos simplemente incluir este enlace.
Entonces podemos volver, por ejemplo, a nuestro código y podemos insertar este código como queramos.
Solo quería tener mi enlace aquí, en este fragmento de código.
Como puedes ver, he eliminado este viejo logo de LangChain y aquí estaba el enlace del logo de LangChain, pero ahora simplemente inserto este enlace y presiono ejecutar y también lo recargo una vez más.
Ahora puedo abrir esto, comenzar a chatear y ahí ves que ahora tenemos el logo de nuestro cliente.
Esto es perfecto.
Y por cierto, también utilicé la opción «auto open» en falso.
Anteriormente esto era verdadero, pero al cliente no le gusta esto.
Así que ahora todo está perfecto.
Y por supuesto también podemos cambiar esta cosa de aquí abajo.
Así que veamos si simplemente copiamos este archivo, lo ponemos aquí, ves que tenemos este mensaje de chat, y si no quieres tener este mensaje de chat, por supuesto puedes volver aquí y copiar también esto, volver a tu aplicación, puedes eliminar esta cosa de aquí abajo, insertar también aquí tu nuevo icono, presionar ejecutar, recargarlo.
Y entonces aquí abajo también tenemos esta cosa incluida, pero personalmente no estoy seguro si realmente me gusta esto o no.
Así que también podríamos eliminarlo, pero sí, simplemente lo mantenemos y le pregunto a mi cliente qué piensa que es mejor para él.
Y en la página web del cliente ahora se ve algo así.
Tenemos este «Adder doc», tenemos el logo incluido.
Si lo hago grande, también tengo aquí y aquí el logo incluido.
Así que creo que esta es una gran aplicación.
Y por cierto, también he incluido algo para que si las personas escriben mucho texto, este campo se haga un poco más grande.
Así que puedes ver que si escribo texto y texto y texto, este campo comienza a hacerse más grande, y he hecho esto simplemente con ChatGPT.
Simplemente le dije a ChatGPT: «aquí está mi código, haz que el campo de texto crezca más grande tan pronto como las personas escriban cosas», y ChatGPT me dio exactamente el mismo fragmento de código.
Así que he incluido el fragmento aquí y guardé mi configuración.
Y ahora el chatbot es perfecto, se comporta como debería comportarse, tiene la identidad visual como debería estar marcada, y creo que el cliente está contento ahora.
Mejoras aplicadas para mayor claridad:
- Contexto preservado: Mantuve toda la información técnica importante mientras mejoraba la legibilidad
- Estructura más clara: Organicé el contenido con párrafos más cortos y coherentes
- Terminología técnica: Mantuve términos como «repositorio», «GitHub», «chatbot» que son comunes en español técnico
- Fluidez natural: Adapté expresiones idiomáticas del inglés al español natural
- Instrucciones paso a paso: Hice más claras las instrucciones técnicas