Ispeziona e visualizza i metadati dei workflow ComfyUI incorporati in file PNG, WebP, MP4, FLAC e JSON con un'interfaccia intuitiva e multilingua.
Inspect and visualize ComfyUI workflow metadata embedded in PNG, WebP, MP4, FLAC, and JSON files with an intuitive, multilingual interface.
➡️ Prova la Demo Live! / Try the Live Demo!
- 🇮🇹 Caricamento Intelligente: Supporta workflow da file PNG, WebP, MP4, FLAC e JSON. 🇬🇧 Smart Upload: Supports workflows from PNG, WebP, MP4, FLAC, and JSON files.
- 🇮🇹 Visualizzazione Nodi: Elenco chiaro dei nodi rilevati nel workflow. 🇬🇧 Node Display: Clear list of detected nodes in the workflow.
- 🇮🇹 Rendering Grafo Interattivo: Grafo del workflow renderizzato con LiteGraph.js, con colori dei link e nomi dei nodi il più possibile fedeli a ComfyUI (basati su
object_info.json). 🇬🇧 Interactive Graph Rendering: Workflow graph rendered using LiteGraph.js, with link colors and node names as faithful as possible to ComfyUI (based onobject_info.json). - 🇮🇹 Visualizzazione Note: Le note del workflow (normali e Markdown) sono mostrate in una sezione dedicata. 🇬🇧 Notes Display: Workflow notes (both regular and Markdown) are shown in a dedicated section.
- 🇮🇹 Interfaccia Multilingua: Disponibile in Italiano, Inglese, Francese, Tedesco e Spagnolo (IT, EN, FR, DE, ES) con selettore. 🇬🇧 Multilingual Interface: Available in Italian, English, French, German, and Spanish (IT, EN, FR, DE, ES) with a selector.
- 🇮🇹 Look & Feel ComfyUI: Interfaccia utente rifinita ispirata a ComfyUI. 🇬🇧 ComfyUI Look & Feel: Polished user interface inspired by ComfyUI.
- 🇮🇹 Evidenziazione Interattiva: Passando il mouse sulla lista dei nodi o sulle note si evidenzia il nodo corrispondente nel grafo. 🇬🇧 Interactive Highlighting: Hovering over the node list or notes highlights the corresponding node in the graph.
Nota sulla Visualizzazione del Grafo:
🇮🇹 La visualizzazione del grafo è una rappresentazione basata sui dati estratti. Nodi personalizzati non presenti nel file object_info.json standard di ComfyUI o nodi con logiche di rendering complesse potrebbero non essere visualizzati esattamente come in ComfyUI (es. potrebbero apparire come nodi generici o con indicatori di errore se il tipo non è riconosciuto da LiteGraph.js in base alle definizioni fornite). Lo scopo principale è fornire una panoramica della struttura e delle connessioni del workflow.
🇬🇧 Note on Graph Visualization: The graph visualization is a representation based on the extracted data. Custom nodes not present in ComfyUI's standard object_info.json file or nodes with complex rendering logic may not be displayed exactly as in ComfyUI (e.g., they might appear as generic nodes or with error indicators if the type is not recognized by LiteGraph.js based on the provided definitions). The main purpose is to provide an overview of the workflow's structure and connections.
- React
- Vite
- TypeScript
- LiteGraph.js
- Tailwind CSS
- i18next (per l'internazionalizzazione)
- ExifReader (per metadati immagini)
- music-metadata-browser (per metadati audio/video)
Prerequisiti / Prerequisites:
- 🇮🇹 È necessario avere Node.js (versione 18.x o successiva consigliata) installato sul proprio sistema. Questo include npm (Node Package Manager). 🇬🇧 You need to have Node.js (version 18.x or later recommended) installed on your system. This includes npm (Node Package Manager).
-
Clona il repository / Clone the repository:
git clone https://github.com/d4N-87/ComfyUI-Workflow-Inspector.git cd ComfyUI-Workflow-Inspector -
Installa le dipendenze / Install dependencies (scegli il tuo package manager preferito): (choose your preferred package manager):
npm install
# o / or yarn install# o / or pnpm install -
Avvia il server di sviluppo / Start the development server:
npm run dev
# o / or yarn dev# o / or pnpm dev🇮🇹 L'applicazione sarà disponibile su
http://localhost:5173(o un'altra porta se 5173 è occupata). 🇬🇧 The application will be available athttp://localhost:5173(or another port if 5173 is busy).
- 🇮🇹 Apri l'applicazione nel tuo browser (tramite la demo live o eseguendola localmente). 🇬🇧 Open the application in your browser (either via the live demo or by running it locally).
- 🇮🇹 Clicca sul pulsante "Carica File Workflow" (o il testo tradotto). 🇬🇧 Click the "Upload Workflow File" button (or its translated equivalent).
- 🇮🇹 Seleziona un file PNG, WebP, MP4, FLAC o JSON che contiene metadati di un workflow ComfyUI. 🇬🇧 Select a PNG, WebP, MP4, FLAC, or JSON file containing ComfyUI workflow metadata.
- 🇮🇹 L'applicazione estrarrà e visualizzerà la lista dei nodi, il grafo del workflow e le note associate. 🇬🇧 The application will extract and display the node list, the workflow graph, and any associated notes.
- 🇮🇹 Puoi cambiare la lingua dell'interfaccia usando il selettore in alto a destra. 🇬🇧 You can change the interface language using the selector in the top-right corner.
🇮🇹 La tua privacy è importante. ComfyUI Workflow Inspector è progettato per funzionare interamente nel tuo browser web, sia che tu esegua l'applicazione localmente o utilizzi la versione online ospitata su GitHub Pages.
Funzionamento Client-Side: Quando carichi un file, questo viene letto ed elaborato direttamente dal codice JavaScript in esecuzione nel tuo browser. Nessun file o dato del workflow viene mai inviato, caricato o salvato su alcun server esterno. Tutta l'analisi e la visualizzazione avvengono localmente sulla tua macchina.
🇬🇧 Your privacy is important. ComfyUI Workflow Inspector is designed to operate entirely within your web browser, whether you run the application locally or use the online version hosted on GitHub Pages.
Client-Side Operation: When you upload a file, it is read and processed directly by the JavaScript code running in your browser. No files or workflow data are ever sent, uploaded, or stored on any external server. All analysis and visualization occur locally on your machine.
🇮🇹 I contributi sono benvenuti! Se vuoi contribuire, per favore: 🇬🇧 Contributions are welcome! If you'd like to contribute, please:
- Fai un Fork del repository. / Fork the repository.
- Crea un nuovo branch per la tua feature o bugfix (
git checkout -b feature/AmazingFeatureobugfix/IssueFix). / Create a new branch for your feature or bugfix (git checkout -b feature/AmazingFeatureorbugfix/IssueFix). - Fai commit delle tue modifiche (
git commit -m 'Add some AmazingFeature'). / Commit your changes (git commit -m 'Add some AmazingFeature'). - Fai Push sul tuo branch (
git push origin feature/AmazingFeature). / Push to your branch (git push origin feature/AmazingFeature). - Apri una Pull Request. / Open a Pull Request.
🇮🇹 Per favore, assicurati che il tuo codice segua le linee guida di stile del progetto e includa test appropriati se necessario. 🇬🇧 Please ensure your code follows the project's styling guidelines and includes appropriate tests if necessary.
Questo progetto è rilasciato sotto la Licenza MIT. Vedi il file LICENSE per maggiori dettagli.
This project is released under the MIT License. See the LICENSE file for more details.
🇮🇹 Se i workflow e le guide ti sono stati utili, puoi supportare il canale tramite PayPal con una donazione. 🇬🇧 If the workflows and guides have been helpful to you, you can support the channel through PayPal with a donation.
