Compare commits
31
Commits
v0.1.6
...
fix/note-plus
| Author | SHA1 | Date | |
|---|---|---|---|
 Mel Massadian
|
d576190f07 | ||
|
Mel Massadian
|
247ad12ec3 | ||
|
Mel Massadian
|
881573e2f2 | ||
|
Mel Massadian
|
6f3a5b5c71 | ||
|
Mel Massadian
|
fa017fbb81 | ||
|
Chenlei Hu
|
dbcca15a21 | ||
|
Mel Massadian
|
bc41576fac | ||
|
Mel Massadian
|
8596b8184e | ||
|
Mel Massadian
|
896a025006 | ||
|
Mel Massadian
|
43092e44a4 | ||
|
bymyself
|
80b5a0ca74 | ||
|
Mel Massadian
|
81b3bc1651 | ||
|
Mel Massadian
|
a825504bdd | ||
|
Mel Massadian
|
22190cd25e | ||
|
Mel Massadian
|
a976adbb39 | ||
|
Mel Massadian
|
997d2fb13a | ||
|
Mel Massadian
|
f8829fcb37 | ||
|
Mel Massadian
|
9651a70341 | ||
|
Mel Massadian
|
57683c3c7d | ||
|
Mel Massadian
|
f99f92e8f7 | ||
|
Mel Massadian
|
5bc125d2f0 | ||
|
Mel Massadian
|
c99b0812ab | ||
|
Mel Massadian
|
333f646ab1 | ||
|
Mel Massadian
|
dbdf27664c | ||
|
Mel Massadian
|
7d5569e5c1 | ||
|
Mel Massadian
|
5681b464ad | ||
|
Mel Massadian
|
8d0fcee2f3 | ||
|
Mel Massadian
|
1078fc6f0f | ||
|
Mel Massadian
|
821a0ef427 | ||
|
Mel Massadian
|
9007a70aa0 | ||
|
Mel Massadian
|
1a0ebd5173 |
@@ -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) 以获取更多信息。
|
||||
|
||||
|
||||
|
||||
</details>
|
||||
|
||||
<details><summary><h4>Google Colab</h4></summary>
|
||||
|
||||
在 **Run ComfyUI with localtunnel (Recommended Way)** 标题之后（代码单元格之前）添加一个新的代码单元格
|
||||
|
||||
|
||||
|
||||
|
||||
```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: 
|
||||
|
||||
> **Preview**
|
||||
> 
|
||||
|
||||
</details>
|
||||
|
||||
@@ -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)をチェックしてください。
|
||||
|
||||
|
||||
|
||||
</details>
|
||||
|
||||
<details><summary><h4>Google Colab</h4></summary>
|
||||
|
||||
ComfyUI with localtunnel (Recommended Way)**ヘッダーのすぐ後（コードセルの前）に、新しいコードセルを追加してください。
|
||||
|
||||
|
||||
```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`を削除してください : 
|
||||
|
||||
> **プレビュー**
|
||||
> 
|
||||
|
||||
</details>
|
||||
|
||||
@@ -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)
|
||||
@@ -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)
|
||||
@@ -4,177 +4,8 @@
|
||||
|
||||
|
||||
<!-- omit in toc -->
|
||||
|
||||
**Translated Readme (using DeepTranslate, PRs are welcome)**:
|
||||
|
||||
[日本語による説明](./README-JP.md)
|
||||
|
||||
[中文说明](./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://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)
|
||||
|
||||
+28
-19
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
# 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
|
||||
@@ -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
|
||||
@@ -139,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 {
|
||||
|
||||
File diff suppressed because one or more lines are too long
+235
@@ -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
@@ -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
@@ -24,4 +24,4 @@ class MTB_Constant:
|
||||
return (kwargs.get("Value"),)
|
||||
|
||||
|
||||
__nodes__ = [MTB_Constant]
|
||||
# __nodes__ = [MTB_Constant]
|
||||
|
||||
+19
-1
@@ -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
@@ -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")
|
||||
|
||||
+1
-73
@@ -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.
|
||||
|
||||
|
||||
@@ -364,7 +293,6 @@ by default it fallsback to a default font.
|
||||
|
||||
|
||||
__nodes__ = [
|
||||
MTB_QrCode,
|
||||
MTB_UnsplashImage,
|
||||
MTB_TextToImage,
|
||||
# MtbExamples,
|
||||
|
||||
+8
-13
@@ -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))
|
||||
|
||||
|
||||
+444
-87
@@ -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,
|
||||
]
|
||||
|
||||
@@ -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]
|
||||
@@ -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]
|
||||
@@ -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,54 +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)
|
||||
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])]
|
||||
|
||||
return torch.from_numpy(
|
||||
np.array(image).astype(np.float32) / 255.0
|
||||
).unsqueeze(0)
|
||||
|
||||
def tensor2pil(tensor: torch.Tensor) -> list[Image.Image]:
|
||||
"""Converts a batch of tensors to a list of PIL Images."""
|
||||
|
||||
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 pil2tensor(images: Image.Image | list[Image.Image]) -> torch.Tensor:
|
||||
"""Converts a PIL Image or a list of PIL Images to a tensor."""
|
||||
|
||||
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(
|
||||
img_np: np.ndarray | list[np.ndarray[np.float32]],
|
||||
np_array: npt.NDArray[np.float32] | Sequence[npt.NDArray[np.float32]],
|
||||
) -> torch.Tensor:
|
||||
if isinstance(img_np, list):
|
||||
return torch.cat([np2tensor(img) for img in img_np], dim=0)
|
||||
"""Converts a NumPy array or a list of NumPy arrays to a tensor."""
|
||||
|
||||
return torch.from_numpy(img_np.astype(np.float32) / 255.0).unsqueeze(0)
|
||||
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[np.ndarray[np.float32]]:
|
||||
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 tensor2np(tensor: torch.Tensor) -> list[npt.NDArray[np.uint8]]:
|
||||
"""Converts a batch of tensors to a list of NumPy arrays."""
|
||||
|
||||
return [
|
||||
np.clip(255.0 * tensor.cpu().numpy().squeeze(), 0, 255).astype(
|
||||
np.uint8
|
||||
)
|
||||
]
|
||||
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):
|
||||
|
||||
+193
-90
@@ -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 || {}
|
||||
@@ -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,
|
||||
})
|
||||
@@ -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)) {
|
||||
|
||||
Vendored
+3
-3
File diff suppressed because one or more lines are too long
Vendored
-3
File diff suppressed because one or more lines are too long
+1095
-1089
File diff suppressed because it is too large
Load Diff
@@ -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
|
||||
|
||||
[](https://github.com/melMass/comfy_mtb/actions/workflows/test_embedded.yml)
|
||||
|
||||
|
||||
<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
@@ -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('>', '>').replaceAll('<', '<')
|
||||
// .replaceAll('&', '&')
|
||||
// .replaceAll('"', '"')
|
||||
// .replaceAll(''', "'")
|
||||
|
||||
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
Reference in New Issue
Block a user