Hugging Face's logo

Spaces:
NEXUS-TEAM
/
nexus-api
Sleeping

App Files Community
nexus-api / interface_nexus_connect_e.html
gaya2604's picture
gaya2604
Upload 2 files
b5f41c1 verified
Raw
History Blame Contribute Delete
26.7 kB
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NEXUS PRIME — IA de Priorisation</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
 :root {
 --bg: #06060f;
 --surface: #0e0e1f;
 --card: #12122a;
 --border: rgba(255,255,255,0.07);
 --indigo: #6366f1;
 --cyan: #22d3ee;
 --violet: #a855f7;
 --text: #f1f1f8;
 --muted: #8b8ba8;
 --red: #f43f5e;
 --orange: #f97316;
 --green: #10b981;
 }
 * { margin: 0; padding: 0; box-sizing: border-box; }
 html { scroll-behavior: smooth; }
 body {
 background: var(--bg);
 color: var(--text);
 font-family: 'Roboto', sans-serif;
 font-size: 16px;
 overflow-x: hidden;
 }
 h1, h2, h3, h4, .nav-logo, .stat-num, .step-num, .result-val, .team-name, .team-avatar, .footer-logo {
 font-family: 'Poppins', sans-serif;
 }
 body::before {
 content: '';
 position: fixed;
 inset: 0;
 background:
 radial-gradient(ellipse 80% 50% at 20% 10%, rgba(99,102,241,0.12) 0%, transparent 60%),
 radial-gradient(ellipse 60% 40% at 80% 80%, rgba(168,85,247,0.10) 0%, transparent 60%),
 radial-gradient(ellipse 40% 30% at 60% 30%, rgba(34,211,238,0.07) 0%, transparent 50%);
 pointer-events: none;
 z-index: 0;
 }
 nav {
 position: fixed;
 top: 0; left: 0; right: 0;
 z-index: 100;
 padding: 20px 60px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 backdrop-filter: blur(20px);
 background: rgba(6,6,15,0.6);
 border-bottom: 1px solid var(--border);
 }
 .nav-logo {
 font-weight: 800;
 font-size: 1.4rem;
 letter-spacing: 0.1em;
 background: linear-gradient(90deg, var(--indigo), var(--cyan));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 }
 .nav-badge {
 font-size: 0.65rem;
 font-weight: 500;
 color: var(--muted);
 letter-spacing: 0.2em;
 text-transform: uppercase;
 border: 1px solid var(--border);
 padding: 4px 10px;
 border-radius: 20px;
 margin-left: 12px;
 -webkit-text-fill-color: var(--muted);
 }
 .nav-links {
 display: flex;
 gap: 36px;
 list-style: none;
 }
 .nav-links a {
 color: var(--muted);
 text-decoration: none;
 font-size: 0.9rem;
 font-weight: 400;
 transition: color 0.2s;
 }
 .nav-links a:hover { color: var(--text); }
 .nav-cta {
 background: linear-gradient(135deg, var(--indigo), var(--violet));
 color: white !important;
 padding: 9px 22px;
 border-radius: 8px;
 font-weight: 500 !important;
 font-size: 0.88rem !important;
 transition: opacity 0.2s !important;
 }
 .nav-cta:hover { opacity: 0.85; color: white !important; }
 .hero {
 position: relative;
 z-index: 1;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 padding: 120px 40px 80px;
 }
 .hero-eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background: rgba(99,102,241,0.1);
 border: 1px solid rgba(99,102,241,0.3);
 border-radius: 30px;
 padding: 6px 16px;
 font-size: 0.8rem;
 color: var(--indigo);
 letter-spacing: 0.08em;
 text-transform: uppercase;
 font-weight: 500;
 margin-bottom: 32px;
 animation: fadeUp 0.6s ease both;
 }
 .hero-eyebrow::before {
 content: '';
 width: 6px; height: 6px;
 background: var(--cyan);
 border-radius: 50%;
 animation: pulse 2s infinite;
 }
 @keyframes pulse {
 0%, 100% { opacity: 1; transform: scale(1); }
 50% { opacity: 0.5; transform: scale(0.7); }
 }
 .hero h1 {
 font-weight: 800;
 font-size: clamp(3rem, 8vw, 6.5rem);
 line-height: 1.0;
 letter-spacing: -0.02em;
 margin-bottom: 24px;
 animation: fadeUp 0.6s 0.1s ease both;
 }
 .hero h1 span {
 background: linear-gradient(135deg, var(--indigo) 0%, var(--cyan) 60%, var(--violet) 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 }
 .hero-sub {
 max-width: 600px;
 font-size: 1.15rem;
 color: var(--muted);
 line-height: 1.7;
 margin-bottom: 48px;
 font-weight: 300;
 animation: fadeUp 0.6s 0.2s ease both;
 }
 .hero-buttons {
 display: flex;
 gap: 14px;
 justify-content: center;
 flex-wrap: wrap;
 animation: fadeUp 0.6s 0.3s ease both;
 }
 .btn-primary {
 background: linear-gradient(135deg, var(--indigo), var(--violet));
 color: white;
 padding: 14px 32px;
 border-radius: 10px;
 font-size: 0.95rem;
 font-weight: 500;
 text-decoration: none;
 transition: transform 0.2s, box-shadow 0.2s;
 box-shadow: 0 0 30px rgba(99,102,241,0.3);
 }
 .btn-primary:hover {
 transform: translateY(-2px);
 box-shadow: 0 0 50px rgba(99,102,241,0.4);
 }
 .btn-ghost {
 background: transparent;
 color: var(--muted);
 padding: 14px 32px;
 border-radius: 10px;
 font-size: 0.95rem;
 font-weight: 400;
 text-decoration: none;
 border: 1px solid var(--border);
 transition: border-color 0.2s, color 0.2s;
 }
 .btn-ghost:hover { border-color: rgba(255,255,255,0.2); color: var(--text); }
 @keyframes fadeUp {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
 }
 .stats {
 position: relative;
 z-index: 1;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 1px;
 background: var(--border);
 border-top: 1px solid var(--border);
 border-bottom: 1px solid var(--border);
 }
 .stat {
 background: var(--bg);
 padding: 48px 32px;
 text-align: center;
 }
 .stat-num {
 font-size: 2.8rem;
 font-weight: 800;
 background: linear-gradient(135deg, var(--indigo), var(--cyan));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 line-height: 1;
 margin-bottom: 8px;
 }
 .stat-label {
 font-size: 0.85rem;
 color: var(--muted);
 font-weight: 300;
 letter-spacing: 0.03em;
 }
 section {
 position: relative;
 z-index: 1;
 padding: 120px 60px;
 max-width: 1200px;
 margin: 0 auto;
 }
 .section-eyebrow {
 font-size: 0.78rem;
 text-transform: uppercase;
 letter-spacing: 0.15em;
 color: var(--indigo);
 font-weight: 500;
 margin-bottom: 16px;
 }
 .section-title {
 font-size: clamp(2rem, 4vw, 3rem);
 font-weight: 700;
 line-height: 1.2;
 margin-bottom: 20px;
 }
 .section-sub {
 color: var(--muted);
 font-size: 1.05rem;
 line-height: 1.7;
 max-width: 540px;
 font-weight: 300;
 }
 .demo-section {
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 24px;
 padding: 60px;
 margin-top: 48px;
 position: relative;
 overflow: hidden;
 }
 .demo-section::before {
 content: '';
 position: absolute;
 top: -100px; right: -100px;
 width: 300px; height: 300px;
 background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
 pointer-events: none;
 }
 .demo-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 48px;
 align-items: start;
 }
 .demo-label {
 font-size: 0.78rem;
 text-transform: uppercase;
 letter-spacing: 0.12em;
 color: var(--muted);
 font-weight: 500;
 margin-bottom: 12px;
 display: block;
 }
 .demo-textarea {
 width: 100%;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 10px;
 padding: 16px 20px;
 color: var(--text);
 font-family: 'Roboto', sans-serif;
 font-size: 0.95rem;
 resize: none;
 height: 120px;
 line-height: 1.6;
 transition: border-color 0.2s;
 outline: none;
 }
 .demo-textarea:focus { border-color: rgba(99,102,241,0.5); }
 .demo-btn {
 margin-top: 14px;
 width: 100%;
 background: linear-gradient(135deg, var(--indigo), var(--violet));
 color: white;
 border: none;
 padding: 14px;
 border-radius: 10px;
 font-size: 0.95rem;
 font-weight: 500;
 cursor: pointer;
 font-family: 'Roboto', sans-serif;
 transition: opacity 0.2s, transform 0.2s;
 }
 .demo-btn:hover { opacity: 0.85; transform: translateY(-1px); }
 .demo-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 .demo-result { display: none; }
 .demo-result.visible { display: block; }
 .result-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 24px;
 margin-bottom: 12px;
 }
 .result-row {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 10px 0;
 border-bottom: 1px solid var(--border);
 }
 .result-row:last-child { border-bottom: none; padding-bottom: 0; }
 .result-key { font-size: 0.82rem; color: var(--muted); font-weight: 400; }
 .result-val {
 font-size: 0.95rem;
 font-weight: 700;
 }
 .score-bar {
 height: 4px;
 background: var(--border);
 border-radius: 4px;
 margin-top: 20px;
 overflow: hidden;
 }
 .score-fill {
 height: 100%;
 border-radius: 4px;
 background: linear-gradient(90deg, var(--indigo), var(--cyan));
 transition: width 0.8s ease;
 }
 .steps {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;
 margin-top: 64px;
 }
 .step {
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 16px;
 padding: 36px 32px;
 transition: border-color 0.3s, transform 0.3s;
 position: relative;
 overflow: hidden;
 }
 .step::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 2px;
 background: linear-gradient(90deg, var(--indigo), var(--cyan));
 opacity: 0;
 transition: opacity 0.3s;
 }
 .step:hover { border-color: rgba(99,102,241,0.3); transform: translateY(-4px); }
 .step:hover::before { opacity: 1; }
 .step-num {
 font-size: 3rem;
 font-weight: 800;
 color: rgba(99,102,241,0.15);
 line-height: 1;
 margin-bottom: 20px;
 }
 .step h3 {
 font-size: 1.15rem;
 font-weight: 700;
 margin-bottom: 12px;
 }
 .step p { color: var(--muted); font-size: 0.9rem; line-height: 1.7; font-weight: 300; }
 .domains-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 margin-bottom: 48px;
 }
 .domains-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
 }
 .domain-card {
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 14px;
 padding: 28px;
 display: flex;
 align-items: flex-start;
 gap: 16px;
 transition: transform 0.2s, border-color 0.2s;
 cursor: default;
 }
 .domain-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.12); }
 .domain-icon {
 font-size: 2rem;
 min-width: 48px;
 height: 48px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--surface);
 border-radius: 10px;
 border: 1px solid var(--border);
 }
 .domain-info h4 {
 font-size: 1rem;
 font-weight: 700;
 margin-bottom: 6px;
 }
 .domain-info p { color: var(--muted); font-size: 0.82rem; line-height: 1.5; font-weight: 300; }
 .domain-badge {
 margin-top: 10px;
 display: inline-block;
 font-size: 0.7rem;
 padding: 3px 10px;
 border-radius: 20px;
 font-weight: 500;
 letter-spacing: 0.05em;
 }
 .badge-red { background: rgba(244,63,94,0.12); color: var(--red); }
 .badge-orange { background: rgba(249,115,22,0.12); color: var(--orange); }
 .badge-indigo { background: rgba(99,102,241,0.12); color: var(--indigo); }
 .badge-cyan { background: rgba(34,211,238,0.12); color: var(--cyan); }
 .badge-violet { background: rgba(168,85,247,0.12); color: var(--violet); }
 .badge-green { background: rgba(16,185,129,0.12); color: var(--green); }
 .tech-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 margin-top: 40px;
 }
 .tech-pill {
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 30px;
 padding: 10px 20px;
 font-size: 0.85rem;
 color: var(--muted);
 display: flex;
 align-items: center;
 gap: 8px;
 transition: border-color 0.2s, color 0.2s;
 }
 .tech-pill:hover { border-color: rgba(255,255,255,0.15); color: var(--text); }
 .tech-dot {
 width: 6px; height: 6px;
 border-radius: 50%;
 background: var(--indigo);
 }
 .team-grid {
 display: flex;
 gap: 16px;
 margin-top: 48px;
 flex-wrap: wrap;
 }
 .team-card {
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: 14px;
 padding: 28px;
 flex: 1;
 min-width: 180px;
 text-align: center;
 }
 .team-avatar {
 width: 56px; height: 56px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--indigo), var(--violet));
 margin: 0 auto 14px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 800;
 font-size: 1.1rem;
 }
 .team-name {
 font-weight: 700;
 font-size: 0.95rem;
 margin-bottom: 4px;
 }
 .team-role { font-size: 0.78rem; color: var(--muted); font-weight: 300; }
 footer {
 position: relative;
 z-index: 1;
 border-top: 1px solid var(--border);
 padding: 48px 60px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 .footer-logo {
 font-weight: 800;
 font-size: 1.2rem;
 background: linear-gradient(90deg, var(--indigo), var(--cyan));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 }
 .footer-copy { font-size: 0.82rem; color: var(--muted); font-weight: 300; }
 .reveal {
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.7s ease, transform 0.7s ease;
 }
 .reveal.visible {
 opacity: 1;
 transform: translateY(0);
 }
</style>
</head>
<body>
<nav>
 <div style="display:flex;align-items:center">
 <span class="nav-logo">NEXUS</span>
 <span class="nav-badge">v8.1</span>
 </div>
 <ul class="nav-links">
 <li><a href="#demo">Démo</a></li>
 <li><a href="#fonctionnement">Fonctionnement</a></li>
 <li><a href="#domaines">Domaines</a></li>
 <li><a href="#equipe">Équipe</a></li>
 <li><a href="#demo" class="nav-cta">Tester l'IA →</a></li>
 </ul>
</nav>
<div class="hero">
 <div class="hero-eyebrow">Projet Scolaire · IA &amp; Machine Learning</div>
 <h1>L'intelligence au service<br><span>de la priorité</span></h1>
 <p class="hero-sub">NEXUS est un moteur d'IA qui analyse et priorise automatiquement les tickets d'urgence — médical, sécurité, infrastructure — en temps réel.</p>
 <div class="hero-buttons">
 <a href="#demo" class="btn-primary">Voir la démo live</a>
 <a href="#fonctionnement" class="btn-ghost">Comment ça marche ?</a>
 </div>
</div>
<div class="stats">
 <div class="stat reveal">
 <div class="stat-num">100%</div>
 <div class="stat-label">Précision sur stress-test</div>
 </div>
 <div class="stat reveal">
 <div class="stat-num">2 075</div>
 <div class="stat-label">Tickets analysés</div>
 </div>
 <div class="stat reveal">
 <div class="stat-num">7</div>
 <div class="stat-label">Domaines couverts</div>
 </div>
 <div class="stat reveal">
 <div class="stat-num">10/10</div>
 <div class="stat-label">Score max détectable</div>
 </div>
</div>
<section id="demo" style="padding-top:120px">
 <div class="reveal">
 <div class="section-eyebrow">Démo interactive</div>
 <h2 class="section-title">Testez NEXUS<br>en direct</h2>
 <p class="section-sub">Entrez un ticket ci-dessous et observez l'IA hébergée sur Google Cloud analyser et attribuer un score de priorité.</p>
 </div>
 <div class="demo-section reveal">
 <div class="demo-grid">
 <div>
 <span class="demo-label">Décrivez votre urgence</span>
 <textarea class="demo-textarea" id="ticketInput" placeholder="Ex : Accident de la route avec deux blessés graves à l'intersection..."></textarea>
 <button class="demo-btn" id="btnAnalyze" onclick="analyzeTicket()">⚡ Analyser avec l'IA</button>
 </div>
 <div>
 <span class="demo-label">Résultat de l'analyse Google Cloud</span>
 <div id="demoPlaceholder" style="background:var(--surface);border:1px dashed var(--border);border-radius:12px;padding:40px;text-align:center;color:var(--muted);font-size:0.88rem;line-height:1.8">
 Cliquez sur <strong style="color:var(--text)">Analyser</strong> pour interroger<br>l'API sur le Cloud en temps réel.
 </div>
<div class="demo-result" id="demoResult">
 <div class="result-card">
 <div class="result-row">
 <span class="result-key">Service ciblé</span>
 <span class="result-val" id="resDomaine">—</span>
 </div>
 <div class="result-row">
 <span class="result-key">Niveau d'Urgence</span>
 <span class="result-val" id="resPriorite">—</span>
 </div>
 <div class="result-row" id="rowFriction" style="display:none; flex-direction:column; align-items:flex-start; gap:8px;">
 <span class="result-key" style="color:var(--orange)">⚠️ Données manquantes (Friction)</span>
 <span class="result-val" id="resQuestion" style="font-size:0.85rem; font-style:italic; font-weight:normal;">—</span>
 </div>
 </div>
 <div class="score-bar">
 <div class="score-fill" id="scoreBar" style="width:0%"></div>
 </div>
 <p style="font-size:0.75rem;color:var(--muted);margin-top:8px;text-align:right" id="scoreLabel"></p>
 </div>
 </div>
 </div>
 </div>
</section>
<section id="fonctionnement">
 <div class="reveal">
 <div class="section-eyebrow">Fonctionnement</div>
 <div style="display:flex;justify-content:space-between;align-items:flex-end">
 <h2 class="section-title">De la phrase<br>à la priorité</h2>
 <p class="section-sub">En trois étapes, NEXUS transforme un texte brut en décision structurée avec domaine, impact et niveau d'urgence.</p>
 </div>
 </div>
 <div class="steps">
 <div class="step reveal">
 <div class="step-num">01</div>
 <h3>Encodage sémantique</h3>
 <p>Le texte du ticket est converti en vecteur numérique dense via un modèle de Sentence Transformers multilingue, capturant le sens profond de la phrase.</p>
 </div>
 <div class="step reveal">
 <div class="step-num">02</div>
 <h3>Classification multi-sortie</h3>
 <p>Un Random Forest entraîné sur plus de 60 000 tickets prédit simultanément le domaine, l'impact et l'urgence du ticket.</p>
 </div>
 <div class="step reveal">
 <div class="step-num">03</div>
 <h3>Score de priorité</h3>
 <p>Les sorties sont combinées pour produire un score global (0 à 10). Les cas critiques (SMUR, crime en cours) sont forcés en priorité absolue.</p>
 </div>
 </div>
</section>
<section id="domaines" style="padding-top:0">
 <div class="reveal">
 <div class="section-eyebrow">Périmètre</div>
 <div class="domains-header">
 <h2 class="section-title">7 domaines,<br>une seule IA</h2>
 <p class="section-sub">NEXUS couvre l'ensemble du spectre des urgences, des services civils aux infrastructures IT.</p>
 </div>
 </div>
 <div class="domains-grid">
 <div class="domain-card reveal">
 <div class="domain-icon">🏥</div>
 <div class="domain-info">
 <h4>Médical</h4>
 <p>SMUR, psychiatrie, traumatologie, obstétrique, médecine de garde.</p>
 <span class="domain-badge badge-red">Critique</span>
 </div>
 </div>
 <div class="domain-card reveal">
 <div class="domain-icon">🚔</div>
 <div class="domain-info">
 <h4>Police</h4>
 <p>Crimes, délits, ordre public, sécurité routière, nuisances.</p>
 <span class="domain-badge badge-orange">Urgent</span>
 </div>
 </div>
 <div class="domain-card reveal">
 <div class="domain-icon">🚒</div>
 <div class="domain-info">
 <h4>Pompier</h4>
 <p>Incendies, accidents, opérations de secours diverses.</p>
 <span class="domain-badge badge-orange">Urgent</span>
 </div>
 </div>
 <div class="domain-card reveal">
 <div class="domain-icon">🖥️</div>
 <div class="domain-info">
 <h4>Infrastructure</h4>
 <p>Serveurs, datacenters, réseau LAN, connectivité télécom.</p>
 <span class="domain-badge badge-indigo">Technique</span>
 </div>
 </div>
 <div class="domain-card reveal">
 <div class="domain-icon">🔧</div>
 <div class="domain-info">
 <h4>Matériel</h4>
 <p>Bureautique, IT, services généraux, flotte de véhicules.</p>
 <span class="domain-badge badge-cyan">Support</span>
 </div>
 </div>
 <div class="domain-card reveal">
 <div class="domain-icon">🔐</div>
 <div class="domain-info">
 <h4>Accès</h4>
 <p>Comptes, droits, double authentification, VPN, accès distants.</p>
 <span class="domain-badge badge-violet">Sécurité</span>
 </div>
 </div>
 </div>
</section>
<section style="padding-top:0">
 <div class="reveal">
 <div class="section-eyebrow">Technologies</div>
 <h2 class="section-title">Stack technique</h2>
 </div>
 <div class="tech-grid">
 <div class="tech-pill reveal"><span class="tech-dot" style="background:var(--cyan)"></span>FastAPI</div>
 <div class="tech-pill reveal"><span class="tech-dot" style="background:var(--indigo)"></span>Google Cloud Platform (GCP)</div>
 <div class="tech-pill reveal"><span class="tech-dot" style="background:var(--violet)"></span>Ollama (LLM)</div>
 <div class="tech-pill reveal"><span class="tech-dot" style="background:var(--orange)"></span>Twilio (CPaaS)</div>
 <div class="tech-pill reveal"><span class="tech-dot" style="background:var(--green)"></span>Mistral AI</div>
 <div class="tech-pill reveal"><span class="tech-dot" style="background:var(--cyan)"></span>Docker</div>
 <div class="tech-pill reveal"><span class="tech-dot" style="background:var(--indigo)"></span>Python 3.10</div>
 </div>
</section>
<section id="equipe" style="padding-top:0">
 <div class="reveal">
 <div class="section-eyebrow">L'équipe</div>
 <h2 class="section-title">Derrière NEXUS</h2>
 <p class="section-sub">Projet réalisé dans le cadre d'un programme d'école d'ingénieur en informatique.</p>
 </div>
 <div class="team-grid">
 <div class="team-card reveal">
 <div class="team-avatar">G</div>
 <div class="team-name">Gaya</div>
 <div class="team-role">IA · Intégration · Backend</div>
 </div>
 <div class="team-card reveal">
 <div class="team-avatar">M2</div>
 <div class="team-name">Membre 2</div>
 <div class="team-role">Data Engineering</div>
 </div>
 <div class="team-card reveal">
 <div class="team-avatar">M3</div>
 <div class="team-name">Membre 3</div>
 <div class="team-role">Datasets · Annotation</div>
 </div>
 <div class="team-card reveal">
 <div class="team-avatar">M4</div>
 <div class="team-name">Membre 4</div>
 <div class="team-role">Validation · Tests</div>
 </div>
 <div class="team-card reveal">
 <div class="team-avatar">M5</div>
 <div class="team-name">Membre 5</div>
 <div class="team-role">Architecture · Documentation</div>
 </div>
 </div>
</section>
<footer>
 <span class="footer-logo">NEXUS PRIME</span>
 <span class="footer-copy">Projet scolaire · 2025–2026 · Tous droits réservés</span>
</footer>
<script>
<script>
const observer = new IntersectionObserver((entries) => {
 entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// Correction : Utilisation de la même IP GCP que le Dashboard
const API_URL = "http://35.199.168.248:7860/api/evaluer";
async function analyzeTicket() {
 const text = document.getElementById('ticketInput').value.trim();
 if (!text) return;
 const btn = document.getElementById('btnAnalyze');
 btn.innerHTML = '⏳ Connexion au serveur GCP...';
 btn.disabled = true;
 try {
 const response = await fetch(API_URL, {
 method: 'POST',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify({ description: text })
 });
 if (!response.ok) throw new Error("Erreur serveur API");
const data = await response.json();
document.getElementById('demoPlaceholder').style.display = 'none';
 const res = document.getElementById('demoResult');
 res.classList.add('visible');
 document.getElementById('resDomaine').textContent = data.domaine || "INCONNU";
let score = data.score || 0;
 let label = 'BAS';
 let color = 'var(--green)';
 let percentage = (score / 10) * 100;
 if(score >= 8) { label = 'CRITIQUE'; color = 'var(--red)'; }
 else if(score >= 5) { label = 'ÉLEVÉ'; color = 'var(--orange)'; }
 else if(score >= 3) { label = 'MOYEN'; color = 'var(--indigo)'; }
 document.getElementById('resPriorite').innerHTML = `<span style="color:${color};font-weight:800">${label}</span>`;
 document.getElementById('scoreLabel').textContent = `Score d'urgence IA : ${score}/10`;
const rowFriction = document.getElementById('rowFriction');
 if (data.friction && data.friction !== "COMPLET") {
 rowFriction.style.display = 'flex';
 document.getElementById('resQuestion').textContent = data.question_ia || "Veuillez préciser la situation.";
 } else {
 rowFriction.style.display = 'none';
 }
 setTimeout(() => {
 const scoreBar = document.getElementById('scoreBar');
 scoreBar.style.width = percentage + '%';
 scoreBar.style.background = `linear-gradient(90deg, ${color}, var(--cyan))`;
 }, 100);
 } catch (error) {
 console.error("Erreur de connexion:", error);
 alert("⚠️ Impossible de joindre l'API sur Google Cloud. Vérifiez que votre VM est allumée et que le port 7860 est bien ouvert.");
 } finally {
 btn.innerHTML = '⚡ Analyser avec l\'IA';
 btn.disabled = false;
 }
}
document.getElementById('ticketInput').addEventListener('keydown', (e) => {
 if (e.key === 'Enter' && e.ctrlKey) analyzeTicket();
});
</script>
</script>
</body>
</html>