Move delete button to right and add go to top

Add basic model downloader

.github/ISSUE_TEMPLATE/new-workflow-repository.md

@@ -0,0 +1,11 @@
+---
+name: New workflow repository
+about: new workflow repository
+title: 'New workflow repo:'
+labels: workflow-repo
+assignees: tzwm
+
+---
+
+My workflow repository link:
+Description:

.gitignore

@@ -1,3 +1,5 @@
 config.json
+__pycache__/
 collections/
 sources/
+download_logs/

CHANGELOG.md

@@ -1,5 +1,24 @@
 # ChangeLog
 
+## v1.5.3 - 2023-12-23
+
+- Merge the same name JSON and media file in the same directory
+
+## v1.5.2 - 2023-12-20
+
+- Support resize the modal
+- Remember the last Tab select
+
+## v1.5.1 - 2023-12-20
+
+- Add Side/Center toggle
+- Update styles for responsive
+
+## v1.5.0 - 2023-12-15
+
+- Update styles
+- Add recommend sources
+
 ## v1.4.0 - 2023-12-13
 
 - Add 'Sources' tab to subscribe external workflow git repository

README.md

@@ -1,26 +1,28 @@
 # ComfyUI Browser
 
+[中文说明](README_CN.md)
+
 This is an image/video/workflow browser and manager for ComfyUI.
 You can sync your workflows to a remote Git repository and use them everywhere.
 
+Welcome to submit your workflow source by submitting [an issue](https://github.com/talesofai/comfyui-browser/issues/new?assignees=tzwm&labels=workflow-repo&projects=&template=new-workflow-repository.md&title=New+workflow+repo%3A). Let's build the workflows together.
+
+https://github.com/talesofai/comfyui-browser/assets/828837/803ce57a-1cf2-4e1c-be17-0efab401ef54
 
 ## Features
 
 - Browse and manage your images/videos/workflows in the output folder.
-- Add your workflows to the collection so that you can switch and manage them more easily.
-- Sync your collection anywhere by Git.
-- [DOING] Clone public workflow by Git and load them more easily.
-
+- Add your workflows to the 'Saves' so that you can switch and manage them more easily.
+- Sync your 'Saves' anywhere by Git.
+- Subscribe workflow sources by Git and load them more easily.
+- Search your workflow by keywords.
 
 ## Preview
 
-![e08f52dacabad159519d0d0efb87de9d7118e17dd08f8064cb90b2d59a9278da](https://github.com/tzwm/comfyui-browser/assets/828837/46c03aec-1047-4890-8d28-509448a14e02)
-
-![6362bea4c745d845728f4885fd3fe5092f15dcc00e0f01790fe843e1cdf4777e](https://github.com/tzwm/comfyui-browser/assets/828837/41b793c3-05eb-447e-8f14-993187a2c906)
-
-[comfyui_browser_demo_simple_231210.webm](https://github.com/tzwm/comfyui-browser/assets/828837/1eb67a5c-a40d-4b34-af78-687c05478639)
-
-
+![b359de5f6556649512e7ed8f812ba67d444be9914173e2467018450ce1a3ce1d](https://github.com/talesofai/comfyui-browser/assets/828837/4b0b0f4c-28a8-49ef-98c2-d293df5b7747)
+![c91157bf819ef5b9a129976d9e45588106dd6c7ea39ecb0a22519acd72afc7ce](https://github.com/talesofai/comfyui-browser/assets/828837/ee3df970-017c-4825-ab5d-9465cdb77ed6)
+![53053f43847da9597efebab207140eed703b8c7bbe8eb1e63ce5630b5d8c9a3f](https://github.com/talesofai/comfyui-browser/assets/828837/4acb522a-f21c-47ad-9a23-56b08c6e73a5)
+![c7b93b2ec0891eb7cac1385505e855fb28934ec958f7b21cac53c9bf18e6136c](https://github.com/talesofai/comfyui-browser/assets/828837/ef0d5cd2-9238-4e80-9f65-0f7db05ffbf3)
 
 ## Installation
 
@@ -38,13 +40,46 @@ cd custom_nodes && git clone https://github.com/tzwm/comfyui-browser.git
 
 ## Notes
 
-- Your collections are stored in the `ComfyUI/custom_nodes/comfyui-browser/collections`.
+- Your 'Saves' are stored in the `ComfyUI/custom_nodes/comfyui-browser/collections`.
+- Press 'B' to toggle the Browser dialog in the ComfyUI.
+
+
+## Development
+
+- Framework
+
+  - Frontend: [Svelte](https://kit.svelte.dev/)
+  - Backend: [aiohttp](https://docs.aiohttp.org/)(the same with ComfyUI)
+
+- Project Structure
+
+```
+├── __init__.py  (Backend Server)
+├── web          (Frontend code loaded by ComfyUI)
+    ├── build    (Built by Svelte)
+    └── index.js (Frontend that interact with ComfyUI)
+├── svelte       (Frontend in the Modal as a iframe, written by Svelte)
+```
+
+- Build and Run
+
+  - Copy or link `comfyui-browser` to `ComfyUI/custom_nodes/`
+  - Start backend by `cd ComfyUI && python main.py --enable-cors-header`
+  - Start frontend by `cd ComfyUI/comfyui-browser/svelte && npm i && npm run dev`
+  - Open and debug by `http://localhost:5173/?comfyUrl=http://localhost:8188`
+    - It will use `localhost:8188` as ComfyUI server
+    - `localhost:5173` is a Vite dev server
+
+- Notes
+
+  - Please try to test on Windows, because I only have Linux/macOS
+
 
 ## TODO
 
 - [x] Sync collections to remote git repository
-- [ ] Add external git repository to local collections
-- [ ] Add more information to collections
+- [x] Add external git repository to local collections
+- [ ] Search workflow by node name and model name
 
 
 ## ChangeLog

README_CN.md

@@ -0,0 +1,83 @@
+# ComfyUI 浏览器
+
+查看和管理 ComfyUI 的所有输出文件，并且添加收藏方便随时调用。
+
+远程同步工作流到你的 Git 仓库，方便团队共享和版本管理。
+
+还能订阅社区开放的工作流仓库，方便抄作业！
+
+https://github.com/talesofai/comfyui-browser/assets/828837/803ce57a-1cf2-4e1c-be17-0efab401ef54
+
+也可以参考B站的中文解说：
+https://www.bilibili.com/video/BV1qc411m7Gp/
+
+## 功能
+
+- 浏览和管理你的 ComfyUI 输出文件
+- 添加工作流到收藏夹，方便管理和调用
+- 可以通过 Git 来远程同步收藏夹
+- 订阅工作流仓库，方便抄作业
+- 通过关键词搜索工作流
+
+
+## 预览
+
+![b359de5f6556649512e7ed8f812ba67d444be9914173e2467018450ce1a3ce1d](https://github.com/talesofai/comfyui-browser/assets/828837/4b0b0f4c-28a8-49ef-98c2-d293df5b7747)
+![c91157bf819ef5b9a129976d9e45588106dd6c7ea39ecb0a22519acd72afc7ce](https://github.com/talesofai/comfyui-browser/assets/828837/ee3df970-017c-4825-ab5d-9465cdb77ed6)
+![53053f43847da9597efebab207140eed703b8c7bbe8eb1e63ce5630b5d8c9a3f](https://github.com/talesofai/comfyui-browser/assets/828837/4acb522a-f21c-47ad-9a23-56b08c6e73a5)
+![c7b93b2ec0891eb7cac1385505e855fb28934ec958f7b21cac53c9bf18e6136c](https://github.com/talesofai/comfyui-browser/assets/828837/ef0d5cd2-9238-4e80-9f65-0f7db05ffbf3)
+
+## 安装方式
+
+### Comfy Manager
+
+搜索 `comfyui-browser` 来安装。
+
+### 手动
+
+下载这个仓库的代码放到 `ComfyUI/custom_nodes` 目录下，并重启 ComfyUI。
+
+```bash
+cd custom_nodes && git clone https://github.com/tzwm/comfyui-browser.git
+```
+
+## 开发
+
+- 使用的框架
+
+  - 前端: [Svelte](https://kit.svelte.dev/)
+  - 后端: [aiohttp](https://docs.aiohttp.org/)(和 ComfyUI 一样)
+
+- 目录介绍
+
+```
+├── __init__.py  (后端服务)
+├── web          (ComfyUI 加载的前端路径)
+    ├── build    (Svelte 的生成文件)
+    └── index.js (和 ComfyUI 交互的前端代码)
+├── svelte       (前端主体部分)
+```
+
+- 开发和调试
+
+  - 复制或者链接 `comfyui-browser` 到 `ComfyUI/custom_nodes/`
+  - 启动服务端: `cd ComfyUI && python main.py --enable-cors-header`
+  - 启动前端: `cd ComfyUI/comfyui-browser/svelte && npm i && npm run dev`
+  - 调试地址 `http://localhost:5173/?comfyUrl=http://localhost:8188`
+    - `localhost:8188` 是 ComfyUI server 地址
+    - `localhost:5173` 是 Vite dev server
+
+- 备注
+
+  - 请尽量在 Windows 上测试, 因为我只有 Linux 和 macOS
+  - 在 ComfyUI 中可以按 'B' 键来打开/关闭 Browser
+
+
+
+## 更新记录
+
+详见：[ChangeLog](CHANGELOG.md)
+
+## 感谢
+
+- [ComfyUI](https://github.com/comfyanonymous/ComfyUI)

__init__.py

@@ -1,509 +1,42 @@
-import json
-import os
-from os import path
-from aiohttp import request, web
-from typing import TypedDict, List
-import shutil
-import time
-import subprocess
-import re
+from os import path, mkdir
+from aiohttp import web
 
 import server
-import folder_paths
 
-class FileInfoDict(TypedDict):
-    type: str
-    name: str
-    bytes: int
-    created_at: float
-    folder_path: str
-    notes: str
+from .utils import collections_path, browser_path, sources_path, download_logs_path
+from .routes import sources, collections, config, files, downloads
 
-routes = server.PromptServer.instance.routes
+browser_app = web.Application()
+browser_app.add_routes([
+    web.get("/files", files.api_get_files),
+    web.delete("/files", files.api_delete_file),
+    web.put("/files", files.api_update_file),
+    web.get("/files/view", files.api_view_file),
 
-browser_path = path.dirname(__file__)
-collections_path = path.join(browser_path, 'collections')
-config_path = path.join(browser_path, 'config.json')
-sources_path = path.join(browser_path, 'sources')
+    web.post("/collections", collections.api_add_to_collections),
+    web.post("/collections/workflows", collections.api_create_new_workflow),
+    web.post("/collections/sync", collections.api_sync_my_collections),
 
-git_remote_name = 'origin'
+    web.get("/sources", sources.api_get_sources),
+    web.post("/sources", sources.api_create_source),
+    web.delete("/sources/{name}", sources.api_delete_source),
+    web.post("/sources/sync/{name}", sources.api_sync_source),
+    web.get("/sources/all", sources.api_get_all_sources),
 
-image_extensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp']
-video_extensions = ['.mp4', '.mov', '.avi', '.webm', '.mkv']
+    web.get("/config", config.api_get_browser_config),
+    web.put("/config", config.api_update_browser_config),
 
-info_file_suffix = '.info'
+    web.post("/downloads", downloads.api_create_new_download),
+    web.get("/downloads", downloads.api_list_downloads),
+    web.get("/downloads/{uuid}", downloads.api_show_download),
 
-# folder_type = 'outputs', 'collections', 'sources'
-def get_parent_path(folder_type: str):
-    if folder_type == 'collections':
-        return collections_path
-    if folder_type == 'sources':
-        return sources_path
+    web.static("/web", path.join(browser_path, 'web/build')),
+])
+server.PromptServer.instance.app.add_subapp("/browser/", browser_app)
 
-    # outputs
-    return folder_paths.output_directory
-
-# folder_type = 'outputs', 'collections', 'sources'
-def get_target_folder_files(folder_path: str, folder_type: str = 'outputs'):
-    if '..' in folder_path:
-        return None
-
-    parent_path = get_parent_path(folder_type)
-    files: List[FileInfoDict] = []
-    target_path = path.join(parent_path, folder_path)
-
-    if not path.exists(target_path):
-        return None
-
-    folder_listing = os.scandir(target_path)
-    folder_listing = sorted(folder_listing, key=lambda f: (f.is_file(), -f.stat().st_ctime))
-    for item in folder_listing:
-        if not path.exists(item.path):
-            continue
-
-        name = path.basename(item.path)
-        ext = path.splitext(name)[1].lower()
-        if name == '' or name[0] == '.':
-            continue
-        if item.is_file():
-            if not (ext in (image_extensions + video_extensions + ['.json'])):
-                continue
-
-        created_at = item.stat().st_ctime
-        info_file_path = get_info_filename(item.path)
-        info_data = {}
-        if path.exists(info_file_path):
-            with open(info_file_path, 'r') as f:
-                info_data = json.load(f)
-        if item.is_file():
-            bytes = item.stat().st_size
-            files.append({
-                "type": "file",
-                "name": name,
-                "bytes": bytes,
-                "created_at": created_at,
-                "folder_path": folder_path,
-                "notes": info_data.get("notes", "")
-            })
-        elif item.is_dir():
-            files.append({
-                "type": "dir",
-                "name": name,
-                "bytes": 0,
-                "created_at": created_at,
-                "folder_path": folder_path,
-                "notes": info_data.get("notes", "")
-            })
-
-    return files
-
-
-def get_info_filename(filename):
-    return path.splitext(filename)[0] + info_file_suffix
-
-def run_cmd(cmd, run_path, log_cmd=True, log_code=True, log_message=True):
-    if log_cmd:
-        log(f'running: {cmd}')
-
-    ret = subprocess.run(
-        f'cd {run_path} && {cmd}',
-        shell=True,
-        stdout=subprocess.PIPE,
-        stderr=subprocess.PIPE,
-        encoding="UTF-8"
-    )
-    if log_code:
-        if ret.returncode == 0:
-            log('successed')
-        else:
-            log('failed')
-    if log_message:
-        if (len(ret.stdout) > 0 or len(ret.stderr) > 0):
-            log(ret.stdout + ret.stderr)
-
-    return ret
-
-
-def get_config():
-    if not path.exists(config_path):
-        return {}
-
-    with open(config_path, 'r') as f:
-        return json.load(f)
-
-def set_config(config):
-    with open(config_path, 'w') as f:
-        json.dump(config, f)
-
-def git_set_remote_url(remote_url, run_path = collections_path):
-    ret = run_cmd('git remote', run_path)
-
-    if git_remote_name in ret.stdout.split('\n'):
-        return run_cmd(f'git remote set-url {git_remote_name} {remote_url}', run_path)
-    else:
-        return run_cmd(f'git remote add {git_remote_name} {remote_url}', run_path)
-
-def git_init(run_path = collections_path):
-    if not path.exists(path.join(run_path, '.git')):
-        run_cmd('git init', collections_path)
-
-def log(message):
-    print('[comfyui-browser] ' + message)
-
-def add_uuid_to_filename(filename):
-    name, ext = path.splitext(filename)
-    return f'{name}_{int(time.time())}{ext}'
-
-# folder_path, folder_type
-@routes.get("/browser/files")
-async def api_get_files(request):
-    folder_path = request.query.get('folder_path', '')
-    folder_type = request.query.get('folder_type', 'outputs')
-    files = get_target_folder_files(folder_path, folder_type=folder_type)
-
-    if files == None:
-        return web.Response(status=404)
-
-    return web.json_response({
-        'files': files
-    })
-
-
-# filename, folder_path, folder_type
-@routes.delete("/browser/files")
-async def api_delete_file(request):
-    json_data = await request.json()
-    filename = json_data['filename']
-    folder_path = json_data.get('folder_path', '')
-    folder_type = json_data.get('folder_type', 'outputs')
-
-    parent_path = get_parent_path(folder_type)
-    target_path = path.join(parent_path, folder_path, filename)
-    if not path.exists(target_path):
-        return web.json_response(status=404)
-
-    if path.isdir(target_path):
-        shutil.rmtree(target_path)
-    else:
-        os.remove(target_path)
-    info_file_path = get_info_filename(target_path)
-    if path.exists(info_file_path):
-        os.remove(info_file_path)
-
-    return web.Response(status=201)
-
-
-# filename, folder_path, folder_type, new_data: {}
-@routes.put("/browser/files")
-async def api_update_file(request):
-    json_data = await request.json()
-    filename = json_data['filename']
-    folder_path = json_data.get('folder_path', '')
-    folder_type = json_data.get('folder_type', 'outputs')
-    parent_path = get_parent_path(folder_type)
-
-    new_data = json_data.get('new_data', None)
-    if not new_data:
-        return web.Response(status=400)
-
-    new_filename = new_data['filename']
-    notes = new_data['notes']
-
-    old_file_path = path.join(parent_path, folder_path, filename)
-    new_file_path = path.join(parent_path, folder_path, new_filename)
-
-    if not path.exists(old_file_path):
-        return web.Response(status=404)
-
-    if new_filename and filename != new_filename:
-        shutil.move(
-            old_file_path,
-            new_file_path
-        )
-        old_info_file_path = get_info_filename(old_file_path)
-        if path.exists(old_info_file_path):
-            new_info_file_path = get_info_filename(new_file_path)
-            shutil.move(
-                old_info_file_path,
-                new_info_file_path
-            )
-
-    if notes:
-        extra = {
-            "notes": notes
-        }
-        info_file_path = get_info_filename(new_file_path)
-        with open(info_file_path, "w") as outfile:
-            json.dump(extra, outfile)
-
-    return web.Response(status=201)
-
-# filename, folder_path, folder_type
-@routes.get("/browser/files/view")
-async def api_view_file(request):
-    folder_type = request.query.get("folder_type", "outputs")
-    folder_path = request.query.get("folder_path", "")
-    filename = request.query.get("filename", None)
-    if not filename:
-        return web.Response(status=404)
-
-    parent_path = get_parent_path(folder_type)
-    file_path = path.join(parent_path, folder_path, filename)
-
-    if not path.exists(file_path):
-        return web.Response(status=404)
-
-    with open(file_path, 'rb') as f:
-        media_file = f.read()
-
-    content_type = 'application/json'
-    file_extension = path.splitext(filename)[1].lower()
-    if file_extension in image_extensions:
-        content_type = f'image/{file_extension[1:]}'
-    if file_extension in video_extensions:
-        content_type = f'video/{file_extension[1:]}'
-
-    return web.Response(
-        body=media_file,
-        content_type=content_type,
-        headers={"Content-Disposition": f"filename=\"{filename}\""}
-    )
-
-# filename, folder_path, folder_type = 'outputs' | 'sources'
-@routes.post("/browser/collections")
-async def api_add_to_collections(request):
-    json_data = await request.json()
-    filename = json_data.get('filename')
-    if not filename:
-        return web.Response(status=404)
-
-    folder_path = json_data.get('folder_path', '')
-
-    folder_type = json_data.get("folder_type", "outputs")
-    parent_path = get_parent_path(folder_type)
-
-    if not path.exists(collections_path):
-        os.mkdir(collections_path)
-
-    source_file_path = path.join(parent_path, folder_path, filename)
-    if not path.exists(source_file_path):
-        return web.Response(status=404)
-
-    new_filepath = path.join(
-        collections_path,
-        add_uuid_to_filename(filename)
-    )
-
-    if path.isdir(source_file_path):
-        shutil.copytree(source_file_path, new_filepath)
-    else:
-        shutil.copy(source_file_path, new_filepath)
-
-    return web.Response(status=201)
-
-# filename, content
-@routes.post("/browser/collections/workflows")
-async def api_create_new_workflow(request):
-    json_data = await request.json()
-    filename = json_data.get('filename')
-    content = json_data.get('content')
-
-    if not (filename and content):
-        return web.Response(status=404)
-
-    new_filepath = path.join(
-        collections_path,
-        add_uuid_to_filename(filename)
-    )
-    with open(new_filepath, 'w') as f:
-        f.write(content)
-
-    return web.Response(status=201)
-
-@routes.get("/browser/config")
-async def api_get_browser_config(_):
-    config = get_config()
-
-    return web.json_response(config)
-
-# git_repo
-@routes.put("/browser/config")
-async def api_update_browser_config(request):
-    json_data = await request.json()
-    config = get_config()
-    git_repo = json_data.get('git_repo', config.get('git_repo'))
-
-    git_init()
-
-    if git_repo == '':
-        ret = run_cmd(f'git remote remove {git_remote_name}', collections_path)
-        if not ret.returncode == 0:
-            return web.json_response(
-                { 'message': ret.stderr },
-                status=500,
-            )
-
-        set_config({ 'git_repo': git_repo })
-        return web.Response(status=200)
-
-    ret = git_set_remote_url(git_repo)
-    if not ret.returncode == 0:
-        return web.json_response(
-            { 'message': ret.stderr },
-            status=500,
-        )
-
-    set_config({ 'git_repo': git_repo })
-    return web.Response(status=200)
-
-@routes.post("/browser/collections/sync")
-async def api_sync_my_collections(_):
-    if not path.exists(config_path):
-        return web.Response(status=404)
-
-    config = get_config()
-    git_repo = config.get('git_repo')
-    if not git_repo:
-        return web.Response(status=404)
-
-    git_init()
-
-    cmd = 'git status -s'
-    ret = run_cmd(cmd, collections_path)
-    if len(ret.stdout) > 0:
-        cmd = f'git add . && git commit -m "sync by comfyui-browser at {int(time.time())}"'
-        ret = run_cmd(cmd, collections_path)
-        if not ret.returncode == 0:
-            return web.json_response(
-                { 'message': "\n".join([ret.stdout, ret.stderr]) },
-                status=500,
-            )
-
-    cmd = f'git fetch {git_remote_name} -v'
-    ret = run_cmd(cmd, collections_path)
-    if not ret.returncode == 0:
-        return web.json_response(
-            { 'message': "\n".join([ret.stdout, ret.stderr]) },
-            status=500,
-        )
-
-    cmd = 'git branch --show-current'
-    ret = run_cmd(cmd, collections_path)
-    branch = ret.stdout.replace('\n', '')
-
-    cmd = f'git merge {git_remote_name}/{branch}'
-    ret = run_cmd(cmd, collections_path, log_code=False)
-
-    cmd = f'git push {git_remote_name} {branch}'
-    ret = run_cmd(cmd, collections_path)
-    if not ret.returncode == 0:
-        return web.json_response(
-            { 'message': "\n".join([ret.stdout, ret.stderr]) },
-            status=500,
-        )
-
-    return web.Response(status=200)
-
-@routes.get("/browser/sources")
-async def api_get_sources(_):
-    if not path.exists(sources_path):
-        return web.json_response({
-            'sources': []
-        })
-
-    sources = []
-    source_list = os.scandir(sources_path)
-    source_list = sorted(source_list, key=lambda f: (-f.stat().st_ctime))
-    for item in source_list:
-        if not path.exists(item.path):
-            continue
-
-        if item.is_file():
-            continue
-
-        cmd = f'git remote get-url {git_remote_name}'
-        ret = run_cmd(cmd, path.join(item.path), log_cmd=False, log_code=False, log_message=False)
-        if not (ret.returncode == 0 and len(ret.stdout) > 0):
-            continue
-
-        url = ret.stdout.split('\n')[0]
-        name = path.basename(item.path)
-        created_at = item.stat().st_ctime
-        sources.append({
-            "name": name,
-            "created_at": created_at,
-            "url": url
-        })
-
-    return web.json_response({
-        'sources': sources
-    })
-
-# repo_url
-@routes.post("/browser/sources")
-async def api_create_source(request):
-    json_data = await request.json()
-    repo_url = json_data['repo_url']
-
-    if not repo_url:
-        return web.Response(status=400)
-
-    pattern = r'[\:\/]([a-zA-Z0-9-_]+)\/([a-zA-Z0-9-_]+)(\.git)?'
-    ret = re.search(pattern, repo_url)
-    author = ret.group(1)
-    name = ret.group(2)
-    if not (author and name):
-        return web.Response(status=400, text='wrong url')
-
-    cmd = f'git clone --depth 1 {repo_url} {author}-{name}'
-    ret = run_cmd(cmd, sources_path)
-    if ret.returncode != 0:
-        return web.Response(status=400, text=ret.stdout + ret.stderr)
-
-    return web.Response(status=201)
-
-
-# name
-@routes.delete("/browser/sources/{name}")
-async def api_delete_source(request):
-    name = request.match_info.get('name', None)
-
-    if not name:
-        return web.Response(status=401)
-    if not path.exists(path.join(sources_path, name)):
-        return web.Response(status=404)
-
-    cmd = f'rm -rf {name}'
-    ret = run_cmd(cmd, sources_path)
-
-    if ret.returncode == 0:
-        return web.Response(status=200)
-    else:
-        return web.Response(status=400, text=ret.stdout + ret.stderr)
-
-# name
-@routes.post("/browser/sources/sync/{name}")
-async def api_sync_source(request):
-    name = request.match_info.get('name', None)
-
-    if not name:
-        return web.Response(status=401)
-    if not path.exists(path.join(sources_path, name)):
-        return web.Response(status=404)
-
-    cmd = f'git pull'
-    ret = run_cmd(cmd, path.join(sources_path, name))
-
-    if ret.returncode == 0:
-        return web.Response(status=200)
-    else:
-        return web.Response(status=400, text=ret.stdout + ret.stderr)
-
-
-routes.static(
-    '/browser/web',
-    path.join(browser_path, 'web/build')
-)
+for dir in [collections_path, sources_path, download_logs_path]:
+    if not path.exists(dir):
+        mkdir(dir)
 
 WEB_DIRECTORY = "web"
 NODE_CLASS_MAPPINGS = {}

data/sources.json

@@ -0,0 +1,32 @@
+{
+  "sources": [
+    {
+      "title": "ComfyUI_examples",
+      "author": "comfyanonymous",
+      "url": "https://github.com/comfyanonymous/ComfyUI_examples",
+      "type": "git",
+      "description": "Examples of ComfyUI workflows"
+    },
+    {
+      "title": "comfyui-workflow",
+      "author": "hylarucoder",
+      "url": "https://github.com/hylarucoder/comfyui-workflow",
+      "type": "git",
+      "description": "Some workflows that I have authored myself as well as some workflows that I have modified from online sources."
+    },
+    {
+        "title": "sharing-is-caring",
+        "author": "fictions-ai",
+        "url": "https://github.com/fictions-ai/sharing-is-caring",
+        "type": "git",
+        "description": "This repository is maintained by the fictions.ai team. We believe in the power of collaboration and the magic that happens when we share knowledge. Here, we'll be sharing our workflow, useful scripts, and tools related to A.I. generation."
+    },
+    {
+      "title": "awesome-comfyui-workflow",
+      "author": "shadowcz007",
+      "url": "https://github.com/shadowcz007/awesome-comfyui-workflow",
+      "type": "git",
+      "description": "Some workflows includes CUTE YOU, Real-time design, Extended image, AI Dialogue Game..."
+    }
+  ]
+}

requirements.txt

@@ -0,0 +1 @@
+tqdm

routes/collections.py

@@ -0,0 +1,104 @@
+from os import path, mkdir
+from aiohttp import web
+import shutil
+import time
+
+from ..utils import collections_path, get_parent_path, add_uuid_to_filename, \
+    config_path, get_config, git_init, run_cmd, git_remote_name
+
+
+# filename, folder_path, folder_type = 'outputs' | 'sources'
+async def api_add_to_collections(request):
+    json_data = await request.json()
+    filename = json_data.get('filename')
+    if not filename:
+        return web.Response(status=404)
+
+    folder_path = json_data.get('folder_path', '')
+
+    folder_type = json_data.get("folder_type", "outputs")
+    parent_path = get_parent_path(folder_type)
+
+    if not path.exists(collections_path):
+        mkdir(collections_path)
+
+    source_file_path = path.join(parent_path, folder_path, filename)
+    if not path.exists(source_file_path):
+        return web.Response(status=404)
+
+    new_filepath = path.join(
+        collections_path,
+        add_uuid_to_filename(filename)
+    )
+
+    if path.isdir(source_file_path):
+        shutil.copytree(source_file_path, new_filepath)
+    else:
+        shutil.copy(source_file_path, new_filepath)
+
+    return web.Response(status=201)
+
+# filename, content
+async def api_create_new_workflow(request):
+    json_data = await request.json()
+    filename = json_data.get('filename')
+    content = json_data.get('content')
+
+    if not (filename and content):
+        return web.Response(status=404)
+
+    new_filepath = path.join(
+        collections_path,
+        add_uuid_to_filename(filename)
+    )
+    with open(new_filepath, 'w') as f:
+        f.write(content)
+
+    return web.Response(status=201)
+
+async def api_sync_my_collections(_):
+    if not path.exists(config_path):
+        return web.Response(status=404)
+
+    config = get_config()
+    git_repo = config.get('git_repo')
+    if not git_repo:
+        return web.Response(status=404)
+
+    git_init()
+
+    cmd = 'git status -s'
+    ret = run_cmd(cmd, collections_path)
+    if len(ret.stdout) > 0:
+        cmd = f'git add . && git commit -m "sync by comfyui-browser at {int(time.time())}"'
+        ret = run_cmd(cmd, collections_path)
+        if not ret.returncode == 0:
+            return web.json_response(
+                { 'message': "\n".join([ret.stdout, ret.stderr]) },
+                status=500,
+            )
+
+    cmd = f'git fetch {git_remote_name} -v'
+    ret = run_cmd(cmd, collections_path)
+    if not ret.returncode == 0:
+        return web.json_response(
+            { 'message': "\n".join([ret.stdout, ret.stderr]) },
+            status=500,
+        )
+
+    cmd = 'git branch --show-current'
+    ret = run_cmd(cmd, collections_path)
+    branch = ret.stdout.replace('\n', '')
+
+    cmd = f'git merge {git_remote_name}/{branch}'
+    ret = run_cmd(cmd, collections_path, log_code=False)
+
+    cmd = f'git push {git_remote_name} {branch}'
+    ret = run_cmd(cmd, collections_path)
+    if not ret.returncode == 0:
+        return web.json_response(
+            { 'message': "\n".join([ret.stdout, ret.stderr]) },
+            status=500,
+        )
+
+    return web.Response(status=200)

routes/config.py

@@ -0,0 +1,51 @@
+from aiohttp import web
+import json
+
+from ..utils import get_config, git_remote_name, run_cmd, git_init, \
+    collections_path, config_path
+
+async def api_get_browser_config(_):
+    config = get_config()
+
+    return web.json_response(config)
+
+# git_repo
+async def api_update_browser_config(request):
+    json_data = await request.json()
+    config = get_config()
+    git_repo = json_data.get('git_repo', config.get('git_repo'))
+
+    git_init()
+
+    if git_repo == '':
+        ret = run_cmd(f'git remote remove {git_remote_name}', collections_path)
+        if not ret.returncode == 0:
+            return web.json_response(
+                { 'message': ret.stderr },
+                status=500,
+            )
+
+        set_config({ 'git_repo': git_repo })
+        return web.Response(status=200)
+
+    ret = git_set_remote_url(git_repo)
+    if not ret.returncode == 0:
+        return web.json_response(
+            { 'message': ret.stderr },
+            status=500,
+        )
+
+    set_config({ 'git_repo': git_repo })
+    return web.Response(status=200)
+
+def set_config(config):
+    with open(config_path, 'w') as f:
+        json.dump(config, f)
+
+def git_set_remote_url(remote_url, run_path = collections_path):
+    ret = run_cmd('git remote', run_path)
+
+    if git_remote_name in ret.stdout.split('\n'):
+        return run_cmd(f'git remote set-url {git_remote_name} {remote_url}', run_path)
+    else:
+        return run_cmd(f'git remote add {git_remote_name} {remote_url}', run_path)

routes/downloads.py

@@ -0,0 +1,173 @@
+from os import path
+import os
+import shutil
+import requests
+import time
+import asyncio
+import json
+import threading
+from aiohttp import web
+from tqdm import tqdm
+
+import folder_paths
+
+from ..utils import download_logs_path, log
+
+def parse_options_header(content_disposition):
+    param, options = '', {}
+    split_header = content_disposition.split(';')
+
+    # Extract the first parameter
+    if len(split_header) > 0:
+        param = split_header[0].strip()
+
+    # Extract the options
+    for option in split_header[1:]:
+        option_split = option.split('=')
+        if len(option_split) == 2:
+            key = option_split[0].strip()
+            value = option_split[1].strip().strip('"')
+            options[key] = value
+
+    return param, options
+
+
+# credit: https://gist.github.com/phineas-pta/d73f9a035b05f8e923af8c01df057175
+async def download_by_requests(uuid:str, download_url:str, save_in:str, filename:str="", overwrite:bool=False, chunk_size:int=1):
+    log_file_path = path.join(download_logs_path, uuid + '.json')
+    base_info = {
+        'uuid': uuid,
+        'download_url': download_url,
+        'save_in': save_in,
+        'filename': filename,
+        'overwrite': overwrite,
+        'method': 'requests',
+        'result': 'connecting',
+        'total_size': 0,
+        'downloaded_size': 0,
+        'created_at': int(time.time()),
+        'updated_at': int(time.time()),
+    }
+    with open(log_file_path, 'w') as log_file:
+        json.dump(base_info, log_file)
+
+    HEADERS = {"User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"}
+
+    with requests.get(download_url, headers=HEADERS, stream=True) as resp:
+        MISSING_FILENAME = f"unkwown_{uuid}"
+        # get file name
+        if filename == "":
+            if content_disposition := resp.headers.get("Content-Disposition"):
+                param, options = parse_options_header(content_disposition)
+                if param == "attachment":
+                    filename = options.get("filename", MISSING_FILENAME)
+            else:
+                fileext = path.splitext(filename)[-1]
+                if fileext != "":
+                    filename = path.basename(download_url)
+        if filename == "":
+            filename = MISSING_FILENAME
+
+        base_info['filename'] = filename
+        with open(log_file_path, 'w') as log_file:
+            json.dump(base_info, log_file)
+
+        target_path = path.join(folder_paths.models_dir, save_in, filename)
+        base_info['save_in'] = target_path
+        if not overwrite and path.exists(target_path):
+            result = f'Already exists: {target_path}'
+            base_info['result'] = result
+            with open(log_file_path, 'w') as log_file:
+                json.dump(base_info, log_file)
+            log(result)
+            return
+
+        # download file
+        tmp_target_path = target_path + '.downloading'
+        TOTAL_SIZE = int(resp.headers.get("Content-Length", 0))
+        CHUNK_SIZE = chunk_size * 10**6
+        base_info['total_size'] = TOTAL_SIZE
+        base_info['result'] = resp.reason
+        log('Download to ' + target_path)
+        with (
+            open(tmp_target_path, mode="wb") as file,
+            open(log_file_path, 'w') as log_file,
+            tqdm(total=TOTAL_SIZE, desc=f"download {filename}", unit="B", unit_scale=True) as bar,
+        ):
+            for data in resp.iter_content(chunk_size=CHUNK_SIZE):
+                size = file.write(data)
+                bar.update(size)
+                base_info['downloaded_size'] += size
+                base_info['updated_at'] = int(time.time())
+                log_file.seek(0)
+                json.dump(base_info, log_file)
+                log_file.write('\n' * 2)
+
+        shutil.move(tmp_target_path, target_path)
+
+
+# download_url, filename, save_in, overwrite
+async def api_create_new_download(request):
+    json_data = await request.json()
+    download_url = json_data.get('download_url', None)
+    save_in = json_data.get('save_in', None)
+    filename = json_data.get('filename', '')
+    overwrite = json_data.get('overwrite', False)
+
+    if not (download_url and save_in):
+        return web.Response(status=400)
+
+    if '..' in save_in:
+        return web.Response(status=400)
+
+    threading.Thread(
+        target=asyncio.run,
+        args=(download_by_requests(str(int(time.time())), download_url, save_in, filename, overwrite),)
+    ).start()
+
+    return web.json_response(status=201)
+
+async def api_list_downloads(_):
+    download_logs = []
+    folder_listing = os.scandir(download_logs_path)
+    folder_listing = sorted(folder_listing, key=lambda f: (f.is_file(), -f.stat().st_ctime))
+    for item in folder_listing:
+        if not path.exists(item.path):
+            continue
+
+        name = path.basename(item.path)
+        ext = path.splitext(name)[1].lower()
+        if name == '' or name[0] == '.':
+            continue
+        if item.is_file() and not ext in ['.json']:
+            continue
+
+        info = {}
+        with open(item.path, 'r') as f:
+            try:
+                info = json.load(f)
+            except:
+                pass
+
+        if 'uuid' in info:
+            download_logs.append(info)
+
+    return web.json_response({
+        'download_logs': download_logs,
+    })
+
+# uuid
+async def api_show_download(request):
+    uuid = request.match_info.get('uuid', '')
+    if uuid == '':
+        return web.Response(status=400)
+
+    target_path = path.join(download_logs_path, uuid + '.json')
+    if not path.exists(target_path):
+        return web.Response(status=404)
+
+    download_log = {}
+    with open(target_path, 'r') as file:
+        download_log = json.load(file)
+
+    return web.json_response(download_log)

routes/files.py

@@ -0,0 +1,119 @@
+from aiohttp import web
+import json
+from os import path
+import os
+import shutil
+
+from ..utils import get_target_folder_files, get_parent_path, get_info_filename, \
+    image_extensions, video_extensions
+
+# folder_path, folder_type
+async def api_get_files(request):
+    folder_path = request.query.get('folder_path', '')
+    folder_type = request.query.get('folder_type', 'outputs')
+    files = get_target_folder_files(folder_path, folder_type=folder_type)
+
+    if files == None:
+        return web.Response(status=404)
+
+    return web.json_response({
+        'files': files
+    })
+
+
+# filename, folder_path, folder_type
+async def api_delete_file(request):
+    json_data = await request.json()
+    filename = json_data['filename']
+    folder_path = json_data.get('folder_path', '')
+    folder_type = json_data.get('folder_type', 'outputs')
+
+    parent_path = get_parent_path(folder_type)
+    target_path = path.join(parent_path, folder_path, filename)
+    if not path.exists(target_path):
+        return web.json_response(status=404)
+
+    if path.isdir(target_path):
+        shutil.rmtree(target_path)
+    else:
+        os.remove(target_path)
+    info_file_path = get_info_filename(target_path)
+    if path.exists(info_file_path):
+        os.remove(info_file_path)
+
+    return web.Response(status=201)
+
+
+# filename, folder_path, folder_type, new_data: {}
+async def api_update_file(request):
+    json_data = await request.json()
+    filename = json_data['filename']
+    folder_path = json_data.get('folder_path', '')
+    folder_type = json_data.get('folder_type', 'outputs')
+    parent_path = get_parent_path(folder_type)
+
+    new_data = json_data.get('new_data', None)
+    if not new_data:
+        return web.Response(status=400)
+
+    new_filename = new_data['filename']
+    notes = new_data['notes']
+
+    old_file_path = path.join(parent_path, folder_path, filename)
+    new_file_path = path.join(parent_path, folder_path, new_filename)
+
+    if not path.exists(old_file_path):
+        return web.Response(status=404)
+
+    if new_filename and filename != new_filename:
+        shutil.move(
+            old_file_path,
+            new_file_path
+        )
+        old_info_file_path = get_info_filename(old_file_path)
+        if path.exists(old_info_file_path):
+            new_info_file_path = get_info_filename(new_file_path)
+            shutil.move(
+                old_info_file_path,
+                new_info_file_path
+            )
+
+    if notes:
+        extra = {
+            "notes": notes
+        }
+        info_file_path = get_info_filename(new_file_path)
+        with open(info_file_path, "w") as outfile:
+            json.dump(extra, outfile)
+
+    return web.Response(status=201)
+
+# filename, folder_path, folder_type
+async def api_view_file(request):
+    folder_type = request.query.get("folder_type", "outputs")
+    folder_path = request.query.get("folder_path", "")
+    filename = request.query.get("filename", None)
+    if not filename:
+        return web.Response(status=404)
+
+    parent_path = get_parent_path(folder_type)
+    file_path = path.join(parent_path, folder_path, filename)
+
+    if not path.exists(file_path):
+        return web.Response(status=404)
+
+    with open(file_path, 'rb') as f:
+        media_file = f.read()
+
+    content_type = 'application/json'
+    file_extension = path.splitext(filename)[1].lower()
+    if file_extension in image_extensions:
+        content_type = f'image/{file_extension[1:]}'
+    if file_extension in video_extensions:
+        content_type = f'video/{file_extension[1:]}'
+
+    return web.Response(
+        body=media_file,
+        content_type=content_type,
+        headers={"Content-Disposition": f"filename=\"{filename}\""}
+    )

routes/sources.py

@@ -0,0 +1,128 @@
+from os import path, scandir, mkdir
+import json
+from aiohttp import web, ClientSession, ClientTimeout
+import re
+import shutil
+import os, stat, errno
+
+from ..utils import sources_path, run_cmd, browser_path, git_remote_name
+
+
+def handle_remove_readonly(func, path, exc):
+    excvalue = exc[1]
+    if excvalue.errno == errno.EACCES:
+        os.chmod(path, stat.S_IRWXU | stat.S_IRWXG | stat.S_IRWXO)  # 0777
+        func(path)
+    else:
+        raise
+
+async def api_get_sources(_):
+    if not path.exists(sources_path):
+        return web.json_response({
+            'sources': []
+        })
+
+    sources = []
+    source_list = scandir(sources_path)
+    source_list = sorted(source_list, key=lambda f: (-f.stat().st_ctime))
+    for item in source_list:
+        if not path.exists(item.path):
+            continue
+
+        if item.is_file():
+            continue
+
+        cmd = f'git remote get-url {git_remote_name}'
+        ret = run_cmd(cmd, path.join(item.path), log_cmd=False, log_code=False, log_message=False)
+        if not (ret.returncode == 0 and len(ret.stdout) > 0):
+            continue
+
+        url = ret.stdout.split('\n')[0]
+        name = path.basename(item.path)
+        created_at = item.stat().st_ctime
+        sources.append({
+            "name": name,
+            "created_at": created_at,
+            "url": url
+        })
+
+    return web.json_response({
+        'sources': sources
+    })
+
+# repo_url
+async def api_create_source(request):
+    json_data = await request.json()
+    repo_url = json_data['repo_url']
+
+    if not repo_url:
+        return web.Response(status=400)
+
+    if not path.exists(sources_path):
+        mkdir(sources_path)
+
+    pattern = r'[\:\/]([a-zA-Z0-9-_]+)\/([a-zA-Z0-9-_]+)(\.git)?'
+    ret = re.search(pattern, repo_url)
+    author = ret.group(1)
+    name = ret.group(2)
+    if not (author and name):
+        return web.Response(status=400, text='wrong url')
+
+    cmd = f'git clone --depth 1 {repo_url} {author}-{name}'
+    ret = run_cmd(cmd, sources_path)
+    if ret.returncode != 0:
+        return web.Response(status=400, text=ret.stdout + ret.stderr)
+
+    return web.Response(status=201)
+
+
+# name
+async def api_delete_source(request):
+    name = request.match_info.get('name', None)
+
+    if not name:
+        return web.Response(status=401)
+
+    target_path = path.join(sources_path, name)
+    if not path.exists(target_path):
+        return web.Response(status=404)
+
+    shutil.rmtree(target_path, onerror=handle_remove_readonly)
+    return web.Response(status=200)
+
+# name
+async def api_sync_source(request):
+    name = request.match_info.get('name', None)
+
+    if not name:
+        return web.Response(status=401)
+    if not path.exists(path.join(sources_path, name)):
+        return web.Response(status=404)
+
+    cmd = f'git pull'
+    ret = run_cmd(cmd, path.join(sources_path, name))
+
+    if ret.returncode == 0:
+        return web.Response(status=200)
+    else:
+        return web.Response(status=400, text=ret.stdout + ret.stderr)
+
+async def api_get_all_sources(_):
+    source_url = 'https://github.com/talesofai/comfyui-browser/raw/main/data/sources.json'
+    file_path = path.join(browser_path, 'data/sources.json')
+    timeout = ClientTimeout(connect=2, total=4)
+
+    sources = {
+        "sources": []
+    }
+    try:
+        async with ClientSession(timeout=timeout) as session:
+            async with session.get(source_url) as resp:
+                if resp.ok:
+                    ret = await resp.text()
+                    sources = json.loads(ret)
+    except:
+        with open(file_path, 'r') as f:
+            sources = json.load(f)
+
+    return web.json_response(sources)

svelte/package-lock.json

@@ -15,7 +15,7 @@
 				"@sveltejs/adapter-static": "^2.0.3",
 				"@sveltejs/kit": "^1.27.4",
 				"autoprefixer": "^10.4.16",
-				"daisyui": "^4.4.17",
+				"daisyui": "^4.4.19",
 				"postcss": "^8.4.32",
 				"svelte": "^4.2.7",
 				"svelte-check": "^3.6.0",

svelte/package.json

@@ -1,30 +1,30 @@
 {
-	"name": "comfyui-browser",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/adapter-static": "^2.0.3",
-		"@sveltejs/kit": "^1.27.4",
-		"autoprefixer": "^10.4.16",
-		"daisyui": "^4.4.19",
-		"postcss": "^8.4.32",
-		"svelte": "^4.2.7",
-		"svelte-check": "^3.6.0",
-		"tailwindcss": "^3.3.5",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
+  "name": "comfyui-browser",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/adapter-static": "^2.0.3",
+    "@sveltejs/kit": "^1.27.4",
+    "autoprefixer": "^10.4.16",
+    "daisyui": "^4.4.19",
+    "postcss": "^8.4.32",
+    "svelte": "^4.2.7",
+    "svelte-check": "^3.6.0",
+    "tailwindcss": "^3.3.5",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
     "vite": ">=4.5.1"
-	},
-	"type": "module",
-	"dependencies": {
-		"dayjs": "^1.11.10"
-	}
+  },
+  "type": "module",
+  "dependencies": {
+    "dayjs": "^1.11.10"
+  }
 }

svelte/src/app.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-theme="halloween">
+<html lang="en" data-theme="forest">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />

svelte/src/routes/+page.svelte

@@ -1,22 +1,34 @@
 <script lang="ts">
-  import Tabs from './Tabs.svelte';
+  import Navbar from './Navbar.svelte';
   import FilesTab from "./FilesTab.svelte";
   import CollectionsTab from './CollectionsTab.svelte';
   import SourcesTab from './SourcesTab.svelte';
+  import ModelsTab from './ModelsTab.svelte';
+  import { getLocalConfig } from './utils';
+  import { onMount } from 'svelte';
 
   // @type {import('./$types').PageData}
   export let data: any;
   const { comfyUrl } = data;
 
   let activeTab = 'outputs';
+
+  onMount(() => {
+    const config = getLocalConfig();
+    if (config.lastTab) {
+      activeTab = config.lastTab;
+    }
+  });
 </script>
 
-<Tabs bind:activeTab={activeTab} />
+<Navbar bind:activeTab={activeTab} />
 
 {#if activeTab === 'collections'}
   <CollectionsTab {comfyUrl} />
-{:else if activeTab === 'outputs'}
-  <FilesTab {comfyUrl} />
-{:else}
+{:else if activeTab === 'sources'}
   <SourcesTab {comfyUrl} />
+{:else if activeTab === 'models'}
+  <ModelsTab {comfyUrl} />
+{:else}
+  <FilesTab {comfyUrl} />
 {/if}

svelte/src/routes/CollectionsTab.svelte

@@ -15,14 +15,26 @@
   let showCursor = 20;
   let toast: Toast;
   let folderPath: string;
+  let loaded: boolean = false;
+  let searchQuery = '';
+  let searchRegex = new RegExp('');
+
   $: if (folderPath != undefined) {
     fetchFiles(folderType, comfyUrl, folderPath)
     .then(res => {
       files = res;
+      loaded = true;
     });
   }
 
 
+  $: try {
+    searchRegex = new RegExp(searchQuery.toLowerCase());
+  } catch {
+    searchRegex =  new RegExp('');
+  }
+
+
   onMount(async () => {
     //@ts-ignore
     comfyApp = window.top.app;
@@ -126,7 +138,7 @@
 
     toast.show(
       ret,
-      'Updated',
+      'Memos Updated',
       'Failed to update. Please check the ComfyUI server.'
     );
   }
@@ -165,7 +177,14 @@
   }
 </script>
 
-<div>
+<div class="flex border-b border-base-content pb-2">
+  <a class="btn pr-2"
+    target="_blank"
+    href="https://github.com/talesofai/comfyui-browser/wiki/How-to-use-'Sync'-in-the-'Saves'">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" data-slot="icon" class="w-6 h-6">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
+    </svg>
+  </a>
   <input
     type="text"
     placeholder="Input your git repository address"
@@ -188,56 +207,67 @@
   </button>
 </div>
 
-<div class="max-w-full text-sm breadcrumbs">
-  <ul>
+<div class="max-w-full text-sm breadcrumbs flex flex-row ml-4">
+  <ul class="basis-2/3">
     <li><button on:click={() => onClickPath(-1)}>Root</button></li>
     {#each (folderPath || '').split('/') as path, index}
       <li><button on:click={() => onClickPath(index)}>{path}</button></li>
     {/each}
   </ul>
+
+  <input
+    type="text"
+    placeholder="Filter by filename or memos"
+    bind:value={searchQuery}
+    class="input input-bordered border-slate-600 w-full h-full rounded-none text-sm basis-1/3"
+  />
 </div>
 
-<ul class="space-y-2 bg-base-300">
-  {#each files.slice(0, showCursor) as file}
-    <li class="flex h-36 border-0 space-x-4 bg-base-100">
+<ul class="space-y-2">
+  {#each files.filter(f => searchRegex.test(f.name.toLowerCase()) || searchRegex.test(f.notes.toLowerCase()))
+    .slice(0, showCursor) as file}
+    <li class="flex h-16 sm:h-28 border-0 space-x-4 p-2 bg-info-content">
       <MediaShow
         file={file}
-        styleClass="w-36"
+        styleClass="w-16 sm:w-28"
         onClickDir={onClickDir}
       />
-      <div class="space-y-2 w-72">
+      <div class="space-y-2 w-96 relative">
         <input
           type="text"
           class="input-bordered font-bold w-full bg-base-100"
           on:blur={(e) => updateFilename(e, file)}
           value={file.name}
         />
-        <p class="text-gray-500">
+        <p class="text-gray-500 text-xs hidden sm:block">
           {file.formattedDatetime} | {file.formattedSize}
         </p>
 
-        <div>
-          {#if comfyApp}
+        <div class="bottom-0 absolute">
+          {#if comfyApp && file.type != 'dir'}
             <button
               class="btn btn-link btn-sm p-0 no-underline text-accent"
               on:click={async () => await onLoadWorkflow(file, comfyApp, toast)}
             >Load</button>
           {/if}
           <button
-            class="btn btn-link btn-sm p-0 no-underline text-error"
+            class="btn btn-link btn-sm p-0 no-underline text-error ml-52"
             on:click={async () => await onDelete(file)}
-          >Remove</button>
+          >
+            <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M16 2v4h6v2h-2v14H4V8H2V6h6V2h8zm-2 2h-4v2h4V4zm0 4H6v12h12V8h-4zm-5 2h2v8H9v-8zm6 0h-2v8h2v-8z" fill="#f77"/>
+            </svg>
+            Remove
+        </button>
         </div>
       </div>
 
       <div>
         <textarea
           name="notes"
-          cols="40"
-          rows="4"
           placeholder="write some memos..."
           on:blur={(e) => updateFileNotes(e, file)}
-          class="resize-none textarea"
+          class="resize-none textarea hidden md:block md:w-72 max-w-72 h-14 sm:h-24"
           value={file.notes}
         />
       </div>
@@ -248,7 +278,11 @@
 {#if files.length === 0}
   <div class="w-full h-full flex items-center justify-center">
     <span class="font-bold text-4xl">
-      It's empty here.
+      {#if loaded}
+        It's empty here.
+      {:else}
+        Loading ...
+      {/if}
     </span>
   </div>
 {/if}

svelte/src/routes/DownloadHistory.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import dayjs from 'dayjs';
+  import { onMount, onDestroy } from "svelte";
+  import { formatFileSize } from './utils';
+
+  export let comfyUrl: string;
+
+  let downloads: Array<any> = [];
+  let autoRefresh = true;
+  $: if (autoRefresh) {
+    autoRefreshInterval = setInterval(refreshHistory, 1000);
+  } else {
+    if (autoRefreshInterval) {
+      clearInterval(autoRefreshInterval);
+    }
+  }
+  let autoRefreshInterval: number;
+
+  async function refreshHistory() {
+    const res = await fetch(comfyUrl + '/browser/downloads');
+    const ret = await res.json();
+    let newDownloads: Array<any> = [];
+    ret.download_logs.forEach((dl: any) => {
+      let newDl = dl;
+      const timeFormat = 'YYYY-MM-DD HH:mm:ss';
+      newDl['formattedCreatedAt'] = dayjs.unix(dl.created_at).format(timeFormat);
+      newDl['formattedUpdatedAt'] = dayjs.unix(dl.updated_at).format(timeFormat);
+      newDl['percentStr'] = `${Math.floor(dl.downloaded_size/dl.total_size * 100)}%`;
+      newDl['formattedDownloadedSize'] = formatFileSize(dl.downloaded_size);
+      newDl['formattedTotalSize'] = formatFileSize(dl.total_size);
+
+      newDownloads.push(newDl);
+    });
+    downloads = newDownloads;
+  }
+
+  onMount(async () => {
+    refreshHistory();
+  });
+
+  onDestroy(() => {
+    if (autoRefreshInterval) {
+      clearInterval(autoRefreshInterval);
+    }
+  });
+</script>
+
+<div class="flex flex-row justify-between">
+  <button
+    class="btn btn-accent btn-outline"
+    on:click={refreshHistory}
+  >
+    Refresh
+  </button>
+
+  <div class="flex items-center">
+    <span class="label-text">Auto Refresh</span>
+    <input type="checkbox" bind:checked={autoRefresh} class="checkbox checkbox-secondary" />
+  </div>
+</div>
+<ul class="space-y-2">
+  {#each downloads as dl}
+    <li class="bg-info-content">
+      <p class="font-bold text-lg">{dl.filename ? dl.filename : dl.uuid}</p>
+      <p class="text-gray-500 text-xs">
+        <span>Created at: {dl.formattedCreatedAt}</span>
+        <span>Updated at: {dl.formattedUpdatedAt}</span>
+      </p>
+      <p class="text-gray-500 text-xs">URL: {dl.download_url}</p>
+      <p class="text-gray-500 text-xs">Save in: {dl.save_in}</p>
+      {#if dl.total_size !== 0}
+        <div>
+          <span>{dl.formattedDownloadedSize}/{dl.formattedTotalSize}</span>
+          <span>{dl.percentStr}</span>
+          <progress
+            class="progress progress-primary"
+            value={dl.downloaded_size}
+            max={dl.total_size} >
+          </progress>
+        </div>
+      {:else}
+        <p>Result: {dl.result}</p>
+      {/if}
+    </li>
+  {/each}
+</ul>

svelte/src/routes/FilesList.svelte

@@ -10,22 +10,39 @@
   export let toast: Toast;
   export let folderPath: string;
   $: if (folderPath != undefined) {
-    fetchFiles(folderType, comfyUrl, folderPath)
-    .then(res => {
-      files = res;
-    });
+    refresh();
+  }
+
+  $: try {
+    searchRegex = new RegExp(searchQuery.toLowerCase());
+  } catch {
+    searchRegex =  new RegExp('');
   }
 
   let comfyApp: any;
   let files: Array<any> = [];
+  let loaded: boolean = true;
   let showCursor = 20;
+  let searchQuery = '';
+  let searchRegex = new RegExp('');
+  let scrollTop = 0;
+
+  export async function refresh() {
+    loaded = true;
+    files = await fetchFiles(folderType, comfyUrl, folderPath);
+    loaded = true;
+  }
 
   onMount(async () => {
     //@ts-ignore
     comfyApp = window.top.app;
 
     folderPath = '';
-    window.addEventListener('scroll', () => { showCursor = onScroll(showCursor, files.length); });
+    window.addEventListener('scroll', (e) => { 
+      showCursor = onScroll(showCursor, files.length); 
+      //@ts-ignore
+      scrollTop = (e.target.scrollingElement as HTMLElement).scrollTop;
+    });
   });
 
   async function onCollect(file: any) {
@@ -40,11 +57,16 @@
 
     toast.show(
       res.ok,
-      'Added to collections',
-      'Failed to add to collections. Please check the ComfyUI server.'
+      'Added to Saves',
+      'Failed to add to Saves. Please check the ComfyUI server.'
     );
   }
 
+  async function scrollToTop() {
+    window.scrollTo(0, 0);
+  }
+
+
   async function onDelete(file: any) {
     const ret = confirm('You want to delete this file? ' + file.name);
     if (!ret) {
@@ -82,33 +104,40 @@
   }
 </script>
 
-<div class="max-w-full text-sm breadcrumbs">
-  <ul>
+<div class="max-w-full text-sm breadcrumbs flex flex-row ml-4">
+  <ul class="basis-3/4">
     <li><button on:click={() => onClickPath(-1)}>Root</button></li>
     {#each (folderPath || '').split('/') as path, index}
       <li><button on:click={() => onClickPath(index)}>{path}</button></li>
     {/each}
   </ul>
+
+  <input
+    type="text"
+    placeholder="Filter by filename"
+    bind:value={searchQuery}
+    class="input input-bordered w-full h-full rounded-none border-slate-600 text-sm basis-1/4"
+  />
 </div>
 
-<div class="grid grid-cols-4 lg:grid-cols-6 gap-2 bg-base-300">
-  {#each files.slice(0, showCursor) as file}
+<div class="grid grid-cols-4 lg:grid-cols-6 gap-2">
+  {#each files.filter(f => searchRegex.test(f.name.toLowerCase())).slice(0, showCursor) as file}
     {#if ['dir', 'image', 'video', 'json'].includes(file.fileType)}
-      <div class="bg-base-100">
+      <div class="p-2 bg-info-content">
         <div class="flex items-center">
           <MediaShow
             file={file}
-            styleClass="w-full h-36"
+            styleClass="w-full h-16 sm:h-36"
             onClickDir={onClickDir}
           />
         </div>
 
-        <p class="font-bold max-h-12 leading-6 overflow-auto">{file.name}</p>
-        <p class="text-gray-500">{file.formattedDatetime}</p>
-        <p class="text-gray-500">{file.formattedSize}</p>
+        <p class="font-bold max-h-12 leading-6 overflow-auto mt-1">{file.name}</p>
+        <p class="hidden sm:block text-gray-500 text-xs">{file.formattedDatetime}</p>
+        <p class="hidden sm:block text-gray-500 text-xs">{file.formattedSize}</p>
 
         <div class="">
-          {#if comfyApp}
+          {#if comfyApp && file.type != 'dir'}
             <button
               class="btn btn-link btn-sm p-0 no-underline text-accent"
               on:click={async () => await onLoadWorkflow(file, comfyApp, toast)}
@@ -117,11 +146,16 @@
           <button
             class="btn btn-link btn-sm p-0 no-underline text-accent"
             on:click={async () => await onCollect(file)}
-          >Collect</button>
+          >Save</button>
           <button
-            class="btn btn-link btn-sm p-0 no-underline text-error"
+            class="btn btn-link btn-sm p-0 no-underline text-error float-right"
             on:click={async () => await onDelete(file)}
-          >Delete</button>
+          >
+            <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M16 2v4h6v2h-2v14H4V8H2V6h6V2h8zm-2 2h-4v2h4V4zm0 4H6v12h12V8h-4zm-5 2h2v8H9v-8zm6 0h-2v8h2v-8z" fill="#f77"/>
+            </svg>
+            Delete
+          </button>
         </div>
       </div>
     {/if}
@@ -131,7 +165,19 @@
 {#if files.length === 0}
   <div class="w-full h-full flex items-center justify-center">
     <span class="font-bold text-4xl">
-      It's empty here.
+      {#if loaded }
+        It's empty here.
+      {:else }
+        Loading ...
+      {/if}
     </span>
   </div>
 {/if}
+
+{#if scrollTop >= 300}
+<button class="fixed right-10 bottom-10 w-10 h-10 flex justify-center items-center	rounded-full bg-slate-50" on:click={scrollToTop}>
+  <svg class="w-5 h-5 icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#333333" d="M572.235 205.282v600.365a30.118 30.118 0 11-60.235 0V205.282L292.382 438.633a28.913 28.913 0 01-42.646 0 33.43 33.43 0 010-45.236l271.058-288.045a28.913 28.913 0 0142.647 0L834.5 393.397a33.43 33.43 0 010 45.176 28.913 28.913 0 01-42.647 0l-219.618-233.23z"/>
+  </svg>
+</button>
+{/if}

svelte/src/routes/MediaShow.svelte

@@ -32,13 +32,13 @@
         <img
           class="h-full w-full object-contain"
           loading="lazy"
-          src={file.url}
+          src={file.previewUrl}
           alt={file.name} />
       {/if}
       {#if file.fileType === 'video'}
         <video
           class="h-full w-full object-contain pb-0.5 border-0.5 border-black"
-          src={file.url}
+          src={file.previewUrl}
           loop={true}
           autoplay={true}
           muted={true}

svelte/src/routes/ModelsTab.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import DownloadHistory from "./DownloadHistory.svelte";
+  import NewDownload from "./NewDownload.svelte";
+
+  export let comfyUrl: string;
+
+  let activeTab = 'downloadNewModel';
+
+  $: activeTabClass = function(tab: string) {
+    return tab === activeTab ? 'active' : '';
+  }
+
+  async function onClickTab(tab: string) {
+    activeTab = tab;
+  }
+</script>
+
+<div class="drawer md:drawer-open">
+  <input type="checkbox" class="drawer-toggle" />
+  <div class="drawer-content flex flex-col pl-2">
+    {#if activeTab === 'downloadHistory'}
+      <DownloadHistory {comfyUrl} />
+    {:else}
+      <NewDownload
+        comfyUrl={comfyUrl}
+        afterStartingDownload={() => onClickTab('downloadHistory')}
+      />
+    {/if}
+  </div>
+
+  <div class="drawer-side border-r border-base-content pr-2">
+    <ul class="menu bg-base-200 w-56 p-0 [&_li>*]:rounded-none">
+      <li  class="h-10">
+        <button
+          class="{activeTabClass('downloadNewModel')} pl-2 btn-outline btn-accent"
+          on:click={() => onClickTab('downloadNewModel')}
+        >
+          Download new model
+        </button>
+      </li>
+      <li  class="h-10">
+        <button
+          class="{activeTabClass('downloadHistory')} pl-2 btn-outline btn-accent"
+          on:click={() => onClickTab('downloadHistory')}
+        >
+          Download History
+        </button>
+      </li>
+    </ul>
+  </div>
+</div>

svelte/src/routes/Navbar.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { setLocalConfig } from "./utils";
+
+  export let activeTab = 'outputs';
+
+  $: activeTabClass = function(tab: string) {
+    return tab === activeTab ? 'active' : '';
+  }
+
+  async function onClickTab(tab: string) {
+    activeTab = tab;
+
+    setLocalConfig('lastTab', tab);
+  }
+</script>
+
+<div class="flex">
+  <ul class="menu menu-horizontal bg-base-200 rounded-box flex-1">
+    <li>
+      <button
+        class="{activeTabClass('outputs')}"
+        on:click={() => onClickTab('outputs')}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+        </svg>
+        Outputs
+      </button>
+    </li>
+
+    <li>
+      <button
+        class="{activeTabClass('collections')}"
+        on:click={() => onClickTab('collections')}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
+        </svg>
+        Saves
+      </button>
+    </li>
+    <li>
+      <button
+        class="{activeTabClass('sources')}"
+        on:click={() => onClickTab('sources')}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12.75 19.5v-.75a7.5 7.5 0 00-7.5-7.5H4.5m0-6.75h.75c7.87 0 14.25 6.38 14.25 14.25v.75M6 18.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+        </svg>
+        Sources
+      </button>
+    </li>
+    <li>
+      <button
+        class="{activeTabClass('models')}"
+        on:click={() => onClickTab('models')}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+        </svg>
+        Models
+      </button>
+    </li>
+  </ul>
+
+  <div class="hidden sm:flex flex-0 items-center justify-center p-2">
+    <a href="https://github.com/talesofai/comfyui-browser" target="_blank">
+      <img src="https://img.shields.io/github/stars/talesofai/comfyui-browser?style=social" alt="stars - comfyui-browser">
+      </a>
+  </div>
+</div>

svelte/src/routes/NewDownload.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import Toast from "./Toast.svelte";
+
+  export let comfyUrl: string;
+  export let afterStartingDownload: Function;
+
+  const modelTypes = [
+    { text: 'Checkpoint', value: 'checkpoints' },
+    { text: 'LoRA', value: 'loras' },
+    { text: 'VAE', value: 'vae' },
+    { text: 'Embedding', value: 'embeddings' },
+    { text: 'ControlNet', value: 'controlnet' },
+  ];
+
+  let toast: Toast;
+  let downloadUrl = '';
+  let modelType = modelTypes[0].value;
+  let filename = '';
+  let overwrite = false;
+
+  async function onClickDownload() {
+    if (! downloadUrl) {
+      toast.show(false, '', 'Invalid download URL');
+      return;
+    }
+
+    const res = await fetch(comfyUrl + '/browser/downloads', {
+      method: 'POST',
+      body: JSON.stringify({
+        download_url: downloadUrl,
+        save_in: modelType,
+        filename: filename,
+        overwrite: overwrite,
+      }),
+    });
+
+    toast.show(
+      res.ok,
+      'Download started',
+      'Failed'
+    );
+
+    if (afterStartingDownload) {
+      afterStartingDownload();
+    }
+  }
+</script>
+
+<div class="space-y-4">
+  <div class="form-control w-full max-w-2xl">
+    <div class="label">
+      <span class="label-text">* Download URL</span>
+    </div>
+    <input
+      type="text"
+      placeholder="https://civitai.com/api/download/models/35516"
+      class="input input-bordered w-full max-w-2xl"
+      bind:value={downloadUrl}
+    />
+  </div>
+
+  <div class="form-control w-full max-w-2xl">
+    <div class="label">
+      <span class="label-text">Filename(leave this blank if you want to auto detect this)</span>
+    </div>
+    <input
+      type="text"
+      class="input input-bordered w-full max-w-2xl"
+      bind:value={filename}
+    />
+  </div>
+
+
+  <div class="form-control w-full">
+    <div class="label">
+      <span class="label-text">* Select the modal type</span>
+    </div>
+    <select
+      class="select select-bordered max-w-xs"
+      bind:value={modelType}
+    >
+      {#each modelTypes as mt}
+        <option value={mt.value}>{mt.text}</option>
+      {/each}
+    </select>
+  </div>
+
+  <div class="form-control w-full">
+    <label class="cursor-pointer label max-w-xs">
+      <span class="label-text">Overwrite the exist file?</span>
+      <input type="checkbox" bind:checked={overwrite} class="checkbox checkbox-secondary" />
+    </label>
+  </div>
+
+  <button
+    class="btn btn-secondary btn-outline"
+    on:click={onClickDownload}
+  >
+    Download
+  </button>
+</div>
+
+<Toast bind:this={toast} />

svelte/src/routes/SourcesTab.svelte

@@ -7,32 +7,38 @@
 
   let sources: Array<any> = [];
   let toast: Toast;
-  let selectedSource: any;
   let sourceEditModal: any;
   let inputRepoUrl: string;
-  let addWaiting = false;
+  let waitingForUrl: string = '';
+  let folderPath = '';
+  let allSources: Array<any> = [];
+  let fileList: FilesList;
+  let syncingSouce: any;
 
-  async function refreshSources(selectGitUrl: string | null = null) {
+  async function refreshSources() {
     const res = await fetch(comfyUrl + '/browser/sources');
     const ret = await res.json();
-    sources = ret.sources;
+    sources = ret.sources.map((s: any) => {
+      s.homepage = '';
+      if (s.url.startsWith('https://')) {
+        s.homepage = s.url;
+        if (s.homepage.endsWith('.git')) {
+          s.homepage = s.homepage.slice(0, -4);
+        }
+      }
 
-    if (selectGitUrl) {
-      selectGitUrl = selectGitUrl.trim();
-      selectedSource = sources.find(s => s.url == selectGitUrl);
-    }
-
-    if (! selectedSource) {
-      selectedSource = sources[0];
-    }
+      return s;
+    });
   }
 
   onMount(async () => {
-    await refreshSources();
+    refreshSources();
+    getAllSources();
   });
 
-  function onClickAddSource(source: any) {
-    selectedSource = source;
+  function onClickSource(source: any) {
+    console.log(folderPath);
+    folderPath = source.name;
   }
 
   async function onClickDeleteSource(source: any) {
@@ -46,7 +52,8 @@
     });
 
     if (res.ok) {
-      await refreshSources();
+      refreshSources();
+      fileList.refresh();
     }
     toast.show(
       res.ok,
@@ -55,27 +62,46 @@
     );
   }
 
+  async function onClickSyncSource(source: any) {
+    syncingSouce = source;
+    const res = await fetch(comfyUrl + `/browser/sources/sync/${source.name}`, {
+      method: 'POST',
+    });
+    syncingSouce = null;
+
+    if (res.ok) {
+      refreshSources();
+      fileList.refresh();
+    }
+    toast.show(
+      res.ok,
+      'Synced ' + [source.author, source.name].join('/'),
+      'Failed to sync this source. Please check the ComfyUI server.',
+    );
+  }
+
   function openEditModal() {
     sourceEditModal.showModal();
   }
 
-  async function addSource() {
-    if (! inputRepoUrl) {
-      toast.show(false, '', 'missing Git URL', 1000);
+  async function addSource(url: string) {
+    if (! url) {
+      toast.show(false, '', 'missing Git URL');
       return;
     }
 
-    addWaiting = true;
+    waitingForUrl = url;
     const res = await fetch(comfyUrl + '/browser/sources', {
       method: 'POST',
       body: JSON.stringify({
-        repo_url: inputRepoUrl,
+        repo_url: url,
       }),
     });
-    addWaiting = false;
+    waitingForUrl = '';
 
     if (res.ok) {
-      await refreshSources(inputRepoUrl);
+      refreshSources();
+      fileList.refresh();
     }
     toast.show(
       res.ok,
@@ -84,46 +110,70 @@
     );
     sourceEditModal.close();
   }
+
+  async function getAllSources() {
+    const res = await fetch(comfyUrl + '/browser/sources/all');
+    const ret = await res.json();
+    allSources = ret.sources;
+  }
 </script>
 
 <div class="drawer md:drawer-open">
   <input type="checkbox" class="drawer-toggle" />
-  <div class="drawer-content flex flex-col">
+  <div class="drawer-content flex flex-col pl-2">
     <FilesList
       folderType="sources"
-      folderPath={selectedSource?.name}
+      bind:folderPath={folderPath}
       comfyUrl={comfyUrl}
       toast={toast}
+      bind:this={fileList}
     />
   </div>
 
-  <div class="drawer-side">
+  <div class="drawer-side border-r border-base-content pr-2">
     <ul class="menu bg-base-200 w-56 p-0 [&_li>*]:rounded-none">
-      <li class="w-full">
-        <div class="w-full flex items-center justify-between">
-          <button
-            class="btn btn-outline btn-primary w-3/4 pl-0 justify-start text-left"
-            on:click={openEditModal}
-          >Add new source</button>
-        </div>
+      <li  class="h-10">
+        <button class="pl-2 btn-outline btn-accent" on:click={openEditModal}>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" data-slot="icon" class="w-6 h-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+          </svg>
+          Add new source
+        </button>
       </li>
 
       {#each sources as source}
-        <li class="w-full">
-          <div class="w-full {source == selectedSource ? 'bg-success' : ''} flex items-center justify-between">
-            <button
-              class="btn w-3/4 pl-0 justify-start text-left"
-              on:click={() => onClickAddSource(source)}
-            >{source.name}</button>
-            <button
-              class="btn w-1/4"
-              on:click={() => onClickDeleteSource(source)}
+        <li class="h-14">
+          {#if source.homepage }
+            <a
+              class="h-14 px-0.5 flex items-center justify-center"
+              href={source.homepage}
+              target="_blank"
             >
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+              <!--TODO: using more general icon instead of GitHub-->
+              <svg class="w-6 h-6 fill-accent" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 30 30">
+                <path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"></path>
               </svg>
-            </button>
-          </div>
+            </a>
+          {:else}
+            <div class="h-14 px-0.5 flex items-center justify-center">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" data-slot="icon" class="w-6 h-6 text-accent">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z" />
+              </svg>
+            </div>
+          {/if}
+          <button
+            class="pl-2 h-14 line-clamp-2 overflow-hidden {source.name == folderPath.split('/')[0] ? 'active' : ''}"
+            on:click={() => onClickSource(source)}
+          ><p class="w-40 truncate whitespace-normal">{source.name}</p></button>
+          <button
+            class="h-14 right-0 fixed flex items-center justify-center"
+            on:click={() => onClickSyncSource(source)}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+              class="{syncingSouce == source ? 'text-accent' : ''} w-6 h-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+            </svg>
+          </button>
         </li>
       {/each}
     </ul>
@@ -134,18 +184,71 @@
 
 <!-- Open the modal using ID.showModal() method -->
 <dialog class="modal" bind:this={sourceEditModal}>
-  <div class="modal-box">
-    <input
-      type="text"
-      bind:value={inputRepoUrl}
-      placeholder="Input Git remote address of the source"
-      class="input input-bordered w-full max-w-xs"
-    />
-    <button
-      class="btn"
-      on:click={addSource}
-      disabled={addWaiting}
-    >{addWaiting ? 'Adding...' : 'Add'}</button>
+  <div class="modal-box w-5/6 max-w-5xl">
+    <div class="mb-2 flex space-x-2">
+      <input
+        type="text"
+        bind:value={inputRepoUrl}
+        placeholder="https://github.com/comfyanonymous/ComfyUI_examples"
+        class="grow input input-bordered"
+      />
+      <button
+        class="btn btn-outline btn-primary"
+        on:click={() => addSource(inputRepoUrl)}
+        disabled={waitingForUrl.length > 0 || !inputRepoUrl}
+      >{waitingForUrl === inputRepoUrl && inputRepoUrl ? 'Subscribing...' : 'Subscribe'}</button>
+    </div>
+
+    <div>
+      {#if allSources.length === 0}
+        <div class="w-full h-full flex items-center justify-center">
+          <span class="font-bold text-4xl">
+            Loading ...
+          </span>
+        </div>
+      {/if}
+      <ul class="space-y-1">
+        {#each allSources as s}
+          <li class="flex flex-nowrap space-x-2 h-20 border-b border-b-base-content">
+            <img
+              src={`https://github.com/${s.author}.png`}
+              alt={s.author} />
+            <div class="w-80">
+              <a class="link link-warning text-lg no-underline" href={s.url} target="_blank">
+                <p class="line-clamp-2">{s.author}/{s.title}</p>
+              </a>
+              <a href={s.url} target="_blank">
+                <img src={`https://img.shields.io/github/stars${(new URL(s.url)).pathname}?style=flat-square`} alt="stars">
+              </a>
+            </div>
+            <div class="w-72 grow overflow-auto">
+              <p>{s.description}</p>
+            </div>
+            <div class="flex items-center justify-center">
+              <button
+                class="btn btn-outline btn-primary no-underline text-accent"
+                on:click={() => addSource(s.url)}
+                disabled={waitingForUrl.length > 0}
+              >
+                {waitingForUrl === s.url ? 'Subscribing...' : 'Subscribe'}
+              </button>
+            </div>
+          </li>
+        {/each}
+      </ul>
+    </div>
+    <p class="mt-1 text-xs text-gray-500">
+      You could open
+      <a class="text-accent" target="_blank" href="https://github.com/talesofai/comfyui-browser/edit/main/data/sources.json">
+        a pull request
+      </a>
+      or submit
+      <a class="text-accent" target="_blank" href="https://github.com/talesofai/comfyui-browser/issues/new?assignees=tzwm&labels=workflow-repo&projects=&template=new-workflow-repository.md&title=New+workflow+repo%3A">
+        an issue
+      </a>
+      to add your workflow repository here.<br />
+      Thank you to everyone who contributes to the open community!
+    </p>
   </div>
   <form method="dialog" class="modal-backdrop">
     <button>close</button>

svelte/src/routes/Tabs.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  export let activeTab = 'outputs';
-
-  $: activeTabClass = function(tab: string) {
-    return tab === activeTab ? 'tab-active' : '';
-  }
-
-  async function onClickTab(tab: string) {
-    activeTab = tab;
-  }
-</script>
-
-<div role="tablist" class="tabs tabs-boxed sticky top-0">
-  <button
-    role="tab"
-    class="tab {activeTabClass('outputs')}"
-    on:click={() => onClickTab('outputs')}
-  >
-    Outputs
-  </button>
-  <button
-    role="tab"
-    class="tab {activeTabClass('collections')}"
-    on:click={() => onClickTab('collections')}
-  >
-    Collections
-  </button>
-  <button
-    role="tab"
-    class="tab {activeTabClass('sources')}"
-    on:click={() => onClickTab('sources')}
-  >
-    Sources
-  </button>
-</div>

svelte/src/routes/utils.ts

@@ -3,30 +3,62 @@ import type Toast from './Toast.svelte';
 
 export type FOLDER_TYPES = 'outputs' | 'collections' | 'sources';
 
+export const IMAGE_EXTS = ['png', 'webp', 'jpeg', 'jpg', 'gif'];
+export const VIDEO_EXTS = ['mp4', 'webm', 'mov', 'avi', 'mkv'];
+export const JSON_EXTS = ['json'];
+
+const localStorageKey = 'comfyui-browser';
+
+function findFile(filename: string, exts: Array<string>, files: Array<any>) {
+  let fn: any = filename.split('.');
+  fn.pop();
+  fn = fn.join('.');
+  return files.find((f: any) => {
+    const fa = f.name.split('.');
+    const extname = fa.pop().toLowerCase();
+    const name = fa.join('.');
+
+    return name === fn && exts.includes(extname);
+  });
+}
+
 function processFile(
   file: any,
   folderType: FOLDER_TYPES,
   comfyUrl: string,
+  files: Array<any>,
 ) {
   const extname = file.name.split('.').pop().toLowerCase();
-  file['fileType'] = 'json';
-  if (['png', 'webp', 'jpeg', 'jpg', 'gif'].includes(extname)) {
+  if (JSON_EXTS.includes(extname)) {
+    file['fileType'] = 'json';
+    if (findFile(file.name, IMAGE_EXTS.concat(VIDEO_EXTS), files)) {
+      return;
+    }
+  }
+  if (IMAGE_EXTS.includes(extname)) {
     file['fileType'] = 'image';
   }
-  if (['mp4', 'webm', 'mov', 'avi', 'mkv'].includes(extname)) {
+  if (VIDEO_EXTS.includes(extname)) {
     file['fileType'] = 'video';
   }
+  if (! file['fileType']) {
+    return;
+  }
 
   file['url'] = `${comfyUrl}/browser/files/view?folder_type=${folderType}&filename=${file.name}&folder_path=${file.folder_path}`;
+  if (['image', 'video'].includes(file['fileType'])) {
+    file['previewUrl'] = `${comfyUrl}/browser/files/view?folder_type=${folderType}&filename=${file.name}&folder_path=${file.folder_path}`;
+
+    let jsonFile = findFile(file.name, JSON_EXTS, files);
+    if (jsonFile) {
+      file['url'] = `${comfyUrl}/browser/files/view?folder_type=${folderType}&filename=${jsonFile.name}&folder_path=${jsonFile.folder_path}`;
+    }
+  }
 
   const d = dayjs.unix(file.created_at);
-  file['formattedDatetime'] = d.format('YYYY-MM-DD HH-mm-ss');
+  file['formattedDatetime'] = d.format('YYYY-MM-DD HH:mm:ss');
+  file['formattedSize'] = formatFileSize(file['bytes']);
 
-  if (file['bytes'] / 1024 / 1024 > 1) {
-    file['formattedSize'] = (file['bytes'] / 1024 / 1024).toFixed(2) + ' MB';
-  } else {
-    file['formattedSize'] = Math.round(file['bytes'] / 1024) + ' KB';
-  }
   return file;
 }
 
@@ -57,15 +89,21 @@ export async function fetchFiles(
   const ret = await res.json();
 
   let files = ret.files;
+  let newFiles: Array<any> = [];
   files.forEach((f: any) => {
+    let newFile;
     if (f.type === 'dir') {
-      f = processDir(f);
+      newFile = processDir(f);
     } else {
-      f = processFile(f, folderType, comfyUrl);
+      newFile = processFile(f, folderType, comfyUrl, files);
+    }
+
+    if (newFile) {
+      newFiles.push(newFile);
     }
   });
 
-  return files;
+  return newFiles;
 }
 
 export function onScroll(showCursor: number, filesLen: number) {
@@ -98,5 +136,31 @@ export async function onLoadWorkflow(file: any, comfyApp: any, toast: Toast) {
   }
   await comfyApp.handleFile(fileObj);
 
-  toast.show(false, 'Loaded', 'No workflow found here', 1000);
+  toast.show(false, 'Loaded', 'No workflow found here');
+}
+
+
+export function getLocalConfig() {
+  let localConfigStr = localStorage.getItem(localStorageKey);
+  let localConfig: any = {};
+
+  if (localConfigStr) {
+    localConfig = JSON.parse(localConfigStr);
+  }
+
+  return localConfig;
+}
+
+export function setLocalConfig(key: string, value: any) {
+  let localConfig = getLocalConfig();
+  localConfig[key] = value;
+  localStorage.setItem(localStorageKey, JSON.stringify(localConfig));
+}
+
+export function formatFileSize(size: number) {
+  if (size / 1024 / 1024 > 1) {
+    return (size / 1024 / 1024).toFixed(2) + ' MB';
+  } else {
+    return Math.round(size / 1024) + ' KB';
+  }
 }

svelte/tailwind.config.js

@@ -6,7 +6,7 @@ export default {
   },
   plugins: [require("daisyui")],
   daisyui: {
-    themes: ["halloween"],
+    themes: ["forest"],
   },
 }
 

utils.py

@@ -0,0 +1,151 @@
+import json
+from os import path, scandir
+import subprocess
+import time
+from typing import TypedDict, List
+
+import folder_paths
+
+browser_path = path.dirname(__file__)
+collections_path = path.join(browser_path, 'collections')
+config_path = path.join(browser_path, 'config.json')
+sources_path = path.join(browser_path, 'sources')
+download_logs_path = path.join(browser_path, 'download_logs')
+
+image_extensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp']
+video_extensions = ['.mp4', '.mov', '.avi', '.webm', '.mkv']
+
+info_file_suffix = '.info'
+
+git_remote_name = 'origin'
+
+class FileInfoDict(TypedDict):
+    type: str
+    name: str
+    bytes: int
+    created_at: float
+    folder_path: str
+    notes: str
+
+def log(message):
+    print('[comfyui-browser] ' + message)
+
+def run_cmd(cmd, run_path, log_cmd=True, log_code=True, log_message=True):
+    if log_cmd:
+        log(f'running: {cmd}')
+
+    ret = subprocess.run(
+        f'cd {run_path} && {cmd}',
+        shell=True,
+        stdout=subprocess.PIPE,
+        stderr=subprocess.PIPE,
+        encoding="UTF-8"
+    )
+    if log_code:
+        if ret.returncode == 0:
+            log('successed')
+        else:
+            log('failed')
+    if log_message:
+        if (len(ret.stdout) > 0 or len(ret.stderr) > 0):
+            log(ret.stdout + ret.stderr)
+
+    return ret
+
+# folder_type = 'outputs', 'collections', 'sources'
+def get_parent_path(folder_type: str):
+    if folder_type == 'collections':
+        return collections_path
+    if folder_type == 'sources':
+        return sources_path
+
+    # outputs
+    return folder_paths.output_directory
+
+# folder_type = 'outputs', 'collections', 'sources'
+def get_target_folder_files(folder_path: str, folder_type: str = 'outputs'):
+    if '..' in folder_path:
+        return None
+
+    parent_path = get_parent_path(folder_type)
+    files: List[FileInfoDict] = []
+    target_path = path.join(parent_path, folder_path)
+
+    if not path.exists(target_path):
+        return []
+
+    folder_listing = scandir(target_path)
+    folder_listing = sorted(folder_listing, key=lambda f: (f.is_file(), -f.stat().st_ctime))
+    for item in folder_listing:
+        if not path.exists(item.path):
+            continue
+
+        name = path.basename(item.path)
+        ext = path.splitext(name)[1].lower()
+        if name == '' or name[0] == '.':
+            continue
+        if item.is_file():
+            if not (ext in (image_extensions + video_extensions + ['.json'])):
+                continue
+
+        created_at = item.stat().st_ctime
+        info_file_path = get_info_filename(item.path)
+        info_data = {}
+        if path.exists(info_file_path):
+            with open(info_file_path, 'r') as f:
+                info_data = json.load(f)
+        if item.is_file():
+            bytes = item.stat().st_size
+            files.append({
+                "type": "file",
+                "name": name,
+                "bytes": bytes,
+                "created_at": created_at,
+                "folder_path": folder_path,
+                "notes": info_data.get("notes", "")
+            })
+        elif item.is_dir():
+            files.append({
+                "type": "dir",
+                "name": name,
+                "bytes": 0,
+                "created_at": created_at,
+                "folder_path": folder_path,
+                "notes": info_data.get("notes", "")
+            })
+
+    return files
+
+def get_info_filename(filename):
+    return path.splitext(filename)[0] + info_file_suffix
+
+def add_uuid_to_filename(filename):
+    name, ext = path.splitext(filename)
+    return f'{name}_{int(time.time())}{ext}'
+
+def get_config():
+    if not path.exists(config_path):
+        return {}
+
+    with open(config_path, 'r') as f:
+        return json.load(f)
+
+def git_init(run_path = collections_path):
+    if not path.exists(path.join(run_path, '.git')):
+        run_cmd('git init', collections_path)
+
+    ret = run_cmd('git config user.name', collections_path,
+                  log_cmd=False, log_code=False, log_message=False)
+    if len(ret.stdout) == 0:
+        ret = run_cmd('whoami', collections_path,
+                      log_cmd=False, log_code=False, log_message=False)
+        username = ret.stdout.rstrip("\n")
+        run_cmd(f'git config user.name "{username}"', collections_path)
+
+    ret = run_cmd('git config user.email', collections_path,
+                  log_cmd=False, log_code=False, log_message=False)
+    if len(ret.stdout) == 0:
+        ret = run_cmd('hostname', collections_path,
+                      log_cmd=False, log_code=False, log_message=False)
+        hostname = ret.stdout.rstrip("\n")
+        run_cmd(f'git config user.email "{hostname}"', collections_path)

web/build/_app/immutable/chunks/scheduler.89bf212d.js

@@ -1 +0,0 @@
-function x(){}function w(t,n){for(const e in n)t[e]=n[e];return t}function j(t){return t()}function F(){return Object.create(null)}function E(t){t.forEach(j)}function P(t){return typeof t=="function"}function S(t,n){return t!=t?n==n:t!==n||t&&typeof t=="object"||typeof t=="function"}let i;function U(t,n){return t===n?!0:(i||(i=document.createElement("a")),i.href=n,t===i.href)}function A(t){return Object.keys(t).length===0}function q(t,...n){if(t==null){for(const r of n)r(void 0);return x}const e=t.subscribe(...n);return e.unsubscribe?()=>e.unsubscribe():e}function B(t,n,e){t.$$.on_destroy.push(q(n,e))}function C(t,n,e,r){if(t){const o=m(t,n,e,r);return t[0](o)}}function m(t,n,e,r){return t[1]&&r?w(e.ctx.slice(),t[1](r(n))):e.ctx}function D(t,n,e,r){if(t[2]&&r){const o=t[2](r(e));if(n.dirty===void 0)return o;if(typeof o=="object"){const l=[],_=Math.max(n.dirty.length,o.length);for(let s=0;s<_;s+=1)l[s]=n.dirty[s]|o[s];return l}return n.dirty|o}return n.dirty}function G(t,n,e,r,o,l){if(o){const _=m(n,e,r,l);t.p(_,o)}}function H(t){if(t.ctx.length>32){const n=[],e=t.ctx.length/32;for(let r=0;r<e;r++)n[r]=-1;return n}return-1}let f;function h(t){f=t}function y(){if(!f)throw new Error("Function called outside component initialization");return f}function I(t){y().$$.on_mount.push(t)}function J(t){y().$$.after_update.push(t)}const a=[],g=[];let u=[];const p=[],k=Promise.resolve();let b=!1;function v(){b||(b=!0,k.then(M))}function K(){return v(),k}function O(t){u.push(t)}function L(t){p.push(t)}const d=new Set;let c=0;function M(){if(c!==0)return;const t=f;do{try{for(;c<a.length;){const n=a[c];c++,h(n),z(n.$$)}}catch(n){throw a.length=0,c=0,n}for(h(null),a.length=0,c=0;g.length;)g.pop()();for(let n=0;n<u.length;n+=1){const e=u[n];d.has(e)||(d.add(e),e())}u.length=0}while(a.length);for(;p.length;)p.pop()();b=!1,d.clear(),h(t)}function z(t){if(t.fragment!==null){t.update(),E(t.before_update);const n=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,n),t.after_update.forEach(O)}}function N(t){const n=[],e=[];u.forEach(r=>t.indexOf(r)===-1?n.push(r):e.push(r)),e.forEach(r=>r()),u=n}export{J as a,g as b,C as c,D as d,B as e,U as f,H as g,L as h,F as i,M as j,P as k,A as l,O as m,x as n,I as o,N as p,f as q,E as r,S as s,K as t,G as u,h as v,j as w,a as x,v as y};

web/build/_app/immutable/chunks/scheduler.eb55a42e.js

@@ -0,0 +1 @@
+function x(){}function w(t,n){for(const e in n)t[e]=n[e];return t}function j(t){return t()}function D(){return Object.create(null)}function E(t){t.forEach(j)}function F(t){return typeof t=="function"}function P(t,n){return t!=t?n==n:t!==n||t&&typeof t=="object"||typeof t=="function"}let i;function S(t,n){return t===n?!0:(i||(i=document.createElement("a")),i.href=n,t===i.href)}function U(t){return Object.keys(t).length===0}function q(t,...n){if(t==null){for(const r of n)r(void 0);return x}const e=t.subscribe(...n);return e.unsubscribe?()=>e.unsubscribe():e}function A(t,n,e){t.$$.on_destroy.push(q(n,e))}function B(t,n,e,r){if(t){const o=m(t,n,e,r);return t[0](o)}}function m(t,n,e,r){return t[1]&&r?w(e.ctx.slice(),t[1](r(n))):e.ctx}function C(t,n,e,r){if(t[2]&&r){const o=t[2](r(e));if(n.dirty===void 0)return o;if(typeof o=="object"){const l=[],_=Math.max(n.dirty.length,o.length);for(let s=0;s<_;s+=1)l[s]=n.dirty[s]|o[s];return l}return n.dirty|o}return n.dirty}function G(t,n,e,r,o,l){if(o){const _=m(n,e,r,l);t.p(_,o)}}function H(t){if(t.ctx.length>32){const n=[],e=t.ctx.length/32;for(let r=0;r<e;r++)n[r]=-1;return n}return-1}let f;function h(t){f=t}function g(){if(!f)throw new Error("Function called outside component initialization");return f}function I(t){g().$$.on_mount.push(t)}function J(t){g().$$.after_update.push(t)}function K(t){g().$$.on_destroy.push(t)}const a=[],y=[];let u=[];const p=[],k=Promise.resolve();let b=!1;function v(){b||(b=!0,k.then(z))}function L(){return v(),k}function O(t){u.push(t)}function N(t){p.push(t)}const d=new Set;let c=0;function z(){if(c!==0)return;const t=f;do{try{for(;c<a.length;){const n=a[c];c++,h(n),M(n.$$)}}catch(n){throw a.length=0,c=0,n}for(h(null),a.length=0,c=0;y.length;)y.pop()();for(let n=0;n<u.length;n+=1){const e=u[n];d.has(e)||(d.add(e),e())}u.length=0}while(a.length);for(;p.length;)p.pop()();b=!1,d.clear(),h(t)}function M(t){if(t.fragment!==null){t.update(),E(t.before_update);const n=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,n),t.after_update.forEach(O)}}function Q(t){const n=[],e=[];u.forEach(r=>t.indexOf(r)===-1?n.push(r):e.push(r)),e.forEach(r=>r()),u=n}export{J as a,y as b,B as c,C as d,A as e,S as f,H as g,N as h,K as i,O as j,D as k,z as l,F as m,x as n,I as o,U as p,Q as q,E as r,P as s,L as t,G as u,f as v,h as w,j as x,a as y,v as z};

web/build/_app/immutable/chunks/singletons.802818fa.js

@@ -0,0 +1 @@
+import{n as d,s as E}from"./scheduler.eb55a42e.js";const u=[];function p(e,t=d){let n;const o=new Set;function r(s){if(E(e,s)&&(e=s,n)){const c=!u.length;for(const l of o)l[1](),u.push(l,e);if(c){for(let l=0;l<u.length;l+=2)u[l][0](u[l+1]);u.length=0}}}function i(s){r(s(e))}function a(s,c=d){const l=[s,c];return o.add(l),o.size===1&&(n=t(r,i)||d),s(e),()=>{o.delete(l),o.size===0&&n&&(n(),n=null)}}return{set:r,update:i,subscribe:a}}var g;const w=((g=globalThis.__sveltekit_h3barf)==null?void 0:g.base)??"";var k;const A=((k=globalThis.__sveltekit_h3barf)==null?void 0:k.assets)??w,R="1703650186236",I="sveltekit:snapshot",x="sveltekit:scroll",O="sveltekit:index",_={tap:1,hover:2,viewport:3,eager:4,off:-1},v=location.origin;function U(e){let t=e.baseURI;if(!t){const n=e.getElementsByTagName("base");t=n.length?n[0].href:e.URL}return t}function L(){return{x:pageXOffset,y:pageYOffset}}function f(e,t){return e.getAttribute(`data-sveltekit-${t}`)}const b={..._,"":_.hover};function m(e){let t=e.assignedSlot??e.parentNode;return(t==null?void 0:t.nodeType)===11&&(t=t.host),t}function N(e,t){for(;e&&e!==t;){if(e.nodeName.toUpperCase()==="A"&&e.hasAttribute("href"))return e;e=m(e)}}function P(e,t){let n;try{n=new URL(e instanceof SVGAElement?e.href.baseVal:e.href,document.baseURI)}catch{}const o=e instanceof SVGAElement?e.target.baseVal:e.target,r=!n||!!o||T(n,t)||(e.getAttribute("rel")||"").split(/\s+/).includes("external"),i=(n==null?void 0:n.origin)===v&&e.hasAttribute("download");return{url:n,external:r,target:o,download:i}}function V(e){let t=null,n=null,o=null,r=null,i=null,a=null,s=e;for(;s&&s!==document.documentElement;)o===null&&(o=f(s,"preload-code")),r===null&&(r=f(s,"preload-data")),t===null&&(t=f(s,"keepfocus")),n===null&&(n=f(s,"noscroll")),i===null&&(i=f(s,"reload")),a===null&&(a=f(s,"replacestate")),s=m(s);function c(l){switch(l){case"":case"true":return!0;case"off":case"false":return!1;default:return null}}return{preload_code:b[o??"off"],preload_data:b[r??"off"],keep_focus:c(t),noscroll:c(n),reload:c(i),replace_state:c(a)}}function h(e){const t=p(e);let n=!0;function o(){n=!0,t.update(a=>a)}function r(a){n=!1,t.set(a)}function i(a){let s;return t.subscribe(c=>{(s===void 0||n&&c!==s)&&a(s=c)})}return{notify:o,set:r,subscribe:i}}function S(){const{set:e,subscribe:t}=p(!1);let n;async function o(){clearTimeout(n);try{const r=await fetch(`${A}/_app/version.json`,{headers:{pragma:"no-cache","cache-control":"no-cache"}});if(!r.ok)return!1;const a=(await r.json()).version!==R;return a&&(e(!0),clearTimeout(n)),a}catch{return!1}}return{subscribe:t,check:o}}function T(e,t){return e.origin!==v||!e.pathname.startsWith(t)}function Y(e){e.client}const q={url:h({}),page:h({}),navigating:p(null),updated:S()};export{O as I,_ as P,x as S,I as a,P as b,V as c,q as d,w as e,N as f,U as g,Y as h,T as i,v as o,L as s};

web/build/_app/immutable/chunks/singletons.dcbe77e9.js

@@ -1 +0,0 @@
-import{n as d,s as E}from"./scheduler.89bf212d.js";const u=[];function p(e,t=d){let n;const o=new Set;function a(s){if(E(e,s)&&(e=s,n)){const c=!u.length;for(const l of o)l[1](),u.push(l,e);if(c){for(let l=0;l<u.length;l+=2)u[l][0](u[l+1]);u.length=0}}}function i(s){a(s(e))}function r(s,c=d){const l=[s,c];return o.add(l),o.size===1&&(n=t(a,i)||d),s(e),()=>{o.delete(l),o.size===0&&n&&(n(),n=null)}}return{set:a,update:i,subscribe:r}}var g;const w=((g=globalThis.__sveltekit_1npfnva)==null?void 0:g.base)??"";var k;const A=((k=globalThis.__sveltekit_1npfnva)==null?void 0:k.assets)??w,R="1702473899953",I="sveltekit:snapshot",x="sveltekit:scroll",O="sveltekit:index",_={tap:1,hover:2,viewport:3,eager:4,off:-1},v=location.origin;function U(e){let t=e.baseURI;if(!t){const n=e.getElementsByTagName("base");t=n.length?n[0].href:e.URL}return t}function L(){return{x:pageXOffset,y:pageYOffset}}function f(e,t){return e.getAttribute(`data-sveltekit-${t}`)}const b={..._,"":_.hover};function m(e){let t=e.assignedSlot??e.parentNode;return(t==null?void 0:t.nodeType)===11&&(t=t.host),t}function N(e,t){for(;e&&e!==t;){if(e.nodeName.toUpperCase()==="A"&&e.hasAttribute("href"))return e;e=m(e)}}function P(e,t){let n;try{n=new URL(e instanceof SVGAElement?e.href.baseVal:e.href,document.baseURI)}catch{}const o=e instanceof SVGAElement?e.target.baseVal:e.target,a=!n||!!o||T(n,t)||(e.getAttribute("rel")||"").split(/\s+/).includes("external"),i=(n==null?void 0:n.origin)===v&&e.hasAttribute("download");return{url:n,external:a,target:o,download:i}}function V(e){let t=null,n=null,o=null,a=null,i=null,r=null,s=e;for(;s&&s!==document.documentElement;)o===null&&(o=f(s,"preload-code")),a===null&&(a=f(s,"preload-data")),t===null&&(t=f(s,"keepfocus")),n===null&&(n=f(s,"noscroll")),i===null&&(i=f(s,"reload")),r===null&&(r=f(s,"replacestate")),s=m(s);function c(l){switch(l){case"":case"true":return!0;case"off":case"false":return!1;default:return null}}return{preload_code:b[o??"off"],preload_data:b[a??"off"],keep_focus:c(t),noscroll:c(n),reload:c(i),replace_state:c(r)}}function h(e){const t=p(e);let n=!0;function o(){n=!0,t.update(r=>r)}function a(r){n=!1,t.set(r)}function i(r){let s;return t.subscribe(c=>{(s===void 0||n&&c!==s)&&r(s=c)})}return{notify:o,set:a,subscribe:i}}function S(){const{set:e,subscribe:t}=p(!1);let n;async function o(){clearTimeout(n);try{const a=await fetch(`${A}/_app/version.json`,{headers:{pragma:"no-cache","cache-control":"no-cache"}});if(!a.ok)return!1;const r=(await a.json()).version!==R;return r&&(e(!0),clearTimeout(n)),r}catch{return!1}}return{subscribe:t,check:o}}function T(e,t){return e.origin!==v||!e.pathname.startsWith(t)}function Y(e){e.client}const q={url:h({}),page:h({}),navigating:p(null),updated:S()};export{O as I,_ as P,x as S,I as a,P as b,V as c,q as d,w as e,N as f,U as g,Y as h,T as i,v as o,L as s};

web/build/_app/immutable/nodes/0.6a97964b.js

@@ -1 +1 @@
-import{s as r,c as l,u as i,g as u,d as f}from"../chunks/scheduler.89bf212d.js";import{S as c,i as _,d as p,t as d}from"../chunks/index.911dd7e6.js";const m=!0;async function g({url:o}){let s="";return typeof process>"u"&&(s=o.searchParams.get("comfyUrl")||""),{comfyUrl:s}}const h=Object.freeze(Object.defineProperty({__proto__:null,load:g,prerender:m},Symbol.toStringTag,{value:"Module"}));function y(o){let s;const a=o[1].default,t=l(a,o,o[0],null);return{c(){t&&t.c()},l(e){t&&t.l(e)},m(e,n){t&&t.m(e,n),s=!0},p(e,[n]){t&&t.p&&(!s||n&1)&&i(t,a,e,e[0],s?f(a,e[0],n,null):u(e[0]),null)},i(e){s||(p(t,e),s=!0)},o(e){d(t,e),s=!1},d(e){t&&t.d(e)}}}function $(o,s,a){let{$$slots:t={},$$scope:e}=s;return o.$$set=n=>{"$$scope"in n&&a(0,e=n.$$scope)},[e,t]}class v extends c{constructor(s){super(),_(this,s,$,y,r,{})}}export{v as component,h as universal};
+import{s as r,c as l,u as i,g as u,d as f}from"../chunks/scheduler.eb55a42e.js";import{S as c,i as _,d as p,t as d}from"../chunks/index.71d39c14.js";const m=!0;async function g({url:o}){let s="";return typeof process>"u"&&(s=o.searchParams.get("comfyUrl")||""),{comfyUrl:s}}const h=Object.freeze(Object.defineProperty({__proto__:null,load:g,prerender:m},Symbol.toStringTag,{value:"Module"}));function y(o){let s;const a=o[1].default,t=l(a,o,o[0],null);return{c(){t&&t.c()},l(e){t&&t.l(e)},m(e,n){t&&t.m(e,n),s=!0},p(e,[n]){t&&t.p&&(!s||n&1)&&i(t,a,e,e[0],s?f(a,e[0],n,null):u(e[0]),null)},i(e){s||(p(t,e),s=!0)},o(e){d(t,e),s=!1},d(e){t&&t.d(e)}}}function $(o,s,a){let{$$slots:t={},$$scope:e}=s;return o.$$set=n=>{"$$scope"in n&&a(0,e=n.$$scope)},[e,t]}class v extends c{constructor(s){super(),_(this,s,$,y,r,{})}}export{v as component,h as universal};

web/build/_app/immutable/nodes/1.1c6f8e28.js

@@ -1 +1 @@
-import{s as x,n as _,e as S}from"../chunks/scheduler.89bf212d.js";import{S as j,i as q,g as f,m as d,s as y,h as g,j as h,n as v,f as u,c as C,a as m,x as $,o as E}from"../chunks/index.911dd7e6.js";import{d as H}from"../chunks/singletons.dcbe77e9.js";const P=()=>{const s=H;return{page:{subscribe:s.page.subscribe},navigating:{subscribe:s.navigating.subscribe},updated:s.updated}},k={subscribe(s){return P().page.subscribe(s)}};function w(s){var b;let t,r=s[0].status+"",o,n,i,c=((b=s[0].error)==null?void 0:b.message)+"",l;return{c(){t=f("h1"),o=d(r),n=y(),i=f("p"),l=d(c)},l(e){t=g(e,"H1",{});var a=h(t);o=v(a,r),a.forEach(u),n=C(e),i=g(e,"P",{});var p=h(i);l=v(p,c),p.forEach(u)},m(e,a){m(e,t,a),$(t,o),m(e,n,a),m(e,i,a),$(i,l)},p(e,[a]){var p;a&1&&r!==(r=e[0].status+"")&&E(o,r),a&1&&c!==(c=((p=e[0].error)==null?void 0:p.message)+"")&&E(l,c)},i:_,o:_,d(e){e&&(u(t),u(n),u(i))}}}function z(s,t,r){let o;return S(s,k,n=>r(0,o=n)),[o]}let F=class extends j{constructor(t){super(),q(this,t,z,w,x,{})}};export{F as component};
+import{s as x,n as _,e as S}from"../chunks/scheduler.eb55a42e.js";import{S as j,i as q,g as f,m as d,s as y,h as g,j as h,n as v,f as u,c as C,a as m,x as $,o as E}from"../chunks/index.71d39c14.js";import{d as H}from"../chunks/singletons.802818fa.js";const P=()=>{const s=H;return{page:{subscribe:s.page.subscribe},navigating:{subscribe:s.navigating.subscribe},updated:s.updated}},k={subscribe(s){return P().page.subscribe(s)}};function w(s){var b;let t,r=s[0].status+"",o,n,i,c=((b=s[0].error)==null?void 0:b.message)+"",l;return{c(){t=f("h1"),o=d(r),n=y(),i=f("p"),l=d(c)},l(e){t=g(e,"H1",{});var a=h(t);o=v(a,r),a.forEach(u),n=C(e),i=g(e,"P",{});var p=h(i);l=v(p,c),p.forEach(u)},m(e,a){m(e,t,a),$(t,o),m(e,n,a),m(e,i,a),$(i,l)},p(e,[a]){var p;a&1&&r!==(r=e[0].status+"")&&E(o,r),a&1&&c!==(c=((p=e[0].error)==null?void 0:p.message)+"")&&E(l,c)},i:_,o:_,d(e){e&&(u(t),u(n),u(i))}}}function z(s,t,r){let o;return S(s,k,n=>r(0,o=n)),[o]}let F=class extends j{constructor(t){super(),q(this,t,z,w,x,{})}};export{F as component};

web/build/_app/version.json

@@ -1 +1 @@
-{"version":"1702473899953"}
+{"version":"1703650186236"}

web/build/index.html

@@ -1,25 +1,29 @@
 <!doctype html>
-<html lang="en" data-theme="halloween">
+<html lang="en" data-theme="forest">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="./favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		
-		<link href="./_app/immutable/assets/0.33c58f17.css" rel="stylesheet">
-		<link rel="modulepreload" href="./_app/immutable/entry/start.c3c3ec90.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/scheduler.89bf212d.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/singletons.dcbe77e9.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/app.d0761c79.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/index.911dd7e6.js">
-		<link rel="modulepreload" href="./_app/immutable/nodes/0.dcc65c06.js">
-		<link rel="modulepreload" href="./_app/immutable/nodes/2.06e828b3.js">
+		<link href="./_app/immutable/assets/0.c831bdfa.css" rel="stylesheet">
+		<link rel="modulepreload" href="./_app/immutable/entry/start.8f35d572.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/scheduler.eb55a42e.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/singletons.802818fa.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/app.e7b61360.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/index.71d39c14.js">
+		<link rel="modulepreload" href="./_app/immutable/nodes/0.6a97964b.js">
+		<link rel="modulepreload" href="./_app/immutable/nodes/2.5b741140.js">
 	</head>
 	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">  <div role="tablist" class="tabs tabs-boxed sticky top-0"><button role="tab" class="tab tab-active">Outputs</button> <button role="tab" class="tab ">Collections</button> <button role="tab" class="tab ">Sources</button></div> <div class="max-w-full text-sm breadcrumbs"><ul><li><button data-svelte-h="svelte-1paj67z">Root</button></li> <li><button></button></li></ul></div> <div class="grid grid-cols-4 lg:grid-cols-6 gap-2 bg-base-300"></div> <div class="w-full h-full flex items-center justify-center" data-svelte-h="svelte-kth4bi"><span class="font-bold text-4xl">It&#39;s empty here.</span></div>  
+		<div style="display: contents">  <div class="flex"><ul class="menu menu-horizontal bg-base-200 rounded-box flex-1"><li><button class="active"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"></path></svg>
+        Outputs</button></li> <li><button class=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path></svg>
+        Saves</button></li> <li><button class=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12.75 19.5v-.75a7.5 7.5 0 00-7.5-7.5H4.5m0-6.75h.75c7.87 0 14.25 6.38 14.25 14.25v.75M6 18.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"></path></svg>
+        Sources</button></li> <li><button class=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"></path></svg>
+        Models</button></li></ul> <div class="hidden sm:flex flex-0 items-center justify-center p-2" data-svelte-h="svelte-1ihc90r"><a href="https://github.com/talesofai/comfyui-browser" target="_blank"><img src="https://img.shields.io/github/stars/talesofai/comfyui-browser?style=social" alt="stars - comfyui-browser"></a></div></div> <div class="max-w-full text-sm breadcrumbs flex flex-row ml-4"><ul class="basis-3/4"><li><button data-svelte-h="svelte-1paj67z">Root</button></li> <li><button></button></li></ul> <input type="text" placeholder="Filter by filename" class="input input-bordered w-full h-full rounded-none border-slate-600 text-sm basis-1/4" value=""></div> <div class="grid grid-cols-4 lg:grid-cols-6 gap-2"></div> <div class="w-full h-full flex items-center justify-center"><span class="font-bold text-4xl">It&#39;s empty here.</span></div>   
 			
 			<script>
 				{
-					__sveltekit_1npfnva = {
+					__sveltekit_h3barf = {
 						base: new URL(".", location).pathname.slice(0, -1),
 						env: {}
 					};
@@ -29,8 +33,8 @@
 					const data = [null,null];
 
 					Promise.all([
-						import("./_app/immutable/entry/start.c3c3ec90.js"),
-						import("./_app/immutable/entry/app.d0761c79.js")
+						import("./_app/immutable/entry/start.8f35d572.js"),
+						import("./_app/immutable/entry/app.e7b61360.js")
 					]).then(([kit, app]) => {
 						kit.start(app, element, {
 							node_ids: [0, 2],

web/index.js

@@ -4,32 +4,75 @@ import { api } from "../../scripts/api.js";
 
 const browserUrl = "./browser/web/index.html";
 
+const localStorageKey = 'comfyui-browser';
+
+function getLocalConfig() {
+  let localConfig = localStorage.getItem(localStorageKey);
+  if (localConfig) {
+    localConfig = JSON.parse(localConfig);
+  } else {
+    localConfig = {};
+  }
+
+  return localConfig;
+}
+
+function setLocalConfig(key, value) {
+  let localConfig = getLocalConfig();
+  localConfig[key] = value;
+  localStorage.setItem(localStorageKey, JSON.stringify(localConfig));
+}
+
 class BrowserDialog extends ComfyDialog {
   constructor() {
     super();
 
+    const localConfig = getLocalConfig();
+    let modalStyle = {
+      width: "70%",
+      height: "80%",
+      maxWidth: "100%",
+      maxHeight: "100%",
+      minWidth: "24%",
+      minHeight: "24%",
+      padding: "6px",
+      zIndex: 1000,
+      resize: 'auto',
+    };
+    const cs = localConfig.modalStyles;
+    if (cs) {
+      modalStyle.left = cs.left;
+      modalStyle.top = cs.top;
+      modalStyle.transform = cs.transform;
+      modalStyle.height = cs.height;
+      modalStyle.width = cs.width;
+    }
+
     this.element = $el("div.comfy-modal", {
       id: "comfy-browser-dialog",
       parent: document.body,
-      style: {
-        width: "100%",
-        height: "100%",
-        padding: "10px",
-      },
+      style: modalStyle,
     }, [
       $el("div.comfy-modal-content", {
         style: {
-          width: "inherit",
-          height: "inherit",
+          width: "100%",
+          height: "100%",
         },
       }, [
-        $el("div", {
-          $: (e) => (this.textElement = e), style: { height: "inherit",
+        $el("iframe", {
+          src: browserUrl + "?timestamp=" + Date.now(),
+          style: {
+            width: "100%",
+            height: "100%",
           },
         }),
         ...this.createButtons(),
       ]),
 		]);
+
+    new ResizeObserver(
+      this.onResize.bind(this)
+    ).observe(this.element);
   }
 
   createButtons() {
@@ -47,28 +90,121 @@ class BrowserDialog extends ComfyDialog {
         textContent: "Browse in new tab",
       }),
     ]);
+    const toggleSidePanelBtn = $el("button", {
+      type: "button",
+      textContent: "Side/Center",
+      onclick: () => this.toggleSidePanel(),
+    });
     return [
-      $el("div", {}, [
+      $el("div", {
+        style: {
+          marginTop: '10px'
+        }
+      }, [
         closeBtn,
         browseBtn,
+        toggleSidePanelBtn,
+        /*$el("span", {*/
+          /*textContent: "Tips: press 'B' to toggle me",*/
+          /*style: {*/
+            /*color: "var(--input-text)",*/
+            /*right: 0,*/
+            /*position: "absolute",*/
+            /*lineHeight: "28.5px",*/
+            /*marginRight: "2px",*/
+          /*},*/
+        /*}),*/
       ]),
     ];
   }
 
+  onResize() {
+    const e = this.element;
+    setLocalConfig('modalStyles', {
+      left: e.style.left,
+      top: e.style.top,
+      transform: e.style.transform,
+      height: e.style.height,
+      width: e.style.width,
+    });
+  }
+
+  toggleSidePanel() {
+    const e = this.element;
+    if (e.style.left === '0px') {
+      e.style.left = '';
+      e.style.top = '';
+      e.style.transform = '';
+      e.style.height = '85%';
+      e.style.width = '80%';
+    } else {
+      e.style.left = '0px';
+      e.style.top = '0px';
+      e.style.transform = 'translate(-10px, -10px)';
+      e.style.height = '100%';
+      e.style.width = '32%';
+    }
+
+    setLocalConfig('modalStyles', {
+      left: e.style.left,
+      top: e.style.top,
+      transform: e.style.transform,
+      height: e.style.height,
+      width: e.style.width,
+    });
+  }
+
   close() {
     this.element.style.display = "none";
   }
 
-  show(html) {
-    if (typeof html === "string") {
-      this.textElement.innerHTML = html;
-    } else {
-      this.textElement.replaceChildren(html);
-    }
+  show() {
     this.element.style.display = "flex";
   }
+
+  toggle() {
+    const e = this.element;
+    if (e.style.display === "none") {
+      this.show();
+    } else {
+      this.close();
+    }
+  }
 }
 
+function showToast(text, onClick) {
+  const toastId = 'comfy-browser-toast';
+  let toast = document.getElementById(toastId);
+  if (! toast) {
+    toast = $el("p", {
+      id: toastId,
+      textContent: '',
+      onclick: onClick,
+      style: {
+        position: 'fixed',
+        top: '70%',
+        left: '34%',
+        zIndex: 999,
+        backgroundColor: 'var(--comfy-menu-bg)',
+        fontSize: '42px',
+        color: 'green',
+        padding: '8px',
+        border: 'green',
+        borderStyle: 'solid',
+        borderRadius: '0.5rem',
+        display: 'none',
+      }
+    });
+    document.body.appendChild(toast);
+  }
+
+  toast.textContent = text;
+  toast.style.display = 'block';
+
+  setTimeout(() => {
+    toast.style.display = 'none';
+  }, 2000);
+}
 
 app.registerExtension({
   name: "ComfyUI.Browser",
@@ -77,6 +213,17 @@ app.registerExtension({
   async setup() {
     const browserDialog = new BrowserDialog();
 
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'b') {
+        if (event.target.matches('input, textarea')) {
+          return;
+        }
+
+        browserDialog.toggle();
+        event.preventDefault();
+      }
+    });
+
     app.ui.menuContainer.appendChild(
       $el("div.comfy-list", {
         style: {
@@ -95,15 +242,7 @@ app.registerExtension({
             //color: "var(--descrip-text) !important",
             width: "80%",
           },
-          onclick: () => {
-            browserDialog.show($el("iframe", {
-              src: browserUrl + "?timestamp=" + Date.now(),
-              style: {
-                width: "100%",
-                height: "inherit",
-              },
-            }));
-          },
+          onclick: () => { browserDialog.show() },
         }),
         $el("button", {
           id: "comfyui-browser-collect-button",
@@ -140,6 +279,10 @@ app.registerExtension({
               });
               if (res.ok) {
                 saveBtn.style = originBtnStyle + "border-color: green;";
+                showToast(
+                  'Saved. Click me to open.',
+                  () => { browserDialog.show() },
+                );
               } else {
                 saveBtn.style = originBtnStyle + "border-color: red;";
               }