68 lines
2.5 KiB
JavaScript
68 lines
2.5 KiB
JavaScript
import * as comfyapi from "./comfyapi.js";
|
|
|
|
(async (window, document, undefined) => {
|
|
// UUID generator
|
|
const client_id = comfyapi.uuidv4();
|
|
|
|
// Load the workflow
|
|
const style_workflow = '/simplecomfy/js/regen_bg_styled_workflow_api.json';
|
|
const workflow = await comfyapi.loadWorkflow(style_workflow);
|
|
console.log(workflow);
|
|
|
|
// WebSocket
|
|
const server_address = window.location.hostname + ':' + window.location.port;
|
|
const socket = new WebSocket('wss://' + server_address + '/ws?clientId=' + client_id);
|
|
socket.addEventListener('open', (event) => {
|
|
console.log('Connected to the server');
|
|
});
|
|
|
|
//Listener
|
|
socket.addEventListener('message', (event) => {
|
|
const data = JSON.parse(event.data);
|
|
|
|
if (data.type === 'execution_start') {
|
|
_queue_btn.disabled = true;
|
|
_queue_btn.textContent = 'Preprocessing...'
|
|
}
|
|
|
|
if (data.type === 'progress') {
|
|
_queue_btn.textContent = Math.floor(100*(data['data']['value'])/(data['data']['max'])) + "%"; // progress %
|
|
}
|
|
|
|
if (data.type === 'executed' && data.data.node === '124') {
|
|
if ('images' in data['data']['output']) {
|
|
const image = data['data']['output']['images'][0];
|
|
const filename = image['filename']
|
|
const subfolder = image['subfolder']
|
|
const rand = Math.random();
|
|
_queue_btn.textContent = "Generate";
|
|
_queue_btn.disabled = false;
|
|
_maingen.src = '/view?filename=' + filename + '&type=output&subfolder=' + subfolder + '&rand=' + rand
|
|
}
|
|
}
|
|
});
|
|
|
|
const _maingen = document.getElementById('maingen');
|
|
const _queue_btn = document.getElementById("queue_btn");
|
|
const _prompt = document.getElementById('prompt');
|
|
const _style_img_input = document.getElementById('style_img_file');
|
|
const _doll_img_input = document.getElementById('doll_img_file');
|
|
|
|
_queue_btn.onclick = function () {
|
|
if (_prompt.value !== "") {
|
|
workflow["22"]["inputs"]["text"] = _prompt.value;
|
|
}
|
|
workflow["3"]["inputs"]["seed"] = Math.floor(Math.random() * 9999999999);
|
|
comfyapi.queue_prompt(workflow, client_id);
|
|
};
|
|
|
|
_style_img_input.onchange = function (event) {
|
|
comfyapi.uploadFile(_style_img_input.files[0], workflow, "49", true);
|
|
}
|
|
|
|
_doll_img_input.onchange = function (event) {
|
|
comfyapi.uploadFile(_doll_img_input.files[0], workflow, "12", true);
|
|
}
|
|
|
|
})(window, document, undefined);
|