update

Dockerfile

@@ -1,11 +1,18 @@
 FROM python:3.12-slim
 WORKDIR /app
 
-# Copier les fichiers du frontend statique
+# Dépendances backend
+RUN pip install --no-cache-dir flask
+
+# Copier le code
+COPY backend/ /app/backend/
 COPY frontend/ /app/frontend/
 
+# Variables d'environnement
+ENV PORT=7860 FLASK_ENV=production PYTHONUNBUFFERED=1
+
 # Exposer le port requis par Spaces
 EXPOSE 7860
 
-# Lancer un serveur HTTP statique sur le port 7860
-CMD ["python", "-m", "http.server", "7860", "--directory", "frontend"]
+# Démarrer Flask (sert le frontend statique et l'API)
+CMD ["python", "-c", "from backend.app import run; run()"]

backend/app.py

@@ -0,0 +1,83 @@
+import json
+import logging
+import os
+import time
+from flask import Flask, request, jsonify, send_from_directory
+
+
+app = Flask(
+    __name__,
+    static_folder=os.path.join(os.path.dirname(__file__), "../frontend"),
+    static_url_path="",
+)
+
+logging.basicConfig(level=logging.INFO, format="[%(levelname)s] %(message)s")
+logger = logging.getLogger(__name__)
+
+
+@app.get("/")
+def index():
+    return send_from_directory(app.static_folder, "index.html")
+
+
+@app.post("/api/start")
+def start_demo():
+    try:
+        data = request.get_json(force=True, silent=False)
+    except Exception as exc:
+        logger.exception("Invalid JSON body")
+        return jsonify({"ok": False, "error": "invalid_json", "detail": str(exc)}), 400
+
+    # Log brut du payload reçu
+    logger.info("/api/start payload:\n%s", json.dumps(data, indent=2, ensure_ascii=False))
+
+    # Log de métadonnées utiles sur la requête et un résumé des champs
+    client_ip = (request.headers.get("X-Forwarded-For") or request.remote_addr or "-").split(",")[0].strip()
+    user_agent = request.headers.get("User-Agent", "-")
+    referer = request.headers.get("Referer", "-")
+    content_type = request.content_type
+    content_length = request.content_length
+
+    mcp_text = data.get("mcp") if isinstance(data, dict) else None
+    mcp_len = len(mcp_text) if isinstance(mcp_text, str) else 0
+    mcp_is_json = False
+    if isinstance(mcp_text, str):
+        try:
+            json.loads(mcp_text)
+            mcp_is_json = True
+        except Exception:
+            mcp_is_json = False
+
+    summary = {
+        "client": {
+            "ip": client_ip,
+            "user_agent": user_agent,
+            "referer": referer,
+            "content_type": content_type,
+            "content_length": content_length,
+        },
+        "received_fields": {
+            "model": data.get("model") if isinstance(data, dict) else None,
+            "provider": data.get("provider") if isinstance(data, dict) else None,
+            "user": data.get("user") if isinstance(data, dict) else None,
+            "mcp_length": mcp_len,
+            "mcp_is_json": mcp_is_json,
+        },
+    }
+    logger.info("/api/start summary: %s", json.dumps(summary, ensure_ascii=False))
+
+    # Simuler un démarrage de démo
+    time.sleep(2)
+    iframe_url = "https://example.com/demo?session=demo123"
+    return jsonify({"ok": True, "received": True, "iframe_url": iframe_url}), 200
+
+
+def run():
+    port = int(os.environ.get("PORT", "7860"))
+    app.run(host="0.0.0.0", port=port)
+
+
+if __name__ == "__main__":
+    run()
+
+

frontend/index.html

@@ -7,7 +7,8 @@
     <meta name="description" content="Demo login Hugging Face (frontend only)" />
     <style>
       :root { color-scheme: light dark; }
-      body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      html, body { height: 100%; }
+      body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
       .toolbar { position: sticky; top: 0; z-index: 10; width: 100%; box-sizing: border-box; padding: 12px 16px; background: #f8fafc; border-bottom: 1px solid #e5e7eb; display: grid; grid-template-columns: auto 1fr 1fr 1fr auto; gap: 12px; align-items: center; }
       .toolbar input[type="text"], .toolbar input[type="file"] { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #111827; }
       .toolbar button { padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #111827; color: #fff; font-weight: 600; cursor: pointer; }
@@ -16,6 +17,10 @@
       .login-btn:hover { background: #f9fafb; }
       button { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #111827; cursor: pointer; font-weight: 600; }
       button:hover { background: #f9fafb; }
+      .filecol { display: flex; flex-direction: column; gap: 6px; }
+      .hint { font-size: 12px; color: #475569; }
+      .iframe-wrap { height: 100%; box-sizing: border-box; padding: 16px; background: #f8fafc;}
+      .iframe { width: 100%; height: 100%; border: 1px solid #e5e7eb; border-radius: 12px; }
     </style>
   </head>
   <body>
@@ -24,12 +29,17 @@
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M12 2a7 7 0 0 1 7 7v1h1a2 2 0 1 1 0 4h-1.05A6.002 6.002 0 0 1 12 20a6.002 6.002 0 0 1-6.95-6H4a2 2 0 1 1 0-4h1V9a7 7 0 0 1 7-7Z" fill="#FFB000"/></svg>
         <span id="loginLabel">Login avec Hugging Face</span>
       </button>
-      <input id="modelInput" type="text" placeholder="Choose your model" />
-      <input id="providerInput" type="text" placeholder="Choose your provider" />
-      <input id="mcpFile" type="file" accept=".json" />
+      <input id="modelInput" type="text" placeholder="Choose your model" value="meta-llama/Llama-3.3-70B-Instruct" />
+      <input id="providerInput" type="text" placeholder="Choose your provider" value="nebius" />
+      <div class="filecol">
+        <input id="mcpFile" type="file" accept=".json" />
+        <div class="hint">Upload your MCP file (optional). HF_TOKEN will be replaced by your token on the fly if present</div>
+      </div>
       <button id="startDemoBtn" type="button">Start demo</button>
     </div>
-    
+    <div class="iframe-wrap">
+      <iframe id="resultFrame" class="iframe" hidden></iframe>
+    </div>
 
     <script type="module" src="/main.js"></script>
   </body>

frontend/main.js

@@ -236,6 +236,83 @@ document.getElementById("loginBtn").addEventListener("click", () => {
     preloadDefaultMcp(),
   ]);
   if (!handled) updateUI("Login avec Hugging Face");
+  await validateForm();
 })();
 
+// Form handling: validate and submit to backend
+function getSelectedFileAsText(input) {
+  return new Promise((resolve, reject) => {
+    if (!input || !input.files || input.files.length === 0) return resolve(null);
+    const file = input.files[0];
+    const reader = new FileReader();
+    reader.onerror = () => reject(new Error("Lecture du fichier échouée"));
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.readAsText(file);
+  });
+}
+
+function getLoginLabel() {
+  const el = document.getElementById("loginLabel");
+  return el ? el.textContent || "" : "";
+}
+
+function isLikelyEmail(value) {
+  return /@/.test(value || "");
+}
+
+async function validateForm() {
+  const model = document.getElementById("modelInput").value.trim();
+  const provider = document.getElementById("providerInput").value.trim();
+  const fileInput = document.getElementById("mcpFile");
+  const hasFile = fileInput && fileInput.files && fileInput.files.length > 0;
+  const user = getLoginLabel();
+  const loggedIn = isLikelyEmail(user) || (user && user !== "Login avec Hugging Face" && !user.startsWith("Erreur"));
+  const ok = Boolean(model && provider && hasFile && loggedIn);
+  document.getElementById("startDemoBtn").disabled = !ok;
+  return ok;
+}
+
+async function gatherPayload() {
+  const model = document.getElementById("modelInput").value.trim();
+  const provider = document.getElementById("providerInput").value.trim();
+  const fileInput = document.getElementById("mcpFile");
+  const mcpText = await getSelectedFileAsText(fileInput);
+  const user = getLoginLabel();
+  return { model, provider, user, mcp: mcpText };
+}
+
+async function submitStart() {
+  if (!(await validateForm())) return;
+  const btn = document.getElementById("startDemoBtn");
+  const prev = btn.textContent;
+  btn.disabled = true;
+  btn.textContent = "Starting…";
+  try {
+    const payload = await gatherPayload();
+    const res = await fetch("/api/start", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+    if (res.ok) {
+      const data = await res.json();
+      if (data && data.iframe_url) {
+        const frame = document.getElementById("resultFrame");
+        frame.hidden = false;
+        frame.src = data.iframe_url;
+      }
+    }
+    btn.textContent = prev;
+  } catch (e) {
+    btn.textContent = prev;
+  } finally {
+    await validateForm();
+  }
+}
+
+document.getElementById("modelInput").addEventListener("input", validateForm);
+document.getElementById("providerInput").addEventListener("input", validateForm);
+document.getElementById("mcpFile").addEventListener("change", validateForm);
+document.getElementById("startDemoBtn").addEventListener("click", submitStart);
+