117 lines
5.7 KiB
HTML
117 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>LLM 合规性标准配置</title>
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='history_style.css') }}">
|
||
<style>
|
||
.editor-section { margin-bottom: 20px; }
|
||
.info-box { background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 15px; border-radius: 5px; margin-top: 10px; }
|
||
.info-box h3 { margin-top: 0; }
|
||
.criteria-list-container { margin-bottom: 15px; }
|
||
.criteria-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
||
.criteria-item input[type="text"] { flex-grow: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
|
||
.delete-btn { background-color: #dc3545; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; }
|
||
.delete-btn:hover { background-color: #c82333; }
|
||
.add-btn { background-color: #28a745; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>LLM 合规性标准配置</h1>
|
||
<div class="user-info">
|
||
<a href="{{ url_for('list_history') }}">返回列表</a> |
|
||
<span>欢迎, {{ g.user['username'] }}</span> |
|
||
<a href="{{ url_for('logout') }}">登出</a>
|
||
</div>
|
||
</div>
|
||
|
||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||
{% if messages %}
|
||
{% for category, message in messages %}
|
||
<div class="flash-{{ category }}">{{ message }}</div>
|
||
{% endfor %}
|
||
{% endif %}
|
||
{% endwith %}
|
||
|
||
<div class="config-container">
|
||
<div class="editor-section">
|
||
<h2>编辑合规性标准</h2>
|
||
<p>在这里，您可以直接增删改用于 <code>TC-LLM-COMPLIANCE-001</code> 测试用例的合规性标准规则。</p>
|
||
|
||
{% if file_exists %}
|
||
<form method="post">
|
||
<div id="criteria-list-container">
|
||
{% for rule in criteria %}
|
||
<div class="criteria-item">
|
||
<input type="text" name="criteria" value="{{ rule }}" class="form-control">
|
||
<button type="button" class="delete-btn">删除</button>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
<button type="button" id="add-rule-btn" class="button add-btn">添加规则</button>
|
||
<hr style="margin: 20px 0;">
|
||
<input type="submit" value="保存所有标准" class="button">
|
||
</form>
|
||
{% else %}
|
||
<div class="flash-error">
|
||
错误：无法找到配置文件 <code>custom_testcases/llm/compliance_criteria.json</code>。请确保该文件存在于正确的位置。
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="info-section">
|
||
<div class="info-box">
|
||
<h3>工作原理说明</h3>
|
||
<p>
|
||
此测试用例 (<code>TC-LLM-COMPLIANCE-001</code>) 利用大语言模型（LLM）自动评估API是否符合您在左侧定义的合规标准。
|
||
</p>
|
||
<p>
|
||
在测试运行时，系统会收集API的**所有可用信息**（包括URL、请求方法、描述、参数定义、请求体Schema、示例请求和实际响应等），连同您定义的合规标准列表，一同发送给大模型。
|
||
</p>
|
||
<p>
|
||
<strong>重要提示：</strong>大模型仅能基于其接收到的信息进行判断。因此，它非常适合检查命名规范、结构约定、数据格式等问题，但无法验证需要外部知识或业务上下文的规则（例如"此接口必须与XX系统同步"）。
|
||
</p>
|
||
</div>
|
||
<div class="info-box">
|
||
<h3>发送给LLM的API信息示例</h3>
|
||
<p>为了做出判断，系统会向LLM提供类似如下结构的API信息：</p>
|
||
<pre class="json-output">{{ example_api_info }}</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<template id="criteria-item-template">
|
||
<div class="criteria-item">
|
||
<input type="text" name="criteria" value="" class="form-control" placeholder="输入新的合规标准...">
|
||
<button type="button" class="delete-btn">删除</button>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
const listContainer = document.getElementById('criteria-list-container');
|
||
const addBtn = document.getElementById('add-rule-btn');
|
||
const template = document.getElementById('criteria-item-template');
|
||
|
||
if (addBtn) {
|
||
addBtn.addEventListener('click', function () {
|
||
const clone = template.content.cloneNode(true);
|
||
listContainer.appendChild(clone);
|
||
});
|
||
}
|
||
|
||
if (listContainer) {
|
||
listContainer.addEventListener('click', function (e) {
|
||
if (e.target && e.target.classList.contains('delete-btn')) {
|
||
e.target.closest('.criteria-item').remove();
|
||
}
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |