Build an Internet Speed Test with AI

Build an internet speed test tool as a single-page HTML application with embedded CSS and JavaScript. The tool should measure the user's download speed, estimate upload speed, and measure latency, all from the browser. Create a centered layout with a large circular SVG speed gauge as the main visual element. The gauge should be a semi-circle (180 degrees) with tick marks at speed intervals (0, 10, 25, 50, 100, 250, 500, 1000 Mbps) using a logarithmic scale. During the test, animate the needle smoothly as the speed is measured. The gauge should glow with a color gradient — blue for slow speeds, green for medium, and purple for fast. Add a large "Start Test" button below the gauge. When clicked, the button should transform into a progress indicator showing which phase is running (Latency, Download, Upload). The test should: 1. Measure latency by timing multiple small fetch requests to the hosting server and averaging the round-trip times. Display as ping in milliseconds. 2. Measure download speed by fetching progressively larger resources from the hosting server. Start with small files and increase size. Use the Resource Timing API and the fetch API with performance.now() to calculate throughput in Mbps. Run multiple parallel downloads to saturate the connection. Display the speed updating in real time on the gauge. 3. Estimate upload speed by sending progressively larger POST requests with random data blobs to a test endpoint (or if no endpoint exists, use a data URI / Blob approach to estimate). Note the limitation clearly if server-side support is unavailable. After the test completes, show a results card with three large metrics: Download speed (Mbps), Upload speed (Mbps), and Ping (ms). Below the metrics, show a "What can you do with this speed?" comparison section: - 4K streaming (25 Mbps needed) — green check or red X - HD video calls (5 Mbps needed) — green check or red X - Online gaming (10 Mbps, <50ms ping) — green check or red X - Large file downloads (50 Mbps+ ideal) — green check or red X - Multiple devices streaming (100 Mbps+ ideal) — green check or red X Show each with a status icon and a brief explanation of whether the user's speed meets the requirement. Store test history in localStorage. Below the current results, display a history table showing the last 20 tests with columns for date/time, download speed, upload speed, ping, and a mini sparkline trend. Include a "Clear History" button and an "Export CSV" button. Add a "Share Result" button that generates a shareable text summary like "My internet speed: 150 Mbps down / 25 Mbps up / 12ms ping — tested with AccessAgent.ai" and copies it to clipboard. Use a dark theme with background #0a0a0f, card backgrounds #12121a, borders #1a1a2a. The gauge should have a subtle glow effect. Speed colors: red for under 10 Mbps, orange for 10-25, yellow for 25-50, green for 50-100, blue for 100-500, purple for 500+. Make the layout responsive and mobile-friendly with the gauge scaling down on small screens. Add a disclaimer that results depend on device, browser, and server proximity. Include a footer crediting AccessAgent.ai. Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].