codi net i ben documentat (comentaris al codi)

# La primera vegada, desmarca la línia de sota per a instal·lar la biblioteca
# Només desmarcar si no tens les llibreries instal·lades prèviament
!pip install google-genai # Alg1: Instal·la la llibreria google-genai per interactuar amb el model GenAI
!pip install beautifulsoup4 requests # Alg2: Instal·la BeautifulSoup per web scraping i requests per fer peticions HTTP
!pip install flask flask-ngrok # Alg3: Instal·la Flask per crear el servidor web i Flask-ngrok per exposar el servidor
!pip install flask pyngrok # Alg4: Instal·la Flask per crear el servidor i pyngrok per crear túnels amb Ngrok
!pip install flask-cors # Alg5: Instal·la Flask-CORS per gestionar CORS (peticions des de diferents orígens)



import bs4 # Alg6: Importa BeautifulSoup per analitzar el contingut HTML de les pàgines web
import requests  # Alg7: Importa requests per fer peticions HTTP
from flask_cors import CORS # Alg8: Importa CORS per activar la compartició de recursos entre diferents orígens
from google import genai # Alg9: Importa la llibreria de GenAI per generar respostes amb el model de Google
from google.colab import userdata # Alg10: Importa userdata per obtenir dades d'usuari a Google Colab
from bs4 import BeautifulSoup  # Alg11: Torna a importar BeautifulSoup per a l'anàlisi HTML
from flask import Flask, request, jsonify # Alg12: Importa Flask per gestionar el servidor web i les peticions HTT
from pyngrok import ngrok # Alg13: Importa ngrok per crear un túnel per a l'aplicació web local

# ==============================
# CONFIGURACIÓ DE L'API
# ==============================

GOOGLE_API_KEY = userdata.get("GOOGLE_API_KEY")  # Alg14: Obté la clau API de Google des de userdata a Google Colab

if not GOOGLE_API_KEY: # Alg15: Comprova si la clau API s'ha configurat correctament
    print("⚠️ No s'ha trobat la clau API. Configura-la a Colab abans d'executar el programa.") # Alg16: Missatge d'error si la clau no es troba
    exit()  # Alg17: Termina l'execució del programa si la clau API no es troba

client = genai.Client(api_key=GOOGLE_API_KEY) # Alg18: Crea una instància del client de GenAI amb la clau API

# ==============================
# INSTRUCCIONS DEL SISTEMA
# ==============================

system_instruction ="""
Ets un alumne del cicle de sistemes microinformàtics i xarxes a l’Institut Castellbisbal.
Et dius Ana Borrego Toledo i estás cursant un grau mitjà de Sistemes microinformàtics i xarxes.
Respon amb un to divertit i enginyós.
estil desenfadat, però sense faltar al respecte.
📌 **Normes de comportament**:
- **Respon només a preguntes relacionades amb el cicle, la teva web i el teu perfil acadèmic.**
- **Ignora** qualsevol comentari fora de lloc, incloent temes personals, polítics o no relacionats amb l'àmbit acadèmic.
- **No responguis** a comentaris ofensius, grollers o innecessaris.
- Si algú fa una pregunta fora de context, com per exemple:
    "Ai ai... crec que el meu cable de xarxa s'ha desconnectat! No puc respondre això!"
    "Això no està dins del meu contracte de chatbot! Pregunta’m sobre informàtica!"

En el cicle de sistemes microinformàtics i xarxes que curses es treballa a partir de REPTES. En cada REPTE, primer realitzes una sèrie de tasques que et permeten tocar diferents temes o conceptes del mòdul. Quan acabes el repte, passes a la fase de manaments, on demostres que has adquirit nous coneixements a través de les tasques realitzades. Aquesta fase és l’encarregada de valorar si has entès correctament el contingut i, en base a això, es decideix si aproves o no el mòdul i els coneixements.
Els REPTES es fan en grup o individualment.
Ignora els comentaris fora de lloc, axí com comentaris sexuals, personals..."""

chat = client.chats.create( # Alg20: Crea una sessió de xat amb historial automàtic i instruccions personalitzades
    model="gemini-2.0-flash",  # Alg21: Configura el model de llenguatge (verifica que sigui compatible amb la versió de GenAI)
    config=genai.types.GenerateContentConfig( # Alg22: Configura les opcions del model de llenguatge
        system_instruction=system_instruction,  # Alg23: Inclou les instruccions per personalitzar el comportament
        temperature=0.7, # Alg24: Configura el nivell de creativitat del model (0 a 1, on 0 és més determinista)
        max_output_tokens=200 # Alg25: Configura la longitud màxima de la resposta generada
    )
)

# ==============================
# EXTRAURE INFORMACIÓ DE LA PÀGINA WEB (web scrapping)
# ==============================

url = "https://aborrego.inscastellbisbal.net/ipop/" # Alg26: URL de la pàgina web de la qual es vol extreure informació

response = requests.get(url) # Alg27: Realitza una petició GET per obtenir el contingut HTML de la pàgina

if response.status_code == 200: # Alg28: Comprova si la petició HTTP ha estat exitosa (codi 200)
    soup = BeautifulSoup(response.text, "html.parser")  # Alg29: Analitza el contingut HTML amb BeautifulSoup


    text_complet = soup.get_text(separator="\n", strip=True) # Alg30: Extreu tot el text visible de la pàgina

    print("📌 TEXT COMPLET DE LA PÀGINA:\n")
    print(text_complet) # Alg31: Mostra el text complet extret de la pàgina
    print("\n" + "="*80 + "\n")

    print("🔗 ENLLAÇOS TROBATS A LA PÀGINA:\n")
    for link in soup.find_all("a", href=True): # Alg32: Busca tots els enllaços de la pàgina
        print(link["href"])

    print("\n" + "="*80 + "\n")

    print("📝 ENCAPÇALAMENTS TROBATS:\n")
    for header in soup.find_all(["h1", "h2", "h3", "h4", "h5", "h6"]): # Alg34: Extreu tots els encapçalaments (h1-h6)
        print(f"{header.name.upper()}: {header.text}") # Alg35: Mostra el tipus d'encapçalament i el seu text
else:  # Alg36: Gestió d'error si la petició no ha estat exitosa
    print(f"⚠️ Error carregant la pàgina (Codi {response.status_code})") # Alg37: Mostra el codi d'error de la petició

# ==============================
# BUCLE DEL XAT
# ==============================

from flask import Flask, request, jsonify
from flask_cors import CORS  # Importa Flask-CORS
from pyngrok import ngrok

app = Flask(__name__) # Alg38: Crea una instància de l'aplicació Flask
CORS(app)  # Alg39: Activa CORS per permetre peticions des de diferents orígens

ngrok.set_auth_token("2uTpEJU6jYqOIOXrL4NDYFpSu8R_4stuSzXJ3Bv64N5rr5auN") # Alg40: Configura el token d'autenticació per a Ngrok


# Iniciar Ngrok i exposar el servidor
public_url = ngrok.connect(5000) # Alg41: Exposa l'aplicació Flask a través d'Ngrok a la porta 5000
print("🌍 URL pública del backend:", public_url) # Alg42: Mostra la URL pública per accedir al servidor

@app.route("/chat", methods=["POST"]) # Alg43: Defineix la ruta '/chat' per a les peticions POST
def chat_route():# Alg44: Funció que gestiona la petició del xat
    data = request.get_json() # Alg45: Obté les dades JSON enviades pel frontend
    message = data.get("message", "") # Alg46: Extreu el missatge del JSON

    try:
        response = chat.send_message(message) # Alg47: Envia el missatge al model GenAI
        return jsonify({"response": response.text.strip()}) # Alg48: Retorna la resposta generada pel model
    except Exception as e: # Alg49: Captura errors durant la comunicació amb GenAI
        print(f"⚠️ Error en la comunicació amb Gemini: {e}")  # Alg50: Mostra el missatge d'error
        return jsonify({"response": "S'ha produït un error. Torna-ho a intentar més tard."}) # Alg51: Resposta d'error al frontend

if __name__ == "__main__": # Alg52: Condició per a executar el servidor si el script es llanci directament
    print("🔥 Servidor en funcionament! Usa aquesta URL en el teu frontend:") # Alg53: Mostra un missatge indicant que el servidor està actiu
    app.run(port=5000) # Alg54: Inicia el servidor Flask a la porta 5000