注意事項
この記事は、Notion AIに対して
- 問題と解決策の概要
- 例示用のコード
を渡して生成した実験的な記事になります。
はじめに
既に多くの方々が似たChrome拡張を作っているため何番煎じかは分かりませんが、Chrome拡張を作成しました。
今回は、自身の勉強のためにOpenAI APIと連携して、選択している文字列を操作する拡張でbr1eflyという名前にしています。
この記事では、br1eflyの使い方や設定方法などについて紹介します。新しい操作方法に挑戦したい方は、ぜひお試しください。
機能概要
br1eflyが現時点でできる機能は以下になります。
- 要約
- 言い換え
- 言語検出
- 対案の作成
- 文章の構成
を行うことができます。
これらの機能は設定画面で選択した言語で出力されるように調整しています。
またOpenAIだけではなく、Azure OpenAI Serviceにも対応しているため、組織で契約している場合でも利用がしやすいです。
br1eflyの使い方
br1eflyを使うには、以下の手順を実行します。
- 操作をしたい文章をブラウザ上で選択する
- 右クリックをしてコンテキストメニューを開き、br1eflyのメニューから行いたい指示を選ぶ
- 選択範囲の1番下に"Processing..."というものが出てくるので、しばらく待つ
- エラーがなければ、"Processing..."の代わりに結果の文字列が表示される
- Closeを押して閉じる
手順を画像付きでスライドのように表示できるサービスを使っているマニュアルは以下です。（見れない場合があるかも？）
注意事項
- 出力結果の言語は、設定画面で指定している言語になります
- それなりに安定していますが、設定を無視して別の言語になることがあります
インストール
bri1eflyは現時点ではStoreに公開しているわけではないため、GitHubからzipをダウンロードして手動でインストールする必要があります。
API Keyなどを不正に取得するようなコードは書いていませんが、不安な方は気軽に質問でもしてください。
- br1eflyのリリースから最新版のzipをダウンロードする
- zipを展開する
- Chrome拡張の画面を開く
- Developer modeを有効にする
- Load unpackedで展開したディレクトリを選択する
手順を画像付きでスライドのように表示できるサービスを使っているマニュアルは以下です。（見れない場合があるかも？）
設定
br1eflyを使うためには、API Keyとエンドポイントの設定が必要です。
設定方法は以下の通りです。
- br1eflyのoptionsを開く
- Output Languageで出力結果の言語を指定する
- API TypeでOpenAIかAzureを選択する
- API Keyを入力する
- API Keyを発行したアカウントの利用可能なModelを選択する
- 【Azureのみ】 Endpointを入力する
- Saveをクリックして保存する
手順を画像付きでスライドのように表示できるサービスを使っているマニュアルは以下です。（見れない場合があるかも？）
追加したい機能
今後追加しておきたいと思っている機能は、以下になります。
- 履歴機能
- 元々は特定のプロンプトを特定の文字列に実行した結果を簡単に記録しておいて後から振り替えれるようにしたかったので気が向いたら実装するかも
- データ構造・プログラミング言語変換機能
- ブラウザで使うかは怪しいですが、ちょいちょい使うこともあるため実装されると嬉しいかも
- ユーザが独自にメニューとプロンプトを追加できる機能
- デフォルトで決まっている指示のみを実行しているが、組み込む前に動作確認をしたかったり、公開したくないプロンプトもあるため、この機能を追加したい
- 関連してパラメータもプロンプトごとに設定できると嬉しい
- 設定のExport/Import機能
- 他の人と共有したい場合に簡単に共有できるようにしておきたい
- APIキーなどは除外すると思います
ここには書いてないですが、ポップアップで表示されるHTMLをもう少しまともにするか、 任意の文字列を入れれるようにしておくことも検討しておきたいですね。
まとめ
本記事では、OpenAI APIを使ったChrome拡張「br1efly」について紹介しました。
機能の使い方や設定方法、また追加したい機能についても触れました。
仕組みの具体的な話や、TypeScriptで書くにあたって大変だったことなどは別の記事で触れようと思います。
ぜひ、APIの課金には気をつけながらbr1eflyを触ってみてください。
