230 lines
10 KiB
JavaScript
230 lines
10 KiB
JavaScript
import { api } from "../../scripts/api.js";
|
||
import { app } from "../../scripts/app.js";
|
||
|
||
|
||
app.registerExtension({
|
||
name: "ComfyUI-Easyai",
|
||
async setup() {
|
||
const menu = document.querySelector(".comfy-menu");
|
||
|
||
const upload = () => {
|
||
// 创建遮罩层
|
||
const overlay = document.createElement('div');
|
||
overlay.style.position = 'fixed';
|
||
overlay.style.top = 0;
|
||
overlay.style.left = 0;
|
||
overlay.style.width = '100%';
|
||
overlay.style.height = '100%';
|
||
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
|
||
overlay.style.zIndex = 999;
|
||
document.body.appendChild(overlay);
|
||
|
||
// 创建对话框
|
||
const dialog = document.createElement('div');
|
||
dialog.style.position = 'fixed';
|
||
dialog.style.top = '50%';
|
||
dialog.style.left = '50%';
|
||
dialog.style.transform = 'translate(-50%, -50%)';
|
||
dialog.style.backgroundColor = 'black'; // 设置背景为黑色
|
||
dialog.style.color = 'white'; // 设置文字为白色
|
||
dialog.style.padding = '20px';
|
||
dialog.style.width = '300px';
|
||
dialog.style.zIndex = 1000;
|
||
document.body.appendChild(dialog);
|
||
|
||
// 添加标题
|
||
const title = document.createElement('h3');
|
||
title.innerText = '确认上传？';
|
||
title.style.color = 'white'; // 白色标题
|
||
dialog.appendChild(title);
|
||
|
||
// 添加域名输入框标签
|
||
const domainLabel = document.createElement('label');
|
||
domainLabel.setAttribute('for', 'domainInput');
|
||
domainLabel.innerText = 'BaseURL (接口地址):';
|
||
domainLabel.style.color = 'white'; // 白色标签文字
|
||
dialog.appendChild(domainLabel);
|
||
|
||
// 添加域名输入框
|
||
const domainInput = document.createElement('input');
|
||
domainInput.type = 'text';
|
||
domainInput.id = 'domainInput';
|
||
domainInput.style.width = '100%';
|
||
domainInput.style.padding = '8px';
|
||
domainInput.style.margin = '10px 0';
|
||
domainInput.style.borderRadius = '4px';
|
||
domainInput.style.border = '1px solid #ccc';
|
||
domainInput.style.backgroundColor = '#333'; // 设置输入框背景为深灰色
|
||
domainInput.style.color = 'white'; // 输入框文字为白色
|
||
dialog.appendChild(domainInput);
|
||
|
||
// 检查 localStorage 是否已有 Domain，如果有则填充输入框
|
||
const savedDomain = localStorage.getItem('easyai-domain');
|
||
if (savedDomain) {
|
||
domainInput.value = savedDomain;
|
||
}
|
||
|
||
// 添加 API Key 输入框标签
|
||
const label = document.createElement('label');
|
||
label.setAttribute('for', 'apiKeyInput');
|
||
label.innerText = 'Key:';
|
||
label.style.color = 'white'; // 白色标签文字
|
||
dialog.appendChild(label);
|
||
|
||
// 添加 API Key 输入框
|
||
const input = document.createElement('input');
|
||
input.type = 'text';
|
||
input.id = 'apiKeyInput';
|
||
input.style.width = '100%';
|
||
input.style.padding = '8px';
|
||
input.style.margin = '10px 0';
|
||
input.style.borderRadius = '4px';
|
||
input.style.border = '1px solid #ccc';
|
||
input.style.backgroundColor = '#333'; // 设置输入框背景为深灰色
|
||
input.style.color = 'white'; // 输入框文字为白色
|
||
dialog.appendChild(input);
|
||
|
||
// 检查 localStorage 是否已有 API key，如果有则填充输入框
|
||
const savedApiKey = localStorage.getItem('easyai-x-comfy-api-key');
|
||
if (savedApiKey) {
|
||
input.value = savedApiKey;
|
||
}
|
||
|
||
// 添加作品名称输入框标签
|
||
const projectNameLabel = document.createElement('label');
|
||
projectNameLabel.setAttribute('for', 'projectNameInput');
|
||
projectNameLabel.innerText = 'Easyai 作品名称:';
|
||
projectNameLabel.style.color = 'white'; // 白色标签文字
|
||
dialog.appendChild(projectNameLabel);
|
||
|
||
// 添加作品名称输入框
|
||
const projectNameInput = document.createElement('input');
|
||
projectNameInput.type = 'text';
|
||
projectNameInput.id = 'projectNameInput';
|
||
projectNameInput.style.width = '100%';
|
||
projectNameInput.style.padding = '8px';
|
||
projectNameInput.style.margin = '10px 0';
|
||
projectNameInput.style.borderRadius = '4px';
|
||
projectNameInput.style.border = '1px solid #ccc';
|
||
projectNameInput.style.backgroundColor = '#333'; // 设置输入框背景为深灰色
|
||
projectNameInput.style.color = 'white'; // 输入框文字为白色
|
||
dialog.appendChild(projectNameInput);
|
||
|
||
// 检查 localStorage 是否已有 作品名称，如果有则填充输入框
|
||
const savedProjectName = localStorage.getItem('easyai-project-name');
|
||
if (savedProjectName) {
|
||
projectNameInput.value = savedProjectName;
|
||
}
|
||
|
||
// 添加确认按钮
|
||
const saveButton = document.createElement('button');
|
||
saveButton.innerText = '确认';
|
||
saveButton.style.padding = '8px 12px';
|
||
saveButton.style.backgroundColor = '#4CAF50';
|
||
saveButton.style.color = 'white'; // 按钮文字为白色
|
||
saveButton.style.border = 'none';
|
||
saveButton.style.borderRadius = '4px';
|
||
saveButton.style.cursor = 'pointer';
|
||
dialog.appendChild(saveButton);
|
||
|
||
// 添加取消按钮
|
||
const cancelButton = document.createElement('button');
|
||
cancelButton.innerText = '取消';
|
||
cancelButton.style.padding = '8px 12px';
|
||
cancelButton.style.backgroundColor = '#f44336';
|
||
cancelButton.style.color = 'white'; // 按钮文字为白色
|
||
cancelButton.style.border = 'none';
|
||
cancelButton.style.borderRadius = '4px';
|
||
cancelButton.style.cursor = 'pointer';
|
||
cancelButton.style.marginLeft = '10px';
|
||
dialog.appendChild(cancelButton);
|
||
|
||
saveButton.onclick = () => {
|
||
const apiKey = input.value;
|
||
const domain = domainInput.value;
|
||
const projectName = projectNameInput.value;
|
||
|
||
if (apiKey && domain && projectName) {
|
||
// 保存 API key, domain, 作品名称到 localStorage
|
||
localStorage.setItem('easyai-x-comfy-api-key', apiKey);
|
||
localStorage.setItem('easyai-domain', domain);
|
||
localStorage.setItem('easyai-project-name', projectName);
|
||
|
||
closeDialog();
|
||
|
||
app.graphToPrompt().then((p2) => {
|
||
localStorage.setItem('easyai-x-comfy-api-key', apiKey);
|
||
localStorage.setItem('easyai-domain', domain);
|
||
app.graphToPrompt().then((p2) => {
|
||
const workflow = JSON.stringify(p2.output, null, 2);
|
||
api.fetchApi('/easyai/upload_workflow', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
domain,
|
||
apiKey,
|
||
workflow,
|
||
name: projectName
|
||
})
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.error) {
|
||
console.error('Error uploading workflow:', data.error);
|
||
alert('Failed to upload workflow.');
|
||
} else {
|
||
console.log('Workflow upload successful:', data);
|
||
alert('Workflow uploaded successfully!');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error uploading workflow:', error);
|
||
alert('Failed to upload workflow.');
|
||
});
|
||
});
|
||
});
|
||
} else {
|
||
alert("请输入有效的 API Key, 域名, 和作品名称.");
|
||
}
|
||
};
|
||
|
||
cancelButton.onclick = () => {
|
||
closeDialog();
|
||
};
|
||
|
||
function closeDialog() {
|
||
document.body.removeChild(dialog);
|
||
document.body.removeChild(overlay);
|
||
}
|
||
};
|
||
|
||
try {
|
||
let cmGroup = new (await import("../../scripts/ui/components/buttonGroup.js")).ComfyButtonGroup(
|
||
new(await import("../../scripts/ui/components/button.js")).ComfyButton({
|
||
icon: "upload",
|
||
action: upload,
|
||
tooltip: "上传Easyai"
|
||
}).element
|
||
);
|
||
|
||
app.menu?.settingsGroup.element.after(cmGroup.element);
|
||
}
|
||
catch(exception) {
|
||
console.log('ComfyUI is outdated. New style menu based features are disabled.');
|
||
}
|
||
|
||
const uploadEasyaiButton = document.createElement("button");
|
||
uploadEasyaiButton.id = "uploadEasyaiButton";
|
||
uploadEasyaiButton.textContent = "上传Easyai";
|
||
// 点击按钮时弹出对话框
|
||
uploadEasyaiButton.onclick = upload;
|
||
|
||
uploadEasyaiButton.style.background = "linear-gradient(135deg, #8A00FF 0%, #00FFC6 100%)";
|
||
uploadEasyaiButton.style.color = "black";
|
||
uploadEasyaiButton.style.display = "inline-block";
|
||
|
||
menu.append(uploadEasyaiButton);
|
||
}
|
||
}); |