## Menggunakan Blok Kustom dengan Mellon [Mellon](https://github.com/cubiq/Mellon) adalah antarmuka alur kerja visual yang terintegrasi dengan Modular Diffusers dan dirancang untuk alur kerja berbasis node. > [!WARNING] > Mellon masih dalam tahap pengembangan awal dan belum siap untuk penggunaan produksi. Anggap ini sebagai sekilas pandangan tentang cara kerja integrasinya! Custom blocks berfungsi di Mellon secara langsung - Anda hanya perlu menambahkan `mellon_pipeline_config.json` ke repositori Anda. File konfigurasi ini memberi tahu Mellon cara merender parameter blok Anda sebagai komponen UI. Berikut penampilannya saat digunakan dengan blok [Gemini Prompt Expander](https://huggingface.co/diffusers/gemini-prompt-expander-mellon): ![Mellon custom block demo](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/diffusers/modular_demo_dynamic.gif) Untuk menggunakan blok kustom diffusers modular di Mellon: 1. Seret **Dynamic Block Node** dari bagian ModularDiffusers 2. Masukkan `repo_id` (misalnya, `diffusers/gemini-prompt-expander-mellon`) 3. Klik **Load Custom Block** 4. Node berubah bentuk untuk menampilkan input dan output blok Anda Sekarang mari kita bahas cara membuat konfigurasi ini untuk blok kustom Anda sendiri. ## Langkah-langkah untuk membuat konfigurasi Mellon 1. **Spesifikasikan tipe Mellon untuk parameter Anda** - Setiap `InputParam`/`OutputParam` membutuhkan tipe yang memberi tahu Mellon komponen UI apa yang harus dirender (misalnya, `"textbox"`, `"dropdown"`, `"image"`). 2. **Generate `mellon_pipeline_config.json`** - Gunakan utilitas kami untuk membuat template konfigurasi dan mengirimkannya ke repositori Hub Anda. 3. **(Opsional) Sesuaikan konfigurasi secara manual** - Haluskan konfigurasi yang dihasilkan untuk kebutuhan spesifik Anda. ## Tentukan tipe Mellon untuk parameter Tipe Mellon menentukan bagaimana setiap parameter dirender di UI. Jika Anda tidak menentukan tipe untuk suatu parameter, nilainya akan secara default menjadi `"custom"`, yang dirender sebagai titik koneksi sederhana. Anda selalu dapat menyesuaikan ini kemudian di config yang dihasilkan. | Tipe | Input/Output | Deskripsi | |------|--------------|-------------| | `image` | Keduanya | Gambar (PIL Image) | | `video` | Keduanya | Video | | `text` | Keduanya | Tampilan teks | | `textbox` | Input | Input teks | | `dropdown` | Input | Menu pilihan dropdown | | `slider` | Input | Slider untuk nilai numerik | | `number` | Input | Input numerik | | `checkbox` | Input | Pengalih Boolean | Untuk parameter yang memerlukan konfigurasi lebih lanjut (seperti dropdown dengan opsi, atau slider dengan nilai min/max), berikan instance `MellonParam` secara langsung alih-alih string. Anda dapat menggunakan salah satu metode kelas di bawah ini, atau membuat yang sepenuhnya kustom dengan `MellonParam(name, label, type, ...)`. | Metode | Deskripsi | |--------|-------------| | `MellonParam.Input.image(name)` | Input gambar | | `MellonParam.Input.textbox(name, default)` | Input teks sebagai textarea | | `MellonParam.Input.dropdown(name, options, default)` | Pemilihan dropdown | | `MellonParam.Input.slider(name, default, min, max, step)` | Slider untuk nilai numerik | | `MellonParam.Input.number(name, default, min, max, step)` | Input numerik (tanpa slider) | | `MellonParam.Input.seed(name, default)` | Input Seed dengan tombol acak | | `MellonParam.Input.checkbox(name, default)` | Kotak centang Boolean | | `MellonParam.Input.model(name)` | Input model untuk komponen diffusers | | `MellonParam.Output.image(name)` | Output gambar | | `MellonParam.Output.video(name)` | Output video | | `MellonParam.Output.text(name)` | Output teks | | `MellonParam.Output.model(name)` | Output model untuk komponen diffusers | Pilih salah satu metode di bawah ini untuk menentukan tipe Mellon. ### Menggunakan `metadata` dalam definisi blok Jika Anda mendefinisikan blok kustom dari awal, tambahkan `metadata={"mellon": ""}` langsung ke definisi `InputParam` dan `OutputParam` Anda. Jika Anda mengedit blok kustom yang sudah ada dari Hub, lihat [Mengedit blok kustom](./custom_blocks#editing-custom-blocks) untuk cara mengunduhnya secara lokal. ```python class GeminiPromptExpander(ModularPipelineBlocks): @property def inputs(self) -> List[InputParam]: return [ InputParam( "prompt", type_hint=str, required=True, description="Prompt to use", metadata={"mellon": "textbox"}, # Text input ) ] @property def intermediate_outputs(self) -> List[OutputParam]: return [ OutputParam( "prompt", type_hint=str, description="Expanded prompt by the LLM", metadata={"mellon": "text"}, # Text output ), OutputParam( "old_prompt", type_hint=str, description="Old prompt provided by the user", # No metadata - we don't want to render this in UI ) ] ``` Untuk kontrol penuh atas konfigurasi UI, berikan instance `MellonParam` secara langsung: ```python from diffusers.modular_pipelines.mellon_node_utils import MellonParam InputParam( "mode", type_hint=str, default="balanced", metadata={"mellon": MellonParam.Input.dropdown("mode", options=["fast", "balanced", "quality"])}, ) ``` ### Menggunakan `input_types` dan `output_types` Saat Membuat Konfigurasi Jika Anda bekerja dengan pipeline yang sudah ada atau lebih memilih untuk menjaga definisi blok tetap rapi, tentukan tipe saat menghasilkan konfigurasi menggunakan argumen `input_types/output_types`: ```python from diffusers.modular_pipelines.mellon_node_utils import MellonPipelineConfig mellon_config = MellonPipelineConfig.from_custom_block( blocks, input_types={"prompt": "textbox"}, output_types={"prompt": "text"} ) ``` > [!NOTE] > Ketika `metadata` dan `input_types`/`output_types` keduanya ditentukan, argumen tersebut mengesampingkan `metadata`. ## Generate dan push konfigurasi Mellon Setelah menambahkan metadata ke blok Anda, buat template konfigurasi default Mellon dan dorongnya ke Hub: ```python from diffusers import ModularPipelineBlocks from diffusers.modular_pipelines.mellon_node_utils import MellonPipelineConfig # load your custom blocks from your local dir blocks = ModularPipelineBlocks.from_pretrained("/path/local/folder", trust_remote_code=True) # Generate the default config template mellon_config = MellonPipelineConfig.from_custom_block(blocks) # push the default template to `repo_id`, you will need to pass the same local folder path so that it will save the config locally first mellon_config.save( local_dir="/path/local/folder", repo_id= repo_id, push_to_hub=True ) ``` Ini membuat file `mellon_pipeline_config.json` di repositori Anda. ## Tinjau dan sesuaikan konfigurasi Template yang dihasilkan adalah titik awal - Anda mungkin ingin menyesuaikannya sesuai kebutuhan Anda. Mari kita telusuri konfigurasi yang dihasilkan untuk Gemini Prompt Expander: ```json { "label": "Gemini Prompt Expander", "default_repo": "", "default_dtype": "", "node_params": { "custom": { "params": { "prompt": { "label": "Prompt", "type": "string", "display": "textarea", "default": "" }, "out_prompt": { "label": "Prompt", "type": "string", "display": "output" }, "old_prompt": { "label": "Old Prompt", "type": "custom", "display": "output" }, "doc": { "label": "Doc", "type": "string", "display": "output" } }, "input_names": ["prompt"], "model_input_names": [], "output_names": ["out_prompt", "old_prompt", "doc"], "block_name": "custom", "node_type": "custom" } } } ``` ### Memahami Struktur Dict `params` mendefinisikan bagaimana setiap elemen UI dirender. Daftar `input_names`, `model_input_names`, dan `output_names` memetakan elemen-elemen UI ini ke antarmuka I/O dari [ModularPipelineBlocks](/docs/diffusers/v0.43.0/id/api/modular_diffusers/pipeline_blocks#diffusers.ModularPipelineBlocks) yang mendasarinya: | Konfigurasi Mellon | ModularPipelineBlocks | |---------------|----------------------| | `input_names` | properti `inputs` | | `model_input_names` | properti `expected_components` | | `output_names` | properti `intermediate_outputs` | Pada contoh ini: `prompt` adalah satu-satunya input. Tidak ada komponen model, dan output mencakup `out_prompt`, `old_prompt`, dan `doc`. Sekarang mari kita lihat dict `params`: - **`prompt`**: Parameter input dengan `display: "textarea"` (dirender sebagai kotak input teks), `label: "Prompt"` (ditampilkan di UI), dan `default: ""` (mulai dalam keadaan kosong). Field `type: "string"` penting di Mellon karena menentukan node mana yang dapat terhubung satu sama lain - hanya tipe yang cocok yang dapat dihubungkan dengan "noodles". - **`out_prompt`**: Output prompt yang diperluas. Prefiks `out_` ditambahkan secara otomatis karena input dan output memiliki nama yang sama (`prompt`), sehingga menghindari konflik penamaan di config. Memiliki `display: "output"` yang dirender sebagai socket output. - **`old_prompt`**: Memiliki `type: "custom"` karena kami tidak menentukan metadata. Ini dirender sebagai titik sederhana di UI. Karena kami sebenarnya tidak ingin mengekspos ini di UI, kami dapat menghapusnya. - **`doc`**: Output dokumentasi, ditambahkan secara otomatis ke semua blok kustom. ### Melakukan Penyesuaian Hapus `old_prompt` dari `params` dan `output_names` karena Anda tidak akan membutuhkannya. ```json { "label": "Gemini Prompt Expander", "default_repo": "", "default_dtype": "", "node_params": { "custom": { "params": { "prompt": { "label": "Prompt", "type": "string", "display": "textarea", "default": "" }, "out_prompt": { "label": "Prompt", "type": "string", "display": "output" }, "doc": { "label": "Doc", "type": "string", "display": "output" } }, "input_names": ["prompt"], "model_input_names": [], "output_names": ["out_prompt", "doc"], "block_name": "custom", "node_type": "custom" } } } ``` Lihat konfigurasi akhir di [diffusers/gemini-prompt-expander-mellon](https://huggingface.co/diffusers/gemini-prompt-expander-mellon).