En aquesta fase final, he aconseguit que el meu xatbot no només sigui un codi en una consola, sinó una eina real integrada a la meva pàgina web que qualsevol usuari pot fer servir.

1. Arquitectura i Flux de Dades (El camí del missatge)

He creat un ecosistema on el FrontEnd (el que veu l’usuari) i el BackEnd (el cervell de la IA) es comuniquen sense interrupcions. El flux funciona així:

  1. L’usuari escriu: El missatge es captura des del Widget que he programat.
  2. Peticions Asíncrones (Fetch): Faig servir JavaScript per enviar la pregunta al servidor de Google Colab sense que la pàgina web s’hagi de recarregar.
  3. Túnel Ngrok: Com que el servidor està en un entorn privat, faig servir un túnel de Ngrok que em dóna una adreça pública segura per rebre les preguntes.
  4. Resposta en temps real: El servidor Flask processa la petició i torna un objecte JSON amb la resposta de Gemini, que es mostra instantàniament al xat.

Com m’ha ajudat la IA? M’ha ajudat a configurar les capçaleres de seguretat com 'ngrok-skip-browser-warning': 'true'. Sense això, en fer servir la versió gratuïta de Ngrok, el xat no funcionaria perquè sortiria una pantalla d’avís de seguretat bloquejant la resposta.

2. Disseny i Integració del Widget (“Gold & Dark Edition”)

He decidit canviar el disseny per un més professional que el de la pràctica anterior. He creat un botó flotant circular amb tons daurats (#c9a84c) que s’obre en fer clic.

Característiques del disseny:

  • Disseny Responsive: He fet servir @media queries perquè el xat ocupi gairebé tota la pantalla en mòbils, però sigui discret en ordinadors.
  • Efectes Visuals: He programat efectes de hover i shadows perquè el botó sembli que floti i tingui un aspecte modern.
  • WPCode: Per integrar-lo a WordPress, he fet servir aquest plugin per enganxar el codi al Footer (peu de pàgina), evitant així haver de modificar els fitxers interns de la plantilla.

Com m’ha ajudat la IA? M’ha ajudat a polir el JavaScript perquè, quan el xatbot escrigui en negretes (fent servir asteriscos **), el navegador els transformi en etiquetes <b> reals. També hem programat l’indicador d’escriptura (“…”) perquè l’usuari sàpiga que el bot està pensant.

3. Seguretat de les Claus i Gestió d’Errors

No podem deixar les claus d’API a la vista de tothom al codi JavaScript del navegador. Per això, tota la seguretat es gestiona al BackEnd:

  • El Widget de la web només coneix la URL de Ngrok, mai la clau de Gemini.
  • He utilitzat els Secrets de Colab per cridar la clau de l’API de manera oculta.
  • He programat un sistema de Try-Catch: si per algun motiu el servidor està apagat, el xatbot respon automàticament: “Error de connexió“, en lloc de quedar-se congelat.

4. Resultat Final: Prova de funcionament

El xatbot és capaç de respondre sobre qui sóc i sobre els continguts del meu portafolis perquè el Crawler que vaig programar abans li dóna tot el context necessari.

Prompt utilitzat per al disseny:

“Necessito que el xatbot tingui un disseny daurat i negre, que sigui elegant i professional. El botó ha de ser circular i estar a la part de baix a la dreta. Assegura’t que el JavaScript estigui net i que no m’oblidi de gestionar el paràmetre de Ngrok per saltar l’avís de seguretat.”