最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】本地搭建前端Web页面实现机器人问答的产品演示

Web crifan 60浏览 0评论
之前已经折腾了:
【已解决】CentOS服务器中搭建Python的Flask的REST API
之后,接着继续去:
想办法搭建一个web页面,
且集成到Flask中
或者单独用nginx去render
web页面中,有个输入框:输入问题(文字)
有个输出:
  • 有个文本框,显示文字,答案
  • 有个播放器,播放一个音频文件,传入文件到url绝对路径
  • 且内部有一定的逻辑:
    • control是stop:暂停播放(如果当前正在播放的话)
    • control是continue:继续当前播放(如果之前有被暂停的播放的话)
对于前端页面,暂时就用普通的js,jquery去实现。
暂不去搞太复杂的js框架(react,vue)了。
UI方面,本来考虑bootstrap,经过:
【已解决】选择合适的前端Web UI框架
还是决定用Bootstrap
先去下载:
Bootstrap · The most popular HTML, CSS, and JS library in the world.
https://codeload.github.com/twbs/bootstrap/zip/v4.1.0
参考:
https://getbootstrap.com/docs/4.1/getting-started/introduction/#starter-template
去拷贝html,先放到flask的static文件夹:
先自己本地慢慢测试。
通过:
Contents · Bootstrap
去找example的例子
然后用代码:
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">

    <title>xxx英语智能机器人演示</title>
  </head>
    <div class="logo text-center">
        <img class="mb-4" src="pic/logo_transparent_183x160.png" alt="xxx Logo" width="72" height="72">
    </div>

    <h2>xxx英语智能机器人</h2>
<!--
    <p>用于演示智能对话</p>
    <button type="button" class="btn btn-primary">提交对话</button>
    <input class="btn btn-primary" type="submit" value="提交对话" />
    <button type="button" class="btn btn-primary btn-lg">提交对话</button>

    <button type="button" class="btn btn-primary btn-lg btn-block">提交对话</button>

    <div class="input-group">
      <input type="text" class="form-control" placeholder="请输入您要说的话" aria-label="Recipient's username" aria-describedby="basic-addon2">
      <div class="input-group-append">
        <button class="btn btn-primary btn-lg" type="button">提交</button>
        <button class="btn btn-outline-secondary btn-sm" type="button">清除</button>
      </div>
    </div>
-->
    <form>
      <div class="form-group input_request">
        <input type="text" class="form-control" id="inputRequest" placeholder="请输入您要说的话">
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary btn-lg col-sm-3">提交</button>
        <button class="btn btn-secondary btn-lg col-sm-3" type="button">清除</button>
      </div>
    </form>

      <div class="output text-center bg-light box-shadow mx-auto" style="width: 96%; height: 160px; border-radius: 21px 21px 0 0; padding-top: 20px;">
          <p>as a book-collector, i have the story you just want to listen!</p>
      </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> -->
    <script src="js/bootstrap.js"></script>
  </body>
</html>
效果:
所以,暂时界面先弄到这里,要去搞清楚:
【已解决】Bootstrap的css中如何用js去提交http的get请求调用服务器的REST API
再去搞懂:
【已解决】jquery的js中如何设置html元素的值
然后再去:
【已解决】jquery的js中把json对象转换为格式化后的带缩进的json字符串
嫌弃不够美观,所以再想办法去高亮:
【已解决】js中如何把输出的json代码高亮显示
截止目前相关代码为:
static/robotDemo.html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="css/highlightjs_default.css"> -->
    <link rel="stylesheet" href="css/highlight_atom-one-dark.css">
    <!-- <link rel="stylesheet" href="css/highlight_monokai-sublime.css"> -->
    <link rel="stylesheet" href="css/main.css">

    <title>xxx英语智能机器人演示</title>
  </head>
    <div class="logo text-center">
        <img class="mb-4" src="pic/logo_transparent_183x160.png" alt="xxx Logo" width="72" height="72">
    </div>

    <h2>xxx英语智能机器人</h2>

    <form>
      <div class="form-group input_request">
        <input id="inputRequest" type="text" class="form-control" placeholder="请输入您要说的话" value="i want to hear the story of apple">
      </div>
      <div class="form-group">
        <button id="submitInput" type="submit" class="btn btn-primary btn-lg col-sm-3">提交</button>
        <button id="clearInput" class="btn btn-secondary btn-lg col-sm-3" type="button">清除</button>
      </div>
    </form>

      <div id="response" class="bg-light box-shadow mx-auto">
          <pre><code class="json">here will output response</code></pre>
      </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/highlight.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>
static/css/main.css
.logo{
    padding: 10px 2%;
}

h2{
    text-align: center;
    margin-top: 0;
    margin-bottom: 40px;
}

form {
    text-align: center;
}

.form-group {
    padding-left: 2%;
    padding-right: 2%;
}

#response {
    width: 96%;
    height: 380px;
    border-radius: 10px;
    padding-top: 20px;
}
static/js/main.js
$(document).ready(function(){

    // when got response json, update to highlight it
    function updateHighlight() {
        console.log("updateHighlight");

        $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    }

    updateHighlight();

    $("#submitInput").click(function(event){
        event.preventDefault();

        ajaxSubmitInput();
    });
    
    function ajaxSubmitInput() {
        console.log("ajaxSubmitInput");

        var inputRequest = $("#inputRequest").val();
        console.log("inputRequest=%s", inputRequest);
        var encodedInputRequest = encodeURIComponent(inputRequest)
        console.log("encodedInputRequest=%s", encodedInputRequest);

        var qaUrl = "http://xxx:32851/qa";
        console.log("qaUrl=%s", qaUrl);
        var fullQaUrl = qaUrl + "?input=" + encodedInputRequest
        console.log("fullQaUrl=%s", fullQaUrl);

        $.ajax({
           type : "GET",
           url : fullQaUrl,
           success: function(respJsonObj){
                console.log("respJsonObj=%o", respJsonObj);

                // var respnJsonStr = JSON.stringify(respJsonObj);
                //var beautifiedJespnJsonStr = JSON.stringify(respJsonObj, null, '\t');
                var beautifiedJespnJsonStr = JSON.stringify(respJsonObj, null, 2);
                console.log("beautifiedJespnJsonStr=%s", beautifiedJespnJsonStr);

                var prevOutputValue = $('#response').text();
                console.log("prevOutputValue=%o", prevOutputValue);
                var afterOutputValue = $('#response').html('<pre><code class="json">' + beautifiedJespnJsonStr + "</code></pre>");
                console.log("afterOutputValue=%o", afterOutputValue);

                updateHighlight();
           },
           error : function(err) {
              $("#output").html("<strong>Error</strong>");
              console.log("GET: ", qaUrl, " ERROR: ", err);
           }
        });
    }

    $("#clearInput").click(function(event){
        // event.preventDefault();
        console.log("event=%o", event);
        $('#inputRequest').val("");

        $('#response').html('<pre><code class="json">here will output response</code></pre>');
        updateHighlight();
    });
});
运行效果:
点击提交:
点击清除:
接下来,还要再去,加上音频播放器:
【已解决】Bootstrap+jquery中添加好看好用的音频播放器

转载请注明:在路上 » 【已解决】本地搭建前端Web页面实现机器人问答的产品演示

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
16 queries in 0.086 seconds, using 9.54MB memory