FastAPI app

Dockerfile

@@ -0,0 +1,13 @@
+FROM python:3.11-slim
+
+RUN apt-get update && apt-get install -y ffmpeg && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+RUN mkdir -p data/audio
+
+EXPOSE 7860
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -3,61 +3,27 @@ title: Mimba NNH Collecte
 emoji: 🎙️
 colorFrom: purple
 colorTo: blue
-sdk: gradio
-sdk_version: 5.25.0
-python_version: "3.11"
-app_file: app.py
+sdk: docker
 pinned: true
 license: other
 ---
 
 # 🌍 Mimba — Collecte de traductions NNH
 
-Application de collecte de traductions et enregistrements audio Ngiemboon (NNH).
-Déployée sur HuggingFace Space dans le cadre du projet Mimba.
-
----
-
 ## 📜 Licence
 
 Copyright © 2026 Mimba (baounabaouna@gmail.com)
 
-Ce dataset, cette application et l'ensemble des données collectées
-(traductions NNH, enregistrements audio) sont protégés par le droit d'auteur.
-
-**Toute utilisation, reproduction, distribution ou modification nécessite
-l'approbation écrite explicite de l'auteur.**
+**Toute utilisation nécessite l'approbation écrite explicite de l'auteur.**
 
 ### ✅ Autorisé sans approbation
 - Consultation personnelle et recherche non publiée
 - Citation avec attribution dans des travaux académiques
 
-### ❌ Interdit sans approbation écrite préalable
-- Utilisation commerciale sous quelque forme que ce soit
-- Entraînement de modèles d'intelligence artificielle distribués publiquement
+### ❌ Interdit sans approbation écrite
+- Utilisation commerciale
+- Entraînement de modèles distribués publiquement
 - Redistribution des données, du code ou des audios
 - Intégration dans des produits ou services tiers
-- Modification et republication
-
-### 📬 Demande d'autorisation
-Pour toute demande d'utilisation, contactez :
-**baounabaouna@gmail.com**
-
-Précisez dans votre demande :
-- L'usage prévu (recherche, commercial, éducatif...)
-- L'organisation ou l'institution concernée
-- La durée et l'étendue de l'utilisation souhaitée
-
----
-
-## 🛠️ À propos du projet
-
-**Mimba** est un projet de traitement du langage naturel pour le **Ngiemboon (NNH)**,
-une langue Bantu du Cameroun parlée dans la région de l'Ouest.
-
-Cette application permet de :
-- Collecter des traductions NNH à partir d'une liste de mots/phrases français
-- Enregistrer des voix multiples pour chaque traduction
-- Constituer un dataset de qualité pour le fine-tuning de modèles NLP et TTS
 
-**Contact :** baounabaouna@gmail.com
+📬 **Contact :** baounabaouna@gmail.com

main.py

@@ -0,0 +1,478 @@
+"""
+Mimba NNH Collecte — Backend FastAPI
+"""
+import bcrypt, csv, io, json, os, secrets, shutil, tempfile, zipfile
+import datetime
+from pathlib import Path
+from typing import Optional
+
+from fastapi import FastAPI, Request, HTTPException, UploadFile, File, Depends
+from fastapi.responses import JSONResponse, FileResponse, StreamingResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
+
+# ── Config ───────────────────────────────────────────────────────
+DATA_DIR       = Path("data")
+AUDIO_DIR      = DATA_DIR / "audio"
+USERS_FILE     = DATA_DIR / "users.json"
+TRANS_FILE     = DATA_DIR / "translations.json"
+DATA_DIR.mkdir(exist_ok=True)
+AUDIO_DIR.mkdir(exist_ok=True)
+
+HF_TOKEN       = os.environ.get("HF_TOKEN", "")
+HF_REPO_ID     = os.environ.get("HF_BACKUP_REPO", "")
+ADMIN_PASSWORD = os.environ.get("ADMIN_PASSWORD", "")
+
+# Sessions en mémoire {token: {username, role, mode}}
+SESSIONS: dict = {}
+
+# ── Pydub optionnel ──────────────────────────────────────────────
+try:
+    from pydub import AudioSegment
+    HAS_PYDUB = True
+except ImportError:
+    HAS_PYDUB = False
+
+app = FastAPI(title="Mimba NNH Collecte")
+app.add_middleware(CORSMiddleware, allow_origins=["*"],
+                   allow_methods=["*"], allow_headers=["*"])
+
+# ================================================================
+# 💾  DONNÉES
+# ================================================================
+
+def load_users() -> dict:
+    if not USERS_FILE.exists():
+        default = {"admin": {
+            "password_hash": bcrypt.hashpw(ADMIN_PASSWORD.encode(), bcrypt.gensalt()).decode(),
+            "role": "admin", "mode": "edit",
+            "created_at": str(datetime.date.today()),
+        }}
+        save_users(default)
+        return default
+    return json.loads(USERS_FILE.read_text(encoding="utf-8"))
+
+def save_users(u: dict):
+    USERS_FILE.write_text(json.dumps(u, ensure_ascii=False, indent=2), encoding="utf-8")
+
+def load_trans() -> dict:
+    if not TRANS_FILE.exists():
+        return {}
+    return json.loads(TRANS_FILE.read_text(encoding="utf-8"))
+
+def save_trans(t: dict):
+    TRANS_FILE.write_text(json.dumps(t, ensure_ascii=False, indent=2), encoding="utf-8")
+
+def backup():
+    if not HF_TOKEN or not HF_REPO_ID:
+        return
+    try:
+        from huggingface_hub import HfApi, create_repo
+        api = HfApi()
+        try: create_repo(HF_REPO_ID, repo_type="dataset", token=HF_TOKEN,
+                         exist_ok=True, private=True)
+        except Exception: pass
+        for f in [USERS_FILE, TRANS_FILE]:
+            if f.exists():
+                api.upload_file(path_or_fileobj=str(f), path_in_repo=f.name,
+                                repo_id=HF_REPO_ID, repo_type="dataset", token=HF_TOKEN)
+    except Exception as e:
+        print(f"Backup error: {e}")
+
+# ================================================================
+# 🔐  AUTH
+# ================================================================
+
+def get_session(request: Request) -> Optional[dict]:
+    token = request.cookies.get("session_token") or request.headers.get("X-Token")
+    return SESSIONS.get(token)
+
+def require_auth(request: Request) -> dict:
+    s = get_session(request)
+    if not s:
+        raise HTTPException(401, "Non authentifié")
+    if s.get("mode") == "blocked":
+        raise HTTPException(403, "Compte bloqué")
+    return s
+
+def require_admin(request: Request) -> dict:
+    s = require_auth(request)
+    if s.get("role") != "admin":
+        raise HTTPException(403, "Réservé à l'admin")
+    return s
+
+# ================================================================
+# 🔊  AUDIO
+# ================================================================
+
+def to_mp3_mono(src_path: str) -> bytes:
+    if HAS_PYDUB:
+        try:
+            audio = AudioSegment.from_file(src_path)
+            audio = audio.set_channels(1).set_frame_rate(22050)
+            buf = io.BytesIO()
+            audio.export(buf, format="mp3", bitrate="64k")
+            return buf.getvalue()
+        except Exception as e:
+            print(f"Audio conv error: {e}")
+    with open(src_path, "rb") as f:
+        return f.read()
+
+# ================================================================
+# 📡  ROUTES API
+# ================================================================
+
+# ── Auth ─────────────────────────────────────────────────────────
+
+@app.post("/api/login")
+async def login(request: Request):
+    body = await request.json()
+    username = body.get("username", "").strip()
+    password = body.get("password", "")
+    users = load_users()
+    if username not in users:
+        raise HTTPException(401, "Identifiants incorrects")
+    u = users[username]
+    if u.get("mode") == "blocked":
+        raise HTTPException(403, "Compte bloqué")
+    if not bcrypt.checkpw(password.encode(), u["password_hash"].encode()):
+        raise HTTPException(401, "Identifiants incorrects")
+    token = secrets.token_hex(32)
+    SESSIONS[token] = {"username": username, "role": u["role"], "mode": u["mode"]}
+    resp = JSONResponse({"ok": True, "username": username,
+                         "role": u["role"], "mode": u["mode"]})
+    resp.set_cookie("session_token", token, httponly=True, samesite="lax")
+    return resp
+
+@app.post("/api/logout")
+async def logout(request: Request):
+    token = request.cookies.get("session_token")
+    if token and token in SESSIONS:
+        del SESSIONS[token]
+    resp = JSONResponse({"ok": True})
+    resp.delete_cookie("session_token")
+    return resp
+
+@app.get("/api/me")
+async def me(request: Request):
+    s = get_session(request)
+    if not s:
+        return JSONResponse({"authenticated": False})
+    return JSONResponse({"authenticated": True, **s})
+
+# ── Mots ─────────────────────────────────────────────────────────
+
+@app.get("/api/words")
+async def get_words(request: Request, filter: str = "all", page: int = 0,
+                    per_page: int = 20):
+    s = require_auth(request)
+    username = s["username"]
+    trans = load_trans()
+
+    items = []
+    for wid, w in trans.items():
+        nnh  = w.get("nnh_clean", "")
+        asgn = w.get("assigned_to")
+        auds = w.get("audio", {})
+        if filter == "mine"  and asgn != username: continue
+        if filter == "free"  and asgn is not None: continue
+        if filter == "done"  and not nnh: continue
+        if filter == "audio" and auds: continue
+        items.append({"id": wid, **w})
+
+    total = len(items)
+    start = page * per_page
+    page_items = items[start:start + per_page]
+    return JSONResponse({"items": page_items, "total": total,
+                         "page": page, "per_page": per_page,
+                         "total_pages": max(1, (total + per_page - 1) // per_page)})
+
+@app.post("/api/words/{wid}/take")
+async def take_word(wid: str, request: Request):
+    s = require_auth(request)
+    if s["mode"] != "edit":
+        raise HTTPException(403, "Mode lecture seule")
+    username = s["username"]
+    trans = load_trans()
+    if wid not in trans:
+        raise HTTPException(404, "Mot introuvable")
+    w = trans[wid]
+    if w.get("assigned_to") and w["assigned_to"] != username:
+        raise HTTPException(409, f"Déjà assigné à {w['assigned_to']}")
+    trans[wid]["assigned_to"] = username
+    trans[wid]["status"] = "assigned"
+    save_trans(trans)
+    return JSONResponse({"ok": True, "word": trans[wid]})
+
+@app.put("/api/words/{wid}/text")
+async def save_text(wid: str, request: Request):
+    s = require_auth(request)
+    if s["mode"] != "edit":
+        raise HTTPException(403, "Mode lecture seule")
+    username = s["username"]
+    body = await request.json()
+    nnh_text = body.get("nnh_clean", "").strip()
+    trans = load_trans()
+    if wid not in trans:
+        raise HTTPException(404, "Mot introuvable")
+    w = trans[wid]
+    if w.get("assigned_to") and w["assigned_to"] != username:
+        raise HTTPException(403, f"Assigné à {w['assigned_to']}")
+    if not w.get("assigned_to"):
+        trans[wid]["assigned_to"] = username
+    trans[wid]["nnh_clean"]     = nnh_text
+    trans[wid]["status"]        = "translated" if nnh_text else "assigned"
+    trans[wid]["translated_at"] = datetime.datetime.now().isoformat()
+    save_trans(trans)
+    backup()
+    return JSONResponse({"ok": True})
+
+@app.post("/api/words/{wid}/audio")
+async def save_audio(wid: str, request: Request,
+                     file: UploadFile = File(...)):
+    s = require_auth(request)
+    if s["mode"] != "edit":
+        raise HTTPException(403, "Mode lecture seule")
+    username = s["username"]
+    trans = load_trans()
+    if wid not in trans:
+        raise HTTPException(404, "Mot introuvable")
+    if not trans[wid].get("nnh_clean"):
+        raise HTTPException(400, "Texte NNH requis avant l'audio")
+
+    # Sauvegarder temporairement
+    with tempfile.NamedTemporaryFile(delete=False,
+             suffix=Path(file.filename or "audio.wav").suffix) as tmp:
+        tmp.write(await file.read())
+        tmp_path = tmp.name
+
+    # Convertir en MP3 mono
+    mp3_bytes = to_mp3_mono(tmp_path)
+    os.unlink(tmp_path)
+
+    filename = f"word_{wid}_{username}.mp3"
+    dest     = AUDIO_DIR / filename
+    dest.write_bytes(mp3_bytes)
+
+    if "audio" not in trans[wid]:
+        trans[wid]["audio"] = {}
+    trans[wid]["audio"][username] = f"audio/{filename}"
+    trans[wid]["status"] = "audio_ready"
+    save_trans(trans)
+    backup()
+    return JSONResponse({"ok": True, "file": filename})
+
+@app.get("/api/words/{wid}/audio/{username}")
+async def get_audio(wid: str, username: str, request: Request):
+    require_auth(request)
+    trans = load_trans()
+    if wid not in trans:
+        raise HTTPException(404)
+    apath = trans[wid].get("audio", {}).get(username)
+    if not apath:
+        raise HTTPException(404, "Audio introuvable")
+    fp = DATA_DIR / apath
+    if not fp.exists():
+        raise HTTPException(404, "Fichier manquant")
+    return FileResponse(str(fp), media_type="audio/mpeg")
+
+@app.get("/api/stats")
+async def stats(request: Request):
+    s = require_auth(request)
+    username = s["username"]
+    trans = load_trans()
+    total      = len(trans)
+    translated = sum(1 for w in trans.values() if w.get("nnh_clean"))
+    with_audio = sum(1 for w in trans.values() if w.get("audio"))
+    my_words   = sum(1 for w in trans.values() if w.get("assigned_to") == username)
+    my_done    = sum(1 for w in trans.values()
+                     if w.get("assigned_to") == username and w.get("nnh_clean"))
+    my_audio   = sum(1 for w in trans.values() if username in w.get("audio", {}))
+    return JSONResponse({"total": total, "translated": translated,
+                         "with_audio": with_audio, "my_words": my_words,
+                         "my_done": my_done, "my_audio": my_audio})
+
+# ── Admin ─────────────────────────────────────────────────────────
+
+@app.get("/api/admin/users")
+async def admin_users(request: Request):
+    require_admin(request)
+    users = load_users()
+    trans = load_trans()
+    result = []
+    for uname, u in users.items():
+        n_a = sum(1 for w in trans.values() if w.get("assigned_to") == uname)
+        n_t = sum(1 for w in trans.values()
+                  if w.get("assigned_to") == uname and w.get("nnh_clean"))
+        n_au= sum(1 for w in trans.values() if uname in w.get("audio", {}))
+        result.append({"username": uname, "role": u["role"],
+                       "mode": u["mode"], "created_at": u.get("created_at",""),
+                       "assigned": n_a, "translated": n_t, "audio": n_au})
+    return JSONResponse(result)
+
+@app.post("/api/admin/users")
+async def create_user(request: Request):
+    require_admin(request)
+    body = await request.json()
+    uname = body.get("username","").strip()
+    upass = body.get("password","")
+    umode = body.get("mode","edit")
+    if not uname or not upass:
+        raise HTTPException(400, "Nom et mot de passe requis")
+    if uname == "admin":
+        raise HTTPException(400, "Impossible de modifier admin ici")
+    users = load_users()
+    users[uname] = {
+        "password_hash": bcrypt.hashpw(upass.encode(), bcrypt.gensalt()).decode(),
+        "role": "user", "mode": umode,
+        "created_at": str(datetime.date.today()),
+    }
+    save_users(users)
+    return JSONResponse({"ok": True})
+
+@app.put("/api/admin/users/{uname}")
+async def update_user(uname: str, request: Request):
+    require_admin(request)
+    if uname == "admin":
+        raise HTTPException(400, "Impossible de modifier admin")
+    body = await request.json()
+    users = load_users()
+    if uname not in users:
+        raise HTTPException(404, "Utilisateur introuvable")
+    if "mode" in body:
+        users[uname]["mode"] = body["mode"]
+        # Invalider les sessions de cet utilisateur si bloqué
+        if body["mode"] == "blocked":
+            for tok, sess in list(SESSIONS.items()):
+                if sess.get("username") == uname:
+                    del SESSIONS[tok]
+    if "password" in body and body["password"]:
+        users[uname]["password_hash"] = bcrypt.hashpw(
+            body["password"].encode(), bcrypt.gensalt()).decode()
+    save_users(users)
+    return JSONResponse({"ok": True})
+
+@app.post("/api/admin/import")
+async def import_csv(request: Request, file: UploadFile = File(...)):
+    require_admin(request)
+    content = (await file.read()).decode("utf-8-sig")
+    reader  = csv.DictReader(io.StringIO(content))
+    trans   = load_trans()
+    count   = 0
+    for row in reader:
+        wid = str(row.get("id","")).strip().zfill(3)
+        if not wid or not row.get("fr_clean"): continue
+        if wid not in trans:
+            trans[wid] = {
+                "fr_clean":     row.get("fr_clean","").strip(),
+                "fr_original":  row.get("fr_original","").strip(),
+                "nnh_original": row.get("nnh_original","").strip(),
+                "nnh_clean": "", "assigned_to": None,
+                "translated_at": None, "status": "pending", "audio": {},
+            }
+            count += 1
+    save_trans(trans)
+    backup()
+    return JSONResponse({"ok": True, "imported": count})
+
+@app.post("/api/admin/words")
+async def add_word(request: Request):
+    require_admin(request)
+    body = await request.json()
+    if not body.get("fr_clean"):
+        raise HTTPException(400, "fr_clean requis")
+    trans = load_trans()
+    ids   = [int(k) for k in trans if k.isdigit()]
+    new_id= str(max(ids)+1 if ids else 1).zfill(3)
+    trans[new_id] = {
+        "fr_clean": body["fr_clean"].strip(),
+        "fr_original": body.get("fr_original","").strip(),
+        "nnh_original": body.get("nnh_original","").strip(),
+        "nnh_clean":"", "assigned_to":None,
+        "translated_at":None, "status":"pending", "audio":{},
+    }
+    save_trans(trans)
+    return JSONResponse({"ok": True, "id": new_id})
+
+@app.get("/api/admin/words")
+async def admin_words(request: Request, page: int = 0, per_page: int = 50):
+    require_admin(request)
+    trans = load_trans()
+    items = [{"id": k, **v} for k, v in trans.items()]
+    total = len(items)
+    start = page * per_page
+    return JSONResponse({
+        "items": items[start:start+per_page],
+        "total": total, "page": page,
+        "total_pages": max(1, (total+per_page-1)//per_page)
+    })
+
+@app.get("/api/admin/stats")
+async def admin_stats(request: Request):
+    require_admin(request)
+    trans = load_trans()
+    users = load_users()
+    total      = len(trans)
+    translated = sum(1 for w in trans.values() if w.get("nnh_clean"))
+    with_audio = sum(1 for w in trans.values() if w.get("audio"))
+    per_user   = []
+    for uname, u in users.items():
+        if u.get("role") == "admin": continue
+        n_a  = sum(1 for w in trans.values() if w.get("assigned_to") == uname)
+        n_t  = sum(1 for w in trans.values()
+                   if w.get("assigned_to") == uname and w.get("nnh_clean"))
+        n_au = sum(1 for w in trans.values() if uname in w.get("audio",{}))
+        per_user.append({"username": uname, "mode": u.get("mode"),
+                         "assigned": n_a, "translated": n_t, "audio": n_au})
+    return JSONResponse({"total": total, "translated": translated,
+                         "with_audio": with_audio, "per_user": per_user})
+
+@app.get("/api/admin/export/csv")
+async def export_csv(request: Request):
+    require_admin(request)
+    trans = load_trans()
+    buf   = io.StringIO()
+    w     = csv.writer(buf)
+    w.writerow(["id","fr_clean","fr_original","nnh_original","nnh_clean",
+                "assigned_to","translated_at","audio_files"])
+    for wid, wd in trans.items():
+        w.writerow([wid, wd.get("fr_clean",""), wd.get("fr_original",""),
+                    wd.get("nnh_original",""), wd.get("nnh_clean",""),
+                    wd.get("assigned_to",""), wd.get("translated_at",""),
+                    ";".join(wd.get("audio",{}).values())])
+    buf.seek(0)
+    return StreamingResponse(
+        io.BytesIO(buf.getvalue().encode("utf-8-sig")),
+        media_type="text/csv",
+        headers={"Content-Disposition": "attachment; filename=nnh_dataset.csv"}
+    )
+
+@app.get("/api/admin/export/zip")
+async def export_zip(request: Request):
+    require_admin(request)
+    trans   = load_trans()
+    zip_buf = io.BytesIO()
+    with zipfile.ZipFile(zip_buf, "w", zipfile.ZIP_DEFLATED) as zf:
+        # CSV
+        csv_buf = io.StringIO()
+        w = csv.writer(csv_buf)
+        w.writerow(["id","fr_clean","nnh_clean","user","audio_file"])
+        for wid, wd in trans.items():
+            for uname, apath in wd.get("audio",{}).items():
+                w.writerow([wid, wd.get("fr_clean",""), wd.get("nnh_clean",""),
+                            uname, Path(apath).name])
+        zf.writestr("translations.csv",
+                    csv_buf.getvalue().encode("utf-8-sig"))
+        # Audio
+        if AUDIO_DIR.exists():
+            for mp3 in AUDIO_DIR.glob("*.mp3"):
+                zf.write(mp3, f"audio/{mp3.name}")
+    zip_buf.seek(0)
+    return StreamingResponse(
+        zip_buf,
+        media_type="application/zip",
+        headers={"Content-Disposition": "attachment; filename=nnh_export.zip"}
+    )
+
+# ── Fichiers statiques ────────────────────────────────────────────
+app.mount("/", StaticFiles(directory="static", html=True), name="static")

requirements.txt

@@ -1,4 +1,6 @@
-gradio>=5.0.0
+fastapi
+uvicorn[standard]
 bcrypt
+python-multipart
 pydub
-huggingface_hub>=0.20.0
+huggingface_hub

sample_words.csv

@@ -9,7 +9,7 @@
 008,De rien,De rien,
 009,S'il vous plaît,S'il vous plaît,
 010,Pardon,Pardon,
-011,Je m'appelle,Je m'appelle,
+011,Je m'appelle...,Je m'appelle...,
 012,Comment tu t'appelles ?,Comment tu t'appelles ?,
 013,D'où viens-tu ?,D'où viens-tu ?,
 014,Quel âge as-tu ?,Quel âge as-tu ?,
@@ -48,7 +48,7 @@
 047,Je ne comprends pas,Je ne comprends pas,
 048,Tu peux répéter ?,Tu peux répéter ?,
 049,Qu'est-ce que c'est ?,Qu'est-ce que c'est ?,
-050,Comment dit-on... en Ngiemboon ?,Comment dit-on... en Ngiemboon ?,
+050,Comment dit-on en Ngiemboon ?,Comment dit-on en Ngiemboon ?,
 051,Mon père,Mon père,
 052,Ma mère,Ma mère,
 053,Mon frère,Mon frère,

static/app.js

@@ -0,0 +1,591 @@
+/* ================================================================
+   Mimba NNH Collecte — Frontend
+================================================================ */
+
+// ── État global ──────────────────────────────────────────────────
+const State = {
+  user:        null,   // {username, role, mode}
+  filter:      "all",
+  page:        0,
+  totalPages:  1,
+  selectedWid: null,
+  adminPage:   0,
+  mediaRec:    null,
+  audioBlobs:  [],
+  recordedBlob:null,
+};
+
+// ── Utilitaires ──────────────────────────────────────────────────
+const $ = id => document.getElementById(id);
+
+function showPage(name) {
+  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
+  $(`page-${name}`).classList.add('active');
+}
+
+function notify(elId, msg, type = 'ok') {
+  const el = $(elId);
+  if (!el) return;
+  el.className = `notif notif-${type} show`;
+  el.textContent = msg;
+  if (type === 'ok') setTimeout(() => el.classList.remove('show'), 3000);
+}
+
+function progressBar(current, total) {
+  if (!total) return '<span style="color:var(--text-dim)">—</span>';
+  const pct = Math.round(current / total * 100);
+  return `
+    <div style="display:flex;align-items:center;gap:8px;">
+      <div class="progress-wrap" style="flex:1;">
+        <div class="progress-fill" style="width:${pct}%"></div>
+      </div>
+      <span style="font-size:12px;color:var(--text-dim);white-space:nowrap;">
+        ${current}/${total} (${pct}%)
+      </span>
+    </div>`;
+}
+
+async function api(method, path, body = null, isForm = false) {
+  const opts = { method, credentials: 'include', headers: {} };
+  if (body) {
+    if (isForm) {
+      opts.body = body;
+    } else {
+      opts.headers['Content-Type'] = 'application/json';
+      opts.body = JSON.stringify(body);
+    }
+  }
+  const r = await fetch(path, opts);
+  if (r.status === 401) { doLogout(); return null; }
+  return r;
+}
+
+// ================================================================
+// 🔐  AUTH
+// ================================================================
+
+async function init() {
+  const r = await fetch('/api/me', { credentials: 'include' });
+  const data = await r.json();
+  if (data.authenticated) {
+    State.user = data;
+    enterApp();
+  }
+}
+
+async function doLogin() {
+  const username = $('login-user').value.trim();
+  const password = $('login-pass').value;
+  if (!username || !password) { notify('login-msg', '❌ Remplissez tous les champs', 'err'); return; }
+
+  const r = await fetch('/api/login', {
+    method: 'POST', credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ username, password })
+  });
+  const data = await r.json();
+  if (!r.ok) {
+    notify('login-msg', `❌ ${data.detail || 'Erreur'}`, 'err');
+    return;
+  }
+  State.user = data;
+  enterApp();
+}
+
+async function doLogout() {
+  await fetch('/api/logout', { method: 'POST', credentials: 'include' });
+  State.user = null;
+  $('topbar-right').style.display = 'none';
+  $('login-user').value = '';
+  $('login-pass').value = '';
+  showPage('login');
+}
+
+function enterApp() {
+  $('topbar-right').style.display = 'flex';
+  $('topbar-user').textContent = `👋 ${State.user.username} | ${State.user.mode}`;
+  if (State.user.role === 'admin') {
+    showPage('admin');
+    loadAdminUsers();
+    loadAdminWords();
+    loadAdminStats();
+  } else {
+    showPage('user');
+    loadWords();
+    loadUserStats();
+  }
+}
+
+// ================================================================
+// 📋  LISTE DES MOTS
+// ================================================================
+
+async function loadWords() {
+  const r = await api('GET',
+    `/api/words?filter=${State.filter}&page=${State.page}&per_page=20`);
+  if (!r) return;
+  const data = await r.json();
+  State.totalPages = data.total_pages;
+  $('page-info').textContent = `Page ${data.page + 1}/${data.total_pages} — ${data.total} mots`;
+  renderWordList(data.items);
+}
+
+function renderWordList(items) {
+  const container = $('word-list');
+  if (!items.length) {
+    container.innerHTML = '<p style="color:var(--text-dim);text-align:center;padding:20px;">Aucun mot pour ce filtre.</p>';
+    return;
+  }
+  container.innerHTML = items.map(w => {
+    const nnh  = w.nnh_clean || '';
+    const asgn = w.assigned_to;
+    let statusClass, badgeClass, badgeText;
+    if (nnh) {
+      statusClass = 'translated'; badgeClass = 'badge-done'; badgeText = '✅ Traduit';
+    } else if (asgn) {
+      statusClass = 'assigned'; badgeClass = 'badge-assigned'; badgeText = `✍️ ${asgn}`;
+    } else {
+      statusClass = 'pending'; badgeClass = 'badge-pending'; badgeText = '⏳ Libre';
+    }
+    const audioCount = Object.keys(w.audio || {}).length;
+    const audioInfo  = audioCount ? `🔊 ${audioCount} voix` : '';
+    return `
+      <div class="word-card ${statusClass} ${State.selectedWid === w.id ? 'selected' : ''}"
+           onclick="selectWord('${w.id}')">
+        <div class="card-header">
+          <span class="card-id">#${w.id}</span>
+          <span class="badge ${badgeClass}">${badgeText}</span>
+        </div>
+        <div class="card-fr">${escHtml(w.fr_clean)}</div>
+        ${nnh ? `<div class="card-nnh">${escHtml(nnh)}</div>` : ''}
+        ${audioInfo ? `<div class="card-meta">${audioInfo}</div>` : ''}
+      </div>`;
+  }).join('');
+}
+
+function escHtml(s) {
+  return (s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+
+function setFilter(f) {
+  State.filter = f;
+  State.page   = 0;
+  // Highlight bouton actif
+  ['all','mine','free','done','audio'].forEach(id => {
+    $(`f-${id}`).classList.toggle('btn-primary', id === f);
+    $(`f-${id}`).classList.toggle('btn-secondary', id !== f);
+  });
+  loadWords();
+}
+
+function changePage(delta) {
+  const newPage = State.page + delta;
+  if (newPage < 0 || newPage >= State.totalPages) return;
+  State.page = newPage;
+  loadWords();
+}
+
+// ================================================================
+// ✍️  ÉDITEUR DE MOT
+// ================================================================
+
+async function selectWord(wid) {
+  State.selectedWid = wid;
+
+  // Mettre à jour la sélection visuelle
+  document.querySelectorAll('.word-card').forEach(c => c.classList.remove('selected'));
+  const cards = document.querySelectorAll('.word-card');
+  cards.forEach(c => { if (c.onclick.toString().includes(wid)) c.classList.add('selected'); });
+
+  // Charger le mot
+  const r = await api('GET', `/api/words?filter=all&page=0&per_page=9999`);
+  if (!r) return;
+  const data = await r.json();
+  const word = data.items.find(w => w.id === wid);
+  if (!word) return;
+
+  // Prendre le mot si libre
+  if (!word.assigned_to) {
+    await api('POST', `/api/words/${wid}/take`);
+    word.assigned_to = State.user.username;
+  }
+
+  // Remplir l'éditeur
+  $('editor-placeholder').style.display = 'none';
+  $('editor').style.display = 'block';
+
+  $('ed-id').textContent      = `#${wid}`;
+  $('ed-fr').value            = word.fr_clean || '';
+  $('ed-fr-orig').value       = word.fr_original || '';
+  $('ed-nnh-orig').value      = word.nnh_original || '';
+  $('ed-nnh').value           = word.nnh_clean || '';
+
+  const badge = $('ed-badge');
+  if (word.nnh_clean) {
+    badge.className = 'badge badge-done'; badge.textContent = '✅ Traduit';
+  } else if (word.assigned_to) {
+    badge.className = 'badge badge-assigned'; badge.textContent = '✍️ En cours';
+  } else {
+    badge.className = 'badge badge-pending'; badge.textContent = '⏳ Libre';
+  }
+
+  // Audio
+  updateAudioSection(word);
+
+  // Réinitialiser messages
+  $('save-text-msg').classList.remove('show');
+  $('save-audio-msg').classList.remove('show');
+}
+
+function updateAudioSection(word) {
+  const hasNNH = !!(word.nnh_clean && word.nnh_clean.trim());
+  $('audio-info').style.display  = hasNNH ? 'none' : 'block';
+  $('audio-section').style.display = hasNNH ? 'block' : 'none';
+
+  // Voix existantes
+  const auds = word.audio || {};
+  const existEl = $('existing-audio');
+  if (Object.keys(auds).length === 0) {
+    existEl.innerHTML = '<p style="color:var(--text-dim);font-size:13px;">Aucun audio enregistré.</p>';
+  } else {
+    existEl.innerHTML = Object.entries(auds).map(([uname, apath]) => `
+      <div class="audio-entry">
+        <div class="audio-entry-user">🔊 ${escHtml(uname)}</div>
+        <audio controls src="/api/words/${word.id}/audio/${uname}"></audio>
+      </div>`).join('');
+  }
+
+  // Reset enregistrement
+  State.recordedBlob = null;
+  $('audio-preview').style.display = 'none';
+  $('btn-save-audio').style.display = 'none';
+  $('btn-stop').style.display = 'none';
+  $('btn-record').style.display = 'block';
+  $('btn-record').textContent = '🔴 Enregistrer';
+}
+
+async function saveText() {
+  const wid     = State.selectedWid;
+  const nnh     = $('ed-nnh').value.trim();
+  if (!wid) return;
+  const r = await api('PUT', `/api/words/${wid}/text`, { nnh_clean: nnh });
+  if (!r) return;
+  if (r.ok) {
+    notify('save-text-msg', '✅ Texte sauvegardé !', 'ok');
+    // Débloquer section audio
+    $('audio-info').style.display  = nnh ? 'none' : 'block';
+    $('audio-section').style.display = nnh ? 'block' : 'none';
+    loadWords(); // rafraîchir la liste
+    loadUserStats();
+  } else {
+    const e = await r.json();
+    notify('save-text-msg', `❌ ${e.detail}`, 'err');
+  }
+}
+
+// ================================================================
+// 🎤  ENREGISTREMENT AUDIO
+// ================================================================
+
+function kbInsert(ch) {
+  const ta = $('ed-nnh');
+  if (!ta) return;
+  const s = ta.selectionStart, e = ta.selectionEnd;
+  ta.value = ta.value.substring(0, s) + ch + ta.value.substring(e);
+  ta.selectionStart = ta.selectionEnd = s + ch.length;
+  ta.focus();
+}
+
+async function startRecord() {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    State.audioBlobs = [];
+    State.mediaRec   = new MediaRecorder(stream);
+    State.mediaRec.ondataavailable = e => State.audioBlobs.push(e.data);
+    State.mediaRec.onstop = () => {
+      const blob = new Blob(State.audioBlobs, { type: 'audio/webm' });
+      State.recordedBlob = blob;
+      const url = URL.createObjectURL(blob);
+      const prev = $('audio-preview');
+      prev.src = url;
+      prev.style.display = 'block';
+      $('btn-save-audio').style.display = 'block';
+      stream.getTracks().forEach(t => t.stop());
+    };
+    State.mediaRec.start();
+    $('btn-record').style.display = 'none';
+    $('btn-stop').style.display   = 'block';
+  } catch (e) {
+    notify('save-audio-msg', '❌ Microphone non accessible: ' + e.message, 'err');
+  }
+}
+
+function stopRecord() {
+  if (State.mediaRec && State.mediaRec.state !== 'inactive') {
+    State.mediaRec.stop();
+  }
+  $('btn-stop').style.display   = 'none';
+  $('btn-record').style.display = 'block';
+  $('btn-record').textContent   = '🔴 Ré-enregistrer';
+}
+
+function previewAudio(input) {
+  const file = input.files[0];
+  if (!file) return;
+  State.recordedBlob = file;
+  const prev = $('audio-preview');
+  prev.src = URL.createObjectURL(file);
+  prev.style.display = 'block';
+  $('btn-save-audio').style.display = 'block';
+}
+
+async function saveAudio() {
+  const wid  = State.selectedWid;
+  const blob = State.recordedBlob;
+  if (!wid || !blob) return;
+
+  const form = new FormData();
+  form.append('file', blob, `audio_${wid}.webm`);
+  const r = await api('POST', `/api/words/${wid}/audio`, form, true);
+  if (!r) return;
+  if (r.ok) {
+    notify('save-audio-msg', '✅ Audio sauvegardé !', 'ok');
+    // Rafraîchir les voix existantes
+    const rWords = await api('GET', `/api/words?filter=all&page=0&per_page=9999`);
+    if (rWords) {
+      const data = await rWords.json();
+      const word = data.items.find(w => w.id === wid);
+      if (word) updateAudioSection(word);
+    }
+    loadWords();
+    loadUserStats();
+  } else {
+    const e = await r.json();
+    notify('save-audio-msg', `❌ ${e.detail}`, 'err');
+  }
+}
+
+// ================================================================
+// 📊  STATS UTILISATEUR
+// ================================================================
+
+async function loadUserStats() {
+  const r = await api('GET', '/api/stats');
+  if (!r) return;
+  const d = await r.json();
+  $('user-stats').innerHTML = `
+    <div class="stat-box">
+      <div class="stat-num">${d.my_words}</div>
+      <div class="stat-lbl">Mes mots</div>
+    </div>
+    <div class="stat-box">
+      <div class="stat-num">${d.my_done}</div>
+      <div class="stat-lbl">Traduits</div>
+    </div>
+    <div class="stat-box">
+      <div class="stat-num">${d.my_audio}</div>
+      <div class="stat-lbl">Mes audios</div>
+    </div>`;
+}
+
+// ================================================================
+// 🔑  ADMIN — UTILISATEURS
+// ================================================================
+
+async function loadAdminUsers() {
+  const r = await api('GET', '/api/admin/users');
+  if (!r) return;
+  const users = await r.json();
+  $('admin-users-table').innerHTML = `
+    <table>
+      <thead><tr>
+        <th>Utilisateur</th><th>Rôle</th><th>Mode</th>
+        <th>Assignés</th><th>Traduits</th><th>Audios</th>
+      </tr></thead>
+      <tbody>
+        ${users.map(u => {
+          const modeIcon = {edit:'✅',read:'👁️',blocked:'🚫'}[u.mode] || '?';
+          return `<tr>
+            <td>${escHtml(u.username)}</td>
+            <td style="color:var(--purple-m)">${u.role}</td>
+            <td>${modeIcon} ${u.mode}</td>
+            <td>${u.assigned}</td>
+            <td style="color:var(--green)">${u.translated}</td>
+            <td style="color:var(--yellow)">${u.audio}</td>
+          </tr>`;
+        }).join('')}
+      </tbody>
+    </table>`;
+}
+
+async function createUser() {
+  const uname = $('new-uname').value.trim();
+  const upass = $('new-upass').value;
+  const umode = $('new-umode').value;
+  if (!uname) { notify('create-user-msg','❌ Nom requis','err'); return; }
+
+  // Vérifier si l'utilisateur existe déjà
+  const rList = await api('GET', '/api/admin/users');
+  const users = rList ? await rList.json() : [];
+  const exists = users.find(u => u.username === uname);
+
+  if (exists) {
+    // Mise à jour du mode
+    const body = { mode: umode };
+    if (upass) body.password = upass;
+    const r = await api('PUT', `/api/admin/users/${uname}`, body);
+    if (r && r.ok) {
+      notify('create-user-msg', `✅ ${uname} mis à jour`, 'ok');
+      loadAdminUsers();
+    } else {
+      const e = r ? await r.json() : {};
+      notify('create-user-msg', `❌ ${e.detail || 'Erreur'}`, 'err');
+    }
+  } else {
+    if (!upass) { notify('create-user-msg','❌ Mot de passe requis pour nouveau compte','err'); return; }
+    const r = await api('POST', '/api/admin/users', { username:uname, password:upass, mode:umode });
+    if (r && r.ok) {
+      notify('create-user-msg', `✅ Utilisateur ${uname} créé`, 'ok');
+      $('new-uname').value = ''; $('new-upass').value = '';
+      loadAdminUsers();
+    } else {
+      const e = r ? await r.json() : {};
+      notify('create-user-msg', `❌ ${e.detail || 'Erreur'}`, 'err');
+    }
+  }
+}
+
+// ================================================================
+// 📝  ADMIN — MOTS
+// ================================================================
+
+async function loadAdminWords() {
+  const r = await api('GET', `/api/admin/words?page=${State.adminPage}&per_page=50`);
+  if (!r) return;
+  const data = await r.json();
+  $('admin-page-info').textContent = `Page ${data.page+1}/${data.total_pages} — ${data.total} mots`;
+  $('admin-words-table').innerHTML = `
+    <table>
+      <thead><tr>
+        <th>ID</th><th>FR</th><th>NNH</th><th>Assigné à</th><th>Audio</th>
+      </tr></thead>
+      <tbody>
+        ${data.items.map(w => `<tr>
+          <td style="color:var(--text-dim)">${w.id}</td>
+          <td>${escHtml(w.fr_clean)}</td>
+          <td style="color:var(--purple-m);font-family:'Noto Sans',serif;">
+            ${escHtml((w.nnh_clean||'—').substring(0,40))}
+          </td>
+          <td style="color:var(--yellow)">${w.assigned_to || '—'}</td>
+          <td style="color:var(--green)">${Object.keys(w.audio||{}).length} 🔊</td>
+        </tr>`).join('')}
+      </tbody>
+    </table>`;
+}
+
+function changeAdminPage(delta) {
+  State.adminPage = Math.max(0, State.adminPage + delta);
+  loadAdminWords();
+}
+
+async function importCSV() {
+  const fileInput = $('csv-file');
+  if (!fileInput.files.length) {
+    notify('import-msg', '❌ Sélectionnez un fichier CSV', 'err'); return;
+  }
+  const form = new FormData();
+  form.append('file', fileInput.files[0]);
+  const r = await api('POST', '/api/admin/import', form, true);
+  if (!r) return;
+  const data = await r.json();
+  if (r.ok) {
+    notify('import-msg', `✅ ${data.imported} mots importés`, 'ok');
+    loadAdminWords();
+    loadAdminStats();
+  } else {
+    notify('import-msg', `❌ ${data.detail}`, 'err');
+  }
+}
+
+async function addWord() {
+  const fr_clean    = $('add-fr-clean').value.trim();
+  const fr_original = $('add-fr-orig').value.trim();
+  const nnh_original= $('add-nnh-orig').value.trim();
+  if (!fr_clean) { notify('add-word-msg','❌ fr_clean requis','err'); return; }
+  const r = await api('POST', '/api/admin/words', {fr_clean, fr_original, nnh_original});
+  if (r && r.ok) {
+    notify('add-word-msg', `✅ Mot "${fr_clean}" ajouté`, 'ok');
+    $('add-fr-clean').value = $('add-fr-orig').value = $('add-nnh-orig').value = '';
+    loadAdminWords();
+  } else {
+    const e = r ? await r.json() : {};
+    notify('add-word-msg', `❌ ${e.detail || 'Erreur'}`, 'err');
+  }
+}
+
+// ================================================================
+// 📊  ADMIN — STATS
+// ================================================================
+
+async function loadAdminStats() {
+  const r = await api('GET', '/api/admin/stats');
+  if (!r) return;
+  const d = await r.json();
+
+  $('admin-stats-global').innerHTML = `
+    <div class="stat-box">
+      <div class="stat-num">${d.total}</div>
+      <div class="stat-lbl">Total mots</div>
+    </div>
+    <div class="stat-box">
+      <div class="stat-num">${d.translated}</div>
+      <div class="stat-lbl">Traduits</div>
+    </div>
+    <div class="stat-box">
+      <div class="stat-num">${d.with_audio}</div>
+      <div class="stat-lbl">Avec audio</div>
+    </div>`;
+
+  $('admin-stats-users').innerHTML = `
+    <table>
+      <thead><tr>
+        <th>Utilisateur</th><th>Mode</th><th>Assignés</th>
+        <th>Traduits</th><th>Audios</th><th>Progression</th>
+      </tr></thead>
+      <tbody>
+        ${d.per_user.map(u => {
+          const pct = u.assigned ? Math.round(u.translated/u.assigned*100) : 0;
+          return `<tr>
+            <td>${escHtml(u.username)}</td>
+            <td>${{edit:'✅',read:'👁️',blocked:'🚫'}[u.mode]||'?'} ${u.mode}</td>
+            <td>${u.assigned}</td>
+            <td style="color:var(--green)">${u.translated}</td>
+            <td style="color:var(--yellow)">${u.audio}</td>
+            <td style="min-width:160px;">${progressBar(u.translated, u.assigned)}</td>
+          </tr>`;
+        }).join('')}
+      </tbody>
+    </table>`;
+}
+
+// ================================================================
+// 🗂️  ONGLETS ADMIN
+// ================================================================
+
+function showAdminTab(name) {
+  document.querySelectorAll('.tab').forEach((t,i) => {
+    const names = ['users','words','progress','export'];
+    t.classList.toggle('active', names[i] === name);
+  });
+  document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+  $(`tab-${name}`).classList.add('active');
+  if (name === 'progress') loadAdminStats();
+}
+
+// ── Init ─────────────────────────────────────────────────────────
+window.addEventListener('DOMContentLoaded', () => {
+  // Activer le filtre "all" par défaut
+  $('f-all').classList.add('btn-primary');
+  $('f-all').classList.remove('btn-secondary');
+  init();
+});

static/index.html

@@ -0,0 +1,536 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Mimba — Collecte NNH</title>
+<style>
+:root {
+  --bg:       #0d0a1a;
+  --bg2:      #1a1030;
+  --bg3:      #110d22;
+  --border:   #2d1b69;
+  --purple:   #6d28d9;
+  --purple-l: #c4b5fd;
+  --purple-m: #a78bfa;
+  --text:     #e2d9f3;
+  --text-dim: #7c6fa0;
+  --green:    #10b981;
+  --yellow:   #f59e0b;
+  --red:      #ef4444;
+  --blue:     #6366f1;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: 'Segoe UI', system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* ── Topbar fixe ── */
+#topbar {
+  background: var(--bg3);
+  border-bottom: 1px solid var(--border);
+  padding: 10px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  z-index: 100;
+}
+#topbar h1 { font-size: 1.1rem; color: var(--purple-l); }
+#topbar-right { display: flex; align-items: center; gap: 12px; }
+#topbar-user { font-size: 13px; color: var(--text-dim); }
+
+/* ── Contenu scrollable ── */
+#content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+/* ── Pages ── */
+.page { display: none; }
+.page.active { display: block; }
+
+/* ── Connexion ── */
+#page-login {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.login-box {
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 40px;
+  width: 100%;
+  max-width: 380px;
+}
+.login-box h2 { color: var(--purple-l); margin-bottom: 24px; text-align: center; }
+
+/* ── Layout 2 colonnes ── */
+.layout-split {
+  display: grid;
+  grid-template-columns: 380px 1fr;
+  gap: 20px;
+  height: calc(100vh - 120px);
+}
+.panel-left {
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.panel-right {
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+/* ── Barre filtres ── */
+.filter-bar {
+  padding: 12px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+/* ── Liste des mots (scrollable) ── */
+#word-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+/* ── Pagination ── */
+.pagination {
+  padding: 10px 12px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  font-size: 13px;
+  color: var(--text-dim);
+}
+
+/* ── Carte mot ── */
+.word-card {
+  background: var(--bg3);
+  border: 1px solid var(--border);
+  border-left: 4px solid var(--blue);
+  border-radius: 10px;
+  padding: 12px;
+  margin-bottom: 10px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+.word-card:hover { background: #1e1540; }
+.word-card.selected { border-color: var(--purple); background: #1e1540; }
+.word-card.translated { border-left-color: var(--green); }
+.word-card.assigned { border-left-color: var(--yellow); }
+.word-card.pending { border-left-color: var(--blue); }
+
+.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+.card-id { font-size: 11px; color: var(--text-dim); }
+.card-fr { font-size: 15px; font-weight: 600; color: #f0e6ff; margin: 4px 0; }
+.card-nnh { font-size: 13px; color: var(--purple-m); font-family: 'Noto Sans', serif; }
+.card-meta { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
+
+/* ── Badge ── */
+.badge {
+  font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 500;
+}
+.badge-done    { background: #065f46; color: #6ee7b7; }
+.badge-assigned{ background: #78350f; color: #fcd34d; }
+.badge-pending { background: #1e1b4b; color: #a5b4fc; }
+
+/* ── Formulaires ── */
+.form-group { margin-bottom: 14px; }
+.form-group label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 5px; }
+input[type=text], input[type=password], textarea, select {
+  width: 100%;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  padding: 9px 12px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+input:focus, textarea:focus, select:focus { border-color: var(--purple); }
+textarea { resize: vertical; min-height: 70px; font-family: 'Noto Sans', serif; font-size: 15px; }
+input[type=text][readonly], textarea[readonly] { opacity: 0.6; cursor: default; }
+
+/* ── Boutons ── */
+.btn {
+  padding: 8px 16px; border-radius: 8px; border: none;
+  cursor: pointer; font-size: 13px; font-weight: 500;
+  transition: opacity 0.15s, background 0.15s;
+}
+.btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.btn-primary   { background: var(--purple); color: #fff; }
+.btn-secondary { background: var(--bg3); color: var(--purple-l); border: 1px solid var(--border); }
+.btn-danger    { background: #7f1d1d; color: #fca5a5; }
+.btn-small     { padding: 5px 10px; font-size: 12px; }
+.btn-primary:not(:disabled):hover   { background: #5b21b6; }
+.btn-secondary:not(:disabled):hover { background: #2d1b69; }
+
+/* ── Clavier NNH ── */
+.keyboard {
+  background: var(--bg3);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px;
+  margin: 10px 0;
+}
+.keyboard-row { margin: 5px 0; }
+.keyboard-label { font-size: 11px; color: var(--text-dim); display: block; margin-bottom: 3px; }
+.key {
+  display: inline-block; padding: 5px 9px; margin: 2px;
+  background: #2d1b69; color: #fff; border: 1px solid #4a3080;
+  border-radius: 6px; cursor: pointer; font-size: 15px;
+  font-family: 'Noto Sans', serif;
+  transition: background 0.1s;
+}
+.key:hover { background: var(--purple); }
+
+/* ── Stats ── */
+.stats-grid {
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0;
+}
+.stat-box {
+  background: var(--bg3); border-radius: 10px; padding: 14px; text-align: center;
+}
+.stat-num { font-size: 26px; font-weight: 700; color: var(--purple-m); }
+.stat-lbl { font-size: 12px; color: var(--text-dim); }
+
+/* ── Progress bar ── */
+.progress-wrap { background: var(--bg3); border-radius: 8px; overflow: hidden; height: 8px; margin: 6px 0; }
+.progress-fill { height: 100%; background: var(--purple); border-radius: 8px; transition: width 0.4s; }
+
+/* ── Table admin ── */
+table { width: 100%; border-collapse: collapse; font-size: 13px; }
+th { padding: 10px 12px; background: #2d1b69; color: var(--purple-l); text-align: left; }
+td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
+tr:hover td { background: var(--bg3); }
+
+/* ── Onglets ── */
+.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
+.tab {
+  padding: 10px 20px; cursor: pointer; font-size: 14px;
+  color: var(--text-dim); border-bottom: 2px solid transparent;
+  transition: color 0.15s;
+}
+.tab.active { color: var(--purple-l); border-bottom-color: var(--purple); }
+.tab-content { display: none; }
+.tab-content.active { display: block; }
+
+/* ── Notifications ── */
+.notif {
+  padding: 10px 14px; border-radius: 8px; margin: 8px 0;
+  font-size: 13px; display: none;
+}
+.notif.show { display: block; }
+.notif-ok  { background: #064e3b; color: #6ee7b7; }
+.notif-err { background: #7f1d1d; color: #fca5a5; }
+.notif-info{ background: #1e1b4b; color: #a5b4fc; }
+
+/* ── Audio player ── */
+audio { width: 100%; margin: 6px 0; }
+.audio-entry { background: var(--bg3); border-radius: 8px; padding: 8px 12px; margin: 6px 0; }
+.audio-entry-user { font-size: 12px; color: var(--purple-m); margin-bottom: 4px; }
+
+/* ── Section header ── */
+.section-title {
+  font-size: 14px; font-weight: 600; color: var(--purple-l);
+  margin: 16px 0 8px; padding-bottom: 6px;
+  border-bottom: 1px solid var(--border);
+}
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  .layout-split { grid-template-columns: 1fr; height: auto; }
+  .panel-left { height: 50vh; }
+}
+</style>
+</head>
+<body>
+
+<!-- TOPBAR -->
+<div id="topbar">
+  <h1>🌍 Mimba — Collecte NNH</h1>
+  <div id="topbar-right" style="display:none;">
+    <span id="topbar-user"></span>
+    <button class="btn btn-secondary btn-small" onclick="doLogout()">Déconnexion</button>
+  </div>
+</div>
+
+<!-- CONTENU -->
+<div id="content">
+
+  <!-- PAGE LOGIN -->
+  <div id="page-login" class="page active">
+    <div class="login-box">
+      <h2>🔐 Connexion</h2>
+      <div class="form-group">
+        <label>Nom d'utilisateur</label>
+        <input type="text" id="login-user" placeholder="ex: alice" autocomplete="username">
+      </div>
+      <div class="form-group">
+        <label>Mot de passe</label>
+        <input type="password" id="login-pass" autocomplete="current-password"
+               onkeydown="if(event.key==='Enter')doLogin()">
+      </div>
+      <button class="btn btn-primary" style="width:100%" onclick="doLogin()">Se connecter</button>
+      <div id="login-msg" class="notif"></div>
+    </div>
+  </div>
+
+  <!-- PAGE UTILISATEUR -->
+  <div id="page-user" class="page">
+    <!-- Stats rapides -->
+    <div class="stats-grid" id="user-stats" style="margin-bottom:16px;"></div>
+
+    <div class="layout-split">
+      <!-- Panneau gauche : liste -->
+      <div class="panel-left">
+        <div class="filter-bar">
+          <button class="btn btn-secondary btn-small" onclick="setFilter('all')"   id="f-all">Tous</button>
+          <button class="btn btn-secondary btn-small" onclick="setFilter('mine')"  id="f-mine">Mes mots</button>
+          <button class="btn btn-secondary btn-small" onclick="setFilter('free')"  id="f-free">Libres</button>
+          <button class="btn btn-secondary btn-small" onclick="setFilter('done')"  id="f-done">Traduits ✅</button>
+          <button class="btn btn-secondary btn-small" onclick="setFilter('audio')" id="f-audio">Audio ❌</button>
+        </div>
+        <div id="word-list">
+          <p style="color:var(--text-dim);text-align:center;padding:20px;">Chargement...</p>
+        </div>
+        <div class="pagination">
+          <button class="btn btn-secondary btn-small" onclick="changePage(-1)">◀</button>
+          <span id="page-info">—</span>
+          <button class="btn btn-secondary btn-small" onclick="changePage(1)">▶</button>
+        </div>
+      </div>
+
+      <!-- Panneau droit : éditeur -->
+      <div class="panel-right">
+        <div id="editor-placeholder" style="text-align:center;padding:40px;color:var(--text-dim);">
+          ← Sélectionnez un mot dans la liste
+        </div>
+        <div id="editor" style="display:none;">
+          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
+            <span id="ed-id" style="color:var(--text-dim);font-size:13px;"></span>
+            <span id="ed-badge" class="badge"></span>
+          </div>
+
+          <div class="form-group">
+            <label>🇫🇷 Mot / Phrase</label>
+            <input type="text" id="ed-fr" readonly>
+          </div>
+          <div class="form-group">
+            <label>Contexte original</label>
+            <input type="text" id="ed-fr-orig" readonly style="font-size:12px;">
+          </div>
+          <div class="form-group">
+            <label>Indice NNH (dataset)</label>
+            <input type="text" id="ed-nnh-orig" readonly style="font-size:12px;color:var(--purple-m);">
+          </div>
+
+          <!-- Clavier NNH -->
+          <div class="keyboard">
+            <p style="font-size:11px;color:var(--text-dim);margin-bottom:6px;">⌨️ Clavier NNH — cliquer pour insérer</p>
+            <div class="keyboard-row">
+              <span class="keyboard-label">Voyelles</span>
+              <span class="key" onclick="kbInsert('ɔ')">ɔ</span>
+              <span class="key" onclick="kbInsert('ɛ')">ɛ</span>
+              <span class="key" onclick="kbInsert('ə')">ə</span>
+              <span class="key" onclick="kbInsert('ɩ')">ɩ</span>
+              <span class="key" onclick="kbInsert('ʉ')">ʉ</span>
+              <span class="key" onclick="kbInsert('Ɔ')">Ɔ</span>
+              <span class="key" onclick="kbInsert('Ɛ')">Ɛ</span>
+            </div>
+            <div class="keyboard-row">
+              <span class="keyboard-label">Consonnes</span>
+              <span class="key" onclick="kbInsert('ŋ')">ŋ</span>
+              <span class="key" onclick="kbInsert('ɲ')">ɲ</span>
+              <span class="key" onclick="kbInsert('ʼ')">ʼ</span>
+              <span class="key" onclick="kbInsert('Ŋ')">Ŋ</span>
+            </div>
+            <div class="keyboard-row">
+              <span class="keyboard-label">Tons (combiner avec voyelle)</span>
+              <span class="key" onclick="kbInsert('\u0301')" title="ton aigu">◌́</span>
+              <span class="key" onclick="kbInsert('\u0300')" title="ton grave">◌̀</span>
+              <span class="key" onclick="kbInsert('\u0302')" title="ton circonflexe">◌̂</span>
+              <span class="key" onclick="kbInsert('\u030c')" title="ton caron">◌̌</span>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label>🌍 Traduction NNH</label>
+            <textarea id="ed-nnh" placeholder="Écrire la traduction..."></textarea>
+          </div>
+          <button class="btn btn-primary" onclick="saveText()" style="width:100%">
+            💾 Sauvegarder le texte NNH
+          </button>
+          <div id="save-text-msg" class="notif"></div>
+
+          <div class="section-title" style="margin-top:20px;">🎤 Enregistrement audio</div>
+          <div id="audio-info" class="notif notif-info show" style="margin-bottom:10px;">
+            ⚠️ Sauvegardez d'abord le texte NNH pour enregistrer l'audio.
+          </div>
+          <div id="audio-section" style="display:none;">
+            <input type="file" id="audio-file" accept="audio/*" style="display:none"
+                   onchange="previewAudio(this)">
+            <div style="display:flex;gap:8px;margin-bottom:8px;">
+              <button class="btn btn-secondary" onclick="startRecord()" id="btn-record">
+                🔴 Enregistrer
+              </button>
+              <button class="btn btn-secondary" onclick="stopRecord()" id="btn-stop"
+                      style="display:none;">⏹ Stop</button>
+              <button class="btn btn-secondary" onclick="document.getElementById('audio-file').click()">
+                📂 Fichier
+              </button>
+            </div>
+            <audio id="audio-preview" controls style="display:none;width:100%;margin:8px 0;"></audio>
+            <button class="btn btn-primary" id="btn-save-audio" onclick="saveAudio()"
+                    style="width:100%;display:none;">
+              💾 Sauvegarder l'audio
+            </button>
+            <div id="save-audio-msg" class="notif"></div>
+          </div>
+
+          <div class="section-title">🔊 Voix existantes</div>
+          <div id="existing-audio"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- PAGE ADMIN -->
+  <div id="page-admin" class="page">
+    <div class="tabs">
+      <div class="tab active" onclick="showAdminTab('users')">👥 Utilisateurs</div>
+      <div class="tab" onclick="showAdminTab('words')">📝 Mots FR</div>
+      <div class="tab" onclick="showAdminTab('progress')">📊 Progression</div>
+      <div class="tab" onclick="showAdminTab('export')">📦 Export</div>
+    </div>
+
+    <!-- USERS -->
+    <div class="tab-content active" id="tab-users">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
+        <span class="section-title" style="margin:0;">Liste des utilisateurs</span>
+        <button class="btn btn-secondary btn-small" onclick="loadAdminUsers()">🔄 Actualiser</button>
+      </div>
+      <div id="admin-users-table"></div>
+
+      <div class="section-title">➕ Créer / Modifier un utilisateur</div>
+      <div style="display:grid;grid-template-columns:1fr 1fr 160px;gap:10px;margin-bottom:10px;">
+        <div class="form-group" style="margin:0;">
+          <label>Nom d'utilisateur</label>
+          <input type="text" id="new-uname">
+        </div>
+        <div class="form-group" style="margin:0;">
+          <label>Mot de passe</label>
+          <input type="password" id="new-upass" placeholder="Laisser vide pour ne pas changer">
+        </div>
+        <div class="form-group" style="margin:0;">
+          <label>Mode</label>
+          <select id="new-umode">
+            <option value="edit">✅ edit</option>
+            <option value="read">👁️ read</option>
+            <option value="blocked">🚫 blocked</option>
+          </select>
+        </div>
+      </div>
+      <button class="btn btn-primary" onclick="createUser()">💾 Sauvegarder</button>
+      <div id="create-user-msg" class="notif"></div>
+    </div>
+
+    <!-- WORDS -->
+    <div class="tab-content" id="tab-words">
+      <div class="section-title">📥 Importer un CSV</div>
+      <p style="font-size:12px;color:var(--text-dim);margin-bottom:8px;">
+        Colonnes attendues : <code>id, fr_clean, fr_original, nnh_original</code>
+      </p>
+      <div style="display:flex;gap:10px;align-items:center;margin-bottom:8px;">
+        <input type="file" id="csv-file" accept=".csv">
+        <button class="btn btn-primary" onclick="importCSV()">📥 Importer</button>
+      </div>
+      <div id="import-msg" class="notif"></div>
+
+      <div class="section-title">➕ Ajouter manuellement</div>
+      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px;">
+        <div class="form-group" style="margin:0;">
+          <label>fr_clean</label>
+          <input type="text" id="add-fr-clean">
+        </div>
+        <div class="form-group" style="margin:0;">
+          <label>fr_original</label>
+          <input type="text" id="add-fr-orig">
+        </div>
+        <div class="form-group" style="margin:0;">
+          <label>nnh_original (indice)</label>
+          <input type="text" id="add-nnh-orig">
+        </div>
+      </div>
+      <button class="btn btn-secondary" onclick="addWord()">➕ Ajouter</button>
+      <div id="add-word-msg" class="notif"></div>
+
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-top:20px;">
+        <span class="section-title" style="margin:0;">📋 Mots actuels</span>
+        <div style="display:flex;gap:6px;align-items:center;">
+          <button class="btn btn-secondary btn-small" onclick="loadAdminWords()">🔄</button>
+          <button class="btn btn-secondary btn-small" onclick="changeAdminPage(-1)">◀</button>
+          <span id="admin-page-info" style="font-size:12px;color:var(--text-dim);">—</span>
+          <button class="btn btn-secondary btn-small" onclick="changeAdminPage(1)">▶</button>
+        </div>
+      </div>
+      <div id="admin-words-table" style="margin-top:10px;"></div>
+    </div>
+
+    <!-- PROGRESS -->
+    <div class="tab-content" id="tab-progress">
+      <div style="display:flex;justify-content:space-between;margin-bottom:12px;">
+        <span class="section-title" style="margin:0;">Progression globale</span>
+        <button class="btn btn-secondary btn-small" onclick="loadAdminStats()">🔄 Actualiser</button>
+      </div>
+      <div id="admin-stats-global" class="stats-grid" style="margin-bottom:20px;"></div>
+      <div id="admin-stats-users"></div>
+    </div>
+
+    <!-- EXPORT -->
+    <div class="tab-content" id="tab-export">
+      <div class="section-title">📥 Exporter les données</div>
+      <p style="color:var(--text-dim);font-size:13px;margin-bottom:20px;">
+        Le CSV contient toutes les traductions. Le ZIP inclut le CSV + tous les fichiers audio MP3.
+      </p>
+      <div style="display:flex;gap:12px;">
+        <a id="dl-csv" href="/api/admin/export/csv">
+          <button class="btn btn-primary">📄 Exporter CSV</button>
+        </a>
+        <a id="dl-zip" href="/api/admin/export/zip">
+          <button class="btn btn-secondary">📦 Exporter ZIP (CSV + Audio)</button>
+        </a>
+      </div>
+    </div>
+  </div>
+
+</div><!-- /content -->
+
+<script src="app.js"></script>
+</body>
+</html>