2382 lines
68 KiB
JavaScript
2382 lines
68 KiB
JavaScript
import { app } from '../../../scripts/app.js'
|
||
import { closeIcon } from './svg_icons.js'
|
||
import { api } from '../../../scripts/api.js'
|
||
|
||
import {
|
||
GroupNodeConfig,
|
||
GroupNodeHandler
|
||
} from '../../../extensions/core/groupNode.js'
|
||
|
||
import { smart_init, addSmartMenu } from './smart_connect.js'
|
||
|
||
import { completion_ } from './chat.js'
|
||
|
||
function showTextByLanguage (key, json) {
|
||
// 获取浏览器语言
|
||
var language = navigator.language
|
||
// 判断是否为中文
|
||
if (
|
||
language.indexOf('zh') !== -1 ||
|
||
(language.indexOf('cn') !== -1 && json[key])
|
||
) {
|
||
return json[key]
|
||
} else {
|
||
return key
|
||
}
|
||
}
|
||
|
||
//系统prompt
|
||
// const systemPrompt = `You are a prompt creator, your task is to create prompts for the user input request, the prompts are image descriptions that include keywords for (an adjective, type of image, framing/composition, subject, subject appearance/action, environment, lighting situation, details of the shoot/illustration, visuals aesthetics and artists), brake keywords by comas, provide high quality, non-verboose, coherent, brief, concise, and not superfluous prompts, the subject from the input request must be included verbatim on the prompt,the prompt is english`
|
||
|
||
let tool ={
|
||
"name": "create_prompt",
|
||
"description": "Create a prompt with a given subject, content, and style based on user input for image descriptions.",
|
||
"parameter": {
|
||
"type": "object",
|
||
"properties": {
|
||
"subject": {
|
||
"type": "string",
|
||
"description": "The subject of the prompt, included verbatim from the input request.",
|
||
"required": true
|
||
},
|
||
"content": {
|
||
"type": "string",
|
||
"description": "The content of the prompt, primarily focusing on the scene and objects, including keywords for adjective, type of image, framing/composition, subject appearance/action, and environment.",
|
||
"required": true
|
||
},
|
||
"style": {
|
||
"type": "string",
|
||
"description": "The style of the prompt, including lighting situation, details of the shoot/illustration, visual aesthetics, and artists. Ensure it is high quality, non-verbose, coherent, brief, concise, and not superfluous.",
|
||
"required": true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const systemPrompt=`You are a helpful assistant with access to the following functions. Use them if required - ${JSON.stringify(tool,null,2)}`
|
||
|
||
|
||
if (!localStorage.getItem('_mixlab_system_prompt')) {
|
||
localStorage.setItem('_mixlab_system_prompt', systemPrompt)
|
||
}
|
||
|
||
// 获取llama 模型
|
||
async function get_llamafile_models () {
|
||
try {
|
||
const response = await fetch('/mixlab/folder_paths', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
type: 'llamafile'
|
||
})
|
||
})
|
||
|
||
const data = await response.json()
|
||
// console.log(data)
|
||
return data.names
|
||
} catch (error) {
|
||
console.error(error)
|
||
}
|
||
}
|
||
// 运行llama
|
||
async function start_llama (model = 'Phi-3-mini-4k-instruct-Q5_K_S.gguf') {
|
||
let n_gpu_layers = -1
|
||
try {
|
||
n_gpu_layers = parseInt(localStorage.getItem('_mixlab_llama_n_gpu'))
|
||
} catch (error) {}
|
||
|
||
try {
|
||
const response = await fetch('/mixlab/start_llama', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
model,
|
||
n_gpu_layers
|
||
})
|
||
})
|
||
|
||
const data = await response.json()
|
||
if (data.llama_cpp_error) {
|
||
return
|
||
}
|
||
|
||
return {
|
||
url: `http://${window.location.hostname}:${data.port}`,
|
||
model: data.model,
|
||
chat_format: data.chat_format
|
||
}
|
||
} catch (error) {
|
||
console.error(error)
|
||
}
|
||
}
|
||
|
||
function resizeImage (base64Image) {
|
||
var img = new Image()
|
||
var canvas = document.createElement('canvas')
|
||
var ctx = canvas.getContext('2d')
|
||
return new Promise((res, rej) => {
|
||
img.onload = function () {
|
||
// 等比例缩放图片
|
||
var width = img.width
|
||
var height = img.height
|
||
var max_width = 768
|
||
if (width > max_width) {
|
||
height *= max_width / width
|
||
width = max_width
|
||
}
|
||
|
||
// 设置canvas尺寸
|
||
canvas.width = width
|
||
canvas.height = height
|
||
|
||
// 在canvas上绘制图片
|
||
ctx.drawImage(img, 0, 0, width, height)
|
||
|
||
// 将canvas转换为base64图片数据
|
||
var canvasData = canvas.toDataURL()
|
||
res(canvasData) // canvas转换后的base64图片数据
|
||
}
|
||
|
||
img.src = base64Image
|
||
})
|
||
}
|
||
|
||
// 菜单入口
|
||
async function createMenu () {
|
||
const menu = document.querySelector('.comfy-menu')
|
||
const separator = document.createElement('div')
|
||
separator.style = `margin: 20px 0px;
|
||
width: 100%;
|
||
height: 1px;
|
||
background: var(--border-color);
|
||
`
|
||
menu.append(separator)
|
||
|
||
if (!menu.querySelector('#mixlab_chatbot_by_llamacpp')) {
|
||
const appsButton = document.createElement('button')
|
||
appsButton.id = 'mixlab_chatbot_by_llamacpp'
|
||
appsButton.textContent = '♾️Mixlab'
|
||
|
||
// appsButton.onclick = () =>
|
||
appsButton.onclick = async () => {
|
||
if (window._mixlab_llamacpp) {
|
||
//显示运行的模型
|
||
createModelsModal([
|
||
window._mixlab_llamacpp.url,
|
||
window._mixlab_llamacpp.model
|
||
])
|
||
} else {
|
||
let ms = await get_llamafile_models()
|
||
ms = ms.filter(m => !m.match('-mmproj-'))
|
||
if (ms.length > 0) createModelsModal(ms)
|
||
}
|
||
}
|
||
menu.append(appsButton)
|
||
}
|
||
}
|
||
|
||
let isScriptLoaded = {}
|
||
|
||
function loadExternalScript (url) {
|
||
return new Promise((resolve, reject) => {
|
||
if (isScriptLoaded[url]) {
|
||
resolve()
|
||
return
|
||
}
|
||
|
||
const script = document.createElement('script')
|
||
script.src = url
|
||
script.onload = () => {
|
||
isScriptLoaded[url] = true
|
||
resolve()
|
||
}
|
||
script.onerror = reject
|
||
document.head.appendChild(script)
|
||
})
|
||
}
|
||
|
||
//
|
||
|
||
function createChart (chartDom, nodes) {
|
||
var myChart = echarts.init(chartDom)
|
||
var option
|
||
|
||
console.log(nodes)
|
||
option = {
|
||
series: [
|
||
{
|
||
type: 'treemap',
|
||
data: [
|
||
{
|
||
name: 'nodeA',
|
||
value: 10,
|
||
children: Array.from(nodes, n => {
|
||
return {
|
||
name: n.type,
|
||
value: n.count
|
||
}
|
||
})
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
|
||
option && myChart.setOption(option)
|
||
}
|
||
|
||
async function createNodesCharts () {
|
||
await loadExternalScript(
|
||
'/extensions/comfyui-mixlab-nodes/lib/echarts.min.js'
|
||
)
|
||
const templates = await loadTemplate()
|
||
var nodes = {}
|
||
Array.from(templates, t => {
|
||
let j = JSON.parse(t.data)
|
||
for (let node of j.nodes) {
|
||
if (!nodes[node.type]) nodes[node.type] = { type: node.type, count: 0 }
|
||
nodes[node.type].count++
|
||
}
|
||
})
|
||
nodes = Object.values(nodes).sort((a, b) => b.count - a.count)
|
||
|
||
const menu = document.querySelector('.comfy-menu')
|
||
const separator = document.createElement('div')
|
||
separator.style = `margin: 20px 0px;
|
||
width: 100%;
|
||
height: 1px;
|
||
background: var(--border-color);
|
||
`
|
||
menu.append(separator)
|
||
|
||
const appsButton = document.createElement('button')
|
||
appsButton.textContent = 'Nodes'
|
||
|
||
appsButton.onclick = () => {
|
||
let div = document.querySelector('#mixlab_apps')
|
||
if (!div) {
|
||
div = document.createElement('div')
|
||
div.id = 'mixlab_apps'
|
||
document.body.appendChild(div)
|
||
|
||
let btn = document.createElement('div')
|
||
btn.style = `display: flex;
|
||
width: calc(100% - 24px);
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 12px;
|
||
height: 44px;`
|
||
let btnB = document.createElement('button')
|
||
let textB = document.createElement('p')
|
||
btn.appendChild(textB)
|
||
btn.appendChild(btnB)
|
||
textB.style.fontSize = '12px'
|
||
textB.innerText = `Nodes`
|
||
|
||
btnB.style = `float: right; border: none; color: var(--input-text);
|
||
background-color: var(--comfy-input-bg); border-color: var(--border-color);cursor: pointer;`
|
||
btnB.addEventListener('click', () => {
|
||
div.style.display = 'none'
|
||
})
|
||
btnB.innerText = 'X'
|
||
|
||
// 悬浮框拖动事件
|
||
div.addEventListener('mousedown', function (e) {
|
||
var startX = e.clientX
|
||
var startY = e.clientY
|
||
var offsetX = div.offsetLeft
|
||
var offsetY = div.offsetTop
|
||
|
||
function moveBox (e) {
|
||
var newX = e.clientX
|
||
var newY = e.clientY
|
||
var deltaX = newX - startX
|
||
var deltaY = newY - startY
|
||
div.style.left = offsetX + deltaX + 'px'
|
||
div.style.top = offsetY + deltaY + 'px'
|
||
localStorage.setItem(
|
||
'mixlab_app_pannel',
|
||
JSON.stringify({ x: div.style.left, y: div.style.top })
|
||
)
|
||
}
|
||
|
||
function stopMoving () {
|
||
document.removeEventListener('mousemove', moveBox)
|
||
document.removeEventListener('mouseup', stopMoving)
|
||
}
|
||
|
||
document.addEventListener('mousemove', moveBox)
|
||
document.addEventListener('mouseup', stopMoving)
|
||
})
|
||
|
||
div.appendChild(btn)
|
||
|
||
let chartDom = document.createElement('div')
|
||
chartDom.style = `height:80vh;width:450px`
|
||
chartDom.className = 'chart'
|
||
div.appendChild(chartDom)
|
||
}
|
||
if (div.style.display == 'flex') {
|
||
div.style.display = 'none'
|
||
} else {
|
||
let pos = JSON.parse(
|
||
localStorage.getItem('mixlab_app_pannel') ||
|
||
JSON.stringify({ x: 0, y: 0 })
|
||
)
|
||
|
||
div.style = `
|
||
flex-direction: column;
|
||
align-items: end;
|
||
display:flex;
|
||
position: absolute;
|
||
top: ${pos.y}; left: ${pos.x}; width: 450px;
|
||
color: var(--descrip-text);
|
||
background-color: var(--comfy-menu-bg);
|
||
padding: 10px;
|
||
border: 1px solid black;z-index: 999999999;padding-top: 0;`
|
||
}
|
||
|
||
createChart(div.querySelector('.chart'), nodes)
|
||
}
|
||
menu.append(appsButton)
|
||
}
|
||
|
||
function copyNodeValues (src, dest) {
|
||
// title
|
||
dest.title = src.title
|
||
|
||
// copy input connections
|
||
|
||
for (let i in src.inputs) {
|
||
let input = src.inputs[i]
|
||
if (input.link) {
|
||
let link = app.graph.links[input.link]
|
||
let src_node = app.graph.getNodeById(link.origin_id)
|
||
if (dest.inputs.filter(inp => inp.name === input.name).length === 0) {
|
||
// 没有，name换了
|
||
let dInp = dest.inputs.filter(inp => inp.type === input.type)
|
||
if (dInp.length === 1) {
|
||
src_node.connect(link.origin_slot, dest.id, dInp[0].name)
|
||
}
|
||
} else {
|
||
src_node.connect(link.origin_slot, dest.id, input.name)
|
||
}
|
||
}
|
||
}
|
||
|
||
// copy output connections
|
||
let output_links = {}
|
||
for (let i in src.outputs) {
|
||
let output = src.outputs[i]
|
||
if (output.links) {
|
||
let links = []
|
||
for (let j in output.links) {
|
||
links.push(app.graph.links[output.links[j]])
|
||
}
|
||
output_links[output.name] = links
|
||
}
|
||
}
|
||
|
||
for (let i in dest.outputs) {
|
||
let links = output_links[dest.outputs[i].name]
|
||
if (links) {
|
||
for (let j in links) {
|
||
let link = links[j]
|
||
let target_node = app.graph.getNodeById(link.target_id)
|
||
dest.connect(parseInt(i), target_node, link.target_slot)
|
||
}
|
||
}
|
||
}
|
||
|
||
// copy widgets
|
||
for (const w of src.widgets) {
|
||
for (const d of dest.widgets) {
|
||
if (w.name === d.name) {
|
||
d.value = w.value
|
||
}
|
||
}
|
||
}
|
||
|
||
app.graph.afterChange()
|
||
}
|
||
|
||
function deepEqual (obj1, obj2) {
|
||
if (typeof obj1 !== typeof obj2) {
|
||
return false
|
||
}
|
||
|
||
if (typeof obj1 !== 'object' || obj1 === null || obj2 === null) {
|
||
return obj1 === obj2
|
||
}
|
||
|
||
const keys1 = Object.keys(obj1)
|
||
const keys2 = Object.keys(obj2)
|
||
|
||
if (keys1.length !== keys2.length) {
|
||
return false
|
||
}
|
||
|
||
for (let key of keys1) {
|
||
if (!deepEqual(obj1[key], obj2[key])) {
|
||
return false
|
||
}
|
||
}
|
||
|
||
return true
|
||
}
|
||
|
||
async function get_nodes_map () {
|
||
let api_host = `${window.location.hostname}:${window.location.port}`
|
||
let api_base = ''
|
||
let url = `${window.location.protocol}//${api_host}${api_base}`
|
||
|
||
const res = await fetch(`${url}/mixlab/nodes_map`, {
|
||
method: 'POST',
|
||
body: JSON.stringify({
|
||
data: 'json'
|
||
})
|
||
})
|
||
return await res.json()
|
||
}
|
||
|
||
function get_url () {
|
||
let api_host = `${window.location.hostname}:${window.location.port}`
|
||
let api_base = ''
|
||
let url = `${window.location.protocol}//${api_host}${api_base}`
|
||
return url
|
||
}
|
||
|
||
async function get_my_app (filename = null, category = '') {
|
||
let url = get_url()
|
||
let data = null
|
||
|
||
try {
|
||
const res = await fetch(`${url}/mixlab/workflow`, {
|
||
method: 'POST',
|
||
body: JSON.stringify({
|
||
task: 'my_app',
|
||
filename,
|
||
category,
|
||
admin: true
|
||
})
|
||
})
|
||
let result = await res.json()
|
||
|
||
data = []
|
||
|
||
for (const res of result.data) {
|
||
let { app, workflow } = res.data
|
||
if (app?.filename)
|
||
data.push({
|
||
...app,
|
||
data: workflow,
|
||
date: res.date
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
return data
|
||
}
|
||
|
||
function loadCSS (url) {
|
||
var link = document.createElement('link')
|
||
link.rel = 'stylesheet'
|
||
link.type = 'text/css'
|
||
link.href = url
|
||
document.getElementsByTagName('head')[0].appendChild(link)
|
||
}
|
||
|
||
var cssURL =
|
||
'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.0/github-markdown-light.min.css'
|
||
loadCSS(cssURL)
|
||
|
||
function injectCSS (css) {
|
||
// 检查页面中是否已经存在具有相同内容的style标签
|
||
const existingStyle = document.querySelector('style')
|
||
if (existingStyle && existingStyle.textContent === css) {
|
||
return // 如果已经存在相同的样式，则不进行注入
|
||
}
|
||
|
||
// 创建一个新的style标签，并将CSS内容注入其中
|
||
const style = document.createElement('style')
|
||
style.textContent = css
|
||
|
||
// 将style标签插入到页面的head元素中
|
||
const head = document.querySelector('head')
|
||
head.appendChild(style)
|
||
}
|
||
|
||
injectCSS(`::-webkit-scrollbar {
|
||
width: 2px;
|
||
}
|
||
|
||
#mixlab_chatbot_by_llamacpp{
|
||
font-size:14px
|
||
}
|
||
|
||
#mixlab_chatbot_by_llamacpp::before {
|
||
content: attr(title);
|
||
position: absolute;
|
||
margin-top: 24px;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.mix_tag{
|
||
padding:8px;cursor: pointer;font-size: 14px;
|
||
color: var(--input-text);
|
||
background-color: var(--comfy-input-bg);
|
||
border-radius: 8px;
|
||
border-color: var(--border-color);
|
||
border-style: solid;
|
||
margin-top: 2px;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.mix_tag:hover{
|
||
background-color: #101c19;
|
||
color: aquamarine;
|
||
}
|
||
|
||
@keyframes loading_mixlab {
|
||
0% {
|
||
background-color: green;
|
||
}
|
||
|
||
50% {
|
||
background-color: lightgreen;
|
||
}
|
||
|
||
100% {
|
||
background-color: green;
|
||
}
|
||
}
|
||
|
||
.loading_mixlab {
|
||
background-color: green;
|
||
animation-name: loading_mixlab;
|
||
animation-duration: 2s;
|
||
animation-iteration-count: infinite;
|
||
}
|
||
|
||
.dynamic_prompt{
|
||
border-left: 2px solid var(--input-text);
|
||
}
|
||
|
||
`)
|
||
|
||
async function getCustomnodeMappings (mode = 'url') {
|
||
// mode = "local";
|
||
let api_host = `${window.location.hostname}:${window.location.port}`
|
||
let api_base = ''
|
||
let url = `${window.location.protocol}//${api_host}${api_base}`
|
||
|
||
let nodes = {}
|
||
|
||
const data = (await get_nodes_map()).data
|
||
|
||
for (let url in data) {
|
||
let n = data[url]
|
||
for (let node of n[0]) {
|
||
// if(node=='CLIPSeg')console.log('#CLIPSeg',n)
|
||
nodes[node] = { url, title: n[1].title_aux }
|
||
}
|
||
}
|
||
|
||
// try {
|
||
// const response = await fetch(`${url}/customnode/getmappings?mode=${mode}`)
|
||
// const data = await response.json()
|
||
// for (let url in data) {
|
||
// let n = data[url]
|
||
// for (let node of n[0]) {
|
||
// // if(node=='CLIPSeg')console.log('#CLIPSeg',n)
|
||
// nodes[node] = { url, title: n[1].title_aux }
|
||
// }
|
||
// }
|
||
// } catch (error) {
|
||
// const data = (await get_nodes_map()).data
|
||
|
||
// for (let url in data) {
|
||
// let n = data[url]
|
||
// for (let node of n[0]) {
|
||
// // if(node=='CLIPSeg')console.log('#CLIPSeg',n)
|
||
// nodes[node] = { url, title: n[1].title_aux }
|
||
// }
|
||
// }
|
||
// }
|
||
|
||
return nodes
|
||
}
|
||
|
||
const missingNodeGithub = (missingNodeTypes, nodesMap) => {
|
||
let ts = {}
|
||
|
||
Array.from(new Set(missingNodeTypes), n => {
|
||
if (nodesMap[n]) {
|
||
let title = nodesMap[n].title
|
||
if (!ts[title]) {
|
||
ts[title] = {
|
||
title,
|
||
nodes: {},
|
||
url: nodesMap[n].url
|
||
}
|
||
}
|
||
ts[title].nodes[n] = 1
|
||
} else {
|
||
ts[n] = {
|
||
title: n,
|
||
nodes: {},
|
||
url: `https://github.com/search?q=${n}&type=code`
|
||
}
|
||
ts[n].nodes[n] = 1
|
||
}
|
||
})
|
||
|
||
return Array.from(Object.values(ts), n => {
|
||
const url = n.url
|
||
return `<li style="color: white;
|
||
background: black;
|
||
padding: 8px;
|
||
font-size: 12px;">${n.title}<a href="${url}" target="_blank"> 🔗</a></li>`
|
||
})
|
||
}
|
||
|
||
let nodesMap
|
||
|
||
function get_position_style (ctx, widget_width, y, node_height) {
|
||
const MARGIN = 4 // the margin around the html element
|
||
|
||
/* Create a transform that deals with all the scrolling and zooming */
|
||
const elRect = ctx.canvas.getBoundingClientRect()
|
||
const transform = new DOMMatrix()
|
||
.scaleSelf(
|
||
elRect.width / ctx.canvas.width,
|
||
elRect.height / ctx.canvas.height
|
||
)
|
||
.multiplySelf(ctx.getTransform())
|
||
.translateSelf(MARGIN, MARGIN + y)
|
||
|
||
return {
|
||
transformOrigin: '0 0',
|
||
transform: transform,
|
||
left: `0`,
|
||
top: `0`,
|
||
cursor: 'pointer',
|
||
position: 'absolute',
|
||
maxWidth: `${widget_width - MARGIN * 2}px`,
|
||
// maxHeight: `${node_height - MARGIN * 2}px`, // we're assuming we have the whole height of the node
|
||
width: `${widget_width - MARGIN * 2}px`,
|
||
// height: `${node_height * 0.3 - MARGIN * 2}px`,
|
||
// background: '#EEEEEE',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
// alignItems: 'center',
|
||
justifyContent: 'space-around'
|
||
}
|
||
}
|
||
|
||
app.showMissingNodesError = async function (
|
||
missingNodeTypes,
|
||
hasAddedNodes = true
|
||
) {
|
||
nodesMap =
|
||
nodesMap && Object.keys(nodesMap).length > 0
|
||
? nodesMap
|
||
: await getCustomnodeMappings('url')
|
||
|
||
// console.log('#nodesMap', nodesMap)
|
||
// console.log('###MIXLAB', missingNodeTypes, hasAddedNodes)
|
||
this.ui.dialog.show(
|
||
`<a style="color: white;
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
letter-spacing: 2px;
|
||
font-family: sans-serif;
|
||
}"
|
||
href="https://discord.gg/cXs9vZSqeK" target="_blank">${showTextByLanguage(
|
||
'Welcome to Mixlab nodes discord, seeking help.',
|
||
{
|
||
'Welcome to Mixlab nodes discord, seeking help.':
|
||
'寻求帮助，加入Mixlab nodes交流频道'
|
||
}
|
||
)}</a><br><br>${showTextByLanguage(
|
||
'When loading the graph, the following node types were not found:',
|
||
{
|
||
'When loading the graph, the following node types were not found:':
|
||
'缺少以下节点：'
|
||
}
|
||
)}
|
||
|
||
<ul>${missingNodeGithub(missingNodeTypes, nodesMap).join('')}</ul>${
|
||
hasAddedNodes ? '' : ''
|
||
}`
|
||
)
|
||
this.logging.addEntry('Comfy.App', 'warn', {
|
||
MissingNodes: missingNodeTypes
|
||
})
|
||
}
|
||
|
||
// app.registerExtension({
|
||
// name: 'Comfy.MDNote',
|
||
// registerCustomNodes () {
|
||
// class NoteNode {
|
||
// // color = LGraphCanvas.node_colors.yellow.color
|
||
// // bgcolor = LGraphCanvas.node_colors.yellow.bgcolor
|
||
// // groupcolor = LGraphCanvas.node_colors.yellow.groupcolor
|
||
// constructor () {
|
||
// if (!this.properties) {
|
||
// this.properties = {}
|
||
// this.properties.text = ''
|
||
// }
|
||
// console.log('NoteNode1', this)
|
||
|
||
// const widget = {
|
||
// type: 'div',
|
||
// name: 'input_color',
|
||
// draw (ctx, node, widget_width, y, widget_height) {
|
||
// Object.assign(
|
||
// this.div.style,
|
||
// get_position_style(
|
||
// ctx,
|
||
// widget_width,
|
||
// 44,
|
||
// node.size[1]
|
||
// )
|
||
// )
|
||
// }
|
||
// }
|
||
|
||
// widget.div = $el('div', {});
|
||
// widget.div.innerText='1111'
|
||
|
||
// document.body.appendChild(widget.div)
|
||
|
||
// this.addCustomWidget(widget)
|
||
|
||
// this.serialize_widgets = true
|
||
// this.isVirtualNode = true
|
||
// }
|
||
// }
|
||
|
||
// // Load default visibility
|
||
|
||
// LiteGraph.registerNodeType(
|
||
// 'MDNote',
|
||
// Object.assign(NoteNode, {
|
||
// title_mode: LiteGraph.NORMAL_TITLE,
|
||
// title: 'MDNote',
|
||
// collapsable: true
|
||
// })
|
||
// )
|
||
|
||
// NoteNode.category = '♾️Mixlab/utils'
|
||
// },
|
||
|
||
// })
|
||
|
||
async function fetchReadmeContent (url) {
|
||
try {
|
||
// var repo = 'owner/repo'; // 仓库的拥有者和名称
|
||
var match = url.match(/github.com\/([^/]+\/[^/]+)/)
|
||
var repo = match[1]
|
||
var url = `https://api.github.com/repos/${repo}/readme`
|
||
var response = await fetch(url)
|
||
var data = await response.json()
|
||
var readmeUrl = data.download_url
|
||
|
||
var readmeResponse = await fetch(readmeUrl)
|
||
var content = await readmeResponse.text()
|
||
// console.log(content) // 在控制台输出readme.md文件的内容
|
||
|
||
return content
|
||
} catch (error) {
|
||
console.log('获取readme.md文件信息失败:', error)
|
||
}
|
||
}
|
||
|
||
async function startLLM (model) {
|
||
let res = await start_llama(model)
|
||
window._mixlab_llamacpp = res
|
||
|
||
localStorage.setItem('_mixlab_llama_select', res.model)
|
||
|
||
if (document.body.querySelector('#mixlab_chatbot_by_llamacpp')&&window._mixlab_llamacpp.url) {
|
||
document.body
|
||
.querySelector('#mixlab_chatbot_by_llamacpp')
|
||
.setAttribute('title', window._mixlab_llamacpp.url)
|
||
}
|
||
if (document.body.querySelector('#llm_status_btn')&&window._mixlab_llamacpp) {
|
||
document.body.querySelector('#llm_status_btn').innerText = window._mixlab_llamacpp.model
|
||
}
|
||
}
|
||
|
||
function createModelsModal (models) {
|
||
var div =
|
||
document.querySelector('#model-modal') || document.createElement('div')
|
||
div.id = 'model-modal'
|
||
div.innerHTML = ''
|
||
div.style.cssText = `
|
||
width: 100%;
|
||
z-index: 9990;
|
||
height: 100vh;
|
||
display: flex;
|
||
color: var(--descrip-text);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
background: #000000a8;
|
||
`
|
||
|
||
var modal = document.createElement('div')
|
||
|
||
div.addEventListener('click', e => {
|
||
e.stopPropagation()
|
||
div.remove()
|
||
})
|
||
|
||
div.appendChild(modal)
|
||
modal.classList.add('modal-body')
|
||
// Set modal styles
|
||
modal.style.cssText = `
|
||
color: var(--descrip-text);
|
||
background-color: var(--comfy-menu-bg);
|
||
position: fixed;
|
||
overflow:hidden;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 9999;
|
||
border-radius: 4px;
|
||
box-shadow: 4px 4px 14px rgba(255,255,255,0.2);
|
||
`
|
||
|
||
// Create modal header
|
||
const headerElement = document.createElement('div')
|
||
headerElement.classList.add('modal-header')
|
||
headerElement.style.cssText = `
|
||
display: flex;
|
||
padding: 20px 24px 8px 24px;
|
||
justify-content: space-between;
|
||
`
|
||
|
||
const headTitleElement = document.createElement('a')
|
||
headTitleElement.classList.add('header-title')
|
||
headTitleElement.style.cssText = `
|
||
color: var(--descrip-text);
|
||
font-size: 18px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-decoration: none;
|
||
font-weight: bold;
|
||
justify-content: space-between;
|
||
padding: 20px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
`
|
||
|
||
// headTitleElement.href = 'https://github.com/shadowcz007/comfyui-mixlab-nodes'
|
||
// headTitleElement.target = '_blank'
|
||
const linkIcon = document.createElement('small')
|
||
linkIcon.textContent = showTextByLanguage('Auto Open', {
|
||
'Auto Open': '自动开启'
|
||
})
|
||
linkIcon.style.padding = '4px'
|
||
|
||
const statusIcon = document.createElement('small')
|
||
statusIcon.textContent = showTextByLanguage('Status', {
|
||
Status: 'OFF'
|
||
})
|
||
statusIcon.id = 'llm_status_btn'
|
||
statusIcon.style=`padding: 4px;
|
||
background-color: rgb(102, 255, 108);
|
||
color: black;
|
||
font-size: 12px;
|
||
margin-left: 12px;`
|
||
if (window._mixlab_llamacpp?.url) {
|
||
statusIcon.textContent = window._mixlab_llamacpp.model
|
||
statusIcon.style.backgroundColor = '#66ff6c'
|
||
statusIcon.style.color = 'black'
|
||
} else {
|
||
}
|
||
statusIcon.addEventListener('click', e => {
|
||
e.stopPropagation()
|
||
// startLLM()
|
||
})
|
||
|
||
const n_gpu = document.createElement('input')
|
||
n_gpu.type = 'number'
|
||
n_gpu.setAttribute('min', -1)
|
||
n_gpu.setAttribute('max', 9999)
|
||
|
||
n_gpu.style = `color: var(--input-text);
|
||
background-color: var(--comfy-input-bg);
|
||
border-radius: 8px;
|
||
border-color: var(--border-color);
|
||
height: 26px;
|
||
padding: 4px 10px;
|
||
width: 48px;
|
||
margin-left: 12px;`
|
||
if (localStorage.getItem('_mixlab_llama_n_gpu')) {
|
||
n_gpu.value = parseInt(localStorage.getItem('_mixlab_llama_n_gpu'))
|
||
} else {
|
||
n_gpu.value = -1
|
||
localStorage.setItem('_mixlab_llama_n_gpu', -1)
|
||
}
|
||
|
||
const n_gpu_p = document.createElement('p')
|
||
n_gpu_p.innerText = 'n_gpu_layers'
|
||
|
||
const n_gpu_div = document.createElement('div')
|
||
n_gpu_div.style = `display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 12px;`
|
||
n_gpu_div.appendChild(n_gpu_p)
|
||
n_gpu_div.appendChild(n_gpu)
|
||
|
||
const title = document.createElement('p')
|
||
title.innerText = 'Models'
|
||
title.style = `font-size: 18px;
|
||
margin-right: 8px;
|
||
margin-top: 0;`
|
||
|
||
const left_d = document.createElement('div')
|
||
left_d.style = `display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
font-size: 12px;
|
||
flex-direction: column; `
|
||
left_d.appendChild(title)
|
||
title.appendChild(statusIcon)
|
||
left_d.appendChild(linkIcon)
|
||
left_d.appendChild(n_gpu_div)
|
||
headTitleElement.appendChild(left_d)
|
||
|
||
// headTitleElement.appendChild(n_gpu_div)
|
||
|
||
//重启
|
||
const reStart = document.createElement('small')
|
||
reStart.textContent = showTextByLanguage('restart', {
|
||
restart: '重启'
|
||
})
|
||
|
||
reStart.style=`padding: 8px;
|
||
font-size: 16px;
|
||
outline: 1px solid;
|
||
padding-top: 4px;
|
||
padding-bottom: 4px;`
|
||
|
||
headTitleElement.appendChild(reStart)
|
||
|
||
if (localStorage.getItem('_mixlab_auto_llama_open')) {
|
||
linkIcon.style.backgroundColor = '#66ff6c'
|
||
linkIcon.style.color = 'black'
|
||
}
|
||
linkIcon.addEventListener('click', e => {
|
||
e.stopPropagation()
|
||
if (localStorage.getItem('_mixlab_auto_llama_open')) {
|
||
localStorage.setItem('_mixlab_auto_llama_open', '')
|
||
linkIcon.style.backgroundColor = ''
|
||
linkIcon.style.color = 'var(--descrip-text)'
|
||
} else {
|
||
localStorage.setItem('_mixlab_auto_llama_open', 'true')
|
||
linkIcon.style.backgroundColor = '#66ff6c'
|
||
linkIcon.style.color = 'black'
|
||
}
|
||
})
|
||
|
||
reStart.addEventListener('click', e => {
|
||
e.stopPropagation()
|
||
div.remove()
|
||
fetch('mixlab/re_start', {
|
||
method: 'POST'
|
||
})
|
||
})
|
||
|
||
n_gpu.addEventListener('click', e => {
|
||
e.stopPropagation()
|
||
localStorage.setItem('_mixlab_llama_n_gpu', n_gpu.value)
|
||
})
|
||
|
||
modal.appendChild(headTitleElement)
|
||
|
||
// Create modal content area
|
||
var modalContent = document.createElement('div')
|
||
modalContent.classList.add('modal-content')
|
||
|
||
var input = document.createElement('textarea')
|
||
input.className = 'comfy-multiline-input'
|
||
input.style = ` height: 260px;
|
||
width: 480px;
|
||
font-size: 16px;
|
||
padding: 18px;`
|
||
input.value = localStorage.getItem('_mixlab_system_prompt')
|
||
|
||
input.addEventListener('change', e => {
|
||
e.stopPropagation()
|
||
localStorage.setItem('_mixlab_system_prompt', input.value)
|
||
})
|
||
|
||
input.addEventListener('click', e => {
|
||
e.stopPropagation()
|
||
})
|
||
|
||
modalContent.appendChild(input)
|
||
|
||
if (!window._mixlab_llamacpp) {
|
||
for (const m of models) {
|
||
let d = document.createElement('div')
|
||
d.innerText = `${showTextByLanguage('Run', {
|
||
Run: '运行'
|
||
})} ${m}`
|
||
d.className = `mix_tag`
|
||
|
||
d.addEventListener('click', async e => {
|
||
e.stopPropagation()
|
||
div.remove()
|
||
startLLM(m)
|
||
})
|
||
|
||
modalContent.appendChild(d)
|
||
}
|
||
}
|
||
modal.appendChild(modalContent)
|
||
|
||
const helpInfo = document.createElement('a')
|
||
helpInfo.textContent = showTextByLanguage('Help', {
|
||
Help: '寻求帮助'
|
||
})
|
||
helpInfo.style = `text-align: center;
|
||
display: block;
|
||
padding: 8px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
color: white;`
|
||
helpInfo.href = 'https://discord.gg/cXs9vZSqeK'
|
||
helpInfo.target = '_blank'
|
||
modal.appendChild(helpInfo)
|
||
|
||
document.body.appendChild(div)
|
||
}
|
||
|
||
function createModal (url, markdown, title) {
|
||
// Create modal element
|
||
var div =
|
||
document.querySelector('#mix-modal') || document.createElement('div')
|
||
div.id = 'mix-modal'
|
||
div.innerHTML = ''
|
||
div.style.cssText = `
|
||
width: 100%;
|
||
z-index: 9990;
|
||
height: 100vh;
|
||
display: flex;
|
||
color: var(--descrip-text);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
`
|
||
|
||
var modal = document.createElement('div')
|
||
|
||
div.appendChild(modal)
|
||
modal.classList.add('modal-body')
|
||
// Set modal styles
|
||
modal.style.cssText = `
|
||
background: white;
|
||
height: 80vh;
|
||
position: fixed;
|
||
overflow:hidden;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 9999;
|
||
border-radius: 4px;
|
||
box-shadow: 4px 4px 14px rgba(255,255,255,0.5);
|
||
|
||
`
|
||
// Create modal content area
|
||
var modalContent = document.createElement('div')
|
||
modalContent.classList.add('modal-content')
|
||
// Create modal header
|
||
const headerElement = document.createElement('div')
|
||
headerElement.classList.add('modal-header')
|
||
headerElement.style.cssText = `
|
||
display: flex;
|
||
padding: 20px 24px 8px 24px;
|
||
justify-content: space-between;
|
||
`
|
||
|
||
const headTitleElement = document.createElement('a')
|
||
headTitleElement.classList.add('header-title')
|
||
headTitleElement.style.cssText = `
|
||
color: var(--descrip-text);
|
||
font-size: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-decoration: none;
|
||
font-weight: bold;
|
||
`
|
||
headTitleElement.onmouseenter = function () {
|
||
headTitleElement.style.color = 'var(--comfy-menu-bg)'
|
||
}
|
||
headTitleElement.onmouseleave = function () {
|
||
headTitleElement.style.color = 'var(--descrip-text)'
|
||
}
|
||
headTitleElement.textContent = title || ''
|
||
headTitleElement.href = url
|
||
headTitleElement.target = '_blank'
|
||
const linkIcon = document.createElement('small')
|
||
linkIcon.textContent = '🔗'
|
||
headTitleElement.appendChild(linkIcon)
|
||
headerElement.appendChild(headTitleElement)
|
||
|
||
// Create close button
|
||
const closeButton = document.createElement('span')
|
||
closeButton.classList.add('close')
|
||
closeButton.innerHTML = closeIcon
|
||
// Set close button styles
|
||
closeButton.style.cssText = `
|
||
padding: 4px;
|
||
cursor: pointer;
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
user-select: none;
|
||
fill: var(--descrip-text);
|
||
`
|
||
closeButton.onmouseenter = function () {
|
||
closeButton.style.fill = 'var(--comfy-menu-bg)'
|
||
}
|
||
closeButton.onmouseleave = function () {
|
||
closeButton.style.fill = 'var(--descrip-text)'
|
||
}
|
||
|
||
headerElement.appendChild(closeButton)
|
||
|
||
// Click event to close the modal
|
||
function closeMixModal () {
|
||
div.style.display = 'none'
|
||
window.removeEventListener('keydown', MixModalEscKeyEvent)
|
||
}
|
||
closeButton.onclick = function () {
|
||
closeMixModal()
|
||
}
|
||
|
||
// Set modal content area styles
|
||
modalContent.style.cssText = `
|
||
position: relative;
|
||
padding: 0px;
|
||
overflow: hidden scroll;;
|
||
height: 100%;
|
||
min-width:300px
|
||
`
|
||
|
||
// Append close button to modal content area
|
||
modal.appendChild(headerElement)
|
||
|
||
// Create element for displaying Markdown content
|
||
var markdownContent = document.createElement('div')
|
||
markdownContent.classList.add('markdown-content', 'markdown-body')
|
||
markdownContent.style.cssText = `max-width: 50vw;padding: 0px 24px 100px 24px;`
|
||
|
||
showdown.setFlavor('github')
|
||
var converter = new showdown.Converter()
|
||
|
||
var html = converter.makeHtml(markdown)
|
||
|
||
// Hide images in the markdown when they fail to load
|
||
var regex = /<img[^>]+src="?([^"\s]+)"?[^>]*>/g
|
||
html = html.replace(regex, function (match, src) {
|
||
return `<img src="${src}" onerror="this.style.display='none'">`
|
||
})
|
||
|
||
// Open links in a new tab or window
|
||
html = html.replace(/<a/g, '<a target="_blank"')
|
||
|
||
// Fix href attribute to absolute path
|
||
html = html.replace(
|
||
/<a([^>]+href=["'])(?!https?:\/\/)([^"'>]+)/g,
|
||
function (match, prefix, path) {
|
||
var absolutePath = url + '/' + path
|
||
return '<a' + prefix + absolutePath
|
||
}
|
||
)
|
||
|
||
markdownContent.innerHTML = html
|
||
|
||
// Append Markdown content element to modal content area
|
||
modalContent.appendChild(markdownContent)
|
||
|
||
// Append modal content area to modal element
|
||
modal.appendChild(modalContent)
|
||
|
||
const footerElement = document.createElement('div')
|
||
footerElement.style.cssText = `
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
text-align: right;
|
||
padding:10px;
|
||
font-size:12px
|
||
`
|
||
|
||
const footerText = document.createElement('a')
|
||
footerText.href = 'https://github.com/shadowcz007/comfyui-mixlab-nodes'
|
||
footerText.innerText = 'Support by Mixlab'
|
||
footerText.style.cssText = `color:inherit`
|
||
footerText.target = '_blank'
|
||
footerText.onmouseenter = function () {
|
||
footerText.style.color = 'var(--input-text)'
|
||
}
|
||
footerText.onmouseleave = function () {
|
||
footerText.style.color = 'inherit'
|
||
}
|
||
|
||
footerText.onclick = function (e) {
|
||
e.stopPropagation()
|
||
}
|
||
footerElement.appendChild(footerText)
|
||
|
||
div.appendChild(footerElement)
|
||
|
||
// Append modal element to the page
|
||
if (!document.querySelector('#mix-modal')) {
|
||
document.body.appendChild(div)
|
||
}
|
||
function MixModalEscKeyEvent (event) {
|
||
if (event.key == 'Escape') {
|
||
closeMixModal()
|
||
}
|
||
}
|
||
window.removeEventListener('keydown', MixModalEscKeyEvent)
|
||
window.addEventListener('keydown', MixModalEscKeyEvent)
|
||
|
||
const bgElement = document.createElement('div')
|
||
bgElement.classList.add('mix-modal-bg')
|
||
bgElement.style.cssText = `
|
||
width:100%;
|
||
height:100%;
|
||
background-color: rgba(0,0,0,0.8);
|
||
`
|
||
bgElement.onclick = function () {
|
||
closeMixModal()
|
||
}
|
||
|
||
div.appendChild(bgElement)
|
||
}
|
||
|
||
const loadTemplate = async () => {
|
||
const id = 'Comfy.NodeTemplates'
|
||
const file = 'comfy.templates.json'
|
||
|
||
let templates = []
|
||
if (app.storageLocation === 'server') {
|
||
if (app.isNewUserSession) {
|
||
// New user so migrate existing templates
|
||
const json = localStorage.getItem(id)
|
||
if (json) {
|
||
templates = JSON.parse(json)
|
||
}
|
||
await api.storeUserData(file, json, { stringify: false })
|
||
} else {
|
||
const res = await api.getUserData(file)
|
||
if (res.status === 200) {
|
||
try {
|
||
templates = await res.json()
|
||
} catch (error) {}
|
||
} else if (res.status !== 404) {
|
||
console.error(res.status + ' ' + res.statusText)
|
||
}
|
||
}
|
||
} else {
|
||
const json = localStorage.getItem(id)
|
||
if (json) {
|
||
templates = JSON.parse(json)
|
||
}
|
||
}
|
||
|
||
return templates ?? []
|
||
}
|
||
|
||
function drawBadge (node, orig, restArgs) {
|
||
let ctx = restArgs[0]
|
||
const r = orig?.apply?.(node, restArgs)
|
||
|
||
if (
|
||
!node.flags.collapsed &&
|
||
node.constructor.title_mode != LiteGraph.NO_TITLE
|
||
) {
|
||
let text = `#${node.id} `
|
||
|
||
let nick = node.getNickname()
|
||
if (nick) {
|
||
if (nick == 'ComfyUI') {
|
||
nick = '🦊'
|
||
}
|
||
|
||
if (nick.length > 25) {
|
||
text += nick.substring(0, 23) + '..'
|
||
} else {
|
||
text += nick
|
||
}
|
||
}
|
||
|
||
if (text != '') {
|
||
let fgColor = 'white'
|
||
let bgColor = '#0F1F0F'
|
||
let visible = true
|
||
|
||
ctx.save()
|
||
ctx.font = '12px sans-serif'
|
||
const sz = ctx.measureText(text)
|
||
ctx.fillStyle = bgColor
|
||
ctx.beginPath()
|
||
ctx.roundRect(
|
||
node.size[0] - sz.width - 12,
|
||
-LiteGraph.NODE_TITLE_HEIGHT - 20,
|
||
sz.width + 12,
|
||
20,
|
||
5
|
||
)
|
||
ctx.fill()
|
||
|
||
ctx.fillStyle = fgColor
|
||
ctx.fillText(
|
||
text,
|
||
node.size[0] - sz.width - 6,
|
||
-LiteGraph.NODE_TITLE_HEIGHT - 6
|
||
)
|
||
ctx.restore()
|
||
|
||
if (node.has_errors) {
|
||
ctx.save()
|
||
ctx.font = 'bold 14px sans-serif'
|
||
const sz2 = ctx.measureText(node.type)
|
||
ctx.fillStyle = 'white'
|
||
ctx.fillText(
|
||
node.type,
|
||
node.size[0] / 2 - sz2.width / 2,
|
||
node.size[1] / 2
|
||
)
|
||
ctx.restore()
|
||
}
|
||
}
|
||
}
|
||
return r
|
||
}
|
||
|
||
function convertImageUrlToBase64 (imageUrl) {
|
||
return fetch(imageUrl)
|
||
.then(response => response.blob())
|
||
.then(blob => {
|
||
return new Promise((resolve, reject) => {
|
||
const reader = new FileReader()
|
||
reader.onloadend = () => resolve(reader.result)
|
||
reader.onerror = reject
|
||
reader.readAsDataURL(blob)
|
||
})
|
||
})
|
||
}
|
||
|
||
async function getSelectImageNode () {
|
||
var nodes = app.canvas.selected_nodes
|
||
let imageNode = null
|
||
if (Object.keys(app.canvas.selected_nodes).length == 0) return
|
||
for (var id in nodes) {
|
||
if (nodes[id].imgs) {
|
||
let base64 = await convertImageUrlToBase64(nodes[id].imgs[0].currentSrc)
|
||
imageNode = await resizeImage(base64)
|
||
}
|
||
}
|
||
return imageNode
|
||
}
|
||
|
||
app.registerExtension({
|
||
name: 'Comfy.Mixlab.ui',
|
||
init () {
|
||
//是否要自动加载模型
|
||
if (localStorage.getItem('_mixlab_auto_llama_open')) {
|
||
let model = localStorage.getItem('_mixlab_llama_select')
|
||
start_llama(model).then(res => {
|
||
window._mixlab_llamacpp = res
|
||
document.body
|
||
.querySelector('#mixlab_chatbot_by_llamacpp')
|
||
.setAttribute('title', res.url)
|
||
})
|
||
}else{
|
||
startLLM('')
|
||
}
|
||
|
||
LGraphCanvas.prototype.helpAboutNode = async function (node) {
|
||
nodesMap =
|
||
nodesMap && Object.keys(nodesMap).length > 0
|
||
? nodesMap
|
||
: await getCustomnodeMappings('url')
|
||
|
||
console.log(
|
||
'%c### node & node map',
|
||
'background: yellow; color: black',
|
||
node,
|
||
nodesMap,
|
||
nodesMap[node.type]
|
||
)
|
||
let repo = nodesMap[node.type]
|
||
if (repo) {
|
||
let markdown = await fetchReadmeContent(repo.url)
|
||
createModal(repo.url, markdown, repo.title)
|
||
}
|
||
}
|
||
|
||
LGraphCanvas.prototype.fixTheNode = function (node) {
|
||
let new_node = LiteGraph.createNode(node.comfyClass)
|
||
new_node.pos = [node.pos[0], node.pos[1]]
|
||
app.canvas.graph.add(new_node, false)
|
||
copyNodeValues(node, new_node)
|
||
app.canvas.graph.remove(node)
|
||
}
|
||
|
||
smart_init()
|
||
|
||
LGraphCanvas.prototype.text2text = async function (node) {
|
||
// console.log(node)
|
||
let widget = node.widgets.filter(
|
||
w => w.name === 'text' && typeof w.value == 'string'
|
||
)[0]
|
||
if (widget) {
|
||
app.canvas.centerOnNode(node)
|
||
|
||
let controller = new AbortController()
|
||
let ends = [] //TODO 判断终止 <|im_start|>
|
||
let userInput = widget.value
|
||
widget.value = widget.value.trim()
|
||
widget.value += '\n'
|
||
let jsonStr="";
|
||
try {
|
||
await completion_(
|
||
window._mixlab_llamacpp.url + '/v1/chat/completions',
|
||
[
|
||
{
|
||
role: 'system',
|
||
content: localStorage.getItem('_mixlab_system_prompt')
|
||
},
|
||
{ role: 'user', content: userInput }
|
||
],
|
||
controller,
|
||
t => {
|
||
// console.log(t)
|
||
widget.value += t
|
||
jsonStr+=t
|
||
}
|
||
)
|
||
} catch (error) {
|
||
//是否要自动加载模型
|
||
if (localStorage.getItem('_mixlab_auto_llama_open')) {
|
||
let model = localStorage.getItem('_mixlab_llama_select')
|
||
start_llama(model).then(async res => {
|
||
window._mixlab_llamacpp = res
|
||
document.body
|
||
.querySelector('#mixlab_chatbot_by_llamacpp')
|
||
.setAttribute('title', res.url)
|
||
|
||
await completion_(
|
||
window._mixlab_llamacpp.url + '/v1/chat/completions',
|
||
[
|
||
{
|
||
role: 'system',
|
||
content: localStorage.getItem('_mixlab_system_prompt')
|
||
},
|
||
{ role: 'user', content: userInput }
|
||
],
|
||
controller,
|
||
t => {
|
||
// console.log(t)
|
||
widget.value += t
|
||
jsonStr+=t
|
||
}
|
||
)
|
||
})
|
||
}
|
||
}
|
||
|
||
let json=null;
|
||
|
||
try {
|
||
json=JSON.parse(jsonStr.trim())
|
||
} catch (error) {
|
||
json=JSON.parse(jsonStr.trim()+"}")
|
||
}
|
||
|
||
if(json){
|
||
widget.value = [json.subject,json.content,json.style].join('\n')
|
||
}else{
|
||
widget.value = widget.value.trim()
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
LGraphCanvas.prototype.image2text = async function (node) {
|
||
let imageBase64 = await getSelectImageNode()
|
||
|
||
if (imageBase64) {
|
||
// console.log('image2text')
|
||
// 添加note 节点
|
||
const NoteNode = LiteGraph.createNode('Note')
|
||
NoteNode.title = `Image-to-Text ${node.id}`
|
||
NoteNode.size = [NoteNode.size[0] + 100, NoteNode.size[1]]
|
||
let widget = NoteNode.widgets[0]
|
||
widget.value = ''
|
||
|
||
NoteNode.pos = [node.pos[0] + node.size[0] + 24, node.pos[1] - 48]
|
||
|
||
app.canvas.graph.add(NoteNode, false)
|
||
app.canvas.centerOnNode(NoteNode)
|
||
|
||
let controller = new AbortController()
|
||
let ends = []
|
||
let userInput = widget.value
|
||
widget.value = widget.value.trim()
|
||
widget.value += '\n'
|
||
|
||
try {
|
||
await completion_(
|
||
window._mixlab_llamacpp.url + '/v1/chat/completions',
|
||
[
|
||
{
|
||
role: 'system',
|
||
content: localStorage.getItem('_mixlab_system_prompt')
|
||
},
|
||
// { role: 'user', content: userInput }
|
||
|
||
{
|
||
role: 'user',
|
||
content: [
|
||
{
|
||
type: 'image_url',
|
||
image_url: {
|
||
url: imageBase64
|
||
}
|
||
},
|
||
{ type: 'text', text: 'What’s in this image?' }
|
||
]
|
||
}
|
||
],
|
||
controller,
|
||
t => {
|
||
// console.log(t)
|
||
widget.value += t
|
||
|
||
NoteNode.size[1] = widget.element.scrollHeight + 20
|
||
widget.computedHeight = NoteNode.size[1]
|
||
app.canvas.centerOnNode(NoteNode)
|
||
}
|
||
)
|
||
} catch (error) {
|
||
//是否要自动加载模型
|
||
if (localStorage.getItem('_mixlab_auto_llama_open')) {
|
||
let model = localStorage.getItem('_mixlab_llama_select')
|
||
start_llama(model).then(async res => {
|
||
window._mixlab_llamacpp = res
|
||
document.body
|
||
.querySelector('#mixlab_chatbot_by_llamacpp')
|
||
.setAttribute('title', res.url)
|
||
|
||
await completion_(
|
||
window._mixlab_llamacpp.url + '/v1/chat/completions',
|
||
[
|
||
{
|
||
role: 'system',
|
||
content: localStorage.getItem('_mixlab_system_prompt')
|
||
},
|
||
{
|
||
role: 'user',
|
||
content: [
|
||
{
|
||
type: 'image_url',
|
||
image_url: {
|
||
url: imageBase64
|
||
}
|
||
},
|
||
{ type: 'text', text: 'What’s in this image?' }
|
||
]
|
||
}
|
||
],
|
||
controller,
|
||
t => {
|
||
// console.log(t)
|
||
widget.value += t
|
||
NoteNode.size[1] = widget.element.scrollHeight + 20
|
||
widget.computedHeight = NoteNode.size[1]
|
||
app.canvas.centerOnNode(NoteNode)
|
||
}
|
||
)
|
||
})
|
||
}
|
||
}
|
||
|
||
widget.value = widget.value.trim()
|
||
}
|
||
}
|
||
|
||
const getGroupMenuOptions = LGraphCanvas.prototype.getGroupMenuOptions // store the existing method
|
||
LGraphCanvas.prototype.getGroupMenuOptions = function (node) {
|
||
// replace it
|
||
const options = getGroupMenuOptions.apply(this, arguments) // start by calling the stored one
|
||
node.setDirtyCanvas(true, true) // force a redraw of (foreground, background)
|
||
|
||
return [
|
||
{
|
||
content: 'Clone Group ♾️Mixlab', // with a name
|
||
callback: async (value, opts, e, menu, group) => {
|
||
const clipboardAction = async cb => {
|
||
// We use the clipboard functions but dont want to overwrite the current user clipboard
|
||
// Restore it after we've run our callback
|
||
const old = localStorage.getItem('litegrapheditor_clipboard')
|
||
await cb()
|
||
localStorage.setItem('litegrapheditor_clipboard', old)
|
||
}
|
||
|
||
clipboardAction(async () => {
|
||
let name = group.title
|
||
let nodes = group._nodes
|
||
|
||
app.canvas.copyToClipboard(nodes)
|
||
let data = localStorage.getItem('litegrapheditor_clipboard')
|
||
data = JSON.parse(data)
|
||
|
||
for (let i = 0; i < nodes.length; i++) {
|
||
const node = app.graph.getNodeById(nodes[i].id)
|
||
const nodeData = node.serialize()
|
||
|
||
let groupData = GroupNodeHandler.getGroupData(node)
|
||
if (groupData) {
|
||
groupData = groupData.nodeData
|
||
if (!data.groupNodes) {
|
||
data.groupNodes = {}
|
||
}
|
||
data.groupNodes[nodeData.name] = groupData
|
||
data.nodes[i].type = nodeData.name
|
||
}
|
||
}
|
||
|
||
await GroupNodeConfig.registerFromWorkflow(data.groupNodes, {})
|
||
localStorage.setItem(
|
||
'litegrapheditor_clipboard',
|
||
JSON.stringify(data)
|
||
)
|
||
app.canvas.pasteFromClipboard()
|
||
})
|
||
} // and the callback
|
||
},
|
||
{
|
||
content: 'Save Group as Template ♾️Mixlab', // with a name
|
||
callback: async (value, opts, e, menu, group) => {
|
||
// console.log(options)
|
||
|
||
const clipboardAction = async cb => {
|
||
// We use the clipboard functions but dont want to overwrite the current user clipboard
|
||
// Restore it after we've run our callback
|
||
const old = localStorage.getItem('litegrapheditor_clipboard')
|
||
await cb()
|
||
localStorage.setItem('litegrapheditor_clipboard', old)
|
||
}
|
||
|
||
clipboardAction(async () => {
|
||
let name = group.title + ' ♾️Mixlab'
|
||
let nodes = group._nodes
|
||
|
||
app.canvas.copyToClipboard(nodes)
|
||
let data = localStorage.getItem('litegrapheditor_clipboard')
|
||
data = JSON.parse(data)
|
||
|
||
for (let i = 0; i < nodes.length; i++) {
|
||
const node = app.graph.getNodeById(nodes[i].id)
|
||
const nodeData = node.serialize()
|
||
|
||
let groupData = GroupNodeHandler.getGroupData(node)
|
||
|
||
// console.log('groupData',GroupNodeHandler.isGroupNode(node),groupData)
|
||
if (groupData) {
|
||
groupData = groupData.nodeData
|
||
if (!data.groupNodes) {
|
||
data.groupNodes = {}
|
||
}
|
||
data.groupNodes[nodeData.name] = groupData
|
||
data.nodes[i].type = nodeData.name
|
||
}
|
||
}
|
||
|
||
// templete
|
||
const store = async nt => {
|
||
const id = 'Comfy.NodeTemplates'
|
||
const file = 'comfy.templates.json'
|
||
let templates = await loadTemplate()
|
||
templates.push(nt)
|
||
if (app.storageLocation === 'server') {
|
||
const ts = JSON.stringify(templates, undefined, 4)
|
||
localStorage.setItem(id, ts) // Backwards compatibility
|
||
try {
|
||
await api.storeUserData(file, ts, {
|
||
stringify: false
|
||
})
|
||
} catch (error) {
|
||
console.error(error)
|
||
alert(error.message)
|
||
}
|
||
} else {
|
||
localStorage.setItem(id, JSON.stringify(templates))
|
||
}
|
||
}
|
||
console.log('data', data)
|
||
store({
|
||
name,
|
||
data: JSON.stringify(data)
|
||
})
|
||
})
|
||
} // and the callback
|
||
},
|
||
{
|
||
content: `Remove Group&Nodes ♾️Mixlab`, // with a name
|
||
callback: async (value, opts, e, menu, group) => {
|
||
// console.log(group)
|
||
let nodes = group._nodes
|
||
for (const node of nodes) {
|
||
app.graph.remove(node)
|
||
}
|
||
app.graph.remove(group)
|
||
} // and the callback
|
||
},
|
||
null,
|
||
...options
|
||
] // and return the options
|
||
}
|
||
LGraphCanvas.prototype.centerOnNode = function (node) {
|
||
// console.log(node)
|
||
var dpr = window.devicePixelRatio || 1 // 获取设备像素比
|
||
this.ds.offset[0] =
|
||
-node.pos[0] -
|
||
node.size[0] * 0.5 +
|
||
(this.canvas.width * 0.5) / (this.ds.scale * dpr) // 考虑设备像素比
|
||
this.ds.offset[1] =
|
||
-node.pos[1] -
|
||
node.size[1] * 0.5 +
|
||
(this.canvas.height * 0.5) / (this.ds.scale * dpr) // 考虑设备像素比
|
||
this.setDirty(true, true)
|
||
}
|
||
|
||
const getNodeMenuOptions = LGraphCanvas.prototype.getNodeMenuOptions
|
||
LGraphCanvas.prototype.getNodeMenuOptions = function (node) {
|
||
// replace it
|
||
const options = getNodeMenuOptions.apply(this, arguments) // start by calling the stored one
|
||
node.setDirtyCanvas(true, true) // force a redraw of (foreground, background)
|
||
|
||
let opts = [
|
||
{
|
||
content: 'Help ♾️Mixlab', // with a name
|
||
callback: () => {
|
||
LGraphCanvas.prototype.helpAboutNode(node)
|
||
} // and the callback
|
||
},
|
||
{
|
||
content: 'Fix node v2', // with a name
|
||
callback: () => {
|
||
LGraphCanvas.prototype.fixTheNode(node)
|
||
}
|
||
}
|
||
]
|
||
|
||
if (node.widgets) {
|
||
let text_widget = node.widgets.filter(
|
||
w => w.name === 'text' && typeof w.value == 'string'
|
||
)
|
||
|
||
let text_input = node.inputs?.filter(
|
||
inp => inp.name == 'text' && inp.type == 'STRING'
|
||
)
|
||
|
||
if (
|
||
text_input &&
|
||
text_input.length == 0 &&
|
||
text_widget &&
|
||
text_widget.length == 1 &&
|
||
window._mixlab_llamacpp &&
|
||
node.type != 'ShowTextForGPT'
|
||
) {
|
||
opts.push({
|
||
content: 'Text-to-Text ♾️Mixlab', // with a name
|
||
callback: () => {
|
||
LGraphCanvas.prototype.text2text(node)
|
||
} // and the callback
|
||
})
|
||
}
|
||
|
||
if (
|
||
node.imgs &&
|
||
node.imgs.length > 0 &&
|
||
window._mixlab_llamacpp &&
|
||
window._mixlab_llamacpp.chat_format === 'llava-1-5'
|
||
) {
|
||
opts.push({
|
||
content: 'Image-to-Text ♾️Mixlab', // with a name
|
||
callback: () => {
|
||
LGraphCanvas.prototype.image2text(node)
|
||
} // and the callback
|
||
})
|
||
}
|
||
}
|
||
|
||
return [...opts, null, ...options] // and return the options
|
||
}
|
||
|
||
// 支持app模式的json
|
||
const loadAppJson = async data => {
|
||
let workflow
|
||
try {
|
||
let w = JSON.parse(data)
|
||
if (w.app && w.output) workflow = w.workflow
|
||
} catch (err) {}
|
||
|
||
if (workflow && workflow.version && workflow.nodes && workflow.extra) {
|
||
await app.loadGraphData(workflow)
|
||
}
|
||
}
|
||
|
||
if (!window._mixlab_app_paste_listener) {
|
||
window._mixlab_app_paste_listener = true
|
||
//粘贴json的事件
|
||
document.addEventListener('paste', async e => {
|
||
// ctrl+shift+v is used to paste nodes with connections
|
||
// this is handled by litegraph
|
||
if (this.shiftDown) return
|
||
|
||
let data = e.clipboardData || window.clipboardData
|
||
|
||
// No image found. Look for node data
|
||
data = data.getData('text/plain')
|
||
|
||
loadAppJson(data)
|
||
})
|
||
|
||
// 把json往里 拖
|
||
document.addEventListener('drop', async event => {
|
||
event.preventDefault()
|
||
event.stopPropagation()
|
||
|
||
// Dragging from Chrome->Firefox there is a file but its a bmp, so ignore that
|
||
if (
|
||
event.dataTransfer.files.length &&
|
||
event.dataTransfer.files[0].type == 'application/json'
|
||
) {
|
||
const reader = new FileReader()
|
||
reader.onload = async () => {
|
||
loadAppJson(reader.result)
|
||
}
|
||
reader.readAsText(event.dataTransfer.files[0])
|
||
}
|
||
})
|
||
}
|
||
|
||
createMenu()
|
||
},
|
||
setup () {
|
||
setTimeout(async () => {
|
||
// Add canvas menu options
|
||
const orig = LGraphCanvas.prototype.getCanvasMenuOptions
|
||
|
||
const apps = await get_my_app()
|
||
if (!apps) return
|
||
|
||
console.log('apps', apps)
|
||
|
||
let apps_map = { 0: [] }
|
||
|
||
for (const app of apps) {
|
||
if (app.category) {
|
||
if (!apps_map[app.category]) apps_map[app.category] = []
|
||
apps_map[app.category].push(app)
|
||
} else {
|
||
apps_map['0'].push(app)
|
||
}
|
||
}
|
||
|
||
let apps_opts = []
|
||
for (const category in apps_map) {
|
||
// console.log('category', typeof category)
|
||
if (category === '0') {
|
||
apps_opts.push(
|
||
...Array.from(apps_map[category], a => {
|
||
// console.log('#1级',a)
|
||
return {
|
||
content: `${a.name}_${a.version}`,
|
||
has_submenu: false,
|
||
callback: async () => {
|
||
try {
|
||
let ddd = await get_my_app(a.filename)
|
||
if (!ddd) return
|
||
let item = ddd[0]
|
||
if (item) {
|
||
if (item.author) {
|
||
// 有作者信息
|
||
if (item.author.avatar)
|
||
localStorage.setItem(
|
||
'_mixlab_author_avatar',
|
||
item.author.avatar
|
||
)
|
||
if (item.author.name)
|
||
localStorage.setItem(
|
||
'_mixlab_author_name',
|
||
item.author.name
|
||
)
|
||
|
||
if (item.author.link)
|
||
localStorage.setItem(
|
||
'_mixlab_author_link',
|
||
item.author.link
|
||
)
|
||
}
|
||
|
||
// console.log(item.data)
|
||
app.loadGraphData(item.data)
|
||
setTimeout(() => {
|
||
const node = app.graph._nodes_in_order[0]
|
||
if (!node) return
|
||
app.canvas.centerOnNode(node)
|
||
app.canvas.setZoom(0.5)
|
||
}, 1000)
|
||
}
|
||
} catch (error) {}
|
||
}
|
||
}
|
||
})
|
||
)
|
||
} else {
|
||
// 二级
|
||
apps_opts.push({
|
||
content: '🚀 ' + category,
|
||
has_submenu: true,
|
||
disabled: false,
|
||
submenu: {
|
||
options: Array.from(apps_map[category], a => {
|
||
// console.log('#二级',a)
|
||
return {
|
||
content: `${a.name}_${a.version}`,
|
||
callback: async () => {
|
||
try {
|
||
let ddd = await get_my_app(a.filename, a.category)
|
||
|
||
if (!ddd) return
|
||
let item = ddd[0]
|
||
if (item) {
|
||
console.log(item)
|
||
if (item.author) {
|
||
// 有作者信息
|
||
if (item.author.avatar)
|
||
localStorage.setItem(
|
||
'_mixlab_author_avatar',
|
||
item.author.avatar
|
||
)
|
||
if (item.author.name)
|
||
localStorage.setItem(
|
||
'_mixlab_author_name',
|
||
item.author.name
|
||
)
|
||
if (item.author.link)
|
||
localStorage.setItem(
|
||
'_mixlab_author_link',
|
||
item.author.link
|
||
)
|
||
}
|
||
|
||
// console.log(item.data)
|
||
app.loadGraphData(item.data)
|
||
setTimeout(() => {
|
||
const node = app.graph._nodes_in_order[0]
|
||
if (!node) return
|
||
app.canvas.centerOnNode(node)
|
||
app.canvas.setZoom(0.5)
|
||
}, 1000)
|
||
}
|
||
} catch (error) {}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
// console.log('apps',apps_map, apps_opts,apps)
|
||
LGraphCanvas.prototype.getCanvasMenuOptions = function () {
|
||
const options = orig.apply(this, arguments)
|
||
|
||
options.push(
|
||
null,
|
||
{
|
||
content: `Nodes Map ♾️Mixlab`,
|
||
disabled: false,
|
||
callback: async () => {
|
||
nodesMap =
|
||
nodesMap && Object.keys(nodesMap).length > 0
|
||
? nodesMap
|
||
: await getCustomnodeMappings('url')
|
||
|
||
const nodesDiv = document.createDocumentFragment()
|
||
const nodes = (await app.graphToPrompt()).output
|
||
|
||
// console.log('[Mixlab]', 'loaded graph node: ', app)
|
||
let div =
|
||
document.querySelector('#mixlab_find_the_node') ||
|
||
document.createElement('div')
|
||
div.id = 'mixlab_find_the_node'
|
||
div.style = `
|
||
flex-direction: column;
|
||
align-items: end;
|
||
display:flex;position: absolute;
|
||
top: 50px; left: 50px; width: 200px;
|
||
color: var(--descrip-text);
|
||
background-color: var(--comfy-menu-bg);
|
||
padding: 10px;
|
||
border: 1px solid black;z-index: 999999999;padding-top: 0;`
|
||
|
||
div.innerHTML = ''
|
||
|
||
let btn = document.createElement('div')
|
||
btn.style = `display: flex;
|
||
width: calc(100% - 24px);
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 12px;
|
||
height: 44px;`
|
||
let btnB = document.createElement('button')
|
||
let textB = document.createElement('p')
|
||
btn.appendChild(textB)
|
||
btn.appendChild(btnB)
|
||
textB.style.fontSize = '12px'
|
||
textB.innerText = `Locate and navigate nodes ♾️Mixlab`
|
||
|
||
btnB.style = `float: right; border: none; color: var(--input-text);
|
||
background-color: var(--comfy-input-bg); border-color: var(--border-color);cursor: pointer;`
|
||
btnB.addEventListener('click', () => {
|
||
div.style.display = 'none'
|
||
})
|
||
btnB.innerText = 'X'
|
||
|
||
// 悬浮框拖动事件
|
||
div.addEventListener('mousedown', function (e) {
|
||
var startX = e.clientX
|
||
var startY = e.clientY
|
||
var offsetX = div.offsetLeft
|
||
var offsetY = div.offsetTop
|
||
|
||
function moveBox (e) {
|
||
var newX = e.clientX
|
||
var newY = e.clientY
|
||
var deltaX = newX - startX
|
||
var deltaY = newY - startY
|
||
div.style.left = offsetX + deltaX + 'px'
|
||
div.style.top = offsetY + deltaY + 'px'
|
||
}
|
||
|
||
function stopMoving () {
|
||
document.removeEventListener('mousemove', moveBox)
|
||
document.removeEventListener('mouseup', stopMoving)
|
||
}
|
||
|
||
document.addEventListener('mousemove', moveBox)
|
||
document.addEventListener('mouseup', stopMoving)
|
||
})
|
||
|
||
div.appendChild(btn)
|
||
|
||
const updateNodes = (ns, nd) => {
|
||
let appInfoNodes = {}
|
||
try {
|
||
let appInfo = app.graph._nodes.filter(
|
||
n => n.type === 'AppInfo'
|
||
)[0]
|
||
if (appInfo) {
|
||
appInfoNodes[appInfo.id] = 2
|
||
for (const id of appInfo.widgets[1].value.split('\n')) {
|
||
if (id && id.trim() && parseInt(id)) {
|
||
appInfoNodes[id] = 0
|
||
}
|
||
}
|
||
for (const id of app.graph._nodes
|
||
.filter(n => n.type === 'AppInfo')[0]
|
||
.widgets[2].value.split('\n')) {
|
||
if (id && id.trim() && parseInt(id)) {
|
||
appInfoNodes[id] = 1
|
||
}
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
|
||
for (let nodeId in ns) {
|
||
let n = ns[nodeId].title || ns[nodeId].class_type
|
||
if (nodesMap[n]) {
|
||
const { url, title } = nodesMap[n]
|
||
let d = document.createElement('button')
|
||
d.style = `text-align: left;
|
||
margin:6px;
|
||
color: var(--input-text);
|
||
background-color: var(--comfy-input-bg);
|
||
border-color: ${
|
||
appInfoNodes[nodeId] >= 0
|
||
? appInfoNodes[nodeId] === 1
|
||
? 'blue'
|
||
: 'red'
|
||
: 'var(--border-color)'
|
||
};
|
||
cursor: pointer;`
|
||
|
||
if (appInfoNodes[nodeId] === 2) {
|
||
// appinfo
|
||
d.style.backgroundColor = '#326328'
|
||
d.style.color = '#ffffff'
|
||
d.style.borderColor = 'transparent'
|
||
}
|
||
|
||
d.addEventListener('click', () => {
|
||
// console.log('node')
|
||
const node = app.graph.getNodeById(nodeId)
|
||
|
||
if (!node) return
|
||
app.canvas.centerOnNode(node)
|
||
app.canvas.setZoom(1)
|
||
})
|
||
d.addEventListener('mouseover', async () => {
|
||
// console.log('mouseover')
|
||
let n = (await app.graphToPrompt()).output
|
||
if (!deepEqual(n, ns)) {
|
||
nd.innerHTML = ''
|
||
updateNodes(n, nd)
|
||
}
|
||
})
|
||
|
||
d.innerHTML = `
|
||
<span>${'#' + nodeId} ${n}</span>
|
||
<a href="${url}" target="_blank" style="text-decoration: none;">🔗</a>
|
||
`
|
||
d.title = title
|
||
|
||
nd.appendChild(d)
|
||
}
|
||
}
|
||
}
|
||
|
||
let nodesDivv = document.createElement('div')
|
||
let appInfoNodes = {}
|
||
try {
|
||
let appInfo = app.graph._nodes.filter(
|
||
n => n.type === 'AppInfo'
|
||
)[0]
|
||
if (appInfo) {
|
||
appInfoNodes[appInfo.id] = 2
|
||
for (const id of appInfo.widgets[1].value.split('\n')) {
|
||
if (id && id.trim() && parseInt(id)) {
|
||
appInfoNodes[id] = 0
|
||
}
|
||
}
|
||
for (const id of app.graph._nodes
|
||
.filter(n => n.type === 'AppInfo')[0]
|
||
.widgets[2].value.split('\n')) {
|
||
if (id && id.trim() && parseInt(id)) {
|
||
appInfoNodes[id] = 1
|
||
}
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
|
||
for (let nodeId in nodes) {
|
||
let n = nodes[nodeId].class_type
|
||
if (nodesMap[n]) {
|
||
const { url, title: _title } = nodesMap[n]
|
||
let title = app.graph.getNodeById(nodeId).title || _title
|
||
let d = document.createElement('button')
|
||
d.style = `text-align: left;
|
||
margin:6px;
|
||
color: var(--input-text);
|
||
background-color: var(--comfy-input-bg);
|
||
border-color: ${
|
||
appInfoNodes[nodeId] >= 0
|
||
? appInfoNodes[nodeId] === 1
|
||
? 'blue'
|
||
: 'red'
|
||
: 'var(--border-color)'
|
||
};
|
||
cursor: pointer;`
|
||
|
||
if (appInfoNodes[nodeId] === 2) {
|
||
// appinfo
|
||
d.style.backgroundColor = '#326328'
|
||
d.style.color = '#ffffff'
|
||
d.style.borderColor = 'transparent'
|
||
}
|
||
|
||
d.addEventListener('click', () => {
|
||
console.log('click')
|
||
const node = app.graph.getNodeById(nodeId)
|
||
if (!node) return
|
||
app.canvas.centerOnNode(node)
|
||
app.canvas.setZoom(1)
|
||
})
|
||
d.addEventListener('mouseover', async () => {
|
||
// console.log('mouseover')
|
||
let n = (await app.graphToPrompt()).output
|
||
if (!deepEqual(n, nodes)) {
|
||
nodesDivv.innerHTML = ''
|
||
updateNodes(n, nodesDivv)
|
||
}
|
||
})
|
||
|
||
d.innerHTML = `
|
||
<span>${'#' + nodeId} ${title}</span>
|
||
<a href="${url}" target="_blank" style="text-decoration: none;">🔗</a>
|
||
`
|
||
d.title = n
|
||
|
||
nodesDiv.appendChild(d)
|
||
}
|
||
}
|
||
|
||
nodesDivv.appendChild(nodesDiv)
|
||
nodesDivv.style = `overflow: scroll;
|
||
height: 70vh;width: 100%;`
|
||
|
||
div.appendChild(nodesDivv)
|
||
|
||
if (!document.querySelector('#mixlab_find_the_node'))
|
||
document.body.appendChild(div)
|
||
}
|
||
},
|
||
apps_opts.length > 0
|
||
? {
|
||
content: 'Workflow App ♾️Mixlab',
|
||
has_submenu: true,
|
||
disabled: false,
|
||
submenu: {
|
||
options: apps_opts
|
||
}
|
||
}
|
||
: null
|
||
)
|
||
|
||
return options
|
||
}
|
||
}, 1000)
|
||
|
||
// createNodesCharts()
|
||
},
|
||
nodeCreated (node) {
|
||
if (node.widgets) {
|
||
// Locate dynamic prompt text widgets
|
||
// Include any widgets with dynamicPrompts set to true, and customtext
|
||
|
||
for (let index = 0; index < node.widgets.length; index++) {
|
||
const widget = node.widgets[index]
|
||
if (
|
||
(widget.type === 'customtext' && widget.dynamicPrompts !== false) ||
|
||
widget.dynamicPrompts
|
||
) {
|
||
widget.element.classList.add('dynamic_prompt')
|
||
|
||
widget.element.addEventListener('mouseover', e => {
|
||
// console.log(node.widgets_values[index])
|
||
if (node.widgets_values && node.widgets_values[index])
|
||
widget.element.setAttribute('title', node.widgets_values[index])
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
fetch('manager/badge_mode').then(r => {
|
||
if (r.status === 404) {
|
||
// 右上角的badge是否已经绘制
|
||
if (!node.badge_enabled) {
|
||
if (!node.getNickname) {
|
||
node.getNickname = function () {
|
||
if (node.nickname) {
|
||
return node.nickname
|
||
}
|
||
return
|
||
// return getNickname(node, node.comfyClass.trim())
|
||
}
|
||
}
|
||
|
||
const orig = node.__proto__.onDrawForeground
|
||
node.onDrawForeground = function (ctx) {
|
||
drawBadge(node, orig, arguments)
|
||
}
|
||
node.badge_enabled = true
|
||
}
|
||
}
|
||
})
|
||
},
|
||
async loadedGraphNode (node, app) {
|
||
// console.log(
|
||
// '#ui init',
|
||
// app.graph._nodes[app.graph._nodes.length - 1].id,
|
||
// node.id
|
||
// )
|
||
try {
|
||
// 用来居中显示节点
|
||
if ((app.graph._nodes[app.graph._nodes.length - 1].id, node.id)) {
|
||
app.canvas.centerOnNode(node)
|
||
app.canvas.setZoom(0.45)
|
||
}
|
||
} catch (error) {}
|
||
}
|
||
})
|
||
|
||
//获取当前显存
|
||
function fetchSystemStats () {
|
||
return new Promise(async (resolve, reject) => {
|
||
try {
|
||
const response = await fetch('/system_stats')
|
||
const data = await response.json()
|
||
resolve(data)
|
||
} catch (error) {
|
||
reject(error)
|
||
}
|
||
})
|
||
}
|
||
//清理显存
|
||
function postFreeData () {
|
||
return new Promise(async (resolve, reject) => {
|
||
try {
|
||
const postData = {
|
||
unload_models: true,
|
||
free_memory: true
|
||
}
|
||
const response = await fetch('/free', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(postData)
|
||
})
|
||
if (response.ok) {
|
||
resolve()
|
||
} else {
|
||
reject(new Error('Request failed'))
|
||
}
|
||
} catch (error) {
|
||
reject(error)
|
||
}
|
||
})
|
||
}
|