Spaces:

barokastor
/

anycoder-5464bcd1

Running

App Files Files Community

barokastor commited on 30 days ago

Commit

27b03cf

verified ·

1 Parent(s): d9e477c

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +761 -19

index.html CHANGED Viewed

@@ -1,19 +1,761 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="tr">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Hugging Face Bağlantı Testi</title>
+  <meta name="description"
+    content="Hugging Face’e bağlanamıyorum hatası için basit bağlantı testi ve DNS/Geo/IP bilgileri. Türkçe arayüz, modern ve duyarlı tasarım." />
+  <style>
+    :root {
+      --bg: #0b0f14;
+      --bg2: #0e131a;
+      --text: #e6edf3;
+      --muted: #9aa5b1;
+      --border: #1c2530;
+      --card: #0f1620;
+      --ok: #10b981;
+      --warn: #f59e0b;
+      --bad: #ef4444;
+      --accent: #7c3aed;
+      --accent2: #22d3ee;
+      --shadow: 0 10px 30px rgba(0, 0, 0, .35);
+      --radius: 16px;
+    }
+    @media (prefers-color-scheme: light) {
+      :root {
+        --bg: #f8fafc;
+        --bg2: #f1f5f9;
+        --text: #0b1220;
+        --muted: #475569;
+        --border: #e2e8f0;
+        --card: #ffffff;
+        --shadow: 0 8px 24px rgba(0, 0, 0, .08);
+      }
+    }
+    * {
+      box-sizing: border-box
+    }
+    html,
+    body {
+      height: 100%
+    }
+    body {
+      margin: 0;
+      background: radial-gradient(1200px 600px at 10% -10%, rgba(124, 58, 237, .15), transparent 60%),
+        radial-gradient(1200px 600px at 110% 10%, rgba(34, 211, 238, .12), transparent 60%),
+        var(--bg);
+      color: var(--text);
+      font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+    }
+    .wrap {
+      max-width: 1100px;
+      margin: 0 auto;
+      padding: 24px
+    }
+    header.hero {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      margin: 12px 0 20px;
+    }
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+    }
+    .brand .logo {
+      width: 42px;
+      height: 42px;
+      border-radius: 12px;
+      background: conic-gradient(from 200deg at 50% 50%, var(--accent), var(--accent2));
+      box-shadow: var(--shadow);
+      position: relative;
+      isolation: isolate;
+    }
+    .brand .logo::after {
+      content: "";
+      position: absolute;
+      inset: 2px;
+      border-radius: 10px;
+      background: var(--card);
+      mix-blend-mode: screen;
+      opacity: .65;
+    }
+    .brand .title {
+      font-weight: 700;
+      font-size: 22px;
+      letter-spacing: .2px;
+    }
+    .brand .subtitle {
+      font-size: 13px;
+      color: var(--muted);
+      margin-top: 2px
+    }
+    .actions {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+    button.btn {
+      appearance: none;
+      border: 1px solid var(--border);
+      background: linear-gradient(180deg, var(--bg2), var(--card));
+      color: var(--text);
+      padding: 10px 14px;
+      border-radius: 12px;
+      cursor: pointer;
+      font-weight: 600;
+      letter-spacing: .2px;
+      box-shadow: var(--shadow);
+      transition: .2s transform ease, .2s filter ease, .2s background ease;
+    }
+    button.btn:hover {
+      transform: translateY(-1px)
+    }
+    button.btn:active {
+      transform: translateY(0)
+    }
+    button.primary {
+      background: linear-gradient(180deg, rgba(124, 58, 237, .25), rgba(124, 58, 237, .1));
+      border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
+    }
+    .hint {
+      font-size: 13px;
+      color: var(--muted)
+    }
+    .grid {
+      display: grid;
+      gap: 16px;
+      grid-template-columns: 1fr;
+    }
+    @media (min-width:860px) {
+      .grid {
+        grid-template-columns: 1.1fr .9fr
+      }
+    }
+    .card {
+      background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 60%), var(--card);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      box-shadow: var(--shadow);
+      padding: 16px;
+    }
+    .card h3 {
+      margin: 6px 0 10px;
+      font-size: 18px
+    }
+    .status {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px;
+      border: 1px dashed var(--border);
+      border-radius: 12px;
+      background: linear-gradient(180deg, rgba(124, 58, 237, .05), transparent 70%);
+    }
+    .dot {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: var(--bad);
+      box-shadow: 0 0 0 4px rgba(239, 68, 68, .12);
+    }
+    .dot.ok {
+      background: var(--ok);
+      box-shadow: 0 0 0 4px rgba(16, 185, 129, .12)
+    }
+    .dot.warn {
+      background: var(--warn);
+      box-shadow: 0 0 0 4px rgba(245, 158, 11, .12)
+    }
+    .row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      flex-wrap: wrap
+    }
+    .progress {
+      width: 100%;
+      height: 10px;
+      border-radius: 999px;
+      background: rgba(148, 163, 184, .25);
+      overflow: hidden;
+      margin-top: 12px
+    }
+    .bar {
+      height: 100%;
+      width: 0%;
+      background: linear-gradient(90deg, var(--accent), var(--accent2));
+      transition: width .3s ease;
+      border-radius: inherit
+    }
+    .kv {
+      display: grid;
+      grid-template-columns: 140px 1fr;
+      gap: 10px;
+      font-size: 14px;
+      margin-top: 10px
+    }
+    .kv div {
+      color: var(--muted)
+    }
+    .kv strong {
+      color: var(--text);
+      font-weight: 600
+    }
+    .tests {
+      display: grid;
+      gap: 10px;
+      margin-top: 6px
+    }
+    .test {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px;
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 60%)
+    }
+    .pill {
+      padding: 4px 8px;
+      border-radius: 999px;
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: .3px;
+      border: 1px solid var(--border);
+      color: var(--muted)
+    }
+    .pill.ok {
+      color: #065f46;
+      background: rgba(16, 185, 129, .2);
+      border-color: rgba(16, 185, 129, .35)
+    }
+    .pill.bad {
+      color: #7f1d1d;
+      background: rgba(239, 68, 68, .18);
+      border-color: rgba(239, 68, 68, .35)
+    }
+    .pill.warn {
+      color: #78350f;
+      background: rgba(245, 158, 11, .18);
+      border-color: rgba(245, 158, 11, .35)
+    }
+    .test .name {
+      flex: 1 1 auto
+    }
+    .test .meta {
+      color: var(--muted);
+      font-size: 12px
+    }
+    .footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      margin-top: 18px;
+      flex-wrap: wrap;
+      color: var(--muted);
+      font-size: 13px
+    }
+    a.inline {
+      color: var(--accent);
+      text-decoration: none;
+      border-bottom: 1px dashed color-mix(in oklab, var(--accent) 60%, transparent)
+    }
+    a.inline:hover {
+      opacity: .85
+    }
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      border: 1px solid var(--border);
+      padding: 8px 10px;
+      border-radius: 12px;
+      background: linear-gradient(180deg, rgba(124, 58, 237, .09), rgba(124, 58, 237, .03));
+    }
+    .tiny {
+      font-size: 12px;
+      color: var(--muted);
+      margin-top: 8px
+    }
+    .mono {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
+    }
+    .kbd {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      font-size: 12px;
+      border: 1px solid var(--border);
+      padding: 2px 6px;
+      border-radius: 6px;
+      background: var(--bg2);
+      color: var(--muted)
+    }
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <header class="hero">
+      <div class="brand">
+        <div class="logo" aria-hidden="true"></div>
+        <div>
+          <div class="title">Hugging Face Bağlantı Testi</div>
+          <div class="subtitle">huggingface.co bağlanmayı reddetti hatası için hızlı teşhis ve durum paneli</div>
+        </div>
+      </div>
+      <div class="actions">
+        <button class="btn primary" id="runBtn">Yeniden dene</button>
+        <button class="btn" id="autoBtn">Otomatik aç/kapar</button>
+      </div>
+    </header>
+    <div class="grid">
+      <section class="card">
+        <div class="row">
+          <h3>Genel durum</h3>
+          <div class="hint" id="lastRun">Son test: —</div>
+        </div>
+        <div class="status" aria-live="polite" aria-atomic="true">
+          <div class="dot" id="statusDot" title="Durum"></div>
+          <div>
+            <div id="statusTitle" style="font-weight:700">Ölçüm bekleniyor…</div>
+            <div id="statusMsg" class="hint">Bağlantıyı doğrulamak için küçük bir istek gönderiyoruz.</div>
+            <div class="progress" title="İlerleme">
+              <div class="bar" id="progressBar"></div>
+            </div>
+          </div>
+        </div>
+        <div style="margin-top:14px">
+          <div class="row">
+            <h3 style="margin:0">Ağ bilgileri</h3>
+            <span class="badge">
+              <span style="width:8px;height:8px;border-radius:50%;background:var(--accent2);display:inline-block"></span>
+            Canlı
+            </span>
+          </div>
+          <div class="kv">
+            <div>İnternet</div>
+            <div id="netInfo">—</div>
+            <div>IP</div>
+            <div id="ipInfo">Tespit ediliyor…</div>
+            <div>DNS (1.1.1.1)</div>
+            <div id="dnsCloudflare" class="mono">—</div>
+            <div>DNS (8.8.8.8)</div>
+            <div id="dnsGoogle" class="mono">—</div>
+          </div>
+          <div class="tiny">IP bilgisi <a class="inline" href="https://api.ipify.org?format=json" target="_blank"
+              rel="noopener">api.ipify.org</a> üzerinden alınmaktadır.</div>
+        </div>
+        <div style="margin-top:16px">
+          <div class="row">
+            <h3 style="margin:0">Hızlı aç</h3>
+            <div class="hint">Aşağıdaki bağlantılar site açıldığında çalışacaktır</div>
+          </div>
+          <div class="row" style="margin-top:8px; gap:8px">
+            <a class="btn" target="_blank" rel="noopener" href="https://huggingface.co/">Hugging Face Ana Sayfa</a>
+            <a class="btn" target="_blank" rel="noopener" href="https://huggingface.co/models">Models</a>
+            <a class="btn" target="_blank" rel="noopener" href="https://huggingface.co/datasets">Datasets</a>
+            <a class="btn" target="_blank" rel="noopener" href="https://huggingface.co/spaces">Spaces</a>
+          </div>
+        </div>
+      </section>
+      <section class="card">
+        <div class="row">
+          <h3>Test detayları</h3>
+          <div class="hint">Hedefler ve sonuçlar</div>
+        </div>
+        <div class="tests" id="tests"></div>
+        <div style="margin-top:16px">
+          <h3 style="margin:0 0 8px">Öneriler</h3>
+          <ul class="hint" style="margin:0 0 0 18px">
+            <li>İnternet bağlantınızı ve Wi‑Fi/Ethernet’in durumunu kontrol edin.</li>
+            <li>Bir VPN kullanıyorsanız geçici olarak kapatın.</li>
+            <li>DNS sunucularınızı 1.1.1.1 veya 8.8.8.8 olarak ayarlayın.</li>
+            <li>Antivirüs/Güvenlik Duvarı uygulaması huggingface.co’yu engelliyor olabilir.</li>
+            <li>Tarayıcınızın DNS önbelleğini temizleyin: <span class="kbd">ipconfig /flushdns</span> (Windows) veya
+              <span class="kbd">sudo dscacheutil -flushcache</span> (macOS).
+            </li>
+            <li>Tarayıcı eklentileri (özellikle reklam engelleyicileri) baz istekleri engelleyebilir.</li>
+          </ul>
+        </div>
+      </section>
+    </div>
+    <div class="footer">
+      <div>
+        <strong>Durum özeti:</strong>
+        <span id="summaryText">—</span>
+      </div>
+      <div>
+        <span class="hint">Altyapı desteği:</span>
+        <a class="inline" href="https://huggingface.co/" target="_blank" rel="noopener">huggingface.co</a>
+        <span class="hint"> • </span>
+        <a class="inline" href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener">Built
+          with anycoder</a>
+      </div>
+    </div>
+  </div>
+  <script>
+    // Utility: time formatting in Turkish
+    const fmtTime = (d=new Date()) => d.toLocaleString('tr-TR', {hour:'2-digit', minute:'2-digit', second:'2-digit'});
+    const fmtDate = (d=new Date()) => d.toLocaleString('tr-TR', {day:'2-digit', month:'short', year:'numeric'});
+    const $ = (sel, parent=document) => parent.querySelector(sel);
+    // Build a tiny, modern spinner
+    const makeSpinner = (size=16) => {
+      const s = document.createElement('span');
+      s.style.cssText = `
+        width:${size}px;height:${size}px;border:2px solid rgba(255,255,255,.25);
+        border-top-color:var(--accent2); border-radius:50%; display:inline-block;
+        animation: spin 1s linear infinite;
+      `;
+      const style = document.createElement('style');
+      style.textContent = `@keyframes spin{to{transform:rotate(360deg)}}`;
+      document.head.append(style);
+      return s;
+    };
+    // Image test for a given URL, resolve/reject by load/error
+    function imageTest(url, timeout=7000){
+      return new Promise((resolve, reject)=>{
+        const img = new Image();
+        let done = false;
+        const tidy = ()=>{
+          if(done) return;
+          done = true;
+          clearTimeout(to);
+          img.onload = img.onerror = null;
+        };
+        const to = setTimeout(()=>{ tidy(); reject(new Error('timeout')); }, timeout);
+        img.onload = ()=>{ tidy(); resolve({url, status:'ok'}); };
+        img.onerror = ()=>{ tidy(); reject(new Error('load error')); };
+        img.referrerPolicy = 'no-referrer';
+        // cache-bust to avoid accidental cached "error"
+        img.src = url + (url.includes('?') ? '&' : '?') + 't=' + Date.now();
+      });
+    }
+    // Quick fetch to HF APIs to see if CORS / connectivity is there
+    async function quickFetchCheck(url){
+      try{
+        const r = await fetch(url, {mode:'cors', cache:'no-store'});
+        return {url, status: r.ok ? 'ok' : 'warn', http: r.status};
+      }catch(e){
+        return {url, status:'bad', error: String(e && e.message || e)};
+      }
+    }
+    // DNS resolution attempt via platform (not standard web, but modern browsers may support)
+    async function resolveHost(host){
+      try{
+        if('resolveDNS' in window && typeof window.resolveDNS === 'function'){
+          const addrs = await window.resolveDNS(host);
+          return Array.isArray(addrs) ? addrs : [String(addrs)];
+        }
+      }catch(_){}
+      try{
+        const res = await fetch(`https://dns.google/resolve?name=${encodeURIComponent(host)}&type=A`);
+        const js = await res.json();
+        const addrs = (js && js.Answer || []).filter(a=>a.type===1).map(a=>a.data);
+        return addrs.length ? addrs : null;
+      }catch(_){
+        return null;
+      }
+    }
+    // Build test list UI
+    const targets = [
+      {
+        id:'hf_home',
+        title:'Ana Sayfa (huggingface.co)',
+        url:'https://huggingface.co/',
+        note:'HTTP 200',
+        type:'fetch',
+        checker: ()=>quickFetchCheck('https://huggingface.co/')
+      },
+      {
+        id:'hf_avatar',
+        title:'Hesap Avatar Görseli (CDN)',
+        url:'https://huggingface.co/avalonia.ai/resolve/main/README.png',
+        note:'Küçük resim',
+        type:'image',
+        checker: ()=>imageTest('https://huggingface.co/avalonia.ai/resolve/main/README.png')
+      },
+      {
+        id:'hf_models',
+        title:'Models Listesi',
+        url:'https://huggingface.co/models',
+        note:'HTTP 200',
+        type:'fetch',
+        checker: ()=>quickFetchCheck('https://huggingface.co/models')
+      },
+      {
+        id:'hf_spaces',
+        title:'Spaces Listesi',
+        url:'https://huggingface.co/spaces',
+        note:'HTTP 200',
+        type:'fetch',
+        checker: ()=>quickFetchCheck('https://huggingface.co/spaces')
+      },
+      {
+        id:'hf_api_models',
+        title:'HF API: /api/models (JSON)',
+        url:'https://huggingface.co/api/models?sort=downloads&direction=-1&limit=1',
+        note:'JSON CORS',
+        type:'fetch',
+        checker: ()=>quickFetchCheck('https://huggingface.co/api/models?limit=1')
+      }
+    ];
+    const testContainer = $('#tests');
+    function renderTestList(){
+      testContainer.innerHTML = '';
+      for(const t of targets){
+        const row = document.createElement('div');
+        row.className = 'test';
+        row.id = 'test-' + t.id;
+        const badge = document.createElement('span');
+        badge.className = 'pill';
+        badge.textContent = t.type.toUpperCase();
+        badge.title = 'Test tipi';
+        const name = document.createElement('div');
+        name.className = 'name';
+        name.innerHTML = `<div style="font-weight:600">${t.title}</div><div class="meta">${t.note}</div>`;
+        const url = document.createElement('div');
+        url.className = 'meta mono';
+        url.style.maxWidth = '340px';
+        url.style.overflow = 'hidden';
+        url.style.textOverflow = 'ellipsis';
+        url.style.whiteSpace = 'nowrap';
+        url.textContent = t.url;
+        const status = document.createElement('span');
+        status.className = 'pill';
+        status.id = `status-${t.id}`;
+        status.textContent = 'bekleniyor…';
+        row.appendChild(badge);
+        row.appendChild(name);
+        row.appendChild(url);
+        row.appendChild(status);
+        testContainer.appendChild(row);
+      }
+    }
+    // Update a test row status
+    function setTestStatus(id, status, extra=''){
+      const el = document.getElementById('status-' + id);
+      if(!el) return;
+      el.className = 'pill ' + (status==='ok' ? 'ok' : status==='bad' ? 'bad' : status==='warn' ? 'warn' : '');
+      el.textContent = status==='ok' ? 'başarılı' : status==='bad' ? 'başarısız' : status==='warn' ? 'uyarı' : 'bekleniyor…';
+      if(extra){
+        el.title = extra;
+      }
+    }
+    // Aggregate status UI
+    const dot = $('#statusDot');
+    const progressBar = $('#progressBar');
+    const statusTitle = $('#statusTitle');
+    const statusMsg = $('#statusMsg');
+    const lastRun = $('#lastRun');
+    const summaryText = $('#summaryText');
+    function setGlobalStatus(kind, title, msg, progress=null){
+      dot.className = 'dot ' + (kind==='ok' ? 'ok' : kind==='warn' ? 'warn' : 'bad');
+      statusTitle.textContent = title;
+      statusMsg.textContent = msg;
+      if(progress!==null) progressBar.style.width = Math.max(2, Math.min(100, progress)) + '%';
+    }
+    // IP + DNS info
+    async function refreshNetInfo(){
+      const netInfo = $('#netInfo');
+      const ipInfo = $('#ipInfo');
+      netInfo.textContent = navigator.onLine ? 'Çevrimiçi' : 'Çevrimdışı';
+      // IP from ipify
+      try{
+        const res = await fetch('https://api.ipify.org?format=json', {cache:'no-store'});
+        const js = await res.json();
+        ipInfo.textContent = js.ip || '—';
+      }catch(_){
+        ipInfo.textContent = 'Alınamadı';
+      }
+      // DNS resolve attempt
+      const dnsCF = $('#dnsCloudflare');
+      const dnsGG = $('#dnsGoogle');
+      dnsCF.textContent = '…';
+      dnsGG.textContent = '…';
+      const [cf, gg] = await Promise.allSettled([
+        resolveHost('huggingface.co'),
+        resolveHost('huggingface.co')
+      ]);
+      const toList = (p)=> p.status==='fulfilled' && Array.isArray(p.value) && p.value.length ? p.value.join(', ') : 'Çözümlenemedi';
+      dnsCF.textContent = toList(cf);
+      dnsGG.textContent = toList(gg);
+    }
+    // Main runner
+    let autoTimer = null;
+    async function runTest(){
+      renderTestList();
+      const startedAt = new Date();
+      lastRun.textContent = `Son test: ${fmtDate(startedAt)} • ${fmtTime(startedAt)}`;
+      let okCount = 0, badCount = 0, warnCount = 0;
+      const total = targets.length;
+      // Reset UI
+      setGlobalStatus('warn', 'Test çalışıyor…', 'Lütfen bekleyin, birkaç küçük istek yapıyoruz.', 5);
+      summaryText.textContent = 'ölçüm devam ediyor…';
+      // Run checks with concurrency
+      try{
+        await refreshNetInfo();
+      }catch(_){}
+      const tasks = targets.map(async (t, i)=>{
+        try{
+          setTestStatus(t.id, 'warn', 'kontrol ediliyor…');
+          const spinner = makeSpinner(14);
+          const pill = document.getElementById('status-' + t.id);
+          const prev = pill.textContent;
+          pill.textContent = '';
+          pill.appendChild(spinner);
+          pill.title = 'Kontrol ediliyor…';
+          const res = await t.checker();
+          // Cleanup spinner
+          pill.removeChild(spinner);
+          if(res.status === 'ok'){
+            okCount++;
+            setTestStatus(t.id, 'ok', res.http ? `HTTP ${res.http}` : 'OK');
+          }else if(res.status === 'warn'){
+            warnCount++;
+            setTestStatus(t.id, 'warn', res.http ? `HTTP ${res.http}` : 'Uyarı');
+          }else{
+            badCount++;
+            setTestStatus(t.id, 'bad', res.error ? res.error : 'Başarısız');
+          }
+        }catch(e){
+          badCount++;
+          setTestStatus(t.id, 'bad', (e && e.message) || 'Başarısız');
+        }finally{
+          const pct = Math.round(((i+1)/total)*100);
+          progressBar.style.width = pct + '%';
+        }
+      });
+      await Promise.allSettled(tasks);
+      // Summarize
+      let kind = 'bad';
+      if(okCount === total) kind = 'ok';
+      else if(okCount >= Math.ceil(total/2)) kind = 'warn';
+      const title = kind==='ok' ? 'Bağlantı başarılı'
+                  : kind==='warn' ? 'Kısmi sorun olabilir'
+                  : 'Bağlantı başarısız';
+      const detail = `${okCount}/${total} kontrol başarılı`;
+      setGlobalStatus(kind, title, detail, 100);
+      summaryText.textContent = detail;
+      // If mostly OK, open HF in a new tab (only if user pressed "Yeniden dene" recently? Keep conservative: only on auto? We won’t auto-open silently; only update UI).
+      // Provide a hint:
+      statusMsg.title = 'Aşağıdaki "Hızlı aç" bağlantılarını kullanabilirsiniz.';
+    }
+    // Wire buttons
+    $('#runBtn').addEventListener('click', ()=>runTest());
+    $('#autoBtn').addEventListener('click', (e)=>{
+      if(autoTimer){
+        clearInterval(autoTimer);
+        autoTimer = null;
+        e.currentTarget.textContent = 'Otomatik aç/kapar';
+        e.currentTarget.classList.remove('primary');
+      }else{
+        e.currentTarget.textContent = 'Otomatik açık (Durdur)';
+        e.currentTarget.classList.add('primary');
+        runTest();
+        autoTimer = setInterval(runTest, 15000);
+      }
+    });
+    // Initial
+    renderTestList();
+    runTest();
+    // Keep net indicator fresh
+    window.addEventListener('online', ()=>refreshNetInfo());
+    window.addEventListener('offline', ()=>refreshNetInfo());
+  </script>
+</body>
+</html>