Wordcraft で AI ライティング アシスタントを作成する

ストーリーは大好きです。物語を伝えたり、他の形の創造的な文章を書いたりすることは、 やりがいがありやりがいのある仕事です。空白のページから独自のストーリーを作成する 困難で、場合によっては負担に感じられることもあります。人工 インテリジェンス（AI）生成モデルは、 ストーリーを作り上げていきます

このチュートリアルでは、Google Cloud で Wordcraft、 Google の People and AI Research が開発した AI を活用した文章作成ツール 共有します。このウェブ アプリケーションは Gemini を使用します アイデアを生み出したり、記事の一部を記述して、記事を少しずつ作成したりするのに役立つ API コンテンツを修正してさらに詳細を加えたりします。Wordcraft は 自分の文体にぴったり合わせることができます。また、新しいライティング コントロールも作成できます。 ワークフローのサポートを強化します

プロジェクトの概要と拡張方法（分析情報を含む）の動画 詳しくは AI Writing Assistant - Google AI で構築。 それ以外の場合は、手順に沿ってプロジェクトの拡張を開始できます。 ご覧ください

プロジェクトの設定

この手順では、Wordcraft プロジェクトをセットアップするための 開発とテストに集中できます前提条件のソフトウェアをインストールし、クローンを作成します。 コード リポジトリからプロジェクトを作成し、構成のインストールを実行してから、 いくつかの環境変数を設定します。プロジェクトを実行することで、設定をテストできます。 。

前提条件をインストールする

Wordcraft プロジェクトでは、Node と npm を使用して アプリケーションをパッケージ化して実行します。次のインストール手順は、 作成する必要があります。

必要なソフトウェアをインストールするには:

  • 以下の手順に沿って node と npm をインストールします。 インストール手順 検討してください

プロジェクトのクローンを作成して構成する

プロジェクト コードをダウンロードし、npm インストール コマンドを使用してダウンロードします。 プロジェクトを構成します。必要な プロジェクトを取得する git ソース管理システム ソースコードです。
プロジェクト コードをダウンロードして構成するには:

  1. 次のコマンドを使用して Git リポジトリのクローンを作成します。 
    git clone https://github.com/PAIR-code/wordcraft
  2. Wordcraft プロジェクトのルート ディレクトリに移動します。 
    cd wordcraft/
  3. インストール コマンドを実行して依存関係をダウンロードし、プロジェクトを構成します。 
    npm install

環境変数を設定する

Wordcraft コードを許可するために必要な環境変数を設定する プロジェクト、具体的には Google Gemini API キーが必要です。「 以下のインストール手順は、Linux ホストマシンを対象としています。

環境変数を設定するには:

  1. Google Gemini API キーを取得し、キー文字列をコピーします。
  2. Wordcraft プロジェクトのルート ディレクトリに移動します。 
    cd wordcraft/
  3. API キーを環境変数として設定します。Linux ホストでは、 
    touch .env
echo "API_KEY="<YOUR_API_KEY>"" > .env
で確認できます。

設定をテストする

これで、 ダウンロードしますこの手順は省略可能ですが、行うことをおすすめします。

ワードクラフトの開始画面

インストールと設定をテストするには:

  1. Wordcraft プロジェクトのルート ディレクトリに移動します。 
    cd wordcraft/
  2. プロジェクトを開発モードで実行します。 
    npm run dev
  3. ウェブブラウザで Wordcraft のユーザー インターフェースにアクセスします。「 特定のアドレスが前のコマンドの出力に表示されます。次に例を示します。
    http://localhost:3000/

プロンプトのサンプル テキストを変更する

Wordcraft コマンドのユーザー インターフェース Wordcraft は、サンプルセットを使用して AI 生成モデルのプロンプトを 「start newstory」や「generate」のような文書作成支援操作のたびに text コマンドを使用します。サンプルは、テキストを生成する際のガイドとして、 オペレーションの例を変更することで、構成を 出力を異なるパターンやスタイルに合わせます。このアプローチは、 Wordcraft を使って好きなように書くことができます。

次の例は、new_story の例の変更を示しています。 ワードクラフト。この変更の目的は、AI 生成モデルを 社内のモノローグのアプローチでストーリーの導入文を書き、文体で ミステリー小説に合っています例をいくつか書くことで、 生成モデルが一般的なストーリーに沿うように 異なるテーマの紹介文を生成します。

Wordcraft で新しいストーリーのサンプルを変更するには:

  1. wordcraft/app/context/json/new_story.json ファイルを開きます。
  2. JSON の全体的な構造を維持しながら例を変更する 表示されます。「ミステリー物語の導入」の例を 独自のスタイルで作成できます。 
    [
  {
    "topic": "scientist disappears and their research into a new technology is gone",
    "target": "I got the call from the chief early Tuesday morning, before I'd even had a second sip of coffee. Terrible timing. Something about a researcher disappearing from the local university. Unusual for the research lab to ask for assistance, so I headed over to main lab building."
  },
  {
    "topic": "a young woman wakes up with no memory",
    "target": "An unfamiliar ceiling with harsh, white lights greeted my eyes as I opened them. I looked around. White walls, medical equipment, a hospital? Wait. Where am I? How did I get here?!"
  },
  {
    "topic": "old man tries to recall an important task as his memories gradually fade away",
    "target": "What was I supposed to do today? Feels like it was important. I stared into the kitchen cabinet full of mismatched mugs, mirroring my own confusion. What was it? Like someone is...in danger? A chill shot down my spine, but the details skittered off and hid in some dark corner of my head."
  },
  {
    "topic": "billionaire is found dead in a hotel room",
    "target": "People meet their end every day, some naturally, some unnaturally. After 17 years of working as a homicide detective in Seattle, I'd seen a lot more of the unnatural variety than most. Comes with the job, along with a hard-learned sense of what side of the line any given incident sat on. This...was murder."
  },
  {
    "topic": "retired covert operative gets dragged back into an old mission",
    "target": "Steam rose gently off the cup of Earl Grey sitting in front of me as I sat at the cafe, pedestrians and light traffic rolling by. The city was slowly waking up around me and my perfect Paris morning routine was shaping up nicely. Then I noticed that old familiar and unwelcome tingling on the back of my neck. I was being watched."
  }
]
  3. 変更を「new_story.json」ファイルに保存します。

変更した新しいストーリーのオペレーションをテストするには:

  1. Wordcraft プロジェクトのルート ディレクトリに移動します。 
    cd wordcraft/
  2. プロジェクトを開発モードで実行します。すでに実行中の場合は、 アプリを停止して再起動する必要があります。 
    npm run dev
  3. ウェブブラウザで Wordcraft のユーザー インターフェースにアクセスします。「 特定のアドレスが前のコマンドの出力に表示されます。次に例を示します。
    http://localhost:3000/
  4. Wordcraft のメインメニューに移動し、[Start a New Story] を選択します。
  5. ストーリーの新しいプロンプトを更新するか、希望どおりのプロンプトに変更してから、 新しいストーリーを開始します。

Wordcraft の既存のストーリー作成コントロールはすべて、 手法です。 wordcraft/app/context/json/ ディレクトリ。

新しい書き込みコントロールを作成

Wordcraft にキャラクター ユーザー インターフェースを導入 Wordcraft アプリは拡張できるように設計されており、新しい文章を追加できます 文章の生成や文章の書き換えと類似した機能。 [コントロール] タブにあります。これらの 少し手間がかかりますが、Google Cloud の機能を ワークフローや目標に合ったワードクラフトを使用できます。

次の変更例では、新しいキャラクター コントロールを作成します。 ワードクラフト。これを使用して、新しいキャラクターをストーリーに そのキャラクターの属性の説明です。この管理機能の基盤は、 [新しいストーリーを開始] コントロールなど、Wordcraft の他のコントロールと同じです。 すでに説明しましたいくつかの例を含む JSON ファイルを作成します。 使用します。残りの変更は、ユーザー インターフェースと AI プロンプト管理機能。

例の作成

生成モデルにどのように導入してほしいかの例をいくつか書いてください。 あります。たとえば、ナレーターのように説明するか、 主人公の登場人物の体験に基づいて紹介しますか？「 次の例では後者のアプローチを使用しています。 おすすめします。これらの例を新しい JSON 形式で追加します。 ファイル:

新しいコントロールの例を追加するには:

  1. wordcraft/app/context/json/new_character.json ファイルを作成します。
  2. JSON ファイルにサンプルを作成します。この例では、各サンプルに プロンプトを表す character 説明フィールド 予想される出力を示す target フィールドがあります。 
    [
  {
    "character": "A character who is helpful and modest.",
    "target": "\"You lost, buddy?\" came a voice from behind me. Turning, I discovered a man dressed in a simple but presentable outfit. Small signs of age and loose threads hinted that these clothes, and the man himself, had seen better days."
  },
  {
    "character": "A character who is attractive and devious.",
    "target": "Stepping out of the alley a little too quickly, I collided with something solidly muscular and surprisingly delicately scented. \"Sorry.\" I managed, regaining my balance. \"Easy there, buddy, you're gonna hurt yourself,\" came the reply from a man with an almost feline grace, further reinforced by a stare that reminded me of a hunting cat assessing its potential prey."
  },
  {
    "character": "A character who is old and hesitant.",
    "target": "\"Excuse me. Do you know the way to the train station from here?\" I looked up from my phone to see a elderly woman in a threadbare coat, purse clutched with two hands in front of her. \"I-I'm supposed to meet my nephew there. Do... do you think you can help me?\""
  },
  {
    "character": "A character who is intelligent and aloof.",
    "target": "Bookish. That was my immediate reaction to this person I now saw in front of me. \"You're finally here. Did you read the notes I sent you?\" The voice sat squarely in between feminine and masculine intonation. \"No, of course you didn't.\" Dismissing my answer before I'd even formulated one. Annoyance immediately flushed through me."
  },
  {
    "character": "A character who is clumsy and energetic.",
    "target": "\"Whoa!\" was the only warning I had before someone slammed into my back, almost knocking me off my feet. \"I'm so sorry! WOOO! These skates are a RUSH!\" The apology came from a rather loud redhead wearing rollerblades, dark glasses and a very beefy-looking pair of headphones. That explained the volume of the apology."
  }
]
  3. 変更を new_character.json ファイルに保存します。

サンプルを作成したら、app/context/schema.ts と index.ts を変更します。 ファイルを作成し、この新しいキャラクター コントロールのプロンプト コンテンツを反映させます。

schema.ts ファイルにサンプルを追加するには:

  • wordcraft/app/context/schema.ts ファイルを変更して、 文字のデータ構造です。 
    export const newStorySchema = z.object({
  topic: z.string(),
  target: z.string(),
});

// add the following:
export const newCharacterSchema = z.object({
  character: z.string(),
  target: z.string(),
});

これらの新しい例に関連するオペレーション タイプを定義します。この新しい プロンプトの例をユーザー インターフェースとプロンプトに接続するのに役立ちます。 後のステップで変更します。

新しいオペレーション タイプを作成するには

  • wordcraft/app/core/shared/types.ts ファイルを変更して、 文字演算タイプ。 
    export const enum OperationType {
  ...
  NEW_CHARACTER = 'NEW_CHARACTER', // add to list of types
  ...
}

サンプルを index.ts ファイルに登録するには:

  1. wordcraft/app/context/index.ts ファイルで、新しいスキーマをインポートします。 
    import {
  continueSchema,
  ...
  newCharacterSchema // add new schema
} from './schema';
  2. 新しい JSON ファイルを newCharacterJson としてインポートします。 
    import newCharacterJson from './json/new_character.json';
  3. 新しいキャラクターのサンプル コンテンツをアプリのコンテキストに登録します。 
    export class WordcraftContext {
  constructor() {
  ...
    this.registerExamples(
      OperationType.NEW_CHARACTER,
      newCharacterSchema,
      newCharacterJson
    );
  ...
}
  4. NewCharacterExample 型をエクスポートします。 
    export type NewCharacterExample = z.infer<typeof newCharacterSchema>;

ユーザー インターフェースを作成する

コンテンツ生成のサンプルを作成して登録したら、次のことができます。 新しいコントロールのユーザー インターフェースを作成します。この作業の大部分は 新しいオペレーション クラスを作成してから、そのクラスを メインコードを使用します。

新しいオペレーションを作成するには:

  1. wordcraft/app/core/operations/ ディレクトリに、 既存のオペレーション クラスの 1 つを新しいオペレーション クラスとして使用 使用します。新しいキャラクター コントロールについては、 new_story_operation.ts クラスを拡張し、名前を次のように変更します。 new_character_operation.ts。
  2. クラスに新しい名前を付けて、コントロールを ユーザー インターフェースを定義するには、OperationSite 値を 1 つ以上定義します。 
    export class NewCharacterOperation extends ChoiceOperation {
  static override isAvailable(operationSite: OperationSite) {
    return (
      operationSite === OperationSite.END_OF_SECTION ||
      operationSite === OperationSite.EMPTY_SECTION
    );
  }
  3. オペレーションの id を設定します。 
      static override id = OperationType.NEW_CHARACTER;
  4. get 関数と run 関数を更新して、 値が含まれます。このコードは、プロンプト テキストの取得を処理します。 入力して、AI プロンプトで使用します。 
      private get character(): string {
    return NewCharacterOperation.controls.character.value;
  }

  async run() {
    const params = { character: this.character };
    const choices = await this.getModel().newCharacter(params);

    this.setChoices(choices);
  }
  5. ユーザー インターフェースのテキストと説明を更新します。 
      static override getButtonLabel() {
    return 'introduce character';
  }

  static override getDescription() {
    return 'Introduce a new character at the cursor.';
  }

  static override controls = {
    character: new TextareaControl({
      prefix: 'prompt',
      description: 'A prompt to introduce a new character.',
      value: 'A new character.',
    }),
  };

Wordcraft アプリケーションに新しいオペレーションを登録するには:

  1. wordcraft/app/core/operations/index.ts ファイルに次の行を追加します。 新しいオペレーションをインポートします 
    import {NewCharacterOperation} from './new_character_operation';
  2. 同じ index.ts ファイルで、 NewCharacterOperation クラス。 
    export {
  ...
  NewCharacterOperation, // add this class
  ...
};
  3. wordcraft/app/main.ts ファイルで、新しい あります。 
    const operationsService = wordcraftCore.getService(OperationsService);
operationsService.registerOperations(
  ...
  Operations.NewCharacterOperation, // add new operation
  ...
);

プロンプト処理を作成する

新しいコントロール作成の最終フェーズとして、 AI 生成モデルのプロンプトの生成とレスポンスを処理します。 その処理の主な部分は、プロンプト ハンドラを ユーザーから入力を受け取る wordcraft/app/models/gemini/prompts/ ディレクトリ 生成モデルに渡すプロンプトを作成します。

プロンプト パラメータのインターフェースを定義するには:

  • wordcraft/app/core/shared/interfaces.ts ファイルに次の行を追加します。 新しいオペレーション プロンプト パラメータ用のインターフェースです。 
    export interface NewCharacterPromptParams {
  character: string;
}

新しいオペレーションのプロンプト ハンドラを定義するには:

  1. wordcraft/app/models/gemini/prompts/ ディレクトリに、以下を作成します。 新しいプロンプト ハンドラ クラスを作成します。既存のオペレーション クラスの 1 つを 使用します。新しいキャラクター コントロールについては、 new_story.ts クラスを拡張し、名前を次のように変更します。 出発点として、new_character.ts。
  2. プロンプト ハンドラ関数を定義し、 NewCharacterExample クラス。 
    import { NewCharacterPromptParams } from '@core/shared/interfaces';
import { NewCharacterExample, WordcraftContext } from '../../../context';
import { OperationType } from '@core/shared/types';
import { GeminiModel } from '..';

export function makePromptHandler(model: GeminiModel, context: WordcraftContext) {
  ...
}
  3. ユーザー インターフェースの入力を取得する generatePrompt() 関数を作成します。 入力できます。 
      function generatePrompt(character: string) {
    const prefix = "Here's a character description: ";
    const suffix = "Introduce this character in the story.";

    if (character.trim() === '') {
      return 'Introduce a new character to the story.';
    } else {
      return `${prefix}${model.wrap(character)}\n${suffix}`;
    }
  }
  4. getPromptContext() 関数を作成してユーザーをアセンブルする サンプル レスポンスを使用してプロンプトを完成させます。 
      function getPromptContext() {
    const examples = context.getExampleData(
      OperationType.NEW_CHARACTER
    );
    let promptContext = model.getPromptPreamble();
    examples.forEach((example) => {
      const { character, target } = example;
      const prompt = generatePrompt(character);
      promptContext += `${prompt} ${model.wrap(target)}\n\n`;
    });
    return promptContext;
  }

新しい文字プロンプト ハンドラを統合するには:

  1. wordcraft/app/models/gemini/index.ts ファイルで、 プロンプト ハンドラを作成します。 
    import {makePromptHandler as newCharacter} from './prompts/new_character';
  2. newCharacter プロンプトのオーバーライド定義を追加する 使用します。 
      override newCharacter = this.makePromptHandler(newCharacter);

プロンプト パラメータをモデル定義に登録するには:

  1. wordcraft/app/models/model.ts ファイルで、次のインポートを追加します。 新しい NewCharacterPromptParams インターフェース。 
    import {
  ...
  NewCharacterPromptParams,
  ...
} from '@core/shared/interfaces';
  2. newCharacter プロンプト パラメータをモデルクラスに追加します。 
      async newCharacter(params: NewCharacterPromptParams): Promise<ModelResults> {
    throw new Error('Not yet implemented');
  }

新しい書き込みコントロールをテストする

これで、Wordcraft のインターフェースでテストできる状態になります。確認事項 をチェックして、コンパイル エラーがないことを確認してから作業を進めてください。

新しいキャラクター コントロールをテストする手順は次のとおりです。

  1. Wordcraft プロジェクトのルート ディレクトリに移動します。 
    cd wordcraft/
  2. プロジェクトを開発モードで実行します。 
    npm run dev
  3. ウェブブラウザで Wordcraft のユーザー インターフェースにアクセスします。「 特定のアドレスが前のコマンドの出力に表示されます。次に例を示します。
    http://localhost:3000/
  4. Wordcraft アプリケーションで、新しいストーリーを作成するか、既存のストーリーを開きます。
  5. ストーリーの編集領域で、ストーリーの最後にカーソルを置きます。イン [導入部] のコントロールが 表示されます。
  6. [紹介文字] フィールドに、登場人物の簡単な説明を入力します。 [キャラクター紹介] ボタンを選択します。

参考情報

Wordcraft プロジェクトについて詳しくは、こちらのコード リポジトリをご覧ください。詳細を確認するには、 変更する場合は、このモジュールの pull リクエスト。

本番環境のアプリケーション

多数のユーザー向けに Wordcraft のカスタマイズ版をデプロイする場合は、 なお、Google Gemini API の利用には、レート制限および その他 使用制限。 Gemini API を使用した本番環境アプリケーションの構築を ドキュメント エージェントの Google Cloud Vertex AI アプリケーションのスケーラビリティと信頼性を向上させる。