LangFlowのサード・ステップのバックアップ(No.4)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
LangFlowのサード・ステップへ行く。
- 1 (2025-06-22 (日) 15:29:13)
- 2 (2025-06-22 (日) 15:35:04)
- 3 (2025-06-23 (月) 15:28:24)
- 4 (2025-06-23 (月) 19:05:33)
- 5 (2025-06-24 (火) 02:25:12)

「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

戻る
- LangFlowのファースト・ステップ
- LangFlowのセカンド・ステップ
- LangFlowのサード・ステップ
- LangFlowの4thステップ

↑

概要 †

やっぱ、カスタム・コンポーネントを作成してみたいよね♨

↑

詳細 †

↑

利用方法 †

↑

新規作成 †

コンポーネントサイドバーの「New Custom Component」の「+」ボタンを押下。

キャンバス上に新しいコンポーネントが生成される。

コンポーネントの「Code」をクリックして以下コードを修正

# from langflow.field_typing import Data
from langflow.custom import Component
from langflow.io import MessageTextInput, Output
from langflow.schema import Data

class CustomComponent(Component):
    display_name = "Custom Component"
    description = "Use as a template to create your own component."
    documentation: str = "https://docs.langflow.org/components-custom-components"
    icon = "code"
    name = "CustomComponent"

    inputs = [
        MessageTextInput(
            name="input_value",
            display_name="Input Value",
            info="This is a custom component Input",
            value="Hello, World!",
            tool_mode=True,
        ),
    ]

    outputs = [
        Output(display_name="Output", name="output", method="build_output"),
    ]

    def build_output(self) -> Data:
        data = Data(value=self.input_value)
        self.status = data
        return data

コンポーネントの「Save」をクリックして修正コードを保存

コンポーネントサイドバーの「Saved」からコンポーネントを選択してキャンバスにドラッグして使用する。

↑

インポート †

↑

テンプレ解説 †

↑

メンバプロパティ †

display_name = "Custom Component"
description = "Use as a template to create your own component."
documentation: str = "https://docs.langflow.org/components-custom-components"
icon = "code"
name = "CustomComponent"

display_name：UIに表示される名前
description：ツールチップで表示される説明文
documentation：公式ドキュメントへのリンク
icon：UIで使われるアイコンの種類（ここでは "code"）
name：内部的に使用されるコンポーネント名

↑

入出力プロパティ †

入力プロパティ

    inputs = [
        MessageTextInput(
            name="input_value",
            display_name="Input Value",
            info="This is a custom component Input",
            value="Hello, World!",
            tool_mode=True,
        ),
    ]

入力１のタイプ
ココでは、MessageTextInput?：ユーザー入力テキストフィールド

name：プログラム内部で参照する変数名
display_name：UIに表示されるラベル
info：ユーザー向け説明
value：デフォルト値
tool_mode=True：ツールモード利用可否

入力２のタイプ
...

出力プロパティ

    outputs = [
        Output(display_name="Output", name="output", method="build_output"),
    ]

出力名：Output（UIで表示）
内部名：output
関数名：build_output
- 既定では以下のような実装になっている。
- self.status に保存し、status確認を可能にしている。
```
def build_output(self) -> Data:
    data = Data(value=self.input_value)
    self.status = data
    return data
```

↑

カスタマイズ †

文字反転するように変更

outputs = [
    Output(display_name="Message", name="message", method="build_output"),
]

def build_output(self) -> Message:
    reversed_text = self.input_value[::-1]
    message = Message(text=reversed_text)
    self.status = message
    return message

上記のノードをInput Chat、Output Chatに接続し、[Playground]をクリックしてチャットセッションを開始、クエリを入力、ボットが応答することを確認。

↑

稼働確認 †

上記で単体テストが完了したので、運用テスト準備
- コンポーネントをReverse componentにリネーム後
- コンポーネントの「Save」をクリックして修正コードを保存。

運用テストとして「Basic Prompting」テンプレートを新規作成して、LLMのノードをReverse componentに置き換える。
- コンポーネントサイドバーの「Saved」からReverse componentコンポーネントを選択してキャンバスにドラッグ。
- ノードをInput Chat、Output Chatに接続し、[Playground]をクリックしてチャットセッションを開始、クエリを入力、ボットが応答することを確認。

↑

参考 †

Welcome to Langflow | Langflow Documentation
https://docs.langflow.org/

Components

Create custom Python components
https://docs.langflow.org/components-custom-components

LangFlowのサード・ステップ のバックアップ(No.4)

目次 †

概要 †

詳細 †

利用方法 †

新規作成 †

インポート †

テンプレ解説 †

メンバプロパティ †

入出力プロパティ †

カスタマイズ †

稼働確認 †

参考 †

LangFlowのサード・ステップのバックアップ(No.4)