+
+ )}
+
+ {/* Input section */}
+
+
+
+ {error}
+ +
+
+
+ {/* Tabs */}
+
+ {/* Topic input */}
+
+
+ {/* Action buttons */}
+
+
+ setTopic(e.target.value)}
+ placeholder="输入你想辩论的话题，例如：人工智能对人类有益吗？"
+ className="w-full px-3 py-2 border border-gray-300 dark:border-dark-border bg-white dark:bg-slate-800 text-gray-900 dark:text-dark-text rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm placeholder-gray-400 dark:placeholder-gray-500 transition-colors"
+ onKeyDown={(e) => e.key === 'Enter' && handleGenerate()}
+ />
+
+
+ {/* Side selection */}
+
+
+
+
+ {/* Complexity selection */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Sample topics */}
+ {sampleTopics.length > 0 && (
+
+
+ )}
+ 💡 试试这些话题：
+
+ {sampleTopics.map((t) => (
+
+ ))}
+
+
+
+ );
+}
+
+export default App;
diff --git a/debate-hackathon/frontend/src/components/AnalysisPanel.jsx b/debate-hackathon/frontend/src/components/AnalysisPanel.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..e5bb5471ce05ef32864bcc1f7f3f4107e21984c4
--- /dev/null
+++ b/debate-hackathon/frontend/src/components/AnalysisPanel.jsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import Message from './Message';
+
+/**
+ * AnalysisPanel component for displaying debate analysis results
+ */
+const AnalysisPanel = ({ analysis, isLoading = false }) => {
+ if (isLoading) {
+ return (
+
+
+
+
+
+ {activeTab === 'generate' && (
+
+
+
+ {/* Footer */}
+
+
+ {isLoading ? (
+
+
+
+ ) : debateResult ? (
+
+
+
+
+
+
+
+ AI 正在思考并生成辩论论点...
+这可能需要几秒钟
+
+
+ )}
+
+ {activeTab === 'analyze' && (
+
+
+
+
+
+
+
+
+ {debateResult.side === 'pro' ? '👍 正方' : '👎 反方'}
+
+ 📋 辩论话题
+{debateResult.topic}
++ 📌 论点列表 + （共 {debateResult.arguments?.length || 0} 个论点） +
+ {debateResult.arguments?.map((arg, index) => ( +
+
+ ) : (
+
+
+ ))}
+
+ {debateResult.summary && (
+
+
+ {index + 1}
+
+
+ {arg.argument}
+ {arg.supporting_evidence && arg.supporting_evidence.length > 0 && ( +
+
+ )}
+ {arg.strength !== undefined && (
+ 📎 支持证据：
+-
+ {arg.supporting_evidence.map((evidence, i) => (
+
- {evidence} + ))} +
+
+
+ 论证强度
+ {Math.round(arg.strength * 100)}%
+
+
+
+ )}
+ = 0.7 ? 'bg-green-500' : arg.strength >= 0.4 ? 'bg-yellow-500' : 'bg-red-500'
+ }`}
+ style={{ width: `${Math.round(arg.strength * 100)}%` }}
+ />
+
+
+
+ )}
+ 📝 总结
+{debateResult.summary}
+
+
+ )}
+
+
+ 🎯
+ 输入话题开始辩论
+在上方输入话题，选择立场和深度，点击"生成辩论"
+💡 也可以点击示例话题快速开始
+
+
+ )}
+
+ {activeTab === 'image' && (
+
+ {
+ setImageAnalysisResult(result);
+ setError(null);
+ // 自动将识别出的文字内容填入话题输入框，并切换到辩论生成Tab
+ setTopic(result.analysis);
+ setActiveTab('generate');
+ }}
+ onError={(msg) => setError(msg)}
+ />
+ {imageAnalysisResult && (
+
+ )}
+
+ {activeTab === 'history' && (
+
+
+
+ 🖼️
+
+
+
+ AI 图片识别
+上传图片，AI 将自动识别并描述图片内容
+
+
+ )}
+
+
+
+ 📄
+ {imageAnalysisResult.filename}
+
+ ({(imageAnalysisResult.size / 1024).toFixed(1)} KB)
+
+
+
+
+ + 🤖 AI 识别结果 +
+
+ {imageAnalysisResult.analysis}
+
+
+
+ )}
+
+
+ );
+ }
+
+ if (!analysis) {
+ return (
+
+
+
+
+
+
+
+ AI 正在分析辩论话题...
+正在从正反双方角度进行分析
+
+
+ );
+ }
+
+ const confidencePercentage = Math.round((analysis.confidence_score || 0) * 100);
+
+ return (
+
+
+ 📊
+ 选择一个话题进行分析
+AI 将分析正反双方的论点并给出建议
+💡 在上方输入话题后点击"分析辩论"
+
+ {/* Topic header */}
+
+
+);
diff --git a/debate-hackathon/frontend/src/services/debateApi.js b/debate-hackathon/frontend/src/services/debateApi.js
new file mode 100644
index 0000000000000000000000000000000000000000..a4a6d63e1d9edf32ac7119421feedb0bd91b2a06
--- /dev/null
+++ b/debate-hackathon/frontend/src/services/debateApi.js
@@ -0,0 +1,199 @@
+/**
+ * Debate API service
+ * Handles all communication with the backend API and local history management
+ */
+
+import axios from 'axios';
+
+const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:8000';
+
+const api = axios.create({
+ baseURL: API_BASE_URL,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ timeout: 30000, // 30 seconds timeout for LLM requests
+});
+
+/**
+ * Health check
+ */
+export const healthCheck = async () => {
+ try {
+ const response = await api.get('/api/health');
+ return response.data;
+ } catch (error) {
+ console.error('Health check failed:', error);
+ throw error;
+ }
+};
+
+/**
+ * Generate debate arguments for a given topic and side
+ * @param {string} topic - The debate topic
+ * @param {string} side - "pro" or "con"
+ * @param {string} complexity - "easy", "medium", or "hard"
+ */
+export const generateDebate = async (topic, side, complexity = 'medium') => {
+ try {
+ const response = await api.post('/api/debate/generate', {
+ topic,
+ side,
+ complexity,
+ });
+ return response.data;
+ } catch (error) {
+ console.error('Failed to generate debate:', error);
+ throw error;
+ }
+};
+
+/**
+ * Analyze a debate topic from both sides
+ * @param {string} topic - The debate topic to analyze
+ */
+export const analyzeDebate = async (topic) => {
+ try {
+ const response = await api.post('/api/debate/analyze', {
+ topic,
+ side: 'pro', // side is required but not used for analysis
+ });
+ return response.data;
+ } catch (error) {
+ console.error('Failed to analyze debate:', error);
+ throw error;
+ }
+};
+
+/**
+ * Chat with AI debate assistant
+ * @param {string} message - User's message
+ * @param {Array} history - Optional chat history
+ */
+export const chatWithAI = async (message, history = []) => {
+ try {
+ const response = await api.post('/api/debate/chat', {
+ message,
+ history,
+ });
+ return response.data;
+ } catch (error) {
+ console.error('Chat failed:', error);
+ throw error;
+ }
+};
+
+/**
+ * Get sample debate topics
+ */
+export const getSampleTopics = async () => {
+ try {
+ const response = await api.get('/api/debate/topics');
+ return response.data;
+ } catch (error) {
+ console.error('Failed to get topics:', error);
+ throw error;
+ }
+};
+
+/**
+ * Analyze an image using AI vision
+ * @param {File} file - The image file to analyze
+ * @param {string} prompt - Optional custom prompt
+ */
+export const analyzeImage = async (file, prompt = '请详细描述这张图片的内容，包括其中的文字、物体、场景等') => {
+ try {
+ const formData = new FormData();
+ formData.append('file', file);
+ formData.append('prompt', prompt);
+
+ const response = await api.post('/api/debate/analyze-image', formData, {
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ },
+ timeout: 60000, // 60 seconds for image analysis
+ });
+ return response.data;
+ } catch (error) {
+ console.error('Failed to analyze image:', error);
+ throw error;
+ }
+};
+
+/**
+ * ========== History Management (localStorage) ==========
+ */
+
+const HISTORY_KEY = 'debateHistory';
+
+/**
+ * Generate a unique ID for history items
+ */
+const generateId = () => {
+ return Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
+};
+
+/**
+ * Get all history items from localStorage
+ */
+export const getHistory = () => {
+ try {
+ const saved = localStorage.getItem(HISTORY_KEY);
+ return saved ? JSON.parse(saved) : [];
+ } catch (e) {
+ console.error('Failed to load history:', e);
+ return [];
+ }
+};
+
+/**
+ * Save a history item to localStorage
+ * @param {Object} item - The history item to save
+ */
+export const saveHistoryItem = (item) => {
+ try {
+ const history = getHistory();
+ const newItem = {
+ id: generateId(),
+ timestamp: Date.now(),
+ ...item,
+ };
+ history.push(newItem);
+ localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
+ return newItem;
+ } catch (e) {
+ console.error('Failed to save history:', e);
+ return null;
+ }
+};
+
+/**
+ * Delete a history item by id
+ * @param {string} id - The id of the item to delete
+ */
+export const deleteHistoryItem = (id) => {
+ try {
+ const history = getHistory();
+ const filtered = history.filter(item => item.id !== id);
+ localStorage.setItem(HISTORY_KEY, JSON.stringify(filtered));
+ return filtered;
+ } catch (e) {
+ console.error('Failed to delete history item:', e);
+ return [];
+ }
+};
+
+/**
+ * Clear all history
+ */
+export const clearHistory = () => {
+ try {
+ localStorage.removeItem(HISTORY_KEY);
+ return [];
+ } catch (e) {
+ console.error('Failed to clear history:', e);
+ return [];
+ }
+};
+
+export default api;
diff --git a/debate-hackathon/frontend/tailwind.config.js b/debate-hackathon/frontend/tailwind.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..d6c72a9c7c9400e0e05e2f9c9810488867974cb2
--- /dev/null
+++ b/debate-hackathon/frontend/tailwind.config.js
@@ -0,0 +1,39 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ darkMode: 'class',
+ content: [
+ "./src/**/*.{js,jsx,ts,tsx}",
+ "./public/index.html"
+ ],
+ theme: {
+ extend: {
+ colors: {
+ primary: {
+ 50: '#eff6ff',
+ 100: '#dbeafe',
+ 200: '#bfdbfe',
+ 300: '#93c5fd',
+ 400: '#60a5fa',
+ 500: '#3b82f6',
+ 600: '#2563eb',
+ 700: '#1d4ed8',
+ 800: '#1e40af',
+ 900: '#1e3a8a',
+ },
+ debate: {
+ pro: '#10b981',
+ con: '#ef4444',
+ neutral: '#6b7280',
+ },
+ dark: {
+ bg: '#0f172a',
+ card: '#1e293b',
+ border: '#334155',
+ text: '#e2e8f0',
+ muted: '#94a3b8',
+ }
+ }
+ },
+ },
+ plugins: [],
+}
diff --git a/image-1.png b/image-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..b1c8f40772bf9d0774f6007cbc09cd81449afe18
Binary files /dev/null and b/image-1.png differ
diff --git a/image-2.png b/image-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..835a0db94d04cd1b996d5c7ac1a6637ab1830609
Binary files /dev/null and b/image-2.png differ
diff --git a/image-3.png b/image-3.png
new file mode 100644
index 0000000000000000000000000000000000000000..4621b81e4db81991b6aff9675ca1ab31ef1a8d87
Binary files /dev/null and b/image-3.png differ
diff --git a/image-4.png b/image-4.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3dcff9d371a28ec22093ff5b8ca9ce829f0a007
Binary files /dev/null and b/image-4.png differ
diff --git a/image.png b/image.png
new file mode 100644
index 0000000000000000000000000000000000000000..43a52746040c977b00dc548e0088020fccbd8523
Binary files /dev/null and b/image.png differ
+
+
+ {/* Pro arguments */}
+ {analysis.pro_arguments && analysis.pro_arguments.length > 0 && (
+ 📋 分析话题
+{analysis.topic}
+
+
+ )}
+
+ {/* Con arguments */}
+ {analysis.con_arguments && analysis.con_arguments.length > 0 && (
+ + + 正方论点（{analysis.pro_arguments.length} 个） +
+ {analysis.pro_arguments.map((arg, index) => ( +
+
+ )}
+
+ {/* Analysis */}
+ {analysis.analysis && (
+ + + 反方论点（{analysis.con_arguments.length} 个） +
+ {analysis.con_arguments.map((arg, index) => ( +
+
+ )}
+
+ {/* Recommendation */}
+ {analysis.recommendation && (
+ 📊 综合分析
+{analysis.analysis}
+
+
+ )}
+
+ {/* Confidence score */}
+ 💡 建议立场
+{analysis.recommendation}
+
+
+ );
+};
+
+export default AnalysisPanel;
diff --git a/debate-hackathon/frontend/src/components/ChatBox.jsx b/debate-hackathon/frontend/src/components/ChatBox.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..8d07f50c5ff0a705fa8ce482814e98d20dc4e53f
--- /dev/null
+++ b/debate-hackathon/frontend/src/components/ChatBox.jsx
@@ -0,0 +1,183 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Message from './Message';
+
+/**
+ * ChatBox component for interactive debate chat
+ */
+const ChatBox = ({ onSendMessage, messages = [], isLoading = false }) => {
+ const [input, setInput] = useState('');
+ const messagesEndRef = useRef(null);
+
+ const scrollToBottom = () => {
+ messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+ };
+
+ useEffect(() => {
+ scrollToBottom();
+ }, [messages]);
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ if (input.trim() && !isLoading) {
+ onSendMessage(input.trim());
+ setInput('');
+ }
+ };
+
+ const handleKeyDown = (e) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ handleSubmit(e);
+ }
+ };
+
+ return (
+
+ 分析置信度
+ {confidencePercentage}%
+
+
+
+ = 70
+ ? 'bg-green-500'
+ : confidencePercentage >= 40
+ ? 'bg-yellow-500'
+ : 'bg-red-500'
+ }`}
+ style={{ width: `${confidencePercentage}%` }}
+ />
+
+
+ {/* Chat header */}
+
+ );
+};
+
+export default ChatBox;
diff --git a/debate-hackathon/frontend/src/components/HistoryPanel.jsx b/debate-hackathon/frontend/src/components/HistoryPanel.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..e185803dfd48a9a52043c2b4f401595a59be5e66
--- /dev/null
+++ b/debate-hackathon/frontend/src/components/HistoryPanel.jsx
@@ -0,0 +1,244 @@
+import React, { useState, useEffect } from 'react';
+
+/**
+ * HistoryPanel component for viewing debate history
+ */
+const HistoryPanel = ({ onRestore, onClear }) => {
+ const [history, setHistory] = useState([]);
+ const [filter, setFilter] = useState('all'); // 'all', 'generate', 'analyze', 'chat'
+ const [searchTerm, setSearchTerm] = useState('');
+
+ // Load history from localStorage
+ useEffect(() => {
+ loadHistory();
+ }, []);
+
+ const loadHistory = () => {
+ try {
+ const saved = localStorage.getItem('debateHistory');
+ if (saved) {
+ setHistory(JSON.parse(saved));
+ }
+ } catch (e) {
+ console.error('Failed to load history:', e);
+ }
+ };
+
+ // Listen for storage changes from other tabs
+ useEffect(() => {
+ const handleStorageChange = (e) => {
+ if (e.key === 'debateHistory') {
+ loadHistory();
+ }
+ };
+ window.addEventListener('storage', handleStorageChange);
+ return () => window.removeEventListener('storage', handleStorageChange);
+ }, []);
+
+ const handleClearAll = () => {
+ if (window.confirm('确定要清除所有讨论历史吗？此操作不可恢复。')) {
+ localStorage.removeItem('debateHistory');
+ setHistory([]);
+ if (onClear) onClear();
+ }
+ };
+
+ const handleDeleteItem = (id) => {
+ const newHistory = history.filter(item => item.id !== id);
+ localStorage.setItem('debateHistory', JSON.stringify(newHistory));
+ setHistory(newHistory);
+ };
+
+ const getTypeIcon = (type) => {
+ switch (type) {
+ case 'generate': return '📝';
+ case 'analyze': return '📊';
+ case 'chat': return '💬';
+ default: return '📌';
+ }
+ };
+
+ const getTypeLabel = (type) => {
+ switch (type) {
+ case 'generate': return '辩论生成';
+ case 'analyze': return '辩论分析';
+ case 'chat': return 'AI 对话';
+ default: return '未知';
+ }
+ };
+
+ const getTypeColor = (type) => {
+ switch (type) {
+ case 'generate': return 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300';
+ case 'analyze': return 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300';
+ case 'chat': return 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300';
+ default: return 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300';
+ }
+ };
+
+ const formatTime = (timestamp) => {
+ const date = new Date(timestamp);
+ const now = new Date();
+ const diff = now - date;
+
+ if (diff < 60000) return '刚刚';
+ if (diff < 3600000) return `${Math.floor(diff / 60000)} 分钟前`;
+ if (diff < 86400000) return `${Math.floor(diff / 3600000)} 小时前`;
+ if (diff < 604800000) return `${Math.floor(diff / 86400000)} 天前`;
+
+ return date.toLocaleDateString('zh-CN', {
+ month: 'short',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+ };
+
+ const getPreview = (item) => {
+ switch (item.type) {
+ case 'generate':
+ return `立场: ${item.side === 'pro' ? '正方' : '反方'} | 深度: ${item.complexity === 'easy' ? '简单' : item.complexity === 'medium' ? '中等' : '深入'}`;
+ case 'analyze':
+ return '正反双方分析';
+ case 'chat':
+ const msgCount = item.messageCount || 0;
+ return `${msgCount} 条消息`;
+ default:
+ return '';
+ }
+ };
+
+ // Filter and search
+ const filteredHistory = history.filter(item => {
+ if (filter !== 'all' && item.type !== filter) return false;
+ if (searchTerm && !item.topic.toLowerCase().includes(searchTerm.toLowerCase())) return false;
+ return true;
+ }).sort((a, b) => b.timestamp - a.timestamp);
+
+ return (
+
+
+
+ {/* Messages area */}
+
+
+
+
+
+
+
+ AI 辩论助手
+随时为你解答辩论相关问题
+
+ {messages.length === 0 ? (
+
+
+ {/* Input area */}
+
+
+ ) : (
+ messages.map((msg, index) => (
+
+
+ 💬
+ 开始对话吧！
+输入你的论点或问题，AI 将与你进行辩论
+
+
+
+
+
+
+ {msg.type === 'ai' && (
+
+ ))
+ )}
+
+ {/* Loading indicator */}
+ {isLoading && (
+
+
+ )}
+
+
+
+
+
+ {msg.type === 'user' && (
+
+
+ )}
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Header */}
+
+ );
+};
+
+export default HistoryPanel;
diff --git a/debate-hackathon/frontend/src/components/ImageUploader.jsx b/debate-hackathon/frontend/src/components/ImageUploader.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..d630ddbac7b2d274e66f79e77796fbd7859264f4
--- /dev/null
+++ b/debate-hackathon/frontend/src/components/ImageUploader.jsx
@@ -0,0 +1,190 @@
+import React, { useState, useRef } from 'react';
+import { analyzeImage } from '../services/debateApi';
+
+/**
+ * ImageUploader component for uploading and analyzing images
+ */
+const ImageUploader = ({ onAnalysisResult, onError }) => {
+ const [selectedFile, setSelectedFile] = useState(null);
+ const [preview, setPreview] = useState(null);
+ const [isAnalyzing, setIsAnalyzing] = useState(false);
+ const [dragOver, setDragOver] = useState(false);
+ const [customPrompt, setCustomPrompt] = useState('');
+ const fileInputRef = useRef(null);
+
+ const handleFileSelect = (file) => {
+ if (!file) return;
+
+ // Validate file type
+ const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+ if (!allowedTypes.includes(file.type)) {
+ if (onError) onError('不支持的文件格式，请上传 JPG、PNG、GIF 或 WebP 格式的图片');
+ return;
+ }
+
+ // Validate file size (10MB)
+ if (file.size > 10 * 1024 * 1024) {
+ if (onError) onError('图片太大，请上传小于 10MB 的图片');
+ return;
+ }
+
+ setSelectedFile(file);
+
+ // Create preview
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ setPreview(e.target.result);
+ };
+ reader.readAsDataURL(file);
+ };
+
+ const handleInputChange = (e) => {
+ handleFileSelect(e.target.files[0]);
+ };
+
+ const handleDrop = (e) => {
+ e.preventDefault();
+ setDragOver(false);
+ const file = e.dataTransfer.files[0];
+ handleFileSelect(file);
+ };
+
+ const handleDragOver = (e) => {
+ e.preventDefault();
+ setDragOver(true);
+ };
+
+ const handleDragLeave = () => {
+ setDragOver(false);
+ };
+
+ const handleAnalyze = async () => {
+ if (!selectedFile) return;
+
+ setIsAnalyzing(true);
+ try {
+ const prompt = customPrompt.trim() || '请详细描述这张图片的内容，包括其中的文字、物体、场景等';
+ const result = await analyzeImage(selectedFile, prompt);
+ if (onAnalysisResult) onAnalysisResult(result);
+ } catch (err) {
+ if (onError) onError(err.response?.data?.detail || '图片分析失败，请检查API配置');
+ } finally {
+ setIsAnalyzing(false);
+ }
+ };
+
+ const handleReset = () => {
+ setSelectedFile(null);
+ setPreview(null);
+ setCustomPrompt('');
+ if (fileInputRef.current) {
+ fileInputRef.current.value = '';
+ }
+ };
+
+ return (
+
+
+
+ {/* Search and filter */}
+
+
+
+
+ {history.length > 0 && (
+
+ )}
+
+
+
+
+
+ 讨论历史
+共 {history.length} 条记录
+
+
+
+ {/* History list */}
+
+
+
+
+ setSearchTerm(e.target.value)}
+ placeholder="搜索话题..."
+ className="w-full pl-8 pr-3 py-1.5 text-xs border border-gray-200 dark:border-dark-border bg-white dark:bg-slate-800 text-gray-900 dark:text-dark-text rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent placeholder-gray-400 dark:placeholder-gray-500"
+ />
+
+
+ {[
+ { key: 'all', label: '全部' },
+ { key: 'generate', label: '📝 辩论' },
+ { key: 'analyze', label: '📊 分析' },
+ { key: 'chat', label: '💬 对话' },
+ ].map(({ key, label }) => (
+
+ ))}
+
+
+ {filteredHistory.length === 0 ? (
+
+
+
+ ) : (
+ filteredHistory.map((item) => (
+
+
+ 📋
+ + {searchTerm ? '没有找到匹配的记录' : '暂无讨论历史'} +
++ {searchTerm ? '试试其他关键词' : '生成辩论或进行对话后，记录将显示在这里'} +
+ onRestore && onRestore(item)}
+ >
+
+ ))
+ )}
+
+
+
+
+
+
+
+ {getTypeIcon(item.type)} {getTypeLabel(item.type)}
+
+
+ {formatTime(item.timestamp)}
+
+
+ + {item.topic} +
++ {getPreview(item)} +
+
+ {!preview ? (
+ /* Upload area */
+
+ );
+};
+
+export default ImageUploader;
diff --git a/debate-hackathon/frontend/src/components/Message.jsx b/debate-hackathon/frontend/src/components/Message.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..1aecac96c74bfa513372600dc372519b978cb906
--- /dev/null
+++ b/debate-hackathon/frontend/src/components/Message.jsx
@@ -0,0 +1,129 @@
+import React from 'react';
+
+/**
+ * Message component for displaying debate arguments and chat messages
+ */
+const Message = ({ message, type = 'argument', side = 'neutral' }) => {
+ const getTypeStyles = () => {
+ switch (type) {
+ case 'user':
+ return 'bg-blue-500 text-white rounded-2xl rounded-br-sm';
+ case 'ai':
+ return 'bg-white dark:bg-slate-800 border border-gray-200 dark:border-dark-border rounded-2xl rounded-bl-sm shadow-sm';
+ case 'argument':
+ return side === 'pro'
+ ? 'bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl'
+ : side === 'con'
+ ? 'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl'
+ : 'bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-dark-border rounded-xl';
+ case 'summary':
+ return 'bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-900/20 dark:to-purple-900/20 border border-indigo-200 dark:border-indigo-800 rounded-xl';
+ case 'analysis':
+ return 'bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-xl';
+ default:
+ return 'bg-white dark:bg-slate-800 border border-gray-200 dark:border-dark-border rounded-xl';
+ }
+ };
+
+ const getSideLabel = () => {
+ switch (side) {
+ case 'pro':
+ return (
+
+ 👍 正方
+
+ );
+ case 'con':
+ return (
+
+ 👎 反方
+
+ );
+ default:
+ return null;
+ }
+ };
+
+ const getStrengthBar = (strength) => {
+ if (strength === undefined || strength === null) return null;
+
+ const percentage = Math.round(strength * 100);
+ const color = percentage >= 70
+ ? 'bg-green-500'
+ : percentage >= 40
+ ? 'bg-yellow-500'
+ : 'bg-red-500';
+
+ return (
+ fileInputRef.current?.click()}
+ className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all ${
+ dragOver
+ ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+ : 'border-gray-300 dark:border-dark-border hover:border-blue-400 dark:hover:border-blue-500 bg-gray-50 dark:bg-slate-800/50'
+ }`}
+ >
+
+
+ ) : (
+ /* Preview area */
+
+
+
+ + 点击或拖拽图片到此处 +
++ 支持 JPG、PNG、GIF、WebP 格式，最大 10MB +
+
+ {/* Image preview */}
+
+ )}
+
+ 
+
+
+
+ {/* Custom prompt */}
+
+ {selectedFile?.name}
+
+
+
+ setCustomPrompt(e.target.value)}
+ placeholder="例如：请提取图片中的文字内容"
+ className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-dark-border bg-white dark:bg-slate-800 text-gray-900 dark:text-dark-text rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-gray-400 dark:placeholder-gray-500"
+ />
+
+
+ {/* Action buttons */}
+
+
+
+
+
+
+ );
+ };
+
+ const content = message.argument || message.text || message;
+
+ // For chat messages (user/ai), render as simple text
+ if (type === 'user' || type === 'ai') {
+ return (
+
+ 论证强度
+ {percentage}%
+
+
+
+
+
+
+ );
+ }
+
+ // For argument/analysis/summary types, render with full details
+ return (
+
+ {content}
+
+
+
+ );
+};
+
+export default Message;
diff --git a/debate-hackathon/frontend/src/index.css b/debate-hackathon/frontend/src/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..17d8d5ecd41143ad1cef6bad4444bb5035921031
--- /dev/null
+++ b/debate-hackathon/frontend/src/index.css
@@ -0,0 +1,122 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
+
+/* Custom scrollbar styles */
+::-webkit-scrollbar {
+ width: 6px;
+}
+
+::-webkit-scrollbar-track {
+ background: #f1f1f1;
+ border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #888;
+ border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #555;
+}
+
+/* Animation for loading dots */
+@keyframes dot-pulse {
+ 0%, 80%, 100% {
+ transform: scale(0);
+ }
+ 40% {
+ transform: scale(1);
+ }
+}
+
+.loading-dot {
+ animation: dot-pulse 1.4s infinite ease-in-out both;
+}
+
+.loading-dot:nth-child(1) {
+ animation-delay: -0.32s;
+}
+
+.loading-dot:nth-child(2) {
+ animation-delay: -0.16s;
+}
+
+.loading-dot:nth-child(3) {
+ animation-delay: 0s;
+}
+
+/* Fade in animation */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.fade-in {
+ animation: fadeIn 0.3s ease-out;
+}
+
+/* Slide down animation for error messages */
+@keyframes slideDown {
+ from {
+ opacity: 0;
+ transform: translateY(-20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.animate-slide-down {
+ animation: slideDown 0.3s ease-out;
+}
+
+/* Spin animation for loading */
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.animate-spin {
+ animation: spin 1s linear infinite;
+}
+
+/* Pulse animation for API status */
+@keyframes pulse {
+ 0%, 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.5;
+ }
+}
+
+.animate-pulse {
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
diff --git a/debate-hackathon/frontend/src/index.js b/debate-hackathon/frontend/src/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..2cb1087e76eb7b33e49ace3622c9e108cd1ed64c
--- /dev/null
+++ b/debate-hackathon/frontend/src/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+
+
+
+
+ {getSideLabel()}
+ {type === 'summary' && (
+
+ 📝 总结
+
+ )}
+ {type === 'analysis' && (
+
+ 📊 分析
+
+ )}
+
+
+ {content}
+
+
+ {message.supporting_evidence && message.supporting_evidence.length > 0 && (
+
+
+ )}
+
+ {getStrengthBar(message.strength)}
+ 📎 支持证据：
+-
+ {message.supporting_evidence.map((evidence, index) => (
+
- + {evidence} + + ))} +