feat: 智能添加弹框显示解析prompt,支持编辑修改
- 后端新增 /api/parse-prompt API 获取 prompt 模板 - parse_with_llm 函数支持 custom_prompt 参数 - 智能添加弹框添加可折叠的 prompt 编辑区域 - 显示字段配置信息,方便用户理解解析逻辑 - 可重置为默认 prompt 或刷新字段配置 - 所有 smart-add API 支持接收自定义 prompt
This commit is contained in:
@@ -297,7 +297,7 @@
|
||||
<!-- 子类别选择 -->
|
||||
<div class="mb-4" id="smartAddSubcategoryArea">
|
||||
<label class="text-sm text-gray-600 mb-2 block">选择子类别(可选,用于匹配特定参数字段)</label>
|
||||
<select id="smartAddSubcategory" class="w-full px-3 py-2 border rounded-lg">
|
||||
<select id="smartAddSubcategory" class="w-full px-3 py-2 border rounded-lg" onchange="loadSmartAddPrompt()">
|
||||
<option value="">请选择子类别</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -306,6 +306,35 @@
|
||||
<p class="text-sm text-orange-700"><i class="ri-information-line mr-1"></i>上传<strong>产品参数截图</strong>或<strong>参数文本</strong>,AI将根据类别字段配置自动解析参数。支持多次解析,每次来源都会被记录。</p>
|
||||
</div>
|
||||
|
||||
<!-- Prompt 编辑区域(可折叠) -->
|
||||
<div class="mb-4 border rounded-lg">
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 cursor-pointer" onclick="togglePromptEditor()">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="ri-code-line text-gray-500"></i>
|
||||
<span class="text-sm font-medium text-gray-700">查看/编辑解析 Prompt</span>
|
||||
</div>
|
||||
<i class="ri-arrow-down-s-line text-gray-400 transition-transform" id="promptToggleIcon"></i>
|
||||
</div>
|
||||
<div id="promptEditorArea" class="hidden p-3 border-t">
|
||||
<div class="text-xs text-gray-500 mb-2">
|
||||
<i class="ri-information-line mr-1"></i>
|
||||
Prompt 包含字段配置,AI 将根据此指令解析参数。可自定义修改以优化解析效果。
|
||||
</div>
|
||||
<div class="bg-gray-100 rounded p-2 mb-2 text-xs text-gray-600" id="promptFieldsInfo">
|
||||
<!-- 字段信息显示 -->
|
||||
</div>
|
||||
<textarea id="smartAddPrompt" rows="8" class="w-full p-3 border rounded-lg text-sm text-gray-700 font-mono focus:outline-none focus:border-orange-400" placeholder="加载中..."></textarea>
|
||||
<div class="flex gap-2 mt-2">
|
||||
<button onclick="resetSmartAddPrompt()" class="px-3 py-1 bg-gray-100 text-gray-600 rounded text-xs hover:bg-gray-200">
|
||||
<i class="ri-refresh-line mr-1"></i>重置为默认
|
||||
</button>
|
||||
<button onclick="loadSmartAddPrompt()" class="px-3 py-1 bg-blue-100 text-blue-600 rounded text-xs hover:bg-blue-200">
|
||||
<i class="ri-download-line mr-1"></i>刷新字段配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<p class="text-sm text-gray-500 mb-3">上传参数截图(规格表、参数页面等),AI将识别并解析参数数据</p>
|
||||
<div class="flex flex-wrap gap-3 mb-3" id="smartImagePreviewArea">
|
||||
@@ -2005,6 +2034,7 @@
|
||||
|
||||
let smartAddType = '';
|
||||
let smartAddImages = []; // 智能添加的图片列表
|
||||
let defaultPrompt = ''; // 保存默认 prompt
|
||||
|
||||
function openSmartAddModal(type) {
|
||||
smartAddType = type;
|
||||
@@ -2013,10 +2043,15 @@
|
||||
document.getElementById('smartAddPreview').classList.add('hidden');
|
||||
document.getElementById('smartImagePreviewArea').innerHTML = '';
|
||||
document.getElementById('smartImageCount').textContent = '0';
|
||||
document.getElementById('promptEditorArea').classList.add('hidden');
|
||||
document.getElementById('promptToggleIcon').style.transform = '';
|
||||
|
||||
// 加载子类别选项
|
||||
loadSmartAddSubcategories(type);
|
||||
|
||||
// 加载默认 prompt
|
||||
loadSmartAddPrompt();
|
||||
|
||||
document.getElementById('smartAddModal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
@@ -2044,6 +2079,62 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 加载 prompt 模板
|
||||
async function loadSmartAddPrompt() {
|
||||
const subcategoryId = document.getElementById('smartAddSubcategory').value;
|
||||
let categoryId;
|
||||
|
||||
if (smartAddType === 'model') categoryId = 'ai-models';
|
||||
else if (smartAddType === 'gpu') categoryId = 'gpus';
|
||||
else if (smartAddType === 'cpu') categoryId = 'cpus';
|
||||
else if (smartAddType === 'dynamic') categoryId = dynamicCategoryId;
|
||||
else categoryId = null;
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/parse-prompt', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
category_type: smartAddType,
|
||||
category_id: categoryId,
|
||||
subcategory_id: subcategoryId
|
||||
})
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
defaultPrompt = data.template.image_prompt;
|
||||
document.getElementById('smartAddPrompt').value = defaultPrompt;
|
||||
|
||||
// 显示字段信息
|
||||
const fieldsInfo = Object.entries(data.template.fields)
|
||||
.map(([k, v]) => `<span class="inline-block bg-gray-200 px-2 py-1 rounded mr-1 mb-1">${k}: ${v}</span>`)
|
||||
.join('');
|
||||
document.getElementById('promptFieldsInfo').innerHTML = `<strong>字段配置:</strong>${fieldsInfo}`;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载 prompt 失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 重置为默认 prompt
|
||||
function resetSmartAddPrompt() {
|
||||
document.getElementById('smartAddPrompt').value = defaultPrompt;
|
||||
}
|
||||
|
||||
// 切换 prompt 编辑器显示
|
||||
function togglePromptEditor() {
|
||||
const area = document.getElementById('promptEditorArea');
|
||||
const icon = document.getElementById('promptToggleIcon');
|
||||
if (area.classList.contains('hidden')) {
|
||||
area.classList.remove('hidden');
|
||||
icon.style.transform = 'rotate(180deg)';
|
||||
} else {
|
||||
area.classList.add('hidden');
|
||||
icon.style.transform = '';
|
||||
}
|
||||
}
|
||||
|
||||
function closeSmartAddModal() {
|
||||
document.getElementById('smartAddModal').classList.add('hidden');
|
||||
}
|
||||
@@ -2155,6 +2246,7 @@
|
||||
async function previewSmartParse() {
|
||||
const text = document.getElementById('smartAddText').value.trim();
|
||||
const subcategoryId = document.getElementById('smartAddSubcategory').value;
|
||||
const customPrompt = document.getElementById('smartAddPrompt').value.trim();
|
||||
|
||||
if (!text && smartAddImages.length === 0) {
|
||||
alert('请上传图片或输入文本');
|
||||
@@ -2173,7 +2265,8 @@
|
||||
text: text,
|
||||
images: smartAddImages,
|
||||
category_type: smartAddType,
|
||||
subcategory_id: subcategoryId
|
||||
subcategory_id: subcategoryId,
|
||||
custom_prompt: customPrompt
|
||||
})
|
||||
});
|
||||
|
||||
@@ -2213,6 +2306,7 @@
|
||||
async function smartAddSubmit() {
|
||||
const text = document.getElementById('smartAddText').value.trim();
|
||||
const subcategoryId = document.getElementById('smartAddSubcategory').value;
|
||||
const customPrompt = document.getElementById('smartAddPrompt').value.trim();
|
||||
|
||||
if (!text && smartAddImages.length === 0) {
|
||||
alert('请上传图片或输入文本');
|
||||
@@ -2236,7 +2330,8 @@
|
||||
body: JSON.stringify({
|
||||
text: text,
|
||||
images: smartAddImages,
|
||||
subcategory_id: subcategoryId
|
||||
subcategory_id: subcategoryId,
|
||||
custom_prompt: customPrompt
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user