delete

2023-04-19 19:11:20 -04:00
parent 252fbee998
commit a9737148e6
5 changed files with 0 additions and 177 deletions
@@ -1,31 +0,0 @@
 import os
 from http.server import SimpleHTTPRequestHandler, HTTPServer
 from urllib.parse import urlparse
 class JPEGRequestHandler(SimpleHTTPRequestHandler):
    def do_GET(self):
        url = urlparse(self.path)
        path = url.path
        if path.endswith('.jpg'):
            file_path = path[1:]
            if os.path.isfile(file_path):
                self.send_response(200)
                self.send_header('Content-Type', 'image/jpeg')
                self.end_headers()
                with open(file_path, 'rb') as file:
                    self.wfile.write(file.read())
            else:
                self.send_error(404, 'File not found')
        else:
            self.send_error(403, 'Only .jpg files are allowed')
 def run(server_class=HTTPServer, handler_class=JPEGRequestHandler, port=8000):
    server_address = ('', port)
    httpd = server_class(server_address, handler_class)
    print(f'Serving JPEGs on port {port}...')
    httpd.serve_forever()
 if __name__ == '__main__':
    run()
@@ -1,146 +0,0 @@
 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>D3.js Image Loading Time Graph</title>
        <script src="https://d3js.org/d3.v5.min.js"></script>
        <style>
            /* Add some basic styling for the chart */
            .bar {
                fill: steelblue;
            }
            .bar:hover {
                fill: brown;
            }
            .axis {
                font: 10px sans-serif;
            }
            .axis path,
            .axis line {
                fill: none;
                stroke: #000;
                shape-rendering: crispEdges;
            }
        </style>
    </head>
    <body>
        <div id="chart"></div>
        <div id="stats"></div>
        <script>
        // Generate the list of image URLs named kublai0.jpg to kublai118.jpg
        const numberOfImages = 119;
        const imagePrefix = 'http://localhost:8000/kublai';
        const imageExtension = '.jpg';
        const images = [];
        for (let i = 0; i < numberOfImages; i++) {
            const imageName = `${imagePrefix}${i}${imageExtension}`;
            images.push(imageName);
        }
        // Disable caching using cache-buster technique
        const cacheBuster = (url) => `${url}?${new Date().getTime()}`;
        // Load images and measure their loading times
        const loadImages = async () => {
            const loadingTimes = [];
            for (const url of images) {
                const startTime = performance.now();
                const img = new Image();
                img.src = cacheBuster(url);
                img.style.display = 'none';
                document.body.appendChild(img);
                await new Promise((resolve) => {
                    img.onload = () => {
                        const endTime = performance.now();
                        loadingTimes.push(endTime - startTime);
                        resolve();
                    };
                });
            }
            return loadingTimes;
        };
        // Create a D3.js bar chart to visualize loading times
        const createChart = (data) => {
            const margin = { top: 20, right: 20, bottom: 30, left: 40 },
                width = 1280 - margin.left - margin.right,
                height = 500 - margin.top - margin.bottom;
            const x = d3.scaleBand().rangeRound([0, width]).padding(0.1);
            const y = d3.scaleLinear().rangeRound([height, 0]);
            const svg = d3.select('#chart')
                .append('svg')
                .attr('width', width + margin.left + margin.right)
                .attr('height', height + margin.top + margin.bottom)
                .append('g')
                .attr('transform', `translate(${margin.left},${margin.top})`);
            x.domain(data.map((d, i) => i));
            y.domain([0, d3.max(data)]);
            svg.append('g')
                .attr('class', 'axis axis--x')
                .attr('transform', `translate(0,${height})`)
                .call(d3.axisBottom(x));
            svg.append('g')
                .attr('class', 'axis axis--y')
                .call(d3.axisLeft(y).ticks(10))
                .append('text')
                .attr('transform', 'rotate(-90)')
                .attr('y', 6)
                .attr('dy', '0.71em')
                .attr('text-anchor', 'end')
                .text('Loading Time (ms)');
            svg.selectAll('.bar')
                .data(data)
                .enter().append('rect')
                .attr('class', 'bar')
                .attr('x', (d, i) => x(i))
                .attr('y', (d) => y(d))
                .attr('width', x.bandwidth())
                .attr('height', (d) => height - y(d));
            const stats = document.getElementById('stats');
            let textContent = '';
            let average = 0;
            let sum = 0;
            let min = parseFloat(data[0]);
            let max = parseFloat(data[0]);
            for(datum of data) {
                loadingTime = parseFloat(datum)
                sum = sum + loadingTime
                if(loadingTime > max) {
                    max = loadingTime;
                }
                if(loadingTime < min) {
                    min = loadingTime;
                }
            }
            average = sum / data.length
            textContent = 
                'Total: ' + sum + 
                ' Average: ' + average + 
                ' Min: ' + min + 
                ' Max: ' + max;
            stats.textContent = textContent;
        };
        // Load images and create the chart
        (async () => {
            const loadingTimes = await loadImages();
            createChart(loadingTimes);
        })();
    </script>
 </body>
 </html>