优化结果

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,52 @@
+<!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">让AI为您的文字生成生动的表情符号</p>
+    </div>
+
+    <div class="form-section">
+      <div class="form-group">
+        <label class="form-label" for="text-input">输入文字：</label>
+        <textarea 
+          id="text-input" 
+          class="form-input textarea" 
+          placeholder="请输入您想要表达的短语或句子，例如：开心、生气、无奈、加油等..."
+        >开心</textarea>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label" for="style-select">表情风格：</label>
+        <select id="style-select" class="form-input select">
+          <option value="mixed">混合风格（推荐）</option>
+          <option value="emoji">仅Emoji表情</option>
+          <option value="kaomoji">仅颜文字</option>
+          <option value="cute">可爱风格</option>
+          <option value="cool">酷炫风格</option>
+        </select>
+      </div>
+
+      <button id="generateBtn" class="btn">生成表情</button>
+    </div>
+
+    <div class="result-section">
+      <h3 class="result-title">推荐的表情</h3>
+      <div id="loading" class="loading">正在生成中，请稍候...</div>
+      <div id="expressions" class="expressions-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,298 @@
+// 从配置文件导入设置
+// 配置在 env.js 文件中定义
+
+// DOM 元素
+const textInput = document.getElementById('text-input');
+const styleSelect = document.getElementById('style-select');
+const generateBtn = document.getElementById('generateBtn');
+const loadingDiv = document.getElementById('loading');
+const expressionsContainer = document.getElementById('expressions');
+
+// 调用后端API
+async function callBackendAPI(text, style) {
+    try {
+        const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/expression-maker', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                text: text,
+                style: style
+            })
+        });
+
+        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.expressions;
+        } 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.expressions || {};
+    } catch (error) {
+        // 如果直接解析失败，尝试提取JSON部分
+        const jsonMatch = response.match(/\{[\s\S]*\}/);
+        if (jsonMatch) {
+            try {
+                const parsed = JSON.parse(jsonMatch[0]);
+                return parsed.expressions || {};
+            } catch (e) {
+                console.error('JSON解析失败:', e);
+            }
+        }
+        
+        // 如果JSON解析失败，返回空对象
+        console.error('无法解析AI响应:', response);
+        return {};
+    }
+}
+
+// 显示表情建议
+function displayExpressions(expressions) {
+    expressionsContainer.innerHTML = '';
+    
+    if (!expressions || Object.keys(expressions).length === 0) {
+        expressionsContainer.innerHTML = '<div class="placeholder">暂无表情建议，请尝试重新生成</div>';
+        return;
+    }
+    
+    // 表情分类的显示名称
+    const categoryNames = {
+        'emoji': 'Emoji表情',
+        'kaomoji': '颜文字',
+        'combination': '组合表情'
+    };
+    
+    // 按分类显示表情
+    Object.keys(expressions).forEach(category => {
+        if (expressions[category] && expressions[category].length > 0) {
+            // 创建分组标题
+            const groupTitle = document.createElement('div');
+            groupTitle.className = 'expression-group-title';
+            groupTitle.textContent = categoryNames[category] || category;
+            expressionsContainer.appendChild(groupTitle);
+            
+            // 显示该分类下的表情
+            expressions[category].forEach(expression => {
+                const expressionElement = document.createElement('div');
+                expressionElement.className = 'expression-item';
+                
+                // 获取情感强度颜色
+                const intensityColor = CONFIG.intensityLevels[expression.intensity]?.color || '#86868B';
+                
+                expressionElement.innerHTML = `
+                    <div class="expression-content">
+                        <div class="expression-symbol ${CONFIG.expressionCategories[category]?.className || 'emoji'}">${expression.symbol}</div>
+                        <div class="expression-info">
+                            <div class="expression-text">${expression.symbol}</div>
+                            <div class="expression-description">
+                                ${expression.description}<br>
+                                <span style="color: ${intensityColor}; font-weight: 600;">强度: ${expression.intensity}</span>
+                                ${expression.usage ? ` | ${expression.usage}` : ''}
+                            </div>
+                        </div>
+                    </div>
+                    <button class="copy-btn" onclick="copyToClipboard('${expression.symbol}', this)">复制</button>
+                `;
+                expressionsContainer.appendChild(expressionElement);
+            });
+        }
+    });
+}
+
+// 复制到剪贴板
+function copyToClipboard(text, button) {
+    navigator.clipboard.writeText(text).then(() => {
+        showSuccessToast('已复制到剪贴板');
+        button.textContent = '已复制';
+        setTimeout(() => {
+            button.textContent = '复制';
+        }, 2000);
+    }).catch(err => {
+        console.error('复制失败:', err);
+        // 备用复制方法
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+            document.execCommand('copy');
+            showSuccessToast('已复制到剪贴板');
+            button.textContent = '已复制';
+            setTimeout(() => {
+                button.textContent = '复制';
+            }, 2000);
+        } 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;
+    expressionsContainer.innerHTML = '';
+    expressionsContainer.appendChild(errorDiv);
+}
+
+// 显示加载状态
+function showLoading(show) {
+    loadingDiv.style.display = show ? 'block' : 'none';
+    generateBtn.disabled = show;
+    generateBtn.textContent = show ? '生成中...' : '生成表情';
+}
+
+// 生成表情建议
+async function generateExpressions() {
+    const text = textInput.value.trim();
+    const style = styleSelect.value;
+    
+    if (!text) {
+        showErrorMessage('请输入要表达的文字内容');
+        return;
+    }
+    
+    showLoading(true);
+    expressionsContainer.innerHTML = '';
+    
+    try {
+        const expressions = await callBackendAPI(text, style);
+        displayExpressions(expressions);
+    } catch (error) {
+        console.error('生成表情失败:', error);
+        showErrorMessage(`生成失败: ${error.message}`);
+    } finally {
+        showLoading(false);
+    }
+}
+
+// 初始化样式选择器
+function initializeStyleSelector() {
+    // 清空现有选项
+    styleSelect.innerHTML = '';
+    
+    // 添加样式选项
+    Object.keys(CONFIG.expressionStyles).forEach(styleKey => {
+        const option = document.createElement('option');
+        option.value = styleKey;
+        option.textContent = `${CONFIG.expressionStyles[styleKey].name} - ${CONFIG.expressionStyles[styleKey].description}`;
+        styleSelect.appendChild(option);
+    });
+    
+    // 设置默认选项
+    styleSelect.value = 'mixed';
+}
+
+// 事件监听器
+generateBtn.addEventListener('click', generateExpressions);
+
+// 回车键生成
+textInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        generateExpressions();
+    }
+});
+
+// 样式选择变化时的提示
+styleSelect.addEventListener('change', (e) => {
+    const selectedStyle = CONFIG.expressionStyles[e.target.value];
+    if (selectedStyle) {
+        // 可以在这里添加样式变化的提示
+        console.log(`已选择样式: ${selectedStyle.name} - ${selectedStyle.description}`);
+    }
+});
+
+// 页面加载完成后的初始化
+document.addEventListener('DOMContentLoaded', () => {
+    // 初始化样式选择器
+    initializeStyleSelector();
+    
+    // 设置默认占位符
+    expressionsContainer.innerHTML = '<div class="placeholder">请输入要表达的文字，然后点击生成按钮获取相应的表情符号</div>';
+    
+    // 设置默认文本
+    if (!textInput.value.trim()) {
+        textInput.value = '开心';
+    }
+});
+
+// 导出函数供HTML调用
+window.copyToClipboard = copyToClipboard;
+window.generateExpressions = generateExpressions;
+
+// 添加一些实用的辅助函数
+function getRandomExpression(expressions) {
+    const allExpressions = [];
+    Object.values(expressions).forEach(categoryExpressions => {
+        if (Array.isArray(categoryExpressions)) {
+            allExpressions.push(...categoryExpressions);
+        }
+    });
+    
+    if (allExpressions.length > 0) {
+        const randomIndex = Math.floor(Math.random() * allExpressions.length);
+        return allExpressions[randomIndex];
+    }
+    
+    return null;
+}
+
+// 表情使用统计（可选功能）
+function trackExpressionUsage(expression) {
+    const usage = JSON.parse(localStorage.getItem('expressionUsage') || '{}');
+    usage[expression] = (usage[expression] || 0) + 1;
+    localStorage.setItem('expressionUsage', JSON.stringify(usage));
+}
+
+// 获取常用表情（可选功能）
+function getPopularExpressions(limit = 5) {
+    const usage = JSON.parse(localStorage.getItem('expressionUsage') || '{}');
+    return Object.entries(usage)
+        .sort(([,a], [,b]) => b - a)
+        .slice(0, limit)
+        .map(([expression]) => expression);
+}
+
+// 导出辅助函数
+window.getRandomExpression = getRandomExpression;
+window.trackExpressionUsage = trackExpressionUsage;
+window.getPopularExpressions = getPopularExpressions;
--- a/InfoGenie-frontend/public/aimodelapp/AI生成表情包/styles.css
+++ b/InfoGenie-frontend/public/aimodelapp/AI生成表情包/styles.css
@@ -0,0 +1,436 @@
+/* 全局样式重置 */
+* {
+  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, #FFB6C1 0%, #FFE4E1 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: 700px;
+  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: #FF69B4;
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 0 0 4px rgba(255, 105, 180, 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: #FF69B4;
+  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(255, 105, 180, 0.25);
+}
+
+.btn:hover {
+  background: #FF1493;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 16px rgba(255, 105, 180, 0.35);
+}
+
+.btn:active {
+  transform: translateY(0);
+  background: #DC143C;
+}
+
+.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: #FF69B4;
+  font-style: normal;
+  padding: 24px;
+  font-weight: 500;
+}
+
+.expressions-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;
+}
+
+/* 表情分组标题样式 - iOS风格 */
+.expression-group-title {
+  font-size: 1.0625rem;
+  font-weight: 600;
+  color: white;
+  margin: 20px 0 12px 0;
+  padding: 12px 16px;
+  background: #FF69B4;
+  border-radius: 12px;
+  text-align: center;
+  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.25);
+}
+
+.expression-group-title:first-child {
+  margin-top: 0;
+}
+
+/* 表情项样式 - iOS风格 */
+.expression-item {
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 12px;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  position: relative;
+  backdrop-filter: blur(10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.expression-item:hover {
+  border-color: rgba(255, 105, 180, 0.3);
+  box-shadow: 0 4px 16px rgba(255, 105, 180, 0.1);
+  background: rgba(255, 255, 255, 0.95);
+}
+
+.expression-item:last-child {
+  margin-bottom: 0;
+}
+
+.expression-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  text-align: center;
+}
+
+.expression-symbol {
+  font-size: 2.5rem;
+  margin-bottom: 12px;
+  line-height: 1;
+}
+
+.expression-info {
+  width: 100%;
+  text-align: center;
+}
+
+.expression-text {
+  display: none;
+}
+
+.expression-description {
+  font-size: 0.9375rem;
+  color: #86868B;
+  line-height: 1.47;
+  margin-bottom: 12px;
+}
+
+.copy-btn {
+  background: #FF69B4;
+  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(255, 105, 180, 0.25);
+  margin-top: 8px;
+  align-self: center;
+}
+
+.copy-btn:hover {
+  background: #FF1493;
+  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: 16px;
+  }
+  
+  .container {
+    padding: 24px;
+    border-radius: 20px;
+  }
+  
+  .title {
+    font-size: 1.875rem;
+  }
+  
+  .subtitle {
+    font-size: 1rem;
+  }
+  
+  .form-input {
+    padding: 14px;
+    font-size: 1rem;
+  }
+  
+  .btn {
+    padding: 16px;
+    font-size: 1rem;
+  }
+  
+  .expressions-container {
+    padding: 20px;
+  }
+  
+  .expression-item {
+    padding: 16px;
+    margin-bottom: 16px;
+  }
+  
+  .expression-content {
+    width: 100%;
+    margin-bottom: 8px;
+  }
+  
+  .expression-symbol {
+    font-size: 3rem;
+    margin-bottom: 16px;
+  }
+  
+  .expression-description {
+    font-size: 0.875rem;
+    margin-bottom: 16px;
+    padding: 0 8px;
+  }
+  
+  .copy-btn {
+    padding: 10px 20px;
+    font-size: 0.875rem;
+    margin-top: 12px;
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .title {
+    font-size: 1.8rem;
+    letter-spacing: 1px;
+  }
+
+  .container {
+    padding: 15px;
+  }
+
+  .form-input {
+    padding: 10px;
+  }
+
+  .expression-item {
+    padding: 10px;
+  }
+
+  .expression-text {
+    font-size: 1rem;
+  }
+
+  .expression-description {
+    font-size: 0.85rem;
+  }
+
+  .expression-symbol {
+    font-size: 1.2rem;
+  }
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.expression-item {
+  animation: fadeIn 0.3s ease;
+}
+
+/* 加载动画 */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.loading {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+/* 表情符号特殊样式 */
+.emoji {
+  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
+}
+
+.kaomoji {
+  font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
+  font-weight: normal;
+}