quant-speed-AI/market_page
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

打分上传后台
All checks were successful
Deploy to Server / deploy (push) Successful in 16s
Details

Browse Source
This commit is contained in:
jeremygan2021
2026-03-12 13:34:47 +08:00
parent 6129673ddc
commit 1f693e0e8a
15 changed files with 1692 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
backend/competition/templates/judge/ai_manage.html Normal file
View File

@@ -0,0 +1,179 @@
{% extends 'judge/base.html' %}
{% block title %}AI 服务管理 - 评委系统{% endblock %}
{% block content %}
<div class="mb-8">
<h2 class="text-3xl font-bold text-gray-900 tracking-tight">AI 服务管理</h2>
<p class="mt-1 text-sm text-gray-500">查看和管理音频转录及 AI 评分任务</p>
</div>
<div class="bg-white shadow overflow-hidden sm:rounded-lg border border-gray-200">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
项目
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
文件名
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
状态
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
AI 评分
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
操作
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
{% for task in tasks %}
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900">{{ task.project.title }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<a href="{{ task.file_url }}" target="_blank" class="text-sm text-blue-600 hover:text-blue-900 flex items-center">
<i class="fas fa-file-audio mr-1"></i> {{ task.file_name|default:"查看文件"|truncatechars:20 }}
</a>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ task.status_class }}">
{{ task.get_status_display }}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{% if task.ai_score %}
<span class="font-bold text-gray-900">{{ task.ai_score }}</span> 分
{% else %}
<span class="text-gray-400">-</span>
{% endif %}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
<button onclick="refreshStatus('{{ task.id }}')" class="text-indigo-600 hover:text-indigo-900 transition-colors" title="刷新状态">
<i class="fas fa-sync-alt"></i>
</button>
{% if task.status == 'SUCCEEDED' %}
<button onclick="viewResult('{{ task.id }}')" class="text-green-600 hover:text-green-900 transition-colors" title="查看结果">
<i class="fas fa-eye"></i>
</button>
{% endif %}
<button onclick="deleteTask('{{ task.id }}')" class="text-red-600 hover:text-red-900 transition-colors" title="删除任务">
<i class="fas fa-trash-alt"></i>
</button>
</td>
</tr>
{% empty %}
<tr>
<td colspan="5" class="px-6 py-10 text-center text-gray-500">
<div class="flex flex-col items-center">
<i class="fas fa-inbox text-4xl text-gray-300 mb-2"></i>
<p>暂无 AI 任务</p>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<!-- AI Result Modal -->
<div id="aiResultModal" class="modal fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6" style="background-color: rgba(0,0,0,0.5);">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col relative animate-fade-in">
<button class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 z-10" onclick="closeModal('aiResultModal')">
<i class="fas fa-times text-xl"></i>
</button>
<div class="px-6 py-4 border-b border-gray-100 bg-gray-50">
<h3 class="text-lg font-bold text-gray-900 flex items-center">
<i class="fas fa-robot text-blue-500 mr-2"></i> AI 分析详情
</h3>
</div>
<div class="p-6 overflow-y-auto space-y-6" id="aiResultContent">
<div>
<h4 class="text-sm font-bold text-gray-900 uppercase tracking-wide mb-2 flex items-center">
<i class="fas fa-align-left mr-2 text-gray-400"></i> 逐字稿
</h4>
<div id="transcriptionText" class="bg-gray-50 p-4 rounded-lg text-sm text-gray-700 leading-relaxed border border-gray-200 max-h-60 overflow-y-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="text-sm font-bold text-gray-900 uppercase tracking-wide mb-2 flex items-center">
<i class="fas fa-lightbulb mr-2 text-yellow-500"></i> AI 总结
</h4>
<div id="summaryText" class="bg-yellow-50 p-4 rounded-lg text-sm text-gray-800 border border-yellow-100 h-40 overflow-y-auto"></div>
</div>
<div>
<h4 class="text-sm font-bold text-gray-900 uppercase tracking-wide mb-2 flex items-center">
<i class="fas fa-comment-dots mr-2 text-green-500"></i> AI 评语
</h4>
<div id="evaluationText" class="bg-green-50 p-4 rounded-lg text-sm text-gray-800 border border-green-100 h-40 overflow-y-auto"></div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
function closeModal(id) {
document.getElementById(id).classList.remove('active');
}
async function refreshStatus(taskId) {
try {
const res = await apiCall(`/api/ai/transcriptions/${taskId}/refresh_status/`, 'GET');
if (res.status === 'SUCCEEDED' || res.status === 'FAILED') {
alert('状态已更新: ' + res.status);
location.reload();
} else {
alert('当前状态: ' + res.status);
}
} catch (e) {
alert('刷新失败');
}
}
async function viewResult(taskId) {
try {
const res = await apiCall(`/api/ai/transcriptions/${taskId}/`, 'GET');
document.getElementById('transcriptionText').innerText = res.transcription || '无逐字稿';
document.getElementById('summaryText').innerText = res.summary || '无总结';
// Handle Evaluation (might be separate API or included)
// Assuming simple structure for now, adjust based on actual API
let evalText = '暂无评语';
if (res.ai_evaluations && res.ai_evaluations.length > 0) {
evalText = res.ai_evaluations[0].evaluation || '无内容';
}
document.getElementById('evaluationText').innerText = evalText;
document.getElementById('aiResultModal').classList.add('active');
} catch (e) {
console.error(e);
alert('获取结果失败');
}
}
async function deleteTask(taskId) {
if(!confirm('确定要删除此任务吗？')) return;
try {
await apiCall(`/judge/api/ai/${taskId}/delete/`, 'POST');
alert('删除成功');
location.reload();
} catch (e) {
alert('删除失败');
}
}
</script>
{% endblock %}

226
backend/competition/templates/judge/base.html Normal file
View File

@@ -0,0 +1,226 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}评委系统{% endblock %}</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f3f4f6;
}
.glass-effect {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
.animate-fade-in {
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* Modal Transitions */
.modal {
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
}
.modal.active {
opacity: 1;
visibility: visible;
}
.modal-content {
transform: scale(0.95);
transition: transform 0.3s ease-in-out;
}
.modal.active .modal-content {
transform: scale(1);
}
/* Status Badges */
.status-submitted, .status-succeeded {
background-color: #dcfce7;
color: #166534;
}
.status-pending {
background-color: #fef9c3;
color: #854d0e;
}
.status-processing {
background-color: #dbeafe;
color: #1e40af;
}
.status-failed {
background-color: #fee2e2;
color: #991b1b;
}
</style>
{% block extra_css %}{% endblock %}
</head>
<body class="text-gray-800 antialiased min-h-screen flex flex-col">
{% if request.session.judge_id %}
<header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<a href="{% url 'judge_dashboard' %}" class="flex-shrink-0 flex items-center gap-2 text-blue-600 hover:text-blue-700 transition-colors">
<i class="fas fa-gavel text-xl"></i>
<h1 class="font-bold text-xl tracking-tight">评委评分系统</h1>
</a>
<nav class="hidden md:ml-8 md:flex md:space-x-8">
<a href="{% url 'judge_dashboard' %}"
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200
{% if request.resolver_match.url_name == 'judge_dashboard' %}border-blue-500 text-gray-900{% else %}border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700{% endif %}">
<i class="fas fa-th-list mr-2"></i>项目列表
</a>
{% if request.session.judge_role == 'judge' or request.session.judge_role == 'guest' %}
<a href="{% url 'judge_ai_manage' %}"
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200
{% if request.resolver_match.url_name == 'judge_ai_manage' %}border-blue-500 text-gray-900{% else %}border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700{% endif %}">
<i class="fas fa-robot mr-2"></i>AI服务管理
</a>
{% endif %}
</nav>
</div>
<div class="flex items-center">
<div class="hidden md:flex items-center mr-6 text-sm">
<span class="font-medium text-gray-700 mr-2">{{ request.session.judge_name }}</span>
<span class="px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 border border-blue-100">
{% if request.session.judge_role == 'judge' %}评委
{% elif request.session.judge_role == 'guest' %}嘉宾
{% elif request.session.judge_role == 'contestant' %}选手
{% else %}{{ request.session.judge_role }}{% endif %}
</span>
</div>
<button onclick="logout()" class="ml-4 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all shadow-sm hover:shadow">
<i class="fas fa-sign-out-alt mr-1"></i>退出
</button>
</div>
</div>
</div>
<!-- Mobile Navigation -->
<div class="md:hidden border-t border-gray-200 bg-gray-50">
<div class="p-4 border-b border-gray-200 flex items-center justify-between">
<span class="font-medium text-gray-900">{{ request.session.judge_name }}</span>
<span class="px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 border border-blue-100">
{% if request.session.judge_role == 'judge' %}评委
{% elif request.session.judge_role == 'guest' %}嘉宾
{% elif request.session.judge_role == 'contestant' %}选手
{% else %}{{ request.session.judge_role }}{% endif %}
</span>
</div>
<div class="grid grid-cols-2 divide-x divide-gray-200">
<a href="{% url 'judge_dashboard' %}" class="block py-3 text-center text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-blue-600">
<i class="fas fa-th-list mb-1 block text-lg"></i>项目列表
</a>
{% if request.session.judge_role == 'judge' or request.session.judge_role == 'guest' %}
<a href="{% url 'judge_ai_manage' %}" class="block py-3 text-center text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-blue-600">
<i class="fas fa-robot mb-1 block text-lg"></i>AI管理
</a>
{% endif %}
</div>
</div>
</header>
{% endif %}
<main class="flex-grow w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 animate-fade-in">
{% if messages %}
<div class="mb-6 space-y-2">
{% for message in messages %}
<div class="rounded-md p-4 shadow-sm border-l-4 flex items-center
{% if message.tags == 'error' %}bg-red-50 border-red-500 text-red-700
{% elif message.tags == 'success' %}bg-green-50 border-green-500 text-green-700
{% else %}bg-blue-50 border-blue-500 text-blue-700{% endif %}">
<i class="fas {% if message.tags == 'error' %}fa-exclamation-circle{% elif message.tags == 'success' %}fa-check-circle{% else %}fa-info-circle{% endif %} mr-3 text-lg"></i>
<p class="text-sm font-medium">{{ message }}</p>
</div>
{% endfor %}
</div>
{% endif %}
{% block content %}{% endblock %}
</main>
<footer class="bg-white border-t border-gray-200 mt-auto">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<p class="text-center text-sm text-gray-500">
&copy; {% now "Y" %} 评委评分系统. All rights reserved.
</p>
</div>
</footer>
<script>
function logout() {
if(confirm('确定要退出登录吗？')) {
window.location.href = "{% url 'judge_logout' %}";
}
}
// 通用 Fetch 封装，处理 CSRF
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
const csrftoken = getCookie('csrftoken');
async function apiCall(url, method='POST', data=null) {
const options = {
method: method,
headers: {
'X-CSRFToken': csrftoken
}
};
if (data && !(data instanceof FormData)) {
options.headers['Content-Type'] = 'application/json';
options.body = JSON.stringify(data);
} else if (data instanceof FormData) {
options.body = data;
}
try {
const response = await fetch(url, options);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (e) {
console.error('API Error:', e);
alert('操作失败: ' + e.message);
throw e;
}
}
</script>
{% block extra_js %}{% endblock %}
</body>
</html>

424
backend/competition/templates/judge/dashboard.html Normal file
View File

@@ -0,0 +1,424 @@
{% extends 'judge/base.html' %}
{% block title %}项目列表 - 评委系统{% endblock %}
{% block content %}
<div class="flex flex-col sm:flex-row justify-between items-center mb-8 gap-4">
<div>
<h2 class="text-3xl font-bold text-gray-900 tracking-tight">参赛项目列表</h2>
<p class="mt-1 text-sm text-gray-500">请对以下分配给您的项目进行评审</p>
</div>
{% if request.session.judge_role == 'judge' or request.session.judge_role == 'guest' %}
<button class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all transform hover:scale-105" onclick="openUploadModal()">
<i class="fas fa-cloud-upload-alt mr-2"></i>批量上传音频
</button>
{% endif %}
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
{% for project in projects %}
<div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden group flex flex-col h-full border border-gray-100" data-id="{{ project.id }}">
<div class="relative overflow-hidden h-48">
{% if project.cover_image_url %}
<img src="{{ project.cover_image_url }}" alt="{{ project.title }}" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500">
{% else %}
<div class="w-full h-full bg-gray-100 flex flex-col items-center justify-center text-gray-400">
<i class="fas fa-image text-4xl mb-2"></i>
<span class="text-sm">暂无封面</span>
</div>
{% endif %}
<div class="absolute top-2 right-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ project.status_class }} shadow-sm bg-opacity-90 backdrop-filter backdrop-blur-sm">
{{ project.get_status_display }}
</span>
</div>
</div>
<div class="p-6 flex-1 flex flex-col">
<h3 class="text-xl font-bold text-gray-900 mb-2 line-clamp-1" title="{{ project.title }}">{{ project.title }}</h3>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fas fa-user-circle mr-2 text-gray-400"></i>
<span>{{ project.contestant_name }}</span>
</div>
<div class="mt-auto pt-4 border-t border-gray-100 flex items-center justify-between">
<div class="flex flex-col">
<span class="text-xs text-gray-400 uppercase tracking-wider font-semibold">当前得分</span>
<span class="text-lg font-bold text-blue-600 score-display">{{ project.current_score|default:"--" }}</span>
</div>
<button class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors" onclick="viewProject({{ project.id }})">
详情 & 评分 <i class="fas fa-arrow-right ml-2 text-xs"></i>
</button>
</div>
</div>
</div>
{% empty %}
<div class="col-span-full">
<div class="text-center py-16 bg-white rounded-xl shadow-sm border border-gray-100">
<div class="mx-auto h-24 w-24 text-gray-200">
<i class="fas fa-folder-open text-6xl"></i>
</div>
<h3 class="mt-4 text-lg font-medium text-gray-900">暂无项目</h3>
<p class="mt-1 text-sm text-gray-500">当前没有分配给您的参赛项目。</p>
</div>
</div>
{% endfor %}
</div>
<!-- Project Detail & Grading Modal -->
<div id="projectModal" class="modal fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6" style="background-color: rgba(0,0,0,0.5);">
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-5xl max-h-[90vh] overflow-hidden flex flex-col relative animate-fade-in">
<button class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 z-10 p-2 rounded-full hover:bg-gray-100 transition-colors" onclick="closeModal('projectModal')">
<i class="fas fa-times text-xl"></i>
</button>
<div class="px-8 py-6 border-b border-gray-100 bg-gray-50">
<h2 class="text-2xl font-bold text-gray-900" id="modalTitle">项目标题</h2>
<div class="flex items-center gap-4 mt-2 text-sm text-gray-500">
<span class="flex items-center"><i class="fas fa-hashtag mr-1"></i> <span id="modalId"></span></span>
<span class="flex items-center"><i class="fas fa-user mr-1"></i> <span id="modalContestant"></span></span>
</div>
</div>
<div class="flex-1 overflow-y-auto p-8">
<div class="flex flex-col lg:flex-row gap-8">
<!-- Left Column: Info -->
<div class="flex-1 space-y-6">
<div>
<h4 class="text-lg font-semibold text-gray-900 mb-3 flex items-center"><i class="fas fa-info-circle mr-2 text-blue-500"></i>项目简介</h4>
<div id="modalDesc" class="bg-gray-50 p-4 rounded-lg text-gray-700 text-sm leading-relaxed border border-gray-100 max-h-48 overflow-y-auto"></div>
</div>
<div id="aiResultSection" style="display:none;" class="border border-indigo-100 rounded-xl overflow-hidden">
<div class="bg-indigo-50 px-4 py-3 border-b border-indigo-100 flex items-center">
<i class="fas fa-robot text-indigo-600 mr-2"></i>
<h4 class="text-sm font-bold text-indigo-900 uppercase tracking-wide">AI 智能分析</h4>
</div>
<div class="p-4 bg-white space-y-4">
<div>
<p class="text-xs font-semibold text-gray-500 uppercase mb-1">AI 总结</p>
<p class="text-sm text-gray-800" id="modalAiSummary"></p>
</div>
<div class="border-t border-gray-100 pt-3">
<p class="text-xs font-semibold text-gray-500 uppercase mb-1">逐字稿片段</p>
<p class="text-sm text-gray-600 italic" id="modalAiTrans"></p>
</div>
</div>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900 mb-3 flex items-center"><i class="fas fa-history mr-2 text-blue-500"></i>历史评语</h4>
<div id="modalHistoryComments" class="space-y-3 max-h-60 overflow-y-auto pr-2">
<!-- Loaded via JS -->
</div>
</div>
</div>
<!-- Right Column: Grading -->
<div class="lg:w-1/3 bg-gray-50 p-6 rounded-xl border border-gray-200 h-fit sticky top-0">
<h4 class="text-lg font-bold text-gray-900 mb-4 flex items-center"><i class="fas fa-star mr-2 text-yellow-500"></i>打分 & 评语</h4>
<form id="gradingForm" onsubmit="submitScore(event)" class="space-y-6">
<input type="hidden" id="projectId" name="project_id">
<div id="scoreDimensions" class="space-y-4">
<!-- Dimensions loaded via JS -->
</div>
<div class="space-y-2">
<label for="comment" class="block text-sm font-medium text-gray-700">评语建议</label>
<textarea id="comment" name="comment" rows="4"
class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md p-3"
placeholder="请输入您的专业点评..."></textarea>
</div>
<div class="pt-4 border-t border-gray-200 flex items-center justify-between">
<span id="saveStatus" class="text-green-600 text-sm font-medium opacity-0 transition-opacity duration-300 flex items-center">
<i class="fas fa-check mr-1"></i> 已保存
</span>
<button type="submit" class="inline-flex justify-center py-2 px-6 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
提交评分
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Upload Modal -->
<div id="uploadModal" class="modal fixed inset-0 z-50 flex items-center justify-center p-4" style="background-color: rgba(0,0,0,0.5);">
<div class="bg-white rounded-lg shadow-xl w-full max-w-md overflow-hidden animate-fade-in relative">
<button class="absolute top-3 right-3 text-gray-400 hover:text-gray-600" onclick="closeModal('uploadModal')">
<i class="fas fa-times"></i>
</button>
<div class="px-6 py-4 bg-gray-50 border-b border-gray-100">
<h2 class="text-lg font-bold text-gray-900">上传项目音频</h2>
</div>
<div class="p-6">
<form id="uploadForm" onsubmit="uploadFiles(event)" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">选择项目</label>
<select id="uploadProjectSelect" required class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
{% for project in projects %}
<option value="{{ project.id }}">{{ project.title }}</option>
{% endfor %}
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">选择文件 (支持mp3/mp4, &le;50MB)</label>
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md hover:border-blue-400 transition-colors cursor-pointer" onclick="document.getElementById('fileInput').click()">
<div class="space-y-1 text-center">
<i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i>
<div class="flex text-sm text-gray-600">
<label for="fileInput" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
<span>点击上传</span>
<input id="fileInput" name="fileInput" type="file" class="sr-only" multiple accept=".mp3,.mp4" required onchange="updateFileName(this)">
</label>
<p class="pl-1">或拖拽文件到这里</p>
</div>
<p class="text-xs text-gray-500">MP3, MP4 up to 50MB</p>
<p id="fileNameDisplay" class="text-xs text-blue-600 mt-2 font-medium"></p>
</div>
</div>
</div>
<div id="uploadProgressContainer" style="display: none;" class="bg-gray-50 p-3 rounded-md">
<div class="flex justify-between text-xs text-gray-600 mb-1">
<span id="uploadStatusText">准备上传...</span>
<span id="uploadPercent">0%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div id="uploadProgressBar" class="bg-blue-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
</div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
开始上传
</button>
</form>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
function updateFileName(input) {
const display = document.getElementById('fileNameDisplay');
if (input.files.length > 0) {
display.innerText = `已选: ${input.files.length} 个文件`;
} else {
display.innerText = '';
}
}
function closeModal(id) {
document.getElementById(id).classList.remove('active');
}
function openUploadModal() {
document.getElementById('uploadModal').classList.add('active');
}
async function viewProject(id) {
try {
// Show loading state or skeleton if possible, for now just fetch
const data = await fetch(`/judge/api/projects/${id}/`).then(res => res.json());
document.getElementById('projectId').value = id;
document.getElementById('modalTitle').innerText = data.title;
document.getElementById('modalId').innerText = data.id;
document.getElementById('modalContestant').innerText = data.contestant_name;
document.getElementById('modalDesc').innerHTML = data.description || '<span class="text-gray-400 italic">暂无简介</span>';
// AI Result
const aiSection = document.getElementById('aiResultSection');
if (data.ai_result) {
aiSection.style.display = 'block';
document.getElementById('modalAiSummary').innerText = (data.ai_result.summary || '暂无总结').substring(0, 300) + (data.ai_result.summary && data.ai_result.summary.length > 300 ? '...' : '');
document.getElementById('modalAiTrans').innerText = (data.ai_result.transcription || '暂无内容').substring(0, 150) + '...';
} else {
aiSection.style.display = 'none';
}
// Render History Comments
const historyHtml = data.history_comments.length > 0 ? data.history_comments.map(c =>
`<div class="bg-white p-3 rounded border border-gray-100 shadow-sm">
<div class="flex justify-between items-center mb-1">
<span class="font-bold text-sm text-gray-800">${c.judge_name}</span>
<span class="text-xs text-gray-400">${c.created_at}</span>
</div>
<p class="text-sm text-gray-600">${c.content}</p>
</div>`
).join('') : '<div class="text-center text-gray-400 py-4 text-sm">暂无历史评语</div>';
document.getElementById('modalHistoryComments').innerHTML = historyHtml;
// Render Score Inputs
const dimensionsHtml = data.dimensions.map(d => `
<div class="bg-white p-3 rounded-lg border border-gray-200">
<div class="flex justify-between items-center mb-2">
<label class="text-sm font-medium text-gray-700">${d.name}</label>
<span class="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded">权重: ${d.weight}</span>
</div>
<div class="flex items-center gap-4">
<input type="range" min="0" max="${d.max_score}" step="1" value="${d.current_score || 0}"
oninput="document.getElementById('score_val_${d.id}').innerText = this.value"
name="score_${d.id}" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600">
<div class="w-12 text-right">
<span id="score_val_${d.id}" class="text-lg font-bold text-blue-600">${d.current_score || 0}</span>
<span class="text-xs text-gray-400">/${d.max_score}</span>
</div>
</div>
</div>
`).join('');
document.getElementById('scoreDimensions').innerHTML = dimensionsHtml;
document.getElementById('comment').value = data.current_comment || '';
// Handle Grading Permission
const gradingForm = document.getElementById('gradingForm');
const gradingContainer = gradingForm.parentElement;
let readOnlyMsg = document.getElementById('readOnlyMsg');
if (!readOnlyMsg) {
readOnlyMsg = document.createElement('div');
readOnlyMsg.id = 'readOnlyMsg';
readOnlyMsg.className = 'text-center py-10 bg-white rounded-lg border border-dashed border-gray-300 mt-4';
readOnlyMsg.innerHTML = `
<div class="mx-auto h-12 w-12 bg-gray-50 rounded-full flex items-center justify-center mb-3">
<i class="fas fa-eye text-2xl text-gray-400"></i>
</div>
<h3 class="text-base font-medium text-gray-900">仅浏览模式</h3>
<p class="mt-1 text-sm text-gray-500">当前身份无法进行评分</p>
`;
gradingContainer.appendChild(readOnlyMsg);
}
if (data.can_grade) {
gradingForm.style.display = 'block';
readOnlyMsg.style.display = 'none';
} else {
gradingForm.style.display = 'none';
readOnlyMsg.style.display = 'block';
}
document.getElementById('projectModal').classList.add('active');
} catch (e) {
console.error(e);
alert('加载项目详情失败');
}
}
async function submitScore(e) {
e.preventDefault();
if(!confirm('确认提交评分吗？')) return;
const form = e.target;
const formData = new FormData(form);
const data = Object.fromEntries(formData.entries());
try {
const res = await fetch('/judge/api/score/submit/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{ csrf_token }}'
},
body: JSON.stringify(data)
});
const result = await res.json();
if(result.success) {
const status = document.getElementById('saveStatus');
status.style.opacity = '1';
setTimeout(() => status.style.opacity = '0', 2000);
// Optional: Update card score in background
const cardScore = document.querySelector(`.project-card[data-id="${data.project_id}"] .score-display`);
if(cardScore) cardScore.innerText = '已评分'; // Or fetch new score
} else {
alert('提交失败: ' + result.message);
}
} catch(e) {
alert('提交出错');
}
}
async function uploadFiles(e) {
e.preventDefault();
const projectSelect = document.getElementById('uploadProjectSelect');
const fileInput = document.getElementById('fileInput');
const projectId = projectSelect.value;
const files = fileInput.files;
if (files.length === 0) return;
const progressBar = document.getElementById('uploadProgressBar');
const statusText = document.getElementById('uploadStatusText');
const percentText = document.getElementById('uploadPercent');
const container = document.getElementById('uploadProgressContainer');
container.style.display = 'block';
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (file.size > 50 * 1024 * 1024) {
alert(`文件 ${file.name} 超过 50MB，跳过`);
continue;
}
const formData = new FormData();
formData.append('file', file);
formData.append('project_id', projectId);
statusText.innerText = `正在上传 ${file.name} (${i+1}/${files.length})...`;
progressBar.style.width = '0%';
percentText.innerText = '0%';
try {
await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/judge/api/upload/', true);
xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}');
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
const percentComplete = Math.round((e.loaded / e.total) * 100);
progressBar.style.width = percentComplete + '%';
percentText.innerText = percentComplete + '%';
}
};
xhr.onload = () => {
if (xhr.status === 200) {
const res = JSON.parse(xhr.responseText);
if(res.success) resolve();
else reject(res.message);
} else {
reject(xhr.statusText);
}
};
xhr.onerror = () => reject('Network Error');
xhr.send(formData);
});
} catch (err) {
alert(`上传 ${file.name} 失败: ${err}`);
}
}
statusText.innerText = '所有任务完成!';
progressBar.style.width = '100%';
percentText.innerText = '100%';
setTimeout(() => {
closeModal('uploadModal');
container.style.display = 'none';
window.location.href = "{% url 'judge_ai_manage' %}";
}, 1000);
}
</script>
{% endblock %}

129
backend/competition/templates/judge/login.html Normal file
View File

@@ -0,0 +1,129 @@
{% extends 'judge/base.html' %}
{% block title %}评委登录{% endblock %}
{% block content %}
<div class="fixed inset-0 z-0 bg-gradient-to-br from-blue-500 to-indigo-700 flex items-center justify-center px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8 bg-white p-10 rounded-2xl shadow-2xl transform transition-all hover:scale-105 duration-300">
<div>
<div class="mx-auto h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-gavel text-3xl text-blue-600"></i>
</div>
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
评委登录
</h2>
<p class="mt-2 text-center text-sm text-gray-600">
请输入您的手机号验证登录
</p>
</div>
<form class="mt-8 space-y-6" method="post" action="{% url 'judge_login' %}">
{% csrf_token %}
<div class="rounded-md shadow-sm -space-y-px">
<div class="mb-4">
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
<div class="relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-mobile-alt text-gray-400"></i>
</div>
<input type="tel" id="phone" name="phone" required pattern="[0-9]{11}"
class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-lg py-3 transition-colors"
placeholder="请输入11位手机号">
</div>
</div>
<div>
<label for="code" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
<div class="flex gap-2">
<div class="relative rounded-md shadow-sm flex-1">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-shield-alt text-gray-400"></i>
</div>
<input type="text" id="code" name="code" required
class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-lg py-3 transition-colors"
placeholder="请输入验证码">
</div>
<button type="button" id="sendCodeBtn" onclick="sendSmsCode()"
class="whitespace-nowrap inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors w-32 justify-center">
发送验证码
</button>
</div>
</div>
</div>
<div>
<button type="submit"
class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-md hover:shadow-lg transition-all duration-200">
<span class="absolute left-0 inset-y-0 flex items-center pl-3">
<i class="fas fa-sign-in-alt text-blue-300 group-hover:text-blue-100"></i>
</span>
登录系统
</button>
</div>
</form>
{% if error %}
<div class="rounded-md bg-red-50 p-4 border border-red-200 animate-pulse">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-times-circle text-red-400"></i>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-red-800">登录失败</h3>
<div class="mt-2 text-sm text-red-700">
<p>{{ error }}</p>
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
async function sendSmsCode() {
const phone = document.getElementById('phone').value;
if (!phone || phone.length !== 11) {
alert('请输入有效的11位手机号');
return;
}
const btn = document.getElementById('sendCodeBtn');
btn.disabled = true;
let countdown = 60;
try {
const response = await fetch("{% url 'judge_send_code' %}", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{ csrf_token }}'
},
body: JSON.stringify({ phone: phone })
});
const data = await response.json();
if (data.success) {
alert('验证码已发送');
const timer = setInterval(() => {
btn.innerText = `${countdown}s 后重发`;
countdown--;
if (countdown < 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerText = '发送验证码';
}
}, 1000);
} else {
alert('发送失败: ' + data.message);
btn.disabled = false;
}
} catch (error) {
console.error('Error:', error);
alert('网络错误，请重试');
btn.disabled = false;
}
}
</script>
{% endblock %}