Help! Build my own frontend instead of using gradio. #16310
-
|
What are the key architectural changes required to replace Gradio with a custom React UI in terms of frontend-backend interaction? |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 16 replies
-
|
It would probably be simplest to run it with Here's a txt2img example in vanilla javascript. You may also need txt2img.htm
<html>
<body>
<textarea rows="8" cols="50" id="prompt" placeholder="Prompt"></textarea>
<textarea rows="8" cols="50" id="neg_prompt" placeholder="Negative prompt"></textarea>
<br>
<button id="btn_generate">Generate</button>
<progress id="progress" max="1" value="0"></progress>
<div style="display: flex; gap: 4px;">
<img id="output" style="width: 512; height: 768;">
<span id="info" style="font-family: monospace; white-space: pre-line;"></span>
</div>
<script src="txt2img.js"></script>
</body>
</html>txt2img.js
document.querySelector("#btn_generate").addEventListener("click", txt2img);
var progressInterval;
var apiAddress = "http://127.0.0.1:7860"
async function txt2img() {
const payload = {
prompt: document.querySelector("#prompt").value,
negative_prompt: document.querySelector("#neg_prompt").value,
sampler_name: "Euler a",
steps: 20,
width: 512,
height: 768,
cfg_scale: 4,
};
progressInterval = setInterval(progress, 100);
const response = await fetch(apiAddress + "/sdapi/v1/txt2img", {
headers: {
"Content-Type": "application/json"
},
method: "POST",
body: JSON.stringify(payload)
});
const json = await response.json();
document.querySelector("#output").src = "data:image/png;base64," + json.images[0];
document.querySelector("#info").textContent = JSON.parse(json.info).infotexts[0];
clearInterval(progressInterval);
progressInterval = null;
}
async function progress() {
const response = await fetch(apiAddress + "/sdapi/v1/progress");
const json = await response.json();
document.querySelector("#progress").value = json.progress;
if (json.current_image && progressInterval) {
document.querySelector("#output").src = "data:image/png;base64," + json.current_image;
}
} |
Beta Was this translation helpful? Give feedback.
-
|
Which endpoint is responsible for the model selection i check many endpoint but i didn't find the possible solution any suggestion accordingly, basically i want to swith instantly between downloaded models but currently i can't even switch from the base model available in auto code. |
Beta Was this translation helpful? Give feedback.
-
|
await fetch("http://127.0.0.1:7860/sdapi/v1/options", {
headers: {
"Content-Type": "application/json"
},
method: "POST",
body: {
sd_model_checkpoint: "v1-5-pruned-emaonly.safetensors"
}
});Model menu example: models.htm
<html>
<body>
<select id="model_list" style="width: 250px;"></select>
<button id="btn_refresh_model">Refresh</button>
<br>
<select id="vae_list" style="width: 250px;"></select>
<button id="btn_refresh_vae">Refresh</button>
<script src="models.js"></script>
</body>
</html>models.js
document.querySelector("#btn_refresh_model").addEventListener("click", getModels);
document.querySelector("#btn_refresh_vae").addEventListener("click", getVAEs);
document.querySelector("#model_list").addEventListener("change", loadModel);
document.querySelector("#vae_list").addEventListener("change", loadVAE);
addEventListener("load", getModels);
addEventListener("load", getVAEs);
var apiAddress = "http://127.0.0.1:7860";
async function getOptions() {
const response = await fetch(apiAddress + "/sdapi/v1/options");
const json = await response.json();
return json;
}
async function setOptions(payload) {
await fetch(apiAddress + "/sdapi/v1/options", {
headers: {
"Content-Type": "application/json"
},
method: "POST",
body: JSON.stringify(payload)
});
}
async function getModels() {
await fetch(apiAddress + "/sdapi/v1/refresh-checkpoints", {
method: "POST"
});
const response = await fetch(apiAddress + "/sdapi/v1/sd-models");
const json = await response.json();
const options = await getOptions();
const list = document.querySelector("#model_list");
list.replaceChildren();
for (const item of json) {
list.add(new Option(item.title));
}
list.value = options.sd_model_checkpoint;
}
async function getVAEs() {
await fetch(apiAddress + "/sdapi/v1/refresh-vae", {
method: "POST"
});
const response = await fetch(apiAddress + "/sdapi/v1/sd-vae");
var json = await response.json();
console.log(json);
const options = await getOptions();
const list = document.querySelector("#vae_list");
list.replaceChildren();
list.add(new Option("Automatic"));
list.add(new Option("None"));
for (const item of json) {
list.add(new Option(item.model_name));
}
list.value = options.sd_vae;
}
async function loadModel() {
const list = document.querySelector("#model_list");
const payload = {
sd_model_checkpoint: list.value
};
list.disabled = true;
await setOptions(payload);
list.disabled = false;
}
async function loadVAE() {
const list = document.querySelector("#vae_list");
const payload = {
sd_vae: list.value
};
list.disabled = true;
await setOptions(payload);
list.disabled = false;
} |
Beta Was this translation helpful? Give feedback.
-
|
When we try to switch the model it take approximately 50 sec to switch it from one model to another so tell me how model works in memory why he take so much time to just change the model? And also tell how i switch model from api their is only one model which is default is selct but modle is not switching to another model. I used http://34.222.8.90:7860/sdapi/v1/options this post endpoint for model switching but it only return null. |
Beta Was this translation helpful? Give feedback.
-
|
This appears to be the answer we're looking for, how do you make this work? |
Beta Was this translation helpful? Give feedback.
-
|
I will try that now |
Beta Was this translation helpful? Give feedback.
-
Hi @missionfloyd Now it accepts the prompt, then progress bar running,
These are the contents
Any thoughts? [ UPDATE ] One thing though, i have this scrolling thingy for progress bar on the terminal INFO: 127.0.0.1:59024 - "GET /sdapi/v1/progress HTTP/1.1" 200 OK |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much @missionfloyd |
Beta Was this translation helpful? Give feedback.
-
|
This part is weird, instead of updating, it scrolls until it hits 100% |
Beta Was this translation helpful? Give feedback.
-
|
still have not found a way for this continuous echo in terminal to not scroll |
Beta Was this translation helpful? Give feedback.
/sdapi/v1/optionsGET retrieves current settings, POST sets them.
Model menu example:
models.htm
models.js