手把手教你制作一个简单的聊天机器人(图灵api)「建议收藏」

手把手教你制作一个简单的聊天机器人(图灵api)「建议收藏」前言:在无聊的时候打打游戏、听听歌还不如来找个人来陪你聊天,今天来教大家制作一个聊天机器人,这样就不会无聊了,在线聊天机器人地址借愁哥哥机器人(可能有点丑,大家将就一下(????))这个接口就目前的一天100次聊天机会,大家要珍惜哦,源码在文章末尾哦!效果图:目录:一.准备工作二.项目开始1.页面布局:2.样式层:3.逻辑实现:一.准备工作通过分析我们需要以下的具体准备:对于界面的分析,我们需要用到的插件:jQuery,我们采用的是flex弹性布局,既然使用的是图灵机器人

大家好,又见面了,我是你们的朋友全栈君。

前言:在无聊的时候打打游戏、听听歌还不如来找个人来陪你聊天,今天来教大家制作一个聊天机器人,这样就不会无聊了,在线聊天机器人地址借愁哥哥机器人(可能有点丑,大家将就一下 (?) )


这个接口就目前的一天100次聊天机会,大家要珍惜哦,源码在文章末尾哦!


效果图:


机器人演示图


一.准备工作


通过分析我们需要以下的具体准备:

  1. 对于界面的分析,我们需要用到的插件:jQuery
  2. 我们采用的是flex弹性布局,
  3. 既然使用的是图灵机器人那么就需要图灵机器人的api

在这里插入图片描述

二.项目开始


1.页面布局:


在前面说过我们需要采用flex来进行布局,那么我们来看看大概代码:

我们需要引入的文件:

     <!-- 自己书写的css样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入jQuery插件 -->
    <script src="./js/jquery-3.5.1.min.js"></script>
    <!-- 书写的js逻辑层 -->
    <script src="./js/index.js"></script>
    <!-- 滚动条插件 -->
    <link rel="stylesheet" href="./css/optiscroll.css">
    <!-- js版本 -->
    <script src="./js/optiscroll.js"></script>
    <!-- 或者作为jQuery插件 -->
    <script src="./js/jquery.optiscroll.js"></script>

HTML:

    <div class="action">
        <h3>借愁哥哥</h3>
        <!-- 中间聊天部分 -->
        <div class="top optiscroll" id="scroll">
            <ul class="menu">
                <li class="top_left">
                    <img src="./img/you.jpg" class="left">
                    <!--开始默认机器人说的话-->
                    <span class="message">借愁哥哥下发的小可爱</span>
                </li>
            </ul>
            <div class="drag_bar" style="display: none;">
                <div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div>
            </div>
        </div>
        <div class="bottom">
            <input type="text" id="text1" placeholder="想要说点什么呢?">
            <button class="btn">发送</button>
        </div>
    </div>

2.样式层:


当然仅仅有HTML代码并不能看出大概的效果,我们通过css来进行渲染一下:

CSS:

/* css初始化 */

* { 
   
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul li { 
   
    list-style: none;
}


/* 设置整体布局的样式 */

.action { 
   
    width: 500px;
    height: 700px;
    border: 1px solid #999;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.action h3 { 
   
    text-align: center;
}


/* 设置消息装载容器 */

.action .top { 
   
    flex: 15;
    background-color: #ddd;
}

.action .top .menu { 
   
    position: relative;
}

.action .top img { 
   
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.action .top .message { 
   
    border: 5px solid black;
    border-radius: 6px;
    max-width: 290px;
    border-radius: 12px;
    font-size: 16px;
    color: black;
    margin-left: 13px;
    line-height: 24px;
}

.action .top .top_left { 
   
    left: 0;
    display: block;
}

.action .top .top_right { 
   
    position: absolute;
    right: 0;
}


/* 设置输入消息容器 */

.action .bottom { 
   
    flex: 1;
    background-color: #333;
    display: flex;
}

.bottom input { 
   
    flex: 4;
}

.bottom button { 
   
    flex: 1;
}

3.逻辑实现:


前面已经进行了布局和样式的设计,那么我们具体来看看怎么实现,我们需要的是图灵机器人的api,那么我们要去图灵机器人官网去申请,当我们注册认证成功后,那么我们会有以下界面:
在这里插入图片描述
我们需要的是其中的apikey来进行与机器人具体的操作!

  1. 由大概界面知道,我们是通过点击发送按钮来进行消息的传输,那么我们就需要发送按钮的点击事件;
// 点击发送按钮
    $('.btn').click(function() { 
   
        // 获取到文本框的值
        var text1 = $("#text1").val();
        // 判断是否为空值
        if (text1.trim().length > 0) { 
   
        //添加节点
            $(".menu").append(`<li class="top_right" style="margin-top:20px;"> <span class="message">${ 
     text1}</span> <img src="./img/me.jpg" class="left"> </li>`);
            // 文本框值进行清空
            $("#text1").val('');
            // 调用对话函数(在下面会进行书写)
            getTL(text1);
        } else { 
   
        //输入框内容清空
            $("#text1").val('');
        };
    });
  1. 发送了消息后怎么处理呢?这时候我们来书写消息处理对话函数;
   //【2】进行对话操作
    function getTL(text) { 
   
    //data对象存储apikey和返回的消息
        var data = { 
   
            key: '758ecd943dd644b59ff2d1f73759500d',
            info: text
        };
        //提交数据
        $.post("http://www.tuling123.com/openapi/api", data, (result) => { 
   
            console.log(result);
            // 可以正常聊天的code
            if (result.code === 100000) { 
   
                $(".menu").append(`<li class="top_left" style="margin-top: 100px;"> <img src="./img/you.jpg" /> <span class="message">${ 
     result.text}</span></li>`);
            } 
            //为40004时候就是我们的激活使用完了,当然每天100次哦
            else if (result.code === 40004) { 
   
                $(".menu").append(`<li class="top_left"> <img src="./img/you.jpg" style="margin-top: 80px;" /> <span class="message">今天的俺有点瞌睡了,让俺好好休息休息,明天再来看你哦!</span></li>`);
            };
        });
    };
  1. 当然我们可以采用按下回车建的方法来进行消息的发送,如下:
$('#text1').on("keyup", function(e) { 
   
        // 回车键
        if (e.keyCode === 13) { 
   
        //调用点击事件
            $('.btn').click();
        }
    });

这样简单的聊天机器人就实现了,源码地址:https://github.com/JCGG-99977/Roboat(当然你们觉得照片丑的话可以自行更换哦!)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/161215.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号