Spaces:

euler314
/

speed_test

Sleeping

App Files Files Community

euler314 commited on Sep 26, 2025

Commit

be7a3f2

verified ·

1 Parent(s): 89408c1

Upload 2 files

Browse files

Files changed (2) hide show

app.py +241 -183
requirements.txt +2 -2

app.py CHANGED Viewed

@@ -1,190 +1,248 @@
-# app.py
-from flask import Flask, Response, request, jsonify
 import os
-app = Flask(__name__)
-# ——————————————————————————————
-# Configuration: Test size = 1 GiB
-# ——————————————————————————————
-DOWNLOAD_SIZE_BYTES = 1 * 1024 * 1024 * 1024  # 1 GiB
-# ——————————————————————————————
-# Generator for streaming 1 GiB of random bytes in 10 MiB chunks
-# ——————————————————————————————
-def generate_random_blob():
-    sent = 0
-    chunk_size = 10 * 1024 * 1024  # 10 MiB per chunk
-    while sent < DOWNLOAD_SIZE_BYTES:
-        to_send = min(chunk_size, DOWNLOAD_SIZE_BYTES - sent)
-        yield os.urandom(to_send)
-        sent += to_send
-# ——————————————————————————————
-# Route: “/” – serve the HTML + JS client
-# ——————————————————————————————
-@app.route("/")
-def index():
-    html = """
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-      <meta charset="UTF-8" />
-      <title>Client-Side Speed Test (1 GiB)</title>
-      <style>
-        body { font-family: sans-serif; max-width: 600px; margin: 2em auto; }
-        button { padding: 0.5em 1em; font-size: 1rem; }
-        .result { margin-top: 1.5em; }
-        .label { font-weight: bold; }
-      </style>
-    </head>
-    <body>
-      <h2>Wi-Fi / Ethernet Speed Test (Up to 1 GiB)</h2>
-      <p>This test will measure your real Internet speed by downloading <strong>1 GiB</strong> of random data and uploading <strong>1 GiB</strong> back to the server. All timing runs entirely in your browser.</p>
-      <button id="startBtn">Start Speed Test</button>
-      <div class="result" id="results" style="display: none;">
-        <p><span class="label">Download Speed:</span> <span id="dlSpeed">–</span></p>
-        <p><span class="label">Upload Speed:</span> <span id="ulSpeed">–</span></p>
-        <p><span class="label">Ping:</span> <span id="ping">–</span></p>
-      </div>
-      <script>
-        const startBtn = document.getElementById("startBtn");
-        const resultsDiv = document.getElementById("results");
-        const dlSpan = document.getElementById("dlSpeed");
-        const ulSpan = document.getElementById("ulSpeed");
-        const pingSpan = document.getElementById("ping");
-        // Convert bits/sec to Mbps string
-        function toMbps(bits) {
-          return (bits / 1e6).toFixed(2) + " Mbps";
-        }
-        startBtn.addEventListener("click", async () => {
-          startBtn.disabled = true;
-          resultsDiv.style.display = "block";
-          dlSpan.textContent = "Testing…";
-          ulSpan.textContent = "Testing…";
-          pingSpan.textContent = "Testing…";
-          // 1) Measure ping: 5 tiny GETs to /ping_test
-          let pingTimes = [];
-          for (let i = 0; i < 5; i++) {
-            const t0 = performance.now();
-            await fetch("/ping_test?t=" + i, { cache: "no-store" });
-            const t1 = performance.now();
-            pingTimes.push(t1 - t0);
-          }
-          const avgPing = pingTimes.reduce((a, b) => a + b, 0) / pingTimes.length;
-          pingSpan.textContent = avgPing.toFixed(2) + " ms";
-          // 2) Download test: stream 1 GiB from /download_test
-          const dlStart = performance.now();
-          const response = await fetch("/download_test", { cache: "no-store" });
-          const reader = response.body.getReader();
-          let dlBytes = 0;
-          while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-            dlBytes += value.length;
-          }
-          const dlEnd = performance.now();
-          const dlBits = dlBytes * 8;
-          const dlDurationSec = (dlEnd - dlStart) / 1000;
-          const dlSpeedBps = dlBits / dlDurationSec;
-          dlSpan.textContent = toMbps(dlSpeedBps);
-          // 3) Upload test: stream 1 GiB of random data to /upload_test
-          const uploadTotalBytes = dlBytes; // should be 1 GiB
-          const chunkSize = 10 * 1024 * 1024; // 10 MiB
-          let sentBytes = 0;
-          const uploadStream = new ReadableStream({
-            start(controller) {
-              function pushChunk() {
-                if (sentBytes >= uploadTotalBytes) {
-                  controller.close();
-                  return;
-                }
-                const size = Math.min(chunkSize, uploadTotalBytes - sentBytes);
-                const chunk = new Uint8Array(size);
-                window.crypto.getRandomValues(chunk);
-                controller.enqueue(chunk);
-                sentBytes += size;
-                // immediately queue next
-                pushChunk();
-              }
-              pushChunk();
-            }
-          });
-          const ulStart = performance.now();
-          await fetch("/upload_test", {
-            method: "POST",
-            headers: { "Content-Type": "application/octet-stream" },
-            body: uploadStream
-          });
-          const ulEnd = performance.now();
-          const ulDurationSec = (ulEnd - ulStart) / 1000;
-          const ulBits = uploadTotalBytes * 8;
-          const ulSpeedBps = ulBits / ulDurationSec;
-          ulSpan.textContent = toMbps(ulSpeedBps);
-          startBtn.disabled = false;
-        });
-      </script>
-    </body>
-    </html>
-    """
-    return Response(html, mimetype="text/html")
-# ——————————————————————————————
-# Route: /ping_test – empty 200 response for ping
-# ——————————————————————————————
-@app.route("/ping_test")
-def ping_test():
-    return Response(status=200)
-# ——————————————————————————————
-# Route: /download_test – stream 1 GiB of random data
-# ——————————————————————————————
-@app.route("/download_test")
-def download_test():
     headers = {
-        "Content-Disposition": f"attachment; filename=\"test_{DOWNLOAD_SIZE_BYTES}.bin\"",
         "Content-Length": str(DOWNLOAD_SIZE_BYTES),
-        "Cache-Control": "no-store"
     }
-    return Response(
-        generate_random_blob(),
-        mimetype="application/octet-stream",
-        headers=headers
-    )
-# ——————————————————————————————
-# Route: /upload_test – consume uploaded data in chunks and return JSON
-# ——————————————————————————————
-@app.route("/upload_test", methods=["POST"])
-def upload_test():
-    total = 0
-    # Read the incoming stream in 1 MiB chunks and discard
-    while True:
-        chunk = request.stream.read(1 * 1024 * 1024)
-        if not chunk:
-            break
-        total += len(chunk)
-    # total should be near 1 GiB if upload completed
-    return jsonify({"received_bytes": total})
-# ——————————————————————————————
-# Run the Flask app on port 7860
-# ——————————————————————————————
 if __name__ == "__main__":
-    app.run(host="0.0.0.0", port=7860, debug=False)

 import os
+import time
+from fastapi import FastAPI, Request
+from fastapi.responses import JSONResponse, Response
+import gradio as gr
+DOWNLOAD_SIZE_BYTES = 10 * 1024 * 1024
+_RANDOM_BLOB = os.urandom(DOWNLOAD_SIZE_BYTES)
+NO_CACHE_HEADERS = {
+    "Cache-Control": "no-store, no-cache, must-revalidate, max-age=0",
+    "Pragma": "no-cache",
+    "Expires": "0",
+}
+fastapi_app = FastAPI()
+@fastapi_app.get("/ping_test")
+async def ping_test() -> Response:
+    headers = {**NO_CACHE_HEADERS, "Content-Length": "4", "X-Server-Timestamp": str(time.time())}
+    return Response(content="pong", media_type="text/plain", headers=headers)
+@fastapi_app.get("/download_test")
+async def download_test() -> Response:
     headers = {
+        **NO_CACHE_HEADERS,
         "Content-Length": str(DOWNLOAD_SIZE_BYTES),
+        "Content-Disposition": f'attachment; filename="speedtest_{DOWNLOAD_SIZE_BYTES}.bin"',
     }
+    return Response(content=_RANDOM_BLOB, media_type="application/octet-stream", headers=headers)
+@fastapi_app.post("/upload_test")
+async def upload_test(request: Request) -> JSONResponse:
+    payload = await request.body()
+    headers = dict(NO_CACHE_HEADERS)
+    return JSONResponse({"received_bytes": len(payload)}, headers=headers)
+LIBRESPEED_HTML = """
+<style>
+  .speedtest-container {
+    font-family: 'Segoe UI', Arial, sans-serif;
+    max-width: 640px;
+    margin: 0 auto;
+    padding: 32px 24px 40px;
+    background: #ffffff;
+    border-radius: 16px;
+    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
+  }
+  .speedtest-heading { margin: 0 0 8px; font-size: 1.9rem; }
+  .speedtest-lead { color: #475569; line-height: 1.55; }
+  .speedtest-button {
+    appearance: none;
+    border: none;
+    border-radius: 999px;
+    padding: 14px 28px;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #fff;
+    background: linear-gradient(135deg, #2563eb, #9333ea);
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+  .speedtest-button:disabled { opacity: 0.5; cursor: progress; transform: none; box-shadow: none; }
+  .speedtest-button:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(79, 70, 229, 0.25); }
+  .speedtest-results { margin-top: 32px; display: none; }
+  .speedtest-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 20px;
+  }
+  .metric-card {
+    background: #f8fafc;
+    border-radius: 12px;
+    padding: 18px 20px;
+    text-align: center;
+    border: 1px solid #e2e8f0;
+  }
+  .metric-label { display: block; font-weight: 600; color: #334155; margin-bottom: 6px; }
+  .metric-value { font-size: 1.6rem; font-variant-numeric: tabular-nums; color: #111827; }
+  .metric-subtext { margin-top: 10px; color: #64748b; font-size: 0.9rem; }
+  .speedtest-log {
+    margin-top: 28px;
+    padding: 16px;
+    font-family: 'JetBrains Mono', 'Fira Mono', Menlo, monospace;
+    font-size: 0.85rem;
+    line-height: 1.45;
+    background: #0f172a;
+    color: #e2e8f0;
+    border-radius: 12px;
+    max-height: 220px;
+    overflow-y: auto;
+    white-space: pre-wrap;
+  }
+</style>
+<div class="speedtest-container">
+  <h2 class="speedtest-heading">Wi-Fi / Ethernet Speed Test</h2>
+  <p class="speedtest-lead">Run a download, upload, and latency check right from your browser. Results reflect the real connection between this device and Hugging Face Spaces.</p>
+  <button id="startBtn" class="speedtest-button">Start Speed Test</button>
+  <div id="results" class="speedtest-results">
+    <div class="speedtest-grid">
+      <div class="metric-card">
+        <span class="metric-label">Download</span>
+        <span id="dlSpeed" class="metric-value">–</span>
+        <div class="metric-subtext">Average throughput in Mbps</div>
+      </div>
+      <div class="metric-card">
+        <span class="metric-label">Upload</span>
+        <span id="ulSpeed" class="metric-value">–</span>
+        <div class="metric-subtext">Average throughput in Mbps</div>
+      </div>
+      <div class="metric-card">
+        <span class="metric-label">Ping</span>
+        <span id="ping" class="metric-value">–</span>
+        <div class="metric-subtext">Round-trip latency in ms</div>
+      </div>
+    </div>
+    <div id="log" class="speedtest-log"></div>
+  </div>
+</div>
+<script>
+  const startBtn = document.getElementById('startBtn');
+  const resultsDiv = document.getElementById('results');
+  const dlSpan = document.getElementById('dlSpeed');
+  const ulSpan = document.getElementById('ulSpeed');
+  const pingSpan = document.getElementById('ping');
+  const logView = document.getElementById('log');
+  function log(message) {
+    const timestamp = new Date().toLocaleTimeString();
+    logView.textContent += '[' + timestamp + '] ' + message + '\n';
+    logView.scrollTop = logView.scrollHeight;
+  }
+  function formatMbps(bitsPerSecond) {
+    if (!Number.isFinite(bitsPerSecond) || bitsPerSecond <= 0) {
+      return '0.00 Mbps';
+    }
+    return (bitsPerSecond / 1e6).toFixed(2) + ' Mbps';
+  }
+  async function measurePing(attempts = 5) {
+    const samples = [];
+    for (let i = 0; i < attempts; i++) {
+      const start = performance.now();
+      const response = await fetch('/ping_test?i=' + i + '&cacheBust=' + Math.random(), { cache: 'no-store' });
+      if (!response.ok) {
+        throw new Error('Ping request failed with status ' + response.status);
+      }
+      await response.text();
+      const end = performance.now();
+      samples.push(end - start);
+    }
+    const avg = samples.reduce((acc, cur) => acc + cur, 0) / samples.length;
+    return avg;
+  }
+  async function measureDownload() {
+    const start = performance.now();
+    const response = await fetch('/download_test', { cache: 'no-store' });
+    if (!response.ok) {
+      throw new Error('Download request failed with status ' + response.status);
+    }
+    const blob = await response.blob();
+    const end = performance.now();
+    const durationSeconds = (end - start) / 1000;
+    const bitsTransferred = blob.size * 8;
+    return { bitsTransferred, durationSeconds };
+  }
+  async function measureUpload(bytesToSend) {
+    const randomData = new Uint8Array(bytesToSend);
+    crypto.getRandomValues(randomData);
+    const start = performance.now();
+    const response = await fetch('/upload_test', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/octet-stream' },
+      body: randomData,
+    });
+    const end = performance.now();
+    if (!response.ok) {
+      throw new Error('Upload request failed with status ' + response.status);
+    }
+    const json = await response.json();
+    if (!json || typeof json.received_bytes !== 'number') {
+      throw new Error('Upload response missing received_bytes.');
+    }
+    const durationSeconds = (end - start) / 1000;
+    const bitsTransferred = json.received_bytes * 8;
+    return { bitsTransferred, durationSeconds };
+  }
+  startBtn.addEventListener('click', async () => {
+    startBtn.disabled = true;
+    resultsDiv.style.display = 'block';
+    dlSpan.textContent = 'Testing…';
+    ulSpan.textContent = 'Testing…';
+    pingSpan.textContent = 'Testing…';
+    logView.textContent = '';
+    try {
+      log('Measuring ping…');
+      const pingMs = await measurePing();
+      pingSpan.textContent = pingMs.toFixed(2) + ' ms';
+      log('Average ping: ' + pingSpan.textContent);
+      log('Running download test (10 MiB)…');
+      const downloadResult = await measureDownload();
+      const downloadBps = downloadResult.bitsTransferred / downloadResult.durationSeconds;
+      dlSpan.textContent = formatMbps(downloadBps);
+      log('Download duration: ' + downloadResult.durationSeconds.toFixed(2) + ' s');
+      log('Download speed: ' + dlSpan.textContent);
+      log('Running upload test (10 MiB)…');
+      const uploadResult = await measureUpload(downloadResult.bitsTransferred / 8);
+      const uploadBps = uploadResult.bitsTransferred / uploadResult.durationSeconds;
+      ulSpan.textContent = formatMbps(uploadBps);
+      log('Upload duration: ' + uploadResult.durationSeconds.toFixed(2) + ' s');
+      log('Upload speed: ' + ulSpan.textContent);
+      log('Speed test complete. Start again for a fresh run.');
+    } catch (error) {
+      console.error(error);
+      const message = error && error.message ? error.message : String(error);
+      log('Error: ' + message);
+      dlSpan.textContent = 'Error';
+      ulSpan.textContent = 'Error';
+      pingSpan.textContent = 'Error';
+    } finally {
+      startBtn.disabled = false;
+    }
+  });
+</script>
+"""
+with gr.Blocks(fill_height=True) as demo:
+    gr.HTML(value=LIBRESPEED_HTML, sanitize=False)
+app = gr.mount_gradio_app(fastapi_app, demo, path="/")
 if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

requirements.txt CHANGED Viewed

@@ -1,3 +1,3 @@
 # requirements.txt
-speedtest-cli==2.1.3
-flask==2.3.2

 # requirements.txt
+gradio==5.33.0
+uvicorn[standard]==0.30.1