优化结果

2025-09-15 19:08:47 +08:00
parent 72084a8782
commit dcfa89e63c
357 changed files with 16156 additions and 1589 deletions
--- a/InfoGenie-frontend/public/aimodelapp/AI语言翻译助手/index.html
+++ b/InfoGenie-frontend/public/aimodelapp/AI语言翻译助手/index.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AI语言翻译助手</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1 class="title">AI语言翻译助手</h1>
+      <p class="subtitle">智能翻译，信达雅兼备</p>
+    </div>
+
+    <div class="form-section">
+      <div class="form-group">
+        <label class="form-label" for="sourceText">请输入要翻译的内容：</label>
+        <textarea 
+          id="sourceText" 
+          class="form-input textarea" 
+          placeholder="请输入单词、短语或句子，系统将自动检测语言..."
+        >Hello, how are you today?</textarea>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label" for="targetLanguage">目标语言：</label>
+        <select id="targetLanguage" class="form-input select">
+          <option value="zh-CN">中文（简体）</option>
+          <option value="zh-TW">中文（繁体）</option>
+          <option value="en">英语</option>
+          <option value="ja">日语</option>
+          <option value="ko">韩语</option>
+          <option value="fr">法语</option>
+          <option value="de">德语</option>
+          <option value="es">西班牙语</option>
+          <option value="it">意大利语</option>
+          <option value="pt">葡萄牙语</option>
+          <option value="ru">俄语</option>
+          <option value="ar">阿拉伯语</option>
+          <option value="hi">印地语</option>
+          <option value="th">泰语</option>
+          <option value="vi">越南语</option>
+        </select>
+      </div>
+
+      <button id="translateBtn" class="btn">开始翻译</button>
+    </div>
+
+    <div class="result-section">
+      <h3 class="result-title">翻译结果</h3>
+      <div id="loading" class="loading">正在翻译中，请稍候...</div>
+      <div id="translationResult" class="translation-container">
+        <div class="placeholder">点击"开始翻译"按钮，AI将为您提供高质量的翻译结果</div>
+      </div>
+    </div>
+  </div>
+
+  <script src="env.js"></script>
+  <script src="script.js"></script>
+</body>
+</html>
--- a/InfoGenie-frontend/public/aimodelapp/AI语言翻译助手/script.js
+++ b/InfoGenie-frontend/public/aimodelapp/AI语言翻译助手/script.js
@@ -0,0 +1,239 @@
+// 从配置文件导入设置
+// 配置在 env.js 文件中定义
+
+// DOM 元素
+const sourceTextInput = document.getElementById('sourceText');
+const targetLanguageSelect = document.getElementById('targetLanguage');
+const translateBtn = document.getElementById('translateBtn');
+const loadingDiv = document.getElementById('loading');
+const translationResultContainer = document.getElementById('translationResult');
+
+// 调用后端API
+async function callBackendAPI(sourceText, targetLanguage) {
+    try {
+        const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/translation', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                source_text: sourceText,
+                target_language: targetLanguage
+            })
+        });
+
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(errorData.error || `API请求失败: ${response.status} ${response.statusText}`);
+        }
+
+        const data = await response.json();
+        if (data.success) {
+            return data.translation_result;
+        } else {
+            throw new Error(data.error || 'API响应格式异常');
+        }
+    } catch (error) {
+        console.error('API调用错误:', error);
+        throw error;
+    }
+}
+
+// 解析AI响应
+function parseAIResponse(response) {
+    try {
+        // 尝试直接解析JSON
+        const parsed = JSON.parse(response);
+        return parsed;
+    } catch (error) {
+        // 如果直接解析失败，尝试提取JSON部分
+        const jsonMatch = response.match(/\{[\s\S]*\}/);
+        if (jsonMatch) {
+            try {
+                const parsed = JSON.parse(jsonMatch[0]);
+                return parsed;
+            } catch (e) {
+                console.error('JSON解析失败:', e);
+            }
+        }
+        
+        // 如果JSON解析失败，返回空对象
+        console.error('无法解析AI响应:', response);
+        return {};
+    }
+}
+
+// 显示翻译结果
+function displayTranslationResult(result) {
+    translationResultContainer.innerHTML = '';
+    
+    if (!result || !result.translation) {
+        translationResultContainer.innerHTML = '<div class="placeholder">翻译失败，请尝试重新翻译</div>';
+        return;
+    }
+    
+    // 创建结果容器
+    const resultDiv = document.createElement('div');
+    resultDiv.className = 'translation-result';
+    
+    // 检测到的源语言
+    if (result.detected_language) {
+        const detectedLangDiv = document.createElement('div');
+        detectedLangDiv.className = 'detected-language';
+        detectedLangDiv.innerHTML = `<span class="label">检测到的语言：</span><span class="value">${result.detected_language}</span>`;
+        resultDiv.appendChild(detectedLangDiv);
+    }
+    
+    // 主要翻译结果
+    const mainTranslationDiv = document.createElement('div');
+    mainTranslationDiv.className = 'main-translation';
+    mainTranslationDiv.innerHTML = `
+        <div class="translation-header">
+            <span class="label">翻译结果：</span>
+            <button class="copy-btn" onclick="copyToClipboard('${result.translation.replace(/'/g, "\\'")}')">复制</button>
+        </div>
+        <div class="translation-text">${result.translation}</div>
+    `;
+    resultDiv.appendChild(mainTranslationDiv);
+    
+    // 发音指导
+    if (result.pronunciation) {
+        const pronunciationDiv = document.createElement('div');
+        pronunciationDiv.className = 'pronunciation';
+        pronunciationDiv.innerHTML = `<span class="label">发音：</span><span class="value">${result.pronunciation}</span>`;
+        resultDiv.appendChild(pronunciationDiv);
+    }
+    
+    // 备选翻译
+    if (result.alternative_translations && result.alternative_translations.length > 0) {
+        const alternativesDiv = document.createElement('div');
+        alternativesDiv.className = 'alternatives';
+        alternativesDiv.innerHTML = '<div class="alternatives-title">备选翻译：</div>';
+        
+        result.alternative_translations.forEach((alt, index) => {
+            if (alt && alt.trim()) {
+                const altDiv = document.createElement('div');
+                altDiv.className = 'alternative-item';
+                altDiv.innerHTML = `
+                    <span class="alternative-text">${alt}</span>
+                    <button class="copy-btn-small" onclick="copyToClipboard('${alt.replace(/'/g, "\\'")}')">复制</button>
+                `;
+                alternativesDiv.appendChild(altDiv);
+            }
+        });
+        
+        resultDiv.appendChild(alternativesDiv);
+    }
+    
+    // 翻译说明
+    if (result.explanation) {
+        const explanationDiv = document.createElement('div');
+        explanationDiv.className = 'explanation';
+        explanationDiv.innerHTML = `<span class="label">翻译说明：</span><div class="explanation-text">${result.explanation}</div>`;
+        resultDiv.appendChild(explanationDiv);
+    }
+    
+    translationResultContainer.appendChild(resultDiv);
+}
+
+// 复制到剪贴板
+function copyToClipboard(text) {
+    navigator.clipboard.writeText(text).then(() => {
+        showSuccessToast('已复制到剪贴板');
+    }).catch(err => {
+        console.error('复制失败:', err);
+        // 备用复制方法
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+            document.execCommand('copy');
+            showSuccessToast('已复制到剪贴板');
+        } catch (e) {
+            showErrorMessage('复制失败，请手动复制');
+        }
+        document.body.removeChild(textArea);
+    });
+}
+
+// 显示成功提示
+function showSuccessToast(message) {
+    const toast = document.createElement('div');
+    toast.className = 'success-toast';
+    toast.textContent = message;
+    document.body.appendChild(toast);
+    
+    setTimeout(() => {
+        toast.classList.add('show');
+    }, 100);
+    
+    setTimeout(() => {
+        toast.classList.remove('show');
+        setTimeout(() => {
+            document.body.removeChild(toast);
+        }, 300);
+    }, 2000);
+}
+
+// 显示错误信息
+function showErrorMessage(message) {
+    const errorDiv = document.createElement('div');
+    errorDiv.className = 'error';
+    errorDiv.textContent = message;
+    translationResultContainer.innerHTML = '';
+    translationResultContainer.appendChild(errorDiv);
+}
+
+// 显示加载状态
+function showLoading(show) {
+    loadingDiv.style.display = show ? 'block' : 'none';
+    translateBtn.disabled = show;
+    translateBtn.textContent = show ? '翻译中...' : '开始翻译';
+}
+
+// 执行翻译
+async function performTranslation() {
+    const sourceText = sourceTextInput.value.trim();
+    const targetLanguage = targetLanguageSelect.value;
+    
+    if (!sourceText) {
+        showErrorMessage('请输入要翻译的内容');
+        return;
+    }
+    
+    showLoading(true);
+    translationResultContainer.innerHTML = '';
+    
+    try {
+        const result = await callBackendAPI(sourceText, targetLanguage);
+        const parsedResult = parseAIResponse(result);
+        displayTranslationResult(parsedResult);
+    } catch (error) {
+        console.error('翻译失败:', error);
+        showErrorMessage(`翻译失败: ${error.message}`);
+    } finally {
+        showLoading(false);
+    }
+}
+
+// 事件监听器
+translateBtn.addEventListener('click', performTranslation);
+
+// 回车键翻译
+sourceTextInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        performTranslation();
+    }
+});
+
+// 页面加载完成后的初始化
+document.addEventListener('DOMContentLoaded', () => {
+    // 设置默认占位符
+    translationResultContainer.innerHTML = '<div class="placeholder">请输入要翻译的内容，然后选择目标语言并点击翻译按钮</div>';
+});
+
+// 导出函数供HTML调用
+window.copyToClipboard = copyToClipboard;
+window.performTranslation = performTranslation;
--- a/InfoGenie-frontend/public/aimodelapp/AI语言翻译助手/styles.css
+++ b/InfoGenie-frontend/public/aimodelapp/AI语言翻译助手/styles.css
@@ -0,0 +1,488 @@
+/* 全局样式重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* 主体样式 - iOS风格 */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+  padding: 20px;
+  color: #1D1D1F;
+  line-height: 1.47;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* 容器样式 - iOS毛玻璃效果 */
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 24px;
+  padding: 32px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
+  backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* 头部样式 - iOS风格 */
+.header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.title {
+  font-size: 2.25rem;
+  color: #1D1D1F;
+  margin-bottom: 8px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+.subtitle {
+  color: #86868B;
+  font-size: 1.0625rem;
+  margin-bottom: 24px;
+  font-weight: 400;
+}
+
+/* 表单样式 - iOS风格 */
+.form-section {
+  margin-bottom: 32px;
+}
+
+.form-group {
+  margin-bottom: 24px;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: #1D1D1F;
+  font-size: 1rem;
+}
+
+.form-input {
+  width: 100%;
+  padding: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  font-size: 1rem;
+  transition: all 0.2s ease;
+  background: rgba(255, 255, 255, 0.8);
+  font-family: inherit;
+  backdrop-filter: blur(10px);
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #007AFF;
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
+}
+
+.textarea {
+  resize: vertical;
+  min-height: 120px;
+}
+
+.select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 15px center;
+  background-size: 12px;
+  padding-right: 40px;
+}
+
+/* 按钮样式 - iOS风格 */
+.btn {
+  width: 100%;
+  padding: 16px;
+  background: #007AFF;
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-size: 1.0625rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
+}
+
+.btn:hover {
+  background: #0056CC;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 16px rgba(0, 122, 255, 0.35);
+}
+
+.btn:active {
+  transform: translateY(0);
+  background: #004499;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+  background: #86868B;
+}
+
+/* 结果区域样式 - iOS风格 */
+.result-section {
+  margin-top: 32px;
+}
+
+.result-title {
+  font-size: 1.25rem;
+  color: #1D1D1F;
+  margin-bottom: 16px;
+  text-align: center;
+  font-weight: 600;
+}
+
+.loading {
+  display: none;
+  text-align: center;
+  color: #007AFF;
+  font-style: normal;
+  padding: 24px;
+  font-weight: 500;
+}
+
+.translation-container {
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 16px;
+  padding: 24px;
+  min-height: 150px;
+  backdrop-filter: blur(10px);
+}
+
+.placeholder {
+  text-align: center;
+  color: #86868B;
+  font-style: normal;
+  padding: 40px 20px;
+  font-weight: 400;
+}
+
+/* 翻译结果样式 */
+.translation-result {
+  animation: fadeIn 0.3s ease;
+}
+
+.detected-language {
+  background: rgba(52, 199, 89, 0.1);
+  border: 1px solid rgba(52, 199, 89, 0.2);
+  border-radius: 12px;
+  padding: 12px 16px;
+  margin-bottom: 16px;
+  font-size: 0.9375rem;
+}
+
+.detected-language .label {
+  font-weight: 600;
+  color: #34C759;
+  margin-right: 8px;
+}
+
+.detected-language .value {
+  color: #1D1D1F;
+}
+
+.main-translation {
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 16px;
+  position: relative;
+}
+
+.translation-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.translation-header .label {
+  font-weight: 600;
+  color: #1D1D1F;
+  font-size: 1rem;
+}
+
+.translation-text {
+  font-size: 1.125rem;
+  color: #1D1D1F;
+  line-height: 1.6;
+  font-weight: 500;
+}
+
+.pronunciation {
+  background: rgba(255, 149, 0, 0.1);
+  border: 1px solid rgba(255, 149, 0, 0.2);
+  border-radius: 12px;
+  padding: 12px 16px;
+  margin-bottom: 16px;
+  font-size: 0.9375rem;
+}
+
+.pronunciation .label {
+  font-weight: 600;
+  color: #FF9500;
+  margin-right: 8px;
+}
+
+.pronunciation .value {
+  color: #1D1D1F;
+  font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
+}
+
+.alternatives {
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.alternatives-title {
+  font-weight: 600;
+  color: #1D1D1F;
+  margin-bottom: 12px;
+  font-size: 1rem;
+}
+
+.alternative-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  margin-bottom: 8px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 8px;
+  transition: all 0.2s ease;
+}
+
+.alternative-item:hover {
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.alternative-item:last-child {
+  margin-bottom: 0;
+}
+
+.alternative-text {
+  color: #1D1D1F;
+  font-size: 1rem;
+}
+
+.explanation {
+  background: rgba(0, 122, 255, 0.1);
+  border: 1px solid rgba(0, 122, 255, 0.2);
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.explanation .label {
+  font-weight: 600;
+  color: #007AFF;
+  margin-bottom: 8px;
+  display: block;
+}
+
+.explanation-text {
+  color: #1D1D1F;
+  line-height: 1.6;
+  font-size: 0.9375rem;
+}
+
+/* 复制按钮样式 */
+.copy-btn {
+  background: #007AFF;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 8px 16px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 122, 255, 0.25);
+}
+
+.copy-btn:hover {
+  background: #0056CC;
+  transform: translateY(-1px);
+}
+
+.copy-btn-small {
+  background: #007AFF;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  padding: 4px 8px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 2px rgba(0, 122, 255, 0.25);
+}
+
+.copy-btn-small:hover {
+  background: #0056CC;
+  transform: translateY(-1px);
+}
+
+/* 错误样式 - iOS风格 */
+.error {
+  color: #FF3B30;
+  background: rgba(255, 59, 48, 0.1);
+  border: 1px solid rgba(255, 59, 48, 0.2);
+  padding: 16px;
+  border-radius: 12px;
+  margin-top: 16px;
+  font-weight: 500;
+  backdrop-filter: blur(10px);
+}
+
+/* 成功提示 - iOS风格 */
+.success-toast {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: #34C759;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(52, 199, 89, 0.3);
+  z-index: 1000;
+  opacity: 0;
+  transform: translateX(100%);
+  transition: all 0.3s ease;
+  font-weight: 600;
+  backdrop-filter: blur(20px);
+}
+
+.success-toast.show {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  body {
+    padding: 10px;
+  }
+
+  .container {
+    padding: 20px;
+    margin: 10px;
+  }
+
+  .title {
+    font-size: 2rem;
+  }
+
+  .form-input {
+    padding: 12px;
+  }
+
+  .btn {
+    padding: 12px;
+  }
+
+  .translation-container {
+    padding: 15px;
+  }
+
+  .main-translation {
+    padding: 15px;
+  }
+
+  .translation-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .copy-btn {
+    align-self: flex-end;
+  }
+
+  .alternative-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .copy-btn-small {
+    align-self: flex-end;
+  }
+}
+
+@media (max-width: 480px) {
+  .title {
+    font-size: 1.8rem;
+    letter-spacing: 1px;
+  }
+
+  .container {
+    padding: 15px;
+  }
+
+  .form-input {
+    padding: 10px;
+  }
+
+  .main-translation {
+    padding: 12px;
+  }
+
+  .translation-text {
+    font-size: 1rem;
+  }
+
+  .alternative-text {
+    font-size: 0.9375rem;
+  }
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.translation-result {
+  animation: fadeIn 0.3s ease;
+}
+
+/* 加载动画 */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.loading {
+  animation: pulse 1.5s ease-in-out infinite;
+}