1158 lines
40 KiB
JavaScript
1158 lines
40 KiB
JavaScript
//This function is created to mitigate refresh get old value issue
|
|
window.onload = function() {
|
|
let counter = 0;
|
|
let limit = 10;
|
|
let selectors = [
|
|
"#refresh_api_gateway_url",
|
|
"#refresh_api_token",
|
|
"#refresh_sagemaker_endpoints",
|
|
"#refresh_sd_checkpoints",
|
|
"#refresh_txt2img_inference_job_ids",
|
|
"#refresh_textual_inversion",
|
|
"#refresh_sagemaker_endpoints_delete"
|
|
];
|
|
|
|
let intervalId = setInterval(function() {
|
|
console.log("click refresh when page reloaded");
|
|
|
|
let allElementsFound = true;
|
|
for (let selector of selectors) {
|
|
let element = document.querySelector(selector);
|
|
if (element != null) {
|
|
element.click();
|
|
} else {
|
|
allElementsFound = false;
|
|
console.warn(`Could not find element with selector: ${selector}`);
|
|
}
|
|
}
|
|
|
|
counter++;
|
|
if (counter === limit || allElementsFound) {
|
|
console.log("refresh time:" + counter);
|
|
clearInterval(intervalId);
|
|
}
|
|
}, 2000);
|
|
};
|
|
|
|
|
|
|
|
// Save configuration in txt2img panel
|
|
function getDomValue(selector, defaultValue, isTextContent = false) {
|
|
try {
|
|
const element = document.querySelector(selector);
|
|
if (isTextContent) {
|
|
return element.textContent || defaultValue;
|
|
} else {
|
|
return element.value || defaultValue;
|
|
}
|
|
} catch (error) {
|
|
return defaultValue;
|
|
}
|
|
}
|
|
|
|
// Function to get the selected tab inside the img2img
|
|
function getSelectedButton() {
|
|
// Get the parent element
|
|
let parentDiv = document.querySelector("#mode_img2img > div.tab-nav.scroll-hide.svelte-1g805jl");
|
|
|
|
// Get all the button children
|
|
let buttons = parentDiv.querySelectorAll("button");
|
|
|
|
// Initialize a variable to store the selected button
|
|
let selectedButtonIndex = -1;
|
|
|
|
// Loop through each button
|
|
for (let i = 0; i < buttons.length; i++) {
|
|
// Check if the button has the 'selected' class
|
|
if (buttons[i].classList.contains("selected")) {
|
|
// Store the index of the selected button (add 1 because nth-child is 1-indexed)
|
|
selectedButtonIndex = i + 1;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Create a mapping from child index to a certain value
|
|
let mapping = {
|
|
1: "img2img",
|
|
2: "Sketch",
|
|
3: "Inpaint",
|
|
4: "Inpaint_sketch",
|
|
5: "Inpaint_upload",
|
|
6: "Batch"
|
|
};
|
|
|
|
// Check if a button was selected
|
|
if (selectedButtonIndex != -1) {
|
|
// If yes, return the corresponding value from the mapping
|
|
return mapping[selectedButtonIndex];
|
|
} else {
|
|
// If no button was selected, return a suitable message
|
|
return "No button is selected.";
|
|
}
|
|
}
|
|
|
|
// function to get tab "Restore to" or "Resize by"
|
|
function getSelectedTabResize() {
|
|
// Get the parent element
|
|
let parentDiv = document.querySelector("#component-459 > div.tab-nav.scroll-hide.svelte-1g805jl");
|
|
|
|
// Get all the button children
|
|
let buttons = parentDiv.querySelectorAll("button");
|
|
|
|
// Initialize a variable to store the selected button
|
|
let selectedButtonIndex = -1;
|
|
|
|
// Loop through each button
|
|
for (let i = 0; i < buttons.length; i++) {
|
|
// Check if the button has the 'selected' class
|
|
if (buttons[i].classList.contains("selected")) {
|
|
// Store the index of the selected button (add 1 because nth-child is 1-indexed)
|
|
selectedButtonIndex = i + 1;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Create a mapping from child index to a certain value
|
|
let mapping = {
|
|
1: "ResizeTo",
|
|
2: "ResizeBy"
|
|
};
|
|
|
|
// Check if a button was selected
|
|
if (selectedButtonIndex != -1) {
|
|
// If yes, return the corresponding value from the mapping
|
|
return mapping[selectedButtonIndex];
|
|
} else {
|
|
// If no button was selected, return a suitable message
|
|
return "No tab is selected.";
|
|
}
|
|
}
|
|
|
|
function set_textbox_value(textboxId, newValue) {
|
|
let textbox = document.querySelector(textboxId);
|
|
console.log("Trying to set the value of textBox")
|
|
if (textbox) {
|
|
textbox.textContent = newValue;
|
|
} else {
|
|
console.log("Textbox with id " + textboxId + " not found.");
|
|
}
|
|
}
|
|
|
|
function set_textbox_value_gradio(elementId, newValue) {
|
|
let textbox = gradioApp().getElementById(elementId).querySelector('p');
|
|
console.log("Trying to set the value of textBox")
|
|
if (textbox) {
|
|
textbox.textContent = newValue;
|
|
} else {
|
|
console.log("Textbox with id " + elementId + " not found.");
|
|
}
|
|
}
|
|
|
|
|
|
async function txt2img_config_save(endpoint_value) {
|
|
var config = {};
|
|
|
|
console.log(JSON.stringify(endpoint_value))
|
|
|
|
// set_textbox_value('#html_info_txt2img', "Start uploading configuration to S3, please wait ......")
|
|
set_textbox_value_gradio('html_info_txt2img', "Start uploading configuration to S3, please wait ......")
|
|
|
|
scrap_ui_component_value_with_default(config);
|
|
|
|
//following code is to get s3 presigned url from middleware and upload the ui parameters
|
|
const key = "config/aigc.json";
|
|
let remote_url = config["aws_api_gateway_url"];
|
|
if (!remote_url.endsWith("/")) {
|
|
remote_url += "/";
|
|
}
|
|
let get_presigned_s3_url = remote_url;
|
|
get_presigned_s3_url += "inference/generate-s3-presigned-url-for-uploading";
|
|
const api_key = config["aws_api_token"];
|
|
|
|
try {
|
|
const config_presigned_url = await getPresignedUrl(
|
|
get_presigned_s3_url,
|
|
api_key,
|
|
key
|
|
);
|
|
const url = config_presigned_url.replace(/"/g, "");
|
|
const config_data = JSON.stringify(config);
|
|
await put_with_xmlhttprequest(url, config_data);
|
|
|
|
console.log('The configuration has been successfully uploaded to s3');
|
|
set_textbox_value_gradio('html_info_txt2img', "The configuration has been successfully uploaded.")
|
|
|
|
// alert("The configuration has been successfully uploaded.");
|
|
return [endpoint_value, "", ""];
|
|
|
|
} catch (error) {
|
|
console.error("Error in txt2img_config_save:", error);
|
|
set_textbox_value('#html_info_txt2img', "An error occurred while uploading the configuration. error:" + error)
|
|
return ["FAILURE", "", ""];
|
|
}
|
|
}
|
|
|
|
async function img2img_config_save(endpoint_value, init_img, sketch, init_img_with_mask, inpaint_color_sketch, init_img_inpaint, init_mask_inpaint) {
|
|
var config = {};
|
|
// set_textbox_value('#html_info_img2img', "Start uploading configuration to S3, please wait ......")
|
|
set_textbox_value_gradio('html_info_img2img', "Start uploading configuration to S3, please wait ......")
|
|
|
|
console.log(JSON.stringify(endpoint_value))
|
|
|
|
config['img2img_selected_tab_name'] = getSelectedButton();
|
|
|
|
console.log(config['img2img_selected_tab_name'])
|
|
|
|
// Setting all configs to empty string
|
|
config["img2img_init_img"] = "";
|
|
config["img2img_sketch"] = "";
|
|
config["img2img_init_img_with_mask"] = "";
|
|
config["img2img_inpaint_color_sketch"] = "";
|
|
config["img2img_init_img_inpaint"] = "";
|
|
config['img2img_init_mask_inpaint'] = "";
|
|
|
|
if (config['img2img_selected_tab_name'] === 'img2img') {
|
|
config["img2img_init_img"] = init_img;
|
|
} else if (config['img2img_selected_tab_name'] === 'Sketch') {
|
|
config["img2img_sketch"] = sketch;
|
|
} else if (config['img2img_selected_tab_name'] === 'Inpaint') {
|
|
config["img2img_init_img_with_mask"] = init_img_with_mask;
|
|
} else if (config['img2img_selected_tab_name'] === 'Inpaint_sketch') {
|
|
config["img2img_inpaint_color_sketch"] = inpaint_color_sketch;
|
|
} else if (config['img2img_selected_tab_name'] === 'Inpaint_upload') {
|
|
config["img2img_init_img_inpaint"] = init_img_inpaint;
|
|
config['img2img_init_mask_inpaint'] = init_mask_inpaint;
|
|
}
|
|
|
|
config['img2img_selected_resize_tab'] = getSelectedTabResize()
|
|
|
|
console.log(config['img2img_selected_resize_tab'])
|
|
|
|
scrap_ui_component_value_with_default(config);
|
|
|
|
//following code is to get s3 presigned url from middleware and upload the ui parameters
|
|
const key = "config/aigc.json";
|
|
let remote_url = config["aws_api_gateway_url"];
|
|
if (!remote_url.endsWith("/")) {
|
|
remote_url += "/";
|
|
}
|
|
let get_presigned_s3_url = remote_url;
|
|
get_presigned_s3_url += "inference/generate-s3-presigned-url-for-uploading";
|
|
const api_key = config["aws_api_token"];
|
|
|
|
try {
|
|
const config_presigned_url = await getPresignedUrl(
|
|
get_presigned_s3_url,
|
|
api_key,
|
|
key
|
|
);
|
|
const url = config_presigned_url.replace(/"/g, "");
|
|
const config_data = JSON.stringify(config);
|
|
await put_with_xmlhttprequest(url, config_data);
|
|
|
|
console.log('The configuration has been successfully uploaded to s3');
|
|
set_textbox_value_gradio('html_info_img2img', "The configuration has been successfully uploaded.")
|
|
// alert("The configuration has been successfully uploaded.");
|
|
return [endpoint_value,init_img, sketch, init_img_with_mask, inpaint_color_sketch, init_img_inpaint, init_mask_inpaint];
|
|
|
|
} catch (error) {
|
|
console.error("Error in img2img_config_save:", error);
|
|
set_textbox_value('#generation_info_img2img', "An error occurred while uploading the configuration. error:" + error)
|
|
return ["FAILURE", init_img, sketch, init_img_with_mask, inpaint_color_sketch, init_img_inpaint, init_mask_inpaint];
|
|
}
|
|
}
|
|
|
|
function sleep(ms) {
|
|
return new Promise(resolve => setTimeout(resolve, ms));
|
|
}
|
|
|
|
async function txt2img_config_save_test(endpoint_value) {
|
|
console.log("Before sleep");
|
|
await sleep(5000);
|
|
console.log("After sleep");
|
|
}
|
|
|
|
function scrap_ui_component_value_with_default(config) {
|
|
const getElementValue = (selector, property, defaultValue) => {
|
|
const element = document.querySelector(selector);
|
|
return element ? element[property] : defaultValue;
|
|
};
|
|
|
|
config["script_txt2txt_xyz_plot_x_values"] = getElementValue(
|
|
"#script_txt2txt_xyz_plot_x_values > label > textarea",
|
|
"value",
|
|
""
|
|
);
|
|
config["script_txt2txt_xyz_plot_y_values"] = getElementValue(
|
|
"#script_txt2txt_xyz_plot_y_values > label > textarea",
|
|
"value",
|
|
""
|
|
);
|
|
config["script_txt2txt_xyz_plot_z_values"] = getElementValue(
|
|
"#script_txt2txt_xyz_plot_z_values > label > textarea",
|
|
"value",
|
|
""
|
|
);
|
|
config["script_txt2txt_prompt_matrix_different_seeds"] = getElementValue(
|
|
"#script_txt2txt_prompt_matrix_different_seeds > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
config["script_txt2txt_prompt_matrix_margin_size"] = getElementValue(
|
|
"#script_txt2txt_prompt_matrix_margin_size > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["script_txt2txt_prompt_matrix_put_at_start"] = getElementValue(
|
|
"#script_txt2txt_prompt_matrix_put_at_start > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
config["script_txt2txt_checkbox_iterate_every_line"] =
|
|
getElementValue(
|
|
"#script_txt2txt_prompts_from_file_or_textbox_checkbox_iterate > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
config["script_txt2txt_checkbox_iterate_all_lines"] =
|
|
getElementValue(
|
|
"#script_txt2txt_prompts_from_file_or_textbox_checkbox_iterate_batch > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
config["script_txt2txt_xyz_plot_draw_legend"] = getElementValue(
|
|
"#script_txt2txt_xyz_plot_draw_legend > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
config["script_txt2txt_xyz_plot_include_lone_images"] = getElementValue(
|
|
"#script_txt2txt_xyz_plot_include_lone_images > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
config["script_txt2txt_xyz_plot_include_sub_grids"] = getElementValue(
|
|
"#script_txt2txt_xyz_plot_include_sub_grids > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
config["script_txt2txt_xyz_plot_margin_size"] = getElementValue(
|
|
"#script_txt2txt_xyz_plot_margin_size > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["script_txt2txt_xyz_plot_no_fixed_seeds"] = getElementValue(
|
|
"#script_txt2txt_xyz_plot_no_fixed_seeds > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
config["txt2img_batch_count"] = getElementValue(
|
|
"#txt2img_batch_count > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["txt2img_batch_size"] = getElementValue(
|
|
"#txt2img_batch_size > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["txt2img_cfg_scale"] = getElementValue(
|
|
"#txt2img_cfg_scale > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["txt2img_denoising_strength"] = getElementValue(
|
|
"#txt2img_denoising_strength > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["txt2img_enable_hr"] = getElementValue(
|
|
"#txt2img_enable_hr > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
config["txt2img_height"] = getElementValue(
|
|
"#txt2img_height > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["txt2img_hires_steps"] = getElementValue(
|
|
"#txt2img_hires_steps > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["txt2img_hr_resize_x"] = getElementValue(
|
|
"#txt2img_hr_resize_x > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["txt2img_hr_resize_y"] = getElementValue(
|
|
"#txt2img_hr_resize_y > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["txt2img_hr_scale"] = getElementValue(
|
|
"#txt2img_hr_scale > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["txt2img_restore_faces"] = getElementValue(
|
|
"#txt2img_restore_faces > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
config["txt2img_seed"] = getElementValue(
|
|
"#txt2img_seed > label > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["txt2img_seed_resize_from_h"] = getElementValue(
|
|
"#txt2img_seed_resize_from_h > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["txt2img_seed_resize_from_w"] = getElementValue(
|
|
"#txt2img_seed_resize_from_w > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
config["txt2img_steps"] = getElementValue(
|
|
"#txt2img_steps > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["txt2img_subseed"] = getElementValue(
|
|
"#txt2img_subseed > label > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["txt2img_subseed_show"] = getElementValue(
|
|
"#txt2img_subseed_show > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
config["txt2img_subseed_strength"] = getElementValue(
|
|
"#txt2img_subseed_strength > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["txt2img_tiling"] = getElementValue(
|
|
"#txt2img_tiling > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
config["txt2img_width"] = getElementValue(
|
|
"#txt2img_width > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
config["script_list"] = getElementValue(
|
|
"#script_list > label > div > div.wrap-inner.svelte-aqlk7e > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
config["script_txt2txt_xyz_plot_x_type"] = getElementValue(
|
|
"#script_txt2txt_xyz_plot_x_type > label > div > div.wrap-inner.svelte-aqlk7e > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["script_txt2txt_xyz_plot_x_value"] = getElementValue(
|
|
"#script_txt2txt_xyz_plot_x_values > label > textarea",
|
|
"value",
|
|
""
|
|
);
|
|
config["script_txt2txt_xyz_plot_y_type"] = getElementValue(
|
|
"#script_txt2txt_xyz_plot_y_type > label > div > div.wrap-inner.svelte-aqlk7e > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["script_txt2txt_xyz_plot_y_value"] = getElementValue(
|
|
"#script_txt2txt_xyz_plot_y_values > label > textarea",
|
|
"value",
|
|
""
|
|
);
|
|
config["script_txt2txt_xyz_plot_z_type"] = getElementValue(
|
|
"#script_txt2txt_xyz_plot_z_type > label > div > div.wrap-inner.svelte-aqlk7e > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["script_txt2txt_xyz_plot_z_value"] = getElementValue(
|
|
"#script_txt2txt_xyz_plot_z_values > label > textarea",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
config["txt2img_hr_upscaler"] = getElementValue(
|
|
"#txt2img_hr_upscaler > label > div > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
config["txt2img_sampling_method"] = getElementValue(
|
|
"#txt2img_sampling > label > div > div.wrap-inner.svelte-aqlk7e > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
config["txt2img_sampling_steps"] = getElementValue(
|
|
"#txt2img_steps > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
//sagemaker endpoint
|
|
// config["sagemaker_endpoint"] = getElementValue(
|
|
// "#sagemaker_endpoint_dropdown > label > div > div.wrap-inner.svelte-aqlk7e > div > input",
|
|
// "value",
|
|
// ""
|
|
// );
|
|
// config["sagemaker_endpoint"] = document.querySelector("#sagemaker_endpoint_dropdown > label > div > div.wrap-inner.svelte-aqlk7e > div > input").value.split("+")[0];
|
|
const sagemaker_ep_info = document.querySelector("#sagemaker_endpoint_dropdown > label > div > div.wrap-inner.svelte-aqlk7e > div > input").value;
|
|
const sagemaker_ep_info_array = sagemaker_ep_info.split("+");
|
|
config["sagemaker_endpoint"] = sagemaker_ep_info_array[0];
|
|
|
|
//stable diffusion checkpoint
|
|
const sd_checkpoint = document.querySelector(
|
|
"#stable_diffusion_checkpoint_dropdown > label > div > div.wrap-inner.svelte-aqlk7e"
|
|
);
|
|
const sd_tokens = sd_checkpoint.querySelectorAll(".token.svelte-aqlk7e");
|
|
const sd_values = [];
|
|
|
|
sd_tokens.forEach((token) => {
|
|
const spanValue = token.querySelector("span.svelte-aqlk7e").textContent;
|
|
sd_values.push(spanValue);
|
|
});
|
|
config["sagemaker_stable_diffusion_checkpoint"] = sd_values.join(":");
|
|
|
|
//Textual Inversion
|
|
const wrapInner = document.querySelector(
|
|
"#sagemaker_texual_inversion_dropdown > label > div > div.wrap-inner.svelte-aqlk7e"
|
|
);
|
|
const tokens = wrapInner.querySelectorAll(".token.svelte-aqlk7e");
|
|
const values = [];
|
|
|
|
tokens.forEach((token) => {
|
|
const spanValue = token.querySelector("span.svelte-aqlk7e").textContent;
|
|
values.push(spanValue);
|
|
});
|
|
config["sagemaker_texual_inversion_model"] = values.join(":");
|
|
|
|
//LoRa
|
|
const wrapInner1 = document.querySelector(
|
|
"#sagemaker_lora_list_dropdown > label > div > div.wrap-inner.svelte-aqlk7e"
|
|
);
|
|
const tokens1 = wrapInner1.querySelectorAll(".token.svelte-aqlk7e");
|
|
const values1 = [];
|
|
|
|
tokens1.forEach((token) => {
|
|
const spanValue = token.querySelector("span.svelte-aqlk7e").textContent;
|
|
values1.push(spanValue);
|
|
});
|
|
config["sagemaker_lora_model"] = values1.join(":");
|
|
console.log(values1);
|
|
|
|
//HyperNetwork
|
|
const wrapInner2 = document.querySelector(
|
|
"#sagemaker_hypernetwork_dropdown > label > div > div.wrap-inner.svelte-aqlk7e"
|
|
);
|
|
const tokens2 = wrapInner2.querySelectorAll(".token.svelte-aqlk7e");
|
|
const values2 = [];
|
|
|
|
tokens2.forEach((token) => {
|
|
const spanValue = token.querySelector("span.svelte-aqlk7e").textContent;
|
|
values2.push(spanValue);
|
|
});
|
|
config["sagemaker_hypernetwork_model"] = values2.join(":");
|
|
console.log(values2);
|
|
|
|
//ControlNet model
|
|
const wrapInner3 = document.querySelector(
|
|
"#sagemaker_controlnet_model_dropdown > label > div > div.wrap-inner.svelte-aqlk7e"
|
|
);
|
|
const tokens3 = wrapInner3.querySelectorAll(".token.svelte-aqlk7e");
|
|
const values3 = [];
|
|
|
|
tokens3.forEach((token) => {
|
|
const spanValue = token.querySelector("span.svelte-aqlk7e").textContent;
|
|
values3.push(spanValue);
|
|
});
|
|
config["sagemaker_controlnet_model"] = values3.join(":");
|
|
console.log(values3);
|
|
|
|
//control net part parameter
|
|
const imgElement = document.querySelector(
|
|
"#txt2img_controlnet_ControlNet_input_image > div.image-container.svelte-p3y7hu > div > img"
|
|
);
|
|
if (imgElement) {
|
|
const srcValue = imgElement.getAttribute("src");
|
|
// Use the srcValue variable as needed
|
|
config["txt2img_controlnet_ControlNet_input_image"] = srcValue;
|
|
} else {
|
|
// Handle the case when imgElement is null or undefined
|
|
console.log("imgElement is null or undefined");
|
|
config["txt2img_controlnet_ControlNet_input_image"] = "";
|
|
}
|
|
|
|
// Start grapping controlnet related ui values
|
|
config["controlnet_enable"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_enable_checkbox > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
config["controlnet_lowVRAM_enable"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_low_vram_checkbox > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
config["controlnet_pixel_perfect"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_pixel_perfect_checkbox > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
config["controlnet_allow_preview"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_preprocessor_preview_checkbox > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
|
|
config["controlnet_preprocessor"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_preprocessor_dropdown > label > div > div.wrap-inner.svelte-aqlk7e > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
config["controlnet_model"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_model_dropdown > label > div > div.wrap-inner.svelte-aqlk7e > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
config["controlnet_weight"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_control_weight_slider > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
config["controlnet_starting_control_step"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_start_control_step_slider > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
config["controlnet_ending_control_step"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_ending_control_step_slider > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
config["controlnet_control_mode_balanced"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_control_mode_radio > div.wrap.svelte-1p9xokt > label:nth-child(1) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
config["controlnet_control_mode_my_prompt_is_more_important"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_control_mode_radio > div.wrap.svelte-1p9xokt > label:nth-child(2) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
config["controlnet_control_mode_controlnet_is_more_important"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_control_mode_radio > div.wrap.svelte-1p9xokt > label:nth-child(3) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
config["controlnet_resize_mode_just_resize"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_resize_mode_radio > div.wrap.svelte-1p9xokt > label:nth-child(1) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
config["controlnet_resize_mode_Crop_and_Resize"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_resize_mode_radio > div.wrap.svelte-1p9xokt > label:nth-child(2) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
config["controlnet_resize_mode_Resize_and_Fill"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_resize_mode_radio > div.wrap.svelte-1p9xokt > label:nth-child(3) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
config[
|
|
"controlnet_loopback_automatically"
|
|
] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_automatically_send_generated_images_checkbox > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
|
|
// Completed when Preprocessor is null
|
|
|
|
// Start when Preprocessor is canny
|
|
config["controlnet_preprocessor_resolution"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_preprocessor_resolution_slider> div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
)
|
|
|
|
config["controlnet_canny_low_threshold"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_threshold_A_slider> div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
)
|
|
|
|
config["controlnet_canny_high_threshold"] = getElementValue(
|
|
"#txt2img_controlnet_ControlNet_controlnet_threshold_B_slider> div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
)
|
|
|
|
// end of controlnet section
|
|
|
|
config["script_txt2txt_prompt_matrix_prompt_type_positive"] = getElementValue(
|
|
"#script_txt2txt_prompt_matrix_prompt_type > div.wrap.svelte-1p9xokt > label.svelte-1p9xokt.selected > input",
|
|
"checked",
|
|
false
|
|
);
|
|
config["script_txt2txt_prompt_matrix_prompt_type_negative"] = getElementValue(
|
|
"#script_txt2txt_prompt_matrix_prompt_type > div.wrap.svelte-1p9xokt > label:nth-child(2) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
config["script_txt2txt_prompt_matrix_variations_delimiter_comma"] =
|
|
getElementValue(
|
|
"#script_txt2txt_prompt_matrix_variations_delimiter > div.wrap.svelte-1p9xokt > label.svelte-1p9xokt.selected > input",
|
|
"checked",
|
|
false
|
|
);
|
|
config["script_txt2txt_prompt_matrix_variations_delimiter_space"] =
|
|
getElementValue(
|
|
"#script_txt2txt_prompt_matrix_variations_delimiter > div.wrap.svelte-1p9xokt > label:nth-child(2) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
config["script_txt2txt_prompt_matrix_margin_size"] = getElementValue(
|
|
"#script_txt2txt_prompt_matrix_margin_size > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
config["script_txt2txt_prompts_from_file_or_textbox_checkbox_iterate"] =
|
|
getElementValue(
|
|
"#script_txt2txt_prompts_from_file_or_textbox_checkbox_iterate > label > input",
|
|
"enabled",
|
|
false
|
|
);
|
|
config["script_txt2txt_prompts_from_file_or_textbox_checkbox_iterate_batch"] =
|
|
getElementValue(
|
|
"#script_txt2txt_prompts_from_file_or_textbox_checkbox_iterate_batch > label > input",
|
|
"enabled",
|
|
false
|
|
);
|
|
config["script_txt2txt_prompts_from_file_or_textbox_prompt_txt"] =
|
|
getElementValue(
|
|
"#script_txt2txt_prompts_from_file_or_textbox_prompt_txt > label > textarea",
|
|
"value",
|
|
""
|
|
);
|
|
config["script_txt2txt_prompts_from_file_or_textbox_file"] = getElementValue(
|
|
"#script_txt2txt_prompts_from_file_or_textbox_file > div.svelte-116rqfv.center.boundedheight.flex > div",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// config for prompt area
|
|
config["txt2img_prompt"] = getElementValue(
|
|
"#txt2img_prompt > label > textarea",
|
|
"value",
|
|
""
|
|
);
|
|
config["txt2img_neg_prompt"] = getElementValue(
|
|
"#txt2img_neg_prompt > label > textarea",
|
|
"value",
|
|
""
|
|
);
|
|
config["txt2img_styles"] = getElementValue(
|
|
"#txt2img_styles > label > div > div > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// get the api-gateway url and token
|
|
config["aws_api_gateway_url"] = getElementValue(
|
|
"#aws_middleware_api > label > textarea",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
config["aws_api_token"] = getElementValue(
|
|
"#aws_middleware_token > label > textarea",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// get the img2img component
|
|
|
|
//document.querySelector("#img2img_prompt > label > textarea")
|
|
config["img2img_prompt"] = getElementValue(
|
|
"#img2img_prompt > label > textarea",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// document.querySelector("#img2img_neg_prompt > label > textarea")
|
|
config["img2img_neg_prompt"] = getElementValue(
|
|
"#img2img_neg_prompt > label > textarea",
|
|
"value",
|
|
""
|
|
)
|
|
// document.querySelector("#img2img_styles > label > div > div.wrap-inner.svelte-aqlk7e > div > input")
|
|
config["img2img_styles"] = getElementValue(
|
|
"#img2img_styles > label > div > div.wrap-inner.svelte-aqlk7e > div > input",
|
|
"value",
|
|
""
|
|
)
|
|
|
|
|
|
// Resize mode
|
|
// document.querySelector("#resize_mode > div.wrap.svelte-1p9xokt > label.svelte-1p9xokt.selected > input")
|
|
config["img2img_resize_mode_just_resize"] = getElementValue(
|
|
"#resize_mode > div.wrap.svelte-1p9xokt > label.svelte-1p9xokt.selected > input",
|
|
"checked",
|
|
false
|
|
);
|
|
// document.querySelector("#resize_mode > div.wrap.svelte-1p9xokt > label:nth-child(2) > input")
|
|
config["img2img_resize_mode_crop_and_resize"] = getElementValue(
|
|
"#resize_mode > div.wrap.svelte-1p9xokt > label:nth-child(2) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
// document.querySelector("#resize_mode > div.wrap.svelte-1p9xokt > label:nth-child(3) > input")
|
|
config["img2img_resize_mode_resize_and_fill"] = getElementValue(
|
|
"#resize_mode > div.wrap.svelte-1p9xokt > label:nth-child(3) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
// document.querySelector("#resize_mode > div.wrap.svelte-1p9xokt > label:nth-child(4) > input")
|
|
config["img2img_resize_mode_just_resize_latent_upscale"] = getElementValue(
|
|
"#resize_mode > div.wrap.svelte-1p9xokt > label:nth-child(4) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
// img2img sampling method
|
|
// document.querySelector("#img2img_sampling > label > div > div.wrap-inner.svelte-aqlk7e > div > input")
|
|
config["img2img_sampling_method"] = getElementValue(
|
|
"#img2img_sampling > label > div > div.wrap-inner.svelte-aqlk7e > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// document.querySelector("#img2img_steps > div.wrap.svelte-1cl284s > div > input")
|
|
config["img2img_sampling_steps"] = getElementValue(
|
|
"#img2img_steps > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// document.querySelector("#img2img_restore_faces > label > input")
|
|
config["img2img_restore_faces"] = getElementValue(
|
|
"#img2img_restore_faces > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
// document.querySelector("#img2img_tiling > label > input")
|
|
config["img2img_tiling"] = getElementValue(
|
|
"#img2img_tiling > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
// Resize to
|
|
// document.querySelector("#img2img_width > div.wrap.svelte-1cl284s > div > input")
|
|
config["img2img_width"] = getElementValue(
|
|
"#img2img_width > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// document.querySelector("#img2img_height > div.wrap.svelte-1cl284s > div > input")
|
|
config["img2img_height"] = getElementValue(
|
|
"#img2img_height > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// document.querySelector("#img2img_batch_count > div.wrap.svelte-1cl284s > div > input")
|
|
config["img2img_batch_count"] = getElementValue(
|
|
"#img2img_batch_count > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// document.querySelector("#img2img_batch_size > div.wrap.svelte-1cl284s > div > input")
|
|
config["img2img_batch_size"] = getElementValue(
|
|
"#img2img_batch_size > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// document.querySelector("#img2img_cfg_scale > div.wrap.svelte-1cl284s > div > input")
|
|
config["img2img_cfg_scale"] = getElementValue(
|
|
"#img2img_cfg_scale > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// document.querySelector("#img2img_denoising_strength > div.wrap.svelte-1cl284s > div > input")
|
|
config["img2img_denoising_strength"] = getElementValue(
|
|
"#img2img_denoising_strength > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// document.querySelector("#img2img_seed > label > input")
|
|
config["img2img_seed"] = getElementValue(
|
|
"#img2img_seed > label > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// document.querySelector("#img2img_subseed_show > label > input")
|
|
config["img2img_subseed_show"] = getElementValue(
|
|
"#img2img_subseed_show > label > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
// document.querySelector("#img2img_subseed > label > input")
|
|
config["img2img_subseed"] = getElementValue(
|
|
"#img2img_subseed > label > input",
|
|
"value",
|
|
""
|
|
);
|
|
// document.querySelector("#img2img_subseed_strength > div.wrap.svelte-1cl284s > div > input")
|
|
config["img2img_subseed_strength"] = getElementValue(
|
|
"#img2img_subseed_strength > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// document.querySelector("#img2img_seed_resize_from_w > div.wrap.svelte-1cl284s > div > input")
|
|
config["img2img_seed_resize_from_w"] = getElementValue(
|
|
"#img2img_seed_resize_from_w > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// document.querySelector("#img2img_seed_resize_from_h > div.wrap.svelte-1cl284s > div > input")
|
|
config["img2img_seed_resize_from_h"] = getElementValue(
|
|
"#img2img_seed_resize_from_h > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
|
|
// Resize by
|
|
// document.querySelector("#img2img_scale > div.wrap.svelte-1cl284s > div > input")
|
|
config["img2img_scale"] = getElementValue(
|
|
"#img2img_scale > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// inpaint component
|
|
|
|
// document.querySelector("#img2img_mask_blur > div.wrap.svelte-1cl284s > div > input")
|
|
config["img2img_mask_blur"] = getElementValue(
|
|
"#img2img_mask_blur > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// document.querySelector("#img2img_mask_mode > div.wrap.svelte-1p9xokt > label.svelte-1p9xokt.selected > input")
|
|
config["img2img_mask_mode_inpaint_masked"] = getElementValue(
|
|
"#img2img_mask_mode > div.wrap.svelte-1p9xokt > label:nth-child(1) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
// document.querySelector("#img2img_mask_mode > div.wrap.svelte-1p9xokt > label:nth-child(2) > input")
|
|
config["img2img_mask_mode_inpaint_not_masked"] = getElementValue(
|
|
"#img2img_mask_mode > div.wrap.svelte-1p9xokt > label:nth-child(2) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
// document.querySelector("#img2img_inpainting_fill > div.wrap.svelte-1p9xokt > label:nth-child(1) > input")
|
|
config["img2img_inpainting_fill_fill"] = getElementValue(
|
|
"#img2img_inpainting_fill > div.wrap.svelte-1p9xokt > label:nth-child(1) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
|
|
// document.querySelector("#img2img_inpainting_fill > div.wrap.svelte-1p9xokt > label:nth-child(2) > input")
|
|
config["img2img_inpainting_fill_original"] = getElementValue(
|
|
"#img2img_inpainting_fill > div.wrap.svelte-1p9xokt > label:nth-child(2) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
// document.querySelector("#resize_mode > div.wrap.svelte-1p9xokt > label:nth-child(3) > input")
|
|
config["img2img_inpainting_fill_latent_noise"] = getElementValue(
|
|
"#img2img_inpainting_fill > div.wrap.svelte-1p9xokt > label:nth-child(3) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
// document.querySelector("#resize_mode > div.wrap.svelte-1p9xokt > label:nth-child(4) > input")
|
|
config["img2img_inpainting_fill_latent_nothing"] = getElementValue(
|
|
"#img2img_inpainting_fill > div.wrap.sverte-1p9xokt > label:nth-child(4) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
// document.querySelector("#img2img_inpaint_full_res > div.wrap.svelte-1p9xokt > label:nth-child(1) > input")
|
|
config["img2img_inpaint_full_res_whole_picture"] = getElementValue(
|
|
"#img2img_inpaint_full_res > div.wrap.svelte-1p9xokt > label:nth-child(1) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
// document.querySelector("#img2img_inpaint_full_res > div.wrap.svelte-1p9xokt > label:nth-child(2) > input")
|
|
config["img2img_inpaint_full_res_only_masked"] = getElementValue(
|
|
"#img2img_inpaint_full_res > div.wrap.svelte-1p9xokt > label:nth-child(2) > input",
|
|
"checked",
|
|
false
|
|
);
|
|
|
|
// document.querySelector("#img2img_steps > div.wrap.svelte-1cl284s > div > input")
|
|
config["img2img_steps"] = getElementValue(
|
|
"#img2img_steps > div.wrap.svelte-1cl284s > div > input",
|
|
"value",
|
|
""
|
|
);
|
|
|
|
// grab the img2img inpaint sketch original image
|
|
//document.querySelector("#inpaint_sketch")
|
|
const inpaintImgElement = document.querySelector(
|
|
"#inpaint_sketch > div.image-container.svelte-p3y7hu > div > img"
|
|
);
|
|
if (inpaintImgElement) {
|
|
const srcValue = inpaintImgElement.getAttribute("src");
|
|
// Use the srcValue variable as needed
|
|
config["img2img_inpaint_sketch_image"] = srcValue;
|
|
} else {
|
|
// Handle the case when imgElement is null or undefined
|
|
console.log("inpaintImgElement is null or undefined");
|
|
config["img2img_inpaint_sketch_image"] = "";
|
|
}
|
|
|
|
|
|
|
|
// end of img2img component
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
function put_with_xmlhttprequest(config_url, config_data) {
|
|
return new Promise((resolve, reject) => {
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open("PUT", config_url, true);
|
|
|
|
xhr.onreadystatechange = () => {
|
|
if (xhr.readyState === 4) {
|
|
// Print all response headers to the console
|
|
console.log(xhr.getAllResponseHeaders());
|
|
|
|
if (xhr.status >= 200 && xhr.status < 300) {
|
|
resolve(xhr.responseText);
|
|
} else {
|
|
reject(xhr.statusText);
|
|
}
|
|
}
|
|
};
|
|
|
|
xhr.onerror = () => {
|
|
// Print all response headers to the console
|
|
console.log(xhr.getAllResponseHeaders());
|
|
reject("Network error");
|
|
};
|
|
|
|
xhr.send(config_data);
|
|
});
|
|
}
|
|
|
|
|
|
function getPresignedUrl(remote_url, api_key, key) {
|
|
return new Promise((resolve, reject) => {
|
|
const apiUrl = remote_url;
|
|
const queryParams = new URLSearchParams({
|
|
key: key,
|
|
});
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open("GET", `${apiUrl}?${queryParams}`, true);
|
|
xhr.setRequestHeader("x-api-key", api_key);
|
|
|
|
xhr.onload = function () {
|
|
if (xhr.status >= 200 && xhr.status < 400) {
|
|
resolve(xhr.responseText);
|
|
} else {
|
|
reject(
|
|
new Error(`Error fetching presigned URL: ${xhr.statusText}`)
|
|
);
|
|
}
|
|
};
|
|
|
|
xhr.onerror = function () {
|
|
reject(new Error("Error fetching presigned URL"));
|
|
};
|
|
|
|
xhr.send();
|
|
});
|
|
}
|
|
|
|
function postToApiGateway(remote_url, api_key, data, callback) {
|
|
const apiUrl = remote_url;
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open("POST", apiUrl, true);
|
|
// xhr.setRequestHeader("Content-Type", "application/json");
|
|
xhr.setRequestHeader("x-api-key", api_key);
|
|
|
|
xhr.onload = function () {
|
|
if (xhr.status >= 200 && xhr.status < 400) {
|
|
callback(null, xhr.responseText);
|
|
} else {
|
|
callback(
|
|
new Error(`Error posting to API Gateway: ${xhr.statusText}`),
|
|
null
|
|
);
|
|
}
|
|
};
|
|
|
|
xhr.onerror = function () {
|
|
callback(new Error("Error posting to API Gateway"), null);
|
|
};
|
|
|
|
// Convert data object to JSON string before sending
|
|
xhr.send(JSON.stringify(data));
|
|
}
|