From a866b45b1551bc9d073f7960fed96594d09939ff Mon Sep 17 00:00:00 2001 From: shen-baise Date: Fri, 26 Sep 2025 09:23:22 +0800 Subject: [PATCH] feat: Add Chinese language option to frontend --- frontend/index.html | 278 ++++++++++++++++++++++++++++++++++++-------- 1 file changed, 232 insertions(+), 46 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index d7adf9c4..8dafa06f 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -85,6 +85,42 @@ overflow: hidden; } + .language-switcher { + position: absolute; + top: 20px; + right: 30px; + display: flex; + gap: 8px; + z-index: 10; + } + + .lang-btn { + padding: 8px 16px; + border: 2px solid rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.8); + border-radius: 20px; + cursor: pointer; + font-weight: 600; + font-size: 14px; + transition: all 0.3s ease; + backdrop-filter: blur(10px); + } + + .lang-btn:hover { + background: rgba(255, 255, 255, 0.2); + color: rgba(255, 255, 255, 0.95); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + } + + .lang-btn.active { + background: linear-gradient(135deg, #6b73ff 0%, #9bb5ff 100%); + color: white; + border-color: rgba(255, 255, 255, 0.5); + box-shadow: 0 4px 15px rgba(107, 115, 255, 0.4); + } + .header::before { content: ''; position: absolute; @@ -960,54 +996,58 @@
+
+ + +
Youtu-GraphRAG Logo
-
✨ Vertically Unified Agents for Graph Retrieval-Augmented Complex Reasoning ✨
+
✨ 图检索增强复杂推理的垂直统一智能体 ✨
-
📊 Dashboard
-
📤 Data Upload
-
🕸️ Graph Visualization
-
🤖 Q&A Interface
+
📊 仪表板
+
📤 数据上传
+
🕸️ 图可视化
+
🤖 问答界面
-

System Overview

+

系统概览

0
-
Datasets
+
数据集
0
-
Constructed Graphs
+
已构建图
0
-
Questions Asked
+
已提问题
- Connected + 已连接
-
System Status
+
系统状态
-

Quick Actions

+

快速操作

- - - - + + + +
@@ -1015,25 +1055,25 @@

Quick Actions

-

Upload Documents

+

上传文档

📁
-

Drag & Drop Files Here

-

or click to browse files

-

- Currently supports: .json +

拖拽文件到此处

+

或点击浏览文件

+

+ 当前支持格式：.json

-
📄 Sample Format (.json):
- 
+                        
📄 示例格式 (.json)：

+                        
   [
     {
-      "title": "Sample doc1",
-      "text": "This is a sample document content..."
+      "title": "示例文档1",
+      "text": "这是示例文档内容..."
     },
     {
-      "title": "Sample doc2",
-      "text": "This is a sample document content..."
+      "title": "示例文档2", 
+      "text": "这是示例文档内容..."
     }
   ]
 

@@ -1044,20 +1084,20 @@ 
Drag & Drop Files Here

                 
                 
                 

-                    
-                    
+                    
+
-

Available Datasets

+

可用数据集

@@ -1065,11 +1105,11 @@

Available Datasets

-

Knowledge Tree Visualization

+

知识树可视化

- +
@@ -1079,34 +1119,30 @@

Knowledge Tree Visualization

-

Query Panel

+

查询面板

- +
- - - + +
- +
-
Processing your question...
+
正在处理您的问题...
@@ -1123,10 +1159,159 @@

Answer:

let graphChart = null; // let queryChart = null; let questionCount = 0; + let currentLanguage = 'zh'; // 默认中文 // API base URL const API_BASE = ''; + // 国际化文本 + const i18nTexts = { + zh: { + subtitle: "✨ 图检索增强复杂推理的垂直统一智能体 ✨", + tab_dashboard: "📊 仪表板", + tab_upload: "📤 数据上传", + tab_graph: "🕸️ 图可视化", + tab_qa: "🤖 问答界面", + system_overview: "系统概览", + datasets: "数据集", + constructed_graphs: "已构建图", + questions_asked: "已提问题", + connected: "已连接", + system_status: "系统状态", + quick_actions: "快速操作", + upload_documents: "📤 上传文档", + view_graph: "🕸️ 查看图", + query: "🤖 查询", + refresh: "🔄 刷新", + upload_documents_title: "上传文档", + drag_drop_files: "拖拽文件到此处", + or_click_browse: "或点击浏览文件", + supported_formats: "当前支持格式：.json", + upload_files: "上传文件", + clear: "清除", + uploading: "上传中...", + available_datasets: "可用数据集", + knowledge_tree_visualization: "知识树可视化", + dataset_label: "数据集：", + select_dataset: "选择数据集...", + query_panel: "查询面板", + query_label: "查询：", + enter_question: "在此输入您的问题...", + ask_question: "提问", + processing_question: "正在处理您的问题...", + answer: "答案：", + sample_format: "📄 示例格式 (.json)：" + }, + en: { + subtitle: "✨ Vertically Unified Agents for Graph Retrieval-Augmented Complex Reasoning ✨", + tab_dashboard: "📊 Dashboard", + tab_upload: "📤 Data Upload", + tab_graph: "🕸️ Graph Visualization", + tab_qa: "🤖 Q&A Interface", + system_overview: "System Overview", + datasets: "Datasets", + constructed_graphs: "Constructed Graphs", + questions_asked: "Questions Asked", + connected: "Connected", + system_status: "System Status", + quick_actions: "Quick Actions", + upload_documents: "📤 Upload Documents", + view_graph: "🕸️ View Graph", + query: "🤖 Query", + refresh: "🔄 Refresh", + upload_documents_title: "Upload Documents", + drag_drop_files: "Drag & Drop Files Here", + or_click_browse: "or click to browse files", + supported_formats: "Currently supports: .json", + upload_files: "Upload Files", + clear: "Clear", + uploading: "Uploading...", + available_datasets: "Available Datasets", + knowledge_tree_visualization: "Knowledge Tree Visualization", + dataset_label: "Dataset:", + select_dataset: "Select a dataset...", + query_panel: "Query Panel", + query_label: "Query:", + enter_question: "Enter your question here...", + ask_question: "Ask Question", + processing_question: "Processing your question...", + answer: "Answer:", + sample_format: "📄 Sample Format (.json):" + } + }; + + // 语言切换函数 + function switchLanguage(lang) { + currentLanguage = lang; + + // 更新按钮状态 + document.querySelectorAll('.lang-btn').forEach(btn => btn.classList.remove('active')); + document.getElementById(`lang-${lang}`).classList.add('active'); + + // 更新所有带有 data-i18n 属性的元素 + document.querySelectorAll('[data-i18n]').forEach(element => { + const key = element.getAttribute('data-i18n'); + if (i18nTexts[lang] && i18nTexts[lang][key]) { + element.textContent = i18nTexts[lang][key]; + } + }); + + // 更新 placeholder 文本 + document.querySelectorAll('[data-i18n-placeholder]').forEach(element => { + const key = element.getAttribute('data-i18n-placeholder'); + if (i18nTexts[lang] && i18nTexts[lang][key]) { + element.placeholder = i18nTexts[lang][key]; + } + }); + + // 更新示例格式内容 + const sampleFormatContent = document.getElementById('sample-format-content'); + if (sampleFormatContent) { + if (lang === 'zh') { + sampleFormatContent.textContent = ` [ + { + "title": "示例文档1", + "text": "这是示例文档内容..." + }, + { + "title": "示例文档2", + "text": "这是示例文档内容..." + } + ]`; + } else { + sampleFormatContent.textContent = ` [ + { + "title": "Sample doc1", + "text": "This is a sample document content..." + }, + { + "title": "Sample doc2", + "text": "This is a sample document content..." + } + ]`; + } + } + + // 更新问题输入框的默认内容 + const questionInput = document.getElementById('questionInput'); + if (questionInput) { + if (lang === 'zh') { + questionInput.value = "梅西在国王杯的进球数与谁相比较的那个人是什么时候被巴塞罗那签约的？"; + } else { + questionInput.value = "When was the person who Messi's goals in Copa del Rey compared to get signed by Barcelona?"; + } + } + + // 保存语言设置到本地存储 + localStorage.setItem('language', lang); + } + + // 初始化语言设置 + function initializeLanguage() { + const savedLang = localStorage.getItem('language') || 'zh'; + switchLanguage(savedLang); + } + // Initialize the app document.addEventListener('DOMContentLoaded', function() { initializeApp(); @@ -1134,6 +1319,7 @@

Answer:

}); function initializeApp() { + initializeLanguage(); refreshData(); console.log('Youtu-GraphRAG initialized'); }