皆さんBingの検索画面の右横にりんなさんがいるのはご存じでしたでしょうか？ Bingで検索を行うと右側に小さくアイコンが表示され、ここでりんなさんとおしゃべりができます。
↑こんな感じで仕事中におしゃべりができて少しなごみます（サボりはだめ）。
今回はAI「りんな」さんとお話するAPIがrinna Developersで公開されているので、それを使ってBotを作成、LINEにリリースするまでの流れを試してみました！本記事から複数回に分けてお届けしたいと思います。
上の画像がアプリの完成イメージです。 会話のAPIに加えて、こちら側の感情を分類してくれるEmotion Classification API, Positive Negative Classification APIも試してみました。
rinna Developersを試してみる
API Subscription Keyを取得する
rinna Developersで公開されているAPIを使うにはサイトにサインアップしてSubscriptionの登録が必要になります。
サインアップが完了したら、「Product」へ移動します。
最初に試したいのはCharacter Conversation APIなのでこちらをクリックします。
下の方にスクロールするとSubscriptionを登録します。
User Profileから以下のようにSubscriptionの登録状況が確認できます。
テンプレートから最初のボットの作成
最初にテンプレートを動かしてみましょう。
過去にチャットボットを動かすところまではブログにまとめたので参考までに。 blog.jbs.co.jp
一応公式のリンクも貼っておきます。 learn.microsoft.com
Character Conversation APIを叩いてみる
次にデフォルトのテンプレートをりんなさんのAPIを叩いて結果を表示できるように書き換えていきます。 rinna Developersのサイトに行くと、とても気が利いていて、コピペするだけでりんなさんのAPIが叩けるようになっています。 下画像の赤丸で囲んだ「Try」をクリックするとリクエストのサンプルがパラメーター付で表示されます。
APIs: Details - rinna Developers
rinna Developersが用意してくれているリクエストのサンプルを見ながらソースコードを書き換えていきます。
protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken) { // Conversation API var uri = "https://api.rinna.co.jp/models/cce"; var content = new StringContent("{ \"rawInput\":\"" + turnContext.Activity.Text + "\", \"outputLength\": 25 }"); JObject json = await httpRequestAsync(uri, content, "<Subscription Key>"); var replyText = $"{json["answer"]}"; await turnContext.SendActivityAsync(MessageFactory.Text(replyText, replyText), cancellationToken); } /// <summary> /// /// </summary> /// <param name="uri">リクエスト先のURL</param> /// <param name="textContent">リクエストで送信するテキスト</param> /// <param name="subscriptionKey">Rinner Developerでサブスクリプションキーを作成する</param> /// <returns></returns> private async Task<JObject> httpRequestAsync(string uri, StringContent content, string subscriptionKey) { var client = new HttpClient(); client.DefaultRequestHeaders.CacheControl = CacheControlHeaderValue.Parse("no-cache"); client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", subscriptionKey); content.Headers.ContentType = new MediaTypeHeaderValue("application/json"); var response = await client.PostAsync(uri, content); return JObject.Parse(response.Content.ReadAsStringAsync().Result); }
curl to C# Converterについて
rinna Developersに用意されているC#のリクエストサンプルにBodyの値がセットされていなかったので、自分が試したときはcurl to C# Converterというサイトを使いました。 curlのリクエストサンプルにはBodyの値がセットされていたのでそれをcurl to C# Converterに張り付けるとコピペして使えるC#コードを生成できます。 curl2csharp.com
Adaptive Cardを作ってみる
Adaptive Cardの作成
りんなさんとの会話に加えて、Classification APIも試してみたかったのでAdaptive Cardというのを使ってチャット画面での表示を整えてみました。
learn.microsoft.com 参考までに今回作ってみたAdaptiva Cardです。
{ "type": "AdaptiveCard", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.2", "body": [ { "type": "TextBlock", "text": "りんなの感情分析！", "wrap": true }, { "type": "FactSet", "facts": [ { "title": "ネガポジ: ", "value": "{NegaPosi}" } ] }, { "type": "FactSet", "facts": [ { "title": "Emotion: ", "value": "{Emotion}" } ] } ] }
Adaptive CardをC#から読み込む
ファイル構成は下画像のようになっています。
Bot自体のソースコードはEchoBot.csに、Adaptive Cardの定義は./Cards/SubmitString.jsonに書いています。
EchoBot.csから./Cards/SubmitString.jsonを読み込むソースコードは下のようになっています。
var paths = new[] { ".", "Bots", "Cards", "SubmitString.json" }; var adaptiveCardJson = File.ReadAllText(Path.Combine(paths));
Emotion Classification API, Poditive Negative Classification APIのレスポンスをAdaptive Cardに埋め込んでいく
リクエストの実行をして結果をAdaptive Cardにセットする。
他にやり方が思い浮かばなかったのでReplaceメソッドでレスポンスを埋め込んでいきました。
adaptiveCardJson.Replace("{Emotion}", json["data"][0]["output"]["prediction_labels"][0].ToString())の部分はもう少し完結にしたかったのですが致し方なく。
// Emotion Classification API uri = "https://api.rinna.co.jp/models/emotion-classification"; content = new StringContent("{ \"data\": [ \"" + turnContext.Activity.Text + "\" ] }"); json = await httpRequestAsync(uri, content, "<Subscription Key>"); adaptiveCardJson = adaptiveCardJson.Replace("{Emotion}", json["data"][0]["output"]["prediction_labels"][0].ToString()); // Poditive Negative Classification uri = "https://api.rinna.co.jp/modules/positivenegative-classification"; content = new StringContent("{ \"texts\": [ \"" + turnContext.Activity.Text + "\" ] }"); json = await httpRequestAsync(uri, content, "<Subscription Key>"); adaptiveCardJson = adaptiveCardJson.Replace("{NegaPosi}", json["output"]["prediction_labels"][0].ToString());
Adaptive Cardをチャット画面に表示する
var adaptiveCardAttachment = new Attachment() { ContentType = "application/vnd.microsoft.card.adaptive", Content = JsonConvert.DeserializeObject(adaptiveCardJson), }; var message = MessageFactory.Attachment(adaptiveCardAttachment); await turnContext.SendActivityAsync(message, cancellationToken);
ここまででできたらローカルで動作確認してみましょう！ 次回はAzureへのリリース方法、LINEのDeveloperコンソールについて触れられればと思っています。
