fix: 🐛 category for settings

fix: 🐛 new UI issues
- Fixes the "edit icon cannot be clicked" - Changed the parser to add support for more non std markdown - Markdown links now always open a new tab instead of replacing current - New optional shiki support for code blocks (check #211 for details)
2024-11-20 21:35:07 +01:00 · 2024-11-18 01:53:04 +01:00 · 2024-11-18 01:32:29 +01:00 · 2024-11-18 00:48:04 +01:00 · 2024-11-18 00:45:53 +01:00 · 2024-10-10 02:13:13 +02:00
27 changed files with 3130 additions and 2227 deletions
@@ -1,93 +0,0 @@
 # 安装
 - [安装](#安装)
    - [自动安装（推荐）](#自动安装推荐)
    - [ComfyUI 管理器](#comfyui-管理器)
    - [虚拟环境](#虚拟环境)
  - [模型下载](#模型下载)
      - [网络扩展](#网络扩展)
    - [旧的安装方法 (MANUAL)](#旧的安装方法-manual)
    - [依赖关系](#依赖关系)
 ### 自动安装（推荐）
 ### ComfyUI 管理器
 从 0.1.0 版开始，该扩展将使用 [ComfyUI-Manager](https://github.com/ltdrdata/ComfyUI-Manager) 进行安装，这对处理各种环境下的各种安装问题大有帮助。
 ### 虚拟环境
 还有一种试验性的单行安装方法，即在 ComfyUI 根目录下使用以下命令进行安装。它将下载代码、安装依赖项并运行安装脚本：
 ```bash
 curl -sSL "https://raw.githubusercontent.com/username/repo/main/install.py" | python3 -
 ```
 ## 模型下载
 某些节点需要下载额外的模型，您可以使用与上述相同的 python 环境以交互方式完成下载：
 ```bash
 python scripts/download_models.py
 ```
 然后根据提示或直接按回车键下载每个模型。
 > **Note**
 > 您可以使用以下方法下载所有型号，无需提示：
  ```bash
  python scripts/download_models.py -y
  ```
 #### 网络扩展
 首次运行时，脚本会尝试将 [网络扩展](https://github.com/melMass/comfy_mtb/tree/main/web)链接到你的 "web/extensions "文件夹，[请参阅](https://github.com/melMass/comfy_mtb/blob/d982b69a58c05ccead9c49370764beaa4549992a/__init__.py#L45-L61)。
 <img alt="color widget preview" src="https://github.com/melMass/comfy_mtb/assets/7041726/cff7e66a-4cc4-4866-b35b-10af0bb2d110" width=450>
 ### 旧的安装方法 (MANUAL)
 ### 依赖关系
 <details><summary><h4>Custom Virtualenv（我主要用这个）</h4></summary
 1. 确保您处于用于 ComfyUI 的 Python 环境中。
 2. 运行以下命令安装所需的依赖项：
  ```bash
  pip install -r comfy_mtb/reqs.txt
  ```
 </details>
 <details><summary><h4>Comfy 便携式/单机版（来自 ComfyUI 版本）</h4></summary>
 如果您使用 ComfyUI 单机版中的 `python-embeded `，那么当二进制文件没有轮子时，您就无法使用 pip 安装二进制文件的依赖项，在这种情况下，请查看最近的 [发布](https://github.com/melMass/comfy_mtb/releases)，那里有一个预编译轮子的 linux 和 windows 捆绑包（只有那些需要从源代码编译的轮子），请查看 [此问题 (#1)](https://github.com/melMass/comfy_mtb/issues/1) 以获取更多信息。
 ![image](https://github.com/melMass/comfy_mtb/assets/7041726/2934fa14-3725-427c-8b9e-2b4f60ba1b7b)
 </details>
 <details><summary><h4>Google Colab</h4></summary>
 在 **Run ComfyUI with localtunnel (Recommended Way)** 标题之后（代码单元格之前）添加一个新的代码单元格
 ![preview of where to add it on colab](https://github.com/melMass/comfy_mtb/assets/7041726/35df2ef1-14f9-44cd-aa65-353829188cd7)
 ```python
 # download the nodes
 !git clone --recursive https://github.com/melMass/comfy_mtb.git custom_nodes/comfy_mtb
 # download all models
 !python custom_nodes/comfy_mtb/scripts/download_models.py -y
 # install the dependencies
 !pip install -r custom_nodes/comfy_mtb/reqs.txt -f https://download.openmmlab.com/mmcv/dist/cu118/torch2.0/index.html
 ```
 如果运行后 colab 抱怨需要重新启动运行时，请重新启动，然后不要重新运行之前的单元格，只运行运行本地隧道的单元格。(可能需要先添加一个包含 `%cd ComfyUI` 的单元格）
 > **Note**:
 > If you don't need all models, remove the `-y` as collab actually supports user input: ![image](https://github.com/melMass/comfy_mtb/assets/7041726/40fc3602-f1d4-432a-98fd-ce2240f5ad06)
 > **Preview**
 > ![image](https://github.com/melMass/comfy_mtb/assets/7041726/b5b2b2d9-f1e8-4c43-b1db-7dfc5e07be86)
 </details>
@@ -1,93 +0,0 @@
 # インストール
 - [インストール](#インストール)
  - [自動インストール (推奨)](#自動インストール-推奨)
    - [ComfyUI マネージャ](#comfyui-マネージャ)
    - [仮想環境](#仮想環境)
  - [モデルのダウンロード](#モデルのダウンロード)
    - [ウェブ拡張機能](#ウェブ拡張機能)
  - [旧インストール方法 (MANUAL)](#旧インストール方法-manual)
    - [依存関係](#依存関係)
 ## 自動インストール (推奨)
 ### ComfyUI マネージャ
 バージョン0.1.0では、この拡張機能は[ComfyUI-Manager](https://github.com/ltdrdata/ComfyUI-Manager)と一緒にインストールすることを想定しています。これは、様々な環境で直面する様々なインストール問題を処理するのに非常に役立ちます。
 ### 仮想環境
 また、ComfyUIのルートから以下のコマンドを使用する実験的なワンライナー・インストールもあります。これはコードをダウンロードし、依存関係をインストールし、インストールスクリプトを実行します：
 ```bash
 curl -sSL "https://raw.githubusercontent.com/username/repo/main/install.py" | python3 -
 ```
 ## モデルのダウンロード
 ノードによっては、追加モデルのダウンロードが必要な場合があるので、上記と同じ python 環境を使って対話的に行うことができる：
 ```bash
 python scripts/download_models.py
 ```
 プロンプトに従うか、Enterを押すだけで全てのモデルをダウンロードできます。
 > **Note**
 > プロンプトを出さずに全てのモデルをダウンロードするには、以下のようにします:
  ```bash
  python scripts/download_models.py -y
  ```
 ### ウェブ拡張機能
 初回実行時にスクリプトは[web extensions](https://github.com/melMass/comfy_mtb/tree/main/web)をあなたの快適な `web/extensions` フォルダに[シンボリックリンク](https://github.com/melMass/comfy_mtb/blob/d982b69a58c05ccead9c49370764beaa4549992a/__init__.py#L45-L61)しようとします。万が一失敗した場合は、mtbフォルダを手動で`ComfyUI/web/extensions`にコピーしてください：
 <img alt="color widget preview" src="https://github.com/melMass/comfy_mtb/assets/7041726/cff7e66a-4cc4-4866-b35b-10af0bb2d110" width=450>
 ## 旧インストール方法 (MANUAL)
 ### 依存関係
 <details><summary><h4>カスタム Virtualenv (私は主にこれを使っています)</h4></summary>
 1. ComfyUIで使用しているPython環境であることを確認してください。
 2. 以下のコマンドを実行して、必要な依存関係をインストールします：
  ```bash
  pip install -r comfy_mtb/reqs.txt
  ```
 </details> 
 <details><summary><h4>Comfy-portable / standalone (ComfyUI リリースより)</h4></summary>。
 もしあなたがComfyUIスタンドアロンから`python-embeded`を使用している場合、バイナリがホイールを持っていない場合、依存関係をpipでインストールすることができません。この場合、最後の[リリース](https://github.com/melMass/comfy_mtb/releases)をチェックしてください。(ソースからのビルドが必要なもののみ)あらかじめビルドされたホイールがあるlinuxとwindows用のバンドルがあります。詳細は[この問題(#1)](https://github.com/melMass/comfy_mtb/issues/1)をチェックしてください。
 ![image](https://github.com/melMass/comfy_mtb/assets/7041726/2934fa14-3725-427c-8b9e-2b4f60ba1b7b)
 </details>
 <details><summary><h4>Google Colab</h4></summary>
 ComfyUI with localtunnel (Recommended Way)**ヘッダーのすぐ後（コードセルの前）に、新しいコードセルを追加してください。
 ![colabに追加する場所のプレビュー](https://github.com/melMass/comfy_mtb/assets/7041726/35df2ef1-14f9-44cd-aa65-353829188cd7)
 ```python
 # download the nodes
 !git clone --recursive https://github.com/melMass/comfy_mtb.git custom_nodes/comfy_mtb
 # download all models
 !python custom_nodes/comfy_mtb/scripts/download_models.py -y
 # install the dependencies
 !pip install -r custom_nodes/comfy_mtb/reqs.txt -f https://download.openmmlab.com/mmcv/dist/cu118/torch2.0/index.html
 ```
 これを実行した後、colabがランタイムを再起動する必要があると文句を言ったら、それを実行し、それ以前のセルは再実行せず、localtunnelを実行するセルだけを再実行してください。(最初に`%cd ComfyUI`のセルを追加する必要があるかもしれません...)
 > **Note**:
 > すべてのモデルが必要でない場合は、`-y`を削除してください : ![image](https://github.com/melMass/comfy_mtb/assets/7041726/40fc3602-f1d4-432a-98fd-ce2240f5ad06)
 > **プレビュー**
 > ![image](https://github.com/melMass/comfy_mtb/assets/7041726/b5b2b2d9-f1e8-4c43-b1db-7dfc5e07be86)
 </details>
@@ -1,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 @@
 ![home](https://repository-images.githubusercontent.com/649047066/a3eef9a7-20dd-4ef9-b839-884502d4e873)
 <!-- omit in toc -->
 **Translated Readme (using DeepTranslate, PRs are welcome)**:  
 ![image](https://github.com/melMass/comfy_mtb/assets/7041726/f8429c14-3521-4e28-82a3-863d781976c0)
 [日本語による説明](./README-JP.md)  
 ![image](https://github.com/melMass/comfy_mtb/assets/7041726/d5cc1fdd-2820-4a5c-b2d7-482f1c222063)
 [中文说明](./README-CN.md)
 <a href="https://www.buymeacoffee.com/melmass" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 32px !important;width: 140px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
-[**Install Guide**](./INSTALL.md) | [**Examples**](https://github.com/melMass/comfy_mtb/wiki/Examples)
+[**Wiki**](https://github.com/melMass/comfy_mtb/wiki) | [**Install Guide**](./INSTALL.md) | [**Examples**](https://github.com/melMass/comfy_mtb/wiki/Examples)
 There is now a dedicated `#mtb-nodes` channel on the Banodoco discord:  
 [![](https://dcbadge.vercel.app/api/server/AXhsabmDhn?style=flat)](https://discord.gg/IAXhsabmDhn)
 ---
 Welcome to the MTB Nodes project! This codebase is open for you to explore and utilize as you wish. Its primary purpose is to build proof-of-concepts (POCs) for implementation in [MLOPs](https://github.com/Bismuth-Consultancy-BV/MLOPs). Many nodes in this project are inspired by existing community contributions or built-in functionalities.
 Before proceeding, please be aware of the licenses associated with certain libraries used in this project. For example, the `deepbump` library is licensed under [GPLv3](https://github.com/HugoTini/DeepBump/blob/master/LICENSE).
 - [Web Extensions](#web-extensions)
 - [Node List](#node-list)
  - [Animation](#animation)
  - [bbox](#bbox)
  - [colors](#colors)
  - [image ops](#image-ops)
  - [latent utils](#latent-utils)
  - [textures](#textures)
  - [misc utils](#misc-utils)
  - [Optional nodes](#optional-nodes)
    - [face detection / swapping](#face-detection--swapping)
    - [image interpolation (animation)](#image-interpolation-animation)
 - [Comfy Resources](#comfy-resources)
 # Web Extensions
 mtb add a few widgets like `COLOR`
 <img alt="color widget preview" src="https://github.com/melMass/comfy_mtb/assets/7041726/cff7e66a-4cc4-4866-b35b-10af0bb2d110" width=450>
 A few nodes have the concept of "dynamic" inputs:  
 <img alt="dynamic inputs" width=450  src="https://github.com/melMass/comfy_mtb/assets/7041726/10b3976e-b212-4968-91eb-f34c02bb80c3" />
 <!-- NOTE: Here it should just be some examples and warnings, move the rest to the wiki -->
 # Node List
 ## Animation
 - `Animation Builder`: Convenient way to manage basic animation maths at the core of many of my workflows (both worflows for the following GIFs are in the [examples](https://github.com/melMass/comfy_mtb/wiki/Examples))  
  **[Example lerping two conditions (blue car -> yellow car)](https://github.com/melMass/comfy_mtb/blob/main/examples/03-animation_builder-condition-lerp.json)**
  <img width=300 src="https://user-images.githubusercontent.com/7041726/260258970-d6d66d96-fb34-40d0-9038-cbabf0714c5d.gif"/>  
  **[Example using image transforms a feedback for a fake deforum effect](https://github.com/melMass/comfy_mtb/blob/main/examples/04-animation_builder-deforum.json)**
  <img width=300 src="https://user-images.githubusercontent.com/7041726/260261504-303a1037-60d3-4b31-a589-b15d549752f6.gif"/>
 - `Batch Float`: Generates a batch of float values with interpolation.
 - `Batch Shape`: Generates a batch of 2D shapes with optional shading (experimental).
 - `Batch Transform`: Transform a batch of images using a batch of keyframes.  
  <img width=400 src="https://github.com/melMass/comfy_mtb/assets/7041726/3f217de1-79aa-49b0-a66a-35cf29dd8f01"/>
 - `Export With Ffmpeg`: Export with FFmpeg, it used to be export to Proress and is still tailored for YUV
 - `Fit Number` : Fit the input float using a source and target range, you can also control the interpolation curve from a list of presets (default to linear)
 ## bbox
 - `Bounding Box`: BBox constructor (custom type),
 - `BBox From Mask`: From a mask extract the bounding box
 - `Crop`: Crop image from BBox
 - `Uncrop`: Uncrop image from BBox
 ## colors
 - `Colored Image`: Constant color image of given size
 - `RGB to HSV`: -,
 - `HSV to RGB`: -,
 - `Color Correct`: Basic color correction tools  
  <img src="https://github.com/melMass/comfy_mtb/assets/7041726/7c20ac83-31ff-40ea-a1a0-06c2acefb2ef" width=400/>
 ## image ops
 - `Blur`: Blur an image using a Gaussian filter.
 - `Deglaze Image`: taken from [FN16](https://github.com/Fannovel16/FN16-ComfyUI-nodes/blob/main/DeglazeImage.py),
 - `Denoise`: Denoise the input image,
 - `Image Compare`: Compare two images and return a difference image
 - `Image Premultiply`: Premultiply image with mask
 - `Image Remove Background Rembg`: [RemBG](https://github.com/danielgatis/rembg) powered background removal.  
  <img src="https://github.com/melMass/comfy_mtb/assets/7041726/e69253b4-c03c-45e9-92b5-aa46fb887be8" width=320/>
 - `Image Resize Factor`: Extracted mostly from [WAS Node Suite](https://github.com/WASasquatch/was-node-suite-comfyui), with a few edits (most notably multiple image support) and less features.
 - `Mask To Image`: Converts a mask (alpha) to an RGB image with a color and background
 - `Save Image Grid`: Save all the images in the input batch as a grid of images.
 ## latent utils
 - `Latent Lerp`: Linear interpolation (blend) between two latent 
 ## textures
 - `Model Patch Seamless`: Use the [seamless diffusion "hack"](https://gitlab.com/-/snippets/2395088) to patch any model to infere seamless images, check the [examples](https://github.com/melMass/comfy_mtb/wiki/Examples) to see how to use all those textures node together  
  <img width=500 src="https://user-images.githubusercontent.com/7041726/272970506-9db516b5-45d2-4389-b904-b3a94660f24c.png"/>
 - `DeepBump`: Normal & height maps generation from single pictures  
  <img width=500 src="https://user-images.githubusercontent.com/7041726/272970715-7e4477f6-8e18-4839-9864-83d07d6690a1.png"/>
 - `Image Tile Offset`: Mimics an old photoshop technique to check for seamless textures by offsetting tiles of the image.  
  <img width=600 src="https://github.com/melMass/comfy_mtb/assets/7041726/cbcc51fb-922f-433f-acf1-c6c6c2a7ffc4" />
 ## misc utils
 - `Any To String`: Tries to take any input and convert it to a string.
 - `Concat Images`: Takes two image stream and merge them as a batch of images supported by other Comfy pipelines.
 - `Image Resize Factor`: **Deprecated**, I since discovered the builtin image resize.
 - `Text To Image`: Utils to convert text to image using a font
 - `Styles Loader`: Load csv files and populate a dropdown from the rows (à la A111)  
  <img src="https://github.com/melMass/comfy_mtb/assets/7041726/02fe3211-18ee-4e54-a029-931388f5fde8" width=320/>
 - `Smart Step`: A very basic node to get step percent to use in KSampler advanced,
 - `Qr Code`: Basic QR Code generator
 - `Save Tensors`: Debug node that will probably be removed in the future
 - `Int to Number`: Supplement for WASSuite number nodes
 - `Smart Step`: A very basic tool to control the steps (start/stop) of the `KAdvancedSampler` using percentage
 - `Load Image From Url`: Load an image from the given URL
 ## 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)
@@ -1,22 +1,31 @@
 {
-    "$schema": "https://biomejs.dev/schemas/1.6.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.6.1/schema.json",
-    "organizeImports": {
+  "organizeImports": {
-        "enabled": true
+    "enabled": true
-    },
+  },
-    "linter": {
+  "linter": {
-        "enabled": true,
+    "enabled": true,
-        "rules": {
+    "rules": {
-            "recommended": true
+      "recommended": true,
-        }
+      "suspicious": {
-    },
+        "noConsoleLog": "warn"
-    "formatter": {
+      },
-        "lineEnding": "lf"
+      "style": {
-    },
+        "noParameterAssign": "off",
-    "javascript": {
+        "noShoutyConstants": "warn",
-        "formatter": {
+        "useNamingConvention": "off"
-            "quoteStyle": "single",
+      }
            "semicolons": "asNeeded",
            "indentWidth": 2
        }
    }
  },
  "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 {
@@ -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]
@@ -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 ""
@@ -24,4 +24,4 @@ class MTB_Constant:
        return (kwargs.get("Value"),)
-__nodes__ = [MTB_Constant]
+# __nodes__ = [MTB_Constant]
@@ -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]
@@ -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,4 +1,3 @@
 import qrcode
 from PIL import Image
 from ..log import log
@@ -113,76 +112,6 @@ class MTB_UnsplashImage:
            return (None,)
 class MTB_QrCode:
    """Basic QR Code generator"""
    @classmethod
    def INPUT_TYPES(cls):
        return {
            "required": {
                "url": ("STRING", {"default": "https://www.github.com"}),
                "width": (
                    "INT",
                    {"default": 256, "max": 8096, "min": 0, "step": 1},
                ),
                "height": (
                    "INT",
                    {"default": 256, "max": 8096, "min": 0, "step": 1},
                ),
                "error_correct": (("L", "M", "Q", "H"), {"default": "L"}),
                "box_size": (
                    "INT",
                    {"default": 10, "max": 8096, "min": 0, "step": 1},
                ),
                "border": (
                    "INT",
                    {"default": 4, "max": 8096, "min": 0, "step": 1},
                ),
                "invert": (("BOOLEAN",), {"default": False}),
            }
        }
    RETURN_TYPES = ("IMAGE",)
    FUNCTION = "do_qr"
    CATEGORY = "mtb/generate"
    def do_qr(
        self, url, width, height, error_correct, box_size, border, invert
    ):
        log.warning(
            "This node will soon be deprecated, there are much better alternatives like https://github.com/coreyryanhanson/comfy-qr"
        )
        if error_correct == "L" or error_correct not in ["M", "Q", "H"]:
            error_correct = qrcode.constants.ERROR_CORRECT_L
        elif error_correct == "M":
            error_correct = qrcode.constants.ERROR_CORRECT_M
        elif error_correct == "Q":
            error_correct = qrcode.constants.ERROR_CORRECT_Q
        else:
            error_correct = qrcode.constants.ERROR_CORRECT_H
        qr = qrcode.QRCode(
            version=1,
            error_correction=error_correct,
            box_size=box_size,
            border=border,
        )
        qr.add_data(url)
        qr.make(fit=True)
        back_color = (255, 255, 255) if invert else (0, 0, 0)
        fill_color = (0, 0, 0) if invert else (255, 255, 255)
        code = img = qr.make_image(
            back_color=back_color, fill_color=fill_color
        )
        # that we now resize without filtering
        code = code.resize((width, height), Image.NEAREST)
        return (pil2tensor(code),)
 def bbox_dim(bbox):
    left, upper, right, lower = bbox
    width = right - left
@@ -202,7 +131,7 @@ class MTB_TextToImage:
    fonts = {}
    DESCRIPTION = """# Text to Image
-This node look for any font files in comfy_dir/fonts.  
+This node look for any font files in comfy_dir/fonts.
 by default it fallsback to a default font.
 ![img](https://i.imgur.com/3GT92hy.gif)
@@ -364,7 +293,6 @@ by default it fallsback to a default font.
 __nodes__ = [
    MTB_QrCode,
    MTB_UnsplashImage,
    MTB_TextToImage,
    #  MtbExamples,
@@ -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:
+        except Exception as e:
-            try:
+            raise ValueError(
-                expression = expression.replace("^", "**")
+                f"Math expression only support literal_eval now: {e}"
-                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
        return (result, int(result))
@@ -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)
+        adjusted = self.gamma_correction_tensor(image, gamma)
-        image = self.contrast_adjustment_tensor(image, contrast)
+        adjusted = self.contrast_adjustment_tensor(adjusted, contrast)
-        image = self.exposure_adjustment_tensor(image, exposure)
+        adjusted = self.exposure_adjustment_tensor(adjusted, exposure)
-        image = self.offset_adjustment_tensor(image, offset)
+        adjusted = self.offset_adjustment_tensor(adjusted, offset)
-        image = self.hsv_adjustment(image, hue, saturation, value)
+        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):
+    def render_mask(self, mask, color, background, invert=False):
-        masks = tensor2np(mask)[0]
+        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):
+    def resize_and_crop(self, img: Image.Image, target_size: tuple[int, int]):
-        # Calculate scaling factors for both dimensions
+        scale = max(target_size[0] / img.width, target_size[1] / img.height)
        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
        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
+    def resize_and_crop_thumbnails(
-        left = (img.width - target_size[0]) / 2
+        self, img: Image.Image, target_size: tuple[int, int]
-        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):
        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,
+        color: str,
-        width,
+        width: int,
-        height,
+        height: int,
        foreground_image: torch.Tensor | None = None,
        foreground_mask: torch.Tensor | None = None,
-    ):
+        invert: bool = False,
-        image = Image.new("RGBA", (width, height), color=color)
+        mask_opacity: float = 1.0,
-        output = []
+    ) -> tuple[torch.Tensor]:
-        if foreground_image is not None:
+        background = Image.new("RGBA", (width, height), color=color)
            fg_masks = [None] * foreground_image.size()[0]
-            if foreground_mask is not None:
+        if foreground_image is None:
-                fg_size = foreground_image.size()[0]
+            return (pil2tensor([background.convert("RGB")]),)
                mask_size = foreground_mask.size()[0]
-                if fg_size == 1 and mask_size > fg_size:
+        fg_images = tensor2pil(foreground_image)
-                    foreground_image = foreground_image.repeat(
+        fg_masks = self.process_mask(foreground_mask, invert, len(fg_images))
                        mask_size, 1, 1, 1
                    )
-                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)
+        return (pil2tensor(output),)
            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,)
 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]:
+def to_numpy(image: torch.Tensor) -> npt.NDArray[np.uint8]:
-    batch_count = image.size(0) if len(image.shape) > 3 else 1
+    """Converts a tensor to a ndarray with proper scaling and type conversion."""
-    if batch_count > 1:
+    log.debug(f"Converting tensor to numpy array with shape {image.shape}")
-        out = []
+    np_array = np.clip(255.0 * image.cpu().numpy(), 0, 255).astype(np.uint8)
-        for i in range(batch_count):
+    log.debug(f"Numpy array shape after conversion: {np_array.shape}")
-            out.extend(tensor2pil(image[i]))
+    return np_array
        return out
    return [
        Image.fromarray(
            np.clip(255.0 * image.cpu().numpy().squeeze(), 0, 255).astype(
                np.uint8
            )
        )
    ]
-def pil2tensor(image: Image.Image | list[Image.Image]) -> torch.Tensor:
+def handle_batch(
-    if isinstance(image, list):
+    tensor: torch.Tensor,
-        return torch.cat([pil2tensor(img) for img in image], dim=0)
+    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
+def tensor2pil(tensor: torch.Tensor) -> list[Image.Image]:
-    ).unsqueeze(0)
+    """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):
+    """Converts a NumPy array or a list of NumPy arrays to a tensor."""
        return torch.cat([np2tensor(img) for img in img_np], dim=0)
-    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]]:
+def tensor2np(tensor: torch.Tensor) -> list[npt.NDArray[np.uint8]]:
-    batch_count = tensor.size(0) if len(tensor.shape) > 3 else 1
+    """Converts a batch of tensors to a list of NumPy arrays."""
    if batch_count > 1:
        out = []
        for i in range(batch_count):
            out.extend(tensor2np(tensor[i]))
        return out
-    return [
+    def single_tensor2np(t: torch.Tensor) -> npt.NDArray[np.uint8]:
-        np.clip(255.0 * tensor.cpu().numpy().squeeze(), 0, 255).astype(
+        t = t.squeeze()  # Remove any singleton dimensions
-            np.uint8
+        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):
@@ -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 {NodeType} nodeType The nodetype to attach the documentation to
- * @param {str} prefix
+ * @param {str} prefix A prefix added to each dynamic inputs
- * @param {str | [str]} inputType
+ * @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
+      // wrapper.innerHTML = documentationConverter.makeHtml(nodeData.description)
      resizeHandle = document.createElement('div')
      resizeHandle.style.width = '0'
      resizeHandle.style.height = '0'
      resizeHandle.style.position = 'absolute'
      resizeHandle.style.bottom = '0'
      resizeHandle.style.right = '0'
-      resizeHandle.style.cursor = 'se-resize'
+      ensureMarkdownParser().then(() => {
-      resizeHandle.style.userSelect = 'none'
+        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.cursor = 'se-resize'
-      resizeHandle.style.borderStyle = 'solid'
+          resizeHandle.style.userSelect = 'none'
-      resizeHandle.style.borderColor =
+          resizeHandle.style.borderWidth = '15px'
-        'transparent var(--border-color) var(--border-color) transparent'
+          resizeHandle.style.borderStyle = 'solid'
-      wrapper.appendChild(resizeHandle)
+          resizeHandle.style.borderColor =
-      let isResizing = false
+            'transparent var(--border-color) var(--border-color) transparent'
-      let startX
+          wrapper.appendChild(resizeHandle)
-      let startY
+          let isResizing = false
      let startWidth
      let startHeight
-      resizeHandle.addEventListener(
+          let startX
-        'mousedown',
+          let startY
-        (e) => {
+          let startWidth
-          e.stopPropagation()
+          let startHeight
-          isResizing = true
+
-          startX = e.clientX
+          resizeHandle.addEventListener(
-          startY = e.clientY
+            'mousedown',
-          startWidth = Number.parseInt(
+            (e) => {
-            document.defaultView.getComputedStyle(docElement).width,
+              e.stopPropagation()
-            10,
+              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,
+          document.addEventListener(
-            10,
+            '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(
-      )
+            'mouseup',
-
+            () => {
-      document.addEventListener(
+              isResizing = false
-        'mousemove',
+            },
-        (e) => {
+            { signal: this.docCtrl.signal },
-          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 },
      )
    } 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`,
+        left: `${transform.a + rect.x + transform.e}px`,
-        top: `${transform.d + transform.f}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)) {
@@ -0,0 +1,246 @@
 // web/note_plus.constants.js
 export const DEFAULT_CSS = ''
 export const DEFAULT_HTML = `<p style='color:red;font-family:monospace'>
    Note+
 </p>`
 export const DEFAULT_MD = '## Note+'
 export const DEFAULT_MODE = 'markdown'
 export const DEFAULT_THEME = 'one_dark'
 export const DEMO_CONTENT = `
 # @mtb/svelte-markdown.
 ## This is a subheader
 [![embedded test](https://github.com/melMass/comfy_mtb/actions/workflows/test_embedded.yml/badge.svg)](https://github.com/melMass/comfy_mtb/actions/workflows/test_embedded.yml)
 ![home](https://repository-images.githubusercontent.com/649047066/a3eef9a7-20dd-4ef9-b839-884502d4e873)
 <details>
 <summary>More details about the inception of the project</summary>
 \`\`\`js
 class YesMan{
  constructor(){
    this.started = false
  }
 }
 \`\`\`
 </details>
 This is a paragraph. If it goes over the maximum width it will not automatically wrap unless it reaches the max-w of \`prose\` check [styles](/styles) for more info.
 This component is useful for building some tools on top. Or even just a static system using svelte at its core. My personal blog is fully powered by **@mtb/svelte-markdown**
 | And this is | A table |
 |-------------|---------|
 | With two    | columns |
 We also support github callout:
 > [!NOTE]
 > Highlights information that users should take into account, even when skimming.
 > [!TIP]
 > Optional information to help a user be more successful.
 > [!IMPORTANT]
 > Crucial information necessary for users to succeed.
 > [!WARNING]
 > Critical content demanding immediate user attention due to potential risks.
 > [!CAUTION]
 > Negative potential consequences of an action.
 `
 export const THEMES = [
 	'ambiance',
 	'chaos',
 	'chrome',
 	'cloud9_day',
 	'cloud9_night',
 	'cloud9_night_low_color',
 	'cloud_editor',
 	'cloud_editor_dark',
 	'clouds',
 	'clouds_midnight',
 	'cobalt',
 	'crimson_editor',
 	'dawn',
 	'dracula',
 	'dreamweaver',
 	'eclipse',
 	'github',
 	'github_dark',
 	'gob',
 	'gruvbox',
 	'gruvbox_dark_hard',
 	'gruvbox_light_hard',
 	'idle_fingers',
 	'iplastic',
 	'katzenmilch',
 	'kr_theme',
 	'kuroir',
 	'merbivore',
 	'merbivore_soft',
 	'mono_industrial',
 	'monokai',
 	'nord_dark',
 	'one_dark',
 	'pastel_on_dark',
 	'solarized_dark',
 	'solarized_light',
 	'sqlserver',
 	'terminal',
 	'textmate',
 	'tomorrow',
 	'tomorrow_night',
 	'tomorrow_night_blue',
 	'tomorrow_night_bright',
 	'tomorrow_night_eighties',
 	'twilight',
 	'vibrant_ink',
 	'vscode',
 ]
 export const CSS_RESET = `
 * {
  font-family: monospace;
  line-height: 1.25em;
 }
 .shiki{
    padding: 1em;
    width: 100%;
 }
 .markdown-callout-title {
    .octicon{
        fill:white;
    }
 	/* background: var(--current-color); */
 	color: var(--current-color);
 	font-weight: bold;
 	/* border-start-end-radius: var(--radius); */
 	/* border-start-start-radius: var(--radius); */
 	padding: 0.5em;
 	padding-inline-start: 1em;
 }
 .markdown-callout-content {
 	padding: 1em;
 }
 .markdown-callout {
 	--radius: 8px;
 	--current-color: purple;
 	/* border-start-end-radius: var(--radius); */
 	/* border-start-start-radius: var(--radius); */
 	border-left: 3px solid var(--current-color);
 	margin-bottom: 1em;
 	margin-top: 1em;
 }
 .markdown-callout-tip {
 	--text-color: whitesmoke;
 	--current-color: #50e3c2;
 }
 .markdown-callout-note {
 	--text-color: whitesmoke;
 	--current-color: #0070f3;
 }
 .markdown-callout-important {
 	--text-color: whitesmoke;
 	--current-color: #7928ca;
 }
 .markdown-callout-warning {
 	--current-color: #f5a623;
 }
 .markdown-callout-caution {
 	--current-color: #e60000;
 }
 .note-plus-preview {
  display:flex;
  flex-direction:column;
  align-items: flex-start;
  width:95%;
  margin-left: 20px;
  margin-top:20px;
  /*background-color: rgba(255,0,0,0.5)!important;*/
 }
 /* allowed to be selected*/
 h1, h2, h3, h4, h5, h6,a, p, ul, ol, dl, blockquote,details,summary  {
  pointer-events:auto;
  user-select:text;
 }
 h1, h2, h3, h4, h5, h6 {
  display:inline-block;
  margin: 0;
  padding: 0;
  font-weight: normal;
 }
 p, ul, ol, dl, blockquote {
  margin: 0.3em;
  padding: 0;
 }
 ul, ol {
  padding-left: 1em;
 }
 a {
  color: inherit;
  text-decoration: none;
  pointer-events: all;
  color: cyan;
 }
 img {
  padding: 1em 0;
  max-width: 100%;
 }
 iframe {
  max-width: 100%;
  height: auto;
  border:none;
  pointer-events:all;
 }
 blockquote {
  border-left: 4px solid #ccc;
  padding-left: 1em;
  margin-left: 0;
  font-style: italic;
 }
 pre, code {
  font-family: monospace;
 }
 table {
  border-collapse: collapse;
  width: 100%;
  border-bottom: 1px solid #000;
  margin: 1em 0;
 }
 th, td {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  padding: 8px;
  text-align: left;
 }
 th {
  border: 1px solid #000;
  background-color: rgba(0,0,0,0.5);
 }
 input[type="checkbox"] {
  margin-right: 10px;
 }
 `
@@ -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 storage = new LocalStorageManager('mtb')
 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 CSS_RESET = `
+/**
-* {
+ * Uses `@mtb/markdown-parser` (a fork of marked)
-  font-family: monospace;
+ * It is statically stored to avoid having
-  line-height: 1.25em;
+ * 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 {
+const makeDraggable = (dialog, handle) => {
-  margin: 0;
+  let offsetX = 0
-  padding: 0;
+  let offsetY = 0
-  font-weight: normal;
+  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 {
+/** @extends {LGraphNode} */
  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',
 ]
 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')
+    const cinner = document.createElement('div')
-    inner.style.margin = '0'
+    this.inner = document.createElement('div')
-    inner.style.padding = '0'
+
-    inner.style.pointerEvents = 'none'
+    cinner.append(this.inner)
-    this.html_widget = this.addDOMWidget('HTML', 'html', 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 canvas context
-   * @param {CanvasRenderingContext2D} ctx
+   * @param {any} _graphcanvas
   * @param {LGraphCanvas} graphcanvas
   * @returns
   */
  onDrawForeground(ctx, _graphcanvas) {
    if (this.flags.collapsed) return
    this.drawEditIcon(ctx)
    this.drawSideHandle(ctx)
-    // Define the size and position of the icon
+    // DEBUG BACKGROUND
-    const iconSize = 14 // Size of the icon
+    // ctx.fillStyle = 'rgba(0, 255, 0, 0.3)'
-    const iconMargin = 8 // Margin from the edges
+    // const rect = this.rect
-    const x = this.size[0] - iconSize - iconMargin
+    // ctx.fillRect(rect.x, rect.y, rect.width, rect.height)
-    const y = iconMargin * 1.5
+  }
  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.translate(rect.x, rect.y)
-    ctx.scale(iconSize / 32, iconSize / 32) // Scale the icon to the desired size
+    ctx.scale(rect.width / 32, rect.height / 32)
-    ctx.strokeStyle = 'rgba(255,255,255,0.3)'
+    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
+   * @param {number} x
-    const iconSize = 14
+   * @param {number} y
-    const iconMargin = 8
+   * @param {{x:number,y:number,width:number,height:number}} rect
-    const iconX = this.size[0] - iconSize - iconMargin
+   * @returns {}
-    const iconY = iconMargin * 1.5
+   */
-
+  inRect(x, y, rect) {
-    if (
+    rect = rect || this.iconRect
-      localPos[0] > iconX &&
+    return (
-      localPos[0] < iconX + iconSize &&
+      x >= rect.x &&
-      localPos[1] > iconY &&
+      x <= rect.x + rect.width &&
-      localPos[1] < iconY + iconSize
+      y >= rect.y &&
-    ) {
+      y <= rect.y + rect.height
-      // Pencil icon was clicked, open the editor
+    )
-      this.openEditorDialog()
+  }
-      return true // Return true to indicate the event was handled
+  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')
+    this.editorsContainer = document.createElement('div')
-    Object.assign(editorsContainer.style, {
+
    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',
+      width: '100%',
-      height: '300px',
+      height: '100%',
-      // backgroundColor: 'rgb(30,30,30)',
+
-      // color: 'whitesmoke',
+      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',
+      width: '100%',
-      height: '300px',
+      height: '100%',
-      // backgroundColor: 'rgb(30,30,30)',
+      minHeight: 'inherit',
      // color: 'whitesmoke',
    })
-    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)
+            MTB.mdParser.parse(md).then((content) => {
-            this.html_widget.value = html
+              this.html_widget.value = content
-            this.html_editor.setValue(html)
+              this.html_editor.setValue(content)
-            this.html_editor.session.setMode('ace/mode/html')
+              this.html_editor.session.setMode('ace/mode/html')
-            this.updateHTML(this.html_widget.value)
+              this.updateHTML(this.html_widget.value)
-
+              convert_to_html.remove()
-            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) {
+  restoreNodeState(info) {
    super.configure(info)
    infoLogger('Restoring serialized values', info)
    // - update view from serialzed data
    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.restoreNodeState({})
-    this.setMode(this.edit_mode_widget.value)
+    // this.html_widget.element.id = `note-plus-${this.uuid}`
-    this.setTheme(this.theme_widget.value)
+    // this.setMode(this.edit_mode_widget.value)
-    this.updateHTML(this.html_widget.value) // widget is populated here since we called super
+    // this.setTheme(this.theme_widget.value)
-    this.updateCSS(this.css_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 = []
+    const currentMode = this.edit_mode_widget.value
-    // {
+    const newMode = currentMode === 'html' ? 'markdown' : 'html'
    //       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)
      },
    })
-    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) {
+  parserInitiated() {
-    const cleanHTML = DOMPurify.sanitize(val, { ADD_TAGS: ['iframe'] })
+    if (window.MTB?.mdParser) return true
-    this.html_widget.value = cleanHTML
+    return false
  }
-    // update our widget preview
+  /** to easilty swap purification methods*/
-    if (this.edit_mode_widget.value === 'html') {
+  purify(content) {
-      this.html_widget.element.innerHTML = cleanHTML
+    return DOMPurify.sanitize(content, {
-    } else if (this.edit_mode_widget.value === 'markdown') {
+      ADD_TAGS: ['iframe', 'detail', 'summary'],
-      this.html_widget.element.innerHTML =
+    })
-        this.markdownConverter.makeHtml(cleanHTML)
+  }
  updateHTML(val) {
    if (!this.parserInitiated()) {
      return
    }
    val = val || this.html_widget.value
    const isHTML = this.edit_mode_widget.value === 'html'
    const cleanHTML = this.purify(val)
    const value = isHTML
      ? cleanHTML
      : cleanHTML.replaceAll('&gt;', '>').replaceAll('&lt;', '<')
    // .replaceAll('&amp;', '&')
    // .replaceAll('&quot;', '"')
    // .replaceAll('&#039;', "'")
    this.html_widget.value = value
    if (isHTML) {
      this.inner.innerHTML = value
    } else {
      MTB.mdParser.parse(value).then((e) => {
        this.inner.innerHTML = e
      })
    }
    // this.html_widget.element.innerHTML = `<div id="note-plus-spacer"></div>${value}`
    this.calculateHeight()
    // this.setSize(this.computeSize())
  }
@@ -681,6 +797,27 @@ class NotePlus extends LiteGraph.LGraphNode {
 app.registerExtension({
  name: 'mtb.noteplus',
  setup: () => {
    app.ui.settings.addSetting({
      id: 'mtb.noteplus.use-shiki',
      category: ['mtb', 'Note+', 'use-shiki'],
      name: 'Use shiki to highlight code',
      tooltip:
        'This will load a larger version of @mtb/markdown-parser that bundles shiki, it supports all shiki transformers (supported langs: html,css,python,markdown)',
      type: 'boolean',
      defaultValue: false,
      attrs: {
        style: {
          // fontFamily: 'monospace',
        },
      },
      async onChange(value) {
        storage.set('np-use-shiki', value)
        useShiki = value
      },
    })
  },
  registerCustomNodes() {
    LiteGraph.registerNodeType('Note Plus (mtb)', NotePlus)
Author	SHA1	Message	Date
Mel Massadian	d576190f07	fix: 🐛 category for settings	2024-11-20 21:35:07 +01:00
Mel Massadian	247ad12ec3	fix: 🐛 new UI issues - Fixes the "edit icon cannot be clicked" - Changed the parser to add support for more non std markdown - Markdown links now always open a new tab instead of replacing current - New optional shiki support for code blocks (check #211 for details)	2024-11-18 01:53:04 +01:00
Mel Massadian	881573e2f2	feat: ✨ use the new parser for documentations - might also fix #210	2024-11-18 01:32:29 +01:00
Mel Massadian	6f3a5b5c71	feat: ✨ add @mtb/markdown-parser bundles - the standard one is half the size of showdown - the enhanced one (add shiki with most of its features) is 1.5mb	2024-11-18 00:48:04 +01:00
Mel Massadian	fa017fbb81	chore: 🧹 update externs - remove showdown - update dompurify	2024-11-18 00:45:53 +01:00
Chenlei Hu	dbcca15a21	fix 🐛: input type on MTB_AnyToString (#204 )	2024-10-10 02:13:13 +02:00
Mel Massadian	bc41576fac	docs 📚: fix wiki link closes #202	2024-09-29 00:57:44 +02:00
Mel Massadian	8596b8184e	fix: 🐛 disable old BOOL widget (legacy) This can break if a pack declares a BOOL type fixes #201	2024-09-27 13:33:01 +02:00
Mel Massadian	896a025006	feat: ✨ add VitMatte nodes Basic implementation hardcoded for cuda https://huggingface.co/melmass/pytorch-scripts	2024-09-22 00:16:23 +02:00
Mel Massadian	43092e44a4	fix: 🐛 pass ONNX providers explicitely see #199	2024-09-08 19:58:35 +02:00
bymyself	80b5a0ca74	fix: 🐛 typo in mtb_widgets error catch (#197 )	2024-09-05 14:50:48 +02:00
Mel Massadian	81b3bc1651	fix: 🐛 doc widget sidebar offset in the new ui	2024-08-18 14:26:02 +02:00
Mel Massadian	a825504bdd	chore: 🧹 add pathlibed inputs to utils	2024-08-18 14:07:42 +02:00
Mel Massadian	22190cd25e	chore: 🧹 disable Constant Removing as this doesn't work without my PR	2024-08-16 00:03:25 +02:00
Mel Massadian	a976adbb39	chore: 🧹 new ui is default, flag for old ui	2024-08-16 00:02:18 +02:00
Mel Massadian	997d2fb13a	fix: 🐛 don't fallback to eval addresses legitimate concerns raised in #190 This limits the use a bit, SimpleMath from: https://github.com/cubiq/ComfyUI_essentials Is a better alternative	2024-08-08 22:34:03 +02:00
Mel Massadian	f8829fcb37	chore: 🧹 add methods to shared	2024-08-08 16:57:10 +02:00
Mel Massadian	9651a70341	feat: ✨ add ColorCorrectGPU Alternative to my ColorCorrect using only torch. Also added Mask input for both (optional so this is not a breaking change)	2024-08-01 19:33:13 +02:00
Mel Massadian	57683c3c7d	feat: ✨ add Swap FG/BG colors to MaskToImage	2024-08-01 18:38:58 +02:00
Mel Massadian	f99f92e8f7	feat: ✨ add Extract coordinates wip meant mainly for SAM2	2024-08-01 18:36:12 +02:00
Mel Massadian	5bc125d2f0	docs: 📚 remove link still in issues	2024-08-01 17:32:23 +02:00
Mel Massadian	c99b0812ab	fix: 🐛 rework main utils A whole gymnastic because comfy masks are (B,H,W). maybe unsqueezing first is better but some nodes seems to still output (B,H,W,C), IIRC there is an upstream PR about that	2024-08-01 17:31:18 +02:00
Mel Massadian	333f646ab1	docs: 📚 clean readme	2024-08-01 17:28:33 +02:00
Mel Massadian	dbdf27664c	chore: 🧹 add an old_ui flag to my launcher this is dev related to easily test both UIs see: https://github.com/melMass/CosyVoice-ComfyUI/commit/29510c36f0f8c1e4e5209148d14fe038947728c1	2024-07-31 04:59:36 +02:00
Mel Massadian	7d5569e5c1	chore: 🧹 move qrcode to his own file Each files in `./nodes` can fail, but this means all nodes in the file are skipped... `Generate` has "too important" nodes to fail and doesn't require any extra dependencies. This change allow qrcode to fail on its own	2024-07-31 04:59:17 +02:00
Mel Massadian	5681b464ad	feat: ✨ add AudioCut and make AudioSequence able to get negative "silence" which would effectively "overlap" the joining sections	2024-07-31 04:42:40 +02:00
Mel Massadian	8d0fcee2f3	feat: ✨ add AudioStack To stack/overlay audios.	2024-07-28 20:11:31 +02:00
Mel Massadian	1078fc6f0f	feat: ✨ add AudioSequence node	2024-07-28 17:20:01 +02:00
Mel Massadian	821a0ef427	fix: 🐛 MaskToImage also remove style debug	2024-07-07 20:40:18 +02:00
Mel Massadian	9007a70aa0	feat: ✨ add Split Bbox node	2024-07-06 18:30:14 +02:00
Mel Massadian	1a0ebd5173	feat: ✨ update lerp example	2024-07-06 18:26:45 +02:00
`@@ -24,4 +24,4 @@ class MTB_Constant:`
	`return (kwargs.get("Value"),)`	`return (kwargs.get("Value"),)`


	`__nodes__ = [MTB_Constant]`	`# __nodes__ = [MTB_Constant]`