ホームページ >ウェブフロントエンド >jsチュートリアル >ビルダーパターンをマスターする: 動的 AI プロンプトジェネレーター CLI を作成する

ビルダーパターンをマスターする: 動的 AI プロンプトジェネレーター CLI を作成する

Susan Sarandonオリジナル: 2024-11-15 05:30:031047ブラウズ

開発の過程で、複雑なオブジェクトを処理しなければならないケースに遭遇したことがありますか?おそらく、パラメーターが多すぎてネストされる可能性があるか、多くの構築手順と複雑なロジックを構築する必要があるためです。

おそらく、複雑なオブジェクトの作成コードを毎回分散したり考えたりする必要がなく、クリーンで簡単なインターフェイスを備えたモジュールを設計したいと考えているでしょう!

そこでビルダー設計パターンの出番です!

このチュートリアル全体を通じて、ビルダー設計パターンについてすべて説明し、その後、ビルダー設計パターンを使用して DALL-E 3 に最適化されたイメージ生成プロンプトを生成するための CLI Node.js アプリケーションを構築します。 .

最終的なコードは、この Github リポジトリで入手できます。

概要

問題

Builder は 創造的なデザインパターン であり、新しいオブジェクトを使用してオブジェクトを作成するネイティブな方法に伴うさまざまな問題に対処するデザインパターンのカテゴリです。 キーワードまたは演算子。

ビルダー設計パターンは、次の問題の解決に焦点を当てています:

複雑なオブジェクトを作成するための簡単なインターフェイスを提供します : 多くの初期化手順が必要な、深くネストされたオブジェクトを想像してください。
オブジェクト自体から構築コードを分離し、同じオブジェクトから複数の表現または構成を作成できるようにします。

解決

ビルダーデザインパターンは、オブジェクト作成の責任をビルダーと呼ばれる特別なオブジェクトに委任することで、これら 2 つの問題を解決します。

ビルダーオブジェクトは元のオブジェクトを構成し、作成プロセスを複数の段階またはステップに分割します。

各ステップは、ビジネスロジックに基づいてオブジェクト属性のサブセットを初期化するビルダーオブジェクト内のメソッドによって定義されます。

class PromptBuilder {
  private prompt: Prompt

  constructor() {
    this.reset()
  }

  reset() {
    this.prompt = new Prompt()
  }

  buildStep1() {
    this.prompt.subject = "A cheese eating a burger"
    //initialization code...
    return this
  }

  buildStep2() {
    //initialization code...
    return this
  }

  buildStep3() {
    //initialization code...
    return this
  }

  build() {
    const result = structuredClone(this.prompt) // deep clone
    this.reset()
    return result
  }
}

クライアントコード: ビルダーを使用して個々のステップを呼び出すだけです

const promptBuilder = new PromptBuilder()
const prompt1 = promptBuilder
  .buildStep1() // optional
  .buildStep2() // optional
  .buildStep3() // optional
  .build() // we've got a prompt

const prompt2 = promptBuilder
  .buildStep1() // optional
  .buildStep3() // optional
  .build() // we've got a prompt

典型的なビルダー設計パターン

Mastering the Builder Pattern: Create a Dynamic AI Prompt Generator CLI

典型的なビルダー設計パターンは 4 つの主要なクラスで構成されます。

Builder : ビルダーインターフェイスは、作成されたエンティティを返す役割を担う build() メソッドなしで構築メソッドのみを定義する必要があります。
コンクリートビルダークラス : 各コンクリートビルダーは、オブジェクトの独自のバリアント (ビルダーインターフェイスメソッドの独自の実装を提供します。 >製品 1 または製品 2 ).
クライアント : クライアントは、オブジェクトのトップレベルのコンシューマ、ライブラリモジュールをインポートするユーザー、またはアプリケーションのエントリポイントと考えることができます。
Director : 同じビルダーオブジェクトでも、オブジェクトの多くのバリアントを生成できます。

class PromptBuilder {
  private prompt: Prompt

  constructor() {
    this.reset()
  }

  reset() {
    this.prompt = new Prompt()
  }

  buildStep1() {
    this.prompt.subject = "A cheese eating a burger"
    //initialization code...
    return this
  }

  buildStep2() {
    //initialization code...
    return this
  }

  buildStep3() {
    //initialization code...
    return this
  }

  build() {
    const result = structuredClone(this.prompt) // deep clone
    this.reset()
    return result
  }
}

上記のコードからわかるように、各シーケンスは異なる結果オブジェクトを生成する可能性があるため、ビルダーメソッドへの呼び出しのさまざまな組み合わせシーケンスを指示または調整する責任を負うエンティティが非常に必要です。

それでは、プロセスをさらに抽象化し、クライアントコードにさらに単純なインターフェイスを提供できるでしょうか?

そこで、

Director クラスが登場します。 Director はクライアントからより多くの責任を負い、ビルダーシーケンス呼び出しをすべて因数分解して、必要に応じて再利用できるようにします。

const promptBuilder = new PromptBuilder()
const prompt1 = promptBuilder
  .buildStep1() // optional
  .buildStep2() // optional
  .buildStep3() // optional
  .build() // we've got a prompt

const prompt2 = promptBuilder
  .buildStep1() // optional
  .buildStep3() // optional
  .build() // we've got a prompt

クライアントコード

const promptBuilder = new PromptBuilder()
const prompt1 = promptBuilder.buildStep1().buildStep2().build()

const prompt2 = promptBuilder.buildStep1().buildStep3().build()

上記のコードからわかるように、クライアントコードはプロンプト 1 またはプロンプト 2 を作成するための詳細を知る必要はありません。ディレクターを呼び出し、正しいビルダーオブジェクトを設定してから、makePrompt メソッドを呼び出すだけです。

実践的なシナリオ

ビルダー設計パターンの有用性をさらに実証するために、

プロンプトエンジニアリングイメージ生成 AI CLI ツールを最初から構築してみましょう。

この CLI アプリのソースコードはここから入手できます。

CLI ツールは次のように動作します:

現実的なプロンプトを構築するには、次のすべての構成属性が必要です。

ファイル：prompts.ts

class Director {
  private builder: PromptBuilder
  constructor() {}

  setBuilder(builder: PromptBuilder) {
    this.builder = builder
  }

  makePrompt1() {
    return this.builder.buildStep1().buildStep2().build()
  }

  makePrompt2() {
    return this.builder.buildStep1().buildStep3().build()
  }
}

ファイル：prompts.ts

const director = new Director()
const builder = new PromptBuilder()
director.setBuilder(builder)
const prompt1 = director.makePrompt1()
const prompt2 = director.makePrompt2()

ここでわかるように、各プロンプトタイプでは、

artStyle 、 colorPalette 、 lightingEffect 、 perspective 、カメラタイプ 、などプロジェクトの

enums.ts

ファイルで定義されているすべての属性の詳細を自由に調べてください。

enums.ts

class PromptBuilder {
  private prompt: Prompt

  constructor() {
    this.reset()
  }

  reset() {
    this.prompt = new Prompt()
  }

  buildStep1() {
    this.prompt.subject = "A cheese eating a burger"
    //initialization code...
    return this
  }

  buildStep2() {
    //initialization code...
    return this
  }

  buildStep3() {
    //initialization code...
    return this
  }

  build() {
    const result = structuredClone(this.prompt) // deep clone
    this.reset()
    return result
  }
}

CLI アプリのユーザーは、これらすべての設定を認識していない可能性があります。 チーズを食べるハンバーガー などの特定の主題とスタイル (リアリスティックまたはデジタルアート) に基づいて画像を生成したいだけかもしれません。

Github リポジトリのクローンを作成した後、次のコマンドを使用して依存関係をインストールします。

const promptBuilder = new PromptBuilder()
const prompt1 = promptBuilder
  .buildStep1() // optional
  .buildStep2() // optional
  .buildStep3() // optional
  .build() // we've got a prompt

const prompt2 = promptBuilder
  .buildStep1() // optional
  .buildStep3() // optional
  .build() // we've got a prompt

依存関係をインストールした後、次のコマンドを実行します:

const promptBuilder = new PromptBuilder()
const prompt1 = promptBuilder.buildStep1().buildStep2().build()

const prompt2 = promptBuilder.buildStep1().buildStep3().build()

プロンプトのタイプを選択するよう求められます: リアル または デジタルアート。 Mastering the Builder Pattern: Create a Dynamic AI Prompt Generator CLI

次に、プロンプトの件名を入力する必要があります。 チーズ食べるバーガーにこだわりましょう。

選択に応じて、結果として次のテキストプロンプトが表示されます:

現実的なスタイルのプロンプト :

class Director {
  private builder: PromptBuilder
  constructor() {}

  setBuilder(builder: PromptBuilder) {
    this.builder = builder
  }

  makePrompt1() {
    return this.builder.buildStep1().buildStep2().build()
  }

  makePrompt2() {
    return this.builder.buildStep1().buildStep3().build()
  }
}

デジタルアートスタイルプロンプト :

const director = new Director()
const builder = new PromptBuilder()
director.setBuilder(builder)
const prompt1 = director.makePrompt1()
const prompt2 = director.makePrompt2()

前のコマンドをコピーして、ChatGPT に貼り付けます。 ChatGPT は DALL-E 3 モデルを使用して画像を生成します。

リアルな画像プロンプト結果

デジタルアート画像プロンプト結果

Mastering the Builder Pattern: Create a Dynamic AI Prompt Generator CLI

必要となる醜いコンストラクター呼び出しは言うまでもなく、プロンプトパラメーターの複雑さと、各タイプのプロンプトを構築するために必要な専門知識を覚えておいてください。

class RealisticPhotoPrompt {
  constructor(
    public subject: string,
    public location: string,
    public timeOfDay: string,
    public weather: string,
    public camera: CameraType,
    public lens: LensType,
    public focalLength: number,
    public aperture: string,
    public iso: number,
    public shutterSpeed: string,
    public lighting: LightingCondition,
    public composition: CompositionRule,
    public perspective: string,
    public foregroundElements: string[],
    public backgroundElements: string[],
    public colorScheme: ColorScheme,
    public resolution: ImageResolution,
    public postProcessing: string[]
  ) {}
}

免責事項: この醜いコンストラクター呼び出しは、JavaScript では大きな問題ではありません。すべてのプロパティが null 許容である構成オブジェクトを渡すことができるためです。

プロンプトを構築するプロセスを抽象化し、コードを 拡張に対してオープンにし、変更に対してクローズ (SOLID の O) にし、ライブラリクライアントがプロンプト生成ライブラリをシームレスまたは簡単に使用できるようにするため、 ビルダー設計パターンを実装することを選択します。

汎用プロンプトビルダーインターフェイスを宣言することから始めましょう。

インターフェースは一連のメソッドを宣言します:

buildBaseProperties 、 buildTechnicalDetails 、および buildArtisticElements は、Realistic または Digital Art プロンプトを構築するための手順です。
setSubject は、すべてのプロンプトビルダー間で共有されるメソッドです。これは一目瞭然で、プロンプトの件名を設定するために使用されます。

builders.ts

class PromptBuilder {
  private prompt: Prompt

  constructor() {
    this.reset()
  }

  reset() {
    this.prompt = new Prompt()
  }

  buildStep1() {
    this.prompt.subject = "A cheese eating a burger"
    //initialization code...
    return this
  }

  buildStep2() {
    //initialization code...
    return this
  }

  buildStep3() {
    //initialization code...
    return this
  }

  build() {
    const result = structuredClone(this.prompt) // deep clone
    this.reset()
    return result
  }
}

builders.ts

const promptBuilder = new PromptBuilder()
const prompt1 = promptBuilder
  .buildStep1() // optional
  .buildStep2() // optional
  .buildStep3() // optional
  .build() // we've got a prompt

const prompt2 = promptBuilder
  .buildStep1() // optional
  .buildStep3() // optional
  .build() // we've got a prompt

上記の実装からわかるように、各ビルダーは、PromptBuilder コントラクトで定義された同じ構築手順を守りながら、独自の種類のプロンプト (最終的なプロンプトの形状は異なります) を構築することを選択します。

さて、Director クラス定義に移りましょう。

ディレクター.ts

const promptBuilder = new PromptBuilder()
const prompt1 = promptBuilder.buildStep1().buildStep2().build()

const prompt2 = promptBuilder.buildStep1().buildStep3().build()

Director クラスは PromptBuilder をラップし、setSubject から までのすべてのビルダーメソッドの呼び出しで構成されるプロンプト構成を作成できるようにします。 buildArtisticElements.

これにより、index.ts ファイル内のクライアントコードが簡素化されます。これについては次のセクションで説明します。

serializers.ts

class Director {
  private builder: PromptBuilder
  constructor() {}

  setBuilder(builder: PromptBuilder) {
    this.builder = builder
  }

  makePrompt1() {
    return this.builder.buildStep1().buildStep2().build()
  }

  makePrompt2() {
    return this.builder.buildStep1().buildStep3().build()
  }
}

最終的なプロンプトテキストをターミナルコンソールに出力するために、いくつかのユーティリティシリアル化関数を実装しました。

これで、プロンプトライブラリ生成コードの準備が整いました。 index.ts ファイルで使用してみましょう。

index.ts

const director = new Director()
const builder = new PromptBuilder()
director.setBuilder(builder)
const prompt1 = director.makePrompt1()
const prompt2 = director.makePrompt2()

上記のコードは次のアクションを実行します:

inquirer パッケージを使用してプロンプトスタイルを選択し、次に件名を選択するようにユーザーに求めます: getUserInput.
ユーザーから件名とアートスタイルの両方を取得した後、クライアントコードはライブラリから PromptBuilder と Director の 2 つのコンポーネントのみを使用します。
まず、Director をインスタンス化します。
次に、選択したプロンプトスタイルに応じて、対応するビルダーをインスタンス化し、それを Director クラスに設定します。
最後に、選択したサブジェクトを引数として director.makePrompt メソッドを呼び出し、 builder からプロンプトを取得し、シリアル化されたプロンプトを端末コンソールに出力します。

覚えておいてください: 各ビルダータイプによって生成されるプロンプトの形状は異なるため、ディレクターからプロンプトを取得することはできません。

結論

AI 画像プロンプト生成 CLI アプリケーションで実証されているように、Builder デザインパターンは、複数の構成を持つ複雑なオブジェクトを作成するための優れたソリューションであることが証明されています。このシナリオで Builder パターンが有益である理由は次のとおりです:

簡略化されたオブジェクト作成 : このパターンにより、複雑な構築プロセスをクライアントコードに公開することなく、複雑な RealisticPhotoPrompt オブジェクトと DigitalArtPrompt オブジェクトを作成できました。
柔軟性 : プロンプトタイプごとに個別のビルダークラスを使用することで、クライアントコードを変更せずに、新しいプロンプトタイプを簡単に追加したり、既存のプロンプトタイプを変更したりできます。
コード構成 : このパターンは、構築ロジックを表現から分離するのに役立ち、コードをよりモジュール化して保守しやすくしました。
再利用性 : PromptDirector クラスを使用すると、異なる種類のプロンプトに対して同じ構築プロセスを再利用できるため、コードの再利用性が向上します。
抽象化 :index.ts のクライアントコードはシンプルなままで高レベルのロジックに重点を置いていますが、プロンプト構築の複雑さはビルダークラスで抽象化されています。

接触

ご質問がある場合、またはさらに詳しく話し合いたい場合は、お気軽にこちらまでご連絡ください。

コーディングを楽しんでください!

以上がビルダーパターンをマスターする: 動的 AI プロンプトジェネレーター CLI を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：既存のコンテンツを上書きせずに DIV にテキストを追加するにはどうすればよいですか?次の記事：既存のコンテンツを上書きせずに DIV にテキストを追加するにはどうすればよいですか?

続きを見る

ビルダー パターンをマスターする: 動的 AI プロンプト ジェネレーター CLI を作成する

概要

問題

解決

典型的なビルダー設計パターン

結論

接触

関連記事

ビルダーパターンをマスターする: 動的 AI プロンプトジェネレーター CLI を作成する