Introducció

Aquest projecte consisteix a crear un xatbot que respongui preguntes basades en el contingut real d’un web. Per fer‑ho, he utilitzat un sistema format per tres parts principals: un Widget (FrontEnd), un servidor Flask (BackEnd) i un fitxer JSON que actua com a base de dades. La IA ha estat clau per ajudar‑me a entendre i dissenyar aquest ecosistema.

1 – Arquitectura i flux de dades entre FrontEnd i BackEnd

Tot el sistema funciona com un client i un servidor. El FrontEnd és el web que veu l’usuari, i el BackEnd és el servidor de Python on corre el xatbot.

1.1 – Com funciona el flux

• Usuari escriu: el text entra en el Widget i el navegador prepara un missatge en format JSON.
• Envia a Flask: la pàgina envia el missatge amb una petició fetch (tipus POST) cap al servidor.
• Túnel amb Ngrok: el servidor de Flask està en Google Colab, así que utilitzo ngrok per crear una URL pública que permeti que el web comuniqui amb ell.
• Flask rep i respon: el servidor rep el missatge, pregunta a la IA i envia una resposta de tornada al Widget.

Pas 1 – Comunicació FrontEnd i BackEnd

Pas 2 – Configuració de la petició fetch

2 – Integració del Widget al web

El xatbot s’ha integrat dins del web mitjançant un widget que es mostra en una cantonada i segueix el disseny de la pàgina.

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 protegir‑me, he amagat les claus de l’API (Google Gemini i Ngrok) als Secrets de Google Colab.

Pas 5 – Configuració de les claus API a Secrets

Pas 6 – Comprovar que el sistema funcioni endolat

4 – Com treballen juntes totes les parts

4.1 – Widget (FrontEnd)

És la part visible: el quadre on l’usuari escriu i on veu les respostes. És integrat directament al web i s’ajusta bé a la pantalla.

4.2 – Flask (BackEnd)

És el servidor de Python que escolta peticions al port 5000. Rep les preguntes, les envia a la IA i torna la resposta.

4.3 – JSON (Base de dades local)

El fitxer dades_total.json conté tot el text extret del web. És lleuger i fàcil de llegir per la IA.

4.4 – Ngrok (Túnel)

Crea una URL pública perquè el web de WordPress pugui enviar preguntes a Flask, tot i que està executant‑se en Google Colab.

4.5 – IA (Gemini API)

Rep la pregunta i el text de la web, i genera una resposta coherent i útil, basada només en la teva informació.