406 lines
13 KiB
JavaScript
406 lines
13 KiB
JavaScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { useState, useCallback, useEffect, useRef } from 'react';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 盲测任务详情和盲测过程管理 Hook
|
|||
|
|
*/
|
|||
|
|
export default function useBlindTestDetail(projectId, taskId) {
|
|||
|
|
// 任务详情
|
|||
|
|
const [task, setTask] = useState(null);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [error, setError] = useState('');
|
|||
|
|
|
|||
|
|
// 当前题目状态
|
|||
|
|
const [currentQuestion, setCurrentQuestion] = useState(null);
|
|||
|
|
const [leftAnswer, setLeftAnswer] = useState(null);
|
|||
|
|
const [rightAnswer, setRightAnswer] = useState(null);
|
|||
|
|
const [isSwapped, setIsSwapped] = useState(false);
|
|||
|
|
const [answersLoading, setAnswersLoading] = useState(false);
|
|||
|
|
|
|||
|
|
// 流式输出状态
|
|||
|
|
const [streamingA, setStreamingA] = useState(false);
|
|||
|
|
const [streamingB, setStreamingB] = useState(false);
|
|||
|
|
const abortControllerRef = useRef(null);
|
|||
|
|
const hasAutoLoadedRef = useRef(false);
|
|||
|
|
|
|||
|
|
// 投票状态
|
|||
|
|
const [voting, setVoting] = useState(false);
|
|||
|
|
const [completed, setCompleted] = useState(false);
|
|||
|
|
|
|||
|
|
// 加载任务详情
|
|||
|
|
const loadTask = useCallback(
|
|||
|
|
async (silent = false) => {
|
|||
|
|
if (!projectId || !taskId) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
if (!silent) setLoading(true);
|
|||
|
|
setError('');
|
|||
|
|
// 添加时间戳防止缓存
|
|||
|
|
const response = await fetch(`/api/projects/${projectId}/blind-test-tasks/${taskId}?t=${Date.now()}`, {
|
|||
|
|
cache: 'no-store',
|
|||
|
|
headers: {
|
|||
|
|
Pragma: 'no-cache',
|
|||
|
|
'Cache-Control': 'no-cache'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const result = await response.json();
|
|||
|
|
|
|||
|
|
if (result.code === 0) {
|
|||
|
|
console.log('任务状态更新:', result.data.completedCount, '/', result.data.totalCount);
|
|||
|
|
setTask(result.data);
|
|||
|
|
// 检查任务是否已完成 (0=进行中, 1=已完成, 2=失败, 3=已中断)
|
|||
|
|
if (result.data.status !== 0) {
|
|||
|
|
setCompleted(true);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (!silent) setError(result.error || '加载任务详情失败');
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('加载任务详情失败:', err);
|
|||
|
|
if (!silent) setError('加载任务详情失败');
|
|||
|
|
} finally {
|
|||
|
|
if (!silent) setLoading(false);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
[projectId, taskId]
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 流式获取当前题目和模型回答
|
|||
|
|
const fetchCurrentQuestion = useCallback(async () => {
|
|||
|
|
if (!projectId || !taskId) return;
|
|||
|
|
|
|||
|
|
// 取消上一次的请求
|
|||
|
|
if (abortControllerRef.current) {
|
|||
|
|
abortControllerRef.current.abort();
|
|||
|
|
}
|
|||
|
|
const controller = new AbortController();
|
|||
|
|
abortControllerRef.current = controller;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
setAnswersLoading(true);
|
|||
|
|
setError('');
|
|||
|
|
setCurrentQuestion(null);
|
|||
|
|
setLeftAnswer({ fullContent: '', content: '', thinking: '', isThinking: false, duration: 0, error: null });
|
|||
|
|
setRightAnswer({ fullContent: '', content: '', thinking: '', isThinking: false, duration: 0, error: null });
|
|||
|
|
|
|||
|
|
// 1. 先获取题目信息
|
|||
|
|
const questionRes = await fetch(`/api/projects/${projectId}/blind-test-tasks/${taskId}/question`, {
|
|||
|
|
signal: controller.signal,
|
|||
|
|
cache: 'no-store'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!questionRes.ok) throw new Error('获取题目失败');
|
|||
|
|
|
|||
|
|
const questionData = await questionRes.json();
|
|||
|
|
|
|||
|
|
if (questionData.completed) {
|
|||
|
|
setCompleted(true);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setCurrentQuestion({
|
|||
|
|
id: questionData.questionId,
|
|||
|
|
question: questionData.question,
|
|||
|
|
answer: questionData.answer,
|
|||
|
|
index: questionData.questionIndex,
|
|||
|
|
total: questionData.totalQuestions
|
|||
|
|
});
|
|||
|
|
setIsSwapped(questionData.isSwapped);
|
|||
|
|
setCompleted(false);
|
|||
|
|
|
|||
|
|
// 2. 并行调用两个模型的流式接口
|
|||
|
|
setStreamingA(true);
|
|||
|
|
setStreamingB(true);
|
|||
|
|
|
|||
|
|
const processStream = async (modelType, setAnswer, setStreaming) => {
|
|||
|
|
const modelStartTime = Date.now();
|
|||
|
|
try {
|
|||
|
|
const streamUrl = `/api/projects/${projectId}/blind-test-tasks/${taskId}/stream-model?model=${modelType}`;
|
|||
|
|
const response = await fetch(streamUrl, {
|
|||
|
|
signal: controller.signal
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!response.ok) {
|
|||
|
|
throw new Error(`模型${modelType}调用失败: ${response.status}`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const reader = response.body.getReader();
|
|||
|
|
const decoder = new TextDecoder();
|
|||
|
|
|
|||
|
|
let fullContent = '';
|
|||
|
|
let currentContent = '';
|
|||
|
|
let currentThinking = '';
|
|||
|
|
let isInThinking = false;
|
|||
|
|
let pendingBuffer = ''; // 用于处理跨 chunk 的标签识别
|
|||
|
|
|
|||
|
|
while (true) {
|
|||
|
|
const { done, value } = await reader.read();
|
|||
|
|
if (done) break;
|
|||
|
|
|
|||
|
|
const chunk = decoder.decode(value, { stream: true });
|
|||
|
|
pendingBuffer += chunk;
|
|||
|
|
|
|||
|
|
// 处理缓冲区中的内容
|
|||
|
|
while (pendingBuffer.length > 0) {
|
|||
|
|
// 如果正在思考中，寻找结束标签
|
|||
|
|
if (isInThinking) {
|
|||
|
|
const endTagIndex = pendingBuffer.indexOf('</think>');
|
|||
|
|
if (endTagIndex !== -1) {
|
|||
|
|
const thinkingPart = pendingBuffer.substring(0, endTagIndex);
|
|||
|
|
currentThinking += thinkingPart;
|
|||
|
|
fullContent += thinkingPart + '</think>';
|
|||
|
|
isInThinking = false;
|
|||
|
|
pendingBuffer = pendingBuffer.substring(endTagIndex + 8);
|
|||
|
|
continue;
|
|||
|
|
} else {
|
|||
|
|
// 没有找到结束标签，但可能缓冲区末尾包含了部分结束标签
|
|||
|
|
// 保留最后 7 个字符（"</think>" 长度为 8）以防被截断
|
|||
|
|
const safeLength = Math.max(0, pendingBuffer.length - 7);
|
|||
|
|
const processingPart = pendingBuffer.substring(0, safeLength);
|
|||
|
|
currentThinking += processingPart;
|
|||
|
|
fullContent += processingPart;
|
|||
|
|
pendingBuffer = pendingBuffer.substring(safeLength);
|
|||
|
|
break; // 等待下一个 chunk
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 不在思考中，寻找开始标签
|
|||
|
|
const startTagIndex = pendingBuffer.indexOf('<think>');
|
|||
|
|
if (startTagIndex !== -1) {
|
|||
|
|
const contentPart = pendingBuffer.substring(0, startTagIndex);
|
|||
|
|
currentContent += contentPart;
|
|||
|
|
fullContent += contentPart + '<think>';
|
|||
|
|
isInThinking = true;
|
|||
|
|
pendingBuffer = pendingBuffer.substring(startTagIndex + 7);
|
|||
|
|
continue;
|
|||
|
|
} else {
|
|||
|
|
// 没有找到开始标签，保留最后 6 个字符以防开始标签被截断
|
|||
|
|
const safeLength = Math.max(0, pendingBuffer.length - 6);
|
|||
|
|
const processingPart = pendingBuffer.substring(0, safeLength);
|
|||
|
|
currentContent += processingPart;
|
|||
|
|
fullContent += processingPart;
|
|||
|
|
pendingBuffer = pendingBuffer.substring(safeLength);
|
|||
|
|
break; // 等待下一个 chunk
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setAnswer(prev => ({
|
|||
|
|
...prev,
|
|||
|
|
fullContent,
|
|||
|
|
content: currentContent,
|
|||
|
|
thinking: currentThinking,
|
|||
|
|
isThinking: isInThinking
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const modelDuration = Date.now() - modelStartTime;
|
|||
|
|
setAnswer(prev => ({ ...prev, duration: modelDuration }));
|
|||
|
|
setStreaming(false);
|
|||
|
|
} catch (err) {
|
|||
|
|
if (err.name === 'AbortError') return;
|
|||
|
|
console.error(`模型${modelType}错误:`, err);
|
|||
|
|
const modelDuration = Date.now() - modelStartTime;
|
|||
|
|
setAnswer(prev => ({
|
|||
|
|
...prev,
|
|||
|
|
error: err.message,
|
|||
|
|
duration: modelDuration
|
|||
|
|
}));
|
|||
|
|
setStreaming(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 根据是否交换决定左右对应的模型
|
|||
|
|
const leftModel = questionData.isSwapped ? 'B' : 'A';
|
|||
|
|
const rightModel = questionData.isSwapped ? 'A' : 'B';
|
|||
|
|
|
|||
|
|
await Promise.all([
|
|||
|
|
processStream(leftModel, setLeftAnswer, setStreamingA),
|
|||
|
|
processStream(rightModel, setRightAnswer, setStreamingB)
|
|||
|
|
]);
|
|||
|
|
} catch (err) {
|
|||
|
|
if (err.name === 'AbortError') return;
|
|||
|
|
console.error('获取题目失败:', err);
|
|||
|
|
setError(err.message || '获取当前题目失败');
|
|||
|
|
setStreamingA(false);
|
|||
|
|
setStreamingB(false);
|
|||
|
|
} finally {
|
|||
|
|
// 只有当前请求未被取消时才重置loading
|
|||
|
|
if (abortControllerRef.current === controller) {
|
|||
|
|
setAnswersLoading(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, [projectId, taskId]);
|
|||
|
|
|
|||
|
|
// 提交投票
|
|||
|
|
const submitVote = useCallback(
|
|||
|
|
async vote => {
|
|||
|
|
if (!projectId || !taskId || !currentQuestion) return { success: false };
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
setVoting(true);
|
|||
|
|
setError('');
|
|||
|
|
|
|||
|
|
const response = await fetch(`/api/projects/${projectId}/blind-test-tasks/${taskId}/vote`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
vote,
|
|||
|
|
questionId: currentQuestion.id,
|
|||
|
|
isSwapped,
|
|||
|
|
// 使用 fullContent 提交，包含思考过程
|
|||
|
|
leftAnswer: leftAnswer?.fullContent || leftAnswer?.content || '',
|
|||
|
|
rightAnswer: rightAnswer?.fullContent || rightAnswer?.content || ''
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const result = await response.json();
|
|||
|
|
|
|||
|
|
if (result.code === 0) {
|
|||
|
|
// 等待任务状态更新（进度条）
|
|||
|
|
await loadTask(true);
|
|||
|
|
|
|||
|
|
if (result.data.isCompleted) {
|
|||
|
|
setCompleted(true);
|
|||
|
|
} else {
|
|||
|
|
// 获取下一题
|
|||
|
|
await fetchCurrentQuestion();
|
|||
|
|
}
|
|||
|
|
return { success: true, data: result.data };
|
|||
|
|
} else {
|
|||
|
|
setError(result.error || '提交投票失败');
|
|||
|
|
return { success: false, error: result.error };
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('提交投票失败:', err);
|
|||
|
|
setError('提交投票失败');
|
|||
|
|
return { success: false, error: '提交投票失败' };
|
|||
|
|
} finally {
|
|||
|
|
setVoting(false);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
[projectId, taskId, currentQuestion, isSwapped, leftAnswer, rightAnswer, loadTask, fetchCurrentQuestion]
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 中断任务
|
|||
|
|
const interruptTask = useCallback(async () => {
|
|||
|
|
if (!projectId || !taskId) return false;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`/api/projects/${projectId}/blind-test-tasks/${taskId}`, {
|
|||
|
|
method: 'PUT',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({ action: 'interrupt' })
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const result = await response.json();
|
|||
|
|
|
|||
|
|
if (result.code === 0) {
|
|||
|
|
setCompleted(true);
|
|||
|
|
loadTask();
|
|||
|
|
return true;
|
|||
|
|
} else {
|
|||
|
|
setError(result.error || '中断任务失败');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('中断任务失败:', err);
|
|||
|
|
setError('中断任务失败');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}, [projectId, taskId, loadTask]);
|
|||
|
|
|
|||
|
|
// 初始加载
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadTask();
|
|||
|
|
}, [loadTask]);
|
|||
|
|
|
|||
|
|
// 任务加载完成后，如果任务进行中，自动获取当前题目（只执行一次）
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (task && task.status === 0 && !completed && !hasAutoLoadedRef.current && projectId && taskId) {
|
|||
|
|
hasAutoLoadedRef.current = true;
|
|||
|
|
fetchCurrentQuestion();
|
|||
|
|
}
|
|||
|
|
}, [task, completed, projectId, taskId, fetchCurrentQuestion]);
|
|||
|
|
|
|||
|
|
// 计算结果统计
|
|||
|
|
const getResultStats = useCallback(() => {
|
|||
|
|
if (!task?.detail?.results) return null;
|
|||
|
|
|
|||
|
|
const results = task.detail.results;
|
|||
|
|
const totalModelAScore = results.reduce((sum, r) => sum + (r.modelAScore || 0), 0);
|
|||
|
|
const totalModelBScore = results.reduce((sum, r) => sum + (r.modelBScore || 0), 0);
|
|||
|
|
|
|||
|
|
const leftWins = results.filter(r => r.vote === 'left').length;
|
|||
|
|
const rightWins = results.filter(r => r.vote === 'right').length;
|
|||
|
|
const bothGood = results.filter(r => r.vote === 'both_good').length;
|
|||
|
|
const bothBad = results.filter(r => r.vote === 'both_bad').length;
|
|||
|
|
|
|||
|
|
// 计算实际模型胜出次数（需要考虑 swap）
|
|||
|
|
const modelAWins = results.filter(r => {
|
|||
|
|
if (r.vote === 'left' && !r.isSwapped) return true;
|
|||
|
|
if (r.vote === 'right' && r.isSwapped) return true;
|
|||
|
|
return false;
|
|||
|
|
}).length;
|
|||
|
|
|
|||
|
|
const modelBWins = results.filter(r => {
|
|||
|
|
if (r.vote === 'left' && r.isSwapped) return true;
|
|||
|
|
if (r.vote === 'right' && !r.isSwapped) return true;
|
|||
|
|
return false;
|
|||
|
|
}).length;
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
totalQuestions: results.length,
|
|||
|
|
modelAScore: totalModelAScore,
|
|||
|
|
modelBScore: totalModelBScore,
|
|||
|
|
modelAWins,
|
|||
|
|
modelBWins,
|
|||
|
|
ties: bothGood + bothBad,
|
|||
|
|
bothGood,
|
|||
|
|
bothBad,
|
|||
|
|
leftWins,
|
|||
|
|
rightWins
|
|||
|
|
};
|
|||
|
|
}, [task]);
|
|||
|
|
|
|||
|
|
// 组件卸载时取消请求
|
|||
|
|
useEffect(() => {
|
|||
|
|
return () => {
|
|||
|
|
if (abortControllerRef.current) {
|
|||
|
|
abortControllerRef.current.abort();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
// 任务详情
|
|||
|
|
task,
|
|||
|
|
loading,
|
|||
|
|
error,
|
|||
|
|
setError,
|
|||
|
|
loadTask,
|
|||
|
|
|
|||
|
|
// 当前题目状态
|
|||
|
|
currentQuestion,
|
|||
|
|
leftAnswer,
|
|||
|
|
rightAnswer,
|
|||
|
|
answersLoading,
|
|||
|
|
|
|||
|
|
// 流式状态
|
|||
|
|
streamingA,
|
|||
|
|
streamingB,
|
|||
|
|
|
|||
|
|
// 投票状态
|
|||
|
|
voting,
|
|||
|
|
completed,
|
|||
|
|
|
|||
|
|
// 操作
|
|||
|
|
fetchCurrentQuestion,
|
|||
|
|
submitVote,
|
|||
|
|
interruptTask,
|
|||
|
|
|
|||
|
|
// 结果统计
|
|||
|
|
getResultStats
|
|||
|
|
};
|
|||
|
|
}
|