Memòria Tècnica: Integració d’un Xatbot Intel·ligent al Portal de la LAN Party 2026

1. Justificació del Projecte i Objectius

La integració d’un xatbot d’Intel·ligència Artificial (IA) dins del portal de la LAN Party respon a la necessitat d’optimitzar l’Experiència d’Usuari (UX). Durant un esdeveniment d’aquest tipus, els participants requereixen informació immediata sobre reglaments, horaris de tornejos i l’estat de les inscripcions.

Objectius Claus:

• Immediatesa: Respondre les consultes dels usuaris les 24 hores del dia en temps real.
• Automatització: Descarregar l’equip organitzador de respondre manualment preguntes freqüents i repetitives.
• Seguretat de Dades: Implementar una arquitectura en desacoblament on les claus privades de l’API mai s’exposin al navegador de l’usuari final.

2. Arquitectura de Tres Capes (Three-Tier Architecture)

Per assolir els criteris de qualitat de nivell professional, s’ha evitat fer trucades directes a l’API des del codi frontal (frontend). S’ha dissenyat un sistema modular estructurat de la següent manera:

1. Capa de Presentació (Frontend – HTML/CSS/JS): Un giny web visual inserit al portal de Google Sites. Recull el missatge de l’usuari i l’envia de forma asíncrona a través de peticions HTTP (fetch).
2. Capa Intermèdia de Seguretat (Túnel Ngrok): Transforma el servidor de desenvolupament local/Colab en un punt d’accés web públic, xifrat sota el protocol HTTPS.
3. Capa de Lògica i Processament (Backend – Python/Flask/Gemini): Un servidor que rep el text, interactua amb els servidors de Google utilitzant l’SDK oficial de google-generativeai de forma oculta i processa la resposta.

3. Implementació del Codi del Servidor (Backend en Python)

El backend s’ha allotjat i executat en un entorn de Google Colab. S’han utilitzat les següents llibreries clau:

• Flask i Flask-CORS: Per crear els punts d’accés de l’API (endpoints) i permetre que el giny web extern pugui enviar dades sense restriccions de seguretat del navegador.
• pyngrok: Per exposar el port local dinàmicament.
• google.generativeai: Per connectar amb el model de llenguatge massiu de Google.

Mecanisme de Seguretat implementat:

Les claus secretes (GEMINI_KEY i NGROK_TOKEN) s’han extret mitjançant el gestor de secrets de Google Colab (userdata.get()). Això evita que les credencials quedin visibles al codi font en cas de compartir el document.

Peu de foto: Figura 1: Configuració de seguretat en Google Colab utilitzant el gestor de secrets per protegir l’API Key de Gemini i el token de Ngrok.

L’endpoint principal s’ha programat sota la ruta /chat mitjançant el mètode POST. Un cop es rep el missatge de l’usuari, s’invoca el model gemini-1.5-flash (configurat amb un rang de temperatura controlat de $0.7$ per evitar respostes inventades o al·lucinacions) i es retorna el text en un objecte JSON net.

Peu de foto: Figura 2: Implementació i posada en marxa del servidor intermediari Flask en l’entorn de desenvolupament.

4. Disseny i Programació de la Interfície (Frontend en HTML/JS)

El disseny visual s’ha personalitzat completament per dotar-lo d’una aparença tecnològica i integrada amb la marca de la LAN Party 2026.

• Estils (CSS): S’ha emprat una paleta de colors foscos (tech slate #0f172a) combinada amb blau elèctric, bafarades diferenciades per a l’usuari i l’assistent, i una zona de text amb efecte de focus modern.
• Comportament (JavaScript Dinàmic):
  • S’encarrega d’interceptar l’esdeveniment de la tecla Enter per enviar el missatge còmodament.
  • Mostra un element visual d’estat transitòri («Thinking…») mentre s’espera la resposta del servidor, millorant la percepció de velocitat de l’aplicació.
  • Capçalera Especial Antiwarning: Al mètode fetch, s’inclou la capçalera 'ngrok-skip-browser-warning': 'true'. Això és vital per a un nivell PRO+, ja que evita que es mostri la pantalla d’advertència intermèdia que afegeix Ngrok als comptes gratuïts, fent que el giny carregui directament i neta dins del portal web.

Peu de foto: Figura 3: Integració del giny de xat mitjançant incrustació de codi HTML/CSS/JS personalitzat en el constructor web de Google Sites.

5. Resultats Obtinguts i Evidències del Funcionament

Tal com demostren les proves realitzades amb èxit:

1. El servidor inicia correctament, llegeix les variables d’entorn i enllaça el túnel de manera segura.
2. Ngrok assigna una URL única (com per exemple https://xxxx-xxxx.ngrok-free.app).

3. El trànsit es genera de forma fluida i es registren els codis d’estat HTTP 200 OK al terminal de Flask cada vegada que l’usuari interactua amb el giny de Google Sites, demostrant una integració 100% operativa i lliure d’errors d’execució o de sintaxi.