Buckets:

hf-doc-build
/

doc

Files

xet

hf-doc-build/doc / diffusers /main /id /modular_diffusers /mellon.md

mishig

8 days ago

preview code

download

raw

10.8 kB

## 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": "<type>"}` 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",
<CopyLLMTxtMenu containerStyle="float: inline-end; margin-inline-start: 10px; display: inline-flex; position: relative; z-index: 10;"></CopyLLMTxtMenu>
                # 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/main/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).

Xet Storage Details

Size:: 10.8 kB
Xet hash:: d0a87520047a28c01f2504cf82145d1698ba5d3f12ca2c1515928f0ef9620186

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.

	## 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": "<type>"}` 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",
	<CopyLLMTxtMenu containerStyle="float: inline-end; margin-inline-start: 10px; display: inline-flex; position: relative; z-index: 10;"></CopyLLMTxtMenu>

	# 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/main/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).