Compare commits

...
41 Commits
Author SHA1 Message Date
Mel Massadian d576190f07 fix: 🐛 category for settings 2024-11-20 21:35:07 +01:00
Mel Massadian 247ad12ec3 fix: 🐛 new UI issues
- Fixes the "edit icon cannot be clicked"
- Changed the parser to add support for more non std markdown
- Markdown links now always open a new tab instead of replacing current
- New optional shiki support for code blocks (check #211 for details)
2024-11-18 01:53:04 +01:00
Mel Massadian 881573e2f2 feat: ✨ use the new parser for documentations
- might also fix #210
2024-11-18 01:32:29 +01:00
Mel Massadian 6f3a5b5c71 feat: ✨ add @mtb/markdown-parser bundles
- the standard one is half the size of showdown
- the enhanced one (add shiki with most of its features) is 1.5mb
2024-11-18 00:48:04 +01:00
Mel Massadian fa017fbb81 chore: 🧹 update externs
- remove showdown
- update dompurify
2024-11-18 00:45:53 +01:00
Chenlei Hu dbcca15a21 fix 🐛: input type on MTB_AnyToString (#204) 2024-10-10 02:13:13 +02:00
Mel Massadian bc41576fac docs 📚: fix wiki link
closes #202
2024-09-29 00:57:44 +02:00
Mel Massadian 8596b8184e fix: 🐛 disable old BOOL widget (legacy)
This can break if a pack declares a BOOL type

fixes #201
2024-09-27 13:33:01 +02:00
Mel Massadian 896a025006 feat: ✨ add VitMatte nodes
Basic implementation hardcoded for cuda
https://huggingface.co/melmass/pytorch-scripts
2024-09-22 00:16:23 +02:00
Mel Massadian 43092e44a4 fix: 🐛 pass ONNX providers explicitely
see #199
2024-09-08 19:58:35 +02:00
bymyself 80b5a0ca74 fix: 🐛 typo in mtb_widgets error catch (#197) 2024-09-05 14:50:48 +02:00
Mel Massadian 81b3bc1651 fix: 🐛 doc widget sidebar offset in the new ui 2024-08-18 14:26:02 +02:00
Mel Massadian a825504bdd chore: 🧹 add pathlibed inputs to utils 2024-08-18 14:07:42 +02:00
Mel Massadian 22190cd25e chore: 🧹 disable Constant
Removing as this doesn't work without my PR
2024-08-16 00:03:25 +02:00
Mel Massadian a976adbb39 chore: 🧹 new ui is default, flag for old ui 2024-08-16 00:02:18 +02:00
Mel Massadian 997d2fb13a fix: 🐛 don't fallback to eval
addresses legitimate concerns raised in #190
This limits the use a bit, SimpleMath from:
https://github.com/cubiq/ComfyUI_essentials
Is a better alternative
2024-08-08 22:34:03 +02:00
Mel Massadian f8829fcb37 chore: 🧹 add methods to shared 2024-08-08 16:57:10 +02:00
Mel Massadian 9651a70341 feat: ✨ add ColorCorrectGPU
Alternative to my ColorCorrect using only torch.
Also added Mask input for both (optional so this is not a breaking change)
2024-08-01 19:33:13 +02:00
Mel Massadian 57683c3c7d feat: ✨ add Swap FG/BG colors to MaskToImage 2024-08-01 18:38:58 +02:00
Mel Massadian f99f92e8f7 feat: ✨ add Extract coordinates
wip meant mainly for SAM2
2024-08-01 18:36:12 +02:00
Mel Massadian 5bc125d2f0 docs: 📚 remove link
still in issues
2024-08-01 17:32:23 +02:00
Mel Massadian c99b0812ab fix: 🐛 rework main utils
A whole gymnastic because comfy masks are (B,H,W).
maybe unsqueezing first is better but some nodes seems to still output
(B,H,W,C), IIRC there is an upstream PR about that
2024-08-01 17:31:18 +02:00
Mel Massadian 333f646ab1 docs: 📚 clean readme 2024-08-01 17:28:33 +02:00
Mel Massadian dbdf27664c chore: 🧹 add an old_ui flag to my launcher
this is dev related to easily test both UIs
see: https://github.com/melMass/CosyVoice-ComfyUI/commit/29510c36f0f8c1e4e5209148d14fe038947728c1
2024-07-31 04:59:36 +02:00
Mel Massadian 7d5569e5c1 chore: 🧹 move qrcode to his own file
Each files in `./nodes` can fail, but this means all nodes in the
file are skipped... `Generate` has "too important" nodes to fail
and doesn't require any extra dependencies.

This change allow qrcode to fail on its own
2024-07-31 04:59:17 +02:00
Mel Massadian 5681b464ad feat: ✨ add AudioCut
and make AudioSequence able to get negative "silence"
which would effectively "overlap" the joining sections
2024-07-31 04:42:40 +02:00
Mel Massadian 8d0fcee2f3 feat: ✨ add AudioStack
To stack/overlay audios.
2024-07-28 20:11:31 +02:00
Mel Massadian 1078fc6f0f feat: ✨ add AudioSequence node 2024-07-28 17:20:01 +02:00
Mel Massadian 821a0ef427 fix: 🐛 MaskToImage
also remove style debug
2024-07-07 20:40:18 +02:00
Mel Massadian 9007a70aa0 feat: ✨ add Split Bbox node 2024-07-06 18:30:14 +02:00
Mel Massadian 1a0ebd5173 feat: ✨ update lerp example 2024-07-06 18:26:45 +02:00
Mel Massadian 59608320c8 ⬆️ Bump version: 0.1.5 → 0.1.6 2024-07-03 18:16:37 +02:00
Mel Massadian d64fac4b74 fix: 🐛 menu callback issue
`+` on arrays returns a string in js...
2024-07-03 18:11:07 +02:00
Mel Massadian d687497d80 chore: 🧹 better classname extraction
Allow for consecutive uppercase letters:
- MTB_BatchFromHistoryV2 -> Batch From History V2
- MTB_CLIPInterpolate -> CLIP Interpolate
2024-07-03 16:00:48 +02:00
Mel Massadian d6343e1860 feat: ✨ add alpha channel support for faceswap/restore
Fixes #187
2024-07-03 15:59:09 +02:00
Mel Massadian 4eebdd8b8b ci: 🤖 limit release only to tags
I regularly need to push to main without needing to update
the extension's code / registry.
2024-07-02 13:14:00 +02:00
Mel Massadian 372e035686 Merge branch 'main' of https://github.com/melMass/comfy_mtb 2024-07-02 13:09:05 +02:00
Mel Massadian fb34671ee6 chore: 🧹 runner 2024-07-02 13:08:57 +02:00
Elthariel f25f6bdcd1 docs: 📚 Update requirements file in INSTALL.md (#186) 2024-06-26 15:05:45 +02:00
Mel Massadian f1b484617a ci: 🤖 only publish on tag
I can still autotag easily but it avoids bumping too much
versions to quickly
2024-06-22 20:17:14 +02:00
Mel Massadian 4507842a70 chore: 🧹 small fixes
- Handle image dimension mismatch in ConcatImages (Error,Smallest,Largest)
- typing
2024-06-22 20:13:59 +02:00
34 changed files with 3298 additions and 2291 deletions
+2 -4
View File
@@ -2,10 +2,8 @@ name: 📦 Publish to Comfy registry
on:
workflow_dispatch:
push:
branches:
- main
paths:
- "pyproject.toml"
tags:
- '*'
jobs:
publish-node:
-93
View File
@@ -1,93 +0,0 @@
# 安装
- [安装](#安装)
- [自动安装(推荐)](#自动安装推荐)
- [ComfyUI 管理器](#comfyui-管理器)
- [虚拟环境](#虚拟环境)
- [模型下载](#模型下载)
- [网络扩展](#网络扩展)
- [旧的安装方法 (MANUAL)](#旧的安装方法-manual)
- [依赖关系](#依赖关系)
### 自动安装(推荐)
### ComfyUI 管理器
从 0.1.0 版开始,该扩展将使用 [ComfyUI-Manager](https://github.com/ltdrdata/ComfyUI-Manager) 进行安装,这对处理各种环境下的各种安装问题大有帮助。
### 虚拟环境
还有一种试验性的单行安装方法,即在 ComfyUI 根目录下使用以下命令进行安装。它将下载代码、安装依赖项并运行安装脚本:
```bash
curl -sSL "https://raw.githubusercontent.com/username/repo/main/install.py" | python3 -
```
## 模型下载
某些节点需要下载额外的模型,您可以使用与上述相同的 python 环境以交互方式完成下载:
```bash
python scripts/download_models.py
```
然后根据提示或直接按回车键下载每个模型。
> **Note**
> 您可以使用以下方法下载所有型号,无需提示:
```bash
python scripts/download_models.py -y
```
#### 网络扩展
首次运行时,脚本会尝试将 [网络扩展](https://github.com/melMass/comfy_mtb/tree/main/web)链接到你的 "web/extensions "文件夹,[请参阅](https://github.com/melMass/comfy_mtb/blob/d982b69a58c05ccead9c49370764beaa4549992a/__init__.py#L45-L61)。
<img alt="color widget preview" src="https://github.com/melMass/comfy_mtb/assets/7041726/cff7e66a-4cc4-4866-b35b-10af0bb2d110" width=450>
### 旧的安装方法 (MANUAL)
### 依赖关系
<details><summary><h4>Custom Virtualenv(我主要用这个)</h4></summary
1. 确保您处于用于 ComfyUI 的 Python 环境中。
2. 运行以下命令安装所需的依赖项:
```bash
pip install -r comfy_mtb/reqs.txt
```
</details>
<details><summary><h4>Comfy 便携式/单机版(来自 ComfyUI 版本)</h4></summary>
如果您使用 ComfyUI 单机版中的 `python-embeded `,那么当二进制文件没有轮子时,您就无法使用 pip 安装二进制文件的依赖项,在这种情况下,请查看最近的 [发布](https://github.com/melMass/comfy_mtb/releases),那里有一个预编译轮子的 linux 和 windows 捆绑包(只有那些需要从源代码编译的轮子),请查看 [此问题 (#1)](https://github.com/melMass/comfy_mtb/issues/1) 以获取更多信息。
![image](https://github.com/melMass/comfy_mtb/assets/7041726/2934fa14-3725-427c-8b9e-2b4f60ba1b7b)
</details>
<details><summary><h4>Google Colab</h4></summary>
在 **Run ComfyUI with localtunnel (Recommended Way)** 标题之后(代码单元格之前)添加一个新的代码单元格
![preview of where to add it on colab](https://github.com/melMass/comfy_mtb/assets/7041726/35df2ef1-14f9-44cd-aa65-353829188cd7)
```python
# download the nodes
!git clone --recursive https://github.com/melMass/comfy_mtb.git custom_nodes/comfy_mtb
# download all models
!python custom_nodes/comfy_mtb/scripts/download_models.py -y
# install the dependencies
!pip install -r custom_nodes/comfy_mtb/reqs.txt -f https://download.openmmlab.com/mmcv/dist/cu118/torch2.0/index.html
```
如果运行后 colab 抱怨需要重新启动运行时,请重新启动,然后不要重新运行之前的单元格,只运行运行本地隧道的单元格。(可能需要先添加一个包含 `%cd ComfyUI` 的单元格)
> **Note**:
> If you don't need all models, remove the `-y` as collab actually supports user input: ![image](https://github.com/melMass/comfy_mtb/assets/7041726/40fc3602-f1d4-432a-98fd-ce2240f5ad06)
> **Preview**
> ![image](https://github.com/melMass/comfy_mtb/assets/7041726/b5b2b2d9-f1e8-4c43-b1db-7dfc5e07be86)
</details>
-93
View File
@@ -1,93 +0,0 @@
# インストール
- [インストール](#インストール)
- [自動インストール (推奨)](#自動インストール-推奨)
- [ComfyUI マネージャ](#comfyui-マネージャ)
- [仮想環境](#仮想環境)
- [モデルのダウンロード](#モデルのダウンロード)
- [ウェブ拡張機能](#ウェブ拡張機能)
- [旧インストール方法 (MANUAL)](#旧インストール方法-manual)
- [依存関係](#依存関係)
## 自動インストール (推奨)
### ComfyUI マネージャ
バージョン0.1.0では、この拡張機能は[ComfyUI-Manager](https://github.com/ltdrdata/ComfyUI-Manager)と一緒にインストールすることを想定しています。これは、様々な環境で直面する様々なインストール問題を処理するのに非常に役立ちます。
### 仮想環境
また、ComfyUIのルートから以下のコマンドを使用する実験的なワンライナー・インストールもあります。これはコードをダウンロードし、依存関係をインストールし、インストールスクリプトを実行します:
```bash
curl -sSL "https://raw.githubusercontent.com/username/repo/main/install.py" | python3 -
```
## モデルのダウンロード
ノードによっては、追加モデルのダウンロードが必要な場合があるので、上記と同じ python 環境を使って対話的に行うことができる:
```bash
python scripts/download_models.py
```
プロンプトに従うか、Enterを押すだけで全てのモデルをダウンロードできます。
> **Note**
> プロンプトを出さずに全てのモデルをダウンロードするには、以下のようにします:
```bash
python scripts/download_models.py -y
```
### ウェブ拡張機能
初回実行時にスクリプトは[web extensions](https://github.com/melMass/comfy_mtb/tree/main/web)をあなたの快適な `web/extensions` フォルダに[シンボリックリンク](https://github.com/melMass/comfy_mtb/blob/d982b69a58c05ccead9c49370764beaa4549992a/__init__.py#L45-L61)しようとします。万が一失敗した場合は、mtbフォルダを手動で`ComfyUI/web/extensions`にコピーしてください:
<img alt="color widget preview" src="https://github.com/melMass/comfy_mtb/assets/7041726/cff7e66a-4cc4-4866-b35b-10af0bb2d110" width=450>
## 旧インストール方法 (MANUAL)
### 依存関係
<details><summary><h4>カスタム Virtualenv (私は主にこれを使っています)</h4></summary>
1. ComfyUIで使用しているPython環境であることを確認してください。
2. 以下のコマンドを実行して、必要な依存関係をインストールします:
```bash
pip install -r comfy_mtb/reqs.txt
```
</details>
<details><summary><h4>Comfy-portable / standalone (ComfyUI リリースより)</h4></summary>。
もしあなたがComfyUIスタンドアロンから`python-embeded`を使用している場合、バイナリがホイールを持っていない場合、依存関係をpipでインストールすることができません。この場合、最後の[リリース](https://github.com/melMass/comfy_mtb/releases)をチェックしてください。(ソースからのビルドが必要なもののみ)あらかじめビルドされたホイールがあるlinuxとwindows用のバンドルがあります。詳細は[この問題(#1)](https://github.com/melMass/comfy_mtb/issues/1)をチェックしてください。
![image](https://github.com/melMass/comfy_mtb/assets/7041726/2934fa14-3725-427c-8b9e-2b4f60ba1b7b)
</details>
<details><summary><h4>Google Colab</h4></summary>
ComfyUI with localtunnel (Recommended Way)**ヘッダーのすぐ後(コードセルの前)に、新しいコードセルを追加してください。
![colabに追加する場所のプレビュー](https://github.com/melMass/comfy_mtb/assets/7041726/35df2ef1-14f9-44cd-aa65-353829188cd7)
```python
# download the nodes
!git clone --recursive https://github.com/melMass/comfy_mtb.git custom_nodes/comfy_mtb
# download all models
!python custom_nodes/comfy_mtb/scripts/download_models.py -y
# install the dependencies
!pip install -r custom_nodes/comfy_mtb/reqs.txt -f https://download.openmmlab.com/mmcv/dist/cu118/torch2.0/index.html
```
これを実行した後、colabがランタイムを再起動する必要があると文句を言ったら、それを実行し、それ以前のセルは再実行せず、localtunnelを実行するセルだけを再実行してください。(最初に`%cd ComfyUI`のセルを追加する必要があるかもしれません...)
> **Note**:
> すべてのモデルが必要でない場合は、`-y`を削除してください : ![image](https://github.com/melMass/comfy_mtb/assets/7041726/40fc3602-f1d4-432a-98fd-ce2240f5ad06)
> **プレビュー**
> ![image](https://github.com/melMass/comfy_mtb/assets/7041726/b5b2b2d9-f1e8-4c43-b1db-7dfc5e07be86)
</details>
+1 -1
View File
@@ -42,7 +42,7 @@ then follow the prompt or just press enter to download every models.
1. Make sure you are in the Python environment you use for ComfyUI.
2. Install the required dependencies by running the following command:
```bash
pip install -r comfy_mtb/reqs.txt
pip install -r comfy_mtb/requirements.txt
```
</details>
-99
View File
@@ -1,99 +0,0 @@
# MTB Nodes
<a href="https://www.buymeacoffee.com/melmass" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 32px !important;width: 140px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
[** 安装指南**](./INSTALL-CN.md) | [** 示例**](https://github.com/melMass/comfy_mtb/wiki/Examples)
欢迎使用 MTB Nodes 项目!这个代码库是开放的,您可以自由地探索和利用。它的主要目的是构建用于 [MLOPs](https://github.com/Bismuth-Consultancy-BV/MLOPs) 中的概念验证(POCs)。该项目中的许多节点都是受到现有社区贡献或内置功能的启发而创建的。
在继续之前,请注意与此项目中使用的某些库相关的许可证。例如,`deepbump` 库采用 [GPLv3](https://github.com/HugoTini/DeepBump/blob/master/LICENSE) 许可证。
- [节点列表](#节点列表)
- [bbox](#bbox)
- [colors](#colors)
- [人脸检测/交换](#人脸检测交换)
- [图像插值(动画)](#图像插值动画)
- [图像操作](#图像操作)
- [潜在变量工具](#潜在变量工具)
- [其他工具](#其他工具)
- [纹理](#纹理)
- [Comfy 资源](#comfy-资源)
# 节点列表
## bbox
- `Bounding Box`: BBox 构造函数(自定义类型)
- `BBox From Mask`: 从遮罩中提取边界框
- `Crop`: 根据边界框裁剪图像
- `Uncrop`: 根据边界框还原图像
## colors
- `Colored Image`: 给定尺寸的纯色图像
- `RGB to HSV`: -
- `HSV to RGB`: -
- `Color Correct`: 基本颜色校正工具
<img src="https://github.com/melMass/comfy_mtb/assets/7041726/7c20ac83-31ff-40ea-a1a0-06c2acefb2ef" width=345/>
## 人脸检测/交换
- `Face Swap`: 使用 deepinsight/insightface 模型进行人脸交换(该节点在早期版本中称为 `Roop`,功能相同,`Roop` 只是使用这些模型的应用程序)
> **注意**
> 人脸索引允许您选择要替换的人脸,如下所示:
<img src="https://github.com/melMass/comfy_mtb/assets/7041726/2e9d6066-c466-4a01-bd6c-315f7f1e8b42" width=320/>
- `Load Face Swap Model`: 加载 insightface 模型用于人脸交换
- `Restore Face`: 使用 [GFPGan](https://github.com/TencentARC/GFPGAN) 还原人脸,与 `Face Swap` 配合使用效果很好,并支持 `bg_upscaler` 的 Comfy 原生放大器
## 图像插值(动画)
- `Load Film Model`: 加载 [FILM](https://github.com/google-research/frame-interpolation) 模型
- `Film Interpolation`: 使用 [FILM](https://github.com/google-research/frame-interpolation) 处理输入帧
<img src="https://github.com/melMass/comfy_mtb/assets/7041726/3afd1647-6634-4b92-a34b-51432e6a9834" width=400/>
- `Export to Prores (experimental)`: 将输入帧导出为 ProRes 4444 mov 文件。这使用 ffmpeg stdin 发送原始的 NumPy 数组,与 `Film Interpolation` 一起使用,目前很简单,但可以进一步扩展。
## 图像操作
- `Blur`: 使用高斯滤波器对图像进行模糊处理。
- `Deglaze Image`: 从 [FN16](https://github.com/Fannovel16/FN16-ComfyUI-nodes/blob/main/DeglazeImage.py) 中提取
- `Denoise`: 对输入图像进行降噪处理
- `Image Compare`: 比较两个图像并返回差异图像
- `Image Premultiply`: 使用掩码对图像进行预乘处理
- `Image Remove Background Rembg`: 使用 [RemBG](https://github.com/danielgatis/rembg) 进行背景去除
<img src="https://github.com/melMass/comfy_mtb/assets/7041726/e69253b4-c03c-45e9-92b5-aa46fb887be8" width=320/>
- `Image Resize Factor`: 大部分提取自 [WAS Node Suite](https://github.com/WASasquatch/was-node-suite-comfyui),经过一些编辑(特别是支持多个图像)和较少的功能。
- `Mask To Image`: 将遮罩(Alpha)转换为带有颜色和背景的 RGB 图像
- `Save Image Grid`: 将输入批次中的所有图像保存为图像网格。
## 潜在变量工具
- `Latent Lerp`: 两个潜在变量之间的线性插值(混合)
## 其他工具
- `Concat Images`: 接受两个图像流,并将它们合并为其他 Comfy 管道支持的图像批次。
- `Image Resize Factor`: **已弃用**,因为我后来发现了内
置的图像调整大小功能。
- `Text To Image`: 使用字体将文本转换为图像的工具
- `Styles Loader`: 加载 csv 文件并从行中填充下拉列表(类似于 A111)
<img src="https://github.com/melMass/comfy_mtb/assets/7041726/02fe3211-18ee-4e54-a029-931388f5fde8" width=320/>
- `Smart Step`: 一个非常基本的节点,用于获取在 KSampler 高级中使用的步骤百分比
- `Qr Code`: 基本的 QR Code 生成器
- `Save Tensors`: 调试节点,将来可能会被删除
- `Int to Number`: 用于 WASSuite 数字节点的补充
- `Smart Step`: 使用百分比来控制 `KAdvancedSampler` 的步骤(开始/停止)
## 纹理
- `DeepBump`: 从单张图片生成法线图和高度图
# Comfy 资源
**指南**:
- [官方示例(英文)](https://comfyanonymous.github.io/ComfyUI_examples/)
- @BlenderNeko 的[ComfyUI 社区手册(英文)](https://blenderneko.github.io/ComfyUI-docs/)
- @tjhayasaka 的[Tomoaki 个人 Wiki(日文)](https://comfyui.creamlab.net/guides/)
**扩展和自定义节点**:
- @WASasquatch 的[Comfy 列表插件(英文)](https://github.com/WASasquatch/comfyui-plugins)
- [CivitAI 上的 ComfyUI 标签(英文)](https://civitai.com/tag/comfyui)
-96
View File
@@ -1,96 +0,0 @@
# MTB Nodes
<a href="https://www.buymeacoffee.com/melmass" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 32px !important;width: 140px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
[**インストールガイド**](./INSTALL-JP.md) | [**サンプル**](https://github.com/melMass/comfy_mtb/wiki/Examples)
MTB Nodesプロジェクトへようこそ!このコードベースは、自由に探索し、利用することができます。主な目的は、[MLOPs](https://github.com/Bismuth-Consultancy-BV/MLOPs)の実装のための概念実証(POC)を構築することです。このプロジェクトの多くのノードは、既存のコミュニティの貢献や組み込みの機能に触発されています。
続行する前に、このプロジェクトで使用されている特定のライブラリに関連するライセンスに注意してください。たとえば、「deepbump」ライブラリは、[GPLv3](https://github.com/HugoTini/DeepBump/blob/master/LICENSE)の下でライセンスされています。
- [ノードリスト](#ノードリスト)
- [bbox](#bbox)
- [colors](#colors)
- [顔検出 / スワッピング](#顔検出--スワッピング)
- [画像補間(アニメーション)](#画像補間アニメーション)
- [画像操作](#画像操作)
- [潜在的なユーティリティ](#潜在的なユーティリティ)
- [その他のユーティリティ](#その他のユーティリティ)
- [テクスチャ](#テクスチャ)
- [Comfyリソース](#comfyリソース)
# ノードリスト
## bbox
- `Bounding Box`: BBoxコンストラクタ(カスタムタイプ)
- `BBox From Mask`: マスクからバウンディングボックスを抽出
- `Crop`: BBoxから画像を切り抜く
- `Uncrop`: BBoxから画像を元に戻す
## colors
- `Colored Image`: 指定されたサイズの一定の色の画像
- `RGB to HSV`: -
- `HSV to RGB`: -
- `Color Correct`: 基本的なカラーコレクションツール
<img src="https://github.com/melMass/comfy_mtb/assets/7041726/7c20ac83-31ff-40ea-a1a0-06c2acefb2ef" width=345/>
## 顔検出 / スワッピング
- `Face Swap`: deepinsight/insightfaceモデルを使用した顔の入れ替え(このノードは初期バージョンでは「Roop」と呼ばれていましたが、同じ機能を提供します。Roopは単にこれらのモデルを使用するアプリです)
> **注意**
> 顔のインデックスを使用して置き換える顔を選択できます。以下を参照してください:
<img src="https://github.com/melMass/comfy_mtb/assets/7041726/2e9d6066-c466-4a01-bd6c-315f7f1e8b42" width=320/>
- `Load Face Swap Model`: 顔の交換のためのinsightfaceモデルを読み込む
- `Restore Face`: [GFPGan](https://github.com/TencentARC/GFPGAN)を使用して顔を復元し、`Face Swap`と組み合わせて使用すると非常に効果的であり、`bg_upscaler`のComfyネイティブアップスケーラーもサポートしています。
## 画像補間(アニメーション)
- `Load Film Model`: [FILM](https://github.com/google-research/frame-interpolation)モデルを読み込む
- `Film Interpolation`: [FILM](https://github.com/google-research/frame-interpolation)を使用して入力フレームを処理する
<img src="https://github.com/melMass/comfy_mtb/assets/7041726/3afd1647-6634-4b92-a34b-51432e6a9834" width=400/>
- `Export to Prores (experimental)`: 入力フレームをProRes 4444 movファイルにエクスポートします。これは現在は単純なものですが、`Film Interpolation`と組み合わせて使用するためのffmpegのstdinを使用して生のNumPy配列を送信するもので、拡張することもできます。
## 画像操作
- `Blur`: ガウスフィルタを使用して画像をぼかす
- `Deglaze Image`: [FN16](https://github.com/Fannovel16/FN16-ComfyUI-nodes/blob/main/DeglazeImage.py)から取得
- `Denoise`: 入力画像のノイズを除去する
- `Image Compare`: 2つの画像を比較し、差分画像を返す
- `Image Premultiply`: 画像をマスクで乗算
- `Image Remove Background Rembg`: [RemBG](https://github.com/danielgatis/rembg)を使用した背景除去
<img src="https://github.com/melMass/comfy_mtb/assets/704172
6/e69253b4-c03c-45e9-92b5-aa46fb887be8" width=320/>
- `Image Resize Factor`: [WAS Node Suite](https://github.com/WASasquatch/was-node-suite-comfyui)から抽出され、いくつかの編集(特に複数の画像のサポート)と機能の削減が行われました。
- `Mask To Image`: マスク(アルファ)をカラーと背景を持つRGBイメージに変換します。
- `Save Image Grid`: 入力バッチのすべての画像を画像グリッドとして保存します。
## 潜在的なユーティリティ
- `Latent Lerp`: 2つの潜在的なベクトルの間の線形補間(ブレンド)
## その他のユーティリティ
- `Concat Images`: 2つの画像ストリームを取り、他のComfyパイプラインでサポートされている画像のバッチとしてマージします。
- `Image Resize Factor`: **非推奨**。組み込みの画像リサイズ機能を発見したため、削除される予定です。
- `Text To Image`: フォントを使用してテキストを画像に変換するためのユーティリティ
- `Styles Loader`: csvファイルをロードし、行からドロップダウンを作成します(A111のようなもの)
<img src="https://github.com/melMass/comfy_mtb/assets/7041726/02fe3211-18ee-4e54-a029-931388f5fde8" width=320/>
- `Smart Step`: KSamplerの高度な使用に使用するステップパーセントを取得する非常に基本的なノード
- `Qr Code`: 基本的なQRコード生成器
- `Save Tensors`: 将来的に削除される可能性のあるデバッグノード
- `Int to Number`: WASSuiteの数値ノードの補完
- `Smart Step`: `KAdvancedSampler`のステップ(開始/停止)を制御するための非常に基本的なツールで、パーセンテージを使用します。
## テクスチャ
- `DeepBump`: 1枚の画像から法線マップと高さマップを生成します。
# Comfyリソース
**ガイド**:
- [公式の例(英語)](https://comfyanonymous.github.io/ComfyUI_examples/)
- @BlenderNekoによる[ComfyUIコミュニティマニュアル(英語)](https://blenderneko.github.io/ComfyUI-docs/)
- @tjhayasakaによる[Tomoakiの個人Wiki(日本語)](https://comfyui.creamlab.net/guides/)
**拡張機能とカスタムノード**:
- @WASasquatchによる[Comfyリスト用のプラグイン(英語)](https://github.com/WASasquatch/comfyui-plugins)
- [CivitAIのComfyUIタグ(英語)](https://civitai.com/tag/comfyui)
+1 -170
View File
@@ -4,177 +4,8 @@
![home](https://repository-images.githubusercontent.com/649047066/a3eef9a7-20dd-4ef9-b839-884502d4e873)
<!-- omit in toc -->
**Translated Readme (using DeepTranslate, PRs are welcome)**:
![image](https://github.com/melMass/comfy_mtb/assets/7041726/f8429c14-3521-4e28-82a3-863d781976c0)
[日本語による説明](./README-JP.md)
![image](https://github.com/melMass/comfy_mtb/assets/7041726/d5cc1fdd-2820-4a5c-b2d7-482f1c222063)
[中文说明](./README-CN.md)
<a href="https://www.buymeacoffee.com/melmass" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 32px !important;width: 140px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
[**Install Guide**](./INSTALL.md) | [**Examples**](https://github.com/melMass/comfy_mtb/wiki/Examples)
There is now a dedicated `#mtb-nodes` channel on the Banodoco discord:
[![](https://dcbadge.vercel.app/api/server/AXhsabmDhn?style=flat)](https://discord.gg/IAXhsabmDhn)
---
Welcome to the MTB Nodes project! This codebase is open for you to explore and utilize as you wish. Its primary purpose is to build proof-of-concepts (POCs) for implementation in [MLOPs](https://github.com/Bismuth-Consultancy-BV/MLOPs). Many nodes in this project are inspired by existing community contributions or built-in functionalities.
Before proceeding, please be aware of the licenses associated with certain libraries used in this project. For example, the `deepbump` library is licensed under [GPLv3](https://github.com/HugoTini/DeepBump/blob/master/LICENSE).
- [Web Extensions](#web-extensions)
- [Node List](#node-list)
- [Animation](#animation)
- [bbox](#bbox)
- [colors](#colors)
- [image ops](#image-ops)
- [latent utils](#latent-utils)
- [textures](#textures)
- [misc utils](#misc-utils)
- [Optional nodes](#optional-nodes)
- [face detection / swapping](#face-detection--swapping)
- [image interpolation (animation)](#image-interpolation-animation)
- [Comfy Resources](#comfy-resources)
# Web Extensions
mtb add a few widgets like `COLOR`
<img alt="color widget preview" src="https://github.com/melMass/comfy_mtb/assets/7041726/cff7e66a-4cc4-4866-b35b-10af0bb2d110" width=450>
A few nodes have the concept of "dynamic" inputs:
<img alt="dynamic inputs" width=450 src="https://github.com/melMass/comfy_mtb/assets/7041726/10b3976e-b212-4968-91eb-f34c02bb80c3" />
<!-- NOTE: Here it should just be some examples and warnings, move the rest to the wiki -->
# Node List
## Animation
- `Animation Builder`: Convenient way to manage basic animation maths at the core of many of my workflows (both worflows for the following GIFs are in the [examples](https://github.com/melMass/comfy_mtb/wiki/Examples))
**[Example lerping two conditions (blue car -> yellow car)](https://github.com/melMass/comfy_mtb/blob/main/examples/03-animation_builder-condition-lerp.json)**
<img width=300 src="https://user-images.githubusercontent.com/7041726/260258970-d6d66d96-fb34-40d0-9038-cbabf0714c5d.gif"/>
**[Example using image transforms a feedback for a fake deforum effect](https://github.com/melMass/comfy_mtb/blob/main/examples/04-animation_builder-deforum.json)**
<img width=300 src="https://user-images.githubusercontent.com/7041726/260261504-303a1037-60d3-4b31-a589-b15d549752f6.gif"/>
- `Batch Float`: Generates a batch of float values with interpolation.
- `Batch Shape`: Generates a batch of 2D shapes with optional shading (experimental).
- `Batch Transform`: Transform a batch of images using a batch of keyframes.
<img width=400 src="https://github.com/melMass/comfy_mtb/assets/7041726/3f217de1-79aa-49b0-a66a-35cf29dd8f01"/>
- `Export With Ffmpeg`: Export with FFmpeg, it used to be export to Proress and is still tailored for YUV
- `Fit Number` : Fit the input float using a source and target range, you can also control the interpolation curve from a list of presets (default to linear)
## bbox
- `Bounding Box`: BBox constructor (custom type),
- `BBox From Mask`: From a mask extract the bounding box
- `Crop`: Crop image from BBox
- `Uncrop`: Uncrop image from BBox
## colors
- `Colored Image`: Constant color image of given size
- `RGB to HSV`: -,
- `HSV to RGB`: -,
- `Color Correct`: Basic color correction tools
<img src="https://github.com/melMass/comfy_mtb/assets/7041726/7c20ac83-31ff-40ea-a1a0-06c2acefb2ef" width=400/>
## image ops
- `Blur`: Blur an image using a Gaussian filter.
- `Deglaze Image`: taken from [FN16](https://github.com/Fannovel16/FN16-ComfyUI-nodes/blob/main/DeglazeImage.py),
- `Denoise`: Denoise the input image,
- `Image Compare`: Compare two images and return a difference image
- `Image Premultiply`: Premultiply image with mask
- `Image Remove Background Rembg`: [RemBG](https://github.com/danielgatis/rembg) powered background removal.
<img src="https://github.com/melMass/comfy_mtb/assets/7041726/e69253b4-c03c-45e9-92b5-aa46fb887be8" width=320/>
- `Image Resize Factor`: Extracted mostly from [WAS Node Suite](https://github.com/WASasquatch/was-node-suite-comfyui), with a few edits (most notably multiple image support) and less features.
- `Mask To Image`: Converts a mask (alpha) to an RGB image with a color and background
- `Save Image Grid`: Save all the images in the input batch as a grid of images.
## latent utils
- `Latent Lerp`: Linear interpolation (blend) between two latent
## textures
- `Model Patch Seamless`: Use the [seamless diffusion "hack"](https://gitlab.com/-/snippets/2395088) to patch any model to infere seamless images, check the [examples](https://github.com/melMass/comfy_mtb/wiki/Examples) to see how to use all those textures node together
<img width=500 src="https://user-images.githubusercontent.com/7041726/272970506-9db516b5-45d2-4389-b904-b3a94660f24c.png"/>
- `DeepBump`: Normal & height maps generation from single pictures
<img width=500 src="https://user-images.githubusercontent.com/7041726/272970715-7e4477f6-8e18-4839-9864-83d07d6690a1.png"/>
- `Image Tile Offset`: Mimics an old photoshop technique to check for seamless textures by offsetting tiles of the image.
<img width=600 src="https://github.com/melMass/comfy_mtb/assets/7041726/cbcc51fb-922f-433f-acf1-c6c6c2a7ffc4" />
## misc utils
- `Any To String`: Tries to take any input and convert it to a string.
- `Concat Images`: Takes two image stream and merge them as a batch of images supported by other Comfy pipelines.
- `Image Resize Factor`: **Deprecated**, I since discovered the builtin image resize.
- `Text To Image`: Utils to convert text to image using a font
- `Styles Loader`: Load csv files and populate a dropdown from the rows (à la A111)
<img src="https://github.com/melMass/comfy_mtb/assets/7041726/02fe3211-18ee-4e54-a029-931388f5fde8" width=320/>
- `Smart Step`: A very basic node to get step percent to use in KSampler advanced,
- `Qr Code`: Basic QR Code generator
- `Save Tensors`: Debug node that will probably be removed in the future
- `Int to Number`: Supplement for WASSuite number nodes
- `Smart Step`: A very basic tool to control the steps (start/stop) of the `KAdvancedSampler` using percentage
- `Load Image From Url`: Load an image from the given URL
[**Wiki**](https://github.com/melMass/comfy_mtb/wiki) | [**Install Guide**](./INSTALL.md) | [**Examples**](https://github.com/melMass/comfy_mtb/wiki/Examples)
## Optional nodes
These nodes are still bundled in mtb, but moving forward (>0.2.0) they won't
be setup by the install script and their dependencies won't install either.
The reason is mostly that they all have a better alternatives available and tensorflow on windows was not a fun experience and since Python 3.11 not an experience at all.
For linux and mac users though these nodes didn't cause any issue and I personally still use them, these are the extra requirements needed:
```console
.venv/python -m pip install tensorflow facexlib insightface basicsr
```
### face detection / swapping
> **Warning**
> Those nodes were among the first to be implemented they do work, but on windows the installation is still not properly handled for everyone
> As alternatives you can use [reactor](https://github.com/Gourieff/comfyui-reactor-node) for face swap and [facerestore](https://github.com/Haidra-Org/hordelib/tree/main/hordelib/nodes/facerestore) for restoration
> You can check [this video](https://www.youtube.com/watch?v=FShlpMxbU0E) for a tutorial by Ferniclestix using these alternatives
- `Face Swap`: Face swap using deepinsight/insightface models (this node used to be called `Roop` in early versions, it does the same, roop is *just* an app that uses those model)
<img width=320 src="https://user-images.githubusercontent.com/7041726/260261217-54e33446-183f-4dda-88b3-d38a1e6de980.gif"/>
- `Load Face Swap Model`: Load an insightface model for face swapping
- `Restore Face`: Using [GFPGan](https://github.com/TencentARC/GFPGAN) to restore faces, works great in conjunction with `Face Swap` and supports Comfy native upscalers for the `bg_upscaler`
### image interpolation (animation)
> **Warning**
> The FILM nodes will be deprecated at some point after 0.2.0, [Fannovel16](https://github.com/Fannovel16/ComfyUI-Frame-Interpolation)'s interpolation nodes implement it and they rely on a pytorch implementation of FILM
> which solves the issues related to the ones included in mtb. They will probably remain available if your system meet the requirements and ignored otherwise.
<details><summary>Why?</summary>
> **Windows only issue**: This requires tensorflow-gpu that is unfortunately not a thing anymore on Windows since 2.10.1 (unless you use a complex WSL passthrough setup but it's still not "Windows")
> Using this old version is quite clunky and require some patching that install.py does automatically, but the main issue is that no wheels are available for python > 3.10
> Comfy-nightly is already using Python 11 so installing this old tf version won't work there.
> You can in any case install the normal up to date tensorflow but that will run on CPU and is much MUCH slower for FILM inference.
</details>
- `Load Film Model`: Loads a [FILM](https://github.com/google-research/frame-interpolation) model
- `Film Interpolation`: Process input frames using [FILM](https://github.com/google-research/frame-interpolation)
<img width=400 src="https://github.com/melMass/comfy_mtb/assets/7041726/3afd1647-6634-4b92-a34b-51432e6a9834"/>
<img width=400 src="https://user-images.githubusercontent.com/7041726/260259079-c0f04a63-960c-43a7-ba78-a45cd5ac7514.gif"/>
- `Export to Prores (experimental)`: Exports the input frames to a ProRes 4444 mov file. This is using ffmpeg stdin to send raw numpy arrays, used with `Film Interpolation` and very simple for now but could be expanded upon.
# Comfy Resources
**Misc**
- [Slick ComfyUI by NoCrypt](https://colab.research.google.com/drive/1ZMvLWEiYITmBJngtqeIQToeNuiydwI0z#scrollTo=1fWMaexXS188): A colab notebook with batteries included!
**Guides**:
- [Official Examples (eng)](https://comfyanonymous.github.io/ComfyUI_examples/)
- [ComfyUI Community Manual (eng)](https://blenderneko.github.io/ComfyUI-docs/) by @BlenderNeko
- [Tomoaki's personal Wiki (jap)](https://comfyui.creamlab.net/guides/) by @tjhayasaka
**Extensions and Custom Nodes**:
- [Plugins for Comfy List (eng)](https://github.com/WASasquatch/comfyui-plugins) by @WASasquatch
- [ComfyUI tag on CivitAI (eng)](https://civitai.com/tag/comfyui)
+2 -2
View File
@@ -7,7 +7,7 @@
#
###
__version__ = "0.1.5"
__version__ = "0.1.6"
import os
@@ -179,7 +179,7 @@ for node_class in nodes:
node_class.DESCRIPTION = node_class.__doc__
if MTB_EXPORT:
wiki_name = classname_to_wiki(class_name)
(wiki / "nodes" / wiki_name + ".md").write_text(
(wiki / "nodes" / (wiki_name + ".md")).write_text(
node_class.__doc__, encoding="utf-8"
)
+28 -19
View File
@@ -1,22 +1,31 @@
{
"$schema": "https://biomejs.dev/schemas/1.6.1/schema.json",
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"formatter": {
"lineEnding": "lf"
},
"javascript": {
"formatter": {
"quoteStyle": "single",
"semicolons": "asNeeded",
"indentWidth": 2
}
"$schema": "https://biomejs.dev/schemas/1.6.1/schema.json",
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"suspicious": {
"noConsoleLog": "warn"
},
"style": {
"noParameterAssign": "off",
"noShoutyConstants": "warn",
"useNamingConvention": "off"
}
}
},
"formatter": {
"indentStyle": "space",
"indentWidth": 2,
"lineEnding": "lf"
},
"javascript": {
"formatter": {
"quoteStyle": "single",
"semicolons": "asNeeded"
}
}
}
+40 -26
View File
@@ -1,10 +1,8 @@
# NOTE: This file is only use for development you can ignore it
use path.nu *
def get_root [--clean] {
if $clean {
$env.COMFY_CLEAN_ROOT
$env.COMFY_CLEAN_ROOT
} else {
$env.COMFY_ROOT
}
@@ -25,10 +23,11 @@ export def "comfy dev-web" [] {
# start the comfy server
export def "comfy start" [--clean, --listen] {
export def "comfy start" [--clean,--old-ui, --listen] {
let root = get_root --clean=($clean)
cd $root
MTB_DEBUG=true python main.py --port 3000 --preview-method auto ...(if $listen {["--listen"]} else {[]})
MTB_DEBUG=true python main.py --port 3000 ...(if $old_ui { ["--front-end-version", "Comfy-Org/ComfyUI_legacy_frontend@latest"]} else {[]}) --preview-method auto ...(if $listen {["--listen"]} else {[]})
}
# update comfy itself and merge master in current branch
@@ -38,24 +37,29 @@ export def "comfy update" [
] {
let root = get_root --clean=($clean)
let models = $"($root)/models"
let inputs = $"($root)/input"
cd $root
let branch_name = (git rev-parse --abbrev-ref HEAD | str trim)
print $"(ansi yellow_italic)Backing up and removing models symlinks(ansi reset)"
cd $models
if not $clean {
cd $models
# find all symlinks
let links = (ls -la |
where not ($it.target | is-empty) |
select name target |
sort-by name)
# find all symlinks
let links = (ls -la |
where not ($it.target | is-empty) |
select name target |
sort-by name)
if not ($links | is-empty) {
$links | save -f links.nuon
# remove them
open links.nuon | each {|p| rm $p.name }
}
if not ($links | is-empty) {
$links | save -f links.nuon
# remove them
open links.nuon | each {|p| rm $p.name }
}
} else {
rm $models
rm $inputs
}
cd $root
@@ -79,10 +83,16 @@ export def "comfy update" [
}
print $"(ansi yellow_italic)Linking back the models(ansi reset)"
cd $models
# resymlink them
open links.nuon | each {|p| link -a $p.target $p.name }
if not $clean {
cd $models
# resymlink them
open links.nuon | each {|p| link -a $p.target $p.name }
} else {
let master = (get_root)
link ($master | path join models) $models
link ($master | path join input) $inputs
}
let commit_count = (git rev-list --count $branch_name $"^origin/($branch_name)")
@@ -97,7 +107,7 @@ export def "comfy toggle_extensions" [--clean] {
cd $root
cd custom_nodes
let exts = (ls | where type in ["dir","symlink"] | get name)
let choices = ($exts | input list -m "choose extension to toggle")
let choices = ($exts | input list -m "choose extension to toggle")
if ($choices | is-empty) {
return
}
@@ -105,11 +115,11 @@ export def "comfy toggle_extensions" [--clean] {
print $choices
let filtered = $choices | wrap name | upsert enabled {|p| not ($p.name | str ends-with ".disabled")}
print $filtered
print $filtered
$filtered | each {|f|
let new_name = ($f.name | str replace ".disabled" "")
let new_name = if $f.enabled {
$"($new_name).disabled"
} else {
@@ -128,6 +138,10 @@ export def "comfy update_extensions" [--clean] {
git multipull .
}
def --env path-add [pth] {
$env.PATH = ($env.PATH | append ($pth | path expand))
}
export-env {
@@ -141,7 +155,7 @@ export-env {
path-add 'C:/Portable/TensorRT-8.6.0.12/lib'
path-add ($env.CUDA_ROOT | path join bin)
overlay use ../../.venv/Scripts/activate.nu
overlay use ../../.venv/Scripts/activate.nu
}
File diff suppressed because one or more lines are too long
+7 -1
View File
@@ -77,5 +77,11 @@ def cyan_text(text: str):
def get_label(label: str):
if label.startswith("MTB_"):
label = label[4:]
words = re.findall(r"(?:^|[A-Z])[a-z]*", label)
words = re.findall(
r"(?:(?<=[a-z])(?=[A-Z])|(?<=[A-Z])(?=[A-Z][a-z])|(?<=[A-Za-z])(?=[0-9])|(?<=[0-9])(?=[A-Za-z]))",
label,
)
reformatted_label = re.sub(r"([A-Z]+)", r" \1", label).strip()
words = reformatted_label.split()
return " ".join(words).strip()
+235
View File
@@ -0,0 +1,235 @@
from typing import TypedDict
import torch
import torchaudio
class AudioDict(TypedDict):
"""Comfy's representation of AUDIO data."""
sample_rate: int
waveform: torch.Tensor
AudioData = AudioDict | list[AudioDict]
class MtbAudio:
"""Base class for audio processing."""
@classmethod
def is_stereo(
cls,
audios: AudioData,
) -> bool:
if isinstance(audios, list):
return any(cls.is_stereo(audio) for audio in audios)
else:
return audios["waveform"].shape[1] == 2
@staticmethod
def resample(audio: AudioDict, common_sample_rate: int) -> AudioDict:
if audio["sample_rate"] != common_sample_rate:
resampler = torchaudio.transforms.Resample(
orig_freq=audio["sample_rate"], new_freq=common_sample_rate
)
return {
"sample_rate": common_sample_rate,
"waveform": resampler(audio["waveform"]),
}
else:
return audio
@staticmethod
def to_stereo(audio: AudioDict) -> AudioDict:
if audio["waveform"].shape[1] == 1:
return {
"sample_rate": audio["sample_rate"],
"waveform": torch.cat(
[audio["waveform"], audio["waveform"]], dim=1
),
}
else:
return audio
@classmethod
def preprocess_audios(
cls, audios: list[AudioDict]
) -> tuple[list[AudioDict], bool, int]:
max_sample_rate = max([audio["sample_rate"] for audio in audios])
resampled_audios = [
cls.resample(audio, max_sample_rate) for audio in audios
]
is_stereo = cls.is_stereo(audios)
if is_stereo:
audios = [cls.to_stereo(audio) for audio in resampled_audios]
return (audios, is_stereo, max_sample_rate)
class MTB_AudioCut(MtbAudio):
"""Basic audio cutter, values are in ms."""
@classmethod
def INPUT_TYPES(cls):
return {
"required": {
"audio": ("AUDIO",),
"length": (
("FLOAT"),
{
"default": 1000.0,
"min": 0.0,
"max": 999999.0,
"step": 1,
},
),
"offset": (
("FLOAT"),
{"default": 0.0, "min": 0.0, "max": 999999.0, "step": 1},
),
},
}
RETURN_TYPES = ("AUDIO",)
RETURN_NAMES = ("cut_audio",)
CATEGORY = "mtb/audio"
FUNCTION = "cut"
def cut(self, audio: AudioDict, length: float, offset: float):
sample_rate = audio["sample_rate"]
start_idx = int(offset * sample_rate / 1000)
end_idx = min(
start_idx + int(length * sample_rate / 1000),
audio["waveform"].shape[-1],
)
cut_waveform = audio["waveform"][:, :, start_idx:end_idx]
return (
{
"sample_rate": sample_rate,
"waveform": cut_waveform,
},
)
class MTB_AudioStack(MtbAudio):
"""Stack/Overlay audio inputs (dynamic inputs).
- pad audios to the longest inputs.
- resample audios to the highest sample rate in the inputs.
- convert them all to stereo if one of the inputs is.
"""
@classmethod
def INPUT_TYPES(cls):
return {"required": {}}
RETURN_TYPES = ("AUDIO",)
RETURN_NAMES = ("stacked_audio",)
CATEGORY = "mtb/audio"
FUNCTION = "stack"
def stack(self, **kwargs: AudioDict) -> tuple[AudioDict]:
audios, is_stereo, max_rate = self.preprocess_audios(
list(kwargs.values())
)
max_length = max([audio["waveform"].shape[-1] for audio in audios])
padded_audios: list[torch.Tensor] = []
for audio in audios:
padding = torch.zeros(
(
1,
2 if is_stereo else 1,
max_length - audio["waveform"].shape[-1],
)
)
padded_audio = torch.cat([audio["waveform"], padding], dim=-1)
padded_audios.append(padded_audio)
stacked_waveform = torch.stack(padded_audios, dim=0).sum(dim=0)
return (
{
"sample_rate": max_rate,
"waveform": stacked_waveform,
},
)
class MTB_AudioSequence(MtbAudio):
"""Sequence audio inputs (dynamic inputs).
- adding silence_duration between each segment
can now also be negative to overlap the clips, safely bound
to the the input length.
- resample audios to the highest sample rate in the inputs.
- convert them all to stereo if one of the inputs is.
"""
@classmethod
def INPUT_TYPES(cls):
return {
"required": {
"silence_duration": (
("FLOAT"),
{"default": 0.0, "min": -999.0, "max": 999, "step": 0.01},
)
},
}
RETURN_TYPES = ("AUDIO",)
RETURN_NAMES = ("sequenced_audio",)
CATEGORY = "mtb/audio"
FUNCTION = "sequence"
def sequence(self, silence_duration: float, **kwargs: AudioDict):
audios, is_stereo, max_rate = self.preprocess_audios(
list(kwargs.values())
)
sequence: list[torch.Tensor] = []
for i, audio in enumerate(audios):
if i > 0:
if silence_duration > 0:
silence = torch.zeros(
(
1,
2 if is_stereo else 1,
int(silence_duration * max_rate),
)
)
sequence.append(silence)
elif silence_duration < 0:
overlap = int(abs(silence_duration) * max_rate)
previous_audio = sequence[-1]
overlap = min(
overlap,
previous_audio.shape[-1],
audio["waveform"].shape[-1],
)
if overlap > 0:
overlap_part = (
previous_audio[:, :, -overlap:]
+ audio["waveform"][:, :, :overlap]
)
sequence[-1] = previous_audio[:, :, :-overlap]
sequence.append(overlap_part)
audio["waveform"] = audio["waveform"][:, :, overlap:]
sequence.append(audio["waveform"])
sequenced_waveform = torch.cat(sequence, dim=-1)
return (
{
"sample_rate": max_rate,
"waveform": sequenced_waveform,
},
)
__nodes__ = [MTB_AudioSequence, MTB_AudioStack, MTB_AudioCut]
+1 -1
View File
@@ -177,7 +177,7 @@ class MTB_StylesLoader:
with open(file, encoding="utf8") as f:
parsed = csv.reader(f)
for i, row in enumerate(parsed):
log.debug(f"Adding style {row[0]}")
# log.debug(f"Adding style {row[0]}")
try:
name, positive, negative = (row + [None] * 3)[:3]
positive = positive or ""
+1 -1
View File
@@ -24,4 +24,4 @@ class MTB_Constant:
return (kwargs.get("Value"),)
__nodes__ = [MTB_Constant]
# __nodes__ = [MTB_Constant]
+19 -1
View File
@@ -41,6 +41,24 @@ class MTB_Bbox:
return ((x, y, width, height),)
class MTB_SplitBbox:
"""Split the components of a bbox"""
@classmethod
def INPUT_TYPES(cls):
return {
"required": {"bbox": ("BBOX",)},
}
CATEGORY = "mtb/crop"
FUNCTION = "split_bbox"
RETURN_TYPES = ("INT", "INT", "INT", "INT")
RETURN_NAMES = ("x", "y", "width", "height")
def split_bbox(self, bbox):
return (bbox[0], bbox[1], bbox[2], bbox[3])
class MTB_BboxFromMask:
"""From a mask extract the bounding box"""
@@ -324,4 +342,4 @@ class MTB_Uncrop:
return (pil2tensor(out_images),)
__nodes__ = [MTB_BboxFromMask, MTB_Bbox, MTB_Crop, MTB_Uncrop]
__nodes__ = [MTB_BboxFromMask, MTB_Bbox, MTB_Crop, MTB_Uncrop, MTB_SplitBbox]
+20 -1
View File
@@ -69,7 +69,26 @@ def color_to_normals(
if not model or not model.exists():
raise ModelNotFound(f"deepbump ({model})")
ort_session = ort.InferenceSession(model)
providers = [
"TensorrtExecutionProvider",
"CUDAExecutionProvider",
"CoreMLProvider",
"CPUExecutionProvider",
]
available_providers = [
provider
for provider in providers
if provider in ort.get_available_providers()
]
if not available_providers:
raise RuntimeError(
"No valid ONNX Runtime providers available on this machine."
)
log.debug(f"Using ONNX providers: {available_providers}")
ort_session = ort.InferenceSession(
model.as_posix(), providers=available_providers
)
# Predict normal map for each tile
log.debug("DeepBump Color → Normals : generating")
+23 -5
View File
@@ -177,7 +177,10 @@ class MTB_RestoreFace:
# Adjustable weights
"weight": ("FLOAT", {"default": 0.5}),
"save_tmp_steps": ("BOOLEAN", {"default": True}),
}
},
"optional": {
"preserve_alpha": ("BOOLEAN", {"default": True}),
},
}
def do_restore(
@@ -188,11 +191,19 @@ class MTB_RestoreFace:
only_center_face,
weight,
save_tmp_steps,
preserve_alpha: bool = False,
) -> torch.Tensor:
pimage = tensor2np(image)[0]
width, height = pimage.shape[1], pimage.shape[0]
source_img = cv2.cvtColor(np.array(pimage), cv2.COLOR_RGB2BGR)
alpha_channel = None
if (
preserve_alpha and image.size(-1) == 4
): # Check if the image has an alpha channel
alpha_channel = pimage[:, :, 3]
pimage = pimage[:, :, :3] # Remove alpha channel for processing
sys.stdout = NullWriter()
cropped_faces, restored_faces, restored_img = model.enhance(
source_img,
@@ -211,9 +222,14 @@ class MTB_RestoreFace:
)
output = None
if restored_img is not None:
output = Image.fromarray(
cv2.cvtColor(restored_img, cv2.COLOR_BGR2RGB)
)
restored_img = cv2.cvtColor(restored_img, cv2.COLOR_BGR2RGB)
output = Image.fromarray(restored_img)
if alpha_channel is not None:
alpha_resized = Image.fromarray(alpha_channel).resize(
output.size, Image.LANCZOS
)
output.putalpha(alpha_resized)
# imwrite(restored_img, save_restore_path)
return pil2tensor(output)
@@ -226,6 +242,7 @@ class MTB_RestoreFace:
only_center_face=False,
weight=0.5,
save_tmp_steps=True,
preserve_alpha: bool = False,
) -> tuple[torch.Tensor]:
out = [
self.do_restore(
@@ -235,6 +252,7 @@ class MTB_RestoreFace:
only_center_face,
weight,
save_tmp_steps,
preserve_alpha,
)
for i in range(image.size(0))
]
@@ -260,7 +278,7 @@ class MTB_RestoreFace:
self, cropped_faces, restored_faces, height, width
):
for idx, (cropped_face, restored_face) in enumerate(
zip(cropped_faces, restored_faces)
zip(cropped_faces, restored_faces, strict=False)
):
face_id = idx + 1
file = self.get_step_image_path("cropped_faces", face_id)
+15 -5
View File
@@ -2,7 +2,6 @@
# region imports
import sys
from pathlib import Path
from typing import List, Optional, Set, Union
import comfy.model_management as model_management
import cv2
@@ -119,7 +118,9 @@ class MTB_FaceSwap:
),
"faceswap_model": ("FACESWAP_MODEL", {"default": "None"}),
},
"optional": {},
"optional": {
"preserve_alpha": ("BOOLEAN", {"default": True}),
},
}
RETURN_TYPES = ("IMAGE",)
@@ -133,11 +134,18 @@ class MTB_FaceSwap:
faces_index: str,
faceanalysis_model,
faceswap_model,
preserve_alpha=False,
):
def do_swap(img):
model_management.throw_exception_if_processing_interrupted()
img = tensor2pil(img)[0]
ref = tensor2pil(reference)[0]
alpha_channel = None
if preserve_alpha and img.mode == "RGBA":
alpha_channel = img.getchannel("A")
img = img.convert("RGB")
face_ids = {
int(x)
for x in faces_index.strip(",").split(",")
@@ -148,6 +156,8 @@ class MTB_FaceSwap:
faceanalysis_model, ref, img, faceswap_model, face_ids
)
sys.stdout = sys.__stdout__
if alpha_channel:
swapped.putalpha(alpha_channel)
return pil2tensor(swapped)
batch_count = image.size(0)
@@ -194,10 +204,10 @@ def get_face_single(
def swap_face(
face_analyser,
source_img: Union[Image.Image, List[Image.Image]],
target_img: Union[Image.Image, List[Image.Image]],
source_img: Image.Image | list[Image.Image],
target_img: Image.Image | list[Image.Image],
face_swapper_model,
faces_index: Optional[Set[int]] = None,
faces_index: set[int] | None = None,
) -> Image.Image:
if faces_index is None:
faces_index = {0}
+1 -73
View File
@@ -1,4 +1,3 @@
import qrcode
from PIL import Image
from ..log import log
@@ -113,76 +112,6 @@ class MTB_UnsplashImage:
return (None,)
class MTB_QrCode:
"""Basic QR Code generator"""
@classmethod
def INPUT_TYPES(cls):
return {
"required": {
"url": ("STRING", {"default": "https://www.github.com"}),
"width": (
"INT",
{"default": 256, "max": 8096, "min": 0, "step": 1},
),
"height": (
"INT",
{"default": 256, "max": 8096, "min": 0, "step": 1},
),
"error_correct": (("L", "M", "Q", "H"), {"default": "L"}),
"box_size": (
"INT",
{"default": 10, "max": 8096, "min": 0, "step": 1},
),
"border": (
"INT",
{"default": 4, "max": 8096, "min": 0, "step": 1},
),
"invert": (("BOOLEAN",), {"default": False}),
}
}
RETURN_TYPES = ("IMAGE",)
FUNCTION = "do_qr"
CATEGORY = "mtb/generate"
def do_qr(
self, url, width, height, error_correct, box_size, border, invert
):
log.warning(
"This node will soon be deprecated, there are much better alternatives like https://github.com/coreyryanhanson/comfy-qr"
)
if error_correct == "L" or error_correct not in ["M", "Q", "H"]:
error_correct = qrcode.constants.ERROR_CORRECT_L
elif error_correct == "M":
error_correct = qrcode.constants.ERROR_CORRECT_M
elif error_correct == "Q":
error_correct = qrcode.constants.ERROR_CORRECT_Q
else:
error_correct = qrcode.constants.ERROR_CORRECT_H
qr = qrcode.QRCode(
version=1,
error_correction=error_correct,
box_size=box_size,
border=border,
)
qr.add_data(url)
qr.make(fit=True)
back_color = (255, 255, 255) if invert else (0, 0, 0)
fill_color = (0, 0, 0) if invert else (255, 255, 255)
code = img = qr.make_image(
back_color=back_color, fill_color=fill_color
)
# that we now resize without filtering
code = code.resize((width, height), Image.NEAREST)
return (pil2tensor(code),)
def bbox_dim(bbox):
left, upper, right, lower = bbox
width = right - left
@@ -202,7 +131,7 @@ class MTB_TextToImage:
fonts = {}
DESCRIPTION = """# Text to Image
This node look for any font files in comfy_dir/fonts.
This node look for any font files in comfy_dir/fonts.
by default it fallsback to a default font.
![img](https://i.imgur.com/3GT92hy.gif)
@@ -364,7 +293,6 @@ by default it fallsback to a default font.
__nodes__ = [
MTB_QrCode,
MTB_UnsplashImage,
MTB_TextToImage,
# MtbExamples,
+84 -30
View File
@@ -3,13 +3,11 @@ import json
import urllib.parse
import urllib.request
from math import pi
from typing import Optional
import comfy.model_management as model_management
import comfy.utils
import numpy as np
import torch
import torchvision.transforms.functional as F
from PIL import Image
from ..log import log
@@ -71,8 +69,8 @@ class MTB_ToDevice:
*,
ignore_errors=False,
device="cuda",
image: Optional[torch.Tensor] = None,
mask: Optional[torch.Tensor] = None,
image: torch.Tensor | None = None,
mask: torch.Tensor | None = None,
):
if not ignore_errors and image is None and mask is None:
raise ValueError(
@@ -138,6 +136,8 @@ class MTB_MatchDimensions:
def execute(
self, source: torch.Tensor, reference: torch.Tensor, match: str
):
import torchvision.transforms.functional as VF
_batch_size, height, width, _channels = source.shape
_rbatch_size, rheight, rwidth, _rchannels = reference.shape
@@ -155,7 +155,7 @@ class MTB_MatchDimensions:
new_height = int(rwidth / source_aspect_ratio)
resized_images = [
F.resize(
VF.resize(
source[i],
(new_height, new_width),
antialias=True,
@@ -417,7 +417,7 @@ class MTB_AnyToString:
@classmethod
def INPUT_TYPES(cls):
return {
"required": {"input": ("*")},
"required": {"input": ("*",)},
}
RETURN_TYPES = ("STRING",)
@@ -491,14 +491,14 @@ class MTB_MathExpression:
RETURN_NAMES = ("result (float)", "result (int)")
CATEGORY = "mtb/math"
DESCRIPTION = (
"evaluate a simple math expression string (!! Fallsback to eval)"
"evaluate a simple math expression string, only supports literal_eval"
)
def eval_expression(self, expression, **kwargs):
def eval_expression(self, expression: str, **kwargs):
from ast import literal_eval
for key, value in kwargs.items():
print(f"Replacing placeholder <{key}> with value {value}")
log.debug(f"Replacing placeholder <{key}> with value {value}")
expression = expression.replace(f"<{key}>", str(value))
result = -1
@@ -509,15 +509,10 @@ class MTB_MathExpression:
f"The expression syntax is wrong '{expression}': {e}"
) from e
except ValueError:
try:
expression = expression.replace("^", "**")
result = eval(expression)
except Exception as e:
# Handle any other exceptions and provide a meaningful error message
raise ValueError(
f"Error evaluating expression '{expression}': {e}"
) from e
except Exception as e:
raise ValueError(
f"Math expression only support literal_eval now: {e}"
)
return (result, int(result))
@@ -531,10 +526,22 @@ class MTB_FitNumber:
"required": {
"value": ("FLOAT", {"default": 0, "forceInput": True}),
"clamp": ("BOOLEAN", {"default": False}),
"source_min": ("FLOAT", {"default": 0.0, "step": 0.01}),
"source_max": ("FLOAT", {"default": 1.0, "step": 0.01}),
"target_min": ("FLOAT", {"default": 0.0, "step": 0.01}),
"target_max": ("FLOAT", {"default": 1.0, "step": 0.01}),
"source_min": (
"FLOAT",
{"default": 0.0, "step": 0.01, "min": -1e5},
),
"source_max": (
"FLOAT",
{"default": 1.0, "step": 0.01, "min": -1e5},
),
"target_min": (
"FLOAT",
{"default": 0.0, "step": 0.01, "min": -1e5},
),
"target_max": (
"FLOAT",
{"default": 1.0, "step": 0.01, "min": -1e5},
),
"easing": (
EASINGS,
{"default": "Linear"},
@@ -583,19 +590,66 @@ class MTB_ConcatImages:
def INPUT_TYPES(cls):
return {
"required": {"reverse": ("BOOLEAN", {"default": False})},
"optional": {
"on_mismatch": (
["Error", "Smallest", "Largest"],
{"default": "Smallest"},
)
},
}
def concatenate_tensors(self, reverse, **kwargs):
tensors = tuple(kwargs.values())
batch_sizes = [tensor.size(0) for tensor in tensors]
def concatenate_tensors(
self,
reverse: bool,
on_mismatch: str = "Smallest",
**kwargs: torch.Tensor,
) -> tuple[torch.Tensor]:
tensors = list(kwargs.values())
if on_mismatch == "Error":
shapes = [tensor.shape for tensor in tensors]
if not all(shape == shapes[0] for shape in shapes):
raise ValueError(
"All input tensors must have the same shape when on_mismatch is 'Error'."
)
else:
import torch.nn.functional as F
if on_mismatch == "Smallest":
target_shape = min(
(tensor.shape for tensor in tensors),
key=lambda s: (s[1], s[2]),
)
else: # on_mismatch == "Largest"
target_shape = max(
(tensor.shape for tensor in tensors),
key=lambda s: (s[1], s[2]),
)
target_height, target_width = target_shape[1], target_shape[2]
resized_tensors = []
for tensor in tensors:
if (
tensor.shape[1] != target_height
or tensor.shape[2] != target_width
):
resized_tensor = F.interpolate(
tensor.permute(0, 3, 1, 2),
size=(target_height, target_width),
mode="bilinear",
align_corners=False,
)
resized_tensor = resized_tensor.permute(0, 2, 3, 1)
resized_tensors.append(resized_tensor)
else:
resized_tensors.append(tensor)
tensors = resized_tensors
concatenated = torch.cat(tensors, dim=0)
# Update the batch size in the concatenated tensor
concatenated_size = list(concatenated.size())
concatenated_size[0] = sum(batch_sizes)
concatenated = concatenated.view(*concatenated_size)
return (concatenated,)
+444 -87
View File
@@ -3,6 +3,7 @@ import json
import math
import os
import comfy.model_management as model_management
import folder_paths
import numpy as np
import torch
@@ -13,7 +14,7 @@ from skimage.filters import gaussian
from skimage.util import compare_images
from ..log import log
from ..utils import np2tensor, pil2tensor, tensor2np, tensor2pil
from ..utils import np2tensor, pil2tensor, tensor2pil
# try:
# from cv2.ximgproc import guidedFilter
@@ -35,6 +36,343 @@ def gaussian_kernel(
return g / g.sum()
class MTB_CoordinatesToString:
RETURN_TYPES = ("STRING",)
FUNCTION = "convert"
CATEGORY = "mtb/coordinates"
@classmethod
def INPUT_TYPES(cls):
return {
"required": {
"coordinates": ("BATCH_COORDINATES",),
"frame": ("INT",),
}
}
def convert(
self, coordinates: list[list[tuple[int, int]]], frame: int
) -> tuple[str]:
frame = max(frame, len(coordinates) - 1)
coords = coordinates[frame]
output: list[dict[str, int]] = []
for x, y in coords:
output.append({"x": x, "y": y})
return (json.dumps(output),)
class MTB_ExtractCoordinatesFromImage:
"""Extract 2D points from a batch of images based on a threshold."""
RETURN_TYPES = ("BATCH_COORDINATES", "IMAGE")
FUNCTION = "extract"
CATEGORY = "mtb/coordinates"
@classmethod
def INPUT_TYPES(cls):
return {
"required": {
"threshold": ("FLOAT",),
"max_points": ("INT", {"default": 50, "min": 0}),
},
"optional": {"image": ("IMAGE",), "mask": ("MASK",)},
}
def extract(
self,
threshold: float,
max_points: int,
image: torch.Tensor | None = None,
mask: torch.Tensor | None = None,
) -> tuple[list[list[tuple[int, int]]], torch.Tensor]:
if image is not None:
batch_count, height, width, channel_count = image.shape
imgs = image
else:
if mask is None:
raise ValueError("Must provide either image or mask")
batch_count, height, width = mask.shape
channel_count = 1
imgs = mask
if channel_count not in [1, 2, 3, 4]:
raise ValueError(f"Incorrect channel count: {channel_count}")
all_points: list[list[tuple[int, int]]] = []
debug_images = torch.zeros(
(batch_count, height, width, 3),
dtype=torch.uint8,
device=imgs.device,
)
for i, img in enumerate(imgs):
if channel_count == 1:
alpha_channel = img if len(img.shape) == 2 else img[:, :, 0]
elif channel_count == 2:
alpha_channel = img[:, :, 1]
elif channel_count == 4:
alpha_channel = img[:, :, 3]
else:
# get intensity
alpha_channel = img[:, :, :3].max(dim=2)[0]
points = (alpha_channel > threshold).nonzero(as_tuple=False)
if len(points) > max_points:
indices = torch.randperm(points.size(0), device=img.device)[
:max_points
]
points = points[indices]
points = [(int(y.item()), int(x.item())) for x, y in points]
all_points.append(points)
for x, y in points:
self._draw_circle(debug_images[i], (x, y), 5)
return (all_points, debug_images)
@staticmethod
def _draw_circle(
image: torch.Tensor, center: tuple[int, int], radius: int
):
"""Draw a 5px circle on the image."""
x0, y0 = center
for x in range(-radius, radius + 1):
for y in range(-radius, radius + 1):
in_radius = x**2 + y**2 <= radius**2
in_bounds = (
0 <= x0 + x < image.shape[1]
and 0 <= y0 + y < image.shape[0]
)
if in_radius and in_bounds:
image[y0 + y, x0 + x] = torch.tensor(
[255, 255, 255],
dtype=torch.uint8,
device=image.device,
)
class MTB_ColorCorrectGPU:
"""Various color correction methods using only Torch."""
@classmethod
def INPUT_TYPES(cls):
return {
"required": {
"image": ("IMAGE",),
"force_gpu": ("BOOLEAN", {"default": True}),
"clamp": ([True, False], {"default": True}),
"gamma": (
"FLOAT",
{"default": 1.0, "min": 0.0, "max": 5.0, "step": 0.01},
),
"contrast": (
"FLOAT",
{"default": 1.0, "min": 0.0, "max": 5.0, "step": 0.01},
),
"exposure": (
"FLOAT",
{"default": 0.0, "min": -5.0, "max": 5.0, "step": 0.01},
),
"offset": (
"FLOAT",
{"default": 0.0, "min": -5.0, "max": 5.0, "step": 0.01},
),
"hue": (
"FLOAT",
{"default": 0.0, "min": -0.5, "max": 0.5, "step": 0.01},
),
"saturation": (
"FLOAT",
{"default": 1.0, "min": 0.0, "max": 5.0, "step": 0.01},
),
"value": (
"FLOAT",
{"default": 1.0, "min": 0.0, "max": 5.0, "step": 0.01},
),
},
"optional": {"mask": ("MASK",)},
}
RETURN_TYPES = ("IMAGE",)
FUNCTION = "correct"
CATEGORY = "mtb/image processing"
@staticmethod
def get_device(tensor: torch.Tensor, force_gpu: bool):
if force_gpu:
if torch.cuda.is_available():
return torch.device("cuda")
elif (
hasattr(torch.backends, "mps")
and torch.backends.mps.is_available()
):
return torch.device("mps")
elif hasattr(torch, "hip") and torch.hip.is_available():
return torch.device("hip")
return (
tensor.device
) # model_management.get_torch_device() # torch.device("cpu")
@staticmethod
def rgb_to_hsv(image: torch.Tensor):
r, g, b = image.unbind(-1)
max_rgb, argmax_rgb = image.max(-1)
min_rgb, _ = image.min(-1)
diff = max_rgb - min_rgb
h = torch.empty_like(max_rgb)
s = diff / (max_rgb + 1e-7)
v = max_rgb
h[argmax_rgb == 0] = (g - b)[argmax_rgb == 0] / (diff + 1e-7)[
argmax_rgb == 0
]
h[argmax_rgb == 1] = (
2.0 + (b - r)[argmax_rgb == 1] / (diff + 1e-7)[argmax_rgb == 1]
)
h[argmax_rgb == 2] = (
4.0 + (r - g)[argmax_rgb == 2] / (diff + 1e-7)[argmax_rgb == 2]
)
h = (h / 6.0) % 1.0
h = h.unsqueeze(-1)
s = s.unsqueeze(-1)
v = v.unsqueeze(-1)
return torch.cat((h, s, v), dim=-1)
@staticmethod
def hsv_to_rgb(hsv: torch.Tensor):
h, s, v = hsv.unbind(-1)
h = h * 6.0
i = torch.floor(h)
f = h - i
p = v * (1.0 - s)
q = v * (1.0 - s * f)
t = v * (1.0 - s * (1.0 - f))
i = i.long() % 6
mask = torch.stack(
(i == 0, i == 1, i == 2, i == 3, i == 4, i == 5), -1
)
rgb = torch.stack(
(
torch.where(
mask[..., 0],
v,
torch.where(
mask[..., 1],
q,
torch.where(
mask[..., 2],
p,
torch.where(
mask[..., 3],
p,
torch.where(mask[..., 4], t, v),
),
),
),
),
torch.where(
mask[..., 0],
t,
torch.where(
mask[..., 1],
v,
torch.where(
mask[..., 2],
v,
torch.where(
mask[..., 3],
q,
torch.where(mask[..., 4], p, p),
),
),
),
),
torch.where(
mask[..., 0],
p,
torch.where(
mask[..., 1],
p,
torch.where(
mask[..., 2],
t,
torch.where(
mask[..., 3],
v,
torch.where(mask[..., 4], v, q),
),
),
),
),
),
dim=-1,
)
return rgb
def correct(
self,
image: torch.Tensor,
force_gpu: bool,
clamp: bool,
gamma: float = 1.0,
contrast: float = 1.0,
exposure: float = 0.0,
offset: float = 0.0,
hue: float = 0.0,
saturation: float = 1.0,
value: float = 1.0,
mask: torch.Tensor | None = None,
):
device = self.get_device(image, force_gpu)
image = image.to(device)
if mask is not None:
if mask.shape[0] != image.shape[0]:
mask = mask.expand(image.shape[0], -1, -1)
mask = mask.unsqueeze(-1).expand(-1, -1, -1, 3)
mask = mask.to(device)
model_management.throw_exception_if_processing_interrupted()
adjusted = image.pow(1 / gamma) * (2.0**exposure) * contrast + offset
model_management.throw_exception_if_processing_interrupted()
hsv = self.rgb_to_hsv(adjusted)
hsv[..., 0] = (hsv[..., 0] + hue) % 1.0 # Hue
hsv[..., 1] = hsv[..., 1] * saturation # Saturation
hsv[..., 2] = hsv[..., 2] * value # Value
adjusted = self.hsv_to_rgb(hsv)
model_management.throw_exception_if_processing_interrupted()
if clamp:
adjusted = torch.clamp(adjusted, 0.0, 1.0)
# apply mask
result = (
adjusted
if mask is None
else torch.where(mask > 0, adjusted, image)
)
if not force_gpu:
result = result.cpu()
return (result,)
class MTB_ColorCorrect:
"""Various color correction methods"""
@@ -72,7 +410,8 @@ class MTB_ColorCorrect:
"FLOAT",
{"default": 1.0, "min": 0.0, "max": 5.0, "step": 0.01},
),
}
},
"optional": {"mask": ("MASK",)},
}
RETURN_TYPES = ("IMAGE",)
@@ -87,13 +426,13 @@ class MTB_ColorCorrect:
@staticmethod
def contrast_adjustment_tensor(image, contrast):
r, g, b = image.unbind(-1)
# Using Adobe RGB luminance weights.
luminance_image = 0.33 * r + 0.71 * g + 0.06 * b
luminance_mean = torch.mean(luminance_image.unsqueeze(-1))
# Blend original with mean luminance using contrast factor as blend ratio.
contrasted = image * contrast + (1.0 - contrast) * luminance_mean
contrasted = image * contrast + (1.0 - contrast) * luminance_mean
return torch.clamp(contrasted, 0.0, 1.0)
@staticmethod
@@ -188,18 +527,31 @@ class MTB_ColorCorrect:
hue: float = 0.0,
saturation: float = 1.0,
value: float = 1.0,
mask: torch.Tensor | None = None,
):
if mask is not None:
if mask.shape[0] != image.shape[0]:
mask = mask.expand(image.shape[0], -1, -1)
mask = mask.unsqueeze(-1).expand(-1, -1, -1, 3)
# Apply color correction operations
image = self.gamma_correction_tensor(image, gamma)
image = self.contrast_adjustment_tensor(image, contrast)
image = self.exposure_adjustment_tensor(image, exposure)
image = self.offset_adjustment_tensor(image, offset)
image = self.hsv_adjustment(image, hue, saturation, value)
adjusted = self.gamma_correction_tensor(image, gamma)
adjusted = self.contrast_adjustment_tensor(adjusted, contrast)
adjusted = self.exposure_adjustment_tensor(adjusted, exposure)
adjusted = self.offset_adjustment_tensor(adjusted, offset)
adjusted = self.hsv_adjustment(adjusted, hue, saturation, value)
if clamp:
image = torch.clamp(image, 0.0, 1.0)
adjusted = torch.clamp(image, 0.0, 1.0)
return (image,)
result = (
adjusted
if mask is None
else torch.where(mask > 0, adjusted, image)
)
return (result,)
class MTB_ImageCompare:
@@ -475,7 +827,10 @@ class MTB_MaskToImage:
"mask": ("MASK",),
"color": ("COLOR",),
"background": ("COLOR", {"default": "#000000"}),
}
},
"optional": {
"invert": ("BOOLEAN", {"default": False}),
},
}
CATEGORY = "mtb/generate"
@@ -484,11 +839,12 @@ class MTB_MaskToImage:
FUNCTION = "render_mask"
def render_mask(self, mask, color, background):
masks = tensor2np(mask)[0]
def render_mask(self, mask, color, background, invert=False):
masks = tensor2pil(1.0 - mask) if invert else tensor2pil(mask)
images = []
for m in masks:
_mask = Image.fromarray(m).convert("L")
_mask = m.convert("L")
log.debug(
f"Converted mask to PIL Image format, size: {_mask.size}"
@@ -526,6 +882,11 @@ class MTB_ColoredImage:
"optional": {
"foreground_image": ("IMAGE",),
"foreground_mask": ("MASK",),
"invert": ("BOOLEAN", {"default": False}),
"mask_opacity": (
"FLOAT",
{"default": 1.0, "step": 0.1, "min": 0},
),
},
}
@@ -535,28 +896,19 @@ class MTB_ColoredImage:
FUNCTION = "render_img"
def resize_and_crop(self, img, target_size):
# Calculate scaling factors for both dimensions
scale_x = target_size[0] / img.width
scale_y = target_size[1] / img.height
# Use the smaller scaling factor to maintain aspect ratio
scale = max(scale_x, scale_y)
# Resize the image based on calculated scale
def resize_and_crop(self, img: Image.Image, target_size: tuple[int, int]):
scale = max(target_size[0] / img.width, target_size[1] / img.height)
new_size = (int(img.width * scale), int(img.height * scale))
img = img.resize(new_size, Image.LANCZOS)
left = (img.width - target_size[0]) // 2
top = (img.height - target_size[1]) // 2
return img.crop(
(left, top, left + target_size[0], top + target_size[1])
)
# Calculate cropping coordinates
left = (img.width - target_size[0]) / 2
top = (img.height - target_size[1]) / 2
right = (img.width + target_size[0]) / 2
bottom = (img.height + target_size[1]) / 2
# Crop and return the image
return img.crop((left, top, right, bottom))
def resize_and_crop_thumbnails(self, img, target_size):
def resize_and_crop_thumbnails(
self, img: Image.Image, target_size: tuple[int, int]
):
img.thumbnail(target_size, Image.LANCZOS)
left = (img.width - target_size[0]) / 2
top = (img.height - target_size[1]) / 2
@@ -564,69 +916,71 @@ class MTB_ColoredImage:
bottom = (img.height + target_size[1]) / 2
return img.crop((left, top, right, bottom))
@staticmethod
def process_mask(
mask: torch.Tensor | None,
invert: bool,
# opacity: float,
batch_size: int,
) -> list[Image.Image] | None:
if mask is None:
return [None] * batch_size
masks = tensor2pil(mask if not invert else 1.0 - mask)
if len(masks) == 1 and batch_size > 1:
masks = masks * batch_size
if len(masks) != batch_size:
raise ValueError(
"Foreground image and mask must have the same batch size"
)
return masks
def render_img(
self,
color,
width,
height,
color: str,
width: int,
height: int,
foreground_image: torch.Tensor | None = None,
foreground_mask: torch.Tensor | None = None,
):
image = Image.new("RGBA", (width, height), color=color)
output = []
if foreground_image is not None:
fg_masks = [None] * foreground_image.size()[0]
invert: bool = False,
mask_opacity: float = 1.0,
) -> tuple[torch.Tensor]:
background = Image.new("RGBA", (width, height), color=color)
if foreground_mask is not None:
fg_size = foreground_image.size()[0]
mask_size = foreground_mask.size()[0]
if foreground_image is None:
return (pil2tensor([background.convert("RGB")]),)
if fg_size == 1 and mask_size > fg_size:
foreground_image = foreground_image.repeat(
mask_size, 1, 1, 1
)
fg_images = tensor2pil(foreground_image)
fg_masks = self.process_mask(foreground_mask, invert, len(fg_images))
if foreground_image.size()[0] != foreground_mask.size()[0]:
output: list[Image.Image] = []
for fg_image, fg_mask in zip(fg_images, fg_masks, strict=False):
fg_image = self.resize_and_crop(fg_image, background.size)
if fg_mask:
fg_mask = self.resize_and_crop(fg_mask, background.size)
fg_mask_array = np.array(fg_mask)
fg_mask_array = (fg_mask_array * mask_opacity).astype(np.uint8)
fg_mask = Image.fromarray(fg_mask_array)
output.append(
Image.composite(
fg_image.convert("RGBA"), background, fg_mask
).convert("RGB")
)
else:
if fg_image.mode != "RGBA":
raise ValueError(
"Foreground image and mask must have same batch size"
f"Foreground image must be in 'RGBA' mode when no mask is provided, got {fg_image.mode}"
)
fg_masks = tensor2pil(foreground_mask.unsqueeze(-1))
output.append(
Image.alpha_composite(background, fg_image).convert("RGB")
)
fg_images = tensor2pil(foreground_image)
for fg_image, fg_mask in zip(fg_images, fg_masks):
# Resize and crop if dimensions mismatch
if fg_image.size != image.size:
fg_image = self.resize_and_crop(fg_image, image.size)
if fg_mask:
fg_mask = self.resize_and_crop(fg_mask, image.size)
if fg_mask:
output.append(
Image.composite(
fg_image.convert("RGBA"),
image,
fg_mask,
).convert("RGB")
)
else:
if fg_image.mode != "RGBA":
raise ValueError(
"Foreground image must be in 'RGBA' mode "
f"when no mask is provided, got {fg_image.mode}"
)
output.append(
Image.alpha_composite(image, fg_image).convert("RGB")
)
else:
if foreground_mask is not None:
log.warn("Mask ignored because no foreground image is given")
output.append(image.convert("RGB"))
output = pil2tensor(output)
return (output,)
return (pil2tensor(output),)
class MTB_ImagePremultiply:
@@ -924,6 +1278,7 @@ class MTB_ImageTileOffset:
__nodes__ = [
MTB_ColorCorrect,
MTB_ColorCorrectGPU,
MTB_ImageCompare,
MTB_ImageTileOffset,
MTB_Blur,
@@ -935,4 +1290,6 @@ __nodes__ = [
MTB_SaveImageGrid,
MTB_LoadImageFromUrl,
MTB_Sharpen,
MTB_ExtractCoordinatesFromImage,
MTB_CoordinatesToString,
]
+85
View File
@@ -0,0 +1,85 @@
import qrcode
import torch
from PIL import Image
from ..log import log
from ..utils import pil2tensor
class MTB_QrCode:
"""Basic QR Code generator."""
@classmethod
def INPUT_TYPES(cls):
return {
"required": {
"url": ("STRING", {"default": "https://www.github.com"}),
"width": (
"INT",
{"default": 256, "max": 8096, "min": 0, "step": 1},
),
"height": (
"INT",
{"default": 256, "max": 8096, "min": 0, "step": 1},
),
"error_correct": (("L", "M", "Q", "H"), {"default": "L"}),
"box_size": (
"INT",
{"default": 10, "max": 8096, "min": 0, "step": 1},
),
"border": (
"INT",
{"default": 4, "max": 8096, "min": 0, "step": 1},
),
"invert": (("BOOLEAN",), {"default": False}),
}
}
RETURN_TYPES = ("IMAGE",)
FUNCTION = "do_qr"
CATEGORY = "mtb/generate"
def do_qr(
self,
*,
url: str,
width: int,
height: int,
error_correct: str,
box_size: int,
border: int,
invert: bool,
) -> tuple[torch.Tensor]:
log.warning(
"This node will soon be deprecated, there are much better alternatives like https://github.com/coreyryanhanson/comfy-qr"
)
if error_correct == "L" or error_correct not in ["M", "Q", "H"]:
error_correct = qrcode.constants.ERROR_CORRECT_L
elif error_correct == "M":
error_correct = qrcode.constants.ERROR_CORRECT_M
elif error_correct == "Q":
error_correct = qrcode.constants.ERROR_CORRECT_Q
else:
error_correct = qrcode.constants.ERROR_CORRECT_H
qr = qrcode.QRCode(
version=1,
error_correction=error_correct,
box_size=box_size,
border=border,
)
qr.add_data(url)
qr.make(fit=True)
back_color = (255, 255, 255) if invert else (0, 0, 0)
fill_color = (0, 0, 0) if invert else (255, 255, 255)
code = qr.make_image(back_color=back_color, fill_color=fill_color)
# that we now resize without filtering
code = code.resize((width, height), Image.NEAREST)
return (pil2tensor(code),)
__nodes__ = [MTB_QrCode]
+141
View File
@@ -0,0 +1,141 @@
import cv2
import numpy as np
import torch
from huggingface_hub import hf_hub_download
from ..utils import models_dir, np2tensor
# TODO: check if I can make a torch script device independant
# for now I forced it to use cuda.
class MTB_LoadVitMatteModel:
@classmethod
def INPUT_TYPES(cls):
return {
"required": {
"kind": (("Composition-1K", "Distinctions-646"),),
"autodownload": ("BOOLEAN", {"default": True}),
},
}
RETURN_TYPES = ("VITMATTE_MODEL",)
RETURN_NAMES = ("torch_script",)
CATEGORY = "mtb/vitmatte"
FUNCTION = "execute"
def execute(self, *, kind: str, autodownload: bool):
dest = models_dir / "vitmatte"
dest.mkdir(exist_ok=True)
name = "dist" if kind == "Distinctions-646" else "com"
file = hf_hub_download(
repo_id="melmass/pytorch-scripts",
filename=f"vitmatte_b_{name}.pt",
local_dir=dest.as_posix(),
local_files_only=not autodownload,
)
model = torch.jit.load(file).to("cuda")
return (model,)
class MTB_GenerateTrimap:
@classmethod
def INPUT_TYPES(cls):
return {
"required": {
# "image": ("IMAGE",),
"mask": ("MASK",),
"erode": ("INT", {"default": 10}),
"dilate": ("INT", {"default": 10}),
},
}
RETURN_TYPES = ("IMAGE",)
RETURN_NAMES = ("trimap",)
CATEGORY = "mtb/vitmatte"
FUNCTION = "execute"
def execute(
self,
# image:torch.Tensor,
mask: torch.Tensor,
erode: int = 10,
dilate: int = 10,
):
# TODO: not sure what's the most practical between IMAGE or MASK
# image = image.to("cuda").half()
mask = mask.to("cuda").half()
trimaps = []
for m in mask:
mask_arr = m.squeeze(0).to(torch.uint8).cpu().numpy() * 255
erode_kernel = np.ones((erode, erode), np.uint8)
dilate_kernel = np.ones((dilate, dilate), np.uint8)
eroded = cv2.erode(mask_arr, erode_kernel, iterations=5)
dilated = cv2.dilate(mask_arr, dilate_kernel, iterations=5)
trimap = np.zeros_like(mask_arr)
trimap[dilated == 255] = 128
trimap[eroded == 255] = 255
trimaps.append(trimap)
return (np2tensor(trimaps),)
class MTB_ApplyVitMatte:
@classmethod
def INPUT_TYPES(cls):
return {
"required": {
"model": ("VITMATTE_MODEL",),
"image": ("IMAGE",),
"trimap": ("IMAGE",),
"returns": (("RGB", "RGBA"),),
},
}
RETURN_TYPES = ("IMAGE", "MASK")
RETURN_NAMES = ("image (rgba)", "mask")
CATEGORY = "mtb/utils"
FUNCTION = "execute"
def execute(
self, model, image: torch.Tensor, trimap: torch.Tensor, returns: str
):
im_count = image.shape[0]
tm_count = trimap.shape[0]
if im_count != tm_count:
raise ValueError("image and trimap must have the same batch size")
outputs_m: list[torch.Tensor] = []
outputs_i: list[torch.Tensor] = []
for i, im in enumerate(image):
tm = trimap[i].half().unsqueeze(2).permute(2, 0, 1).to("cuda")
im = im.half().permute(2, 0, 1).to("cuda")
inputs = {"image": im.unsqueeze(0), "trimap": tm.unsqueeze(0)}
fine_mask = model(inputs)
foreground = im * fine_mask + (1 - fine_mask)
if returns == "RGBA":
rgba_image = torch.cat(
(foreground, fine_mask.unsqueeze(0)), dim=0
)
outputs_i.append(rgba_image.unsqueeze(0))
else:
outputs_i.append(foreground.unsqueeze(0))
outputs_m.append(fine_mask.unsqueeze(0))
result_m = torch.cat(outputs_m, dim=0)
result_i = torch.cat(outputs_i, dim=0)
return (result_i.permute(0, 2, 3, 1), result_m)
__nodes__ = [MTB_LoadVitMatteModel, MTB_GenerateTrimap, MTB_ApplyVitMatte]
+2 -2
View File
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
[project]
name = "comfy-mtb"
version = "0.1.5"
version = "0.1.6"
description = "Animation oriented nodes pack for ComfyUI."
license = "MIT"
readme = "README.md"
@@ -61,7 +61,7 @@ DisplayName = "comfy-mtb"
Icon = "https://avatars.githubusercontent.com/u/7041726?v=4"
[tool.bumpversion]
current_version = "0.1.5"
current_version = "0.1.6"
parse = "(?P<major>\\d+)\\.(?P<minor>\\d+)\\.(?P<patch>\\d+)"
serialize = ["{major}.{minor}.{patch}"]
search = "{current_version}"
+81 -38
View File
@@ -9,12 +9,14 @@ import socket
import subprocess
import sys
import uuid
from collections.abc import Callable, Sequence
from enum import Enum
from pathlib import Path
from typing import TypeVar
import folder_paths
import numpy as np
import numpy.typing as npt
import requests
import torch
from PIL import Image
@@ -464,6 +466,7 @@ here = Path(__file__).parent.absolute()
comfy_dir = Path(folder_paths.base_path)
models_dir = Path(folder_paths.models_dir)
output_dir = Path(folder_paths.output_directory)
input_dir = Path(folder_paths.input_directory)
styles_dir = comfy_dir / "styles"
session_id = str(uuid.uuid4())
# - Construct the path to the font file
@@ -501,52 +504,92 @@ PIL_FILTER_MAP = {
# region TENSOR Utilities
def tensor2pil(image: torch.Tensor) -> list[Image.Image]:
batch_count = image.size(0) if len(image.shape) > 3 else 1
if batch_count > 1:
out = []
for i in range(batch_count):
out.extend(tensor2pil(image[i]))
return out
return [
Image.fromarray(
np.clip(255.0 * image.cpu().numpy().squeeze(), 0, 255).astype(
np.uint8
)
)
]
def to_numpy(image: torch.Tensor) -> npt.NDArray[np.uint8]:
"""Converts a tensor to a ndarray with proper scaling and type conversion."""
log.debug(f"Converting tensor to numpy array with shape {image.shape}")
np_array = np.clip(255.0 * image.cpu().numpy(), 0, 255).astype(np.uint8)
log.debug(f"Numpy array shape after conversion: {np_array.shape}")
return np_array
def pil2tensor(image: Image.Image | list[Image.Image]) -> torch.Tensor:
if isinstance(image, list):
return torch.cat([pil2tensor(img) for img in image], dim=0)
return torch.from_numpy(
np.array(image).astype(np.float32) / 255.0
).unsqueeze(0)
def handle_batch(
tensor: torch.Tensor,
func: Callable[[torch.Tensor], Image.Image | npt.NDArray[np.uint8]],
) -> list[Image.Image] | list[npt.NDArray[np.uint8]]:
"""Handles batch processing for a given tensor and conversion function."""
return [func(tensor[i]) for i in range(tensor.shape[0])]
def np2tensor(img_np: np.ndarray | list[np.ndarray]) -> torch.Tensor:
if isinstance(img_np, list):
return torch.cat([np2tensor(img) for img in img_np], dim=0)
def tensor2pil(tensor: torch.Tensor) -> list[Image.Image]:
"""Converts a batch of tensors to a list of PIL Images."""
return torch.from_numpy(img_np.astype(np.float32) / 255.0).unsqueeze(0)
def single_tensor2pil(t: torch.Tensor) -> Image.Image:
np_array = to_numpy(t)
if np_array.ndim == 2: # (H, W) for masks
return Image.fromarray(np_array, mode="L")
elif np_array.ndim == 3: # (H, W, C) for RGB/RGBA
if np_array.shape[2] == 3:
return Image.fromarray(np_array, mode="RGB")
elif np_array.shape[2] == 4:
return Image.fromarray(np_array, mode="RGBA")
raise ValueError(f"Invalid tensor shape: {t.shape}")
return handle_batch(tensor, single_tensor2pil)
def tensor2np(tensor: torch.Tensor) -> list[np.ndarray]:
batch_count = tensor.size(0) if len(tensor.shape) > 3 else 1
if batch_count > 1:
out = []
for i in range(batch_count):
out.extend(tensor2np(tensor[i]))
return out
def pil2tensor(images: Image.Image | list[Image.Image]) -> torch.Tensor:
"""Converts a PIL Image or a list of PIL Images to a tensor."""
return [
np.clip(255.0 * tensor.cpu().numpy().squeeze(), 0, 255).astype(
np.uint8
)
]
def single_pil2tensor(image: Image.Image) -> torch.Tensor:
np_image = np.array(image).astype(np.float32) / 255.0
if np_image.ndim == 2: # Grayscale
return torch.from_numpy(np_image).unsqueeze(0) # (1, H, W)
else: # RGB or RGBA
return torch.from_numpy(np_image).unsqueeze(0) # (1, H, W, C)
if isinstance(images, Image.Image):
return single_pil2tensor(images)
else:
return torch.cat([single_pil2tensor(img) for img in images], dim=0)
def np2tensor(
np_array: npt.NDArray[np.float32] | Sequence[npt.NDArray[np.float32]],
) -> torch.Tensor:
"""Converts a NumPy array or a list of NumPy arrays to a tensor."""
def single_np2tensor(array: npt.NDArray[np.float32]) -> torch.Tensor:
if array.ndim == 2: # (H, W) for masks
return torch.from_numpy(
array.astype(np.float32) / 255.0
).unsqueeze(0) # (1, H, W)
elif array.ndim == 3: # (H, W, C) for RGB/RGBA
return torch.from_numpy(
array.astype(np.float32) / 255.0
).unsqueeze(0) # (1, H, W, C)
raise ValueError(f"Invalid array shape: {array.shape}")
if isinstance(np_array, np.ndarray):
return single_np2tensor(np_array)
else:
return torch.cat([single_np2tensor(arr) for arr in np_array], dim=0)
def tensor2np(tensor: torch.Tensor) -> list[npt.NDArray[np.uint8]]:
"""Converts a batch of tensors to a list of NumPy arrays."""
def single_tensor2np(t: torch.Tensor) -> npt.NDArray[np.uint8]:
t = t.squeeze() # Remove any singleton dimensions
if t.ndim == 2: # (H, W) for masks
return to_numpy(t)
elif t.ndim == 3: # (C, H, W) for RGB/RGBA
if t.shape[0] in [1, 3, 4]: # Channel-first format
t = t.permute(1, 2, 0)
return to_numpy(t)
else:
raise ValueError(f"Invalid tensor shape: {t.shape}")
return handle_batch(tensor, single_tensor2np)
def pad(img, left, right, top, bottom):
+197 -94
View File
@@ -11,6 +11,7 @@
/// <reference path="../types/typedefs.js" />
import { app } from '../../scripts/app.js'
import { api } from '../../scripts/api.js'
// #region base utils
@@ -18,7 +19,7 @@ import { app } from '../../scripts/app.js'
export function makeUUID() {
let dt = new Date().getTime()
const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
const r = (dt + Math.random() * 16) % 16 | 0
const r = ((dt + Math.random() * 16) % 16) | 0
dt = Math.floor(dt / 16)
return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16)
})
@@ -358,15 +359,17 @@ export function getWidgetType(config) {
// #region dynamic connections
/**
* @param {NodeType} nodeType
* @param {str} prefix
* @param {str | [str]} inputType
* @param {NodeType} nodeType The nodetype to attach the documentation to
* @param {str} prefix A prefix added to each dynamic inputs
* @param {str | [str]} inputType The datatype(s) of those dynamic inputs
* @param {{link?:LLink, ioSlot?:INodeInputSlot | INodeOutputSlot}?} opts
* @returns
*/
export const setupDynamicConnections = (nodeType, prefix, inputType, opts) => {
infoLogger('Setting up dynamic connections for', nodeType)
infoLogger(
'Setting up dynamic connections for',
Object.getOwnPropertyDescriptors(nodeType).title.value,
)
/** @type {{link?:LLink, ioSlot?:INodeInputSlot | INodeOutputSlot}} */
const options = opts || {}
@@ -704,7 +707,7 @@ const create_documentation_stylesheet = () => {
border-radius: 6px;
border: 3px solid var(--bg-color);
}
/* Scrollbar styling for Firefox */
scrollbar-width: thin;
scrollbar-color: var(--fg-color) var(--bg-color);
@@ -726,7 +729,7 @@ const create_documentation_stylesheet = () => {
border-collapse: collapse;
border: 1px var(--border-color) solid;
}
.documentation-popup th,
.documentation-popup th,
.documentation-popup td {
border: 1px var(--border-color) solid;
}
@@ -736,10 +739,84 @@ const create_documentation_stylesheet = () => {
document.head.appendChild(styleTag)
}
}
let documentationConverter
let parserPromise
const callbackQueue = []
function runQueuedCallbacks() {
while (callbackQueue.length) {
const cb = callbackQueue.shift()
cb(window.MTB.mdParser)
}
}
function loadParser(shiki) {
if (!parserPromise) {
parserPromise = import(
shiki
? '/mtb_async/mtb_markdown_plus.umd.js'
: '/mtb_async/mtb_markdown.umd.js'
)
.then((_module) =>
shiki ? MTBMarkdownPlus.getParser() : MTBMarkdown.getParser(),
)
.then((instance) => {
window.MTB.mdParser = instance
runQueuedCallbacks()
return instance
})
.catch((error) => {
console.error('Error loading the parser:', error)
})
}
return parserPromise
}
export const ensureMarkdownParser = async (callback) => {
infoLogger('Ensuring md parser')
let use_shiki = false
try {
use_shiki = await api.getSetting('mtb.Use Shiki')
} catch (e) {
console.warn('Option not available yet', e)
}
if (window.MTB?.mdParser) {
infoLogger('Markdown parser found')
callback?.(window.MTB.mdParser)
return window.MTB.mdParser
}
if (!parserPromise) {
infoLogger('Running promise to fetch parser')
try {
loadParser(use_shiki) //.then(() => {
// callback?.(window.MTB.mdParser)
// })
} catch (error) {
console.error('Error loading the parser:', error)
}
} else {
infoLogger('A similar promise is already running, waiting for it to finish')
}
if (callback) {
callbackQueue.push(callback)
}
await parserPromise
await parserPromise
return window.MTB.mdParser
}
/**
* Add documentation widget to the selected node
* Add documentation widget to the given node.
*
* This method will add a `docCtrl` property to the node
* that contains the AbortController that manages all the events
* defined inside it (global and instance ones) without explicit
* cleanup method for each.
*
* @param {NodeData} nodeData
* @param {NodeType} nodeType
* @param {DocumentationOptions} opts
@@ -756,25 +833,10 @@ export const addDocumentation = (
return
}
if (!documentationConverter) {
infoLogger('Initializing our mardown converter')
documentationConverter = new showdown.Converter({
tables: true,
strikethrough: true,
emoji: true,
ghCodeBlocks: true,
tasklists: true,
ghMentions: true,
smoothLivePreview: true,
simplifiedAutoLink: true,
parseImgDimensions: true,
openLinksInNewWindow: true,
})
}
const options = opts || {}
const iconSize = options.icon_size || 14
const iconMargin = options.icon_margin || 4
let docElement = null
let wrapper = null
@@ -820,80 +882,87 @@ export const addDocumentation = (
wrapper = document.createElement('div')
wrapper.classList.add('documentation-wrapper')
wrapper.innerHTML = documentationConverter.makeHtml(nodeData.description)
docElement.appendChild(wrapper)
// resize handle
resizeHandle = document.createElement('div')
resizeHandle.style.width = '0'
resizeHandle.style.height = '0'
resizeHandle.style.position = 'absolute'
resizeHandle.style.bottom = '0'
resizeHandle.style.right = '0'
// wrapper.innerHTML = documentationConverter.makeHtml(nodeData.description)
resizeHandle.style.cursor = 'se-resize'
resizeHandle.style.userSelect = 'none'
ensureMarkdownParser().then(() => {
MTB.mdParser.parse(nodeData.description).then((e) => {
wrapper.innerHTML = e
// resize handle
resizeHandle = document.createElement('div')
resizeHandle.classList.add('doc-resize-handle')
resizeHandle.style.width = '0'
resizeHandle.style.height = '0'
resizeHandle.style.position = 'absolute'
resizeHandle.style.bottom = '0'
resizeHandle.style.right = '0'
resizeHandle.style.borderWidth = '15px'
resizeHandle.style.borderStyle = 'solid'
resizeHandle.style.cursor = 'se-resize'
resizeHandle.style.userSelect = 'none'
resizeHandle.style.borderColor =
'transparent var(--border-color) var(--border-color) transparent'
resizeHandle.style.borderWidth = '15px'
resizeHandle.style.borderStyle = 'solid'
wrapper.appendChild(resizeHandle)
let isResizing = false
resizeHandle.style.borderColor =
'transparent var(--border-color) var(--border-color) transparent'
let startX
let startY
let startWidth
let startHeight
wrapper.appendChild(resizeHandle)
let isResizing = false
resizeHandle.addEventListener(
'mousedown',
(e) => {
e.stopPropagation()
isResizing = true
startX = e.clientX
startY = e.clientY
startWidth = Number.parseInt(
document.defaultView.getComputedStyle(docElement).width,
10,
let startX
let startY
let startWidth
let startHeight
resizeHandle.addEventListener(
'mousedown',
(e) => {
e.stopPropagation()
isResizing = true
startX = e.clientX
startY = e.clientY
startWidth = Number.parseInt(
document.defaultView.getComputedStyle(docElement).width,
10,
)
startHeight = Number.parseInt(
document.defaultView.getComputedStyle(docElement).height,
10,
)
},
{ signal: this.docCtrl.signal },
)
startHeight = Number.parseInt(
document.defaultView.getComputedStyle(docElement).height,
10,
document.addEventListener(
'mousemove',
(e) => {
if (!isResizing) return
const scale = app.canvas.ds.scale
const newWidth = startWidth + (e.clientX - startX) / scale
const newHeight = startHeight + (e.clientY - startY) / scale
docElement.style.width = `${newWidth}px`
docElement.style.height = `${newHeight}px`
this.docPos = {
width: `${newWidth}px`,
height: `${newHeight}px`,
}
},
{ signal: this.docCtrl.signal },
)
},
{ signal: this.docCtrl.signal },
)
document.addEventListener(
'mousemove',
(e) => {
if (!isResizing) return
const scale = app.canvas.ds.scale
const newWidth = startWidth + (e.clientX - startX) / scale
const newHeight = startHeight + (e.clientY - startY) / scale
docElement.style.width = `${newWidth}px`
docElement.style.height = `${newHeight}px`
this.docPos = {
width: `${newWidth}px`,
height: `${newHeight}px`,
}
},
{ signal: this.docCtrl.signal },
)
document.addEventListener(
'mouseup',
() => {
isResizing = false
},
{ signal: this.docCtrl.signal },
)
document.addEventListener(
'mouseup',
() => {
isResizing = false
},
{ signal: this.docCtrl.signal },
)
})
})
} else if (!this.show_doc && docElement !== null) {
docElement.remove()
docElement = null
@@ -917,8 +986,8 @@ export const addDocumentation = (
Object.assign(docElement.style, {
transformOrigin: '0 0',
transform: scale,
left: `${transform.a + transform.e}px`,
top: `${transform.d + transform.f}px`,
left: `${transform.a + rect.x + transform.e}px`,
top: `${transform.d + rect.y + transform.f}px`,
width: this.docPos ? this.docPos.width : `${this.size[0] * 1.5}px`,
height: this.docPos?.height,
})
@@ -1025,8 +1094,8 @@ export function addMenuHandler(nodeType, cb) {
*/
nodeType.prototype.getExtraMenuOptions = function (app, options) {
const r = getOpts.apply(this, [app, options]) || []
const newItems = cb.apply(this, [app, options])
return r + newItems
const newItems = cb.apply(this, [app, options]) || []
return [...r, ...newItems]
}
}
@@ -1049,7 +1118,41 @@ export const addDeprecation = (nodeType, reason) => {
// #endregion
// #region graph utilities
// #region API / graph utilities
export const getAPIInputs = () => {
const inputs = {}
let counter = 1
for (const node of getNodes(true)) {
const widgets = node.widgets
if (node.properties.mtb_api && node.properties.useAPI) {
if (node.properties.mtb_api.inputs) {
for (const currentName in node.properties.mtb_api.inputs) {
const current = node.properties.mtb_api.inputs[currentName]
if (current.enabled) {
const inputName = current.name || currentName
const widget = widgets.find((w) => w.name === currentName)
if (!widget) continue
if (!(inputName in inputs)) {
inputs[inputName] = {
...current,
id: counter,
name: inputName,
type: current.type,
node_id: node.id,
widgets: [],
}
}
inputs[inputName].widgets.push(widget)
counter = counter + 1
}
}
}
}
}
return inputs
}
export const getNodes = (skip_unused) => {
const nodes = []
for (const outerNode of app.graph.computeExecutionOrder(false)) {
+3 -3
View File
File diff suppressed because one or more lines are too long
-3
View File
File diff suppressed because one or more lines are too long
+1095 -1089
View File
File diff suppressed because it is too large Load Diff
+246
View File
@@ -0,0 +1,246 @@
// web/note_plus.constants.js
export const DEFAULT_CSS = ''
export const DEFAULT_HTML = `<p style='color:red;font-family:monospace'>
Note+
</p>`
export const DEFAULT_MD = '## Note+'
export const DEFAULT_MODE = 'markdown'
export const DEFAULT_THEME = 'one_dark'
export const DEMO_CONTENT = `
# @mtb/svelte-markdown.
## This is a subheader
[![embedded test](https://github.com/melMass/comfy_mtb/actions/workflows/test_embedded.yml/badge.svg)](https://github.com/melMass/comfy_mtb/actions/workflows/test_embedded.yml)
![home](https://repository-images.githubusercontent.com/649047066/a3eef9a7-20dd-4ef9-b839-884502d4e873)
<details>
<summary>More details about the inception of the project</summary>
\`\`\`js
class YesMan{
constructor(){
this.started = false
}
}
\`\`\`
</details>
This is a paragraph. If it goes over the maximum width it will not automatically wrap unless it reaches the max-w of \`prose\` check [styles](/styles) for more info.
This component is useful for building some tools on top. Or even just a static system using svelte at its core. My personal blog is fully powered by **@mtb/svelte-markdown**
| And this is | A table |
|-------------|---------|
| With two | columns |
We also support github callout:
> [!NOTE]
> Highlights information that users should take into account, even when skimming.
> [!TIP]
> Optional information to help a user be more successful.
> [!IMPORTANT]
> Crucial information necessary for users to succeed.
> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.
> [!CAUTION]
> Negative potential consequences of an action.
`
export const THEMES = [
'ambiance',
'chaos',
'chrome',
'cloud9_day',
'cloud9_night',
'cloud9_night_low_color',
'cloud_editor',
'cloud_editor_dark',
'clouds',
'clouds_midnight',
'cobalt',
'crimson_editor',
'dawn',
'dracula',
'dreamweaver',
'eclipse',
'github',
'github_dark',
'gob',
'gruvbox',
'gruvbox_dark_hard',
'gruvbox_light_hard',
'idle_fingers',
'iplastic',
'katzenmilch',
'kr_theme',
'kuroir',
'merbivore',
'merbivore_soft',
'mono_industrial',
'monokai',
'nord_dark',
'one_dark',
'pastel_on_dark',
'solarized_dark',
'solarized_light',
'sqlserver',
'terminal',
'textmate',
'tomorrow',
'tomorrow_night',
'tomorrow_night_blue',
'tomorrow_night_bright',
'tomorrow_night_eighties',
'twilight',
'vibrant_ink',
'vscode',
]
export const CSS_RESET = `
* {
font-family: monospace;
line-height: 1.25em;
}
.shiki{
padding: 1em;
width: 100%;
}
.markdown-callout-title {
.octicon{
fill:white;
}
/* background: var(--current-color); */
color: var(--current-color);
font-weight: bold;
/* border-start-end-radius: var(--radius); */
/* border-start-start-radius: var(--radius); */
padding: 0.5em;
padding-inline-start: 1em;
}
.markdown-callout-content {
padding: 1em;
}
.markdown-callout {
--radius: 8px;
--current-color: purple;
/* border-start-end-radius: var(--radius); */
/* border-start-start-radius: var(--radius); */
border-left: 3px solid var(--current-color);
margin-bottom: 1em;
margin-top: 1em;
}
.markdown-callout-tip {
--text-color: whitesmoke;
--current-color: #50e3c2;
}
.markdown-callout-note {
--text-color: whitesmoke;
--current-color: #0070f3;
}
.markdown-callout-important {
--text-color: whitesmoke;
--current-color: #7928ca;
}
.markdown-callout-warning {
--current-color: #f5a623;
}
.markdown-callout-caution {
--current-color: #e60000;
}
.note-plus-preview {
display:flex;
flex-direction:column;
align-items: flex-start;
width:95%;
margin-left: 20px;
margin-top:20px;
/*background-color: rgba(255,0,0,0.5)!important;*/
}
/* allowed to be selected*/
h1, h2, h3, h4, h5, h6,a, p, ul, ol, dl, blockquote,details,summary {
pointer-events:auto;
user-select:text;
}
h1, h2, h3, h4, h5, h6 {
display:inline-block;
margin: 0;
padding: 0;
font-weight: normal;
}
p, ul, ol, dl, blockquote {
margin: 0.3em;
padding: 0;
}
ul, ol {
padding-left: 1em;
}
a {
color: inherit;
text-decoration: none;
pointer-events: all;
color: cyan;
}
img {
padding: 1em 0;
max-width: 100%;
}
iframe {
max-width: 100%;
height: auto;
border:none;
pointer-events:all;
}
blockquote {
border-left: 4px solid #ccc;
padding-left: 1em;
margin-left: 0;
font-style: italic;
}
pre, code {
font-family: monospace;
}
table {
border-collapse: collapse;
width: 100%;
border-bottom: 1px solid #000;
margin: 1em 0;
}
th, td {
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 8px;
text-align: left;
}
th {
border: 1px solid #000;
background-color: rgba(0,0,0,0.5);
}
input[type="checkbox"] {
margin-right: 10px;
}
`
+390 -253
View File
@@ -1,155 +1,122 @@
/// <reference path="../types/typedefs.js" />
import { app } from '../../scripts/app.js'
import * as shared from './comfy_shared.js'
import { infoLogger, successLogger, errorLogger } from './comfy_shared.js'
import {
DEFAULT_CSS,
DEFAULT_HTML,
DEFAULT_MD,
DEFAULT_MODE,
DEFAULT_THEME,
THEMES,
CSS_RESET,
DEMO_CONTENT,
} from './note_plus.constants.js'
import { LocalStorageManager } from './comfy_shared.js'
const DEFAULT_CSS = ''
const DEFAULT_HTML = `<p style='color:red;font-family:monospace'>
Note+
</p>`
const DEFAULT_MD = '## Note+'
const DEFAULT_MODE = 'markdown'
const DEFAULT_THEME = 'one_dark'
const storage = new LocalStorageManager('mtb')
const CSS_RESET = `
* {
font-family: monospace;
line-height: 1.25em;
/**
* Uses `@mtb/markdown-parser` (a fork of marked)
* It is statically stored to avoid having
* more than 1 instance ever.
* The size difference between both libraries...
* ╭───┬────────────────────────────────┬──────────╮
* │ # │ name │ size │
* ├───┼────────────────────────────────┼──────────┤
* │ 0 │ web-dist/mtb_markdown_plus.mjs │ 1.2 MB │ <- with shiki
* │ 1 │ web-dist/mtb_markdown.mjs │ 44.7 KB │
* ╰───┴────────────────────────────────┴──────────╯
*/
let useShiki = storage.get('np-use-shiki', false)
const makeResizable = (dialog) => {
dialog.style.resize = 'both'
dialog.style.transformOrigin = 'top left'
dialog.style.overflow = 'auto'
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: normal;
const makeDraggable = (dialog, handle) => {
let offsetX = 0
let offsetY = 0
let isDragging = false
const onMouseMove = (e) => {
if (isDragging) {
dialog.style.left = `${e.clientX - offsetX}px`
dialog.style.top = `${e.clientY - offsetY}px`
}
}
const onMouseUp = () => {
isDragging = false
document.removeEventListener('mousemove', onMouseMove)
document.removeEventListener('mouseup', onMouseUp)
}
handle.addEventListener('mousedown', (e) => {
isDragging = true
offsetX = e.clientX - dialog.offsetLeft
offsetY = e.clientY - dialog.offsetTop
document.addEventListener('mousemove', onMouseMove)
document.addEventListener('mouseup', onMouseUp)
})
}
p, ul, ol, dl, blockquote {
margin: 0.3em;
padding: 0;
}
ul, ol {
padding-left: 1em;
}
a {
color: inherit;
text-decoration: none;
pointer-events: all;
color: cyan;
}
img {
padding: 1em 0;
max-width: 100%;
}
iframe {
width: 100%;
height: auto;
border:none;
pointer-events:all;
}
blockquote {
border-left: 4px solid #ccc;
padding-left: 1em;
margin-left: 0;
font-style: italic;
}
pre, code {
font-family: monospace;
}
table {
border-collapse: collapse;
width: 100%;
border-bottom: 1px solid #000;
margin: 1em 0;
}
th, td {
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 8px;
text-align: left;
}
th {
border: 1px solid #000;
background-color: rgba(0,0,0,0.5);
}
input[type="checkbox"] {
margin-right: 10px;
}
`
const themes = [
'ambiance',
'chaos',
'chrome',
'cloud9_day',
'cloud9_night',
'cloud9_night_low_color',
'cloud_editor',
'cloud_editor_dark',
'clouds',
'clouds_midnight',
'cobalt',
'crimson_editor',
'dawn',
'dracula',
'dreamweaver',
'eclipse',
'github',
'github_dark',
'gob',
'gruvbox',
'gruvbox_dark_hard',
'gruvbox_light_hard',
'idle_fingers',
'iplastic',
'katzenmilch',
'kr_theme',
'kuroir',
'merbivore',
'merbivore_soft',
'mono_industrial',
'monokai',
'nord_dark',
'one_dark',
'pastel_on_dark',
'solarized_dark',
'solarized_light',
'sqlserver',
'terminal',
'textmate',
'tomorrow',
'tomorrow_night',
'tomorrow_night_blue',
'tomorrow_night_bright',
'tomorrow_night_eighties',
'twilight',
'vibrant_ink',
'vscode',
]
/** @extends {LGraphNode} */
class NotePlus extends LiteGraph.LGraphNode {
// same values as the comfy note
color = LGraphCanvas.node_colors.yellow.color
bgcolor = LGraphCanvas.node_colors.yellow.bgcolor
groupcolor = LGraphCanvas.node_colors.yellow.groupcolor
/* NOTE: this is not serialized and only there to make multiple
* note+ nodes in the same graph unique.
*/
uuid
/** Stores the dialog observer*/
resizeObserver
/** Live update the preview*/
live = true
/** DOM height by adding child size together*/
calculated_height = 0
/** ????*/
_raw_html
/** might not be needed anymore */
inner
/** the dialog DOM widget*/
dialog
/** widgets*/
/** used to store the raw value and display the parsed html at the same time*/
html_widget
/** hidden widgets for serialization*/
css_widget
edit_mode_widget
theme_widget
editorsContainer
/** ACE editors instances*/
html_editor
css_editor
constructor() {
super()
this.uuid = shared.makeUUID()
infoLogger('Constructing Note+ instance')
shared.ensureMarkdownParser((_p) => {
this.updateHTML()
})
// - litegraph settings
this.collapsable = true
this.isVirtualNode = true
@@ -159,35 +126,30 @@ class NotePlus extends LiteGraph.LGraphNode {
// - default values, serialization is done through widgets
this._raw_html = DEFAULT_MODE === 'html' ? DEFAULT_HTML : DEFAULT_MD
// - mardown converter
this.markdownConverter = new showdown.Converter({
tables: true,
strikethrough: true,
emoji: true,
ghCodeBlocks: true,
tasklists: true,
ghMentions: true,
smoothLivePreview: true,
simplifiedAutoLink: true,
parseImgDimensions: true,
openLinksInNewWindow: true,
})
// - state
this.live = true
this.calculated_height = 0
// - add widgets
const inner = document.createElement('div')
inner.style.margin = '0'
inner.style.padding = '0'
inner.style.pointerEvents = 'none'
this.html_widget = this.addDOMWidget('HTML', 'html', inner, {
const cinner = document.createElement('div')
this.inner = document.createElement('div')
cinner.append(this.inner)
this.inner.classList.add('note-plus-preview')
cinner.style.margin = '0'
cinner.style.padding = '0'
this.html_widget = this.addDOMWidget('HTML', 'html', cinner, {
setValue: (val) => {
this._raw_html = val
},
getValue: () => this._raw_html,
getMinHeight: () => this.calculated_height, // (the edit button),
onDraw: () => {
// HACK: dirty hack for now until it's addressed upstream...
this.html_widget.element.style.pointerEvents = 'none'
// NOTE: not sure about this, it avoid the visual "bugs" but scrolling over the wrong area will affect zoom...
// this.html_widget.element.style.overflow = 'scroll'
},
hideOnZoom: false,
})
@@ -197,22 +159,48 @@ class NotePlus extends LiteGraph.LGraphNode {
}
/**
*
* @param {CanvasRenderingContext2D} ctx
* @param {LGraphCanvas} graphcanvas
* @returns
* @param {CanvasRenderingContext2D} ctx canvas context
* @param {any} _graphcanvas
*/
onDrawForeground(ctx, _graphcanvas) {
if (this.flags.collapsed) return
this.drawEditIcon(ctx)
this.drawSideHandle(ctx)
// Define the size and position of the icon
const iconSize = 14 // Size of the icon
const iconMargin = 8 // Margin from the edges
const x = this.size[0] - iconSize - iconMargin
const y = iconMargin * 1.5
// DEBUG BACKGROUND
// ctx.fillStyle = 'rgba(0, 255, 0, 0.3)'
// const rect = this.rect
// ctx.fillRect(rect.x, rect.y, rect.width, rect.height)
}
drawSideHandle(ctx) {
const handleRect = this.sideHandleRect
const chamfer = 20
ctx.beginPath()
// top left
ctx.moveTo(handleRect.x, handleRect.y + chamfer)
// top right
ctx.lineTo(handleRect.x + handleRect.width, handleRect.y)
// bottom right
ctx.lineTo(
handleRect.x + handleRect.width,
handleRect.y + handleRect.height,
)
// bottom left
ctx.lineTo(handleRect.x, handleRect.y + handleRect.height - chamfer)
ctx.closePath()
ctx.fillStyle = 'rgba(255, 255, 255, 0.05)'
ctx.fill()
}
drawEditIcon(ctx) {
const rect = this.iconRect
// DEBUG ICON POSITION
// ctx.fillStyle = 'rgba(0, 255, 0, 0.3)'
// ctx.fillRect(rect.x, rect.y, rect.width, rect.height)
// Create a new Path2D object from SVG path data
const pencilPath = new Path2D(
'M21.28 6.4l-9.54 9.54c-.95.95-3.77 1.39-4.4.76-.63-.63-.2-3.45.75-4.4l9.55-9.55a2.58 2.58 0 1 1 3.64 3.65z',
)
@@ -220,41 +208,73 @@ class NotePlus extends LiteGraph.LGraphNode {
'M11 4H6a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h11c2.21 0 3-1.8 3-4v-5',
)
// Draw the paths
ctx.save()
ctx.translate(x, y) // Position the icon on the canvas
ctx.scale(iconSize / 32, iconSize / 32) // Scale the icon to the desired size
ctx.strokeStyle = 'rgba(255,255,255,0.3)'
ctx.translate(rect.x, rect.y)
ctx.scale(rect.width / 32, rect.height / 32)
ctx.strokeStyle = 'rgba(255,255,255,0.4)'
ctx.lineCap = 'round'
ctx.lineJoin = 'round'
ctx.lineWidth = 2.4
ctx.stroke(pencilPath)
ctx.stroke(folderPath)
ctx.restore()
}
onMouseDown(_e, localPos, _graphcanvas) {
// Check if the click is within the pencil icon bounds
const iconSize = 14
const iconMargin = 8
const iconX = this.size[0] - iconSize - iconMargin
const iconY = iconMargin * 1.5
if (
localPos[0] > iconX &&
localPos[0] < iconX + iconSize &&
localPos[1] > iconY &&
localPos[1] < iconY + iconSize
) {
// Pencil icon was clicked, open the editor
this.openEditorDialog()
return true // Return true to indicate the event was handled
/**
* @param {number} x
* @param {number} y
* @param {{x:number,y:number,width:number,height:number}} rect
* @returns {}
*/
inRect(x, y, rect) {
rect = rect || this.iconRect
return (
x >= rect.x &&
x <= rect.x + rect.width &&
y >= rect.y &&
y <= rect.y + rect.height
)
}
get rect() {
return {
x: 0,
y: 0,
width: this.size[0],
height: this.size[1],
}
}
get sideHandleRect() {
const w = this.size[0]
const h = this.size[1]
return false // Return false to let the event propagate
const bw = 32
const bho = 64
return {
x: w - bw,
y: bho,
width: bw,
height: h - bho * 1.5,
}
}
get iconRect() {
const iconSize = 32
const iconMargin = 16
return {
x: this.size[0] - iconSize - iconMargin,
y: iconMargin * 1.5,
width: iconSize,
height: iconSize,
}
}
onMouseDown(_e, localPos, _graphcanvas) {
if (this.inRect(localPos[0], localPos[1])) {
this.openEditorDialog()
return true
}
return false
}
/* Hidden widgets to store note+ settings in the workflow (stripped in API)*/
setupSerializationWidgets() {
infoLogger('Setup Serializing widgets')
@@ -283,15 +303,36 @@ class NotePlus extends LiteGraph.LGraphNode {
shared.hideWidgetForGood(this, this.css_widget)
shared.hideWidgetForGood(this, this.theme_widget)
}
setupDialog() {
infoLogger('Setup dialog')
// this.addWidget('button', 'Edit', 'Edit', this.openEditorDialog.bind(this))
this.dialog = new app.ui.dialog.constructor()
this.dialog.element.classList.add('comfy-settings')
Object.assign(this.dialog.element.style, {
position: 'absolute',
boxShadow: 'none',
})
const subcontainer = this.dialog.textElement.parentElement
if (subcontainer) {
Object.assign(subcontainer.style, {
width: '100%',
})
}
const closeButton = this.dialog.element.querySelector('button')
closeButton.textContent = 'CANCEL'
closeButton.id = 'cancel-editor-dialog'
closeButton.title =
"Cancel the changes since last opened (doesn't support live mode)"
closeButton.disabled = this.live
closeButton.style.background = this.live
? 'repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px)'
: ''
const saveButton = document.createElement('button')
saveButton.textContent = 'SAVE'
saveButton.onclick = () => {
@@ -313,32 +354,54 @@ class NotePlus extends LiteGraph.LGraphNode {
closeEditorDialog(accept) {
infoLogger('Closing editor dialog', accept)
if (accept) {
if (accept && !this.live) {
this.updateHTML(this.html_editor.getValue())
this.updateCSS(this.css_editor.getValue())
}
if (this.resizeObserver) {
this.resizeObserver.disconnect()
this.resizeObserver = null
}
this.teardownEditors()
this.dialog.close()
}
/**
* @param {HTMLElement} elem
*/
hookResize(elem) {
if (!this.resizeObserver) {
const observer = () => {
this.html_editor.resize()
this.css_editor.resize()
Object.assign(this.editorsContainer.style, {
minHeight: `${(this.dialog.element.clientHeight / 100) * 50}px`, //'200px',
})
}
this.resizeObserver = new ResizeObserver(observer).observe(elem)
}
}
openEditorDialog() {
infoLogger(`Current edit mode ${this.edit_mode_widget.value}`)
this.hookResize(this.dialog.element)
const container = document.createElement('div')
Object.assign(container.style, {
display: 'flex',
gap: '10px',
flexDirection: 'column',
})
const editorsContainer = document.createElement('div')
Object.assign(editorsContainer.style, {
this.editorsContainer = document.createElement('div')
Object.assign(this.editorsContainer.style, {
display: 'flex',
gap: '10px',
flexDirection: 'row',
minHeight: this.dialog.element.offsetHeight, //'200px',
width: '100%',
})
container.append(editorsContainer)
container.append(this.editorsContainer)
this.dialog.show('')
this.dialog.textElement.append(container)
@@ -346,30 +409,39 @@ class NotePlus extends LiteGraph.LGraphNode {
const aceHTML = document.createElement('div')
aceHTML.id = 'noteplus-html-editor'
Object.assign(aceHTML.style, {
width: '300px',
height: '300px',
// backgroundColor: 'rgb(30,30,30)',
// color: 'whitesmoke',
width: '100%',
height: '100%',
minWidth: '300px',
minHeight: 'inherit',
})
editorsContainer.append(aceHTML)
this.editorsContainer.append(aceHTML)
const aceCSS = document.createElement('div')
aceCSS.id = 'noteplus-css-editor'
Object.assign(aceCSS.style, {
width: '300px',
height: '300px',
// backgroundColor: 'rgb(30,30,30)',
// color: 'whitesmoke',
width: '100%',
height: '100%',
minHeight: 'inherit',
})
editorsContainer.append(aceCSS)
this.editorsContainer.append(aceCSS)
const live_edit = document.createElement('input')
live_edit.type = 'checkbox'
live_edit.checked = this.live
live_edit.onchange = () => {
this.live = live_edit.checked
const cancel_button = this.dialog.element.querySelector(
'#cancel-editor-dialog',
)
if (cancel_button) {
cancel_button.disabled = this.live
cancel_button.style.background = this.live
? 'repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px)'
: ''
}
}
//- "Dynamic" elements
@@ -388,15 +460,14 @@ class NotePlus extends LiteGraph.LGraphNode {
const md = this.html_editor.getValue()
this.edit_mode_widget.value = 'html'
select_mode.value = 'html'
const html = this.markdownConverter.makeHtml(md)
this.html_widget.value = html
this.html_editor.setValue(html)
this.html_editor.session.setMode('ace/mode/html')
this.updateHTML(this.html_widget.value)
convert_to_html.remove()
MTB.mdParser.parse(md).then((content) => {
this.html_widget.value = content
this.html_editor.setValue(content)
this.html_editor.session.setMode('ace/mode/html')
this.updateHTML(this.html_widget.value)
convert_to_html.remove()
})
}
firstButton.before(convert_to_html)
}
} else {
@@ -406,6 +477,19 @@ class NotePlus extends LiteGraph.LGraphNode {
}
}
select_mode.value = this.edit_mode_widget.value
// the header for dragging the dialog
const header = document.createElement('div')
header.style.padding = '8px'
header.style.cursor = 'move'
header.style.backgroundColor = 'rgba(0,0,0,0.5)'
header.style.userSelect = 'none'
header.style.borderBottom = '1px solid #ddd'
header.textContent = 'MTB Note+ Editor'
container.prepend(header)
makeDraggable(this.dialog.element, header)
makeResizable(this.dialog.element)
}
//- combobox
let theme_select = this.dialog.element.querySelector('#theme_select')
@@ -421,7 +505,7 @@ class NotePlus extends LiteGraph.LGraphNode {
option.textContent = label
theme_select.append(option)
}
for (const t of themes) {
for (const t of THEMES) {
addOption(t)
}
@@ -491,54 +575,59 @@ class NotePlus extends LiteGraph.LGraphNode {
onCreate() {
errorLogger('NotePlus onCreate')
}
configure(info) {
super.configure(info)
infoLogger('Restoring serialized values', info)
// - update view from serialzed data
restoreNodeState(info) {
this.html_widget.element.id = `note-plus-${this.uuid}`
this.setMode(this.edit_mode_widget.value)
this.setTheme(this.theme_widget.value)
this.updateHTML(this.html_widget.value)
this.updateCSS(this.css_widget.value)
this.setSize(info.size)
if (info?.size) {
this.setSize(info.size)
}
}
configure(info) {
super.configure(info)
infoLogger('Restoring serialized values', info)
this.restoreNodeState(info)
// - update view from serialzed data
}
onNodeCreated() {
infoLogger('Node created', this.uuid)
this.html_widget.element.id = `note-plus-${this.uuid}`
this.setMode(this.edit_mode_widget.value)
this.setTheme(this.theme_widget.value)
this.updateHTML(this.html_widget.value) // widget is populated here since we called super
this.updateCSS(this.css_widget.value)
this.restoreNodeState({})
// this.html_widget.element.id = `note-plus-${this.uuid}`
// this.setMode(this.edit_mode_widget.value)
// this.setTheme(this.theme_widget.value)
// this.updateHTML(this.html_widget.value) // widget is populated here since we called super
// this.updateCSS(this.css_widget.value)
}
onRemoved() {
infoLogger('Node removed', this.uuid)
}
getExtraMenuOptions() {
const options = []
// {
// content: string;
// callback?: ContextMenuEventListener;
// /** Used as innerHTML for extra child element */
// title?: string;
// disabled?: boolean;
// has_submenu?: boolean;
// submenu?: {
// options: ContextMenuItem[];
// } & IContextMenuOptions;
// className?: string;
// }
options.push({
content: `Set to ${
this.edit_mode_widget.value === 'html' ? 'markdown' : 'html'
}`,
callback: () => {
this.edit_mode_widget.value =
this.edit_mode_widget.value === 'html' ? 'markdown' : 'html'
this.updateHTML(this.html_widget.value)
},
})
const currentMode = this.edit_mode_widget.value
const newMode = currentMode === 'html' ? 'markdown' : 'html'
return options
const debugItems = window.MTB?.DEBUG
? [
{
content: 'Replace with demo content (debug)',
callback: () => {
this.html_widget.value = DEMO_CONTENT
},
},
]
: []
return [
...debugItems,
{
content: `Set to ${newMode}`,
callback: () => {
this.edit_mode_widget.value = newMode
this.updateHTML(this.html_widget.value)
},
},
]
}
_setupEditor(editor) {
@@ -663,17 +752,44 @@ class NotePlus extends LiteGraph.LGraphNode {
// this.setSize(this.computeSize())
}
updateHTML(val) {
const cleanHTML = DOMPurify.sanitize(val, { ADD_TAGS: ['iframe'] })
this.html_widget.value = cleanHTML
parserInitiated() {
if (window.MTB?.mdParser) return true
return false
}
// update our widget preview
if (this.edit_mode_widget.value === 'html') {
this.html_widget.element.innerHTML = cleanHTML
} else if (this.edit_mode_widget.value === 'markdown') {
this.html_widget.element.innerHTML =
this.markdownConverter.makeHtml(cleanHTML)
/** to easilty swap purification methods*/
purify(content) {
return DOMPurify.sanitize(content, {
ADD_TAGS: ['iframe', 'detail', 'summary'],
})
}
updateHTML(val) {
if (!this.parserInitiated()) {
return
}
val = val || this.html_widget.value
const isHTML = this.edit_mode_widget.value === 'html'
const cleanHTML = this.purify(val)
const value = isHTML
? cleanHTML
: cleanHTML.replaceAll('&gt;', '>').replaceAll('&lt;', '<')
// .replaceAll('&amp;', '&')
// .replaceAll('&quot;', '"')
// .replaceAll('&#039;', "'")
this.html_widget.value = value
if (isHTML) {
this.inner.innerHTML = value
} else {
MTB.mdParser.parse(value).then((e) => {
this.inner.innerHTML = e
})
}
// this.html_widget.element.innerHTML = `<div id="note-plus-spacer"></div>${value}`
this.calculateHeight()
// this.setSize(this.computeSize())
}
@@ -681,6 +797,27 @@ class NotePlus extends LiteGraph.LGraphNode {
app.registerExtension({
name: 'mtb.noteplus',
setup: () => {
app.ui.settings.addSetting({
id: 'mtb.noteplus.use-shiki',
category: ['mtb', 'Note+', 'use-shiki'],
name: 'Use shiki to highlight code',
tooltip:
'This will load a larger version of @mtb/markdown-parser that bundles shiki, it supports all shiki transformers (supported langs: html,css,python,markdown)',
type: 'boolean',
defaultValue: false,
attrs: {
style: {
// fontFamily: 'monospace',
},
},
async onChange(value) {
storage.set('np-use-shiki', value)
useShiki = value
},
})
},
registerCustomNodes() {
LiteGraph.registerNodeType('Note Plus (mtb)', NotePlus)
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long