{% extends "base.html" %}

{% block title %}
测评任务 - Kumi
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 二级导航栏 -->
    <div class="row mb-4">
        <div class="col-12">
            <nav class="nav nav-pills justify-content-center">
                <a class="nav-link" href="/web/llm/config" data-page="config">配置被测大模型</a>
                <a class="nav-link" href="/web/llm/upload-dataset" data-page="dataset">上传测评集</a>
                <a class="nav-link" href="/web/llm/upload-rules" data-page="rules">创建测评规则</a>
                <a class="nav-link active" href="/web/llm/evaluation" data-page="evaluation">测评任务</a>
            </nav>
        </div>
    </div>

    <!-- 主体内容 -->
    <div class="row justify-content-center">
        <div class="col-12 col-xl-10">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="card-title mb-0 text-primary">测评结果文件</h5>
                        <button type="button" class="btn btn-gradient-primary" onclick="showCreateTaskModal()">
                            <i class="bi bi-plus-circle"></i> 创建测评任务
                        </button>
                    </div>

                    <!-- 结果表格 -->
                    <div class="table-responsive">
                        <table class="table table-hover" id="resultsTable">
                            <thead class="table-light"> {# 添加 class="table-light" #}
                                <tr>
                                    <th>文件名</th>
                                    <th>生成时间</th>
                                    <th>类型</th>
                                    <th>大小</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 创建任务模态框 -->
<div class="modal fade" id="createTaskModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">创建测评任务</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- 任务类型选择 -->
                <div class="mb-4">
                    <label class="form-label">选择任务类型</label>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="task-type-card" onclick="selectTaskType('test')">
                                <div class="task-type-icon">🧪</div>
                                <h6>测评任务</h6>
                                <p class="text-muted small">使用大模型处理数据集，生成回答结果</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="task-type-card" onclick="selectTaskType('evaluation')">
                                <div class="task-type-icon">📊</div>
                                <h6>评价任务</h6>
                                <p class="text-muted small">使用评价规则对测评结果进行评分</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 通用配置 -->
                <div id="commonConfig" style="display:none;">
                    <div class="mb-3">
                        <label class="form-label">并发数</label>
                        <div class="row">
                            <div class="col-md-8">
                                <input type="range" class="form-range" id="maxWorkersRange"
                                       min="1" max="20" value="5"
                                       oninput="updateWorkersValue(this.value)">
                            </div>
                            <div class="col-md-4">
                                <div class="input-group">
                                    <input type="number" class="form-control" id="maxWorkersInput"
                                           min="1" max="20" value="5"
                                           onchange="updateWorkersRange(this.value)">
                                    <span class="input-group-text">线程</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-text">
                            <i class="bi bi-info-circle"></i>
                            并发数越高处理速度越快，但会增加API服务器压力。测评任务建议5-10，评价任务建议1-5。
                        </div>
                    </div>
                </div>

                <!-- 测评任务配置 -->
                <div id="testTaskConfig" class="task-config" style="display:none;">
                    <div class="mb-3">
                        <label class="form-label">选择被测大模型</label>
                        <select class="form-select" id="modelSelect">
                            <option value="">请选择模型...</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">选择数据集</label>
                        <select class="form-select" id="datasetSelect">
                            <option value="">请选择数据集...</option>
                        </select>
                    </div>
                </div>

                <!-- 评价任务配置 -->
                <div id="evaluationTaskConfig" class="task-config" style="display:none;">
                    <div class="mb-3">
                        <label class="form-label">选择评价规则</label>
                        <select class="form-select" id="ruleSelect">
                            <option value="">请选择评价规则...</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">选择测评结果文件</label>
                        <select class="form-select" id="resultFileSelect">
                            <option value="">请选择测评结果文件...</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-gradient-primary" onclick="startTask()" id="startTaskBtn" disabled> {# 修改按钮类 #}
                    开始执行
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 进度模态框 -->
<div class="modal fade" id="progressModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">任务执行中</h5>
            </div>
            <div class="modal-body text-center">
                <div class="progress mb-3" style="height: 20px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated"
                         id="taskProgress"
                         role="progressbar"
                         style="width: 0%"></div>
                </div>
                <div id="progressMessage">任务准备中...</div>
                <div class="mt-3">
                    <small class="text-muted" id="progressDetails">步骤: 0/0</small>
                </div>
                <!-- 新增预估时间显示 -->
                <div class="mt-2">
                    <small class="text-info" id="estimatedTime" style="display:none;">
                        <i class="bi bi-clock"></i> 预估剩余时间: <span id="estimatedTimeValue">--</span> {# 修改图标类 #}
                    </small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-gradient-primary" onclick="closeProgressModal()" disabled id="closeProgressBtn"> {# 修改按钮类 #}
                    关闭
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* 与上传测评集页面保持一致的二级导航栏样式 */
.nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
    color: white !important;
    border: none;
    box-shadow: 0 4px 12px rgba(102, 102, 255, 0.3); /* 与强调色保持一致的阴影 */
    font-weight: 600; /* 激活状态的字体加粗 */
}

.nav-pills .nav-link {
    color: var(--primary-color); /* 强调色 */
    margin: 0 10px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-pills .nav-link:hover {
    background: linear-gradient(135deg, rgba(170, 169, 255, 0.2) 0%, rgba(181, 213, 255, 0.2) 100%); /* 浅色透明渐变悬停效果 */
    color: var(--primary-dark); /* 悬停时颜色变深 */
}

/* 增加主体内容的边距 */
.container-fluid {
    padding-left: 2rem;
    padding-right: 2rem;
}

@media (max-width: 768px) {
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* 确保卡片标题样式一致 */
.card-title {
    font-size: 1.25rem;
    font-weight: 600;
}


/* 自定义渐变按钮类，与之前页面保持一致 */
.btn-gradient-primary {
    background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 0.625rem 1.5rem !important; /* 统一内边距 */
    border-radius: 0.5rem !important; /* 统一圆角 */
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(102, 102, 255, 0.3) !important; /* 统一阴影 */
}

.btn-gradient-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(102, 102, 255, 0.4) !important;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%) !important; /* 悬停时渐变略微调整以增加深度 */
}

/* 表格样式 */
.table {
    border-collapse: separate; /* 允许表格圆角 */
    border-spacing: 0;
    border-radius: 0.75rem; /* 柔化表格边角 */
    overflow: hidden; /* 确保圆角可见 */
    box-shadow: var(--shadow-sm); /* 表格的微妙阴影 */
}

.table-responsive {
    border-radius: 0.75rem; /* 响应式容器也应用圆角 */
    overflow: hidden; /* 确保内部表格的圆角可见 */
}

.table-light {
    background-color: var(--gray-100) !important; /* 表格头部的浅灰色 */
}

.table thead th {
    color: var(--gray-600); /* 表格头部深色文本 */
    font-weight: 600;
    padding: 0.75rem 1.25rem; /* 调整内边距 */
    border-top: none; /* 移除顶部边框 */
}

.table tbody td {
    color: var(--gray-700); /* 表格单元格主文本颜色 */
    padding: 0.75rem 1.25rem; /* 调整内边距 */
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: rgba(102, 102, 255, 0.05); /* 表格行浅色悬停效果 */
}

/* 描边按钮样式 */
.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    transition: all 0.2s ease;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--white) !important;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.btn-outline-danger {
    color: #FF6B6B; /* 与之前页面删除按钮一致的红色 */
    border-color: #FF6B6B;
    transition: all 0.2s ease;
}

.btn-outline-danger:hover {
    background-color: #FF6B6B;
    color: var(--white) !important;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* 卡片样式 */
.card {
    border-radius: 0.75rem !important; /* 统一卡片圆角 */
    box-shadow: var(--shadow) !important; /* 统一卡片阴影 */
    border: 1px solid var(--gray-200) !important; /* 卡片浅色边框 */
}

/* 任务类型卡片样式 */
.task-type-card {
    border: 2px solid var(--gray-200); /* 使用浅灰色边框 */
    border-radius: 0.75rem; /* 统一圆角 */
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--white); /* 明确设置为白色背景 */
    box-shadow: var(--shadow-sm); /* 微妙的阴影 */
}

.task-type-card:hover {
    border-color: var(--primary-color); /* 悬停时边框变为强调色 */
    background-color: rgba(102, 102, 255, 0.05); /* 透明强调色背景悬停 */
    box-shadow: 0 2px 8px rgba(102, 102, 255, 0.1); /* 悬停时微妙阴影 */
    transform: translateY(-2px);
}

.task-type-card.selected {
    border-color: var(--primary-color); /* 选中时边框变为强调色 */
    background-color: rgba(102, 102, 255, 0.1); /* 选中时更明显的透明强调色背景 */
    box-shadow: 0 4px 16px rgba(102, 102, 255, 0.15); /* 选中时更明显的阴影 */
}

.task-type-icon {
    font-size: 2.5rem; /* 略大的图标 */
    margin-bottom: 10px;
    color: var(--primary-color); /* 图标颜色与强调色一致 */
}

.task-type-card h6 {
    color: var(--gray-700);
    font-weight: 600;
}

.task-config {
    border-top: 1px solid var(--gray-200); /* 配置部分的顶部边框 */
    padding-top: 20px;
}

/* 进度条样式 */
.progress-bar {
    background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
}

/* 任务类型徽章样式 */
.badge {
    padding: 0.4em 0.7em;
    border-radius: 0.375rem;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
}

.badge-test-type {
    background-color: var(--primary-lighter); /* 测任务徽章背景 */
    color: var(--primary-dark); /* 测任务徽章文本 */
}

.badge-evaluation-type {
    background-color: var(--gray-200); /* 评任务徽章背景 */
    color: var(--gray-700); /* 评任务徽章文本 */
}

/* 其他样式调整，确保与全局样式一致 */
.modal-header .modal-title {
    color: var(--gray-700);
    font-weight: 600;
}

.form-label {
    color: var(--gray-700);
    font-weight: 600;
}

.form-text {
    color: var(--gray-500);
}

.input-group-text {
    background-color: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--gray-600);
}

</style>

<script>
let selectedTaskType = null;
let currentTaskId = null;
let progressInterval = null;

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    loadResultsTable();
});

// 加载结果表格
async function loadResultsTable() {
    try {
        const response = await fetch('/web/api/llm/evaluation/results');
        const data = await response.json();

        if (data.status === 'success') {
            renderResultsTable(data.data);
        } else {
            console.error('加载结果失败:', data);
        }
    } catch (error) {
        console.error('加载结果失败:', error);
    }
}

// 渲染结果表格
function renderResultsTable(results) {
    const tbody = document.querySelector('#resultsTable tbody');
    tbody.innerHTML = '';

    if (results.length === 0) {
        tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">暂无结果文件</td></tr>';
        return;
    }

    results.forEach(result => {
        const row = document.createElement('tr');
        const createdTime = new Date(result.created_time).toLocaleString('zh-CN');
        const fileSize = formatFileSize(result.size);
        // 修改任务类型徽章的类名
        const typeClass = result.type === '测' ? 'badge-test-type' : 'badge-evaluation-type';

        row.innerHTML = `
            <td>${result.filename}</td>
            <td>${createdTime}</td>
            <td><span class="badge ${typeClass}">${result.type}</span></td> {# 使用新的徽章类 #}
            <td>${fileSize}</td>
            <td>
                <button class="btn btn-outline-primary btn-sm" onclick="downloadFile('${result.filename}')">
                    <i class="bi bi-download"></i> 下载 {# 修改图标类 #}
                </button>
                <button class="btn btn-outline-danger btn-sm" onclick="deleteFile('${result.filename}')">
                    <i class="bi bi-trash"></i> 删除 {# 修改图标类 #}
                </button>
            </td>
        `;
        tbody.appendChild(row);
    });
}

// 格式化文件大小
function formatFileSize(bytes) {
    if (bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// 显示创建任务模态框
async function showCreateTaskModal() {
    selectedTaskType = null;
    document.querySelectorAll('.task-type-card').forEach(card => {
        card.classList.remove('selected');
    });
    document.querySelectorAll('.task-config').forEach(config => {
        config.style.display = 'none';
    });
    document.getElementById('startTaskBtn').disabled = true;

    // 加载数据
    await Promise.all([
        loadModels(),
        loadDatasets(),
        loadRules(),
        loadTempResults()
    ]);

    new bootstrap.Modal(document.getElementById('createTaskModal')).show();
}

// 选择任务类型
function selectTaskType(type) {
    selectedTaskType = type;

    // 更新UI
    document.querySelectorAll('.task-type-card').forEach(card => {
        card.classList.remove('selected');
    });
    event.target.closest('.task-type-card').classList.add('selected');

    // 显示相应配置
    document.querySelectorAll('.task-config').forEach(config => {
        config.style.display = 'none';
    });

    // 显示通用配置
    document.getElementById('commonConfig').style.display = 'block';

    if (type === 'test') {
        document.getElementById('testTaskConfig').style.display = 'block';
        // 设置推荐并发数
        document.getElementById('maxWorkersRange').value = 8;
        document.getElementById('maxWorkersInput').value = 8;
    } else if (type === 'evaluation') {
        document.getElementById('evaluationTaskConfig').style.display = 'block';
        // 设置推荐并发数
        document.getElementById('maxWorkersRange').value = 3;
        document.getElementById('maxWorkersInput').value = 3;
    }

    validateForm();
}

// 更新并发数值
function updateWorkersValue(value) {
    document.getElementById('maxWorkersInput').value = value;
}

function updateWorkersRange(value) {
    document.getElementById('maxWorkersRange').value = value;
}

// 加载模型列表
async function loadModels() {
    try {
        const response = await fetch('/web/api/llm/models');
        const data = await response.json();

        const select = document.getElementById('modelSelect');
        select.innerHTML = '<option value="">请选择模型...</option>';

        if (data.status === 'success') {
            data.data.forEach(model => {
                const option = document.createElement('option');
                option.value = model.name;
                option.textContent = model.name;
                select.appendChild(option);
            });
        }
    } catch (error) {
        console.error('加载模型列表失败:', error);
    }
}

// 加载数据集列表
async function loadDatasets() {
    try {
        const response = await fetch('/web/api/llm/datasets');
        const data = await response.json();

        const select = document.getElementById('datasetSelect');
        select.innerHTML = '<option value="">请选择数据集...</option>';

        if (data.status === 'success') {
            data.data.forEach(dataset => {
                const option = document.createElement('option');
                option.value = dataset.name;
                option.textContent = dataset.name;
                select.appendChild(option);
            });
        }
    } catch (error) {
        console.error('加载数据集列表失败:', error);
    }
}

// 加载规则列表
async function loadRules() {
    try {
        const response = await fetch('/web/api/llm/rules');
        const data = await response.json();

        const select = document.getElementById('ruleSelect');
        select.innerHTML = '<option value="">请选择评价规则...</option>';

        if (data.status === 'success') {
            data.data.forEach(rule => {
                const option = document.createElement('option');
                option.value = rule.filename;
                option.textContent = rule.name;
                select.appendChild(option);
            });
        }
    } catch (error) {
        console.error('加载规则列表失败:', error);
    }
}

// 加载测评结果文件
async function loadTempResults() {
    try {
        const response = await fetch('/web/api/llm/evaluation/temp-results');
        const data = await response.json();

        const select = document.getElementById('resultFileSelect');
        select.innerHTML = '<option value="">请选择测评结果文件...</option>';

        if (data.status === 'success') {
            data.data.forEach(file => {
                const option = document.createElement('option');
                option.value = file.filename;
                option.textContent = file.filename;
                select.appendChild(option);
            });
        }
    } catch (error) {
        console.error('加载测评结果文件失败:', error);
    }
}

// 表单验证
function validateForm() {
    let isValid = false;

    if (selectedTaskType === 'test') {
        const model = document.getElementById('modelSelect').value;
        const dataset = document.getElementById('datasetSelect').value;
        isValid = model && dataset;
    } else if (selectedTaskType === 'evaluation') {
        const rule = document.getElementById('ruleSelect').value;
        const resultFile = document.getElementById('resultFileSelect').value;
        isValid = rule && resultFile;
    }

    document.getElementById('startTaskBtn').disabled = !isValid;
}

// 监听表单变化
document.addEventListener('change', function(e) {
    if (e.target.matches('select')) {
        validateForm();
    }
});

// 开始任务
async function startTask() {
    if (!selectedTaskType) return;

    const formData = new FormData();
    formData.append('task_type', selectedTaskType);
    formData.append('max_workers', document.getElementById('maxWorkersInput').value);

    if (selectedTaskType === 'test') {
        formData.append('model_name', document.getElementById('modelSelect').value);
        formData.append('dataset_filename', document.getElementById('datasetSelect').value);
    } else if (selectedTaskType === 'evaluation') {
        formData.append('rule_filename', document.getElementById('ruleSelect').value);
        formData.append('result_filename', document.getElementById('resultFileSelect').value);
    }

    try {
        const response = await fetch('/web/api/llm/evaluation/tasks', {
            method: 'POST',
            body: formData
        });
        const data = await response.json();

        if (data.status === 'success') {
            currentTaskId = data.data.task_id;

            // 隐藏创建任务模态框
            bootstrap.Modal.getInstance(document.getElementById('createTaskModal')).hide();

            // 显示进度模态框
            showProgressModal();

            // 开始轮询进度
            startProgressPolling();
        } else {
            alert('创建任务失败: ' + data.message);
        }
    } catch (error) {
        console.error('创建任务失败:', error);
        alert('创建任务失败: ' + error.message);
    }
}

// 格式化时间显示
function formatTime(seconds) {
    if (seconds <= 0) return '--';

    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = Math.floor(seconds % 60);

    if (hours > 0) {
        return `${hours}小时${minutes}分钟`;
    } else if (minutes > 0) {
        return `${minutes}分钟${secs}秒`;
    } else {
        return `${secs}秒`;
    }
}

// 显示进度模态框
function showProgressModal() {
    document.getElementById('taskProgress').style.width = '0%';
    document.getElementById('progressMessage').textContent = '任务准备中...';
    document.getElementById('progressDetails').textContent = '步骤: 0/0';
    document.getElementById('closeProgressBtn').disabled = true;

    new bootstrap.Modal(document.getElementById('progressModal')).show();
}

// 开始轮询进度
function startProgressPolling() {
    if (progressInterval) {
        clearInterval(progressInterval);
    }

    progressInterval = setInterval(async () => {
        try {
            const response = await fetch(`/web/api/llm/evaluation/tasks/${currentTaskId}/progress`);
            const data = await response.json();

            if (data.status === 'success') {
                updateProgress(data.data);

                if (data.data.status === 'completed' || data.data.status === 'failed') {
                    clearInterval(progressInterval);
                    document.getElementById('closeProgressBtn').disabled = false;

                    if (data.data.status === 'completed') {
                        // 任务完成，刷新结果表格
                        setTimeout(() => {
                            loadResultsTable();
                        }, 1000);
                    }
                }
            }
        } catch (error) {
            console.error('获取任务进度失败:', error);
        }
    }, 1000);
}

// 更新进度
function updateProgress(progressData) {
    const progressBar = document.getElementById('taskProgress');
    const messageElement = document.getElementById('progressMessage');
    const detailsElement = document.getElementById('progressDetails');
    const estimatedTimeElement = document.getElementById('estimatedTime');
    const estimatedTimeValueElement = document.getElementById('estimatedTimeValue');

    progressBar.style.width = progressData.progress + '%';
    progressBar.textContent = progressData.progress + '%';

    messageElement.textContent = progressData.message;

    // 显示详细进度信息
    let detailsText = `步骤: ${progressData.current_step}/${progressData.total_steps}`;
    if (progressData.total_records > 0) {
        detailsText += ` | 记录: ${progressData.current_record}/${progressData.total_records}`;
    }
    if (progressData.detailed_message) {
        detailsText += `<br><small class="text-muted">${progressData.detailed_message}</small>`;
    }
    detailsElement.innerHTML = detailsText;

    // 显示预估剩余时间
    if (progressData.estimated_time && progressData.estimated_time > 0 && progressData.status === 'running') {
        estimatedTimeElement.style.display = 'block';
        estimatedTimeValueElement.textContent = formatTime(progressData.estimated_time);
    } else {
        estimatedTimeElement.style.display = 'none';
    }

    if (progressData.status === 'completed') {
        progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
        progressBar.classList.add('bg-success');
        messageElement.innerHTML = `<i class="bi bi-check-circle text-success"></i> ${progressData.message}`; {# 修改图标类 #}
        if (progressData.result_file) {
            messageElement.innerHTML += `<br><small>结果文件: ${progressData.result_file}</small>`;
        }
        estimatedTimeElement.style.display = 'none';
    } else if (progressData.status === 'failed') {
        progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
        progressBar.classList.add('bg-danger');
        messageElement.innerHTML = `<i class="bi bi-x-circle text-danger"></i> ${progressData.message}`; {# 修改图标类 #}
        if (progressData.error_message) {
            messageElement.innerHTML += `<br><small class="text-danger">${progressData.error_message}</small>`;
        }
        estimatedTimeElement.style.display = 'none';
    }
}

// 关闭进度模态框
function closeProgressModal() {
    if (progressInterval) {
        clearInterval(progressInterval);
    }
    bootstrap.Modal.getInstance(document.getElementById('progressModal')).hide();
    currentTaskId = null;
}

// 下载文件
async function downloadFile(filename) {
    try {
        const response = await fetch(`/web/api/llm/evaluation/results/${filename}/download`);
        if (response.ok) {
            const blob = await response.blob();
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            a.click();
            window.URL.revokeObjectURL(url);
        } else {
            alert('下载失败');
        }
    } catch (error) {
        console.error('下载失败:', error);
        alert('下载失败: ' + error.message);
    }
}

// 删除文件
async function deleteFile(filename) {
    if (!confirm(`确定要删除文件 "${filename}" 吗？`)) {
        return;
    }

    try {
        const response = await fetch(`/web/api/llm/evaluation/results/${filename}`, {
            method: 'DELETE'
        });
        const data = await response.json();

        if (data.status === 'success') {
            alert('文件删除成功');
            loadResultsTable();
        } else {
            alert('删除失败: ' + data.message);
        }
    } catch (error) {
        console.error('删除失败:', error);
        alert('删除失败: ' + error.message);
    }
}
</script>
{% endblock %}