山东大学软件学院项目实训-创新实训-基于大模型的旅游平台（二十）

作者：知新_RL | 2024-08-21 12:26:43

踩

大模型旅游咨询问答系统介绍

在这篇博客中，我们将介绍一个用于旅游咨询的Web应用。这段代码实现了一个简单的网页，通过与大模型的交互，解答用户提出的各种旅游相关问题。下面我们将逐步分析代码的各个部分，解释其功能和实现方式。

HTML结构和基本布局

首先，我们来看看HTML文档的基础结构和布局。

html
复制代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>大模型旅游咨询问答</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/layui/css/modules/layer/default/layer.css}"/>
    <link rel="stylesheet" th:href="@{/css/global.css}"/>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        #chat-container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
        }
        #chat-log {
            padding: 20px;
            height: 300px;
            overflow-y: scroll;
            border-bottom: 1px solid #ddd;
        }
        .message {
            margin-bottom: 10px;
        }
        .user-message {
            background-color: #f0f0f0;
            padding: 5px;
            border-radius: 5px;
            margin-right: auto;
        }
        .bot-message {
            background-color: #e0e0ff;
            padding: 5px;
            border-radius: 5px;
            margin-left: auto;
        }
        #chat-input-container {
            padding: 10px;
            display: flex;
        }
        #chat-input {
            flex-grow: 1;
            border: 1px solid #ddd;
            padding: 5px;
            border-radius: 5px;
            margin-right: 10px;
        }
        #send-button {
            padding: 5px 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="layui-container container">
    <h2 class="page-title">大模型旅游咨询问答</h2>
    <div class="layui-form layui-form-pane">
        <div id="chat-container">
            <div id="chat-log"></div>
            <div id="loading-progress" style="display: none; text-align: center; margin-top: 20px;">
                <img src="upload/111.gif" alt="Loading...">
                <p>大模型正在为您解答...</p>
            </div>
            <div id="chat-input-container">
                <textarea id="chat-input" placeholder="输入你的旅游方案的问题（如交通、美食、住宿等方面问题）..."></textarea>
                <button id="send-button">提问</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

页面头部信息

页面头部包含了HTML文档的基本设置，包括文档类型、语言、字符集等。这里使用了Thymeleaf模板引擎来加载CSS文件和其他资源。

样式设置

内嵌的样式定义了页面的基本布局和样式，包括字体、边距、容器布局、聊天日志样式等。通过这些样式，页面呈现出简洁美观的聊天界面。

页面主体和功能实现
页面主体结构

页面主体部分包含了一个容器，用于显示聊天日志和输入区域。用户可以在输入框中输入问题，通过点击“提问”按钮发送消息。

html
复制代码
<div class="layui-container container">
    <h2 class="page-title">大模型旅游咨询问答</h2>
    <div class="layui-form layui-form-pane">
        <div id="chat-container">
            <div id="chat-log"></div>
            <div id="loading-progress" style="display: none; text-align: center; margin-top: 20px;">
                <img src="upload/111.gif" alt="Loading...">
                <p>大模型正在为您解答...</p>
            </div>
            <div id="chat-input-container">
                <textarea id="chat-input" placeholder="输入你的旅游方案的问题（如交通、美食、住宿等方面问题）..."></textarea>
                <button id="send-button">提问</button>
            </div>
        </div>
    </div>
</div>

JavaScript交互逻辑

页面加载完成后，JavaScript代码负责处理用户的输入和与后台服务器的交互。

javascript
复制代码
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var chatInput = document.getElementById('chat-input');
        var chatLog = document.getElementById('chat-log');
        var sendButton = document.getElementById('send-button');

        sendButton.addEventListener('click', function () {
            var message = chatInput.value;
            chatLog.innerHTML += '<p><strong>用户:</strong> ' + message + '</p>';
            chatInput.value = '';

document.getElementById('loading-progress').style.display = 'block';

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/yiyan/travelPlanChat?messages=' + encodeURIComponent(message), true);

            xhr.onload = function () {
                if (xhr.status >= 200 && xhr.status < 300) {
                    var response = xhr.responseText;
                    chatLog.innerHTML += '<p><strong>大模型解答:</strong> ' + response + '</p><br>';
                } else {
                    console.error('请求失败:', xhr.status, xhr.statusText);
                }
                document.getElementById('loading-progress').style.display = 'none';
            };

            xhr.onerror = function () {
                console.error('网络请求出错');
                document.getElementById('loading-progress').style.display = 'none';
            };

            xhr.send();
        });
    });
</script>

事件监听和消息处理

JavaScript代码在页面加载完成后，添加了对发送按钮的点击事件监听。当用户点击“提问”按钮时，获取输入框中的内容，显示用户的消息，并发送GET请求到后台服务器。

与后台服务器交互

通过XMLHttpRequest对象，前端代码向服务器发送请求，并处理服务器的响应。如果请求成功，显示大模型的回复；否则，处理错误情况。

总结

通过以上分析，我们详细介绍了这段代码的功能和实现方式。这是一个简单但功能齐全的旅游咨询问答系统，利用前端技术与后台大模型交互，实现了用户与AI模型的实时对话。希望这篇博客对你理解和实现类似的功能有所帮助。如果你有任何问题或建议，请随时留言讨论。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/1011774