Skip to content

Instantly share code, notes, and snippets.

@nonodev96

nonodev96/progressMultiple.html

Created June 11, 2023 12:52
Show Gist options
  • Save nonodev96/d09d2a63f5208689e526b34cadd9e73a to your computer and use it in GitHub Desktop.
Save nonodev96/d09d2a63f5208689e526b34cadd9e73a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nonodev96 created this gist Jun 11, 2023.
    105 changes: 105 additions & 0 deletions progressMultiple.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,105 @@
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
    <style>
    progress {
    position: absolute;
    height: 1.25em;
    width: 500px;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    }

    progress::before {
    /* content: "Loading: " attr(value) "%"; */
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: blue;
    border: 0;
    border-radius: 20px;
    }

    progress::-webkit-progress-bar {
    background-color: rgb(203, 203, 203);
    }

    progress::-webkit-progress-value {
    background-color: blue;
    }
    </style>

    </head>

    <body>
    <button onclick="download()">Download</button> <br> <br>

    <span>Progress</span>

    <progress id="download_progress" max="100" value="1"> 1% </progress>


    <script>

    const download_progressElement = document.getElementById("download_progress")
    const init = async function () {
    const promises = [
    fetch("https://storage.googleapis.com/tfjs-models/savedmodel/ssdlite_mobilenet_v2/group1-shard1of5"),
    fetch("https://storage.googleapis.com/tfjs-models/savedmodel/ssdlite_mobilenet_v2/group1-shard2of5"),
    fetch("https://storage.googleapis.com/tfjs-models/savedmodel/ssdlite_mobilenet_v2/group1-shard3of5"),
    fetch("https://storage.googleapis.com/tfjs-models/savedmodel/ssdlite_mobilenet_v2/group1-shard4of5"),
    fetch("https://storage.googleapis.com/tfjs-models/savedmodel/ssdlite_mobilenet_v2/group1-shard5of5")
    ]
    try {
    const responses = await Promise.all(promises)
    console.log({ responses });
    let totalSizeResponses = 0
    let totalSizeDownloads = 0

    async function readFetchs(reader) {
    const result = await reader.read()
    if (result.value) {
    totalSizeDownloads += result.value.length
    const percentage = Math.floor((totalSizeDownloads / totalSizeResponses) * 100)
    download_progressElement.value = percentage
    download_progressElement.textContent = percentage + "%"
    console.log({ totalSizeResponses, totalSizeDownloads, percentage });
    }
    if (!result.done) {
    await readFetchs(reader)
    }
    }

    if (Array.isArray(responses)) {
    for (const response of responses) {
    totalSizeResponses += Number(response.headers.get("content-length"))
    }
    for (const response of responses) {
    const reader = response.body.getReader()
    await readFetchs(reader)
    }
    }
    } catch (error) {
    console.log("catch", error)
    } finally {
    console.log("finally")
    }

    }

    function download() {
    init()
    .then(() => { console.log("end"); })
    }

    </script>
    </body>

    </html>
    93 changes: 93 additions & 0 deletions progressSimple.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,93 @@
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
    <style>
    progress {
    position: absolute;
    height: 1.25em;
    width: 500px;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    }

    progress::before {
    /* content: "Loading: " attr(value) "%"; */
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: blue;
    border: 0;
    border-radius: 20px;
    }

    progress::-webkit-progress-bar {
    background-color: rgb(203, 203, 203);
    }

    progress::-webkit-progress-value {
    background-color: blue;
    }
    </style>

    </head>

    <body>
    <button onclick="download()">Download</button> <br> <br>

    <span>Progress</span>

    <progress id="download_progress" max="100" value="1"> 1% </progress>


    <script>

    const download_progressElement = document.getElementById("download_progress")
    const init = async function () {
    await
    fetch("https://storage.googleapis.com/tfjs-models/savedmodel/ssdlite_mobilenet_v2/group1-shard1of5")
    .then((response) => {
    console.log("response");
    const reader = response.body.getReader()
    const totalSize = Number(response.headers.get("content-length"))
    let totalSizeDownload = 0
    function read() {
    return reader
    .read()
    .then((result) => {
    if (result.value) {
    totalSizeDownload += result.value.length
    const percentage = Math.floor((totalSizeDownload / totalSize) * 100)
    console.log({ totalSizeDownload, totalSize, percentage });
    download_progressElement.value = percentage
    download_progressElement.textContent = percentage + "%"
    }
    if (!result.done) {
    return read()
    }
    })
    }
    read()
    })
    .then(() => { console.log("then"); })
    .catch(() => { console.log("catch"); })
    .finally(() => { console.log("finally"); })
    }

    function download() {
    init()
    .then(() => {
    console.log("end");
    });
    }

    </script>
    </body>

    </html>