Justificació
Aquest treball l’he fet amb l’ajuda de la IA, que m’ha guiat pas a pas per crear el xatbot, configurar el servidor amb Flask i guardar la informació en un fitxer JSON perquè tot funcioni junt. La IA ha estat clau per ensenyar-me a muntar la part del codi que no es veu (el BackEnd), aconseguint que el xatbot respongui utilitzant només la informació real que hem agafat de la meva pàgina web.
També hem treballat molt per fer que el codi sigui fort i que el xatbot sigui fàcil d’usar. La IA m’ha ajudat a posar un sistema que controla els errors de connexió perquè el programa no s’aturi si falla internet. A més, m’ha ensenyat que les claus privades (de Gemini i de ngrok) s’han de guardar ben amagades en els Secrets de Google Colab perquè ningú les pugui veure des del navegador.
- Xatbot (FrontEnd): He triat posar un xatbot a la part de baix de la web perquè és molt còmode. Així, qualsevol persona que entri pot preguntar el que vulgui i rebre una resposta ràpida sense haver de buscar per totes les pàgines del lloc.
- Flask (BackEnd): És l’eina de Python que fa de pont. Rep la pregunta que fa l’usuari des de la web, la processa de forma segura i la passa a la intel·ligència artificial.
- JSON (Base de dades): És el fitxer on guardem tot el text net que hem extret de la meva web. És un format molt simple i lleuger que permet a la IA llegir el contingut de pressa per saber què ha de respondre.
- ngrok (Connexió): Serveix per obrir un camí a internet des del Google Colab. Gràcies a això, la meva web de WordPress es pot comunicar amb el codi de Python sense haver de pagar un servidor web car.
- Gemini API (IA): És el cervell del xatbot. He fet servir aquesta IA de Google perquè entén molt bé les preguntes de la gent i respon en un català correcte, utilitzant només les dades que hem guardat al fitxer JSON.
Arquitectura i flux de dades entre FrontEnd i BackEnd
Per tal de connectar els dos troços de codi, HTML del Widget i el Python del Backend, he utilitzat les dues eines següents, Ngrok com a pont per comunicar-los, i Flask per revre la consulta i buscar la informació al la BBDD del JSON.
Ngrok
Per aconsegui la API de Ngrok per que fagi de pont he anat a Ngrok i la he agafat.
L’ha he afegit als secrets del Colab, que despres es crida dins del codi.
Aqui es on es crida dins del codi
Flask
Per aconseguir la API de Google he anat a Google AI Studio i la he creat.
També la he guardat als secrets del Colab
Aqui es on es crida dins del codi
Integració del Widget a la pàgina web
Per a afegir el Widget al meu lloc web he utilitzat la següent extensió, WPCoode, la cual deixa afegir HTML, CSS i JS al teu portafolis i poder interactuar amb ell.
Una vegada instal·lat, he anat a l’apartat “Capçelera i peu de pàgina”, on he afegit el meu codi.
Una vegada afeig i guardat quedaria aixi.
Aquest Widget s’adapta perfectament a l’ecencia del meu portafolis i a qualsevol dispositiu
El pas més important aqui es, una vegada tenim el codi a la extensió, i el nostre Colab funcionant, hem d’agafar l’enllaç que ens dona i afegir-lo al seu lloc corresponent dintre del codi HTML.
1- Agafem l’enllaç del codi Python
2- L’afegim al seu lloc corresponent dintre del codi
3- Fem la comprovació de que funciona
Seguretat de les claus API
Com ja he dit abans, just despres d’aconseguir les dues API tant de Ngrok com de Google, les he guardat als secrets del Colab i despres les he cridat al dins del codi perque cap persona pugui accedir a elles.
Els hi he posat els següents noms.
Google = GOOGLE_API_KEY
Ngrok = token_ngrok
