之前已经折腾了：
之后，接着继续去：
想办法搭建一个web页面，
且集成到Flask中
或者单独用nginx去render
web页面中，有个输入框：输入问题（文字）
有个输出：
- 有个文本框，显示文字，答案
- 有个播放器，播放一个音频文件，传入文件到url绝对路径
- 且内部有一定的逻辑：
- control是stop：暂停播放（如果当前正在播放的话）
- control是continue：继续当前播放（如果之前有被暂停的播放的话）
对于前端页面，暂时就用普通的js，jquery去实现。
暂不去搞太复杂的js框架（react，vue）了。
UI方面，本来考虑bootstrap，经过：
还是决定用Bootstrap
先去下载：
参考：
去拷贝html，先放到flask的static文件夹：
先自己本地慢慢测试。
通过：
去找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>
效果：
所以，暂时界面先弄到这里，要去搞清楚：
再去搞懂：
【已解决】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();
});
});运行效果：
点击提交：
点击清除：
接下来，还要再去，加上音频播放器：
转载请注明：在路上 » 【已解决】本地搭建前端Web页面实现机器人问答的产品演示