新增了数据集上传界面

This commit is contained in:
2026-01-11 13:26:23 +08:00
parent 217f457f5f
commit 6e1b4b58ba
12 changed files with 1253 additions and 56 deletions

View File

@@ -367,64 +367,15 @@
<div class="bg-white rounded-xl p-6 card-shadow">
<div class="flex justify-between items-center mb-6">
<p class="text-lg font-semibold text-dashboard-text">数据集管理</p>
<button class="px-4 py-2 gradient-blue text-white rounded-lg hover:opacity-90 transition-opacity">
<button onclick="document.getElementById('fileInput').click()" class="px-4 py-2 gradient-blue text-white rounded-lg hover:opacity-90 transition-opacity">
上传数据集
</button>
<input type="file" id="fileInput" style="display: none" accept=".json,.jsonl" onchange="handleFileUpload(this)">
</div>
<!-- 数据集列表 -->
<div class="space-y-4">
<div class="border border-dashboard-bg rounded-lg p-4 hover:shadow-md transition-shadow">
<div class="flex justify-between items-center">
<div>
<h3 class="font-medium text-dashboard-text">中文对话数据集</h3>
<p class="text-sm text-dashboard-textLight mt-1">1.2GB • 125,000条对话</p>
</div>
<div class="flex items-center space-x-2">
<span class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded">已处理</span>
<button class="text-dashboard-primary hover:underline text-sm">查看详情</button>
</div>
</div>
</div>
<div class="border border-dashboard-bg rounded-lg p-4 hover:shadow-md transition-shadow">
<div class="flex justify-between items-center">
<div>
<h3 class="font-medium text-dashboard-text">英文文本分类数据集</h3>
<p class="text-sm text-dashboard-textLight mt-1">856MB • 89,000条文本</p>
</div>
<div class="flex items-center space-x-2">
<span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded">处理中</span>
<button class="text-dashboard-primary hover:underline text-sm">查看详情</button>
</div>
</div>
</div>
<div class="border border-dashboard-bg rounded-lg p-4 hover:shadow-md transition-shadow">
<div class="flex justify-between items-center">
<div>
<h3 class="font-medium text-dashboard-text">图像识别数据集</h3>
<p class="text-sm text-dashboard-textLight mt-1">2.5GB • 45,000张图片</p>
</div>
<div class="flex items-center space-x-2">
<span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded">待处理</span>
<button class="text-dashboard-primary hover:underline text-sm">查看详情</button>
</div>
</div>
</div>
<div class="border border-dashboard-bg rounded-lg p-4 hover:shadow-md transition-shadow">
<div class="flex justify-between items-center">
<div>
<h3 class="font-medium text-dashboard-text">代码生成数据集</h3>
<p class="text-sm text-dashboard-textLight mt-1">3.1GB • 234,000个代码片段</p>
</div>
<div class="flex items-center space-x-2">
<span class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded">已处理</span>
<button class="text-dashboard-primary hover:underline text-sm">查看详情</button>
</div>
</div>
</div>
<div id="datasetList" class="space-y-4">
<!-- 数据集列表将通过 JavaScript 动态加载 -->
</div>
</div>
</div>
@@ -793,6 +744,127 @@
});
});
// 修改 switchPage 函数以支持数据集页面加载
const originalSwitchPage = switchPage;
switchPage = function(pageId) {
originalSwitchPage(pageId);
// 如果切换到数据集页面,加载数据集列表
if (pageId === 'dataset') {
loadDatasets();
}
};
// 数据集管理相关功能
const API_BASE = 'http://10.10.10.77:8001/api';
// 加载数据集列表
async function loadDatasets() {
try {
const response = await fetch(`${API_BASE}/datasets`);
const result = await response.json();
if (result.code === 200) {
renderDatasetList(result.data.datasets);
}
} catch (error) {
console.error('加载数据集列表失败:', error);
}
}
// 渲染数据集列表
function renderDatasetList(datasets) {
const container = document.getElementById('datasetList');
if (!container) return;
container.innerHTML = '';
datasets.forEach(dataset => {
const statusClass = getStatusClass(dataset.status);
const statusText = dataset.status;
const datasetDiv = document.createElement('div');
datasetDiv.className = 'border border-dashboard-bg rounded-lg p-4 hover:shadow-md transition-shadow';
datasetDiv.innerHTML = `
<div class="flex justify-between items-center">
<div>
<h3 class="font-medium text-dashboard-text">${dataset.name}</h3>
<p class="text-sm text-dashboard-textLight mt-1">${dataset.size || '未知大小'}${dataset.records_count || dataset.description || '未知'}</p>
</div>
<div class="flex items-center space-x-2">
<span class="px-2 py-1 ${statusClass} text-xs rounded">${statusText}</span>
<button class="text-dashboard-primary hover:underline text-sm">查看详情</button>
</div>
</div>
`;
container.appendChild(datasetDiv);
});
}
// 获取状态样式类
function getStatusClass(status) {
switch(status) {
case '已处理':
return 'bg-green-100 text-green-600';
case '处理中':
return 'bg-blue-100 text-blue-600';
case '待处理':
return 'bg-gray-100 text-gray-600';
default:
return 'bg-gray-100 text-gray-600';
}
}
// 处理文件上传
async function handleFileUpload(input) {
const file = input.files[0];
if (!file) return;
// 检查文件类型
const allowedTypes = ['.json', '.jsonl'];
const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
if (!allowedTypes.includes(fileExtension)) {
alert('只支持 JSON 和 JSONL 格式的文件!');
input.value = '';
return;
}
// 检查文件大小 (100MB)
const maxSize = 100 * 1024 * 1024;
if (file.size > maxSize) {
alert('文件大小不能超过 100MB');
input.value = '';
return;
}
try {
const formData = new FormData();
formData.append('file', file);
formData.append('description', `用户上传的数据集文件: ${file.name}`);
const response = await fetch(`${API_BASE}/datasets/upload`, {
method: 'POST',
body: formData
});
const result = await response.json();
if (result.code === 200) {
alert('上传成功!');
// 重新加载数据集列表
loadDatasets();
} else {
alert('上传失败: ' + (result.detail || result.message || '未知错误'));
}
} catch (error) {
console.error('上传失败:', error);
alert('上传失败: 网络错误');
}
// 清空文件选择
input.value = '';
}
// 退出登录函数
function logout() {
// 清除登录状态