附录2-聊天机器人案例

最新推荐文章于 2023-10-22 22:51:26 发布

Suyuoa

最新推荐文章于 2023-10-22 22:51:26 发布

阅读量261

点赞数

分类专栏： Ajax笔记文章标签：前端

本文链接：https://blog.csdn.net/potato123232/article/details/127666653

版权

Ajax笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1 效果

2 后端

3 前端

1 效果

2 后端

视频中的后台用了NLP的聊天机器人，那个搞起来比较麻烦，不过语音合成还是能搞的，我们就搞一个固定的对话

接口文档我就不写了，直接看postman

无论发什么都会返回你好

视图是这样的，在POST请求的同时会存储一个静态文件，静态文件名称为test.mp3是机器人回复你的文字合成的音频文件

3 前端

这个是移动端的web页面，我们按照移动端开发

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="initialization.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <header>
        <span>小思同学</span>
        <div></div>
    </header>
    <article>
        <div class="robot_chat">
            <div class="robot_head"></div>
            <div class="robot_content">你好，我是小思同学</div>
        </div>
        <!-- <div class="user_chat">
            <div class="user_head"></div>
            <div class="user_content">123123131231456456</div>
        </div>
        <div class="robot_chat">
            <div class="robot_head"></div>
            <div class="robot_content">1231231312314564564</div>
        </div>
        <div class="user_chat">
            <div class="user_head"></div>
            <div class="user_content">123123131231456456</div>
        </div>
        <div class="robot_chat">
            <div class="robot_head"></div>
            <div class="robot_content">1231231312314564564</div>
        </div> -->
    </article>
    <footer>
        <div></div>
        <input type="text" placeholder="说点儿什么吧...">
        <button>发 送</button>
    </footer>
    <audio src="http://127.0.0.1:8000/static/start.mp3" autoplay="autoplay" style="display:none;"></audio>
</body>
<script src="../jquery-3.6.1.min.js"></script>
<script src="index.js"></script>
</html>

css

body {
    background-color: rgb(243,242,241);
}

header {
    position: fixed;
    display:flex;
    justify-content: space-between;
    width:100%;
    height:10vw;
    padding:0vw 5vw;
    background:-webkit-linear-gradient(left,rgb(248,137,134),rgb(181,136,246));
    z-index:999;
    span {
        font-size:2vw;
        line-height:10vw;
        color:white;
    }
    div {
        position: absolute;
        transform: translateY(-50%);
        top:50%;
        right:5%;
        width:8vw;
        height:8vw;
        border-radius: 50%;
        background-image:url(upload/robot_head.jpg);
        background-size:8vw 8vw;
    }
}


article {
    position: relative;
    top:10vw;
    width:100%;
    height:100%;
    padding-bottom:15vw;
    .robot_chat {
        position: relative;
        width:100vw;
        height:10vh;
        padding:10vw 0;
        .robot_head {
            position: absolute;
            transform: translateY(-50%);
            top:45%;
            left:2%;
            width:8vw;
            height:8vw;
            border-radius: 50%;
            background-image:url(upload/robot_head.jpg);
            background-size:8vw 8vw;
        }
        .robot_content {
            position: absolute;
            transform: translateY(-50%);
            top:75%;
            left:11%;
            max-width:75%;
            border-width: 2vw;
            padding:2vw 2vw 2vw 5vw;
            border-style:solid;
            border-image-source:url(upload/robot_chat_border.png);
            border-image-slice:81 99 73 155;
            border-image-width:81px 99px 73px 155px;
        }
    }
    .user_chat {
        position: relative;
        width:100vw;
        height:10vh;
        padding:10vw 0;
        .user_head {
            position: absolute;
            transform: translateY(-50%);
            top:45%;
            right:2%;
            width:8vw;
            height:8vw;
            border-radius: 50%;
            background-image:url(upload/user_head.jpg);
            background-size:8vw 8vw;
        }
        .user_content {
            position: absolute;
            transform: translateY(-50%);
            top:75%;
            right:11%;
            max-width:75%;
            border-width: 2vw;
            padding:2vw 10vw 2vw 2vw;
            border-style:solid;
            border-image-source:url(upload/user_chat_border.png);
            border-image-slice:81 99 73 155;
            border-image-width:81px 155px 73px 99px;
        }
    }
}

footer {
    position: fixed;
    bottom:0px;
    display: flex;
    justify-content: space-between;
    width:100%;
    height:10vw;
    background-color: rgb(253,254,253);
    z-index:999;
    div {
        margin:1vw 0vw 0vw 5vw;
        width:8vw;
        height:8vw;
        border-radius: 50%;
        background-image:url(upload/user_head.jpg);
        background-size:8vw 8vw;
    }
    button {
        width:16vw;
        height:8vw;
        margin:1vw 5vw 0vw 0vw;
        border:1px solid transparent;
        border-radius: 2vw;
        font-size:3vw;
        color:white;
        background-color: rgb(254,150,150);
    }
    input {
        margin-top:1vw;
        width:60vw;
        height:8vw;
        border:1px solid transparent;
        border-radius: 2vw;
        text-indent: 3vw;
        outline: none;
        background-color: rgb(243,242,241);
    }
}

function get_chat() {
    user_content = $('footer input').val().trim()
    if (user_content) {
        $('article').append('<div class="user_chat"><div class="user_head"></div><div class="user_content">'+ user_content +'</div></div>')
        $.ajax({
            type:'POST',
            url:'http://127.0.0.1:8000/robot_chat',
            data:{user_content:user_content},
            success:function(result) {
                result = JSON.parse(result)
                robot_content = result['content']
                $('article').append('<div class="robot_chat"><div class="robot_head"></div><div class="robot_content">'+ robot_content +'</div></div>')
                window.scroll(0,$('body').height())
                $('audio').attr('src','http://127.0.0.1:8000/static/test.mp3')
            }
        })
    }
    $('footer input').val('')
}


$('footer button').on('click',function() {
    get_chat()
})

$('footer input').on('keyup',function(e) {
    if (e.keyCode == 13) {
        get_chat()
    }
})

需要注意的点

除了用POST发送用户给机器人的话以外，audio标签的src其实是一个隐藏的get请求，在项目中我使用了静态文件中的音频文件
使用JS更换audio标签的src，如果audio标签设置了autoplay，即使是谷歌浏览器也可以播放出音频
初次加载audio标签，即使使用JS更换src，依然不能自动播放出声音

Suyuoa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
附录2-聊天机器人案例

视图是这样的，在POST请求的同时会存储一个静态文件，静态文件名称为test.mp3是机器人回复你的文字合成的音频文件。视频中的后台用了NLP的聊天机器人，那个搞起来比较麻烦，不过语音合成还是能搞的，我们就搞一个固定的对话。这个是移动端的web页面，我们按照移动端开发。接口文档我就不写了，直接看postman。无论发什么都会返回你好。
复制链接

扫一扫