【GitHub Models】【GPT-4o】さくっとAI組み込みアプリ開発デビューしよう！

この記事は、 KENTEM TechBlog アドベントカレンダー2024 16日目、12月16日の記事です。

皆さん普段の業務でAIは利用していますか？

ChatGPTの登場から早いもので二年が経過。
始めの頃は「すげー！AIが喋ってる！」と感動はしたものの、
ちょっと難しい質問をすると、「違う、そうじゃない」とサングラスの男性の顔がちらつく状態。
業務で頼りにするにはちょっと怪しいかなー？というのが正直な感想でした。

それから時間が経ち、GPT-3.5, GPT-3.5 Turbo, GPT-4, GPT-4o, GPT-4o mini... と様々なモデルが登場。
最近ではo1シリーズなんてのも出てきました。
ChatGPTもGPT-3.5から変わり、GPT-4oがお返事してくれるようになりました。
回答の質も大幅に向上し、今となってはChatGPTを使わない日はない程度には頼りになる存在です。

各モデルの高性能化や、AIを組み込んだプロダクトの事例を耳にする機会も増加、
本格的にプロダクトに採用とまではいかずとも、ちょっと試してみたいなぁ・・・
そうウズウズしているエンジニアの方は多いのではないでしょうか？

そんなあなたに朗報！
GPT-4oを含む様々なモデルを無料で試せるサービスがあるんです！
本日はそんなサービスであるGitHub Modelsの紹介です。

GitHub Modelsとは
入り方
利用可能なモデルの一覧
Playgroundで遊んでみる
- GPT-4oで遊んでみる
- モデルの応答を比較してみる
API経由で呼び出してみる
レート制限について
おわりに

GitHub Modelsとは

2024年8月に限定公開のベータ版として登場、
2024年10月に公開プレビューで利用可能となったサービスです。

GPTに加え、Phi, Llama, Ministralなどのシリーズをお試しで利用できます。
Playgroundはもちろん、API経由での利用も可能でサンプルコードも掲載。
初心者でも簡単に利用することができます。

試して楽しかったー！で終わりではなく、
いいアプリが出来れば、エンドポイントなどをAOAI（Azure OpenAI）のものに入れ替えることで、本番運用への移行も可能です。
※ モデルの提供元がAOAIの場合

入り方

Marketplace内のModelsにあります。

GitHubのヘッダーのハンバーガーメニューを展開

Marketplaceを選択

Modelsを選択

利用可能なモデルの一覧

ここから確認できます

チャット用のモデルはもちろん、ベクトル検索などに用いられる、
Embeddingモデルも用意されているのも嬉しいポイントです。

画面上部から提供元や、チャットモデルやEmbeddingモデル、
マルチモーダルなどの特徴でフィルターすることが可能です。

Playgroundで遊んでみる

GPT-4oで遊んでみる

とりあえず、モデル一覧からGPT-4oを選択してみます。

モデルの解説が表示され、
入出力のトークン数にレート制限（後述）、対応言語などの情報が確認できます。
PlaygroundボタンからPlaygroundに入ることができます。

試しにあいさつしてみましょう。

元気なあいさつを返してくれましたね！

システムプロンプトを与えてみます。

※ KENTEMはこのような会社ではないので、安心してくださいね。

モデルの応答を比較してみる

Compareボタンをクリックすると画面が分割されます。

上部のセレクターからモデルを変更可能。
Sync chat input and parametersにチェックしていると、片方への入力がもう片方に反映されます。

片方に送信するだけで、もう片方も応答してくれます。
結果の比較検討がしやすいですね。

API経由で呼び出してみる

さて、さくっとAI組み込みアプリ開発デビューしよう！というタイトルなのですから、
いつまでもPlaygroundで遊んでいても仕方がありません。
いよいよソースコードから呼び出してみます。

Get API keyボタンをクリック。

使い方を解説するダイアログが開きます。
言語は、Python, JavaScript, C#, Javaから選択できます。
SDKはAzure AI Inference SDKもしくは、モデルの提供元のSDK（OpenAIであれば、OpenAI SDK）から選択できます。
（言語やモデルによってはSDKの選択肢が限られる場合があるようです。）

提供元の異なるモデルを色々試したいという場合は、Azure AI Inference SDKを、
使うモデルが決まっていて特化したい場合は、提供元のSDKを使うとよいようです。

今回はJavaScript ＆ Azure AI Inference SDKの組み合わせで試してみます。

JavaScriptを選択したため、Node.jsをインストール。
利用にはGitHubのトークンが必要です。Get developer keyボタンをクリック。

2024年12月現在、2種類のトークンが選択できますが、
今回は上のGenerate new tokenをクリック。

名前と有効期限を設定します。
リポジトリへのアクセス権などは不要なので、他はデフォルトのままでOK。

作成したトークンが表示されます。
再表示はできないのでメモしておいてください。

適当な作業ディレクトリを用意、そこにpackage.jsonを作成。

{
  "type": "module",
  "dependencies": {
    "@azure-rest/ai-inference": "latest",
    "@azure/core-auth": "latest",
    "@azure/core-sse": "latest"
  }
}

公式では bash or powershell or Windows command promptのパターンでサンプルが掲載されています。
お好みのものを起動し、先程package.jsonを作成したディレクトリで以下のコマンドを実行。

npm install

同じディレクトリで、sample.jsを作成。

単純なメッセージを送り、お返事が返ってくるだけのプログラムです。
プロンプトや、メッセージはお好きに設定してください。

import ModelClient from "@azure-rest/ai-inference";
import { AzureKeyCredential } from "@azure/core-auth";

const token = process.env["GITHUB_TOKEN"];
const endpoint = "https://models.inference.ai.azure.com";
const modelName = "gpt-4o";

export async function main() {

  const client = new ModelClient(
    endpoint,
    new AzureKeyCredential(token),
  );

  const response = await client.path("/chat/completions").post({
    body: {
      messages: [
        { role:"system", content: "あなたは忍者風の口調のアシスタントです" },
        { role:"user", content: "おはようございます！" }
      ],
      temperature: 1.0,
      top_p: 1.0,
      max_tokens: 1000,
      model: modelName
    }
  });

  if (response.status !== "200") {
    throw response.body.error;
  }
  console.log(response.body.choices[0].message.content);
}

main().catch((err) => {
  console.error("The sample encountered an error:", err);
});

先程作成したGitHubのトークンを以下のコマンドで設定。

コマンドはご利用のターミナルによって異なります。

bash:
export GITHUB_TOKEN="<作成したGitHubのトークン>"
powershell:
$Env:GITHUB_TOKEN="<作成したGitHubのトークン>"
Windows command prompt:
set GITHUB_TOKEN=<作成したGitHubのトークン>

ついに準備完了！以下のコマンドで実行します。

node sample.js

お返事きましたね！やりました！

せっかくGPT-4oを試しているので、画像を読み込ませてみましょう。

sample2.jsを作成します。

import ModelClient from "@azure-rest/ai-inference";
import { AzureKeyCredential } from "@azure/core-auth";
import fs from 'fs';

const token = process.env["GITHUB_TOKEN"];
const endpoint = "https://models.inference.ai.azure.com";
const modelName = "gpt-4o";

export async function main() {

  const client = new ModelClient(endpoint, new AzureKeyCredential(token));

  const response = await client.path("/chat/completions").post({
    body: {
      messages: [
        { role: "system", content: "あなたは忍者風の口調のアシスタントです" },
        { role: "user", content: [
            { type: "text", text: "この画像を解説して"},
            { type: "image_url", image_url: {
                url: getImageDataUrl("sample.jpg", "jpg"), details: "low"}}
          ]
        }
      ],
      model: modelName
    }
  });

  if (response.status !== "200") {
    throw response.body.error;
  }
  console.log(response.body.choices[0].message.content);
}

/**
 * Get the data URL of an image file.
 * @param {string} imageFile - The path to the image file.
 * @param {string} imageFormat - The format of the image file. For example: "jpeg", "png".
 * @returns {string} The data URL of the image.
 */
function getImageDataUrl(imageFile, imageFormat) {
  try {
      const imageBuffer = fs.readFileSync(imageFile);
      const imageBase64 = imageBuffer.toString('base64');
      return `data:image/${imageFormat};base64,${imageBase64}`;
  } catch (error) {
      console.error(`Could not read '${imageFile}'.`);
      console.error('Set the correct path to the image file before running this sample.');
      process.exit(1);
  }
}

main().catch((err) => {
  console.error("The sample encountered an error:", err);
});