{"id":2210,"date":"2026-02-09T12:42:12","date_gmt":"2026-02-09T12:42:12","guid":{"rendered":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2210"},"modified":"2026-04-27T07:02:18","modified_gmt":"2026-04-27T07:02:18","slug":"integracio-amb-millores-funcionals-i-estetiques-del-frontend","status":"publish","type":"page","link":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2210","title":{"rendered":"Integraci\u00f3 amb millores funcionals i est\u00e8tiques del FrontEnd"},"content":{"rendered":"\n

QU\u00c8 HEM FET<\/h3>\n\n\n\n

Hem millorat la web de la LAN Party perqu\u00e8 es vegi millor i funcioni millor. Aquests s\u00f3n els canvis principals:<\/p>\n\n\n\n

Coses noves que hem afegit:<\/strong><\/p>\n\n\n\n

Un compte enrere que mostra els dies, hores i minuts que falten per a la LAN Party. S’actualitza sol cada segon.<\/p>\n\n\n\n

Un mapa de la sala fet amb codi, on es veu on \u00e9s la zona de PC, les consoles, el bar i el WC.<\/p>\n\n\n\n

Una secci\u00f3 de preguntes freq\u00fcents on pots clicar cada pregunta per veure la resposta. Les altres es tanquen soles.<\/p>\n\n\n\n

Un Xatbot amb intel\u00b7lig\u00e8ncia artificial on pots preguntar qualsevol cosa de l’event i et respon en catal\u00e0.<\/p>\n\n\n\n

Un men\u00fa que sempre es veu a dalt de la p\u00e0gina encara que baixes amb el ratol\u00ed.<\/p>\n\n\n\n

PER QU\u00c8 HO HEM FET AIX\u00cd<\/h3>\n\n\n\n

El fons \u00e9s fosc i els colors s\u00f3n ne\u00f3n perqu\u00e8 les LAN Parties es fan amb poca llum i un fons blanc faria mal als ulls.<\/p>\n\n\n\n

Hem posat el compte enrere perqu\u00e8 quan la gent veu els segons passar t\u00e9 m\u00e9s ganes d’apuntar-se.<\/p>\n\n\n\n

Hem posat el men\u00fa fix perqu\u00e8 la p\u00e0gina \u00e9s llarga i sin\u00f3 hauries de pujar fins a dalt cada vegada per canviar de secci\u00f3.<\/p>\n\n\n\n

Hem posat la FAQ perqu\u00e8 la gent sempre pregunta el mateix i aix\u00ed troben la resposta sols sense haver d’escriure al Xatbot.<\/p>\n\n\n\n

<\/p>\n\n\n\n

# ==========================================
# 1. INSTAL\u00b7LACI\u00d3
# ==========================================
import subprocess
subprocess.run([“pip”, “install”, “-q”, “-U”, “google-genai”, “flask-cors”, “pyngrok”, “beautifulsoup4”, “requests”], check=False)
subprocess.run([“pip”, “install”, “requests==2.32.4”], check=False)

# ==========================================
# 2. NETEJA I DEPEND\u00c8NCIES
# ==========================================
import os, time, json, threading
os.system(“pkill -f ngrok”)

from flask import Flask, request, jsonify
from flask_cors import CORS
from google import genai
from google.colab import userdata
from pyngrok import ngrok

# ==========================================
# 3. C\u00c0RREGA DE CONTEXT
# ==========================================
def carregar_dades():
docs = [‘Lanparty.json’, ‘Faq.json’, ‘Normativa.json’, ‘dades_party.json’]
resum = “”
for d in docs:
if os.path.exists(d):
with open(d, ‘r’, encoding=’utf-8′) as f:
resum += f.read()[:500]
return resum

# ==========================================
# 4. CONFIGURACI\u00d3 GEMINI
# ==========================================
API_KEY = userdata.get(“GOOGLE_API_KEY”)
client = genai.Client(api_key=API_KEY)

def init_xatbot():
return client.chats.create(
model=”gemini-2.5-flash”,
config=genai.types.GenerateContentConfig(
system_instruction=(
f”Ets Xatbot de la LAN Party Castellbisbal. “
f”Context: {carregar_dades()}. “
f”Estil gamer, catal\u00e0, breu i divertit.”
)
)
)

chat_session = init_xatbot()

# ==========================================
# 5. FLASK
# ==========================================
app = Flask(__name__)
CORS(app) # \u2190 Permet que el teu HTML extern pugui connectar

@app.route(‘\/chat’, methods=[‘POST’])
def handle_chat():
global chat_session
try:
user_msg = request.json.get(“message”, “”)
if not user_msg.strip():
return jsonify({“reply”: “Escriu alguna cosa! \ud83d\udc7e”})
response = chat_session.send_message(user_msg)
return jsonify({“reply”: response.text.strip()})
except Exception as e:
print(f”Error: {e}”)
chat_session = init_xatbot()
return jsonify({“reply”: “S’ha reiniciat la connexi\u00f3. Torna a provar! \ud83d\udd0c”})

# Ruta de comprovaci\u00f3 \u2014 el frontend la usa per saber si el servidor est\u00e0 actiu
@app.route(‘\/chat’, methods=[‘GET’])
def health_check():
return jsonify({“status”: “online”}), 200

# ==========================================
# 6. NGROK
# ==========================================
NGROK_TOKEN = userdata.get(“NGROK_TOKEN”)
ngrok.set_auth_token(NGROK_TOKEN)
ngrok.kill()
time.sleep(1)

public_url = ngrok.connect(5000).public_url

print(“=” * 55)
print(“\u2705 SERVIDOR ACTIU”)
print(f”\ud83c\udf10 URL: {public_url}”)
print(“=” * 55)
print(“\ud83d\udccb Copia aquesta l\u00ednia al teu fitxer HTML:”)
print(f’ const NGROK_URL = “{public_url}”;’)
print(“=” * 55)
print(“\u26a0\ufe0f No tanquis aquesta cel\u00b7la de Colab!”)

# ==========================================
# 7. ARRANCAR FLASK EN SEGON PLA
# ==========================================
def run_flask():
app.run(port=5000, use_reloader=False, debug=False)

t = threading.Thread(target=run_flask, daemon=True)
t.start()<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

QU\u00c8 HE APR\u00c8S JO<\/h3>\n\n\n\n

El que m\u00e9s em va costar va ser el compte enrere, perqu\u00e8 al principi sortien n\u00fameros negatius. Ho vaig arreglar posant una condici\u00f3 que comprova si la data ja ha passat.<\/p>\n\n\n\n

Tamb\u00e9 em feia por fer el mapa, per\u00f2 vaig descobrir que SVG \u00e9s molt semblant a HTML i no era tan dif\u00edcil com semblava.<\/p>\n\n\n\n

He apr\u00e8s a canviar colors de tota una p\u00e0gina tocant un sol lloc del codi, a fer animacions sense JavaScript i a connectar una intel\u00b7lig\u00e8ncia artificial a una web real.<\/p>\n\n\n\n

Resultat<\/strong><\/p>\n\n\n\n