465 lines
23 KiB
HTML
465 lines
23 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>中国烟草AI合同及卷宗审核系统 - 评查基本设置</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<!-- 引入外部CSS文件 -->
|
|
<link href="../css/main.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="layout-container">
|
|
<!-- 侧边栏 -->
|
|
<div class="sidebar">
|
|
<div class="py-6 px-4 border-b border-gray-100">
|
|
<div class="flex items-center">
|
|
<i class="ri-file-search-line text-primary text-xl mr-2"></i>
|
|
<h2 class="text-lg font-medium">AI审核系统</h2>
|
|
</div>
|
|
</div>
|
|
<div class="py-4">
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-dashboard-line mr-3"></i>
|
|
<span>首页</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-file-upload-line mr-3"></i>
|
|
<span>文件上传</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-list-check-2 mr-3"></i>
|
|
<span>评查规则库</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item active">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-settings-3-line mr-3"></i>
|
|
<span>系统设置</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-history-line mr-3"></i>
|
|
<span>审核历史</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主内容区 -->
|
|
<div class="main-content">
|
|
<!-- 面包屑导航 -->
|
|
<div class="breadcrumb">
|
|
<span class="breadcrumb-item">首页</span>
|
|
<span class="breadcrumb-item">系统设置</span>
|
|
<span class="breadcrumb-item">评查基本设置</span>
|
|
</div>
|
|
|
|
<!-- 页面头部 -->
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-medium">评查基本设置</h2>
|
|
<div class="flex">
|
|
<button class="ant-btn ant-btn-primary">
|
|
<i class="ri-save-line"></i> 保存设置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 抽取设置卡片 -->
|
|
<div class="ant-card">
|
|
<div class="ant-card-header">
|
|
<h3>抽取引擎设置</h3>
|
|
</div>
|
|
<div class="ant-card-body">
|
|
<!-- 抽取引擎设置内容 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="form-label">
|
|
OCR引擎 <span class="required-mark">*</span>
|
|
</label>
|
|
<select class="form-select">
|
|
<option value="rapidocr">RapidOCR</option>
|
|
<option value="paddle">PaddleOCR</option>
|
|
<option value="tesseract">Tesseract</option>
|
|
<option value="baidu">百度OCR</option>
|
|
</select>
|
|
<div class="form-tip">选择用于识别文档内容的OCR引擎</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">
|
|
语言 <span class="required-mark">*</span>
|
|
</label>
|
|
<select class="form-select">
|
|
<option value="ch">中文</option>
|
|
<option value="en">英文</option>
|
|
<option value="ch+en">中英混合</option>
|
|
</select>
|
|
<div class="form-tip">选择需要识别的文档语言</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">
|
|
模型选择 <span class="required-mark">*</span>
|
|
</label>
|
|
<select class="form-select">
|
|
<option value="deepseek">DeepSeek</option>
|
|
<option value="qwen72b">Qwen72B-VL</option>
|
|
<option value="qwen14b">Qwen14B</option>
|
|
</select>
|
|
<div class="form-tip">选择用于信息抽取的大模型</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">温度参数</label>
|
|
<input type="number" class="form-input" placeholder="0.7" value="0.7" min="0" max="1" step="0.1">
|
|
<div class="form-tip">值越低结果越确定，值越高结果越多样化</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 提示词设置卡片 -->
|
|
<div class="ant-card">
|
|
<div class="ant-card-header">
|
|
<h3>提示词设置</h3>
|
|
</div>
|
|
<div class="ant-card-body">
|
|
<!-- 切换按钮 -->
|
|
<div class="tab-nav mb-4" id="prompt-config-tabs">
|
|
<div class="tab-nav-item active" data-tab="model-prompt">
|
|
<i class="ri-brain-line mr-1"></i> 大模型提示词
|
|
</div>
|
|
<div class="tab-nav-item" data-tab="multimodal-prompt">
|
|
<i class="ri-scan-line mr-1"></i> 多模态提示词
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 大模型提示词设置 -->
|
|
<div class="extraction-tab" id="model-prompt">
|
|
<div class="mb-4">
|
|
<label class="form-label">默认提示词模板 <span class="required-mark">*</span></label>
|
|
<select class="form-select mb-3" id="model-prompt-template">
|
|
<option value="contract-base">合同基本信息提示词</option>
|
|
<option value="contract-payment">付款条件提示词</option>
|
|
<option value="contract-delivery">交付方式提示词</option>
|
|
<option value="custom">自定义提示词</option>
|
|
</select>
|
|
|
|
<textarea class="form-textarea" id="model-prompt-content" placeholder="请输入大模型提示词模板">基于OCR识别的结果，从文本中抽取以下信息：
|
|
{{fields}}
|
|
|
|
仅返回JSON格式</textarea>
|
|
|
|
<div class="form-tip mt-2">提示词中可使用变量： {{fields}} 将被替换为实际抽取字段</div>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<h4 class="font-medium mb-3">常用提示词模板</h4>
|
|
|
|
<div class="template-card mb-3">
|
|
<div class="template-title">
|
|
<i class="ri-file-text-line"></i> 合同基本信息提示词
|
|
<button class="use-template-btn" data-target="model-prompt-content">使用此模板</button>
|
|
</div>
|
|
<div class="template-content">基于OCR识别的结果，从文本中抽取以下信息：
|
|
{{fields}}
|
|
|
|
仅返回JSON格式</div>
|
|
</div>
|
|
|
|
<div class="template-card mb-3">
|
|
<div class="template-title">
|
|
<i class="ri-money-dollar-circle-line"></i> 付款条件提示词
|
|
<button class="use-template-btn" data-target="model-prompt-content">使用此模板</button>
|
|
</div>
|
|
<div class="template-content">从合同中抽取付款条件相关信息：
|
|
{{fields}}
|
|
|
|
仅返回JSON格式</div>
|
|
</div>
|
|
|
|
<div class="template-card">
|
|
<div class="template-title">
|
|
<i class="ri-truck-line"></i> 交付方式提示词
|
|
<button class="use-template-btn" data-target="model-prompt-content">使用此模板</button>
|
|
</div>
|
|
<div class="template-content">从合同中抽取交付方式相关信息：
|
|
{{fields}}
|
|
|
|
仅返回JSON格式</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 多模态提示词设置 -->
|
|
<div class="extraction-tab hidden" id="multimodal-prompt">
|
|
<div class="mb-4">
|
|
<label class="form-label">默认提示词模板 <span class="required-mark">*</span></label>
|
|
<select class="form-select mb-3" id="multimodal-prompt-template">
|
|
<option value="contract-base">合同基本信息提示词</option>
|
|
<option value="contract-payment">付款条件提示词</option>
|
|
<option value="contract-delivery">交付方式提示词</option>
|
|
<option value="custom">自定义提示词</option>
|
|
</select>
|
|
|
|
<textarea class="form-textarea" id="multimodal-prompt-content" placeholder="请输入多模态提示词模板">从合同文本中抽取以下信息：
|
|
{{fields}}
|
|
|
|
仅返回JSON格式</textarea>
|
|
|
|
<div class="form-tip mt-2">提示词中可使用变量： {{fields}} 将被替换为实际抽取字段</div>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<h4 class="font-medium mb-3">常用提示词模板</h4>
|
|
|
|
<div class="template-card mb-3">
|
|
<div class="template-title">
|
|
<i class="ri-file-text-line"></i> 合同基本信息提示词
|
|
<button class="use-template-btn" data-target="multimodal-prompt-content">使用此模板</button>
|
|
</div>
|
|
<div class="template-content">请分析图片中的合同文件，从中抽取以下信息：
|
|
{{fields}}
|
|
|
|
仅返回JSON格式</div>
|
|
</div>
|
|
|
|
<div class="template-card mb-3">
|
|
<div class="template-title">
|
|
<i class="ri-money-dollar-circle-line"></i> 付款条件提示词
|
|
<button class="use-template-btn" data-target="multimodal-prompt-content">使用此模板</button>
|
|
</div>
|
|
<div class="template-content">请分析图片中的合同文件，提取付款条件相关信息：
|
|
{{fields}}
|
|
|
|
仅返回JSON格式</div>
|
|
</div>
|
|
|
|
<div class="template-card">
|
|
<div class="template-title">
|
|
<i class="ri-truck-line"></i> 交付方式提示词
|
|
<button class="use-template-btn" data-target="multimodal-prompt-content">使用此模板</button>
|
|
</div>
|
|
<div class="template-content">请分析图片中的合同文件，提取交付方式相关信息：
|
|
{{fields}}
|
|
|
|
仅返回JSON格式</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 高级设置卡片 -->
|
|
<div class="ant-card">
|
|
<div class="ant-card-header">
|
|
<h3>高级设置</h3>
|
|
</div>
|
|
<div class="ant-card-body">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="form-label">重试次数</label>
|
|
<input type="number" class="form-input" placeholder="3" value="3" min="0" max="10">
|
|
<div class="form-tip">抽取失败时的自动重试次数</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">超时时间（秒）</label>
|
|
<input type="number" class="form-input" placeholder="30" value="30" min="10" max="300">
|
|
<div class="form-tip">单次抽取操作的最大等待时间</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">结果缓存时间（分钟）</label>
|
|
<input type="number" class="form-input" placeholder="60" value="60" min="0" max="1440">
|
|
<div class="form-tip">抽取结果的缓存保留时间，0表示不缓存</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">文档预处理</label>
|
|
<select class="form-select">
|
|
<option value="auto">自动检测</option>
|
|
<option value="rotation">自动旋转</option>
|
|
<option value="denoising">降噪处理</option>
|
|
<option value="all">全部启用</option>
|
|
<option value="none">不处理</option>
|
|
</select>
|
|
<div class="form-tip">对文档进行预处理以提高OCR识别质量</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label">抽取日志记录级别</label>
|
|
<select class="form-select">
|
|
<option value="error">仅错误</option>
|
|
<option value="warn">警告和错误</option>
|
|
<option value="info" selected>信息、警告和错误</option>
|
|
<option value="debug">详细（包含调试信息）</option>
|
|
</select>
|
|
<div class="form-tip">选择记录到系统日志的详细程度</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label">抽取失败处理策略</label>
|
|
<select class="form-select">
|
|
<option value="skip">跳过（继续后续评查）</option>
|
|
<option value="stop">终止（中断评查流程）</option>
|
|
<option value="manual">人工确认</option>
|
|
</select>
|
|
<div class="form-tip">当字段抽取失败时的处理方式</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作按钮区 -->
|
|
<div class="flex justify-between mt-6 pb-10">
|
|
<button class="ant-btn ant-btn-default">
|
|
<i class="ri-refresh-line"></i> 恢复默认设置
|
|
</button>
|
|
<div>
|
|
<button class="ant-btn ant-btn-default mr-2">
|
|
<i class="ri-close-line"></i> 取消
|
|
</button>
|
|
<button class="ant-btn ant-btn-primary">
|
|
<i class="ri-save-line"></i> 保存设置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 抽取引擎设置选项卡切换
|
|
const extractionTabs = document.querySelectorAll('#extraction-config-tabs .tab-nav-item');
|
|
const extractionContents = {
|
|
'model-config': document.getElementById('model-config'),
|
|
'multimodal-config': document.getElementById('multimodal-config')
|
|
};
|
|
|
|
extractionTabs.forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
// 移除所有tab的活动状态
|
|
extractionTabs.forEach(t => t.classList.remove('active'));
|
|
|
|
// 添加当前tab的活动状态
|
|
this.classList.add('active');
|
|
|
|
// 隐藏所有内容
|
|
Object.values(extractionContents).forEach(content => {
|
|
content.classList.add('hidden');
|
|
});
|
|
|
|
// 显示选中的内容
|
|
const tabId = this.getAttribute('data-tab');
|
|
if (extractionContents[tabId]) {
|
|
extractionContents[tabId].classList.remove('hidden');
|
|
}
|
|
});
|
|
});
|
|
|
|
// 提示词设置选项卡切换
|
|
const promptTabs = document.querySelectorAll('#prompt-config-tabs .tab-nav-item');
|
|
const promptContents = {
|
|
'model-prompt': document.getElementById('model-prompt'),
|
|
'multimodal-prompt': document.getElementById('multimodal-prompt')
|
|
};
|
|
|
|
promptTabs.forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
// 移除所有tab的活动状态
|
|
promptTabs.forEach(t => t.classList.remove('active'));
|
|
|
|
// 添加当前tab的活动状态
|
|
this.classList.add('active');
|
|
|
|
// 隐藏所有内容
|
|
Object.values(promptContents).forEach(content => {
|
|
content.classList.add('hidden');
|
|
});
|
|
|
|
// 显示选中的内容
|
|
const tabId = this.getAttribute('data-tab');
|
|
if (promptContents[tabId]) {
|
|
promptContents[tabId].classList.remove('hidden');
|
|
}
|
|
});
|
|
});
|
|
|
|
// 使用模板按钮
|
|
const templateBtns = document.querySelectorAll('.use-template-btn');
|
|
templateBtns.forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const targetId = this.getAttribute('data-target');
|
|
const target = document.getElementById(targetId);
|
|
if (target) {
|
|
const template = this.closest('.template-card').querySelector('.template-content').textContent;
|
|
target.value = template;
|
|
target.focus();
|
|
}
|
|
});
|
|
});
|
|
|
|
// 提示词模板选择功能
|
|
const modelPromptTemplate = document.getElementById('model-prompt-template');
|
|
const modelPromptContent = document.getElementById('model-prompt-content');
|
|
const multiModalPromptTemplate = document.getElementById('multimodal-prompt-template');
|
|
const multiModalPromptContent = document.getElementById('multimodal-prompt-content');
|
|
|
|
// 大模型提示词模板
|
|
if (modelPromptTemplate && modelPromptContent) {
|
|
modelPromptTemplate.addEventListener('change', function() {
|
|
if (this.value && this.value !== 'custom') {
|
|
// 根据选择的模板设置不同的提示词
|
|
const templates = {
|
|
'contract-base': `基于OCR识别的结果，从文本中抽取以下信息：
|
|
{{fields}}
|
|
|
|
仅返回JSON格式`,
|
|
'contract-payment': `从合同中抽取付款条件相关信息：
|
|
{{fields}}
|
|
|
|
仅返回JSON格式`,
|
|
'contract-delivery': `从合同中抽取交付方式相关信息：
|
|
{{fields}}
|
|
|
|
仅返回JSON格式`
|
|
};
|
|
|
|
modelPromptContent.value = templates[this.value] || '';
|
|
}
|
|
});
|
|
}
|
|
|
|
// 多模态提示词模板
|
|
if (multiModalPromptTemplate && multiModalPromptContent) {
|
|
multiModalPromptTemplate.addEventListener('change', function() {
|
|
if (this.value && this.value !== 'custom') {
|
|
// 根据选择的模板设置不同的提示词
|
|
const templates = {
|
|
'contract-base': `请分析图片中的合同文件，从中抽取以下信息：
|
|
{{fields}}
|
|
|
|
仅返回JSON格式`,
|
|
'contract-payment': `请分析图片中的合同文件，提取付款条件相关信息：
|
|
{{fields}}
|
|
|
|
仅返回JSON格式`,
|
|
'contract-delivery': `请分析图片中的合同文件，提取交付方式相关信息：
|
|
{{fields}}
|
|
|
|
仅返回JSON格式`
|
|
};
|
|
|
|
multiModalPromptContent.value = templates[this.value] || '';
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |