以前にコンソールアプリで AI を扱うチャットアプリを作りました。

rksoftware.hatenablog.com

今回は Web アプリに組み込んでみます。GitHub のリポジトリはこちら。

github.com

こんな感じに文章要約を AI で行います。

今回はその 6。AI を扱う機能をラップした JavaScript のエンドポイントのコントローラーの種類です。

■ 全体の目次です

rksoftware.hatenablog.com

■ Web アプリに追加する、とは？

Web アプリそのものは別途存在していて、アドオン敵に AI 機能を追加する試みです。
簡単に言うと Web アプリのプロジェクトとは別のプロジェクトで AI の機能を実装します。そして、それらのプロジェクトに依存関係はないものの、実行時には AI 機能を持って Web アプリが動く。そういう夢のような構成です。

■ API コントローラーをコントローラーに

GitHub に公開しているコードでは JavaScript を API コントローラーで作っていました。
これを普通のコントローラーにしてみます。

//[Microsoft.AspNetCore.Mvc.ApiController]
[Microsoft.AspNetCore.Mvc.Controller]
[Microsoft.AspNetCore.Mvc.Route("[controller]")]
public class AIScriptController : Microsoft.AspNetCore.Mvc.ControllerBase
{
    [Microsoft.AspNetCore.Mvc.HttpGet()]
    public string Get() => """
        function addAIClientAPI(idButton, idTextarea, site) {
            document.getElementById(idButton).setAttribute('onclick', `aiClientAPI('${idTextarea}', site);return false;`);
        }
        function aiClientAPI(id, site) {
            alert('要約します');
            var elm = document.getElementById(id);
            fetch(`${site}/AI`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ userMessage: elm.value })
            })
            .then(response => response.json())
            .then(data => {
                elm.value = data.aiMessage;
                alert('要約しました');
            })
            .catch(error => {
                alert(error);
            });
        }
    """;
}

動きました。※Web サイトの見た目は変わらないので画像は省略

■ エンドポイント エクスプローラー

ちゃんと読めていますね！

■ 次回

次回からは DLL だけほしい実行できなくて良いプロジェクトの Program.cs ファイルについて考えてみたいと思います。