言語モデルのプロンプトを作成する
文字列連結を使用して言語モデルのプロンプトを構築できますが、機能を構成し、プロンプトが言語モデルのコンテキストウィンドウ内に収まるようにするのは困難です。これらの制限を克服するために、@vscode/prompt-tsx ライブラリを使用できます。
@vscode/prompt-tsx ライブラリは以下の機能を提供します
- TSXベースのプロンプトレンダリング: TSXコンポーネントを使用してプロンプトを構成し、読みやすく、保守しやすくします
- 優先度ベースのプルーニング: モデルのコンテキストウィンドウに収まるように、プロンプトの重要度の低い部分を自動的にプルーニングします
- 柔軟なトークン管理:
flexGrow、flexReserve、flexBasisなどのプロパティを使用して、トークン予算を協調的に使用します - ツール統合: VS Codeの言語モデルツールAPIと統合します
すべての機能と詳細な使用方法については、完全なREADMEを参照してください。
この記事では、ライブラリを使用したプロンプト設計の具体的な例について説明します。これらの例の完全なコードは、prompt-tsx リポジトリにあります。
会話履歴の優先順位を管理する
プロンプトに会話履歴を含めることは、ユーザーが以前のメッセージに対して追加の質問をできるようにするため重要です。ただし、履歴は時間とともに大きくなる可能性があるため、その優先順位が適切に処理されるようにすることが重要です。最も理にかなっているパターンは、通常、次の順序で優先順位を付けることです。
- 基本プロンプトの指示
- 現在のユーザーのクエリ
- チャット履歴の最後の数ターン
- サポートデータ
- 収まるだけの残りの履歴
このため、プロンプトでは履歴を2つの部分に分け、最近のプロンプトターンが一般的なコンテキスト情報よりも優先されます。
このライブラリでは、ツリー内の各TSXノードには、zIndexと概念的に類似した優先順位があり、数値が大きいほど優先順位が高くなります。
ステップ1: HistoryMessagesコンポーネントを定義する
履歴メッセージをリストするには、HistoryMessagesコンポーネントを定義します。この例は良い出発点となりますが、より複雑なデータ型を扱う場合は拡張する必要があるかもしれません。
この例では、PrioritizedListヘルパーコンポーネントを使用しています。これは、各子要素に自動的に昇順または降順の優先順位を割り当てます。
import {
UserMessage,
AssistantMessage,
PromptElement,
BasePromptElementProps,
PrioritizedList,
} from '@vscode/prompt-tsx';
import { ChatContext, ChatRequestTurn, ChatResponseTurn, ChatResponseMarkdownPart } from 'vscode';
interface IHistoryMessagesProps extends BasePromptElementProps {
history: ChatContext['history'];
}
export class HistoryMessages extends PromptElement<IHistoryMessagesProps> {
render(): PromptPiece {
const history: (UserMessage | AssistantMessage)[] = [];
for (const turn of this.props.history) {
if (turn instanceof ChatRequestTurn) {
history.push(<UserMessage>{turn.prompt}</UserMessage>);
} else if (turn instanceof ChatResponseTurn) {
history.push(
<AssistantMessage name={turn.participant}>
{chatResponseToMarkdown(turn)}
</AssistantMessage>
);
}
}
return (
<PrioritizedList priority={0} descending={false}>
{history}
</PrioritizedList>
);
}
}
ステップ2: プロンプトコンポーネントを定義する
次に、基本指示、ユーザーのクエリ、および適切な優先順位を持つ履歴メッセージを含むMyPromptコンポーネントを定義します。優先順位の値は兄弟間でローカルです。プロンプト内の他の要素に触れる前に、履歴の古いメッセージをトリミングしたい場合があるため、2つの<HistoryMessages>要素に分割する必要があります。
import {
UserMessage,
PromptElement,
BasePromptElementProps,
} from '@vscode/prompt-tsx';
interface IMyPromptProps extends BasePromptElementProps {
history: ChatContext['history'];
userQuery: string;
}
export class MyPrompt extends PromptElement<IMyPromptProps> {
render() {
return (
<>
<UserMessage priority={100}>
Here are your base instructions. They have the highest priority because you want to make
sure they're always included!
</UserMessage>
{/* Older messages in the history have the lowest priority since they're less relevant */}
<HistoryMessages history={this.props.history.slice(0, -2)} priority={0} />
{/* The last 2 history messages are preferred over any workspace context you have below */}
<HistoryMessages history={this.props.history.slice(-2)} priority={80} />
{/* The user query is right behind the based instructions in priority */}
<UserMessage priority={90}>{this.props.userQuery}</UserMessage>
<UserMessage priority={70}>
With a slightly lower priority, you can include some contextual data about the workspace
or files here...
</UserMessage>
</>
);
}
}
これで、ライブラリがプロンプトの他の要素をプルーニングしようとする前に、古い履歴メッセージがすべてプルーニングされます。
ステップ3: Historyコンポーネントを定義する
消費を少し容易にするために、履歴メッセージをラップし、passPriority属性を使用してパススルーコンテナとして機能するHistoryコンポーネントを定義します。passPriorityを使用すると、その子は、優先順位付けの目的で、含まれる要素の直接の子であるかのように扱われます。
import { PromptElement, BasePromptElementProps } from '@vscode/prompt-tsx';
interface IHistoryProps extends BasePromptElementProps {
history: ChatContext['history'];
newer: number; // last 2 message priority values
older: number; // previous message priority values
passPriority: true; // require this prop be set!
}
export class History extends PromptElement<IHistoryProps> {
render(): PromptPiece {
return (
<>
<HistoryMessages history={this.props.history.slice(0, -2)} priority={this.props.older} />
<HistoryMessages history={this.props.history.slice(-2)} priority={this.props.newer} />
</>
);
}
}
これで、この単一の要素を使用してチャット履歴を含めることができます。
<History history={this.props.history} passPriority older={0} newer={80}/>
ファイルの内容を収まるように拡張する
この例では、ユーザーが現在見ているすべてのファイルのコンテンツをプロンプトに含めたいと考えています。これらのファイルは大きくなる可能性があり、すべてを含めるとテキストがプルーニングされる可能性があります。この例では、flexGrowプロパティを使用して、ファイルコンテンツのサイズをトークン予算内に収まるように協調的に調整する方法を示します。
ステップ1: 基本指示とユーザーのクエリを定義する
まず、基本指示を含むUserMessageコンポーネントを定義します。
<UserMessage priority={100}>Here are your base instructions.</UserMessage>
次に、UserMessageコンポーネントを使用してユーザーのクエリを含めます。このコンポーネントは、基本指示の直後に含まれるように高い優先順位を持っています。
<UserMessage priority={90}>{this.props.userQuery}</UserMessage>
ステップ2: ファイルの内容を含める
次に、FileContextコンポーネントを使用してファイルの内容を含めます。基本指示、ユーザーのクエリ、履歴の後にレンダリングされるように、flexGrow の値を 1 に割り当てます。
<FileContext priority={70} flexGrow={1} files={this.props.files} />
flexGrow の値を持つ要素は、render() および prepare() 呼び出しに渡される PromptSizing オブジェクト内の*未使用*のトークン予算を受け取ります。フレックス要素の動作の詳細については、prompt-tsx ドキュメントを参照してください。
ステップ3: 履歴を含める
次に、以前に作成したHistoryコンポーネントを使用して履歴メッセージを含めます。これは少し複雑です。履歴の一部を表示したいが、ファイルの内容がプロンプトのほとんどを占めるようにしたいからです。
したがって、HistoryコンポーネントにflexGrow値2を割り当てて、<FileContext />を含む他のすべての要素の後にレンダリングされるようにします。ただし、履歴のために総予算の1/5を予約するために、flexReserve値"/5"も設定します。
<History
history={this.props.history}
passPriority
older={0}
newer={80}
flexGrow={2}
flexReserve="/5"
/>
ステップ3: プロンプトのすべての要素を結合する
次に、すべての要素をMyPromptコンポーネントに結合します。
import {
UserMessage,
PromptElement,
BasePromptElementProps,
} from '@vscode/prompt-tsx';
import { History } from './history';
interface IFilesToInclude {
document: TextDocument;
line: number;
}
interface IMyPromptProps extends BasePromptElementProps {
history: ChatContext['history'];
userQuery: string;
files: IFilesToInclude[];
}
export class MyPrompt extends PromptElement<IMyPromptProps> {
render() {
return (
<>
<UserMessage priority={100}>Here are your base instructions.</UserMessage>
<History
history={this.props.history}
passPriority
older={0}
newer={80}
flexGrow={2}
flexReserve="/5"
/>
<UserMessage priority={90}>{this.props.userQuery}</UserMessage>
<FileContext priority={70} flexGrow={1} files={this.props.files} />
</>
);
}
}
ステップ4: FileContextコンポーネントを定義する
最後に、ユーザーが現在見ているファイルのコンテンツを含むFileContextコンポーネントを定義します。flexGrowを使用したため、PromptSizingの情報を使用して、各ファイルで「興味深い」行周辺の行をできるだけ多く取得するロジックを実装できます。
簡潔にするため、getExpandedFilesの実装ロジックは省略されています。詳細はprompt-tsxリポジトリで確認できます。
import { PromptElement, BasePromptElementProps, PromptSizing, PromptPiece } from '@vscode/prompt-tsx';
class FileContext extends PromptElement<{ files: IFilesToInclude[] } & BasePromptElementProps> {
async render(_state: void, sizing: PromptSizing): Promise<PromptPiece> {
const files = await this.getExpandedFiles(sizing);
return <>{files.map(f => f.toString())}</>;
}
private async getExpandedFiles(sizing: PromptSizing) {
// Implementation details are summarized here.
// Refer to the repo for the complete implementation.
}
}
まとめ
これらの例では、基本指示、ユーザーのクエリ、履歴メッセージ、およびさまざまな優先順位を持つファイルコンテンツを含むMyPromptコンポーネントを作成しました。flexGrowを使用して、ファイルコンテンツのサイズをトークン予算内に収まるように協調的に調整しました。
このパターンに従うことで、プロンプトの最も重要な部分が常に含まれ、重要度の低い部分はモデルのコンテキストウィンドウに収まるように必要に応じてプルーニングされることを保証できます。getExpandedFilesメソッドとFileContextTrackerクラスの完全な実装の詳細については、prompt-tsx リポジトリを参照してください。