Integrar el Xatbot
al Portal Web

# ==============================================================
# BACKEND: Servidor Flask + Intel·ligència Artificial (Google Gemini) - PORT 8000
# ==============================================================

import sys
print("🔄 Verificant i instal·lant llibreries necessàries...")
!{sys.executable} -m pip install -q flask flask-cors google-generativeai pyngrok
print("✅ Llibreries llestes per usar.")

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

app = Flask(__name__)
CORS(app)  # Permet peticions segures des del frontend extern

try:
    GEMINI_KEY = userdata.get('GEMINI_KEY')
    NGROK_TOKEN = userdata.get('NGROK_TOKEN')
    genai.configure(api_key=GEMINI_KEY)
    ngrok.set_auth_token(NGROK_TOKEN)
    print("🔑 Credencials carregades correctament des de Secrets.")
except Exception as e:
    print("❌ ERROR: Crea les claus 'GEMINI_KEY' i 'NGROK_TOKEN' a Colab Secrets.")

system_instruction = (
    "Eres el Asistente Virtual Oficial de la LAN Party 2026. "
    "Responde de forma amable y concisa sobre horarios, reglamentos e inscripciones."
)

model = genai.GenerativeModel(
    model_name='gemini-1.5-flash',
    system_instruction=system_instruction
)

@app.route('/chat', methods=['POST'])
def chat():
    data = request.json
    user_message = data.get('message', '')
    if not user_message:
        return jsonify({'response': 'No he rebut cap missatge.'}), 400
    try:
        response = model.generate_content(user_message)
        return jsonify({'response': response.text})
    except Exception as e:
        return jsonify({'response': 'Error temporal. Torna-ho a intentar.'}), 500

if __name__ == '__main__':
    try: ngrok.kill()
    except: pass
    public_url = ngrok.connect(8000)
    print(f"\n🌐 URL Pública del Frontend: {public_url}")
    app.run(port=8000, debug=False, use_reloader=False)

<!-- WIDGET: Cap clau API visible en aquest codi -->
<div id="chat-box" style="width:450px; height:650px; border:2px solid #2c3e50;
  border-radius:12px; display:flex; flex-direction:column; background:#fdfdfd;
  font-family:'Segoe UI',sans-serif; margin:auto; overflow:hidden;">

  <div style="background:#2c3e50; color:white; padding:15px; text-align:center;">
    🤖 Assistent LAN Party 2026
  </div>

  <div id="chat-messages" style="flex:1; padding:15px; overflow-y:auto;
    background:#f7f9fa; display:flex; flex-direction:column; gap:10px;">
    <div style="background:#e9ecef; padding:10px 14px; border-radius:15px 15px 15px 0;">
      Hola! Soc l'assistent de la LAN Party, en què et puc ajudar?
    </div>
  </div>

  <div style="padding:12px; background:#fff; border-top:1px solid #eee; display:flex; gap:8px;">
    <input type="text" id="user-input" placeholder="Escriu un missatge..."
      onkeypress="if(event.key==='Enter') sendMessage()"
      style="flex:1; padding:10px 14px; border-radius:20px; border:1px solid #ccc;">
    <button onclick="sendMessage()"
      style="background:#2c3e50; color:white; border:none;
        padding:10px 18px; border-radius:20px; cursor:pointer;">Enviar
    </button>
  </div>
</div>

<script>
// La URL apunta al backend Ngrok — CAP CLAU API AQUÍ
const API_URL = "https://cheryl-nonlacteous-alline.ngrok-free.dev/chat";

async function sendMessage() {
  const input = document.getElementById('user-input');
  const text = input.value.trim();
  if (!text) return;
  appendMessage(text, 'user');
  input.value = '';
  const loadId = appendMessage('Pensant...', 'bot-loading');
  try {
    const res = await fetch(API_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Ngrok-Skip-Browser-Warning': 'true' },
      body: JSON.stringify({ message: text })
    });
    const data = await res.json();
    document.getElementById(loadId).remove();
    appendMessage(data.response, 'bot');
  } catch (err) {
    document.getElementById(loadId).remove();
    appendMessage('Error de connexió amb el servidor.', 'error');
  }
}
</script>