Spaces:
Sleeping
Sleeping
| # app.py | |
| from flask import Flask, send_file, request, jsonify, Response | |
| import io, os, random | |
| import threading | |
| import time | |
| import gradio as gr | |
| # —————————————————————————————— | |
| # Minimal Flask backend for LibreSpeed-style tests | |
| # —————————————————————————————— | |
| app = Flask(__name__) | |
| # Pre-generate a 10 MiB random blob for download tests | |
| DOWNLOAD_SIZE_BYTES = 10 * 1024 * 1024 # 10 MiB | |
| # We generate once at startup to avoid repeated overhead | |
| _random_blob = os.urandom(DOWNLOAD_SIZE_BYTES) | |
| def download_test(): | |
| """ | |
| Serve a fixed-size blob (10 MiB) to the client for download‐speed measurement. | |
| """ | |
| return Response( | |
| _random_blob, | |
| mimetype="application/octet-stream", | |
| headers={ | |
| "Content-Disposition": f"attachment; filename=\"test_{DOWNLOAD_SIZE_BYTES}.bin\"" | |
| } | |
| ) | |
| def upload_test(): | |
| """ | |
| Accept arbitrary data from client. Return immediately with length for timing. | |
| """ | |
| data = request.get_data() | |
| size = len(data) # bytes received | |
| # We don’t store it; this endpoint exists purely to let the JS measure upload speed. | |
| return jsonify({"received_bytes": size}) | |
| # —————————————————————————————— | |
| # HTML/JS frontend (embedded LibreSpeed logic) | |
| # —————————————————————————————— | |
| LIBRESPEED_HTML = """ | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Client-Side Speed Test</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 (Client-Side)</h2> | |
| <p>This test will measure your real Internet speed by downloading a 10 MiB file and uploading random data.</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"); | |
| // Utility to format bits/sec → Mbps | |
| 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 by sending a tiny GET | |
| 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: fetch the 10 MiB blob, measure duration | |
| const dlUrl = "/download_test"; | |
| const dlStart = performance.now(); | |
| const response = await fetch(dlUrl, { cache: "no-store" }); | |
| const blob = await response.blob(); | |
| const dlEnd = performance.now(); | |
| const dlBytes = blob.size; | |
| const dlBits = dlBytes * 8; | |
| const dlDurationSec = (dlEnd - dlStart) / 1000; | |
| const dlSpeedBps = dlBits / dlDurationSec; // bits/sec | |
| dlSpan.textContent = toMbps(dlSpeedBps); | |
| // 3) Upload test: send a random ArrayBuffer of same size (10 MiB) to /upload_test | |
| // We reuse the DownloadSize for symmetry. In real tests, you might want a smaller upload blob. | |
| const uploadSizeBytes = dlBytes; | |
| // Generate random bytes | |
| const randomBuffer = new Uint8Array(uploadSizeBytes); | |
| window.crypto.getRandomValues(randomBuffer); | |
| const ulStart = performance.now(); | |
| await fetch("/upload_test", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/octet-stream" }, | |
| body: randomBuffer | |
| }); | |
| const ulEnd = performance.now(); | |
| const ulDurationSec = (ulEnd - ulStart) / 1000; | |
| const ulBits = uploadSizeBytes * 8; | |
| const ulSpeedBps = ulBits / ulDurationSec; | |
| ulSpan.textContent = toMbps(ulSpeedBps); | |
| startBtn.disabled = false; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| # Expose the HTML through Gradio’s Interface | |
| def serve_html(): | |
| return LIBRESPEED_HTML | |
| iface = gr.Interface( | |
| fn=serve_html, | |
| inputs=[], | |
| outputs=gr.HTML(label="Speed Test"), | |
| title="Client-Side Speed Test", | |
| description="Measures your actual Internet link (download/upload/ping) via JavaScript." | |
| ) | |
| def gradio_thread(): | |
| """ | |
| Run Gradio in a thread so that Flask and Gradio both serve on the same port. | |
| """ | |
| iface.launch(server_name="0.0.0.0", server_port=7860, share=False) | |
| if __name__ == "__main__": | |
| # 1) Start Gradio in a background thread | |
| t = threading.Thread(target=gradio_thread, daemon=True) | |
| t.start() | |
| # 2) Start Flask to serve endpoints (on port 7860 as well) | |
| # Since Gradio’s Flask is already bound, we just add our routes to the same server. | |
| # Gradio uses Flask under the hood, so these routes will be served automatically. | |
| # (In recent Gradio versions, custom @app routes work if we set `allow_flagging="never"`, etc.) | |
| app.run(host="0.0.0.0", port=7860, debug=False) | |