网页简单对话机器人(无服务端)

本文介绍了一个基于Java开发的智能聊天机器人网页界面的设计与实现细节,包括页面布局、交互功能及前后端通信机制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

页面代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>智能机器人</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <style>
        body{background:linear-gradient(-45deg,#33ff00,#ce86e0,#00a4ff);margin:0;padding:0;}
        .top{
            width:100%;
            height:60px;
            background:rgba(0,0,0,0.5);
            text-align:center;
            color:#fff;
            font-size:25px;
            line-height:50px;
        }

        .content{
            width:800px;
            height:600px;
            background:rgba(255,255,255,0.5);
            margin:25px auto;
        }


        .c_head{
            position:absolute;
            width: 800px;
            height: 70px;
            background:linear-gradient(-45deg,#00ffff,#ffffff,#00ffff);
        }
        .logo{
            margin-top:5px;
            margin-left:30px;
            width:96px;
            height:60px;
            position: relative;
            float: left;
        }
        .logoImg{
            border-radius:120px; 
            opacity:0.6;
        }
        .title_logo{
            margin-left: 10px;
            position: relative;
            float: left;
        }
        .t_logo{
            font-size: 22px;
            text-align: center;
            color: #ffffff;
        }

        .c_center{
            width:800px;
            height: 530px;
            position:absolute;
            top:155px;
        }
        .speak_one{
            position:relative;
            margin-top:10px;
            width: 98%;
            height: 50px;
            margin-left:10px; 
        }
        .r_one_p{
            width:50px;
            height:50px;
            position: relative;
            float: left;
            border: 1px;
        }
        .r_one_photo{
            border-radius:50px;
            border: 1px;
        }
        .r_one_t{
            position: relative;
            float: left;
            margin-left:10px;
        }
        .r_one_text{
            width: 120%;height:35px;
            max-width:640px;
            margin-top:10px;
            text-align:center;
            background: #00ffff;
            opacity:0.8;
            border: 1px;
            border-radius:12px; 
        }
        .speak_two{
            float: right;
            margin-top: 10px;
            position:relative;
            width: 98%;
            height: 50px;
            margin-right: 10px;
        }
        .r_two_t{
            position: relative;
            float: right;
            margin-right:10px;

        }
        .r_two_text{
            width: 120%;height:35px;
            max-width:640px;
            margin-top:10px;
            text-align:center;
            background: #00ffff;
            opacity:0.8;
            border: 1px;
            border-radius:12px; 
            float: right;
        }
        .r_two_p{
            width:50px;
            height:50px;
            position: relative;
            float: right;
            border: 1px;
        }
        .r_two_photo{
            border-radius:50px;
            border: 1px;
        }

        .c_footer{
            position:absolute;
            top:630px;
            width:100%;height:60px;
        }
        .c_f_left{
            position: relative;
            float:left;
            margin-left: 15px;
        }
        .c_f_right{
            position: relative;
            float:left;
            margin-left: 15px;
        }
        .inputIfo{
            margin-top:5px;
            width: 680px;
            height: 45px;
            border-radius:5px;border: 1px;
            background:rgba(169,169,169,0.5);
        }
        .sendIfo{
            margin-top:5px;
            width:70px;
            height: 45px;
            border-radius:5px;border: 1px;
            background:rgba(105,105,105,0.5);
        }
        img{
            width: 100%;
            height:100%;
        }
        p{
            font-family: "楷体";
        }
    </style>


    <script type="text/javascript">
        function sendIfo(){
            //获取输入内容
            var text = document.getElementById("I_Ifo").value;
            //alert(text);

            //新建一行
            var new_speak_two = document.createElement("div");
            new_speak_two.className="speak_two";
            //alert(new_speak_two==null);

            //创建头像部分div
            var r_two_p = document.createElement("div");
            r_two_p.className="r_two_p";

            //创建图片img
            var r_two_photo = document.createElement("img");
            r_two_photo.className="r_two_photo";
            r_two_photo.src="images/robot_one.jpg";

            r_two_p.appendChild(r_two_photo);

            //新建对话部分div
            var r_two_t = document.createElement("div"); 
            r_two_t.className="r_two_t";

            //创建文本p标签
            var r_two_text = document.createElement("p");
            r_two_text.className="r_two_text";
            r_two_text.innerHTML=text;

            r_two_t.appendChild(r_two_text);

            //添加到new_speak_two
            new_speak_two.appendChild(r_two_p);
            new_speak_two.appendChild(r_two_t);

            //添加到c_center队尾
            var c_center_Div = document.getElementById("c_center_div");
            c_center_Div.appendChild(new_speak_two);


            //清空输入框内容
            document.getElementById("I_Ifo").value="";

            returnIfo(text);
        }

        function returnIfo(t){
            var text = t;
            connection(t);
            //新建一行
            var new_speak_one = document.createElement("div");
            new_speak_one.className="speak_one";
            //alert(new_speak_one==null);

            //创建头像部分div
            var r_one_p = document.createElement("div");
            r_one_p.className="r_one_p";

            //创建图片img
            var r_one_photo = document.createElement("img");
            r_one_photo.className="r_one_photo";
            r_one_photo.src="images/robot_two.jpg";

            r_one_p.appendChild(r_one_photo);

            //新建对话部分div
            var r_one_t = document.createElement("div"); 
            r_one_t.className="r_one_t";

            //创建文本p标签
            var r_one_text = document.createElement("p");
            r_one_text.className="r_two_text";
            r_one_text.innerHTML=text;

            r_one_t.appendChild(r_one_text);

            //添加到new_speak_one
            new_speak_one.appendChild(r_one_p);
            new_speak_one.appendChild(r_one_t);

            //添加到c_center队尾
            var c_center_Div = document.getElementById("c_center_div");
            c_center_Div.appendChild(new_speak_one);
        }

        //链接服务端
        function connection(t){

            var textOne = t;

            var xmlhttp = new XMLHttpRequest();

            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState==4)
                    var textTwo = xmlhttp.responseText;
            };
            xmlhttp.open("post","Query.java",true);
            xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xmlhttp.send(textOne);
        }

    </script>
  </head>

  <body>
    <div class="top">JAVA 开发人工智能</div>
    <div class="content">
        <div class="c_head">
            <div class="logo"><img src="images/robot_log.jpg"/ class="logoImg"></div>
            <div class="title_logo"><p class="t_logo">人工机器人</p></div>
        </div>

        <div class="c_center" id="c_center_div">
            <div class="speak_one">
                <div class="r_one_p"><img src="images/robot_two.jpg" class="r_one_photo"/></div>
                <div class="r_one_t"><p class="r_one_text">嗨,最近想我了吗</p></div>
            </div>

            <div class="speak_two" style="display: none;">
                <div class="r_two_p" ><img src="images/robot_one.jpg" class="r_two_photo"/></div>
                <div class="r_two_t"><p class="r_two_text">当然了?</p></div>
            </div>
        </div>

        <div class="c_footer">
            <div class="c_f_left"><input class="inputIfo" type="text" id="I_Ifo"/></div>
            <div class="c_f_right"><button class="sendIfo" onclick="sendIfo()"><p>发送</p></button></div>
        </div>
    </div>
    <div id="footer"></div>
  </body>
</html>











### 使用ESP32构建语音对话机器人的实现方法 #### 关键组件和技术栈 为了成功搭建基于ESP32的语音对话机器人,需采用一系列关键技术来支持整个系统的运作。这其中包括但不限于WiFi模块用于网络连接、麦克风采集音频信号、扬声器播放回复声音以及最重要的自然语言处理(NLP)服务接口调用来解析并响应人类言语指令。 #### 网络配置与保持稳定连接 确保ESP32设备能持续接入互联网对于维持流畅的人机交流至关重要。为此,在初始化阶段就要设置好Wi-Fi参数,并编写相应的程序逻辑去监测当前联网状态;一旦检测到断网情况,则自动尝试重新连接直至恢复在线[^1]。 #### 音频硬件集成 选择合适的外部传感器件如I2S兼容型MEMS麦克风阵列作为拾音装置,配合内置DAC驱动的小功率喇叭完成语音输出部分的设计。值得注意的是,考虑到功耗因素,建议选用低电压工作的型号以延长电池续航时间。 #### 数据传输层设计 针对不同场景需求可灵活运用多种通讯手段——比如利用串行端口调试命令行界面(CLI),或者借助HTTP POST请求向远程服务器发送待分析的话语片段,又或者是订阅发布模式下的消息队列遥测传输(MQTT)[^1]。其中任一途径都能有效地承载从客户端至云端NLP引擎之间的信息交换过程。 #### 自然语言理解平台对接 目前市面上存在许多优秀的第三方API可供开发者快速上手实践,例如Dialogflow、Rasa或是阿里云提供的相关产品等。这些工具通常具备强大的意图识别能力,能够精准捕捉用户表达的核心诉求进而给出恰当的回答策略。 #### 示例代码展示 以下是简化版Python风格伪代码框架,旨在说明如何组织上述各要素形成完整的应用流程: ```cpp #include <WiFi.h> #include <HTTPClient.h> const char* ssid = "your_SSID"; const char* password = "your_PASSWORD"; void setup() { Serial.begin(115200); // 连接 Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } } void loop() { if(WiFi.status()==WL_CONNECTED){ String url = "https://api.example.com/chatbot"; HTTPClient http; http.begin(url); int httpResponseCode = http.GET(); if(httpResponseCode>0){ String response = http.getString(); // 解析返回的数据并执行相应操作 }else{ Serial.print("Error on sending GET: "); Serial.println(httpResponseCode); } http.end(); } else { Serial.println("WiFi Disconnected"); } } ``` 此段示例仅演示了通过GET方法获取在线聊天机器人答复的方式,实际开发过程中还需加入更多的异常捕获机制和服务端POST上传本地录音文件等功能扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值