193 lines
12 KiB
HTML
193 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>相似图片搜索系统</title>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header class="text-center my-5">
|
||
<h1>相似图片搜索系统</h1>
|
||
<p class="lead">基于百度AI开放平台的相似图片搜索API</p>
|
||
</header>
|
||
|
||
<div class="row">
|
||
<div class="col-md-12 mb-4">
|
||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link active" id="upload-tab" data-bs-toggle="tab" data-bs-target="#upload" type="button" role="tab" aria-controls="upload" aria-selected="true">图片入库</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link" id="search-tab" data-bs-toggle="tab" data-bs-target="#search" type="button" role="tab" aria-controls="search" aria-selected="false">图片搜索</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link" id="manage-tab" data-bs-toggle="tab" data-bs-target="#manage" type="button" role="tab" aria-controls="manage" aria-selected="false">图库管理</button>
|
||
</li>
|
||
</ul>
|
||
<div class="tab-content" id="myTabContent">
|
||
<!-- 图片入库 -->
|
||
<div class="tab-pane fade show active" id="upload" role="tabpanel" aria-labelledby="upload-tab">
|
||
<div class="card mt-3">
|
||
<div class="card-body">
|
||
<h5 class="card-title">图片入库</h5>
|
||
<form id="uploadForm" enctype="multipart/form-data">
|
||
<div class="mb-3">
|
||
<label for="uploadFile" class="form-label">选择图片</label>
|
||
<input class="form-control" type="file" id="uploadFile" name="file" accept="image/*" required>
|
||
<div class="form-text">支持JPG、PNG、BMP格式，最短边至少50px，最长边最大4096px</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="imageName" class="form-label">图片名称</label>
|
||
<input type="text" class="form-control" id="imageName" name="name" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="imageId" class="form-label">图片ID</label>
|
||
<input type="text" class="form-control" id="imageId" name="id" required>
|
||
<div class="form-text">用于关联至本地图库的标识</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="imageTags" class="form-label">标签</label>
|
||
<input type="text" class="form-control" id="imageTags" name="tags" placeholder="例如：1,2">
|
||
<div class="form-text">最多2个标签，用逗号分隔</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<div class="upload-preview-container">
|
||
<img id="uploadPreview" class="img-preview d-none" src="#" alt="预览图">
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">上传入库</button>
|
||
</form>
|
||
<div id="uploadResult" class="mt-3"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图片搜索 -->
|
||
<div class="tab-pane fade" id="search" role="tabpanel" aria-labelledby="search-tab">
|
||
<div class="card mt-3">
|
||
<div class="card-body">
|
||
<h5 class="card-title">图片搜索</h5>
|
||
<form id="searchForm" enctype="multipart/form-data">
|
||
<div class="mb-3">
|
||
<label for="searchFile" class="form-label">选择图片</label>
|
||
<input class="form-control" type="file" id="searchFile" name="file" accept="image/*" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="searchTags" class="form-label">标签过滤</label>
|
||
<input type="text" class="form-control" id="searchTags" name="tags" placeholder="例如：1,2">
|
||
<div class="form-text">可选，用于按标签筛选结果</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">标签逻辑</label>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="tag_logic" id="tagLogicAnd" value="0" checked>
|
||
<label class="form-check-label" for="tagLogicAnd">
|
||
AND（同时满足所有标签）
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="tag_logic" id="tagLogicOr" value="1">
|
||
<label class="form-check-label" for="tagLogicOr">
|
||
OR（满足任一标签）
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<div class="search-preview-container">
|
||
<img id="searchPreview" class="img-preview d-none" src="#" alt="预览图">
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">搜索</button>
|
||
</form>
|
||
<div id="searchResult" class="mt-3">
|
||
<div id="searchStats" class="mb-3 d-none">
|
||
<h6>搜索结果：<span id="resultCount">0</span> 个匹配项</h6>
|
||
</div>
|
||
<div id="searchResultList" class="row"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图库管理 -->
|
||
<div class="tab-pane fade" id="manage" role="tabpanel" aria-labelledby="manage-tab">
|
||
<div class="card mt-3">
|
||
<div class="card-body">
|
||
<h5 class="card-title">图库管理</h5>
|
||
<p>此功能需要先搜索图片，然后可以对搜索结果进行管理操作。</p>
|
||
<div class="alert alert-info">
|
||
提示：百度相似图片搜索API不提供直接查看所有图库内容的功能，需要通过搜索相似图片来获取图库内容。
|
||
</div>
|
||
<div id="manageInfo" class="mt-3">
|
||
<p>请先在"图片搜索"标签页进行搜索，然后可以对搜索结果进行管理。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 更新图片信息模态框 -->
|
||
<div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="updateModalLabel">更新图片信息</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="updateForm">
|
||
<input type="hidden" id="updateContSign" name="cont_sign">
|
||
<div class="mb-3">
|
||
<label for="updateName" class="form-label">图片名称</label>
|
||
<input type="text" class="form-control" id="updateName" name="name" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="updateId" class="form-label">图片ID</label>
|
||
<input type="text" class="form-control" id="updateId" name="id" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="updateTags" class="form-label">标签</label>
|
||
<input type="text" class="form-control" id="updateTags" name="tags" placeholder="例如：1,2">
|
||
<div class="form-text">最多2个标签，用逗号分隔</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||
<button type="button" class="btn btn-primary" id="updateSubmit">保存更改</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 确认删除模态框 -->
|
||
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>确定要删除这张图片吗？此操作不可撤销。</p>
|
||
<input type="hidden" id="deleteContSign">
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||
<button type="button" class="btn btn-danger" id="deleteSubmit">删除</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
||
</body>
|
||
</html>
|