coder/param-hub-python
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 图片改为参数截图，支持多次解析并记录解析来源历史

Browse Source
This commit is contained in:
hubian
2026-04-28 22:48:56 +08:00
parent 2ef5d0b3d3
commit 151829296e
5 changed files with 3025 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
templates/admin.html
View File

@@ -273,9 +273,14 @@
<button onclick="closeModal()" class="text-gray-400 hover:text-gray-600"><i class="ri-close-line text-2xl"></i></button>
</div>
<div id="modalContent" class="p-6"></div>
<!-- 解析来源历史 -->
<div id="parseSourcesArea" class="hidden border-t mx-6 pt-4">
<h3 class="text-sm font-semibold text-gray-700 mb-2"><i class="ri-history-line mr-1"></i>解析来源记录</h3>
<div id="parseSourcesList" class="space-y-2 mb-4"></div>
</div>
<div class="p-6 border-t flex justify-end gap-4 sticky bottom-0 bg-white">
<button onclick="closeModal()" class="px-4 py-2 bg-gray-200 text-gray-600 rounded-lg hover:bg-gray-300">取消</button>
<button onclick="openSmartUpdateModal()" id="smartUpdateBtn" class="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 hidden"><i class="ri-magic-line mr-1"></i>智能补充</button>
<button onclick="openSmartUpdateModal()" id="smartUpdateBtn" class="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 hidden"><i class="ri-magic-line mr-1"></i>补充解析</button>
<button onclick="saveItem()" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">保存</button>
</div>
</div>
@@ -285,7 +290,7 @@
<div id="smartAddModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
<div class="bg-white rounded-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-auto">
<div class="p-6 border-b flex justify-between items-center sticky top-0 bg-white z-10">
<h2 class="text-xl font-bold text-gray-800"><i class="ri-magic-line mr-2 text-orange-600"></i>智能添加（根据参数字段解析）</h2>
<h2 class="text-xl font-bold text-gray-800"><i class="ri-magic-line mr-2 text-orange-600"></i>智能添加参数</h2>
<button onclick="closeSmartAddModal()" class="text-gray-400 hover:text-gray-600"><i class="ri-close-line text-2xl"></i></button>
</div>
<div class="p-6">
@@ -297,18 +302,22 @@
</select>
</div>
<div class="bg-orange-50 rounded-lg p-4 mb-4">
<p class="text-sm text-orange-700"><i class="ri-information-line mr-1"></i>上传<strong>产品参数截图</strong>或<strong>参数文本</strong>，AI将根据类别字段配置自动解析参数。支持多次解析，每次来源都会被记录。</p>
</div>
<div class="mb-6">
<p class="text-sm text-gray-500 mb-3">上传产品图片，AI将根据类别参数字段配置自动识别并解析参数。支持一次上传多张图片，可识别多个产品。</p>
<p class="text-sm text-gray-500 mb-3">上传参数截图（规格表、参数页面等），AI将识别并解析参数数据</p>
<div class="flex flex-wrap gap-3 mb-3" id="smartImagePreviewArea">
<!-- 图片预览区 -->
</div>
<div class="flex gap-3">
<input type="file" id="smartImageInput" accept="image/*" multiple class="hidden" onchange="handleSmartImageUpload(event)">
<button onclick="document.getElementById('smartImageInput').click()" class="px-4 py-2 bg-orange-100 text-orange-600 rounded-lg hover:bg-orange-200 text-sm">
<i class="ri-image-add-line mr-1"></i>选择图片（支持多选）
<i class="ri-image-add-line mr-1"></i>上传参数截图（支持多选）
</button>
<button onclick="pasteSmartImageFromClipboard()" class="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 text-sm">
<i class="ri-clipboard-line mr-1"></i>粘贴图片
<i class="ri-clipboard-line mr-1"></i>粘贴截图
</button>
<button onclick="clearSmartImages()" class="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 text-sm">
<i class="ri-delete-bin-line mr-1"></i>清空图片
@@ -316,12 +325,12 @@
</div>
<div class="mt-3 text-xs text-gray-400">
<i class="ri-information-line mr-1"></i>
已选择 <span id="smartImageCount">0</span> 张图片
已选择 <span id="smartImageCount">0</span> 张参数截图
</div>
</div>
<div class="border-t pt-4">
<label class="text-sm text-gray-600 mb-2 block">补充文本（可选）</label>
<textarea id="smartAddText" rows="4" class="w-full p-4 border border-gray-200 rounded-lg focus:outline-none focus:border-orange-400 text-gray-700" placeholder="可粘贴补充信息文本，与图片一起解析..."></textarea>
<label class="text-sm text-gray-600 mb-2 block">参数文本（可选，可粘贴产品规格说明）</label>
<textarea id="smartAddText" rows="4" class="w-full p-4 border border-gray-200 rounded-lg focus:outline-none focus:border-orange-400 text-gray-700" placeholder="可粘贴产品参数文本、规格说明等..."></textarea>
</div>
<div id="smartAddPreview" class="mt-4 hidden">
<h3 class="text-sm font-semibold text-gray-700 mb-2"><i class="ri-checkbox-circle-line text-green-600 mr-1"></i>解析结果预览：</h3>
@@ -408,25 +417,25 @@
<div id="smartUpdateModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
<div class="bg-white rounded-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-auto">
<div class="p-6 border-b flex justify-between items-center sticky top-0 bg-white z-10">
<h2 class="text-xl font-bold text-gray-800"><i class="ri-magic-line mr-2 text-orange-600"></i>智能补充参数</h2>
<h2 class="text-xl font-bold text-gray-800"><i class="ri-magic-line mr-2 text-orange-600"></i>补充解析参数</h2>
<button onclick="closeSmartUpdateModal()" class="text-gray-400 hover:text-gray-600"><i class="ri-close-line text-2xl"></i></button>
</div>
<div class="p-6">
<div class="bg-blue-50 rounded-lg p-4 mb-4">
<p class="text-sm text-blue-700"><i class="ri-information-line mr-1"></i>上传图片或输入文本，AI将识别参数并补充到现有数据中。只会填充缺失的字段，不会覆盖已有值。</p>
<p class="text-sm text-blue-700"><i class="ri-information-line mr-1"></i>上传<strong>参数截图</strong>或<strong>参数文本</strong>，AI将识别并补充缺失的参数字段。只会填充空白字段，不会覆盖已有数据。</p>
</div>
<div class="mb-6">
<p class="text-sm text-gray-500 mb-3">上传产品图片，AI将自动识别并解析参数</p>
<p class="text-sm text-gray-500 mb-3">上传产品参数截图（规格表、参数页面等），AI将识别并解析参数数据</p>
<div class="flex flex-wrap gap-3 mb-3" id="smartUpdateImagePreviewArea">
<!-- 图片预览区 -->
</div>
<div class="flex gap-3">
<input type="file" id="smartUpdateImageInput" accept="image/*" multiple class="hidden" onchange="handleSmartUpdateImageUpload(event)">
<button onclick="document.getElementById('smartUpdateImageInput').click()" class="px-4 py-2 bg-orange-100 text-orange-600 rounded-lg hover:bg-orange-200 text-sm">
<i class="ri-image-add-line mr-1"></i>选择图片（支持多选）
<i class="ri-image-add-line mr-1"></i>上传参数截图
</button>
<button onclick="pasteSmartUpdateImageFromClipboard()" class="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 text-sm">
<i class="ri-clipboard-line mr-1"></i>粘贴图片
<i class="ri-clipboard-line mr-1"></i>粘贴截图
</button>
<button onclick="clearSmartUpdateImages()" class="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 text-sm">
<i class="ri-delete-bin-line mr-1"></i>清空图片
@@ -434,12 +443,12 @@
</div>
<div class="mt-3 text-xs text-gray-400">
<i class="ri-information-line mr-1"></i>
已选择 <span id="smartUpdateImageCount">0</span> 张图片
已选择 <span id="smartUpdateImageCount">0</span> 张参数截图
</div>
</div>
<div class="border-t pt-4">
<label class="text-sm text-gray-600 mb-2 block">补充文本（可选）</label>
<textarea id="smartUpdateText" rows="4" class="w-full p-4 border border-gray-200 rounded-lg focus:outline-none focus:border-orange-400 text-gray-700" placeholder="可粘贴补充信息文本，如产品规格表、参数说明等..."></textarea>
<label class="text-sm text-gray-600 mb-2 block">参数文本（可选）</label>
<textarea id="smartUpdateText" rows="4" class="w-full p-4 border border-gray-200 rounded-lg focus:outline-none focus:border-orange-400 text-gray-700" placeholder="可粘贴产品参数文本、规格说明等..."></textarea>
</div>
<div id="smartUpdatePreview" class="mt-4 hidden">
<h3 class="text-sm font-semibold text-gray-700 mb-2"><i class="ri-checkbox-circle-line text-green-600 mr-1"></i>解析结果：</h3>
@@ -1192,6 +1201,7 @@
const forms = {category: getCategoryForm, model: getModelForm, gpu: getGpuForm, cpu: getCpuForm, knowledge: getKnowledgeForm};
document.getElementById('modalContent').innerHTML = forms[type](currentData);
showSmartUpdateButton(); // 显示智能补充按钮
showParseSources(currentData); // 显示解析来源历史
document.getElementById('editModal').classList.remove('hidden');
}
@@ -1204,8 +1214,51 @@
document.getElementById('modalTitle').textContent = '编辑数据';
document.getElementById('modalContent').innerHTML = getDynamicForm(currentData);
showSmartUpdateButton(); // 显示智能补充按钮
showParseSources(currentData); // 显示解析来源历史
document.getElementById('editModal').classList.remove('hidden');
}
// 显示解析来源历史
function showParseSources(data) {
const sources = data.parse_sources || [];
const area = document.getElementById('parseSourcesArea');
const list = document.getElementById('parseSourcesList');
if (sources.length === 0) {
area.classList.add('hidden');
return;
}
area.classList.remove('hidden');
list.innerHTML = sources.map((source, idx) => {
const typeLabel = source.type === 'smart_add' ? '智能添加' : '补充解析';
const time = source.timestamp || '未知时间';
const updatedFields = source.updated_fields || [];
let contentHtml = '';
if (source.images && source.images.length > 0) {
contentHtml += `<div class="flex gap-2 mb-2">${source.images.map(img =>
`<img src="${img}" class="w-20 h-20 object-cover rounded border cursor-pointer hover:scale-105 transition" onclick="window.open('${img}', '_blank')">`
).join('')}</div>`;
}
if (source.text) {
contentHtml += `<div class="text-xs text-gray-500 bg-gray-50 p-2 rounded max-h-20 overflow-auto">${source.text}</div>`;
}
if (updatedFields.length > 0) {
contentHtml += `<div class="text-xs text-green-600 mt-1">补充字段: ${updatedFields.join(', ')}</div>`;
}
return `
<div class="bg-gray-50 rounded-lg p-3">
<div class="flex justify-between items-center mb-2">
<span class="text-sm font-medium text-gray-700">#${idx + 1} ${typeLabel}</span>
<span class="text-xs text-gray-400">${time}</span>
</div>
${contentHtml}
</div>
`;
}).join('');
}
// 删除项
async function deleteItem(type, id) {