高火力 DOKの「ノートブック」機能を使ってComfyUIをngrokで接続する

## はじめに
ComfyUIを高火力 DOKの「ノートブック」機能を利用し、ngrokを使って接続できるようにするメモです。

今回は高火力 DOKを使用します。
高火力 DOKは、さくらインターネットが提供するコンテナ型GPUサービスです。
https://www.sakura.ad.jp/koukaryoku-dok/

## 前提
- 高火力 DOKのアカウントを持っている
    - [サービスを使い始めるには](https://manual.sakura.ad.jp/cloud/koukaryoku-container/getting-started.html#id11)
- ngrokのアカウントを持っている(無料プラン可)
  - https://ngrok.com/


## ngrokのトークンを取得
ngrokを利用するには、トークンが必要です。以下の手順で取得します。

https://dashboard.ngrok.com/ にアクセスし、サイドバーのYour Authtokenを選択します。
中央にあるYour Authtokenをメモしておきましょう。
![ngrok token.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282233/e1e53444-5485-62bb-c520-71a3fa8fab18.png)


## 高火力DOK
### 「ノートブック」の起動

[ノートブックの利用方法](https://manual.sakura.ad.jp/cloud/koukaryoku-container/how-to-use-jupyter.html)を参考にノートブック（JupyterLab）を起動し外部から接続できるようにします。

高火力 DOKのダッシュボードにアクセスし、
サイドバーから「ノートブック」を選択したのち「起動」を選択します。
![dok tasks.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282233/cc97bb7d-385b-49f2-9745-7bacb96c50ef.png)

「起動」を選択し、JupyterLabが起動するまで待ちます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282233/c2f5a741-0964-444a-a7bb-848ea40e3197.png" width=50%>

「開く」を選択するとJupyterLabにアクセスできます。
※起動するまで3分程度かかる場合があるようです。
![jupyterlab open.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282233/96e1dc09-4de4-4673-b21c-1b08d913c7f0.png)


Jupyter NotebookにアクセスできたらNotebookの`Python 3(ipykernel)`を選択します
![dok notebook.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282233/2f592554-3fde-a050-15f7-8c47b8cb4f3f.png)


### ComfyUIの起動
以下コードを順番に実行します。
- pyngrokのインストール
```
!pip install pyngrok
```
![pyngrok.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282233/e4a0d293-dad5-48a2-bce4-51fbb998bcc3.png)

- ComfyUIをgitからDLし、必要なパッケージのインストール
```
!git clone https://github.com/comfyanonymous/ComfyUI.git
%cd ~/ComfyUI
!pip install -r requirements.txt
```
![clone ComfyUI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282233/00d3ef0e-6c78-4c7f-9eb6-d5dd1c6f7c5b.png)

- ComfyUI ManagerをgitからDLし、必要なパッケージのインストール
```
%cd ~/ComfyUI/custom_nodes
!git clone https://github.com/Comfy-Org/ComfyUI-Manager.git comfyui-manager
%cd ~/ComfyUI/custom_nodes/comfyui-manager
!pip install -r requirements.txt
```
![clone ComfyUI Manager.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282233/0b2cca8c-b16a-4ef0-b57d-04dc4b2d00fe.png)

- ディレクトリの移動と成果物保存場所の変更
```
%cd ~/ComfyUI
!rm -rf ~/ComfyUI/output
!ln -vs /opt/artifact ~/ComfyUI/output
```

- 【任意】モデルのDL 
※`#(コメントアウト)`を外して実行する
```
# !curl -Lo "/home/jovyan/ComfyUI/models/checkpoints/v1-5-pruned-emaonly-fp16.safetensors" "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly-fp16.safetensors"
```

- ComfyUIの起動
```
ngrok_token="ngrokで取得したトークン"

from threading import Thread
from pyngrok import ngrok
import subprocess

def start_ngrok(port, token):
    ngrok.set_auth_token(token)
    url = ngrok.connect(port)
    print(f"ngrok tunnel started at: {url}")

# ngrok 起動（非同期）
ngrok_thread = Thread(target=start_ngrok, args=(8188, ngrok_token))
ngrok_thread.start()

!python main.py --preview-method auto --enable-cors-header --use-pytorch-cross-attention
```
![start ComfyUI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282233/5e399509-a9cf-479c-bd7d-5247bf435894.png)

起動すると
`ngrok tunnel started at: NgrokTunnel: "https://xxxx.ngrok-free.app" -> "http://localhost:8188"`
と表示されるので、スタートアップタスクが完了したらURLをクリックします。

![ngrok.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282233/f0001a62-d606-4a60-885c-c4b7686485fa.png)


URLに飛んだら「Visit site」をクリックします。
![dok visit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282233/8697c8ef-e1fe-c43d-3df0-78cf70bfb18b.png)

ComfyUIが開きます Yatta!!!
![ComfyUI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282233/75c2c919-53bd-48e8-bda1-9a4d0079d3a3.png)


### 終わるとき
:::note warn
停止を忘れると従量課金されていくので忘れずに停止しましょう
:::
高火力 DOKのダッシュボードにアクセスし、
サイドバーから「ノートブック」を選択したのち、「終了」を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282233/a1032302-8d80-48de-ae33-957329db4ab6.png" width=50%>
ポップアップにて「終了」を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282233/c76c4341-0e79-494f-9db9-288193d9f66d.png" width=50%>

### 成果物について
生成した画像などの成果物は高火力 DOKのダッシュボードからダウンロードすることもできます。(期限付き)
![dok artifact.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282233/8433e97d-68a1-9268-cbc5-a4ccf4c15c38.png)

## まとめ
この記事では、高火力 DOKの「ノートブック」機能を使ってComfyUIをngrokで接続する手順を説明しました。

ここまで読んでいただきありがとうございました

## 参考文献
[高火力 DOK ドキュメント](https://manual.sakura.ad.jp/cloud/manual-koukaryoku-container.html)
[ComfyUI-notebook-for-SageMaker-Studio-Lab](https://github.com/Laft02/ComfyUI-notebook-for-SageMaker-Studio-Lab)