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

最新推荐文章于 2024-07-12 22:58:11 发布

sahdajs

最新推荐文章于 2024-07-12 22:58:11 发布

阅读量276

点赞数 5

分类专栏：创新实训-基于大模型的旅游平台文章标签：旅游

本文链接：https://blog.csdn.net/sahdajs/article/details/138266853

版权

创新实训-基于大模型的旅游平台专栏收录该内容

15 篇文章 0 订阅

订阅专栏

技术博客：基于大模型的旅游平台文生图前端实现解析

在本文中，我们将深入分析一段基于大模型的旅游平台的前端HTML页面代码。该平台允许用户输入旅游景点信息，并生成相应的旅游照片。我们将详细解析代码的结构、功能以及关键点，并提供一些改进建议。
在这里插入图片描述

1. 文档类型和语言设置

页面声明了HTML5文档类型，并且设置了页面语言为英文。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

2. 引入外部资源

页面通过Thymeleaf的th:src和th:href属性动态引入了JavaScript文件和CSS样式表。这种动态路径解析可以方便地在不同环境下使用相同的资源。

<script th:src="@{/js/jquery/jquery-2.1.4.min.js}" type="text/javascript"></script>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>

3. 内联样式

页面定义了一些内联CSS样式，用于设置页面的基本布局和组件样式。

<style>
    /* CSS styles here */
</style>

4. 导航栏

页面顶部有一个导航栏，使用Thymeleaf的th:if来判断是否显示某些导航项，这取决于用户是否已经登录。

<ul class="layui-nav layui-layout-right layui-nav-right" lay-filter="filter" th:if="${session.user} eq null">
    /* 导航项 */
</ul>

5. 主要容器

页面的主要内容被包裹在一个div容器中，该容器有一个类container，用于设置内边距和最大宽度。

<div class="container">
    <h1>文字转图片生成器</h1>
    <!-- 输入区域和按钮 -->
</div>

6. 输入区域和按钮

用户可以在这个区域输入旅游景点信息，并点击按钮生成旅游照片。

<div class="input-area">
    <textarea id="chatInput" placeholder="请输入旅游景点信息..."></textarea>
    <button id="sendButton">生成旅游照片</button>
</div>

7. 图片展示区域

生成的旅游照片将在这个区域展示。

<div class="image-area">
    <img id="generatedImage" alt="生成的图片" style="display: none;">
    <div id="loading-progress" class="progress-bar">加载中...</div>
</div>

8. JavaScript交互

页面底部有一个script标签，其中包含了处理用户输入和发起网络请求以生成图片的JavaScript代码。

<script>
    // JavaScript code here
</script>

9. AJAX请求

JavaScript部分使用fetch函数向服务器发起AJAX请求，将用户输入的文本信息发送到服务器，并接收返回的图片数据。

fetch(`http://localhost:8080/yiyan/travelImage?messages=${encodeURIComponent(message)}`)
    .then(response => ...)
    .catch(error => ...)
    .finally(() => ...);

10. 代码块解析

以下是处理用户点击事件并生成图片的JavaScript代码块示例：

sendButton.addEventListener('click', function () {
    // 获取输入值
    const message = chatInput.value;
    // 验证输入
    if (!message.trim()) {
        alert('请输入文字信息！');
        return;
    }
    // 发起AJAX请求
    fetch(...)
        .then(...)
        .catch(...)
        .finally(...);
});

sahdajs

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
山东大学软件学院项目实训-创新实训-基于大模型的旅游平台（十七）

在本文中，我们将深入分析一段基于大模型的旅游平台的前端HTML页面代码。该平台允许用户输入旅游景点信息，并生成相应的旅游照片。函数向服务器发起AJAX请求，将用户输入的文本信息发送到服务器，并接收返回的图片数据。标签，其中包含了处理用户输入和发起网络请求以生成图片的JavaScript代码。页面定义了一些内联CSS样式，用于设置页面的基本布局和组件样式。用户可以在这个区域输入旅游景点信息，并点击按钮生成旅游照片。页面声明了HTML5文档类型，并且设置了页面语言为英文。生成的旅游照片将在这个区域展示。
复制链接

扫一扫