本文介绍我们项目中图像内容理解的前端实现:
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" href="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/css/layui.css"> <div th:include="common :: headcommon"></div> </head>
这部分HTML代码构建了一个用于图像内容理解的交互式网页，结合了Thymeleaf模板引擎和Layui CSS框架：
<!DOCTYPE html>: 声明了文档类型为HTML5。
<html lang="en" xmlns:th="http://www.thymeleaf.org">: 设置页面的语言为英语，并引入Thymeleaf的命名空间，Thymeleaf是一个用于Web开发的Java模板引擎，允许服务器端的HTML生成。
<head>区域:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>: 指定字符集为UTF-8，适用于国际化内容。
<title>: 页面标题设置为“图片内容理解”。
<link rel="stylesheet">: 引入Layui框架的CSS样式表，Layui是一个前端UI框架，用于快速开发美观的响应式界面。
样式定义
<style>
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
background-color: #f2f2f2;
border-radius: 4px;
margin-top: 10px;
}
#result {
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f8f8f8;
margin-top: 20px;
}
</style>
在<style>标签中定义了页面的内联CSS：
.custom-file-upload`: 定义了一个自定义的文件上传按钮样式，包括边框、填充、背景颜色等。
#result: 定义了结果显示区域的样式，包括填充、边框、背景色和外边距。
主体内容和表单设计
<h1 style="font-weight: bold;font-size: 40px;margin-left: 400px">图像内容理解</h1> <div class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">选择图片</label> <div class="layui-input-block"> <label class="custom-file-upload"> <input type="file" id="uploadBtn" name="imageFile" accept="image/*" style="display: none;"> 请上传图片 </label> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <img id="previewImage" src="#" alt="Image Preview" style="max-width: 100%; max-height: 400px; display: none;"/> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">问题</label> <div class="layui-input-block"> <input type="text" name="question" placeholder="请输入问题" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" id="submitRequest">提交请求</button> </div> </div> </div>
这段核心的HTML代码包含图片上传、问题输入和结果展示功能的表单界面。如下：
-
标题:
<h1 style="font-weight: bold;font-size: 40px;margin-left: 400px">图像内容理解</h1>定义了页面的主标题，采用了粗体风格，字体大小为40px，并通过左边距400px进行居中对齐，这样可以使标题在页面中显得更为突出。 -
表单结构 (layui-form):
使用Layui的
layui-form类来定义一个表单，这有助于快速实现一个美观且功能性强的表单布局。 -
图片上传:
第一个 layui-form-item包含一个图片上传的功能
layui-form-label用于显示标签“选择图片”。layui-input-block用于包裹输入元素，确保布局的一致性。input[type="file"]是一个文件选择输入，用于接收用户上传的图片。它被设置为不可见 (display: none;)，通常这样设置是为了可以使用更美观的标签来触发文件选择。这里使用了label元素作为触发器，文本是“请上传图片”，点击这个标签就会触发文件选择。 -
图片预览:
第二个 layui-form-item 设计用于显示图片预览。
包含一个
img元素，其ID为previewImage，初始时不显示 (display: none;)。当用户上传图片后，可以通过JavaScript动态显示图片。 -
问题输入:
第三个 layui-form-item包含一个用于输入问题的文本框。
layui-form-label显示标签“问题”，指引用户输入与上传图片相关的问题。input[type="text"]是用户输入问题的地方，带有占位符“请输入问题”，提示用户输入。 -
提交按钮:
第四个 layui-form-item包含提交按钮。
按钮文本为“提交请求”，点击后可以通过绑定的JavaScript功能提交表单内容。
-
结果展示区:
div#result用于显示处理后的结果，如图像分析的输出或问题的答案。初始为空，待提交并处理后通过JavaScript动态填充。
结果显示区
<div id="result" style="font-size: 18px;font-weight: bold"> <!-- 显示结果 --> </div>
<div id="result">: 用于动态显示处理结果的区域，初始化为空，并通过后续的JavaScript操作进行填充。
脚本引用
<script th:src="@{/js/index/img_classification.js}" type="text/javascript"></script>
<script th:src="@{/js/index/img_classification.js}">: 引入处理图片分类与问题解答功能的JavaScript文件，实际路径由Thymeleaf渲染。
202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
