バックエンドクラウドサービスHexabaseで、ChatGPTと連携する

Last updated at 2023-04-10Posted at 2023-04-09

この記事では、HexabaseのActionScriptで外部Webサービスと連携する方法を解説します。題材として、OpenAIのChatGPT APIを取り上げます。

ChatGPTは、現在人気の人工知能チャットボットプログラムですね。

Hexabaseは、Webサービスや企業システムの開発に利用できる国産バックエンドクラウドサービスです。このHexabaseを利用することで、ChatGPTを利用したWebサービスや企業システムを高速で開発できます。

この記事で解説しているのは、2つのサービスの基本的な連携方法です。ChatGPTのAPIをHexabaseから1回だけ呼び出して、その結果をフィールドに書き込みます。

ChatGPTの回答には数10秒程度の時間がかかることがあるため、質問してすぐに回答が取得されません。このデモプログラムでは、数10秒程度が過ぎてからアイテムを確認することで回答を表示できます。

作成するもの

今回作成するのは、単純はQ&Aツールです。質問に投稿するとChatGPTが回答してくれます。

フロントエンドは持っておらず、管理画面で直接操作して回答を得ています。

また、ひとつひとつの質問は独立しており、前の質問と回答を考慮しません。

利用するAPI

OpenAI Chat API
- endpoint: 'https://api.openai.com/v1/chat/completions'
- model: 'gpt-3.5-turbo',
UpdateItem | Hexabase API ガイド
- https://apidoc.hexabase.com/docs/v0/item-actions/UpdateItem

準備

ChatGPT API

OpenAI のアカウントを取得する
- https://platform.openai.com/account/
OpenAI APIのAPI Keyを取得する
- https://platform.openai.com/account/api-keys

次のCurlコマンドで動作確認できます。

$ curl https://api.openai.com/v1/chat/completions \
  -H "Authorization: Bearer $OPENAI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
  "model": "gpt-3.5-turbo",
  "messages": [
    {"role": "user", "content": "観光客向けに、ソメイヨシノについて150文字程度で説明して"}
  ]
}'

Hexabase

Hexabaseのアカウントを取得する
ワークスペース・アプリケーション・データベースを用意する
データベースに次のフィールドを用意する
- 質問(Display ID = "title")
- 回答(Display ID = "answer_ai")
アプリケーション設定 > プログラム拡張 > 定数の登録に、OpenAI APIのAPI Keyを設定する

アクションスクリプト

新規作成アクションのActionScript - Postに、次のスクリプトを設定する。

ソースコード

async function main(data) {

    logger.info("Main Process starting...");

    const ENDPOINT = 'https://api.openai.com/v1/chat/completions';
    const API_KEY = '{gpt_token}';
    const result_ai = await callChatGPT(data.title, ENDPOINT, API_KEY);
    
    logger.info("Result AI：" + result_ai);
    
    const appId = "APP-AI-posts";
    const datastoreId = "Db-Article";
    const comment_fieldId = "answer_ai"; // コメントを書き込むフィールドのID
    return await callHexaAPI(data, appId, datastoreId, comment_fieldId, result_ai);
}

async function callChatGPT(prompt, ENDPOINT, API_KEY) {

    return await axios.post(
            ENDPOINT,
            {
                model: 'gpt-3.5-turbo',
                messages: [{
                    role: "user",
                    content: prompt
                }],
                max_tokens: 200
            },
            {
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${API_KEY}`,
                },
            }
        ).then(response => {
            console.log('API呼び出し成功:', response.data.choices[0]);
            return response.data.choices[0].message.content;
        })
        .catch (error => {
            if (error.response) {
                console.log('API呼び出しエラー:', error.response.data);
            } else if (error.request) {
                console.log('APIへのリクエストエラー:', error.request);
            } else {
                console.log('エラー:', error.message);
            }
            throw new Error(error);
    });
}

async function callHexaAPI(data, appId, datastoreId, comment_fieldId, comment_ai) {
    return new Promise((resolve, reject) => {
    
        logger.info("処理を開始します...");
    
        // Hexabase APIを呼び出し
        const url = "api/v0/applications/" + appId + "/datastores/" + datastoreId + "/items/edit/" + data.i_id;
        const payload = {
            "item": {
                [comment_fieldId]: comment_ai
            },
            "use_display_id": true,
            "return_item_result": true,
            "is_force_update": true,
            "access_key_updates": {	
                "ignore_action_settings": true,
                "overwrite": false,
                "apply_related_ds": true,
                "groups_to_publish": []
            }
        } // APIのリクエストパラメータ
        return callAPIAsync('POST', url, payload).then(res => {
            logger.log(res.data);
            logger.info("処理が完了しました：" + data.title + "：" + comment_ai);
        }).catch(error => {
            logger.error("エラーが発生しました：" + error)
            reject(error);  
        });    
    
    });
}

解説

Hexabaseでは、データベースに対するCURDなどの基本的な操作をアクションと呼んでいます。ActionScriptは、このアクションをトリガーにして呼び出せるJavaScriptのコードです。

アクションを実行すると、ActionScriptのmain関数を呼び出します。

main関数からは、次の2つの関数を呼び出しています。

1つ目のcallChatGPT関数は、ChatGPTのAPIを呼出し、質問から回答を習得しています。

2つ目のcallHexaAPI関数は、HexabaseのAPIを呼出し、回答をフィールドに書き込みます。

動作

管理画面のアプリケーションで、新規投稿ボタンを押す
アイテムの新規作成が表示されたら、質問を入力する
アイテムが作成されたら、アイテム詳細を閉じる(この段階では、回答は取得できていない)
数10秒程度して、作成した質問アイテムをクリックすると、回答が書き込まれている