OpenAI APIでkintoneにAIを！その②

こんにちは！

今回は以前投稿した「OpenAI APIでkintoneにAIを！その①」の続きです。

ibukintone.jp

OpenAIの簡単な解説はその①に書いたので、まずはその①から読んでもらえると嬉しいです〜。

その①はあまり実用的なカスタマイズではありませんでしたが、今回はちょっと実用的なカスタマイズをやっていこうと思います！

やりたいこと

冷蔵庫の中を見て「この食材があれば、あの料理が作れそうだけど、どうやって作るのかね〜」と迷う時、ありますよね？

そんな時にお役立ちな「食材と作りたい料理を入力すると、レシピを教えてくれる」kintoneアプリを作成します。

イメージとしてはこんな感じ。

アプリ作成

まずはアプリを作成しないと始まりません。 画像のように、文字列複数行フィールドを2つ、スペースフィールドを1つ配置したアプリを作成します。

その①と同じく「kintone UI Component」でボタンを作成します。 カスタマイズ設定画面にて、kintone UI Componentを「https://unpkg.com/kintone-ui-component/umd/kuc.min.js」から読み込みます。

コードを書き書き

レコード追加時にイベントを発火させたいので、app.record.create.showを使います。

kintone.events.on('app.record.create.show', event => {

レコードの情報を取得して...

    const title = event.record['food'].value;
    const space = kintone.app.record.getSpaceElement('space');

kintone UI Componentでボタンを作成し、スペースフィールドの子要素に追加。

    const button = new Kuc.Button({
      text: '実行！',
      type: 'submit'
    });
    space.appendChild(button);

OpenAIのURLやheader、bodyを用意します。POSTするJSONのパラメータの意味もその①に書いてます。

      const url = 'https://api.openai.com/v1/engines/davinci/completions';
      const method = 'POST';
      const headers = {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer {API-Token}'
      }
      const data = {
        'prompt': food,
        'temperature': 0.0,
        'max_tokens': 120,
        'top_p': 1.0,
        'frequency_penalty': 0.0,
        'presence_penalty': 0.0,
      }

あとはkintone.proxyでOpenAI APIを実行すればおｋ。

      kintone.proxy(url, method, headers, data).then(arg => {
        // 実行結果をフィールドに設定
        const record = kintone.app.record.get();
        const resp = JSON.parse(arg[0])
        record.record['recipe'].value = resp.choices[0].text;
        console.log(record);
        kintone.app.record.set(record);
      }).catch(err => {
       console.log(err); 
      });

コード全体はこんな感じ。ボタンをクリックするとOpenAI APIが実行されます。

(function (){
  'use strict';

  // レコード追加・編集画面表示時に実行
  kintone.events.on('app.record.create.show', event => {
    // レコード情報を取得
    const food = event.record['food'].value;
    const space = kintone.app.record.getSpaceElement('space');
    
    // kintone UI Component でボタンを作成
    const button = new Kuc.Button({
      text: '実行！',
      type: 'submit'
    });
    space.appendChild(button);
    
    // ボタンがクリックされたら API を実行
    button.addEventListener('click', event => {
      const url = 'https://api.openai.com/v1/engines/davinci/completions';
      const method = 'POST';
      const headers = {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer {API-Token}'
      }
      const data = {
        'prompt': food,
        'temperature': 0,
        'max_tokens': 120,
        'top_p': 1.0,
        'frequency_penalty': 0.0,
        'presence_penalty': 0.0,
      }
      kintone.proxy(url, method, headers, data).then(arg => {
        // 実行結果をフィールドに設定
        const record = kintone.app.record.get();
        const resp = JSON.parse(arg[0])
        record.record['recipe'].value = resp.choices[0].text;
        console.log(record);
        kintone.app.record.set(record);
      }).catch(err => {
       console.log(err); 
      });
    });
  }); 
})();

いざ実行！

材料と作りたいものを入力します。今回はフレンチトーストを作ってみましょう。

出ました！確かにフレンチトーストのレシピですね。この内容で「美味しい」フレンチトーストができるかは、だいぶ怪しいですがｗ

ネタバラシ

...カンのいい方はもうお気づきでしょう。「その①とまったく同じじゃねえか！！」と。

そうなんです。コード自体はほとんど変わっていませんｗ

OpenAIは「映画のタイトルと絵文字を考えるAI」「レシピを答えるAI」といった専門的なAIではなく、汎用的なAIなので「話しかける」だけでいろいろできてしまうんです。

OpenAIのウェブサイトには、他にも「JavaScriptの関数を答える」とか「文章を要約する」といったサンプルが公開されています。

なんか夢が広がるなぁ〜（kintone関係ない）

〆

というわけで、2回にわたってOpenAIとkintoneの連携（？）で遊んでみました。

OpenAI APIは正式リリース時には有料化される可能性もありますので、興味のある方は今のうちに楽しみましょう！