Question

我们是否有基于API.AI的网页示例，这些网页响应用户查询，并学习并更好地响应。我搜索了网络，但没有找到任何。可能遗漏了一些基本的东西。

Answer 1

好的 - 如果您只是在寻找如何将API.ai聊天机器人部署到基于Web的自定义应用程序（例如Facebook信使），我建议您查看以下问题： how to connect my chatbot user interface to APIAI serverhost via python sdk or javascript?

我详细说明了大部分细节，并链接到一个完整的工作示例。这应该让你开始。

Answer 2

如果您只是希望将已经使用API.AI构建的聊天机器人嵌入到网页中，那么它非常简单。您需要从API.AI工作区发布bot，复制嵌入代码并将其粘贴到HTML中。这不是一个可以自定义的白标聊天机器人，它只是在一个iFrame中。它在格式化方面也有一些限制（例如，你没有可点击的超链接）和其他富文本。

如果您需要更多详细信息，可以在我的博客上查看此文章。

http://miningbusinessdata.com/embedding-api-ai-chatbot-into-your-wordpress-site/

您还可以看到我嵌入到自己的WordPress博客中的一些（简单的）聊天机器人的一些示例

http://miningbusinessdata.com/botfolio/

更新04/28/17：

我已经想出如何编写一些自定义代码来执行此操作。你可以查看我的文章： https://miningbusinessdata.com/adding-faq-chatbot-to-your-wordpress-site-using-api-ai/

Answer 3

Insert your access Token and enjoy! 
   <html>
    <head>
        <title>BOT </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript">
            var accessToken = "yourAccessToken";
            var baseUrl = "https://api.api.ai/v1/";
            var synth ;  
            $(document).ready(function() {
                $("#input").keypress(function(event) {
                    if (event.which == 13) {
                        event.preventDefault();
                        send();
                    }
                });
                $("#rec").click(function(event) {
                    switchRecognition();
                });
            });
            var recognition;
            function startRecognition() {
                recognition = new webkitSpeechRecognition();
                recognition.onstart = function(event) {
                    updateRec();
                };
                recognition.onresult = function(event) {
                    var text = "";
                    for (var i = event.resultIndex; i < event.results.length; ++i) {
                        text += event.results[i][0].transcript;
                    }
                    setInput(text);
                    stopRecognition();
                };
                recognition.onend = function() {
                    stopRecognition();
                };
                recognition.lang = "en-US";
                recognition.start();
            }

            function stopRecognition() {
                if (recognition) {
                    recognition.stop();
                    recognition = null;
                }
                updateRec();
            }
            function switchRecognition() {
                if (recognition) {
                    stopRecognition();
                } else {
                    startRecognition();
                }
            }
            function setInput(text) {
                $("#input").val(text);
                send();
            }
            function updateRec() {
                $("#rec").text(recognition ? "Stop" : "Speak");
            }
            function send() {
                var text = $("#input").val();
                $.ajax({
                    type: "POST",
                    url: baseUrl + "query?v=20150910",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    headers: {
                        "Authorization": "Bearer " + accessToken
                    },
                    data: JSON.stringify({ query: text, lang: "en", sessionId: "somerandomthing" }),
                    success: function(data) {
                        setResponse(JSON.stringify(data, undefined, 2));
                    },
                    error: function() {
                        setResponse("Errore di comunicazione con il server.");
                    }
                });
                setResponse("Caricamento...");
            }
            function setResponse(val) {
            //$("#response").text(val);
            var obj = JSON.parse(val);
            var response = obj.result.fulfillment.messages[0].speech;//testo a capo  //obj.result.fulfillment.speech;
            if (response != null)
                $("#response").text(response);
                else 
                $("#response").text(val);


            }
        </script>
        <style type="text/css">
            body { width: 500px; margin: 0 auto; text-align: center; margin-top: 20px; }
            div {  position: absolute; }
            input { width: 400px; }
            button { width: 50px; }
            textarea { width: 100%; }
        </style>
    </head>
    <body>
        <div>
            <input id="input" type="text"> <button id="rec">Speak</button>
            <br>Response<br> <textarea id="response" cols="40" rows="20"></textarea>
        </div>
    </body>
    </html>

API.AI - 基于网页的示例

3 个答案: