Upload 53 files

ai-routes.js

@@ -262,7 +262,7 @@ router.post('/chat', checkAIAccess, async (req, res) => {
 
 // STREAMING ASSESSMENT ENDPOINT
 router.post('/evaluate', checkAIAccess, async (req, res) => {
-    const { question, audio, image } = req.body;
+    const { question, audio, image, images } = req.body;
     res.setHeader('Content-Type', 'text/event-stream');
     res.setHeader('Cache-Control', 'no-cache');
     res.setHeader('Connection', 'keep-alive');
@@ -276,10 +276,19 @@ router.post('/evaluate', checkAIAccess, async (req, res) => {
             evalParts.push({ text: "学生的回答在音频中。" });
             evalParts.push({ inlineData: { mimeType: 'audio/webm', data: audio } });
         }
-        if (image) {
+        
+        // Support multiple images
+        if (images && Array.isArray(images) && images.length > 0) {
+            evalParts.push({ text: "学生的回答写在以下图片中，请识别所有图片中的文字内容并进行批改：" });
+            images.forEach(img => {
+                if(img) evalParts.push({ inlineData: { mimeType: 'image/jpeg', data: img } });
+            });
+        } else if (image) {
+            // Legacy single image support
             evalParts.push({ text: "学生的回答写在图片中，请识别图片中的文字内容并进行批改。" });
             evalParts.push({ inlineData: { mimeType: 'image/jpeg', data: image } });
         }
+
         // Force structured markdown output for streaming parsing
         evalParts.push({ text: `请分析：1. 内容准确性 2. 表达/书写规范。
         必须严格按照以下格式输出(不要使用Markdown代码块包裹):

pages/AIAssistant.tsx

@@ -141,7 +141,7 @@ export const AIAssistant: React.FC = () => {
     // Assessment State
     const [assessmentMode, setAssessmentMode] = useState<'audio' | 'image'>('audio');
     const [assessmentTopic, setAssessmentTopic] = useState('请背诵《静夜思》并解释其含义。');
-    const [selectedImage, setSelectedImage] = useState<File | null>(null);
+    const [selectedImages, setSelectedImages] = useState<File[]>([]);
     
     // SEPARATED ASSESSMENT PROCESSING STATES
     const [isAssessmentRecording, setIsAssessmentRecording] = useState(false);
@@ -399,7 +399,7 @@ export const AIAssistant: React.FC = () => {
     };
 
     // --- STREAMING ASSESSMENT HANDLER ---
-    const handleAssessmentStreamingSubmit = async ({ audio, image }: { audio?: string, image?: string }) => {
+    const handleAssessmentStreamingSubmit = async ({ audio, images }: { audio?: string, images?: string[] }) => {
         // Reset State
         setAssessmentStatus('UPLOADING');
         setStreamedAssessment({ transcription: '', feedback: '', score: null, audio: undefined });
@@ -414,7 +414,7 @@ export const AIAssistant: React.FC = () => {
                     'x-user-role': currentUser?.role || '',
                     'x-school-id': currentUser?.schoolId || ''
                 },
-                body: JSON.stringify({ question: assessmentTopic, audio, image })
+                body: JSON.stringify({ question: assessmentTopic, audio, images })
             });
 
             if (!response.ok) throw new Error(response.statusText);
@@ -502,18 +502,23 @@ export const AIAssistant: React.FC = () => {
         }
     };
 
-    const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (e.target.files && e.target.files[0]) {
-            setSelectedImage(e.target.files[0]);
+    const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files && e.target.files.length > 0) {
+            setSelectedImages(prev => [...prev, ...Array.from(e.target.files!)]);
         }
     };
 
+    const removeImage = (index: number) => {
+        setSelectedImages(prev => prev.filter((_, i) => i !== index));
+    };
+
     const confirmImageSubmission = async () => {
-        if (!selectedImage) return;
+        if (selectedImages.length === 0) return;
         setAssessmentStatus('UPLOADING');
         try {
-            const base64 = await fileToBase64(selectedImage);
-            handleAssessmentStreamingSubmit({ image: base64 });
+            const base64Promises = selectedImages.map(file => fileToBase64(file));
+            const base64Images = await Promise.all(base64Promises);
+            handleAssessmentStreamingSubmit({ images: base64Images });
         } catch(e) {
             setAssessmentStatus('IDLE');
             setToast({ show: true, message: '图片上传失败', type: 'error' });
@@ -733,22 +738,55 @@ export const AIAssistant: React.FC = () => {
                                     </button>
                                 ) : (
                                     <div className="w-full">
-                                        {!selectedImage ? (
-                                            <div className="border-2 border-dashed border-purple-200 rounded-xl p-8 text-center hover:bg-purple-50 transition-colors cursor-pointer relative">
-                                                <input type="file" accept="image/*" className="absolute inset-0 opacity-0 cursor-pointer" onChange={handleImageUpload}/>
-                                                <ImageIcon className="mx-auto text-purple-300 mb-2" size={40}/>
-                                                <p className="text-purple-600 font-bold">点击上传作业图片</p>
-                                                <p className="text-xs text-gray-400">支持手写文字识别与批改</p>
-                                            </div>
-                                        ) : (
-                                            <div className="flex flex-col items-center gap-4">
-                                                <div className="relative"><img src={URL.createObjectURL(selectedImage)} className="h-40 rounded-lg shadow-sm border"/><button onClick={()=>setSelectedImage(null)} className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1"><X size={14}/></button></div>
-                                                <button onClick={confirmImageSubmission} disabled={assessmentStatus !== 'IDLE'} className="px-8 py-2 bg-purple-600 text-white rounded-lg font-bold hover:bg-purple-700 flex items-center gap-2">
-                                                    {assessmentStatus !== 'IDLE' ? <Loader2 className="animate-spin" size={16}/> : <CheckCircle size={16}/>}
-                                                    {assessmentStatus === 'UPLOADING' ? '上传中...' : assessmentStatus === 'ANALYZING' ? 'AI 正在分析...' : assessmentStatus === 'TTS' ? '生成语音...' : '开始批改'}
-                                                </button>
+                                        <div className="relative border-2 border-dashed border-purple-200 rounded-xl p-4 text-center hover:bg-purple-50 transition-colors cursor-pointer min-h-[160px] flex flex-col items-center justify-center">
+                                            <input 
+                                                type="file" 
+                                                accept="image/*" 
+                                                multiple
+                                                className="absolute inset-0 opacity-0 cursor-pointer w-full h-full z-10" 
+                                                onChange={handleImageUpload}
+                                                onClick={(e) => (e.currentTarget.value = '')}
+                                            />
+                                            {selectedImages.length === 0 ? (
+                                                <>
+                                                    <ImageIcon className="mx-auto text-purple-300 mb-2" size={40}/>
+                                                    <p className="text-purple-600 font-bold">点击上传作业图片</p>
+                                                    <p className="text-xs text-gray-400">支持批量上传 • 自动批改</p>
+                                                </>
+                                            ) : (
+                                                <div className="z-0 w-full pointer-events-none opacity-50 flex items-center justify-center">
+                                                    <Plus className="text-purple-300" size={40}/>
+                                                    <span className="text-purple-400 font-bold ml-2">继续添加图片</span>
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        {selectedImages.length > 0 && (
+                                            <div className="mt-4 grid grid-cols-3 sm:grid-cols-4 gap-3 animate-in fade-in">
+                                                {selectedImages.map((file, idx) => (
+                                                    <div key={idx} className="relative group aspect-square">
+                                                        <img src={URL.createObjectURL(file)} className="w-full h-full object-cover rounded-lg shadow-sm border border-gray-200" />
+                                                        <button 
+                                                            onClick={() => setSelectedImages(prev => prev.filter((_, i) => i !== idx))} 
+                                                            className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 shadow-md hover:bg-red-600 transition-colors z-20 scale-90 hover:scale-100"
+                                                        >
+                                                            <X size={14}/>
+                                                        </button>
+                                                    </div>
+                                                ))}
                                             </div>
                                         )}
+
+                                        {selectedImages.length > 0 && (
+                                            <button 
+                                                onClick={confirmImageSubmission} 
+                                                disabled={assessmentStatus !== 'IDLE'} 
+                                                className="mt-6 w-full px-8 py-3 bg-purple-600 text-white rounded-lg font-bold hover:bg-purple-700 flex items-center justify-center gap-2 shadow-md transition-all"
+                                            >
+                                                {assessmentStatus !== 'IDLE' ? <Loader2 className="animate-spin" size={18}/> : <CheckCircle size={18}/>}
+                                                {assessmentStatus === 'UPLOADING' ? '上传中...' : assessmentStatus === 'ANALYZING' ? 'AI 正在分析...' : assessmentStatus === 'TTS' ? '生成语音...' : `开始批改 (${selectedImages.length}张)`}
+                                            </button>
+                                        )}
                                     </div>
                                 )}
                             </div>