Spaces:

Tafita1206
/

Claude-code

Running

App Files Files Community

Tafita1206 commited on Apr 25

Commit

3d7017e

verified ·

1 Parent(s): 8c8e560

Create public/index.html

Browse files

Files changed (1) hide show

public/index.html +434 -0

public/index.html ADDED Viewed

	@@ -0,0 +1,434 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>Free Claude Code</title>
+<style>
+  :root {
+    --bg: #0f0f13;
+    --surface: #1a1a24;
+    --surface2: #24243a;
+    --border: #2e2e4a;
+    --accent: #7c6ff7;
+    --accent2: #5b54d6;
+    --text: #e8e8f0;
+    --muted: #8888aa;
+    --user-bg: #2a2a4a;
+    --ai-bg: #1e1e2e;
+    --green: #4ade80;
+    --red: #f87171;
+    --radius: 12px;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    height: 100dvh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  /* ── Header ── */
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+  .logo { display: flex; align-items: center; gap: 10px; }
+  .logo-icon {
+    width: 32px; height: 32px;
+    background: linear-gradient(135deg, var(--accent), #a78bfa);
+    border-radius: 8px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 16px;
+  }
+  .logo-text h1 { font-size: 15px; font-weight: 600; }
+  .logo-text p  { font-size: 11px; color: var(--muted); }
+  .status-badge {
+    display: flex; align-items: center; gap: 6px;
+    padding: 5px 10px;
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    font-size: 12px;
+    cursor: pointer;
+  }
+  .dot {
+    width: 7px; height: 7px; border-radius: 50%;
+    background: var(--muted);
+    transition: background 0.3s;
+  }
+  .dot.ok  { background: var(--green); box-shadow: 0 0 6px var(--green); }
+  .dot.err { background: var(--red); }
+  /* ── Model selector ── */
+  .model-bar {
+    display: flex;
+    gap: 8px;
+    padding: 10px 16px;
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+    overflow-x: auto;
+    flex-shrink: 0;
+    scrollbar-width: none;
+  }
+  .model-bar::-webkit-scrollbar { display: none; }
+  .model-btn {
+    padding: 5px 12px;
+    border-radius: 20px;
+    border: 1px solid var(--border);
+    background: transparent;
+    color: var(--muted);
+    font-size: 12px;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.2s;
+  }
+  .model-btn.active {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: #fff;
+  }
+  /* ── Messages ── */
+  #messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    scroll-behavior: smooth;
+  }
+  #messages::-webkit-scrollbar { width: 4px; }
+  #messages::-webkit-scrollbar-track { background: transparent; }
+  #messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+  .msg {
+    display: flex;
+    gap: 10px;
+    max-width: 100%;
+    animation: fadeIn 0.2s ease;
+  }
+  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+  .msg.user { flex-direction: row-reverse; }
+  .avatar {
+    width: 30px; height: 30px; border-radius: 8px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 14px; flex-shrink: 0;
+  }
+  .msg.user .avatar  { background: var(--accent2); }
+  .msg.ai   .avatar  { background: var(--surface2); border: 1px solid var(--border); }
+  .bubble {
+    max-width: calc(100% - 48px);
+    padding: 10px 14px;
+    border-radius: var(--radius);
+    font-size: 14px;
+    line-height: 1.6;
+    word-break: break-word;
+  }
+  .msg.user .bubble {
+    background: var(--user-bg);
+    border: 1px solid var(--border);
+    border-top-right-radius: 3px;
+  }
+  .msg.ai .bubble {
+    background: var(--ai-bg);
+    border: 1px solid var(--border);
+    border-top-left-radius: 3px;
+  }
+  /* Code blocks */
+  .bubble pre {
+    background: #0d0d17;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 10px;
+    overflow-x: auto;
+    margin: 8px 0;
+    font-size: 12px;
+  }
+  .bubble code { font-family: 'Fira Code', 'Consolas', monospace; font-size: 12px; }
+  .bubble p:not(:last-child) { margin-bottom: 8px; }
+  /* Thinking cursor */
+  .cursor {
+    display: inline-block;
+    width: 8px; height: 14px;
+    background: var(--accent);
+    border-radius: 2px;
+    vertical-align: middle;
+    animation: blink 0.8s infinite;
+  }
+  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+  /* ── Input area ── */
+  .input-area {
+    padding: 12px 16px;
+    background: var(--surface);
+    border-top: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+  .input-row {
+    display: flex;
+    gap: 8px;
+    align-items: flex-end;
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 8px 8px 8px 14px;
+    transition: border-color 0.2s;
+  }
+  .input-row:focus-within { border-color: var(--accent); }
+  #input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--text);
+    font-size: 14px;
+    resize: none;
+    max-height: 120px;
+    min-height: 22px;
+    line-height: 1.5;
+    font-family: inherit;
+  }
+  #input::placeholder { color: var(--muted); }
+  #send {
+    width: 36px; height: 36px;
+    background: var(--accent);
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
+    transition: background 0.2s, transform 0.1s;
+  }
+  #send:hover  { background: var(--accent2); }
+  #send:active { transform: scale(0.93); }
+  #send:disabled { background: var(--border); cursor: not-allowed; }
+  #send svg { width: 16px; height: 16px; fill: #fff; }
+  .hint { text-align: center; font-size: 11px; color: var(--muted); margin-top: 6px; }
+  /* ── Welcome screen ── */
+  .welcome {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    gap: 12px;
+    text-align: center;
+    padding: 24px;
+    color: var(--muted);
+  }
+  .welcome-icon { font-size: 48px; }
+  .welcome h2  { font-size: 18px; color: var(--text); font-weight: 600; }
+  .welcome p   { font-size: 13px; max-width: 280px; line-height: 1.6; }
+  .chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
+  .chip {
+    padding: 7px 13px;
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    font-size: 12px;
+    color: var(--text);
+    cursor: pointer;
+    transition: border-color 0.2s;
+  }
+  .chip:hover { border-color: var(--accent); color: var(--accent); }
+</style>
+</head>
+<body>
+<!-- Header -->
+<header>
+  <div class="logo">
+    <div class="logo-icon">✦</div>
+    <div class="logo-text">
+      <h1>Free Claude Code</h1>
+      <p>Powered by NVIDIA NIM</p>
+    </div>
+  </div>
+  <div class="status-badge" onclick="checkStatus()">
+    <div class="dot" id="dot"></div>
+    <span id="status-text">Vérification...</span>
+  </div>
+</header>
+<!-- Model bar -->
+<div class="model-bar">
+  <button class="model-btn active" data-model="claude-sonnet-4-20250514" onclick="selectModel(this)">Kimi K2</button>
+  <button class="model-btn" data-model="glm-4" onclick="selectModel(this)">GLM 4.7</button>
+  <button class="model-btn" data-model="minimax-m2" onclick="selectModel(this)">MiniMax M2</button>
+  <button class="model-btn" data-model="devstral" onclick="selectModel(this)">Devstral ⚡</button>
+</div>
+<!-- Messages -->
+<div id="messages">
+  <div class="welcome" id="welcome">
+    <div class="welcome-icon">✦</div>
+    <h2>Free Claude Code</h2>
+    <p>Utilise des modèles IA puissants gratuitement via NVIDIA. Fonctionne sur téléphone et PC.</p>
+    <div class="chips">
+      <div class="chip" onclick="send('Explique-moi le machine learning en 5 lignes')">Machine learning</div>
+      <div class="chip" onclick="send('Écris une fonction Python pour trier une liste')">Code Python</div>
+      <div class="chip" onclick="send('Corrige ce code JavaScript: function add(a,b){ return a-b }')">Déboguer du code</div>
+      <div class="chip" onclick="send('Quels sont les meilleurs modèles IA open source en 2025 ?')">Modèles IA</div>
+    </div>
+  </div>
+</div>
+<!-- Input -->
+<div class="input-area">
+  <div class="input-row">
+    <textarea id="input" placeholder="Pose ta question..." rows="1"
+      oninput="autoResize(this)"
+      onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendMsg()}">
+    </textarea>
+    <button id="send" onclick="sendMsg()">
+      <svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2z"/></svg>
+    </button>
+  </div>
+  <p class="hint">Entrée pour envoyer · Shift+Entrée pour saut de ligne</p>
+</div>
+<script>
+let selectedModel = 'claude-sonnet-4-20250514';
+let history = [];
+let isLoading = false;
+// ── Auto-resize textarea ──────────────────────────────────────────────────
+function autoResize(el) {
+  el.style.height = 'auto';
+  el.style.height = Math.min(el.scrollHeight, 120) + 'px';
+}
+// ── Model selection ───────────────────────────────────────────────────────
+function selectModel(btn) {
+  document.querySelectorAll('.model-btn').forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+  selectedModel = btn.dataset.model;
+}
+// ── Check server status ───────────────────────────────────────────────────
+async function checkStatus() {
+  const dot = document.getElementById('dot');
+  const txt = document.getElementById('status-text');
+  try {
+    const r = await fetch('/api/status');
+    const d = await r.json();
+    if (d.status === 'ok' && d.nvidia_key_set) {
+      dot.className = 'dot ok';
+      txt.textContent = 'Connecté';
+    } else {
+      dot.className = 'dot err';
+      txt.textContent = d.nvidia_key_set ? 'Proxy démarrage...' : 'Clé NVIDIA manquante';
+    }
+  } catch {
+    dot.className = 'dot err';
+    txt.textContent = 'Hors ligne';
+  }
+}
+// ── Render markdown simple ────────────────────────────────────────────────
+function renderMarkdown(text) {
+  return text
+    .replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) =>
+      `<pre><code class="lang-${lang}">${escHtml(code.trim())}</code></pre>`)
+    .replace(/`([^`]+)`/g, '<code>$1</code>')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/\n/g, '<br>');
+}
+function escHtml(t) {
+  return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+// ── Add message to UI ─────────────────────────────────────────────────────
+function addMessage(role, content) {
+  const wrap = document.getElementById('messages');
+  const welcome = document.getElementById('welcome');
+  if (welcome) welcome.remove();
+  const div = document.createElement('div');
+  div.className = `msg ${role}`;
+  div.innerHTML = `
+    <div class="avatar">${role === 'user' ? '👤' : '✦'}</div>
+    <div class="bubble" id="msg-${Date.now()}">${
+      role === 'user' ? escHtml(content) : renderMarkdown(content)
+    }</div>`;
+  wrap.appendChild(div);
+  wrap.scrollTop = wrap.scrollHeight;
+  return div.querySelector('.bubble');
+}
+// ── Chip shortcut ─────────────────────────────────────────────────────────
+function send(text) {
+  document.getElementById('input').value = text;
+  sendMsg();
+}
+// ── Send message ──────────────────────────────────────────────────────────
+async function sendMsg() {
+  const input = document.getElementById('input');
+  const text = input.value.trim();
+  if (!text || isLoading) return;
+  isLoading = true;
+  document.getElementById('send').disabled = true;
+  input.value = '';
+  input.style.height = 'auto';
+  addMessage('user', text);
+  history.push({ role: 'user', content: text });
+  const aiBubble = addMessage('ai', '');
+  aiBubble.innerHTML = '<span class="cursor"></span>';
+  try {
+    const resp = await fetch('/api/chat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        model: selectedModel,
+        max_tokens: 2048,
+        messages: history
+      })
+    });
+    const data = await resp.json();
+    const reply = data?.content?.[0]?.text || data?.error || 'Erreur inconnue';
+    aiBubble.innerHTML = renderMarkdown(reply);
+    history.push({ role: 'assistant', content: reply });
+    const msgs = document.getElementById('messages');
+    msgs.scrollTop = msgs.scrollHeight;
+  } catch (err) {
+    aiBubble.innerHTML = `<span style="color:var(--red)">Erreur: ${err.message}</span>`;
+  }
+  isLoading = false;
+  document.getElementById('send').disabled = false;
+  input.focus();
+}
+// Init
+checkStatus();
+setInterval(checkStatus, 30000);
+</script>
+</body>
+</html>