diff --git a/README.md b/README.md index 8d790d4..9035911 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,29 @@ This provides better nodes to load images, previews, etc, and see "hidden" data, ## General +### Resources monitor + +**🎉Finally, you can see the resources used by ComfyUI (CPU, GPU, RAM, VRAM, and space) on the menu in real-time!** + +![Monitors](./docs/monitor.png) + +Now you can identify the bottlenecks in your workflow and know when it's time to restart the server, unload models or even close some tabs! + +You can configure the refresh rate which resources to show: + +![Monitors](./docs/monitor-settings.png) + +> **Notes:** +> - The GPU data is only available when you use CUDA (only NVIDIA cards, sorry AMD users). +> - It is not perfect, but it is a good approximation. +> - Data comes from these libraries: +> - [psutil](https://pypi.org/project/psutil/) +> - [torch](https://pytorch.org/) +> - [pynvml](https://pypi.org/project/pynvml/) (official NVIDIA library) +> - This is a beta version, so please report any issue you find. + + + ### Progress bar You can see the progress of your workflow with a progress bar on the menu! @@ -33,8 +56,6 @@ https://github.com/crystian/ComfyUI-Crystools/assets/3886806/35cc1257-2199-4b85- Additionally, it shows the time elapsed at the end of the workflow, and you can `click` on it to see the **current working node.** -Additionally, it shows the time elapsed at the end of the workflow, and you can `click` on it to see the **current working node.** - > **Notes:** > - If you don't want to see it, you can turn it off from settings (`Show progress bar in menu`) @@ -489,6 +510,10 @@ You have predefined switches (string, latent, image, conditioning) but you can u --- ## Changelog +### 1.3.0 (08/01/2024) +- Added in general Resources monitor (CPU, GPU, RAM, VRAM, and space) +- Added this icon to identify this set of tools: 🪛 + ### Crystools-save: 1.1.0 (07/01/2024) - Labeling updated according to the new version of Crystools (this project) diff --git a/docs/monitor-settings.png b/docs/monitor-settings.png new file mode 100644 index 0000000..1c50782 Binary files /dev/null and b/docs/monitor-settings.png differ diff --git a/docs/monitor.png b/docs/monitor.png new file mode 100644 index 0000000..1c1ca80 Binary files /dev/null and b/docs/monitor.png differ diff --git a/web/js/monitor.js b/web/js/monitor.js index b9d7a9a..2f73935 100644 --- a/web/js/monitor.js +++ b/web/js/monitor.js @@ -204,7 +204,6 @@ class CrystoolsMonitor { updateDisplay = (data) => { // console.debug('updateDisplay', data); this.htmlMonitorCPULabelRef.innerHTML = `${Math.floor(data.cpu_utilization)}%`; - this.htmlMonitorCPURef.title = `${Math.floor(data.cpu_utilization)}%`; this.htmlMonitorCPUSliderRef.style.width = this.htmlMonitorCPULabelRef.innerHTML; const gpu = data.gpus[0]; @@ -242,6 +241,7 @@ class CrystoolsMonitor { htmlContainer.style.width = '100%'; htmlContainer.style.cursor = 'crosshair'; htmlContainer.style.order = '3'; + htmlContainer.style.margin = '4px 0'; ctoolsRoot.append(htmlContainer); htmlContainer.append(this.createMonitorCPU());