Ruby on RailsでTalkAPIを利用してみた。

Ajaxの学習のために、APIを導入してみました。

導入したのは、

Talk API

Talk APIはChatbotを作成するためのAPIです。 Recurrent Neural Network(LSTM)を用いた入力文からの応答文生成による日常会話応答機能を提供します。

こちらになります。

実際導入した様子はこんな感じです。

そしてちなみにビューのコードは、hamlで書きました。

talk_api.html.haml

.talk_api
  %textarea#talkapi__input{placeholder: "Let's talk with Twitter bird", type: "input", rows: "3", maxlength: "140", class: "form-control"}
  %button#talkapi__request{type: "button", class: "btn btn-info"} Send
  .reaction_bird
    = image_tag("twitter.png", size:"30x30", alt:"twitter-logo")
  %p#talkapi__reply
  %ul.talk_history

scssはこんな感じです。

talk_api.scss

.talk_api{
  display: none;
  position: relative;
  padding: 5px 0;
  margin-top: 20px;
  textarea{
    border-radius: 20px;
    border: 3px solid #ccc;
  }
  button{
    background-color: #1da1f2;
    border-color: #1da1f2;
    float: right;
    position: relative;
    right: 10px;
  }
  .reaction_bird{
    position: relative;
    top: 60px;
  }
  #talkapi__reply {
    position: relative;
    top: 20px;
    left: 55px;
    display: inline-block;
    padding: 0 15px;
    width: auto;
    min-width: 150px;
    height: 40px;
    line-height: 34px;
    color: #19283C;
    text-align: center;
    background: #F6F6F6;
    border: 1px solid #ccc;
    border-radius: 5px;
    z-index: 0;
}
  #talkapi__reply:before {
    content: "";
    position: absolute;
    top: 50%; left: -11px;
    margin-top: -9px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 9px 9px 9px 0;
    border-color: transparent #F6F6F6 transparent transparent;
    z-index: 0;
  }
  #talkapi__reply:after {
    content: "";
    position: absolute;
    top: 50%; left: -12px;
    margin-top: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #ccc transparent transparent;
    z-index: -1;
}
  .talk_history{
    position: relative;
    top: 25px;
    font-size: 12px;
}
}

やりたかったこと

• Talk APIをAjaxで動かしてみる
• ビューに反映させる

コードから先に書くとこんな感じになります。

今回はJqueryで実装しました。

talk_api.js

$(function(){
  function buildHtml(data){
    var html = '<li>'+
                  '<p>'+
                    data.results[0].reply +
                  '</p>'
                '</li>'
    return html;
  }

  $('#talkapi__request').on('click', function(){
    var comment = $('#talkapi__input').val();

    $.ajax({
      type: "POST",
      url:"https://api.a3rt.recruit-tech.co.jp/talk/v1/smalltalk",
      data:{
        "apikey": "your API key",
        "query":comment
      },
    })
    .done(function(data){
      var api_reply = data.results[0].reply;
      var html = buildHtml(data);
      $('#talkapi__reply').text(api_reply);
      $('#talkapi__input').val("");
      $('.talk_history').prepend(html);
    })
    .fail(function(){
      alert("メッセージを入れて下さい");
    })
  });
});

必要最低限のコードを作成してみました。

"your API key"には、各自取得したAPIkeyを入力して下さい。

メールアドレス申請から簡単に取得することができます。

rails初学者なので、色々勉強中です。