|
|
@@ -0,0 +1,214 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>图片搜索测试界面</title>
|
|
|
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
+ <style>
|
|
|
+ .preview-image {
|
|
|
+ max-width: 200px;
|
|
|
+ max-height: 200px;
|
|
|
+ margin: 10px;
|
|
|
+ }
|
|
|
+ .result-image {
|
|
|
+ max-width: 150px;
|
|
|
+ max-height: 150px;
|
|
|
+ margin: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .results-container {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="container mt-5">
|
|
|
+ <h2 class="mb-4">图片搜索测试界面</h2>
|
|
|
+
|
|
|
+ <!-- Token Input -->
|
|
|
+ <div class="mb-4">
|
|
|
+ <label for="token" class="form-label">Authorization Token:</label>
|
|
|
+ <input type="text" class="form-control" id="token" placeholder="输入token">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Upload Section -->
|
|
|
+ <div class="card mb-4">
|
|
|
+ <div class="card-header">
|
|
|
+ 上传图片
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="mb-3">
|
|
|
+ <label for="imageUpload" class="form-label">选择图片</label>
|
|
|
+ <input type="file" class="form-control" id="imageUpload" accept="image/*">
|
|
|
+ </div>
|
|
|
+ <div class="mb-3">
|
|
|
+ <label for="nameCn" class="form-label">中文名称</label>
|
|
|
+ <input type="text" class="form-control" id="nameCn">
|
|
|
+ </div>
|
|
|
+ <div id="uploadPreview"></div>
|
|
|
+ <button class="btn btn-primary" onclick="uploadImage()">上传</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Search Section -->
|
|
|
+ <div class="card mb-4">
|
|
|
+ <div class="card-header">
|
|
|
+ 搜索图片
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="mb-3">
|
|
|
+ <label for="searchImageUpload" class="form-label">选择搜索图片</label>
|
|
|
+ <input type="file" class="form-control" id="searchImageUpload" accept="image/*">
|
|
|
+ </div>
|
|
|
+ <div id="searchPreview"></div>
|
|
|
+ <button class="btn btn-primary" onclick="searchImage()">搜索</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Results Section -->
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-header">
|
|
|
+ 搜索结果
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div id="searchResults" class="results-container"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ const baseUrl = 'http://47.96.90.34:18081/website';
|
|
|
+
|
|
|
+ // 预览上传图片
|
|
|
+ document.getElementById('imageUpload').addEventListener('change', function(e) {
|
|
|
+ previewImage(e.target.files[0], 'uploadPreview');
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('searchImageUpload').addEventListener('change', function(e) {
|
|
|
+ previewImage(e.target.files[0], 'searchPreview');
|
|
|
+ });
|
|
|
+
|
|
|
+ function previewImage(file, previewId) {
|
|
|
+ if (!file) return;
|
|
|
+
|
|
|
+ const reader = new FileReader();
|
|
|
+ reader.onload = function(e) {
|
|
|
+ const previewDiv = document.getElementById(previewId);
|
|
|
+ previewDiv.innerHTML = `<img src="${e.target.result}" class="preview-image">`;
|
|
|
+ }
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ }
|
|
|
+
|
|
|
+ async function uploadToServer(file) {
|
|
|
+ // 这里应该是上传到您的服务器或者华为云OBS的逻辑
|
|
|
+ // 为了演示，这里假设直接返回一个测试URL
|
|
|
+ return "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/tmp/a3.png";
|
|
|
+ }
|
|
|
+
|
|
|
+ async function uploadImage() {
|
|
|
+ const file = document.getElementById('imageUpload').files[0];
|
|
|
+ if (!file) {
|
|
|
+ alert('请选择图片');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const token = document.getElementById('token').value;
|
|
|
+ if (!token) {
|
|
|
+ alert('请输入token');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 先上传图片到服务器获取URL
|
|
|
+ const imageUrl = await uploadToServer(file);
|
|
|
+
|
|
|
+ // 创建图片记录
|
|
|
+ const response = await fetch(`${baseUrl}/image/create`, {
|
|
|
+ method: 'POST',
|
|
|
+ headers: {
|
|
|
+ 'Authorization': token,
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
+ },
|
|
|
+ body: JSON.stringify({
|
|
|
+ rawImage: { url: imageUrl },
|
|
|
+ nameCn: document.getElementById('nameCn').value || 'test'
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+ const data = await response.json();
|
|
|
+ if (response.ok) {
|
|
|
+ alert('上传成功');
|
|
|
+ } else {
|
|
|
+ alert('上传失败: ' + JSON.stringify(data));
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ alert('上传出错: ' + error.message);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ async function searchImage() {
|
|
|
+ const file = document.getElementById('searchImageUpload').files[0];
|
|
|
+ if (!file) {
|
|
|
+ alert('请选择搜索图片');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const token = document.getElementById('token').value;
|
|
|
+ if (!token) {
|
|
|
+ alert('请输入token');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 先上传搜索图片获取URL
|
|
|
+ const imageUrl = await uploadToServer(file);
|
|
|
+
|
|
|
+ const response = await fetch(`${baseUrl}/image/fassi/list`, {
|
|
|
+ method: 'GET',
|
|
|
+ headers: {
|
|
|
+ 'Authorization': token,
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
+ },
|
|
|
+ body: JSON.stringify({
|
|
|
+ url: imageUrl
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+ const data = await response.json();
|
|
|
+ if (response.ok) {
|
|
|
+ displayResults(data);
|
|
|
+ } else {
|
|
|
+ alert('搜索失败: ' + JSON.stringify(data));
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ alert('搜索出错: ' + error.message);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function displayResults(results) {
|
|
|
+ const resultsDiv = document.getElementById('searchResults');
|
|
|
+ resultsDiv.innerHTML = '';
|
|
|
+
|
|
|
+ if (!results || results.length === 0) {
|
|
|
+ resultsDiv.innerHTML = '<p>没有找到匹配的图片</p>';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ results.forEach(result => {
|
|
|
+ const imgUrl = result.rawImage?.url || result.thumbnail?.url;
|
|
|
+ if (imgUrl) {
|
|
|
+ const img = document.createElement('img');
|
|
|
+ img.src = imgUrl;
|
|
|
+ img.className = 'result-image';
|
|
|
+ img.title = result.nameCn || '未命名';
|
|
|
+ resultsDiv.appendChild(img);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
