268 lines
20 KiB
HTML
268 lines
20 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>地瓜&乐森变形金刚demo</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>地瓜&乐森变形金刚demo</h1>
|
||
<p class="lead">基于图片相似度的demo演示</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> -->
|
||
<li class="nav-item" role="presentation">
|
||
<a href="/imgsearcherApi/chat-with-image" class="nav-link" style="color: #0d6efd; font-weight: bold;">图片智能对话</a>
|
||
</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/*" multiple required>
|
||
<div class="form-text">支持JPG、PNG、BMP格式，最短边至少50px，最长边最大4096px</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="imageType" class="form-label">类型（这个实际就是宠物名，类似小狗pet、小猫pussy之类的）</label>
|
||
<input type="text" class="form-control" id="imageType" name="type" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="imageDescription" class="form-label">描述（目前demo只支持250个字符，后面正式版可以扩充，这个实际是角色卡信息，也就是宠物的描述，类似小狗是金毛之类的）</label>
|
||
<textarea class="form-control" id="imageDescription" name="description" rows="2" required></textarea>
|
||
</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="imageTags" class="form-label">标签（后面可以用来区分给哪个机器人用的）</label>
|
||
<input type="text" class="form-control" id="imageTags" name="tags" placeholder="例如：1,2" value="1">
|
||
<div class="form-text">最多2个标签，用逗号分隔</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<div class="upload-preview-container" id="uploadPreviewContainer">
|
||
<!-- 预览图将在这里动态添加 -->
|
||
</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" value="1">
|
||
<div class="form-text">可选，用于按标签筛选结果（默认是1，后面可以用来区分机器人，类似对象存储分桶）</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">
|
||
<label for="searchType" class="form-label">类型过滤（现在不用考虑，后面可以用来做验证之类的用）</label>
|
||
<input type="text" class="form-control" id="searchType" name="type" placeholder="可选的类型过滤">
|
||
<div class="form-text">可选，用于按类型筛选结果</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">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div>
|
||
<h6>搜索结果：<span id="resultCount">0</span> 个匹配项</h6>
|
||
<div class="form-check mt-1">
|
||
<input class="form-check-input" type="checkbox" id="selectAllCheckbox">
|
||
<label class="form-check-label" for="selectAllCheckbox">全选</label>
|
||
</div>
|
||
</div>
|
||
<div class="batch-actions d-none">
|
||
<button type="button" class="btn btn-sm btn-danger" id="batchDeleteBtn">批量删除</button>
|
||
<button type="button" class="btn btn-sm btn-secondary ms-2" id="cancelSelectionBtn">取消选择</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 最可信类型分析区域 -->
|
||
<div id="reliableTypesInfo" class="mb-4 d-none">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h6 class="mb-0">最可信类型分析（这些方法我写的都比较简单，后面可以再优化）</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-sm">
|
||
<thead>
|
||
<tr>
|
||
<th>分析方法</th>
|
||
<th>结果类型</th>
|
||
<th>说明</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td title="该方法直接选择相似度最高的图片的类型作为结果。这是最直接的方法，适用于高质量图片库。">方法一</td>
|
||
<td id="method1Type">-</td>
|
||
<td title="该方法假设相似度最高的图片最可能提供正确的类型信息。然而，如果最高分数的图片是异常值，这种方法可能会导致错误。">基于最高相似度分数选择类型</td>
|
||
</tr>
|
||
<tr>
|
||
<td title="该方法考虑所有结果的类型，但根据其相似度分数进行加权。相似度越高，权重越大。">方法二</td>
|
||
<td id="method2Type">-</td>
|
||
<td title="该方法将每个类型的所有分数相加，选择总分最高的类型。这种方法在有多个相似度高的结果时比方法一更可靠。">基于加权投票选择类型</td>
|
||
</tr>
|
||
<tr>
|
||
<td title="该方法首先过滤掉相似度低于阈值的结果，然后对剩下的结果使用加权投票。">方法三</td>
|
||
<td id="method3Type">-</td>
|
||
<td title="该方法只考虑相似度大于0.6的结果，对这些结果进行加权投票。这种方法可以有效过滤掉低质量的匹配，提高准确性。">基于阈值过滤和加权投票选择类型</td>
|
||
</tr>
|
||
<tr>
|
||
<td title="该方法统计每种类型出现的次数，选择出现次数最多的类型。">方法四</td>
|
||
<td id="method4Type">-</td>
|
||
<td title="该方法仅考虑类型出现的频率，不考虑相似度分数。这种方法在所有结果的相似度相近时效果最好。">基于多数投票选择类型</td>
|
||
</tr>
|
||
<tr>
|
||
<td title="该方法结合了多数投票和加权投票的优点，同时考虑类型出现的频率和其平均相似度。">方法五</td>
|
||
<td id="method5Type">-</td>
|
||
<td title="该方法将每种类型的出现次数与其平均相似度相乘，选择加权后分数最高的类型。这种方法在大多数情况下提供最平衡的结果。">基于加权多数投票选择类型</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>因为我们用的是百度的api做为支撑的，所以先这样，包括搜索界面不展示图片也是</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="updateType" class="form-label">类型</label>
|
||
<input type="text" class="form-control" id="updateType" name="type" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="updateDescription" class="form-label">描述</label>
|
||
<textarea class="form-control" id="updateDescription" name="description" rows="2" required></textarea>
|
||
</div>
|
||
<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="updateTags" class="form-label">标签</label>
|
||
<input type="text" class="form-control" id="updateTags" name="tags" placeholder="例如：1,2" value="1">
|
||
<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>
|