2 Commits

Author SHA1 Message Date
a3448ed5fe fix: 修复表单内按钮点击触发跳转问题
- 所有表单内的按钮添加 type="button" 属性
- 防止点击按钮触发表单提交导致页面跳转
- 修复:添加字段、添加子类别按钮在编辑弹框中的问题
2026-04-29 12:31:31 +08:00
1a65d408f7 feat: 智能添加弹框显示解析prompt,支持编辑修改
- 后端新增 /api/parse-prompt API 获取 prompt 模板
- parse_with_llm 函数支持 custom_prompt 参数
- 智能添加弹框添加可折叠的 prompt 编辑区域
- 显示字段配置信息,方便用户理解解析逻辑
- 可重置为默认 prompt 或刷新字段配置
- 所有 smart-add API 支持接收自定义 prompt
2026-04-29 12:08:57 +08:00
2 changed files with 218 additions and 18 deletions

125
app.py
View File

@@ -101,11 +101,87 @@ def save_data(file_path, data):
# ============ 大模型智能解析 ============
def parse_with_llm(text, category_type, images=None, category_id=None, subcategory_id=None):
def get_parse_prompt_template(category_type, category_id=None, subcategory_id=None):
"""
获取解析 prompt 模板(供前端显示和编辑)
"""
# 从类别配置中获取字段定义
categories = load_data(CATEGORIES_FILE)
# 确定类别ID
if category_id:
cat = next((c for c in categories if c['id'] == category_id), None)
else:
type_to_cat_id = {'model': 'ai-models', 'gpu': 'gpus', 'cpu': 'cpus', 'dynamic': None}
cat_id = type_to_cat_id.get(category_type)
cat = next((c for c in categories if c['id'] == cat_id), None)
# 构建字段模板
fields = {}
if cat and 'fields' in cat:
for field in cat['fields']:
field_desc = field['label']
if field.get('input_style') == 'long':
field_desc += '(长文本)'
else:
field_desc += '(文本)'
if field.get('description'):
field_desc += f" - {field['description']}"
fields[field['key']] = field_desc
if subcategory_id:
subcat = next((s for s in cat.get('subcategories', []) if s['id'] == subcategory_id), None)
if subcat and 'extra_fields' in subcat:
for field in subcat['extra_fields']:
field_desc = field['label']
if field.get('input_style') == 'long':
field_desc += '(长文本)'
else:
field_desc += '(文本)'
if field.get('description'):
field_desc += f" - {field['description']}"
fields[field['key']] = field_desc
else:
fields = {
'name': '名称',
'brand': '品牌',
'price': '价格(数字)',
'year': '年份(数字)',
'specs': '规格参数(JSON对象)',
'description': '简介描述',
}
fields_json = json.dumps(fields, ensure_ascii=False, indent=2)
# 图片解析 prompt
image_prompt = """请分析图片中的产品参数信息,提取结构化数据。
需要提取的字段:
""" + fields_json + """
重要要求:
1. 图片中可能包含1个或多个产品请识别所有产品
2. 如果是多张图片,请综合分析所有图片内容
3. 数字字段只返回数字,不带单位
4. 如果某字段没有提及返回null
5. 返回格式:如果识别到多个产品,返回数组 [对象列表]; 如果只有一个产品,返回单个对象
6. 只返回JSON数据不要其他内容"""
return {
'fields': fields,
'fields_json': fields_json,
'image_prompt': image_prompt,
'category_name': cat.get('name', '') if cat else ''
}
def parse_with_llm(text, category_type, images=None, category_id=None, subcategory_id=None, custom_prompt=None):
"""
使用大模型解析文本/图片,提取结构化数据
支持多张图片输入,可能解析出多个产品
根据类别配置的参数字段进行解析
支持自定义 prompt优先使用自定义
"""
# 从类别配置中获取字段定义
@@ -167,7 +243,11 @@ def parse_with_llm(text, category_type, images=None, category_id=None, subcatego
# 如果有图片,添加图片内容
if images and len(images) > 0:
prompt_text = """请分析图片中的产品参数信息,提取结构化数据。
# 优先使用自定义 prompt否则使用默认
if custom_prompt and custom_prompt.strip():
prompt_text = custom_prompt
else:
prompt_text = """请分析图片中的产品参数信息,提取结构化数据。
需要提取的字段:
""" + fields_json + """
@@ -492,6 +572,25 @@ def api_toggle_model_visible(model_id):
return jsonify({'success': True, 'visible': model['visible']})
# ============ 获取解析Prompt模板API ============
@app.route('/api/parse-prompt', methods=['POST'])
def api_get_parse_prompt():
"""
获取智能解析的 prompt 模板(供前端显示和编辑)
"""
data = request.get_json()
category_type = data.get('category_type', 'dynamic')
category_id = data.get('category_id')
subcategory_id = data.get('subcategory_id')
template = get_parse_prompt_template(category_type, category_id, subcategory_id)
return jsonify({
'success': True,
'template': template
})
# ============ 图片解析API预览 ============
@app.route('/api/parse-images', methods=['POST'])
@@ -500,12 +599,14 @@ def api_parse_images():
解析图片中的产品参数(预览模式,不保存)
支持多张图片,可能返回多个产品
根据类别配置的参数字段进行解析
支持自定义 prompt可选
"""
data = request.get_json()
text = data.get('text', '')
images = data.get('images', [])
category_type = data.get('category_type', 'dynamic')
subcategory_id = data.get('subcategory_id', '')
custom_prompt = data.get('custom_prompt', '') # 自定义 prompt
if not text and not images:
return jsonify({'error': '文本或图片不能都为空'}), 400
@@ -517,8 +618,8 @@ def api_parse_images():
type_to_cat_id = {'model': 'ai-models', 'gpu': 'gpus', 'cpu': 'cpus', 'dynamic': None}
category_id = type_to_cat_id.get(category_type)
# 调用大模型解析(根据类别字段配置)
parsed_list = parse_with_llm(text, category_type, images, category_id=category_id, subcategory_id=subcategory_id)
# 调用大模型解析(根据类别字段配置,支持自定义 prompt
parsed_list = parse_with_llm(text, category_type, images, category_id=category_id, subcategory_id=subcategory_id, custom_prompt=custom_prompt)
return jsonify({
'success': True,
@@ -728,12 +829,13 @@ def api_smart_add_model():
text = data.get('text', '')
images = data.get('images', [])
subcategory_id = data.get('subcategory_id', '') # 子类别ID
custom_prompt = data.get('custom_prompt', '') # 自定义 prompt
if not text and not images:
return jsonify({'error': '文本或图片不能都为空'}), 400
# 大模型解析(根据类别字段配置)
parsed_list = parse_with_llm(text, 'model', images, category_id='ai-models', subcategory_id=subcategory_id)
# 大模型解析(根据类别字段配置,支持自定义 prompt
parsed_list = parse_with_llm(text, 'model', images, category_id='ai-models', subcategory_id=subcategory_id, custom_prompt=custom_prompt)
# 处理多个产品
results = []
@@ -773,11 +875,12 @@ def api_smart_add_gpu():
text = data.get('text', '')
images = data.get('images', [])
subcategory_id = data.get('subcategory_id', '')
custom_prompt = data.get('custom_prompt', '') # 自定义 prompt
if not text and not images:
return jsonify({'error': '文本或图片不能都为空'}), 400
parsed_list = parse_with_llm(text, 'gpu', images, category_id='gpus', subcategory_id=subcategory_id)
parsed_list = parse_with_llm(text, 'gpu', images, category_id='gpus', subcategory_id=subcategory_id, custom_prompt=custom_prompt)
results = []
gpus = load_data(GPUS_FILE)
@@ -814,11 +917,12 @@ def api_smart_add_cpu():
text = data.get('text', '')
images = data.get('images', [])
subcategory_id = data.get('subcategory_id', '')
custom_prompt = data.get('custom_prompt', '') # 自定义 prompt
if not text and not images:
return jsonify({'error': '文本或图片不能都为空'}), 400
parsed_list = parse_with_llm(text, 'cpu', images, category_id='cpus', subcategory_id=subcategory_id)
parsed_list = parse_with_llm(text, 'cpu', images, category_id='cpus', subcategory_id=subcategory_id, custom_prompt=custom_prompt)
results = []
cpus = load_data(CPUS_FILE)
@@ -855,12 +959,13 @@ def api_smart_add_item(category_id):
text = data.get('text', '')
images = data.get('images', [])
subcategory_id = data.get('subcategory_id', '')
custom_prompt = data.get('custom_prompt', '') # 自定义 prompt
if not text and not images:
return jsonify({'error': '文本或图片不能都为空'}), 400
# 使用类别配置的字段解析
parsed_list = parse_with_llm(text, 'dynamic', images, category_id=category_id, subcategory_id=subcategory_id)
# 使用类别配置的字段解析,支持自定义 prompt
parsed_list = parse_with_llm(text, 'dynamic', images, category_id=category_id, subcategory_id=subcategory_id, custom_prompt=custom_prompt)
results = []
items_file = DATA_DIR / f'items_{category_id}.json'

View File

@@ -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">
@@ -1510,7 +1539,7 @@
<div class="border-t pt-4">
<div class="flex justify-between items-center mb-3">
<label class="text-sm font-medium text-gray-700"><i class="ri-list-settings-line mr-1"></i>参数字段管理</label>
<button onclick="openFieldAddModal('category')" class="px-3 py-1.5 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-700">
<button type="button" onclick="openFieldAddModal('category')" class="px-3 py-1.5 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-700">
<i class="ri-add-line mr-1"></i>添加字段
</button>
</div>
@@ -1524,7 +1553,7 @@
<div class="border-t pt-4">
<div class="flex justify-between items-center mb-3">
<label class="text-sm font-medium text-gray-700"><i class="ri-folder-line mr-1"></i>子类别管理</label>
<button onclick="openSubcategoryAddModal()" class="px-3 py-1.5 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700">
<button type="button" onclick="openSubcategoryAddModal()" class="px-3 py-1.5 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700">
<i class="ri-add-line mr-1"></i>添加子类别
</button>
</div>
@@ -1566,7 +1595,7 @@
<div class="border-t pt-4">
<div class="flex justify-between items-center mb-3">
<label class="text-sm font-medium text-gray-700"><i class="ri-list-settings-line mr-1"></i>参数字段管理(基础字段,所有子类别共享)</label>
<button onclick="openFieldAddModal('category')" class="px-3 py-1.5 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-700">
<button type="button" onclick="openFieldAddModal('category')" class="px-3 py-1.5 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-700">
<i class="ri-add-line mr-1"></i>添加字段
</button>
</div>
@@ -1580,7 +1609,7 @@
<div class="border-t pt-4">
<div class="flex justify-between items-center mb-3">
<label class="text-sm font-medium text-gray-700"><i class="ri-folder-line mr-1"></i>子类别管理</label>
<button onclick="openSubcategoryAddModal()" class="px-3 py-1.5 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700">
<button type="button" onclick="openSubcategoryAddModal()" class="px-3 py-1.5 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700">
<i class="ri-add-line mr-1"></i>添加子类别
</button>
</div>
@@ -1794,7 +1823,7 @@
<div class="border-t pt-4">
<div class="flex justify-between items-center mb-3">
<label class="text-sm font-medium text-gray-700"><i class="ri-list-settings-line mr-1"></i>额外参数字段(子类别特有,继承父类别字段)</label>
<button onclick="openSubcategoryFieldAddModal()" class="px-3 py-1.5 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-700">
<button type="button" onclick="openSubcategoryFieldAddModal()" class="px-3 py-1.5 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-700">
<i class="ri-add-line mr-1"></i>添加字段
</button>
</div>
@@ -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
})
});