Skip to content

Commit 9ef1fa5

Browse files
stduhpfstduhpf
committed
server: progress
1 parent e5faf4f commit 9ef1fa5

File tree

2 files changed

+287
-127
lines changed

2 files changed

+287
-127
lines changed

‎examples/server/frontend.cpp‎

Lines changed: 98 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const std::string html_content = R"xxx(
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="shortcut icon" href="data:image/png;base64,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" />
78
<title>SDCPP Server</title>
89
<style>
910
body {
@@ -136,7 +137,7 @@ const std::string html_content = R"xxx(
136137
border-radius: 5px;
137138
cursor: pointer;
138139
font-size: 16px;
139-
margin-top: 10px;
140+
height: 3rem;
140141
}
141142
progress {
142143
width: 100%;
@@ -221,10 +222,17 @@ R"xxx(
221222
<label for="neg_prompt">Negative Prompt:</label>
222223
<textarea id="neg_prompt" class="prompt-input"></textarea>
223224
</div>
225+
<button onclick="generateImage()">Generate</button>
224226
</div>
225-
<button onclick="generateImage()">Generate</button>
226227
<div class="section">
227228
<h2>Settings</h2>
229+
<div class="line">
230+
<div class="input-group">
231+
<label for="lora_model">Select LoRA:</label>
232+
<select id="lora_model" class="param-input"></select>
233+
</div>
234+
<button onclick="addLora()">Add LoRA</button>
235+
</div>
228236
<div class="line">
229237
<div class="input-group">
230238
<label for="width">Width:</label>
@@ -311,56 +319,62 @@ R"xxx(
311319
<div class="input-group">
312320
<label for="model">Model:</label>
313321
<select id="model" class="param-input">
314-
<option value="" selected>keep current</option>
315-
<option value="none">None</option>
322+
<option value="-1" selected>keep current</option>
323+
<option value="-2">None</option>
316324
</select>
317325
</div>
318326
<div class="input-group">
319327
<label for="diff-model">Diffusion Model:</label>
320328
<select id="diff-model" class="param-input">
321-
<option value="" selected>keep current</option>
322-
<option value="none">None</option>
329+
<option value="-1" selected>keep current</option>
330+
<option value="-2">None</option>
323331
</select>
324332
</div>
325333
<div class="line">
326334
<div class="input-group">
327335
<label for="clip_l">Clip_L:</label>
328336
<select id="clip_l" class="param-input">
329-
<option value="" selected>keep current</option>
330-
<option value="none">None</option>
337+
<option value="-1" selected>keep current</option>
338+
<option value="-2">None</option>
331339
</select>
332340
</div>
333341
<div class="input-group">
334342
<label for="clip_g">Clip_G:</label>
335343
<select id="clip_g" class="param-input">
336-
<option value="" selected>keep current</option>
337-
<option value="none">None</option>
344+
<option value="-1" selected>keep current</option>
345+
<option value="-2">None</option>
338346
</select>
339347
</div>
340348
<div class="input-group">
341349
<label for="t5xxl">T5 XXL:</label>
342350
<select id="t5xxl" class="param-input">
343-
<option value="" selected>keep current</option>
344-
<option value="none">None</option>
351+
<option value="-1" selected>keep current</option>
352+
<option value="-2">None</option>
345353
</select>
346354
</div>
347355
</div>
348356
<div class="line">
349357
<div class="input-group">
350358
<label for="vae">VAE:</label>
351359
<select id="vae" class="param-input">
352-
<option value="" selected>keep current</option>
353-
<option value="none">None</option>
360+
<option value="-1" selected>keep current</option>
361+
<option value="-2">None</option>
354362
</select>
355363
</div>
356364
<div class="input-group">
357365
<label for="tae">TAE:</label>
358366
<select id="tae" class="param-input">
359-
<option value="" selected>keep current</option>
360-
<option value="none">None</option>
367+
<option value="-1" selected>keep current</option>
368+
<option value="-2">None</option>
361369
</select>
362370
</div>
363371
</div>
372+
<div class="input-group">
373+
<label for="type">Force Quantization:</label>
374+
<select id="type" class="param-input">
375+
<option value="" selected>No</option>
376+
</select>
377+
</div>
364378
</div>
365379
</div>
366380
</div>
@@ -382,6 +396,13 @@ R"xxx(
382396
)xxx"
383397
R"xxx(
384398
<script>
399+
async function addLora() {
400+
const lora_str = document.getElementById('lora_model').value;
401+
if (lora_str) {
402+
const prompt = document.getElementById('prompt');
403+
prompt.value += "<lora:" + lora_str + ":1>";
404+
}
405+
}
385406
let queued_tasks = 0;
386407
async function update_queue() {
387408
const display = document.getElementById('queued_tasks');
@@ -458,112 +479,140 @@ R"xxx(
458479
});
459480
}
460481
}
461-
async function fetchModelsEncodersAE() {
482+
async function fetchTypes() {
483+
const response = await fetch('/types');
484+
const data = await response.json();
485+
const select = document.getElementById('type');
486+
if (data) {
487+
data.forEach(type => {
488+
const option = document.createElement('option');
489+
option.value = type;
490+
option.textContent = type;
491+
select.appendChild(option);
492+
});
493+
}
494+
}
495+
async function fetchModels() {
462496
const response = await fetch('/models');
463497
const data = await response.json();
464498
const modelsSelect = document.getElementById('model');
465499
if (data.models.length > 0) {
466500
data.models.forEach(model => {
467501
const option = document.createElement('option');
468-
option.value = model;
469-
option.textContent = model;
502+
option.value = model.id;
503+
option.textContent = model.name;
470504
modelsSelect.appendChild(option);
471505
});
472506
} else {
473507
modelsSelect.options.length = 1;
474508
const currentOption = modelsSelect.options[0];
475509
currentOption.select = true;
476-
currentOption.value = "";
510+
currentOption.value = "-1";
477511
currentOption.textContent = "unavailable";
478512
}
479513
const diffModelsSelect = document.getElementById('diff-model');
480514
if (data.diffusion_models.length > 0) {
481515
data.diffusion_models.forEach(model => {
482516
const option = document.createElement('option');
483-
option.value = model;
484-
option.textContent = model;
517+
option.value = model.id;
518+
option.textContent = model.name;
485519
diffModelsSelect.appendChild(option);
486520
});
487521
} else {
488522
diffModelsSelect.options.length = 1;
489523
const currentOption = diffModelsSelect.options[0];
490524
currentOption.select = true;
491-
currentOption.value = "";
525+
currentOption.value = "-1";
492526
currentOption.textContent = "unavailable";
493527
}
494528
const clipLSelect = document.getElementById('clip_l');
495529
if (data.text_encoders.length > 0) {
496530
data.text_encoders.forEach(encoder => {
497531
const option = document.createElement('option');
498-
option.value = encoder;
499-
option.textContent = encoder;
532+
option.value = encoder.id;
533+
option.textContent = encoder.name;
500534
clipLSelect.appendChild(option);
501535
});
502536
} else {
503537
clipLSelect.options.length = 1;
504538
const currentOption = clipLSelect.options[0];
505539
currentOption.select = true;
506-
currentOption.value = "";
540+
currentOption.value = "-1";
507541
currentOption.textContent = "unavailable";
508542
}
509543
const clipGSelect = document.getElementById('clip_g');
510544
if (data.text_encoders.length > 0) {
511545
data.text_encoders.forEach(encoder => {
512546
const option = document.createElement('option');
513-
option.value = encoder;
514-
option.textContent = encoder;
547+
option.value = encoder.id;
548+
option.textContent = encoder.name;
515549
clipGSelect.appendChild(option);
516550
});
517551
} else {
518552
clipGSelect.options.length = 1;
519553
const currentOption = clipGSelect.options[0];
520554
currentOption.select = true;
521-
currentOption.value = "";
555+
currentOption.value = "-1";
522556
currentOption.textContent = "unavailable";
523557
}
524558
const t5xxlSelect = document.getElementById('t5xxl');
525559
if (data.text_encoders.length > 0) {
526560
data.text_encoders.forEach(encoder => {
527561
const option = document.createElement('option');
528-
option.value = encoder;
529-
option.textContent = encoder;
562+
option.value = encoder.id;
563+
option.textContent = encoder.name;
530564
t5xxlSelect.appendChild(option);
531565
});
532566
} else {
533567
t5xxlSelect.options.length = 1;
534568
const currentOption = t5xxlSelect.options[0];
535569
currentOption.select = true;
536-
currentOption.value = "";
570+
currentOption.value = "-1";
537571
currentOption.textContent = "unavailable";
538572
}
539573
const vaeSelect = document.getElementById('vae');
540574
if (data.vaes.length > 0) {
541575
data.vaes.forEach(ae => {
542576
const option = document.createElement('option');
543-
option.value = ae;
544-
option.textContent = ae;
577+
option.value = ae.id;
578+
option.textContent = ae.name;
545579
vaeSelect.appendChild(option);
546580
});
547581
} else {
548582
vaeSelect.options.length = 1;
549583
const currentOption = vaeSelect.options[0];
550584
currentOption.select = true;
551-
currentOption.value = "";
585+
currentOption.value = "-1";
552586
currentOption.textContent = "unavailable";
553587
}
554588
const taeSelect = document.getElementById('tae');
555589
if (data.taes.length > 0) {
556590
data.taes.forEach(ae => {
557591
const option = document.createElement('option');
558-
option.value = ae;
559-
option.textContent = ae;
592+
option.value = ae.id;
593+
option.textContent = ae.name;
560594
taeSelect.appendChild(option);
561595
});
562596
} else {
563597
taeSelect.options.length = 1;
564598
const currentOption = taeSelect.options[0];
565599
currentOption.select = true;
566-
currentOption.value = "";
600+
currentOption.value = "-1";
601+
currentOption.textContent = "unavailable";
602+
}
603+
const loraSelect = document.getElementById('lora_model');
604+
if (data.loras.length > 0) {
605+
data.loras.forEach(lora => {
606+
const option = document.createElement('option');
607+
option.value = lora;
608+
option.textContent = lora;
609+
loraSelect.appendChild(option);
610+
});
611+
} else {
612+
loraSelect.options.length = 1;
613+
const currentOption = loraSelect.options[0];
614+
currentOption.select = true;
615+
currentOption.value = null;
567616
currentOption.textContent = "unavailable";
568617
}
569618
}
@@ -595,9 +644,10 @@ R"xxx(
595644
fetchSampleMethods();
596645
fetchSchedules();
597646
fetchPreviewMethods();
598-
fetchModelsEncodersAE();
647+
fetchModels();
599648
fetchModelId();
600649
fetchParams();
650+
fetchTypes();
601651
// )xxx" R"xxx(
602652
async function generateImage() {
603653
queued_tasks++;
@@ -626,6 +676,7 @@ R"xxx(
626676
const tae_decode = document.getElementById('tae_decode').checked;
627677
const preview_mode = document.getElementById('preview_mode').value;
628678
const preview_interval = document.getElementById('preview_interval').value;
679+
const type = document.getElementById('type').value;
629680
const canvas = document.getElementById('imageCanvas');
630681
const ctx = canvas.getContext('2d');
631682
const downloadLink = document.getElementById('downloadLink');
@@ -641,19 +692,20 @@ R"xxx(
641692
...(seed && { seed: parseInt(seed) }),
642693
...(batch_count && { batch_count: parseInt(batch_count) }),
643694
...(schedule_method && { schedule: schedule_method }),
644-
...(model && { model: model }),
645-
...(diff_model && { diffusion_model: diff_model }),
646-
...(clip_l && { clip_l: clip_l }),
647-
...(clip_g && { clip_g: clip_g }),
648-
...(t5xxl && { t5xxl: t5xxl }),
649-
...(vae && { vae: vae }),
650-
...(tae && { tae: tae }),
695+
... { model: parseInt(model) },
696+
... { diffusion_model: parseInt(diff_model) },
697+
... { clip_l: parseInt(clip_l) },
698+
... { clip_g: parseInt(clip_g) },
699+
... { t5xxl: parseInt(t5xxl) },
700+
... { vae: parseInt(vae) },
701+
... { tae: parseInt(tae) },
651702
... { vae_on_cpu: vae_on_cpu },
652703
... { clip_on_cpu: clip_on_cpu },
653704
... { vae_tiling: vae_tiling },
654705
... { tae_decode: tae_decode },
655706
...(preview_mode && { preview_mode: preview_mode }),
656707
...(preview_interval && { preview_interval: parseInt(preview_interval) }),
708+
... (type && { type: type }),
657709
};
658710
const response = await fetch('/txt2img', {
659711
method: 'POST',

0 commit comments

Comments
 (0)