OpenAIのAssistants APIを試してみた

2024/06/12

1. Function Calling
2. Code Interpreter
3. Retrieval
パラメータの設定

ガイドラインのマークダウンファイルを読み込ませて回答させてみる
1. 質問
2. 回答
AIの活用場面を増やしていくために

1. OpenAIのAssistants APIについて

Assistants APIは、開発者が自然言語で対話するAIアシスタントを構築するためのツールです。現在はBeta版がリリースされているのみで、正式なバージョンはまだ出ていないようです。
Assistants APIを使用することで、チャット形式のAIの挙動や回答をカスタマイズし、さまざまな分野に応用して適用させることが可能になります。

Assistants APIは現在３つのツールが用意されており、これらを活用することで、APIを組み込みシステムに特化したAIチャットを作ることが可能になります。

OpenAI – Assistans API

1. Function Calling

Function Callingは、コード内の関数を呼び出すための機能を提供します。
ユーザーが特定の関数を呼び出したいときに、それを簡単に実現することができます。
例えば、特定の計算を行う関数や特定のアクションを実行する関数などを呼び出す際に活用されます。

2. Code Interpreter

Code Interpreterツールは、ユーザーが入力したコードを解釈し、実行する機能を提供します。
これにより、ユーザーは自分で書いたコードの動作を確認したり、新しいコードを試したりする際に便利です。
さまざまなプログラミング言語に対応しており、効果的なコーディング体験をサポートします。

3. Retrieval

Retrievalツールは、データベースやリソースから情報を取得するための機能を提供します。
ユーザーが特定の情報やデータを必要とする場合に、それを素早く検索して提供することができます。
例えば、特定の質問に対する回答を取得したり、特定の画像や文書を検索したりする際に有用です。

2. PlaygroundでAssistants APIを試してみる

OpenAIではAssistants APIを試せるPlaygroundがあります。
OpenAIのサイトにログインすると誰でも利用できるので、今回はこのPlaygroundでAssistants APIを試してみたいと思います。

Playgroundは直訳すると「遊び場」ですが、プログラミングでは「ウェブブラウザ上で実際にプログラミング言語の挙動やライブラリ、フレームワークを試すことのできるサービス」のことです。

3. Assistants Playgroundでのテスト機能

Assistants Playgroundでは、実際にプログラムを作成する前にAPIの動作検証を行うことができます。
Assistants Playgroundは以下のような画面構成になっています。

パラメータの設定

画面左側のメニューでは、Assistants APIのパラメータの設定が行えます。

Name … Playgroundで利用するAIの名前を入力します
Instructions … AIが質問に対しての振る舞いを指示します
Model … 利用するChatGPTのモデルを選択します
File Search … 質問を回答するための知識となる、ドキュメントやソースコードのファイルをアップロードできます。（Retrievalの機能）
Code Interpreter … ソースコードをアップロードすることで、AIがコードを解釈し、実行結果を出力することができます。
Functions … 特定の関数を登録することで、AIに特定の条件で関数を実行させることが可能になります。（Function Callingの機能）
Response format … AIの返答を会話形式ではなく、構造化されたデータ形式（JSON）で返す指定です
Temperature … AIの返答内容をコントロールすることができます。低い値では、より確信度の高い応答が生成されますが、高い値ではより冒険的な応答が得られます。
Top P … AIが返答する内容の多様性と安定性のバランスを調整することができます。値を小さくすると、より一貫したテキストが生成されますが、Pの値を大きくするとより多様性のあるテキストが得られます。

ガイドラインのマークダウンファイルを読み込ませて回答させてみる

今回はCSSやHTMLなど、コーディングに関するガイドラインドキュメントをマークダウンファイルでアップロードし、AIに具体的な実装方法を質問してみました。

質問

CSSのコーディングガイドラインを教えて

回答

CSSのコーディングガイドラインは、以下のようになります:

## CSS設計の基本
CSSは主に3つのレイヤーに分類されます:

1. Foundation - 基本的なスタイルリセットやブラウザ間の違いを吸収するためのスタイル
2. Layout - レイアウトを定義し、ページ内の主要なコンテナブロックを管理
3. Object - 再利用可能なパーツ（ボタンやモーダルなど）を含むオブジェクト。このレイヤーはさらに4つのサブレイヤーに分けられます 
    - Component - 再利用可能な小さな単位のパーツ
    - Project - サイト固有の、より複雑なパーツ
    - Form - 入力フィールドなどのUIパーツ
    - Utility - 余白や調整用のスタイル

## セレクタの命名規則
CSSセレクタの命名にはBEM（Block Element Modifier）を使用します:

- Block: block はパーツ全体を表します。例: .c-block
- Element: element は block の一部を表します。例: .c-block__element
- Modifier: modifier は block または element の状態やバリエーションを表します。例: .c-block__element--modifier

クラス名の接頭辞は、それが所属するレイヤーを示す文字とします。例えば、Component のクラスは .c- で始まり、Utility のクラスは .u- で始まります 。

## セレクタの記述ルール
1. 要素名使用の禁止: Foundationレイヤー以外ではHTMLの要素名を使用しません。
2. IDの使用禁止: CSSでのID指定は禁止されています。詳細度が高くなりすぎるためです。
3. 他のパーツをセレクタに使用しない: Component、Form、Utilityレイヤーのパーツは他のパーツに依存しないようにします 。

## フォーマットとスタイルガイド
以下はフォーマットのルールです:

- インデント: インデントは2スペース。
- 開始ブラケット: メソッドや関数の開始ブラケットは改行させますが、条件分岐やループの開始ブラケットは改行しません。
- 丸括弧のスペース: 開始丸括弧の左は半角スペース無し、終了丸括弧の右は半角スペースを空けます。
- コメント: 関数の概要、引数の説明、戻り値の説明を含むようにします。 。

## Pseudoコード例
以下は具体的なSCSSの例です:

```scss
// Blockレイヤー層でModifierを定義する
.c-block {
  $this: &;

  &.__modifier {
    // 派生スタイル
    ...

    // Scssでエレメントのスタイルを変える場合
    #{$this}__element {
      // Elementの派生スタイル
      ...
    }
  }
}

// Elementレイヤー層でModifierを定義する
.c-block {
  &__element {
    &.__modifier {
      // 派生スタイル
      ...
    }
  }
}
```

具体的な形でガイドラインに従ったプロジェクト構成をするときは、SCSS ファイルの読み込み、各種コンポーネントの作成、修正を行います。例えば、ボタンのカスタムコンポーネントを作成する場合:

```scss
@use 'c_button-custom';
```

CSSのコーディングガイドラインは、以下のようになります:

## CSS設計の基本

CSSは主に3つのレイヤーに分類されます:

1. Foundation - 基本的なスタイルリセットやブラウザ間の違いを吸収するためのスタイル

2. Layout - レイアウトを定義し、ページ内の主要なコンテナブロックを管理

3. Object - 再利用可能なパーツ（ボタンやモーダルなど）を含むオブジェクト。このレイヤーはさらに4つのサブレイヤーに分けられます

- Component - 再利用可能な小さな単位のパーツ

- Project - サイト固有の、より複雑なパーツ

- Form - 入力フィールドなどのUIパーツ

- Utility - 余白や調整用のスタイル

## セレクタの命名規則

CSSセレクタの命名にはBEM（Block Element Modifier）を使用します:

- Block: block はパーツ全体を表します。例: .c-block

- Element: element は block の一部を表します。例: .c-block__element

- Modifier: modifier は block または element の状態やバリエーションを表します。例: .c-block__element--modifier

クラス名の接頭辞は、それが所属するレイヤーを示す文字とします。例えば、Component のクラスは .c- で始まり、Utility のクラスは .u- で始まります。

## セレクタの記述ルール

1. 要素名使用の禁止: Foundationレイヤー以外ではHTMLの要素名を使用しません。

2. IDの使用禁止: CSSでのID指定は禁止されています。詳細度が高くなりすぎるためです。

3. 他のパーツをセレクタに使用しない: Component、Form、Utilityレイヤーのパーツは他のパーツに依存しないようにします。

## フォーマットとスタイルガイド

以下はフォーマットのルールです:

- インデント: インデントは2スペース。

- 開始ブラケット: メソッドや関数の開始ブラケットは改行させますが、条件分岐やループの開始ブラケットは改行しません。

- 丸括弧のスペース: 開始丸括弧の左は半角スペース無し、終了丸括弧の右は半角スペースを空けます。

- コメント: 関数の概要、引数の説明、戻り値の説明を含むようにします。。

## Pseudoコード例

以下は具体的なSCSSの例です:

```scss

// Blockレイヤー層でModifierを定義する

.c-block {

$this: &;

&.__modifier {

// 派生スタイル

...

// Scssでエレメントのスタイルを変える場合

#{$this}__element {

// Elementの派生スタイル

...

}

// Elementレイヤー層でModifierを定義する

.c-block {

&__element {

&.__modifier {

// 派生スタイル

...

}

```

具体的な形でガイドラインに従ったプロジェクト構成をするときは、SCSS ファイルの読み込み、各種コンポーネントの作成、修正を行います。例えば、ボタンのカスタムコンポーネントを作成する場合:

```scss

@use 'c_button-custom';

```

かなりざっくりした質問ですが、事前にアップロードしたドキュメントの中にあったCSSのコーディングガイドラインの内容に則った形で回答してくれました。
記法や命名規則も正確に記載されており、読み込ませるリソースやソースコード次第で、回答の精度はかなり高くできそうです。

AIの活用場面を増やしていくために

少し前まではチャット形式で質問・回答ができるだけだったAIも、
今ではドキュメントを読み込ませたり、事前に処理方法を指定できるようになって、特定の業務などにも柔軟に対応して利用できるようになってきているなと感じます。

普段の仕事の中でAIを活用していくためには、当たり前にしている作業をAIにさせることができないか、都度見直していく意識が大事なのかなと思いました。
そして、AIをどうやって使えるのか、新しい機能などをキャッチアップしてアイデアの引き出しを増やしていきたいですね。

ブログ