L’objectiu d’aquest encarrec és crear un xatbot que respongui preguntes utilitzant la informació real d’una pàgina web.

El sistema funciona amb un model clàssic de client-servidor dividit en tres peces:

  • FrontEnd (Widget): La interfície web on l’usuari escriu el missatge.
  • BackEnd (Flask en Google Colab): El servidor Python que processa la informació i consulta la IA.
  • Base de dades (JSON): On s’emmagatzema la informació de suport.

Com viatgen les dades?

Quan l’usuari envia una pregunta, el navegador la paquetitza en format JSON i la llança cap al servidor mitjançant una petició fetch (POST). Com que el servidor s’executa a Google Colab, utilitzo Ngrok per crear un túnel amb una URL pública que permeti connectar el web amb Flask. Finalment, el servidor rep el missatge, demana la resposta a la IA i la reenvia al widget perquè l’usuari la vegi en pantalla.

Pas 1 – Comunicació FrontEnd i BackEnd

Pas 2 – Configuració de la petició fet

Aqui vaig canviar el port de la captura i vaig posar el port:3000

2 – Integració del Widget a la web

Perquè l’usuari pugui utilitzar el xatbot, l’hem integrat directament a la web mitjançant un widget flotant situat en una cantonada de la pantalla. El millor d’aquest component és que s’ha dissenyat des de zero per adaptar-se totalment a l’estètica i la paleta de colors de la pàgina, aconseguint que sembli una part nativa del lloc web i no un afegit extern.

Pas 3 – Integració del Widget a la pàgina web

Pas 4 – Ajust de colors i estil del Widget

3 – Seguretat de les claus API

Per un tema de seguretat i privacitat, les claus de l’API (tant la de Google Gemini com la de Ngrok) no estan escrites directament al codi. En lloc d’això, les he desat de forma oculta a l’apartat de Secrets de Google Colab. D’aquesta manera, el codi es pot compartir o ensenyar sense el risc que ningú vegi ni utilitzi les meves credencials privades.

Pas 5 – Configuració de les claus API a Secrets

Pas 6 – Comprovar que el sistema funcioni endolat

4 – Com treballen juntes totes les parts (L’engranatge del sistema)

Perquè el xatbot funcioni perfectament, cada component té un rol molt ben definit i es coordinen entre ells en qüestió de mil·lisegons:

4.1 – El Widget (FrontEnd)

És la cara visible del projecte. Es tracta de la petita finestra integrada a la web on l’usuari interactua. El seu disseny és totalment responsive, el que significa que s’adapta sense problemes tant a pantalles d’ordinador com a mòbils per rebre el text de l’usuari i mostrar les respostes de forma neta.

4.2 – Flask (BackEnd)

És el «cervell» operatiu. Aquest servidor de Python es manté a l’escorta (en el port 5000) esperant que arribi un missatge. Quan rep una pregunta de la web, s’encarrega de gestionar la lògica: recull les dades, les envia a la IA i, en rebre la solució, la redirigeix de tornada al navegador.

4.3 – JSON (La base de dades local)

Utilitzem un fitxer anomenat dades_total.json que conté tot el text real extret prèviament de la web. L’avantatge d’aquest format és que és increïblement lleuger i net, el que permet que la IA el pugui llegir i analitzar a l’instant sense consumir gairebé recursos.

4.4 – Ngrok (El túnel de connexió)

Com que el servidor Flask està corrent dins l’entorn tancat de Google Colab, una web externa (com un WordPress) no hi podria accedir directament. Aquí és on entra Ngrok: crea un túnel segur i ens dona una URL pública temporal que fa de pont directe entre la web i el nostre codi en Colab.

4.5 – La IA (API de Google Gemini)

És el motor de compressió i redacció. En lloc de respondre a cegues, rep dues coses: la pregunta de l’usuari i el contingut del nostre fitxer JSON. Amb això, Gemini processa la informació i genera una resposta natural, coherent i, sobretot, basada estrictament en les dades reals de la nostra web.