update progress bars (+fixes)

Author: stduhpf

examples/server/frontend.cpp

@@ -157,6 +157,7 @@ const std::string html_content = R"xxx(
             height: 100%;
         }
         .imageFrame {
+            margin-top: auto;
             border: 1px solid #ccc;
             width: 512px;
             height: 512px;
@@ -176,12 +177,30 @@ const std::string html_content = R"xxx(
             .left-section,
             .right-section {
                 width: 50%;
+                height: 100%;
             }
             .imageFrame {
                 max-width: 45vw;
                 max-height: 45vw;
             }
         }
+        progress {
+            border: none;
+            width: 100%;
+            height: 8px;
+            margin-inline: auto;
+        }
+        progress::-webkit-progress-value {
+            background-color: blue;
+        }
+        .bars {
+            margin-bottom: 10%;
+            height: max-content;
+            display: flex;
+            width: 80%;
+            flex-direction: column;
+            margin-top: auto;
+        }
     </style>
 </head>
 )xxx"
@@ -350,7 +369,11 @@ R"xxx(
                 <canvas id="imageCanvas" width="512" height="512"></canvas>
             </div>
             <a id="downloadLink" style="display: none;" download="generated_image.png">Download Image</a>
-            <progress style="display: none;" id="progress" value="0" max="100"> 0% </progress>
+            <div class="bars">
+                <progress id="load_progress" value="0" max="100"> 0% </progress>
+                <progress id="work_progress" value="0" max="100"> 0% </progress>
+                <progress id="vae_progress" value="0" max="100"> 0% </progress>
+            </div>
         </div>
     </div>
     <div class="status">
@@ -642,16 +665,12 @@ R"xxx(
             const data = await response.json();
             const taskId = data.task_id;
             let status = 'Pending';
-            const progressBar = document.getElementById("progress");
             while (status !== 'Done' && status !== 'Failed') {
                 const statusResponse = await fetch(`/result?task_id=${taskId}`);
                 const statusData = await statusResponse.json();
                 if (status == 'Pending' && statusData.status != status) {
-                    //Task has started, update
                     setTimeout(() => {
                         fetchModelId();
-                        // Updating params can be annoying, let's just hope they are taken into account
-                        // fetchParams();
                         const modelsSelect = document.getElementById('model');
                         const diffModelsSelect = document.getElementById('diff-model');
                         const clipLSelect = document.getElementById('clip_l');
@@ -666,12 +685,23 @@ R"xxx(
                         t5xxlSelect.selectedIndex = 0;
                         vaeSelect.selectedIndex = 0;
                         taeSelect.selectedIndex = 0;
+                        document.getElementById("load_progress").value = 0;
+                        document.getElementById("work_progress").value = 0;
+                        document.getElementById("vae_progress").value = 0;
                     }, 0);
                 }
                 status = statusData.status;
+                if (status !== "Pending" && status !== "Loading") {
+                    const progressBar = document.getElementById("load_progress");
+                    progressBar.value = 1;
+                    progressBar.max = 1;
+                    progressBar.innerHTML = "100%";
+                    progressBar.style.display = 'inline-block';
+                }
+                const progressBar = status === "Loading" ? document.getElementById("load_progress") : status === "Working" ? document.getElementById("work_progress") : document.getElementById("vae_progress");
                 document.getElementById('status').innerHTML = status;
-                if (statusData.step >= 0) {
-                    progressBar.value = statusData.step;    
+                if (status !== 'Done' && statusData.step >= 0) {
+                    progressBar.value = statusData.step;
                     progressBar.max = statusData.steps ?? steps;
                     progressBar.innerHTML = Math.floor(100 * statusData.step / statusData.steps) + "%";
                     progressBar.style.display = 'inline-block';
@@ -706,10 +736,11 @@ R"xxx(
                 } else if (status === 'Failed') {
                     alert('Image generation failed');
                 }
-                await new Promise(resolve => setTimeout(resolve, 250));
+                await new Promise(resolve => setTimeout(resolve, 100));
             }
-            progressBar.value = steps;
-            progressBar.innerHTML = "100%";
+            document.getElementById("load_progress").value = document.getElementById("load_progress").max;
+            document.getElementById("work_progress").value = document.getElementById("work_progress").max;
+            document.getElementById("vae_progress").value = document.getElementById("vae_progress").max;
             queued_tasks--;
             update_queue();
         }

examples/server/main.cpp

@@ -1088,12 +1088,12 @@ void update_progress_cb(int step, int steps, float time, void* _data) {
     using json = nlohmann::json;
     if (running_task_id != "") {
         std::lock_guard<std::mutex> results_lock(results_mutex);
-        json running_task_json     = task_results[running_task_id];
-        running_task_json["step"]  = step;
-        running_task_json["steps"] = steps;
-        if (running_task_json["status"] == "Working" && step == steps) {
+        json running_task_json = task_results[running_task_id];
+        if (running_task_json["status"] == "Working" && running_task_json["step"] == running_task_json["steps"]) {
             running_task_json["status"] = "Decoding";
         }
+        running_task_json["step"]     = step;
+        running_task_json["steps"]    = steps;
         task_results[running_task_id] = running_task_json;
     }
 }
@@ -1137,7 +1137,7 @@ void start_server(SDParams params) {
             pending_task_json["status"] = "Pending";
             pending_task_json["data"]   = json::array();
             pending_task_json["step"]   = -1;
-            pending_task_json["steps"]  = -1;
+            pending_task_json["steps"]  = 0;
             pending_task_json["eta"]    = "?";
 
             std::lock_guard<std::mutex> results_lock(results_mutex);
@@ -1183,7 +1183,7 @@ void start_server(SDParams params) {
                     task_json["status"] = "Loading";
                     task_json["data"]   = json::array();
                     task_json["step"]   = -1;
-                    task_json["step"]   = -1;
+                    task_json["steps"]  = 0;
                     task_json["eta"]    = "?";
 
                     std::lock_guard<std::mutex> results_lock(results_mutex);
@@ -1225,7 +1225,7 @@ void start_server(SDParams params) {
                 started_task_json["status"] = "Working";
                 started_task_json["data"]   = json::array();
                 started_task_json["step"]   = 0;
-                started_task_json["step"]   = params.lastRequest.sample_steps;
+                started_task_json["steps"]  = params.lastRequest.sample_steps;
                 started_task_json["eta"]    = "?";
 
                 std::lock_guard<std::mutex> results_lock(results_mutex);
@@ -1300,7 +1300,8 @@ void start_server(SDParams params) {
                 json end_task_json      = json::object();
                 end_task_json["status"] = "Done";
                 end_task_json["data"]   = images_json;
-                end_task_json["step"]   = 0;
+                end_task_json["step"]   = -1;
+                end_task_json["steps"]   = 0;
                 end_task_json["eta"]    = "?";
                 std::lock_guard<std::mutex> results_lock(results_mutex);
                 task_results[task_id] = end_task_json;