Skip to content

Commit 4a1fb94

Browse files
stduhpfstduhpf
committed
update progress bars (+fixes)
1 parent a1e82ec commit 4a1fb94

File tree

2 files changed

+50
-18
lines changed

2 files changed

+50
-18
lines changed

‎examples/server/frontend.cpp‎

Lines changed: 41 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,7 @@ const std::string html_content = R"xxx(
157157
height: 100%;
158158
}
159159
.imageFrame {
160+
margin-top: auto;
160161
border: 1px solid #ccc;
161162
width: 512px;
162163
height: 512px;
@@ -176,12 +177,30 @@ const std::string html_content = R"xxx(
176177
.left-section,
177178
.right-section {
178179
width: 50%;
180+
height: 100%;
179181
}
180182
.imageFrame {
181183
max-width: 45vw;
182184
max-height: 45vw;
183185
}
184186
}
187+
progress {
188+
border: none;
189+
width: 100%;
190+
height: 8px;
191+
margin-inline: auto;
192+
}
193+
progress::-webkit-progress-value {
194+
background-color: blue;
195+
}
196+
.bars {
197+
margin-bottom: 10%;
198+
height: max-content;
199+
display: flex;
200+
width: 80%;
201+
flex-direction: column;
202+
margin-top: auto;
203+
}
185204
</style>
186205
</head>
187206
)xxx"
@@ -350,7 +369,11 @@ R"xxx(
350369
<canvas id="imageCanvas" width="512" height="512"></canvas>
351370
</div>
352371
<a id="downloadLink" style="display: none;" download="generated_image.png">Download Image</a>
353-
<progress style="display: none;" id="progress" value="0" max="100"> 0% </progress>
372+
<div class="bars">
373+
<progress id="load_progress" value="0" max="100"> 0% </progress>
374+
<progress id="work_progress" value="0" max="100"> 0% </progress>
375+
<progress id="vae_progress" value="0" max="100"> 0% </progress>
376+
</div>
354377
</div>
355378
</div>
356379
<div class="status">
@@ -642,16 +665,12 @@ R"xxx(
642665
const data = await response.json();
643666
const taskId = data.task_id;
644667
let status = 'Pending';
645-
const progressBar = document.getElementById("progress");
646668
while (status !== 'Done' && status !== 'Failed') {
647669
const statusResponse = await fetch(`/result?task_id=${taskId}`);
648670
const statusData = await statusResponse.json();
649671
if (status == 'Pending' && statusData.status != status) {
650-
//Task has started, update
651672
setTimeout(() => {
652673
fetchModelId();
653-
// Updating params can be annoying, let's just hope they are taken into account
654-
// fetchParams();
655674
const modelsSelect = document.getElementById('model');
656675
const diffModelsSelect = document.getElementById('diff-model');
657676
const clipLSelect = document.getElementById('clip_l');
@@ -666,12 +685,23 @@ R"xxx(
666685
t5xxlSelect.selectedIndex = 0;
667686
vaeSelect.selectedIndex = 0;
668687
taeSelect.selectedIndex = 0;
688+
document.getElementById("load_progress").value = 0;
689+
document.getElementById("work_progress").value = 0;
690+
document.getElementById("vae_progress").value = 0;
669691
}, 0);
670692
}
671693
status = statusData.status;
694+
if (status !== "Pending" && status !== "Loading") {
695+
const progressBar = document.getElementById("load_progress");
696+
progressBar.value = 1;
697+
progressBar.max = 1;
698+
progressBar.innerHTML = "100%";
699+
progressBar.style.display = 'inline-block';
700+
}
701+
const progressBar = status === "Loading" ? document.getElementById("load_progress") : status === "Working" ? document.getElementById("work_progress") : document.getElementById("vae_progress");
672702
document.getElementById('status').innerHTML = status;
673-
if (statusData.step >= 0) {
674-
progressBar.value = statusData.step;
703+
if (status !== 'Done' && statusData.step >= 0) {
704+
progressBar.value = statusData.step;
675705
progressBar.max = statusData.steps ?? steps;
676706
progressBar.innerHTML = Math.floor(100 * statusData.step / statusData.steps) + "%";
677707
progressBar.style.display = 'inline-block';
@@ -706,10 +736,11 @@ R"xxx(
706736
} else if (status === 'Failed') {
707737
alert('Image generation failed');
708738
}
709-
await new Promise(resolve => setTimeout(resolve, 250));
739+
await new Promise(resolve => setTimeout(resolve, 100));
710740
}
711-
progressBar.value = steps;
712-
progressBar.innerHTML = "100%";
741+
document.getElementById("load_progress").value = document.getElementById("load_progress").max;
742+
document.getElementById("work_progress").value = document.getElementById("work_progress").max;
743+
document.getElementById("vae_progress").value = document.getElementById("vae_progress").max;
713744
queued_tasks--;
714745
update_queue();
715746
}

‎examples/server/main.cpp‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1088,12 +1088,12 @@ void update_progress_cb(int step, int steps, float time, void* _data) {
10881088
using json = nlohmann::json;
10891089
if (running_task_id != "") {
10901090
std::lock_guard<std::mutex> results_lock(results_mutex);
1091-
json running_task_json = task_results[running_task_id];
1092-
running_task_json["step"] = step;
1093-
running_task_json["steps"] = steps;
1094-
if (running_task_json["status"] == "Working" && step == steps) {
1091+
json running_task_json = task_results[running_task_id];
1092+
if (running_task_json["status"] == "Working" && running_task_json["step"] == running_task_json["steps"]) {
10951093
running_task_json["status"] = "Decoding";
10961094
}
1095+
running_task_json["step"] = step;
1096+
running_task_json["steps"] = steps;
10971097
task_results[running_task_id] = running_task_json;
10981098
}
10991099
}
@@ -1137,7 +1137,7 @@ void start_server(SDParams params) {
11371137
pending_task_json["status"] = "Pending";
11381138
pending_task_json["data"] = json::array();
11391139
pending_task_json["step"] = -1;
1140-
pending_task_json["steps"] = -1;
1140+
pending_task_json["steps"] = 0;
11411141
pending_task_json["eta"] = "?";
11421142

11431143
std::lock_guard<std::mutex> results_lock(results_mutex);
@@ -1183,7 +1183,7 @@ void start_server(SDParams params) {
11831183
task_json["status"] = "Loading";
11841184
task_json["data"] = json::array();
11851185
task_json["step"] = -1;
1186-
task_json["step"] = -1;
1186+
task_json["steps"] = 0;
11871187
task_json["eta"] = "?";
11881188

11891189
std::lock_guard<std::mutex> results_lock(results_mutex);
@@ -1225,7 +1225,7 @@ void start_server(SDParams params) {
12251225
started_task_json["status"] = "Working";
12261226
started_task_json["data"] = json::array();
12271227
started_task_json["step"] = 0;
1228-
started_task_json["step"] = params.lastRequest.sample_steps;
1228+
started_task_json["steps"] = params.lastRequest.sample_steps;
12291229
started_task_json["eta"] = "?";
12301230

12311231
std::lock_guard<std::mutex> results_lock(results_mutex);
@@ -1300,7 +1300,8 @@ void start_server(SDParams params) {
13001300
json end_task_json = json::object();
13011301
end_task_json["status"] = "Done";
13021302
end_task_json["data"] = images_json;
1303-
end_task_json["step"] = 0;
1303+
end_task_json["step"] = -1;
1304+
end_task_json["steps"] = 0;
13041305
end_task_json["eta"] = "?";
13051306
std::lock_guard<std::mutex> results_lock(results_mutex);
13061307
task_results[task_id] = end_task_json;

0 commit comments

Comments
 (0)