1. Justificació del Projecte (PRO+)
En aquest repte, he desenvolupat un sistema d’IA generativa que no només respon preguntes genèriques, sinó que és capaç d’alimentar-se de dades reals de la web
https://jaranda.inscastellbisbal.net/. He triat BeautifulSoup per la seva eficiència en el filtratge d’etiquetes HTML i Flask per crear una API que connecti el cervell del bot (Python) amb la interfície d’usuari (WordPress). L’ús de ngrok és fonamental per publicar el servei local de Colab de forma segura cap a l’exterior.
2. Implementació i Codi (Evidència Visual)
Captura de pantalla 1: Cel·la d’importació de llibreries i la configuració de l’API KEY.
Captura de pantalla 2: Codi en execució.
🚀 Iniciant Crawler...📄 Llegint (1/400)...- Això demostra que el meu script realment està “navegant” per la web.
3. Justificació per al PRO+ (Por què aquestes eines)
Per què BeautifulSoup?
He triat la llibreria BeautifulSoup4 perquè és extremadament eficient per a l’anàlisi de documents HTML i XML. A diferència d’altres mètodes de cerca de text simple, BeautifulSoup ens permet navegar per l’estructura del DOM (Document Object Model).
- Avantatge clau: Em permet utilitzar el mètode
.decompose(), que és fonamental per eliminar etiquetes irrellevants (<nav>,<footer>,<script>). Això assegura que el context que enviem a la IA sigui pur contingut informatiu, estalviant tokens i millorant la precisió de les respostes del xatbot.
Per què Flask?
He implementat Flask perquè és un micro-framework de Python molt lleuger i flexible que permet convertir un script local en una API funcional.
- Avantatge clau: Flask actua com el ‘pont’ o servidor intermediari. Sense Flask, el Widget del meu WordPress no tindria cap manera de comunicar-se amb el codi de Python que s’executa a Google Colab. En crear una ruta
@app.route('/chat'), permeto que el frontal del portafolis enviï preguntes i rebi respostes en format JSON de manera professional.
4. 🌐 El Front-end: Connexió WordPress amb el Xatbot
Per fer que el xatbot sigui accessible per a qualsevol usuari del meu portafolis, he programat un Widget personalitzat en JavaScript i HTML que he integrat mitjançant un plugin a WordPress.
Justificació Tècnica (PRO+)
- Interfície d’Usuari (UI): He dissenyat una bombolla flotant amb colors neó (groc i blau fosc) que manté la identitat visual del projecte. Utilitza CSS dinàmic per fer animacions de rotació i escalat en obrir el xat.
- Tecnologia Fetch (API): He utilitzat l’API
fetchde JavaScript per enviar peticionsPOSTde forma asíncrona. Això permet que l’usuari rebi la resposta de la IA sense haver de recarregar la pàgina de WordPress. - Enllaç Ngrok: He configurat la variable
NGROK_URLper apuntar directament al túnel segur que he obert des de Google Colab, cosa que permet una comunicació en temps real entre el navegador de l’usuari i el meu servidor Python.
5. 🧠 Reflexió Final del Projecte
“La realització d’aquest repte m’ha permès entendre que la potència d’una Intel·ligència Artificial no només depèn del model (en aquest cas Gemini), sinó de la qualitat de les dades que li proporcionem.
El més complex ha estat la part del WebScraping. Al principi, el xatbot rebia massa ‘soroll’ (menús, enllaços de xarxes socials, etc.), cosa que feia que les respostes no fossin precises. Implementar la neteja de dades amb BeautifulSoup (eliminant scripts i styles) ha estat el punt d’inflexió per aconseguir que el bot realment sembli un expert en el meu portafolis.
També m’ha sorprès la utilitat de Flask i Ngrok. Crear un túnel per connectar el meu codi de Python a Google Colab directament amb el meu WordPress ha estat un repte tècnic important, però m’ha ensenyat com funcionen les arquitectures de microserveis en el món real.
Crec que aquesta eina és un valor afegit per al meu portafolis, ja que permet als futurs reclutadors interactuar amb la meva feina d’una manera molt més dinàmica que simplement llegint text.”