From b4f14ae3e7e8ee3e44c3e8713ab9a4d9c110e148 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E5=BD=ADBaileys?=
 <142196225+apeng0406@users.noreply.github.com>
Date: Sun, 9 Mar 2025 19:09:00 +0800
Subject: [PATCH] Bilingual support, with full system support for Chinese and
 English switching.

---
 app.py                                        |   18 +-
 static/js/i18n.js                             |  239 +++
 templates/404.html                            |   85 +-
 templates/error.html                          |   89 +-
 templates/spider_control.html                 |  760 +++----
 views/page/__pycache__/page.cpython-38.pyc    |  Bin 0 -> 5041 bytes
 views/page/page.py                            | 1096 +++++-----
 views/page/templates/articleChar.html         |  688 +++---
 views/page/templates/articleContentCloud.html |  286 +--
 views/page/templates/base_page.html           |  981 ++++-----
 views/page/templates/commentChar.html         |  632 +++---
 views/page/templates/hotWord.html             | 1004 ++++-----
 views/page/templates/index.html               |   57 +-
 views/page/templates/ipChar.html              |  548 ++---
 views/page/templates/tableData.html           |  451 ++--
 views/page/templates/yuqingChar.html          |  800 +++----
 views/page/templates/yuqingpredict.html       | 1848 ++++++++---------
 views/spider_control.py                       |  740 +++----
 views/user/__pycache__/user.cpython-38.pyc    |  Bin 0 -> 2249 bytes
 views/user/templates/login_and_register.html  |   23 +
 views/user/user.py                            |  744 +++----
 21 files changed, 5725 insertions(+), 5364 deletions(-)
 create mode 100644 static/js/i18n.js
 create mode 100644 views/page/__pycache__/page.cpython-38.pyc
 create mode 100644 views/user/__pycache__/user.cpython-38.pyc

diff --git a/app.py b/app.py
index 7b18720..8bf6bc3 100644
--- a/app.py
+++ b/app.py
@@ -142,15 +142,27 @@ def not_found_error(error):
 
 @app.errorhandler(500)
 def internal_error(error):
-    return render_template('500.html'), 500
+    return render_template('error.html', 
+                          error_code=500, 
+                          error_title='服务器错误', 
+                          error_message='服务器遇到了一个问题，请稍后再试。',
+                          error_i18n_key='serverError'), 500
 
 @app.errorhandler(403)
 def forbidden_error(error):
-    return render_template('403.html'), 403
+    return render_template('error.html', 
+                          error_code=403, 
+                          error_title='禁止访问', 
+                          error_message='您没有权限访问此页面。',
+                          error_i18n_key='forbidden'), 403
 
 @app.errorhandler(400)
 def bad_request_error(error):
-    return render_template('400.html'), 400
+    return render_template('error.html', 
+                          error_code=400, 
+                          error_title='错误请求', 
+                          error_message='服务器无法理解您的请求。',
+                          error_i18n_key='badRequest'), 400
 
 # 数据库配置
 DB_CONFIG = {
diff --git a/static/js/i18n.js b/static/js/i18n.js
new file mode 100644
index 0000000..db91b8c
--- /dev/null
+++ b/static/js/i18n.js
@@ -0,0 +1,239 @@
+// 多语言支持文件
+const translations = {
+    'zh': {
+        // 导航菜单
+        'home': '首页',
+        'hotWord': '热词统计',
+        'tableData': '微博舆情统计',
+        'articleChar': '文章分析',
+        'ipChar': 'IP分析',
+        'commentChar': '评论分析',
+        'yuqingChar': '舆情分析',
+        'yuqingpredict': '舆情预测',
+        'articleCloud': '文章内容词云图',
+        'dataVisualization': '数据可视化',
+        'weiboSystem': '微博舆情分析系统',
+        'wordCloud': '词云图',
+        
+        // 首页
+        'articleCount': '文章个数',
+        'articleCrawlRule': '文章爬取规则',
+        'nextCrawlTime': '下次爬取时间',
+        'articlePublishTimeCount': '文章发布时间个数',
+        'commentLikeCountTopFore': '评论点赞量 Top Fore',
+        'viewAll': '查看全部',
+        'articleTypeRatio': '文章类型占比',
+        'commentUserWordCloud': '评论用户名词云图',
+        'commentUserTimeRatio': '评论用户时间占比',
+        
+        // 热词页面
+        'hotWordStatistics': '热词统计页',
+        'hotWordCloud': '热词词云图',
+        'hotWordRanking': '热词查询表格',
+        'wordFrequency': '词频',
+        'hotWordSelection': '热词选择',
+        'hotWordName': '热词名称',
+        'occurrenceCount': '出现次数',
+        'hotWordSentiment': '热词情感',
+        'hotWordYearTrend': '热词年份变化趋势',
+        'queryCommentsByHotWord': '根据选择的热词从而查询出评论数据',
+        'hotWordTimeDistribution': '热词出现时间分布个数',
+        
+        // 舆情分析页面
+        'hotWordSentimentTrendBar': '热词情感趋势柱状图',
+        'hotWordSentimentTrendTree': '热词情感趋势树形图',
+        'articleCommentSentimentTrendPie': '文章内容与评论内容舆情趋势饼状图',
+        
+        // 舆情预测页面
+        'topicStatisticsPage': '话题统计页',
+        
+        // 文章分析页面
+        'articleCharPage': '文章分析页',
+        'typeSelection': '类型选择',
+        'articleLikeAnalysis': '文章点赞量分析 👍',
+        'articleCommentAnalysis': '文章评论量分析 🔥',
+        'articleForwardAnalysis': '文章转发量分析 🥇',
+        'likeRangeStatistics': '点赞区间统计',
+        'rangeCount': '区间个数',
+        
+        // 评论分析页面
+        'commentLikeRangeChart': '评论点赞次数区间图',
+        'commentUserGenderRatio': '评论用户性别占比',
+        'userCommentWordCloud': '用户评论词云图',
+        
+        // IP分析页面
+        'articleIpLocationAnalysis': '文章IP位置分析图',
+        'commentIpLocationAnalysis': '评论IP位置分析图',
+        
+        // 评论相关
+        'commentUser': '评论用户',
+        'commentGender': '评论性别',
+        'commentAddress': '评论地址',
+        'commentContent': '评论内容',
+        'likeCount': '点赞量',
+        
+        // 微博舆情统计页面
+        'weiboArticleStatTable': '微博文章统计表格 - 舆情 情感分类',
+        'sentimentClassification': '情感分类',
+        'articleId': '文章ID',
+        'articleIp': '文章IP',
+        'articleTitle': '文章标题',
+        'articleLike': '点赞量',
+        'articleForward': '转发量',
+        'articleComment': '评论量',
+        'articleType': '类型',
+        'articleContent': '内容',
+        'articleTime': '发布时间',
+        
+        // 通用
+        'switchToEnglish': '切换到英文',
+        'switchToChinese': '切换到中文',
+        'semester': '网安小学期',
+        
+        // 错误页面
+        'pageNotFound': '页面未找到',
+        'backToHome': '返回首页',
+        'serverError': '服务器错误',
+        'forbidden': '禁止访问',
+        'badRequest': '错误请求'
+    },
+    'en': {
+        // Navigation menu
+        'home': 'Home',
+        'hotWord': 'Hot Words',
+        'tableData': 'Weibo Public Opinion Stats',
+        'articleChar': 'Article Analysis',
+        'ipChar': 'IP Analysis',
+        'commentChar': 'Comment Analysis',
+        'yuqingChar': 'Public Opinion Analysis',
+        'yuqingpredict': 'Opinion Prediction',
+        'articleCloud': 'Article Content Word Cloud',
+        'dataVisualization': 'Data Visualization',
+        'weiboSystem': 'Weibo Public Opinion Analysis System',
+        'wordCloud': 'Word Cloud',
+        
+        // Home page
+        'articleCount': 'Article Count',
+        'articleCrawlRule': 'Article Crawl Rule',
+        'nextCrawlTime': 'Next Crawl Time',
+        'articlePublishTimeCount': 'Article Publish Time Count',
+        'commentLikeCountTopFore': 'Comment Like Count Top Four',
+        'viewAll': 'View All',
+        'articleTypeRatio': 'Article Type Ratio',
+        'commentUserWordCloud': 'Comment User Word Cloud',
+        'commentUserTimeRatio': 'Comment User Time Ratio',
+        
+        // Hot word page
+        'hotWordStatistics': 'Hot Word Statistics',
+        'hotWordCloud': 'Hot Word Cloud',
+        'hotWordRanking': 'Hot Word Ranking',
+        'wordFrequency': 'Word Frequency',
+        'hotWordSelection': 'Hot Word Selection',
+        'hotWordName': 'Hot Word Name',
+        'occurrenceCount': 'Occurrence Count',
+        'hotWordSentiment': 'Hot Word Sentiment',
+        'hotWordYearTrend': 'Hot Word Year Trend',
+        'queryCommentsByHotWord': 'Query comments based on selected hot word',
+        'hotWordTimeDistribution': 'Hot Word Time Distribution Count',
+        
+        // Public opinion analysis page
+        'hotWordSentimentTrendBar': 'Hot Word Sentiment Trend Bar Chart',
+        'hotWordSentimentTrendTree': 'Hot Word Sentiment Trend Tree Chart',
+        'articleCommentSentimentTrendPie': 'Article and Comment Sentiment Trend Pie Chart',
+        
+        // Opinion prediction page
+        'topicStatisticsPage': 'Topic Statistics Page',
+        
+        // Article analysis page
+        'articleCharPage': 'Article Analysis Page',
+        'typeSelection': 'Type Selection',
+        'articleLikeAnalysis': 'Article Like Analysis 👍',
+        'articleCommentAnalysis': 'Article Comment Analysis 🔥',
+        'articleForwardAnalysis': 'Article Forward Analysis 🥇',
+        'likeRangeStatistics': 'Like Range Statistics',
+        'rangeCount': 'Range Count',
+        
+        // Comment analysis page
+        'commentLikeRangeChart': 'Comment Like Range Chart',
+        'commentUserGenderRatio': 'Comment User Gender Ratio',
+        'userCommentWordCloud': 'User Comment Word Cloud',
+        
+        // IP analysis page
+        'articleIpLocationAnalysis': 'Article IP Location Analysis',
+        'commentIpLocationAnalysis': 'Comment IP Location Analysis',
+        
+        // Comment related
+        'commentUser': 'Comment User',
+        'commentGender': 'Gender',
+        'commentAddress': 'Address',
+        'commentContent': 'Content',
+        'likeCount': 'Likes',
+        
+        // Weibo public opinion stats page
+        'weiboArticleStatTable': 'Weibo Article Statistics Table - Sentiment Classification',
+        'sentimentClassification': 'Sentiment Classification',
+        'articleId': 'Article ID',
+        'articleIp': 'Article IP',
+        'articleTitle': 'Article Title',
+        'articleLike': 'Likes',
+        'articleForward': 'Forwards',
+        'articleComment': 'Comments',
+        'articleType': 'Type',
+        'articleContent': 'Content',
+        'articleTime': 'Publish Time',
+        
+        // Common
+        'switchToEnglish': 'Switch to English',
+        'switchToChinese': 'Switch to Chinese',
+        'semester': 'Network Security Semester',
+        
+        // Error pages
+        'pageNotFound': 'Page Not Found',
+        'backToHome': 'Back to Home',
+        'serverError': 'Server Error',
+        'forbidden': 'Forbidden',
+        'badRequest': 'Bad Request'
+    }
+};
+
+// 获取当前语言
+function getCurrentLanguage() {
+    return localStorage.getItem('language') || 'zh';
+}
+
+// 设置语言
+function setLanguage(lang) {
+    localStorage.setItem('language', lang);
+    location.reload();
+}
+
+// 翻译函数
+function t(key) {
+    const lang = getCurrentLanguage();
+    return translations[lang][key] || key;
+}
+
+// 页面加载时应用翻译
+document.addEventListener('DOMContentLoaded', function() {
+    // 应用当前语言
+    applyTranslations();
+    
+    // 添加语言切换按钮事件
+    const langSwitcher = document.getElementById('language-switcher');
+    if (langSwitcher) {
+        langSwitcher.addEventListener('click', function() {
+            const currentLang = getCurrentLanguage();
+            const newLang = currentLang === 'zh' ? 'en' : 'zh';
+            setLanguage(newLang);
+        });
+    }
+});
+
+// 应用翻译到页面元素
+function applyTranslations() {
+    const elements = document.querySelectorAll('[data-i18n]');
+    elements.forEach(el => {
+        const key = el.getAttribute('data-i18n');
+        el.textContent = t(key);
+    });
+} 
\ No newline at end of file
diff --git a/templates/404.html b/templates/404.html
index 4fb4dd5..5357503 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -1,29 +1,58 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-      <title>404页面</title>
-      <link rel="stylesheet" href="/static/css/backend-plugin.min.css">
-      <link rel="stylesheet" href="/static/css/backend.css">  </head>
-  <body class=" ">
-
-
-      <div class="wrapper">
-      <div class="container">
-         <div class="row no-gutters height-self-center">
-            <div class="col-sm-12 text-center align-self-center">
-               <div class="iq-error position-relative">
-                     <img src="/static/picture/Datum_404.png" class="img-fluid iq-error-img iq-error-img-dark mx-auto" alt="">
-                     <img src="/static/picture/Datum_404.png" class="img-fluid iq-error-img mb-0" alt="">
-                     <h2 class="mb-0">噢！该页面没有找到..</h2>
-                     <p>本次请求没有任何反应.</p>
-                     <a class="btn btn-primary d-inline-flex align-items-center mt-3" href="/user/login"><i class="ri-home-4-line mr-2"></i>回到登录页</a>
-               </div>
-            </div>
-         </div>
-   </div>
-      </div>
-   /
-  </body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>404 - 页面未找到</title>
+    <link rel="stylesheet" href="/static/css/backend.css">
+    <!-- 添加语言支持脚本 -->
+    <script src="/static/js/i18n.js"></script>
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f8f9fa;
+        }
+        .error-container {
+            text-align: center;
+            padding: 2rem;
+        }
+        .error-code {
+            font-size: 6rem;
+            font-weight: bold;
+            color: #dc3545;
+        }
+        .error-message {
+            font-size: 1.5rem;
+            margin: 1rem 0;
+        }
+        .back-link {
+            display: inline-block;
+            margin-top: 1rem;
+            padding: 0.5rem 1rem;
+            background-color: #007bff;
+            color: white;
+            text-decoration: none;
+            border-radius: 0.25rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="error-container">
+        <div class="error-code">404</div>
+        <div class="error-message" data-i18n="pageNotFound">页面未找到</div>
+        <p>您请求的页面不存在或已被移除。</p>
+        <a href="/" class="back-link" data-i18n="backToHome">返回首页</a>
+    </div>
+    
+    <!-- 初始化语言支持 -->
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            applyTranslations();
+        });
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/templates/error.html b/templates/error.html
index 7275342..79f366d 100644
--- a/templates/error.html
+++ b/templates/error.html
@@ -1,33 +1,58 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-      <title>错误页面</title>
-      
-      <link rel="stylesheet" href="/static/css/backend-plugin.min.css">
-      <link rel="stylesheet" href="/static/css/backend.css">  </head>
-  <body class=" ">
-
-    
-      <div class="wrapper">
-      <div class="mt-5 iq-maintenance">
-            <div class="container-fluid p-0">
-               <div class="row no-gutters">
-                  <div class="col-sm-12 text-center">
-                        <div class="iq-maintenance">
-                           <img src="/static/picture/maintenance.png" class="img-fluid" alt="">
-                           <h3 class="mt-4 mb-2">{{ errorMsg }}</h3>
-                           <p class="mb-2">请回去再次检查问题并且修改问题.</p>
-                           <p><a href="/user/login" class="btn btn-primary">回到登录页</a></p>
-                        </div>
-                  </div>
-               </div>
-            </div>
-         </div>
-      </div>
-    
-    <!-- Backend Bundle JavaScript -->
-
-  </body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ error_code }} - {{ error_title }}</title>
+    <link rel="stylesheet" href="/static/css/backend.css">
+    <!-- 添加语言支持脚本 -->
+    <script src="/static/js/i18n.js"></script>
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f8f9fa;
+        }
+        .error-container {
+            text-align: center;
+            padding: 2rem;
+        }
+        .error-code {
+            font-size: 6rem;
+            font-weight: bold;
+            color: #dc3545;
+        }
+        .error-message {
+            font-size: 1.5rem;
+            margin: 1rem 0;
+        }
+        .back-link {
+            display: inline-block;
+            margin-top: 1rem;
+            padding: 0.5rem 1rem;
+            background-color: #007bff;
+            color: white;
+            text-decoration: none;
+            border-radius: 0.25rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="error-container">
+        <div class="error-code">{{ error_code }}</div>
+        <div class="error-message" data-i18n="{{ error_i18n_key }}">{{ error_title }}</div>
+        <p>{{ error_message }}</p>
+        <a href="/" class="back-link" data-i18n="backToHome">返回首页</a>
+    </div>
+    
+    <!-- 初始化语言支持 -->
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            applyTranslations();
+        });
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/templates/spider_control.html b/templates/spider_control.html
index af29ce7..37aeefe 100644
--- a/templates/spider_control.html
+++ b/templates/spider_control.html
@@ -1,381 +1,381 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>爬虫控制面板</title>
-    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
-    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
-    <style>
-        .topic-item {
-            margin: 5px;
-            padding: 8px 15px;
-            border-radius: 20px;
-            background-color: #f8f9fa;
-            display: inline-block;
-            cursor: pointer;
-        }
-        .topic-item.selected {
-            background-color: #0d6efd;
-            color: white;
-        }
-        .custom-topic-input {
-            margin: 10px 0;
-        }
-        .parameter-section {
-            margin: 20px 0;
-            padding: 20px;
-            border-radius: 10px;
-            background-color: #f8f9fa;
-        }
-    </style>
-</head>
-<body>
-    <div class="container mt-5">
-        <h2 class="mb-4">爬虫控制面板</h2>
-        
-        <!-- 话题选择区域 -->
-        <div class="card mb-4">
-            <div class="card-header">
-                <h5 class="mb-0">选择话题类型</h5>
-            </div>
-            <div class="card-body">
-                <div id="predefinedTopics" class="mb-3">
-                    <!-- 预定义话题将通过JavaScript动态加载 -->
-                </div>
-                
-                <div class="custom-topic-input">
-                    <h6>添加自定义话题</h6>
-                    <div class="input-group">
-                        <input type="text" class="form-control" id="customTopic" placeholder="输入自定义话题">
-                        <button class="btn btn-primary" onclick="addCustomTopic()">
-                            <i class="fas fa-plus"></i> 添加
-                        </button>
-                    </div>
-                </div>
-                
-                <div id="selectedTopics" class="mt-3">
-                    <h6>已选择的话题：</h6>
-                    <div id="selectedTopicsList" class="mt-2">
-                        <!-- 已选择的话题将在这里显示 -->
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- 爬虫参数配置 -->
-        <div class="card mb-4">
-            <div class="card-header">
-                <h5 class="mb-0">爬虫参数配置</h5>
-            </div>
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-md-6">
-                        <div class="mb-3">
-                            <label for="crawlDepth" class="form-label">爬取深度</label>
-                            <input type="number" class="form-control" id="crawlDepth" value="3" min="1" max="10">
-                            <small class="text-muted">每个话题爬取的页数（1-10）</small>
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="mb-3">
-                            <label for="interval" class="form-label">爬取间隔(秒)</label>
-                            <input type="number" class="form-control" id="interval" value="5" min="1">
-                            <small class="text-muted">每次请求之间的间隔时间</small>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="row">
-                    <div class="col-md-6">
-                        <div class="mb-3">
-                            <label for="maxRetries" class="form-label">最大重试次数</label>
-                            <input type="number" class="form-control" id="maxRetries" value="3" min="1">
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="mb-3">
-                            <label for="timeout" class="form-label">请求超时时间(秒)</label>
-                            <input type="number" class="form-control" id="timeout" value="30" min="1">
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- AI配置助手 -->
-        <div class="card mb-4">
-            <div class="card-header">
-                <h5 class="mb-0">
-                    <i class="fas fa-robot"></i> AI配置助手
-                </h5>
-            </div>
-            <div class="card-body">
-                <div class="mb-3">
-                    <label for="aiPrompt" class="form-label">用自然语言描述您的爬虫需求</label>
-                    <textarea class="form-control" id="aiPrompt" rows="3" 
-                        placeholder="例如：我想爬取最近一周关于人工智能的热门微博，重点关注转发量超过1000的内容，每个话题爬取前5页内容。"></textarea>
-                </div>
-                <div class="d-flex justify-content-between align-items-center">
-                    <button class="btn btn-primary" onclick="generateConfig()">
-                        <i class="fas fa-magic"></i> 生成配置
-                    </button>
-                    <div class="form-check">
-                        <input class="form-check-input" type="checkbox" id="autoApply" checked>
-                        <label class="form-check-label" for="autoApply">
-                            自动应用生成的配置
-                        </label>
-                    </div>
-                </div>
-                <div id="aiResponse" class="mt-3" style="display: none;">
-                    <div class="alert alert-info">
-                        <h6 class="alert-heading">AI助手建议：</h6>
-                        <p id="aiSuggestion" class="mb-0"></p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- 操作按钮 -->
-        <div class="d-flex justify-content-between mb-5">
-            <button class="btn btn-primary" onclick="startCrawling()">
-                <i class="fas fa-play"></i> 开始爬取
-            </button>
-            <button class="btn btn-secondary" onclick="saveConfig()">
-                <i class="fas fa-save"></i> 保存配置
-            </button>
-        </div>
-
-        <!-- 爬虫状态和日志 -->
-        <div class="card">
-            <div class="card-header">
-                <h5 class="mb-0">爬虫状态</h5>
-            </div>
-            <div class="card-body">
-                <div class="progress mb-3">
-                    <div id="crawlProgress" class="progress-bar" role="progressbar" style="width: 0%"></div>
-                </div>
-                <div class="border p-3 bg-light" style="height: 200px; overflow-y: auto;">
-                    <pre id="crawlLog" class="mb-0"></pre>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js"></script>
-    <script>
-        // 预定义话题列表
-        const predefinedTopics = [
-            '热门', '社会', '科技', '娱乐', '体育', '财经', 
-            '教育', '健康', '军事', '文化', '汽车', '美食'
-        ];
-
-        // 已选择的话题
-        let selectedTopics = new Set();
-
-        // 初始化页面
-        window.onload = function() {
-            loadPredefinedTopics();
-        };
-
-        // 加载预定义话题
-        function loadPredefinedTopics() {
-            const topicsDiv = document.getElementById('predefinedTopics');
-            predefinedTopics.forEach(topic => {
-                const topicElement = document.createElement('span');
-                topicElement.className = 'topic-item';
-                topicElement.textContent = topic;
-                topicElement.onclick = () => toggleTopic(topic, topicElement);
-                topicsDiv.appendChild(topicElement);
-            });
-        }
-
-        // 切换话题选择状态
-        function toggleTopic(topic, element) {
-            if (selectedTopics.has(topic)) {
-                selectedTopics.delete(topic);
-                element.classList.remove('selected');
-            } else {
-                selectedTopics.add(topic);
-                element.classList.add('selected');
-            }
-            updateSelectedTopicsList();
-        }
-
-        // 添加自定义话题
-        function addCustomTopic() {
-            const input = document.getElementById('customTopic');
-            const topic = input.value.trim();
-            if (topic) {
-                selectedTopics.add(topic);
-                input.value = '';
-                updateSelectedTopicsList();
-            }
-        }
-
-        // 更新已选择的话题列表
-        function updateSelectedTopicsList() {
-            const listDiv = document.getElementById('selectedTopicsList');
-            listDiv.innerHTML = '';
-            selectedTopics.forEach(topic => {
-                const topicElement = document.createElement('span');
-                topicElement.className = 'topic-item selected';
-                topicElement.textContent = topic;
-                topicElement.onclick = () => {
-                    selectedTopics.delete(topic);
-                    updateSelectedTopicsList();
-                };
-                listDiv.appendChild(topicElement);
-            });
-        }
-
-        // 开始爬取
-        function startCrawling() {
-            if (selectedTopics.size === 0) {
-                alert('请至少选择一个话题！');
-                return;
-            }
-
-            const config = {
-                topics: Array.from(selectedTopics),
-                parameters: {
-                    crawlDepth: parseInt(document.getElementById('crawlDepth').value),
-                    interval: parseInt(document.getElementById('interval').value),
-                    maxRetries: parseInt(document.getElementById('maxRetries').value),
-                    timeout: parseInt(document.getElementById('timeout').value)
-                }
-            };
-
-            // 发送爬虫配置到后端
-            fetch('/api/spider/start', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(config)
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    updateCrawlLog('爬虫任务已启动...');
-                } else {
-                    updateCrawlLog('启动失败：' + data.message);
-                }
-            })
-            .catch(error => {
-                updateCrawlLog('错误：' + error.message);
-            });
-        }
-
-        // 保存配置
-        function saveConfig() {
-            const config = {
-                topics: Array.from(selectedTopics),
-                parameters: {
-                    crawlDepth: parseInt(document.getElementById('crawlDepth').value),
-                    interval: parseInt(document.getElementById('interval').value),
-                    maxRetries: parseInt(document.getElementById('maxRetries').value),
-                    timeout: parseInt(document.getElementById('timeout').value)
-                }
-            };
-
-            fetch('/api/spider/save-config', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(config)
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert('配置已保存！');
-                } else {
-                    alert('保存失败：' + data.message);
-                }
-            })
-            .catch(error => {
-                alert('保存出错：' + error.message);
-            });
-        }
-
-        // 更新爬虫日志
-        function updateCrawlLog(message) {
-            const log = document.getElementById('crawlLog');
-            const timestamp = new Date().toLocaleTimeString();
-            log.innerHTML += `[${timestamp}] ${message}\n`;
-            log.scrollTop = log.scrollHeight;
-        }
-
-        // WebSocket连接用于实时更新爬虫状态
-        const ws = new WebSocket(`ws://${window.location.host}/ws/spider-status`);
-        
-        ws.onmessage = function(event) {
-            const data = JSON.parse(event.data);
-            if (data.type === 'progress') {
-                document.getElementById('crawlProgress').style.width = data.value + '%';
-            } else if (data.type === 'log') {
-                updateCrawlLog(data.message);
-            }
-        };
-
-        // AI配置生成
-        async function generateConfig() {
-            const prompt = document.getElementById('aiPrompt').value.trim();
-            if (!prompt) {
-                alert('请输入您的爬虫需求描述！');
-                return;
-            }
-
-            const aiResponse = document.getElementById('aiResponse');
-            const aiSuggestion = document.getElementById('aiSuggestion');
-            
-            try {
-                const response = await fetch('/api/spider/ai-config', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({ prompt })
-                });
-
-                const data = await response.json();
-                if (data.success) {
-                    // 显示AI建议
-                    aiSuggestion.textContent = data.suggestion;
-                    aiResponse.style.display = 'block';
-
-                    // 如果选择自动应用配置
-                    if (document.getElementById('autoApply').checked) {
-                        // 清除现有选择
-                        selectedTopics.clear();
-                        
-                        // 应用新的话题
-                        data.config.topics.forEach(topic => {
-                            selectedTopics.add(topic);
-                        });
-                        
-                        // 更新参数
-                        document.getElementById('crawlDepth').value = data.config.parameters.crawlDepth;
-                        document.getElementById('interval').value = data.config.parameters.interval;
-                        document.getElementById('maxRetries').value = data.config.parameters.maxRetries;
-                        document.getElementById('timeout').value = data.config.parameters.timeout;
-                        
-                        // 更新UI
-                        updateSelectedTopicsList();
-                        
-                        // 添加提示
-                        updateCrawlLog('AI配置已自动应用');
-                    }
-                } else {
-                    throw new Error(data.message);
-                }
-            } catch (error) {
-                aiSuggestion.textContent = '生成配置时出错：' + error.message;
-                aiResponse.style.display = 'block';
-            }
-        }
-    </script>
-</body>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>爬虫控制面板</title>
+    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
+    <style>
+        .topic-item {
+            margin: 5px;
+            padding: 8px 15px;
+            border-radius: 20px;
+            background-color: #f8f9fa;
+            display: inline-block;
+            cursor: pointer;
+        }
+        .topic-item.selected {
+            background-color: #0d6efd;
+            color: white;
+        }
+        .custom-topic-input {
+            margin: 10px 0;
+        }
+        .parameter-section {
+            margin: 20px 0;
+            padding: 20px;
+            border-radius: 10px;
+            background-color: #f8f9fa;
+        }
+    </style>
+</head>
+<body>
+    <div class="container mt-5">
+        <h2 class="mb-4">爬虫控制面板</h2>
+        
+        <!-- 话题选择区域 -->
+        <div class="card mb-4">
+            <div class="card-header">
+                <h5 class="mb-0">选择话题类型</h5>
+            </div>
+            <div class="card-body">
+                <div id="predefinedTopics" class="mb-3">
+                    <!-- 预定义话题将通过JavaScript动态加载 -->
+                </div>
+                
+                <div class="custom-topic-input">
+                    <h6>添加自定义话题</h6>
+                    <div class="input-group">
+                        <input type="text" class="form-control" id="customTopic" placeholder="输入自定义话题">
+                        <button class="btn btn-primary" onclick="addCustomTopic()">
+                            <i class="fas fa-plus"></i> 添加
+                        </button>
+                    </div>
+                </div>
+                
+                <div id="selectedTopics" class="mt-3">
+                    <h6>已选择的话题：</h6>
+                    <div id="selectedTopicsList" class="mt-2">
+                        <!-- 已选择的话题将在这里显示 -->
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 爬虫参数配置 -->
+        <div class="card mb-4">
+            <div class="card-header">
+                <h5 class="mb-0">爬虫参数配置</h5>
+            </div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="mb-3">
+                            <label for="crawlDepth" class="form-label">爬取深度</label>
+                            <input type="number" class="form-control" id="crawlDepth" value="3" min="1" max="10">
+                            <small class="text-muted">每个话题爬取的页数（1-10）</small>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="mb-3">
+                            <label for="interval" class="form-label">爬取间隔(秒)</label>
+                            <input type="number" class="form-control" id="interval" value="5" min="1">
+                            <small class="text-muted">每次请求之间的间隔时间</small>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="mb-3">
+                            <label for="maxRetries" class="form-label">最大重试次数</label>
+                            <input type="number" class="form-control" id="maxRetries" value="3" min="1">
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="mb-3">
+                            <label for="timeout" class="form-label">请求超时时间(秒)</label>
+                            <input type="number" class="form-control" id="timeout" value="30" min="1">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- AI配置助手 -->
+        <div class="card mb-4">
+            <div class="card-header">
+                <h5 class="mb-0">
+                    <i class="fas fa-robot"></i> AI配置助手
+                </h5>
+            </div>
+            <div class="card-body">
+                <div class="mb-3">
+                    <label for="aiPrompt" class="form-label">用自然语言描述您的爬虫需求</label>
+                    <textarea class="form-control" id="aiPrompt" rows="3" 
+                        placeholder="例如：我想爬取最近一周关于人工智能的热门微博，重点关注转发量超过1000的内容，每个话题爬取前5页内容。"></textarea>
+                </div>
+                <div class="d-flex justify-content-between align-items-center">
+                    <button class="btn btn-primary" onclick="generateConfig()">
+                        <i class="fas fa-magic"></i> 生成配置
+                    </button>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="autoApply" checked>
+                        <label class="form-check-label" for="autoApply">
+                            自动应用生成的配置
+                        </label>
+                    </div>
+                </div>
+                <div id="aiResponse" class="mt-3" style="display: none;">
+                    <div class="alert alert-info">
+                        <h6 class="alert-heading">AI助手建议：</h6>
+                        <p id="aiSuggestion" class="mb-0"></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 操作按钮 -->
+        <div class="d-flex justify-content-between mb-5">
+            <button class="btn btn-primary" onclick="startCrawling()">
+                <i class="fas fa-play"></i> 开始爬取
+            </button>
+            <button class="btn btn-secondary" onclick="saveConfig()">
+                <i class="fas fa-save"></i> 保存配置
+            </button>
+        </div>
+
+        <!-- 爬虫状态和日志 -->
+        <div class="card">
+            <div class="card-header">
+                <h5 class="mb-0">爬虫状态</h5>
+            </div>
+            <div class="card-body">
+                <div class="progress mb-3">
+                    <div id="crawlProgress" class="progress-bar" role="progressbar" style="width: 0%"></div>
+                </div>
+                <div class="border p-3 bg-light" style="height: 200px; overflow-y: auto;">
+                    <pre id="crawlLog" class="mb-0"></pre>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // 预定义话题列表
+        const predefinedTopics = [
+            '热门', '社会', '科技', '娱乐', '体育', '财经', 
+            '教育', '健康', '军事', '文化', '汽车', '美食'
+        ];
+
+        // 已选择的话题
+        let selectedTopics = new Set();
+
+        // 初始化页面
+        window.onload = function() {
+            loadPredefinedTopics();
+        };
+
+        // 加载预定义话题
+        function loadPredefinedTopics() {
+            const topicsDiv = document.getElementById('predefinedTopics');
+            predefinedTopics.forEach(topic => {
+                const topicElement = document.createElement('span');
+                topicElement.className = 'topic-item';
+                topicElement.textContent = topic;
+                topicElement.onclick = () => toggleTopic(topic, topicElement);
+                topicsDiv.appendChild(topicElement);
+            });
+        }
+
+        // 切换话题选择状态
+        function toggleTopic(topic, element) {
+            if (selectedTopics.has(topic)) {
+                selectedTopics.delete(topic);
+                element.classList.remove('selected');
+            } else {
+                selectedTopics.add(topic);
+                element.classList.add('selected');
+            }
+            updateSelectedTopicsList();
+        }
+
+        // 添加自定义话题
+        function addCustomTopic() {
+            const input = document.getElementById('customTopic');
+            const topic = input.value.trim();
+            if (topic) {
+                selectedTopics.add(topic);
+                input.value = '';
+                updateSelectedTopicsList();
+            }
+        }
+
+        // 更新已选择的话题列表
+        function updateSelectedTopicsList() {
+            const listDiv = document.getElementById('selectedTopicsList');
+            listDiv.innerHTML = '';
+            selectedTopics.forEach(topic => {
+                const topicElement = document.createElement('span');
+                topicElement.className = 'topic-item selected';
+                topicElement.textContent = topic;
+                topicElement.onclick = () => {
+                    selectedTopics.delete(topic);
+                    updateSelectedTopicsList();
+                };
+                listDiv.appendChild(topicElement);
+            });
+        }
+
+        // 开始爬取
+        function startCrawling() {
+            if (selectedTopics.size === 0) {
+                alert('请至少选择一个话题！');
+                return;
+            }
+
+            const config = {
+                topics: Array.from(selectedTopics),
+                parameters: {
+                    crawlDepth: parseInt(document.getElementById('crawlDepth').value),
+                    interval: parseInt(document.getElementById('interval').value),
+                    maxRetries: parseInt(document.getElementById('maxRetries').value),
+                    timeout: parseInt(document.getElementById('timeout').value)
+                }
+            };
+
+            // 发送爬虫配置到后端
+            fetch('/api/spider/start', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(config)
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    updateCrawlLog('爬虫任务已启动...');
+                } else {
+                    updateCrawlLog('启动失败：' + data.message);
+                }
+            })
+            .catch(error => {
+                updateCrawlLog('错误：' + error.message);
+            });
+        }
+
+        // 保存配置
+        function saveConfig() {
+            const config = {
+                topics: Array.from(selectedTopics),
+                parameters: {
+                    crawlDepth: parseInt(document.getElementById('crawlDepth').value),
+                    interval: parseInt(document.getElementById('interval').value),
+                    maxRetries: parseInt(document.getElementById('maxRetries').value),
+                    timeout: parseInt(document.getElementById('timeout').value)
+                }
+            };
+
+            fetch('/api/spider/save-config', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(config)
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    alert('配置已保存！');
+                } else {
+                    alert('保存失败：' + data.message);
+                }
+            })
+            .catch(error => {
+                alert('保存出错：' + error.message);
+            });
+        }
+
+        // 更新爬虫日志
+        function updateCrawlLog(message) {
+            const log = document.getElementById('crawlLog');
+            const timestamp = new Date().toLocaleTimeString();
+            log.innerHTML += `[${timestamp}] ${message}\n`;
+            log.scrollTop = log.scrollHeight;
+        }
+
+        // WebSocket连接用于实时更新爬虫状态
+        const ws = new WebSocket(`ws://${window.location.host}/ws/spider-status`);
+        
+        ws.onmessage = function(event) {
+            const data = JSON.parse(event.data);
+            if (data.type === 'progress') {
+                document.getElementById('crawlProgress').style.width = data.value + '%';
+            } else if (data.type === 'log') {
+                updateCrawlLog(data.message);
+            }
+        };
+
+        // AI配置生成
+        async function generateConfig() {
+            const prompt = document.getElementById('aiPrompt').value.trim();
+            if (!prompt) {
+                alert('请输入您的爬虫需求描述！');
+                return;
+            }
+
+            const aiResponse = document.getElementById('aiResponse');
+            const aiSuggestion = document.getElementById('aiSuggestion');
+            
+            try {
+                const response = await fetch('/api/spider/ai-config', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ prompt })
+                });
+
+                const data = await response.json();
+                if (data.success) {
+                    // 显示AI建议
+                    aiSuggestion.textContent = data.suggestion;
+                    aiResponse.style.display = 'block';
+
+                    // 如果选择自动应用配置
+                    if (document.getElementById('autoApply').checked) {
+                        // 清除现有选择
+                        selectedTopics.clear();
+                        
+                        // 应用新的话题
+                        data.config.topics.forEach(topic => {
+                            selectedTopics.add(topic);
+                        });
+                        
+                        // 更新参数
+                        document.getElementById('crawlDepth').value = data.config.parameters.crawlDepth;
+                        document.getElementById('interval').value = data.config.parameters.interval;
+                        document.getElementById('maxRetries').value = data.config.parameters.maxRetries;
+                        document.getElementById('timeout').value = data.config.parameters.timeout;
+                        
+                        // 更新UI
+                        updateSelectedTopicsList();
+                        
+                        // 添加提示
+                        updateCrawlLog('AI配置已自动应用');
+                    }
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (error) {
+                aiSuggestion.textContent = '生成配置时出错：' + error.message;
+                aiResponse.style.display = 'block';
+            }
+        }
+    </script>
+</body>
 </html> 
\ No newline at end of file
diff --git a/views/page/__pycache__/page.cpython-38.pyc b/views/page/__pycache__/page.cpython-38.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..eae39e81bbd6e0d56dfa87cb627217d83a0ecc61
GIT binary patch
literal 5041
zcma)A-ESOM6`z@%nVtRc_eX5UPSWpgfjCJ^3njF1oSGDjYZ_OjBMWQ2_u3wN_M>-Z
z8}Ditkb?S9DX+W%2}nR6`o;tA{1^8DA%P1015m4qNSt%#&euAXy4IYz_uS9<o!>p@
zT)#6mR@UIR^Y;%Ae!Hw`|HMl6XG7%%Ji!fJ)0oC|Uu){F-ZWgJS#S$Y(>0rxYc*}x
z*0J62i%rLMs9f+%JE$x8W%aJm+w`l=F?Xyv?vAT|6RLeuy{G7HMg4S*Tg>LutjHWz
zx^KEOeCEL{D?ij(g;js0-P7GU(u{#-oK28so-~u7nPStVIY*iq(9E(q(kzf>9yI6J
z0%;aWvk00ccAhj#q*(^d3cEm>^Q5^5noH~n(kzqaNzgpSo+ix-X`TViv+Oz2Twu@N
z(Q38N5Zjt9tqs2(oXBFpgTQOI<b>cY#>HO9n;pL%a_I=pJi!~GEZy|Gyd%6;D2sx>
z-{nDA(`E5at9^HCa~q2K3pGQIAM$X`_iwkuciVymvKrNQ+8wVE)O3MXmS(4Z$otkR
zzGNw0D}dqUuJHFdf**LNaw2ZnJ81i`DHw3nZt@0hJ^q!TP=#k5o?r_^s6Eh`{!kxk
zp>a>!Ee!RcF)W0Id)m+pP0$!aYiNfS)Qh1F(g};q7-$21U<?Wab6^eZL2=-)!u>J;
zWo}8Q8*tI8H+jG80XC<XkHV&3D~U;1O^($?=rw%4$y-0JpUQdPJK^i?ZYzY^S~omu
zi!B%_iw!UAVTXlAyV>NeFxZSc0x}zI!KHP2s~*;+)uUG_>~;A15zH>f8iIo*)<UY*
z98ti93xKOT0pd15vQs|{aF}~hDb~MY6?a*6Sc|s3PE#{Aw>ufn7ccHE<tJ4AX(z&j
zeJC8n6qLm@iWwBMAf*0NslO-AVSNF_$C`kHt$n%Kcy;$3fHc^B`IRf*eR1~|4^F~%
zXZKz1?YH-~yZgS^c&p>JfR1}>t-9X}yx>kR05a@;;PJb`F0zKi<xWqUNC{jxcoKwW
zl=Z4^>t%Rs!_<w@zt6=5=+$?CNkq^yWU4?jk?GG+$dhTPhlPQDPuGDg%vb~;v#1S?
z&^)$)a)pPwxSp0lZx4)nI#92OZ=jtyw3rFhbFh9~8WsmdW}O(qXZFx;Em6%BeO828
zm1>&!kU21-OfxxQg_RPb+C)`{mG75;rj;$CqX6Hi$)fr;sr?(O@cYN>|3&xtufKls
z=`a68#ZN!^!)L$wJr)1+m)}A0%c>eg?Ect^*j-V|O)m)LIO7NPt`CGG<YYN+<SkhW
zfYZFy;DMNfmBc&<>BL;GRf)4=5u3;XSmZ}U5xbdnaTvH`L^PTi&XOWBRky+1Ii4cZ
zg@Z%OxU5I#$(@A>6zw-WKjebCWjXpBF8@4=8j2+p=TW=>LRufx!M}-bpaOXsi4`ne
z1c8Htmq8%KY~2Bx;UB(DpqoQF)SL8-5bq0`qhCVWkt@vc4!<Sgoez~!-sSjKI5rjE
zUJ8>k@Xb<u1E-c@8?g^uox`jV?i86#+$m<b<63YMy@t31n-I@{0Cz)vu0(p`K~?d9
zzC$`u18)(Esr3m+@DAv#BE#bslEuZhpd>3`FPZ|)y%JX*YizmrINQ?T$O%Q86jyMC
zt0=Ca$Q$@^mX%Iyk2hdI@GOYPys>f1x@n?G&zSSu(6e7&4eR?pN22BIiQkL|ZXF)t
zOlnVNfEO{23(A5Qz$56PiCzUQNH#LS+V*`DPPMYkhBOcS`r%H0JXtP^L50{h@h)UV
z*#@HeVa?8fk0*_ACm+8P4?u%P5Jq!}?_j@IP>h@b)cp*e09`wRWa?Ed!}Uirs$X4I
z0TDw)4wPJ^?!X)=C>W`SdPH)7AtAN6l9pqF1GNhf$;r8@SROmrBE)isnF-C)SZ+})
zw=+bSCI;C4WM;Ryxb9#x(LIKA2NWs2rG0u8?Jn(}dY@iXb$Vx+?-JG3eCY{rXMoiz
z4ky`wJC`bxAPxs4)Aw!OX+!=1Cob#UUIj$O_fVv?zmC=Kqj(L)>nQSOm6Z$t$IzZR
z1K`@U=p3Mn8#w{G@wvDG{rkmLuXD!MxdVWwYSh-0k3r~+GcU-tknm<?p?)QrGm1qK
zGu<h*)3^B{WCn<}JEa0ls;XHj=P4q*xqY*zFphc=z^IMUjnsstSc9#OB4kH<`2{ou
z=n5kTVaJd>5;s8yyjOcUg9RE1PaiphZ$crD1#lRTKIW%|6pujx5V10dOlGE!h-yX=
zKMl7KK{0jT_Q)aSkeEvSCj$3Yi@PJLoxAObPHNheM7Zx!Oe&e(d<5+QCSV8*hQ@>|
z{}Z=B+pnzly6=0f!!yX_!X9=VK_-*CM*&Uc?>2-pD`rlbvjbw73dJ0nNLP&jQ$ZpH
zthn!ShG*DOg{w*Fnn=!0){PRS-s}EEeNBudrXG1M!0FDP)gB4XBbe1@QkXFSi47D#
zK#?pz3Vk{KtY1UN0M9cbUj^*ZDUY1fFT`zV?~f}Rz|D$zjqr?PPO^^&&^vF2*fFbY
zH+9Zmk$sG0yX2gYog~|3xolVDvfZCkwp&u!Zux6vyRH@G0heIo;t3RZ4-ikGcp5~1
zIs#06IZ;8NOR7~et^zMoaBHQh(5k7I7B50yN=K<NNkr={rlzF+$YpUE#Y-sg(5tJF
zTcUv!X)!l(ov04}JGDM$pkfupWAaZqmivT1Lbm`{i9Au9s(j5n^i3GoA4{UN-|n&;
z8}J5!yT@Z6U>cug10Fg!W=7_iEyMw&jTeA$9Vd+ZwoVSJR!Cuvoa_%_(ot4d<5_U{
z-*9Q%1Ad_R5xlo*7o`O`P;ep)s75nl4`HFOQJ{}?E8WoZgUiic%kR(?!JUgVU|+l_
zV|t19au+h{<d#7#(@9H`CAl++F1ntQ$;-GZ9vpWzX?~-DSN7;GKA&jG;K|ZzvYbt&
zv$u!;V%Xc0MrU7IqTPiX3|>{~;vg{HjMB0jSi+D)&XrELK${Xy8CWUK<LyN{*PCtD
w_4#XP+Ta$5OLTE@;G!}K5B^o-yYeI3cJ%TrJS*@lz*AB6vMNu&d)d+d5ApP~00000

literal 0
HcmV?d00001

diff --git a/views/page/page.py b/views/page/page.py
index 6f41065..4b3ad81 100644
--- a/views/page/page.py
+++ b/views/page/page.py
@@ -1,548 +1,548 @@
-from flask import Flask, session, render_template, redirect, Blueprint, request, jsonify, abort
-from utils.mynlp import SnowNLP
-from utils.getHomePageData import *
-from utils.getHotWordPageData import *
-from utils.getTableData import *
-from utils.getPublicData import getAllHotWords, getAllTopics, getArticleByType, getArticleById
-from utils.getEchartsData import *
-from utils.getTopicPageData import *
-from utils.yuqingpredict import *
-from utils.logger import app_logger as logging
-from utils.cache_manager import prediction_cache
-from utils.ai_analyzer import ai_analyzer
-from utils.ai_analysis import AIAnalysis
-from sqlalchemy.orm import Session
-from sqlalchemy import create_engine
-import asyncio
-import torch
-from BCAT_front.predict import model_manager
-from functools import wraps
-import bleach
-import re
-from datetime import datetime, timedelta
-
-pb = Blueprint('page',
-               __name__,
-               url_prefix='/page',
-               template_folder='templates')
-
-def sanitize_input(text):
-    """清理用户输入，防止XSS攻击"""
-    if text is None:
-        return None
-    return bleach.clean(str(text), strip=True)
-
-def validate_csrf_token():
-    """验证CSRF令牌"""
-    token = request.form.get('csrf_token')
-    stored_token = session.get('csrf_token')
-    if not token or not stored_token or token != stored_token:
-        return False
-    return True
-
-def login_required(f):
-    @wraps(f)
-    def decorated_function(*args, **kwargs):
-        if 'username' not in session:
-            return redirect('/user/login')
-        return f(*args, **kwargs)
-    return decorated_function
-
-def api_login_required(f):
-    @wraps(f)
-    def decorated_function(*args, **kwargs):
-        if 'username' not in session:
-            return jsonify({'error': 'Unauthorized'}), 401
-        return f(*args, **kwargs)
-    return decorated_function
-
-def rate_limit(f):
-    @wraps(f)
-    def decorated_function(*args, **kwargs):
-        key = f"rate_limit:{request.remote_addr}:{f.__name__}"
-        current = int(redis_client.get(key) or 0)
-        if current >= 100:  # 每分钟100次请求限制
-            return jsonify({'error': 'Too many requests'}), 429
-        pipe = redis_client.pipeline()
-        pipe.incr(key)
-        pipe.expire(key, 60)  # 60秒后重置
-        pipe.execute()
-        return f(*args, **kwargs)
-    return decorated_function
-
-# 设置设备
-device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
-
-# 设置模型路径
-model_save_path = 'model_pro/final_model.pt'
-bert_model_path = 'model_pro/bert_model'
-ctm_tokenizer_path = 'model_pro/sentence_bert_model'
-
-# 初始化模型
-try:
-    model_manager.load_models(model_save_path, bert_model_path, ctm_tokenizer_path)
-except Exception as e:
-    logging.error(f"模型加载失败: {e}")
-
-# 数据库配置
-DATABASE_URL = os.getenv('DATABASE_URL', "sqlite:///ai_analysis.db")
-engine = create_engine(DATABASE_URL)
-AIAnalysis.metadata.create_all(engine)
-
-def predict_sentiment(text):
-    """使用改进版模型预测单个文本的情感"""
-    try:
-        if not text or len(text.strip()) == 0:
-            return None, None
-        
-        # 清理输入
-        cleaned_text = sanitize_input(text)
-        if not cleaned_text:
-            return None, None
-            
-        predictions, probabilities = model_manager.predict_batch([cleaned_text])
-        if predictions is not None and len(predictions) > 0:
-            return predictions[0], probabilities[0][predictions[0]]
-        return None, None
-    except Exception as e:
-        logging.error(f"预测过程中出现错误: {e}")
-        return None, None
-
-@pb.route('/home')
-@login_required
-def home():
-    try:
-        username = session.get('username')
-        articleLenMax, likeCountMaxAuthorName, cityMax = getHomeTagsData()
-        commentsLikeCountTopFore = getHomeCommentsLikeCountTopFore()
-        X, Y = getHomeArticleCreatedAtChart()
-        typeChart = getHomeTypeChart()
-        createAtChart = getHomeCommentCreatedChart()
-        
-        return render_template('index.html',
-                             username=username,
-                             articleLenMax=articleLenMax,
-                             likeCountMaxAuthorName=likeCountMaxAuthorName,
-                             cityMax=cityMax,
-                             commentsLikeCountTopFore=commentsLikeCountTopFore,
-                             xData=X,
-                             yData=Y,
-                             typeChart=typeChart,
-                             createAtChart=createAtChart)
-    except Exception as e:
-        logging.error(f"加载首页时发生错误: {e}")
-        return render_template('error.html', error_message="加载首页失败")
-
-@pb.route('/hotWord')
-@login_required
-def hotWord():
-    try:
-        username = session.get('username')
-        hotWordList = getAllHotWords()
-        if not hotWordList:
-            return render_template('error.html', error_message="无法获取热词列表")
-            
-        defaultHotWord = sanitize_input(request.args.get('hotWord', hotWordList[0][0]))
-        
-        # 验证热词是否在列表中
-        if not any(defaultHotWord in word for word in hotWordList):
-            return abort(400, "无效的热词")
-            
-        hotWordLen = getHotWordLen(defaultHotWord)
-        X, Y = getHotWordPageCreatedAtCharData(defaultHotWord)
-        
-        value = SnowNLP(defaultHotWord).sentiments
-        if value == 0.5:
-            sentences = '中性'
-        elif value > 0.5:
-            sentences = '正面'
-        elif value < 0.5:
-            sentences = '负面'
-            
-        comments = getCommentFilterData(defaultHotWord)
-        
-        return render_template('hotWord.html',
-                             username=username,
-                             hotWordList=hotWordList,
-                             defaultHotWord=defaultHotWord,
-                             hotWordLen=hotWordLen,
-                             sentences=sentences,
-                             xData=X,
-                             yData=Y,
-                             comments=comments)
-    except Exception as e:
-        logging.error(f"加载热词页面时发生错误: {e}")
-        return render_template('error.html', error_message="加载热词页面失败")
-
-@pb.route('/hotTopic')
-def hotTopic():
-    username = session.get('username')
-    topicList = getAllTopics()
-    defaultTopic = topicList[0][0]
-    if request.args.get('topic'):
-        defaultTopic = request.args.get('topic')
-    topicLen = getTopicLen(defaultTopic)
-    X, Y = getTopicPageCreatedAtCharData()
-    sentences = ''
-    
-    # ... 这里要嵌入 topic 相关内容（热度？）来填充 sentences
-    
-    comments = getCommentFilterDataTopic(defaultTopic)
-    return render_template('hotWord.html',
-                           username=username,
-                           topicList=topicList,
-                           defaultTopic=defaultTopic,
-                           topicLen=topicLen,
-                           sentences=sentences,
-                           xData=X,
-                           yData=Y,
-                           comments=comments)
-
-@pb.route('/tableData')
-@login_required
-def tableData():
-    try:
-        username = session.get('username')
-        defaultFlag = bool(request.args.get('flag', False))
-        tableData = getTableDataList(defaultFlag)
-        
-        return render_template('tableData.html',
-                             username=username,
-                             tableData=tableData,
-                             defaultFlag=defaultFlag)
-    except Exception as e:
-        logging.error(f"加载表格数据时发生错误: {e}")
-        return render_template('error.html', error_message="加载表格数据失败")
-
-@pb.route('/articleChar')
-def articleChar():
-    username = session.get('username')
-    typeList = getTypeList()
-    defaultType = typeList[0]
-    if request.args.get('type'): defaultType = request.args.get('type')
-    X, Y = getArticleLikeCount(defaultType)
-    x1Data, y1Data = getArticleCommentsLen(defaultType)
-    x2Data, y2Data = getArticleRepotsLen(defaultType)
-    return render_template('articleChar.html',
-                           username=username,
-                           typeList=typeList,
-                           defaultType=defaultType,
-                           xData=X,
-                           yData=Y,
-                           x1Data=x1Data,
-                           y1Data=y1Data,
-                           x2Data=x2Data,
-                           y2Data=y2Data)
-
-@pb.route('/ipChar')
-@login_required
-def ipChar():
-    try:
-        username = session.get('username')
-        articleRegionData = getIPByArticleRegion()
-        commentRegionData = getIPByCommentsRegion()
-        
-        return render_template('ipChar.html',
-                             username=username,
-                             articleRegionData=articleRegionData,
-                             commentRegionData=commentRegionData)
-    except Exception as e:
-        logging.error(f"加载IP统计时发生错误: {e}")
-        return render_template('error.html', error_message="加载IP统计失败")
-
-@pb.route('/commentChar')
-@login_required
-def commentChar():
-    try:
-        username = session.get('username')
-        X, Y = getCommentDataOne()
-        genderPieData = getCommentDataTwo()
-        
-        return render_template('commentChar.html',
-                             username=username,
-                             xData=X,
-                             yData=Y,
-                             genderPieData=genderPieData)
-    except Exception as e:
-        logging.error(f"加载评论统计时发生错误: {e}")
-        return render_template('error.html', error_message="加载评论统计失败")
-
-@pb.route('/yuqingChar')
-@login_required
-def yuqingChar():
-    try:
-        username = session.get('username')
-        model_type = sanitize_input(request.args.get('model', 'pro'))
-        
-        # 验证模型类型
-        if model_type not in ['pro', 'basic']:
-            return abort(400, "无效的模型类型")
-        
-        X, Y, biedata = getYuQingCharDataOne()
-        biedata1, biedata2 = getYuQingCharDataTwo(model_type)
-        x1Data, y1Data = getYuQingCharDataThree()
-        
-        return render_template('yuqingChar.html',
-                             username=username,
-                             xData=X,
-                             yData=Y,
-                             biedata=biedata,
-                             biedata1=biedata1,
-                             biedata2=biedata2,
-                             x1Data=x1Data,
-                             y1Data=y1Data,
-                             model_type=model_type)
-    except Exception as e:
-        logging.error(f"加载舆情统计时发生错误: {e}")
-        return render_template('error.html', error_message="加载舆情统计失败")
-
-@pb.route('/yuqingpredict')
-@login_required
-def yuqingpredict():
-    try:
-        username = session.get('username')
-        TopicList = getAllTopicData()
-        if not TopicList:
-            return render_template('error.html', error_message="无法获取话题列表")
-            
-        defaultTopic = sanitize_input(request.args.get('Topic', TopicList[0][0]))
-        
-        # 验证话题是否在列表中
-        if not any(defaultTopic in topic for topic in TopicList):
-            return abort(400, "无效的话题")
-            
-        TopicLen = getTopicLen(defaultTopic)
-        X, Y = getTopicCreatedAtandpredictData(defaultTopic)
-        
-        model_type = sanitize_input(request.args.get('model', 'pro'))
-        if model_type not in ['pro', 'basic']:
-            return abort(400, "无效的模型类型")
-        
-        # 尝试从缓存获取预测结果
-        cache_key = f"{defaultTopic}_{model_type}"
-        cached_result = prediction_cache.get(cache_key)
-        
-        if cached_result is not None:
-            sentences = cached_result
-        else:
-            if model_type == 'basic':
-                value = SnowNLP(defaultTopic).sentiments
-                if value == 0.5:
-                    sentences = '中性'
-                elif value > 0.5:
-                    sentences = '正面'
-                elif value < 0.5:
-                    sentences = '负面'
-            else:
-                predicted_label, confidence = predict_sentiment(defaultTopic)
-                if predicted_label is not None:
-                    sentences = '良好' if predicted_label == 0 else '不良'
-                    sentences = f"{sentences} (置信度: {confidence:.2%})"
-                else:
-                    sentences = '预测失败，请稍后重试'
-                    logging.error(f"预测失败，话题: {defaultTopic}")
-            
-            # 将结果存入缓存
-            prediction_cache.set(cache_key, sentences)
-        
-        comments = getCommentFilterDataTopic(defaultTopic)
-        
-        return render_template('yuqingpredict.html',
-                             username=username,
-                             TopicList=TopicList,
-                             defaultTopic=defaultTopic,
-                             TopicLen=TopicLen,
-                             sentences=sentences,
-                             xData=X,
-                             yData=Y,
-                             comments=comments,
-                             model_type=model_type)
-    except Exception as e:
-        logging.error(f"加载舆情预测时发生错误: {e}")
-        return render_template('error.html', error_message="加载舆情预测失败")
-
-@pb.route('/articleCloud')
-@login_required
-def articleCloud():
-    try:
-        username = session.get('username')
-        return render_template('articleContentCloud.html', username=username)
-    except Exception as e:
-        logging.error(f"加载文章云图时发生错误: {e}")
-        return render_template('error.html', error_message="加载文章云图失败")
-
-@pb.route('/page/index')
-def index():
-    """首页路由"""
-    try:
-        hotWordList = getAllHotWords()
-        logging.info("成功获取热词列表")
-        return render_template('index.html', hotWordList=hotWordList)
-    except Exception as e:
-        logging.error(f"渲染首页时发生错误: {e}")
-        return render_template('error.html', error_message="加载首页失败")
-
-@pb.route('/page/article/<type>')
-def article(type):
-    """文章列表页路由"""
-    try:
-        articleList = getArticleByType(type)
-        logging.info(f"成功获取类型为 {type} 的文章列表")
-        return render_template('article.html', articleList=articleList)
-    except Exception as e:
-        logging.error(f"获取文章列表时发生错误: {e}")
-        return render_template('error.html', error_message="加载文章列表失败")
-
-@pb.route('/page/articleChar/<id>')
-def articleChar(id):
-    """文章详情页路由"""
-    try:
-        article = getArticleById(id)
-        if not article:
-            logging.warning(f"未找到ID为 {id} 的文章")
-            return render_template('error.html', error_message="文章不存在")
-        logging.info(f"成功获取ID为 {id} 的文章详情")
-        return render_template('articleChar.html', article=article)
-    except Exception as e:
-        logging.error(f"获取文章详情时发生错误: {e}")
-        return render_template('error.html', error_message="加载文章详情失败")
-
-@pb.route('/api/analyze_messages', methods=['POST'])
-@api_login_required
-@rate_limit
-async def analyze_messages():
-    try:
-        if not validate_csrf_token():
-            return jsonify({'error': 'Invalid CSRF token'}), 403
-            
-        data = request.get_json()
-        if not data:
-            return jsonify({'error': 'No data provided'}), 400
-            
-        batch_size = min(int(data.get('batch_size', 50)), 100)  # 限制批量大小
-        model_type = sanitize_input(data.get('model_type', 'gpt-3.5-turbo'))
-        analysis_depth = sanitize_input(data.get('analysis_depth', 'standard'))
-        
-        # 验证参数
-        if model_type not in ['gpt-3.5-turbo', 'gpt-4']:
-            return jsonify({'error': 'Invalid model type'}), 400
-            
-        if analysis_depth not in ['basic', 'standard', 'deep']:
-            return jsonify({'error': 'Invalid analysis depth'}), 400
-        
-        messages = getRecentMessages(batch_size)
-        if not messages:
-            return jsonify({
-                'success': False,
-                'error': '没有找到需要分析的消息'
-            }), 404
-        
-        analysis_results = await ai_analyzer.analyze_messages(
-            messages=messages,
-            batch_size=batch_size,
-            model_type=model_type,
-            analysis_depth=analysis_depth
-        )
-        
-        if not analysis_results:
-            return jsonify({
-                'success': False,
-                'error': '分析过程中出现错误'
-            }), 500
-        
-        try:
-            with Session(engine) as session:
-                for result in analysis_results:
-                    analysis = AIAnalysis(
-                        message_id=result['message_id'],
-                        sentiment=result['sentiment'],
-                        sentiment_score=float(result['sentiment_score']),
-                        keywords=result['keywords'],
-                        key_points=result['key_points'],
-                        influence_analysis=result['influence_analysis'],
-                        risk_level=result['risk_level']
-                    )
-                    session.add(analysis)
-                session.commit()
-        except Exception as e:
-            logging.error(f"保存分析结果时出错: {e}")
-            return jsonify({
-                'success': False,
-                'error': '保存分析结果失败'
-            }), 500
-        
-        display_results = [
-            ai_analyzer.format_analysis_for_display(result)
-            for result in analysis_results
-        ]
-        
-        return jsonify({
-            'success': True,
-            'data': display_results
-        })
-        
-    except Exception as e:
-        logging.error(f"分析消息时发生错误: {e}")
-        return jsonify({
-            'success': False,
-            'error': str(e)
-        }), 500
-
-@pb.route('/api/get_analysis/<int:message_id>')
-@api_login_required
-@rate_limit
-def get_message_analysis(message_id):
-    """获取特定消息的分析结果"""
-    try:
-        if not message_id or message_id < 1:
-            return jsonify({'error': 'Invalid message ID'}), 400
-            
-        with Session(engine) as session:
-            analysis = session.query(AIAnalysis)\
-                .filter(AIAnalysis.message_id == message_id)\
-                .order_by(AIAnalysis.created_at.desc())\
-                .first()
-            
-            if analysis:
-                return jsonify({
-                    'success': True,
-                    'data': analysis.to_dict()
-                })
-            else:
-                return jsonify({
-                    'success': False,
-                    'error': '未找到分析结果'
-                }), 404
-    
-    except Exception as e:
-        logging.error(f"获取分析结果时出错: {e}")
-        return jsonify({
-            'success': False,
-            'error': str(e)
-        }), 500
-
-def getRecentMessages(limit=50):
-    """获取最近的消息"""
-    # 这里需要根据你的数据库结构实现具体的查询逻辑
-    messages = []
-    try:
-        # 示例查询逻辑
-        with Session(engine) as session:
-            results = session.execute(
-                """
-                SELECT id, content 
-                FROM comments 
-                ORDER BY created_at DESC 
-                LIMIT :limit
-                """,
-                {'limit': limit}
-            ).fetchall()
-            
-            messages = [
-                {'id': row[0], 'content': row[1]}
-                for row in results
-            ]
-    except Exception as e:
-        logging.error(f"获取最近消息时出错: {e}")
-    
-    return messages
+from flask import Flask, session, render_template, redirect, Blueprint, request, jsonify, abort
+from utils.mynlp import SnowNLP
+from utils.getHomePageData import *
+from utils.getHotWordPageData import *
+from utils.getTableData import *
+from utils.getPublicData import getAllHotWords, getAllTopics, getArticleByType, getArticleById
+from utils.getEchartsData import *
+from utils.getTopicPageData import *
+from utils.yuqingpredict import *
+from utils.logger import app_logger as logging
+from utils.cache_manager import prediction_cache
+from utils.ai_analyzer import ai_analyzer
+from utils.ai_analysis import AIAnalysis
+from sqlalchemy.orm import Session
+from sqlalchemy import create_engine
+import asyncio
+import torch
+from BCAT_front.predict import model_manager
+from functools import wraps
+import bleach
+import re
+from datetime import datetime, timedelta
+
+pb = Blueprint('page',
+               __name__,
+               url_prefix='/page',
+               template_folder='templates')
+
+def sanitize_input(text):
+    """清理用户输入，防止XSS攻击"""
+    if text is None:
+        return None
+    return bleach.clean(str(text), strip=True)
+
+def validate_csrf_token():
+    """验证CSRF令牌"""
+    token = request.form.get('csrf_token')
+    stored_token = session.get('csrf_token')
+    if not token or not stored_token or token != stored_token:
+        return False
+    return True
+
+def login_required(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if 'username' not in session:
+            return redirect('/user/login')
+        return f(*args, **kwargs)
+    return decorated_function
+
+def api_login_required(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if 'username' not in session:
+            return jsonify({'error': 'Unauthorized'}), 401
+        return f(*args, **kwargs)
+    return decorated_function
+
+def rate_limit(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        key = f"rate_limit:{request.remote_addr}:{f.__name__}"
+        current = int(redis_client.get(key) or 0)
+        if current >= 100:  # 每分钟100次请求限制
+            return jsonify({'error': 'Too many requests'}), 429
+        pipe = redis_client.pipeline()
+        pipe.incr(key)
+        pipe.expire(key, 60)  # 60秒后重置
+        pipe.execute()
+        return f(*args, **kwargs)
+    return decorated_function
+
+# 设置设备
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+
+# 设置模型路径
+model_save_path = 'model_pro/final_model.pt'
+bert_model_path = 'model_pro/bert_model'
+ctm_tokenizer_path = 'model_pro/sentence_bert_model'
+
+# 初始化模型
+try:
+    model_manager.load_models(model_save_path, bert_model_path, ctm_tokenizer_path)
+except Exception as e:
+    logging.error(f"模型加载失败: {e}")
+
+# 数据库配置
+DATABASE_URL = os.getenv('DATABASE_URL', "sqlite:///ai_analysis.db")
+engine = create_engine(DATABASE_URL)
+AIAnalysis.metadata.create_all(engine)
+
+def predict_sentiment(text):
+    """使用改进版模型预测单个文本的情感"""
+    try:
+        if not text or len(text.strip()) == 0:
+            return None, None
+        
+        # 清理输入
+        cleaned_text = sanitize_input(text)
+        if not cleaned_text:
+            return None, None
+            
+        predictions, probabilities = model_manager.predict_batch([cleaned_text])
+        if predictions is not None and len(predictions) > 0:
+            return predictions[0], probabilities[0][predictions[0]]
+        return None, None
+    except Exception as e:
+        logging.error(f"预测过程中出现错误: {e}")
+        return None, None
+
+@pb.route('/home')
+@login_required
+def home():
+    try:
+        username = session.get('username')
+        articleLenMax, likeCountMaxAuthorName, cityMax = getHomeTagsData()
+        commentsLikeCountTopFore = getHomeCommentsLikeCountTopFore()
+        X, Y = getHomeArticleCreatedAtChart()
+        typeChart = getHomeTypeChart()
+        createAtChart = getHomeCommentCreatedChart()
+        
+        return render_template('index.html',
+                             username=username,
+                             articleLenMax=articleLenMax,
+                             likeCountMaxAuthorName=likeCountMaxAuthorName,
+                             cityMax=cityMax,
+                             commentsLikeCountTopFore=commentsLikeCountTopFore,
+                             xData=X,
+                             yData=Y,
+                             typeChart=typeChart,
+                             createAtChart=createAtChart)
+    except Exception as e:
+        logging.error(f"加载首页时发生错误: {e}")
+        return render_template('error.html', error_message="加载首页失败")
+
+@pb.route('/hotWord')
+@login_required
+def hotWord():
+    try:
+        username = session.get('username')
+        hotWordList = getAllHotWords()
+        if not hotWordList:
+            return render_template('error.html', error_message="无法获取热词列表")
+            
+        defaultHotWord = sanitize_input(request.args.get('hotWord', hotWordList[0][0]))
+        
+        # 验证热词是否在列表中
+        if not any(defaultHotWord in word for word in hotWordList):
+            return abort(400, "无效的热词")
+            
+        hotWordLen = getHotWordLen(defaultHotWord)
+        X, Y = getHotWordPageCreatedAtCharData(defaultHotWord)
+        
+        value = SnowNLP(defaultHotWord).sentiments
+        if value == 0.5:
+            sentences = '中性'
+        elif value > 0.5:
+            sentences = '正面'
+        elif value < 0.5:
+            sentences = '负面'
+            
+        comments = getCommentFilterData(defaultHotWord)
+        
+        return render_template('hotWord.html',
+                             username=username,
+                             hotWordList=hotWordList,
+                             defaultHotWord=defaultHotWord,
+                             hotWordLen=hotWordLen,
+                             sentences=sentences,
+                             xData=X,
+                             yData=Y,
+                             comments=comments)
+    except Exception as e:
+        logging.error(f"加载热词页面时发生错误: {e}")
+        return render_template('error.html', error_message="加载热词页面失败")
+
+@pb.route('/hotTopic')
+def hotTopic():
+    username = session.get('username')
+    topicList = getAllTopics()
+    defaultTopic = topicList[0][0]
+    if request.args.get('topic'):
+        defaultTopic = request.args.get('topic')
+    topicLen = getTopicLen(defaultTopic)
+    X, Y = getTopicPageCreatedAtCharData()
+    sentences = ''
+    
+    # ... 这里要嵌入 topic 相关内容（热度？）来填充 sentences
+    
+    comments = getCommentFilterDataTopic(defaultTopic)
+    return render_template('hotWord.html',
+                           username=username,
+                           topicList=topicList,
+                           defaultTopic=defaultTopic,
+                           topicLen=topicLen,
+                           sentences=sentences,
+                           xData=X,
+                           yData=Y,
+                           comments=comments)
+
+@pb.route('/tableData')
+@login_required
+def tableData():
+    try:
+        username = session.get('username')
+        defaultFlag = bool(request.args.get('flag', False))
+        tableData = getTableDataList(defaultFlag)
+        
+        return render_template('tableData.html',
+                             username=username,
+                             tableData=tableData,
+                             defaultFlag=defaultFlag)
+    except Exception as e:
+        logging.error(f"加载表格数据时发生错误: {e}")
+        return render_template('error.html', error_message="加载表格数据失败")
+
+@pb.route('/articleChar')
+def articleChar():
+    username = session.get('username')
+    typeList = getTypeList()
+    defaultType = typeList[0]
+    if request.args.get('type'): defaultType = request.args.get('type')
+    X, Y = getArticleLikeCount(defaultType)
+    x1Data, y1Data = getArticleCommentsLen(defaultType)
+    x2Data, y2Data = getArticleRepotsLen(defaultType)
+    return render_template('articleChar.html',
+                           username=username,
+                           typeList=typeList,
+                           defaultType=defaultType,
+                           xData=X,
+                           yData=Y,
+                           x1Data=x1Data,
+                           y1Data=y1Data,
+                           x2Data=x2Data,
+                           y2Data=y2Data)
+
+@pb.route('/ipChar')
+@login_required
+def ipChar():
+    try:
+        username = session.get('username')
+        articleRegionData = getIPByArticleRegion()
+        commentRegionData = getIPByCommentsRegion()
+        
+        return render_template('ipChar.html',
+                             username=username,
+                             articleRegionData=articleRegionData,
+                             commentRegionData=commentRegionData)
+    except Exception as e:
+        logging.error(f"加载IP统计时发生错误: {e}")
+        return render_template('error.html', error_message="加载IP统计失败")
+
+@pb.route('/commentChar')
+@login_required
+def commentChar():
+    try:
+        username = session.get('username')
+        X, Y = getCommentDataOne()
+        genderPieData = getCommentDataTwo()
+        
+        return render_template('commentChar.html',
+                             username=username,
+                             xData=X,
+                             yData=Y,
+                             genderPieData=genderPieData)
+    except Exception as e:
+        logging.error(f"加载评论统计时发生错误: {e}")
+        return render_template('error.html', error_message="加载评论统计失败")
+
+@pb.route('/yuqingChar')
+@login_required
+def yuqingChar():
+    try:
+        username = session.get('username')
+        model_type = sanitize_input(request.args.get('model', 'pro'))
+        
+        # 验证模型类型
+        if model_type not in ['pro', 'basic']:
+            return abort(400, "无效的模型类型")
+        
+        X, Y, biedata = getYuQingCharDataOne()
+        biedata1, biedata2 = getYuQingCharDataTwo(model_type)
+        x1Data, y1Data = getYuQingCharDataThree()
+        
+        return render_template('yuqingChar.html',
+                             username=username,
+                             xData=X,
+                             yData=Y,
+                             biedata=biedata,
+                             biedata1=biedata1,
+                             biedata2=biedata2,
+                             x1Data=x1Data,
+                             y1Data=y1Data,
+                             model_type=model_type)
+    except Exception as e:
+        logging.error(f"加载舆情统计时发生错误: {e}")
+        return render_template('error.html', error_message="加载舆情统计失败")
+
+@pb.route('/yuqingpredict')
+@login_required
+def yuqingpredict():
+    try:
+        username = session.get('username')
+        TopicList = getAllTopicData()
+        if not TopicList:
+            return render_template('error.html', error_message="无法获取话题列表")
+            
+        defaultTopic = sanitize_input(request.args.get('Topic', TopicList[0][0]))
+        
+        # 验证话题是否在列表中
+        if not any(defaultTopic in topic for topic in TopicList):
+            return abort(400, "无效的话题")
+            
+        TopicLen = getTopicLen(defaultTopic)
+        X, Y = getTopicCreatedAtandpredictData(defaultTopic)
+        
+        model_type = sanitize_input(request.args.get('model', 'pro'))
+        if model_type not in ['pro', 'basic']:
+            return abort(400, "无效的模型类型")
+        
+        # 尝试从缓存获取预测结果
+        cache_key = f"{defaultTopic}_{model_type}"
+        cached_result = prediction_cache.get(cache_key)
+        
+        if cached_result is not None:
+            sentences = cached_result
+        else:
+            if model_type == 'basic':
+                value = SnowNLP(defaultTopic).sentiments
+                if value == 0.5:
+                    sentences = '中性'
+                elif value > 0.5:
+                    sentences = '正面'
+                elif value < 0.5:
+                    sentences = '负面'
+            else:
+                predicted_label, confidence = predict_sentiment(defaultTopic)
+                if predicted_label is not None:
+                    sentences = '良好' if predicted_label == 0 else '不良'
+                    sentences = f"{sentences} (置信度: {confidence:.2%})"
+                else:
+                    sentences = '预测失败，请稍后重试'
+                    logging.error(f"预测失败，话题: {defaultTopic}")
+            
+            # 将结果存入缓存
+            prediction_cache.set(cache_key, sentences)
+        
+        comments = getCommentFilterDataTopic(defaultTopic)
+        
+        return render_template('yuqingpredict.html',
+                             username=username,
+                             TopicList=TopicList,
+                             defaultTopic=defaultTopic,
+                             TopicLen=TopicLen,
+                             sentences=sentences,
+                             xData=X,
+                             yData=Y,
+                             comments=comments,
+                             model_type=model_type)
+    except Exception as e:
+        logging.error(f"加载舆情预测时发生错误: {e}")
+        return render_template('error.html', error_message="加载舆情预测失败")
+
+@pb.route('/articleCloud')
+@login_required
+def articleCloud():
+    try:
+        username = session.get('username')
+        return render_template('articleContentCloud.html', username=username)
+    except Exception as e:
+        logging.error(f"加载文章云图时发生错误: {e}")
+        return render_template('error.html', error_message="加载文章云图失败")
+
+@pb.route('/page/index')
+def index():
+    """首页路由"""
+    try:
+        hotWordList = getAllHotWords()
+        logging.info("成功获取热词列表")
+        return render_template('index.html', hotWordList=hotWordList)
+    except Exception as e:
+        logging.error(f"渲染首页时发生错误: {e}")
+        return render_template('error.html', error_message="加载首页失败")
+
+@pb.route('/page/article/<type>')
+def article(type):
+    """文章列表页路由"""
+    try:
+        articleList = getArticleByType(type)
+        logging.info(f"成功获取类型为 {type} 的文章列表")
+        return render_template('article.html', articleList=articleList)
+    except Exception as e:
+        logging.error(f"获取文章列表时发生错误: {e}")
+        return render_template('error.html', error_message="加载文章列表失败")
+
+@pb.route('/page/articleChar/<id>')
+def articleChar(id):
+    """文章详情页路由"""
+    try:
+        article = getArticleById(id)
+        if not article:
+            logging.warning(f"未找到ID为 {id} 的文章")
+            return render_template('error.html', error_message="文章不存在")
+        logging.info(f"成功获取ID为 {id} 的文章详情")
+        return render_template('articleChar.html', article=article)
+    except Exception as e:
+        logging.error(f"获取文章详情时发生错误: {e}")
+        return render_template('error.html', error_message="加载文章详情失败")
+
+@pb.route('/api/analyze_messages', methods=['POST'])
+@api_login_required
+@rate_limit
+async def analyze_messages():
+    try:
+        if not validate_csrf_token():
+            return jsonify({'error': 'Invalid CSRF token'}), 403
+            
+        data = request.get_json()
+        if not data:
+            return jsonify({'error': 'No data provided'}), 400
+            
+        batch_size = min(int(data.get('batch_size', 50)), 100)  # 限制批量大小
+        model_type = sanitize_input(data.get('model_type', 'gpt-3.5-turbo'))
+        analysis_depth = sanitize_input(data.get('analysis_depth', 'standard'))
+        
+        # 验证参数
+        if model_type not in ['gpt-3.5-turbo', 'gpt-4']:
+            return jsonify({'error': 'Invalid model type'}), 400
+            
+        if analysis_depth not in ['basic', 'standard', 'deep']:
+            return jsonify({'error': 'Invalid analysis depth'}), 400
+        
+        messages = getRecentMessages(batch_size)
+        if not messages:
+            return jsonify({
+                'success': False,
+                'error': '没有找到需要分析的消息'
+            }), 404
+        
+        analysis_results = await ai_analyzer.analyze_messages(
+            messages=messages,
+            batch_size=batch_size,
+            model_type=model_type,
+            analysis_depth=analysis_depth
+        )
+        
+        if not analysis_results:
+            return jsonify({
+                'success': False,
+                'error': '分析过程中出现错误'
+            }), 500
+        
+        try:
+            with Session(engine) as session:
+                for result in analysis_results:
+                    analysis = AIAnalysis(
+                        message_id=result['message_id'],
+                        sentiment=result['sentiment'],
+                        sentiment_score=float(result['sentiment_score']),
+                        keywords=result['keywords'],
+                        key_points=result['key_points'],
+                        influence_analysis=result['influence_analysis'],
+                        risk_level=result['risk_level']
+                    )
+                    session.add(analysis)
+                session.commit()
+        except Exception as e:
+            logging.error(f"保存分析结果时出错: {e}")
+            return jsonify({
+                'success': False,
+                'error': '保存分析结果失败'
+            }), 500
+        
+        display_results = [
+            ai_analyzer.format_analysis_for_display(result)
+            for result in analysis_results
+        ]
+        
+        return jsonify({
+            'success': True,
+            'data': display_results
+        })
+        
+    except Exception as e:
+        logging.error(f"分析消息时发生错误: {e}")
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        }), 500
+
+@pb.route('/api/get_analysis/<int:message_id>')
+@api_login_required
+@rate_limit
+def get_message_analysis(message_id):
+    """获取特定消息的分析结果"""
+    try:
+        if not message_id or message_id < 1:
+            return jsonify({'error': 'Invalid message ID'}), 400
+            
+        with Session(engine) as session:
+            analysis = session.query(AIAnalysis)\
+                .filter(AIAnalysis.message_id == message_id)\
+                .order_by(AIAnalysis.created_at.desc())\
+                .first()
+            
+            if analysis:
+                return jsonify({
+                    'success': True,
+                    'data': analysis.to_dict()
+                })
+            else:
+                return jsonify({
+                    'success': False,
+                    'error': '未找到分析结果'
+                }), 404
+    
+    except Exception as e:
+        logging.error(f"获取分析结果时出错: {e}")
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        }), 500
+
+def getRecentMessages(limit=50):
+    """获取最近的消息"""
+    # 这里需要根据你的数据库结构实现具体的查询逻辑
+    messages = []
+    try:
+        # 示例查询逻辑
+        with Session(engine) as session:
+            results = session.execute(
+                """
+                SELECT id, content 
+                FROM comments 
+                ORDER BY created_at DESC 
+                LIMIT :limit
+                """,
+                {'limit': limit}
+            ).fetchall()
+            
+            messages = [
+                {'id': row[0], 'content': row[1]}
+                for row in results
+            ]
+    except Exception as e:
+        logging.error(f"获取最近消息时出错: {e}")
+    
+    return messages
diff --git a/views/page/templates/articleChar.html b/views/page/templates/articleChar.html
index bbc0243..e10542c 100644
--- a/views/page/templates/articleChar.html
+++ b/views/page/templates/articleChar.html
@@ -1,345 +1,345 @@
-{% extends 'base_page.html' %}
-{% block title %}
-    文章分析
-{% endblock %}
-
-{% block  nav %}
-<nav class="iq-sidebar-menu">
-                  <ul id="iq-sidebar-toggle" class="side-menu">
-                      <li class="px-3 pt-3 pb-2 ">
-                          <span class="text-uppercase small font-weight-bold">首页</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/home" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">首页</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/hotWord" class="svg-icon ">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">热词统计</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/tableData" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">微博舆情统计</span>
-                          </a>
-                      </li>
-                      <li class="px-3 pt-3 pb-2 ">
-                          <span class="text-uppercase small font-weight-bold">数据可视化</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">文章分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/ipChar" class="svg-icon">
-                              <i class="">
-                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
-                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">IP分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/commentChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
-                                  </svg>
-                              </i><span class="ml-2">评论分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingpredict" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情预测</span>
-                          </a>
-                      </li>
-                      <li class="px-3 pt-3 pb-2">
-                          <span class="text-uppercase small font-weight-bold">词云图</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleCloud" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
-                                  </svg>
-                              </i><span class="ml-2">文章内容词云图</span>
-                          </a>
-                      </li>
-                  </ul>
-              </nav>
-{% endblock %}
-
-{% block content %}
-          <div class="container-fluid">
-                <div class="row">
-              <div class="col-md-12 mb-4 mt-1">
-                 <div class="d-flex flex-wrap justify-content-between align-items-center">
-                     <h4 class="font-weight-bold">文章分析页</h4>
-                 </div>
-              </div>
-           </div>
-                <div class="row">
-                      <div class="col-lg-12">
-                     <div class="card card-block card-stretch card-height">
-                        <div class="card-body">
-                                 <div class="form-group">
-                                    <label>类型选择</label>
-                                    <select onchange="typeChange(event)" class="form-control mb-3">
-                                        {% for i in typeList %}
-                                            {% if defaultType == i %}
-                                                                                                   <option selected value="{{ i }}">{{ i }}</option>
-                                            {% else %}
-                                                                                                   <option value="{{ i }}">{{ i }}</option>
-                                            {% endif %}
-                                        {% endfor %}
-                                    </select>
-                                     <script>
-                                         function typeChange(e){
-                                             window.location.href = 'http://127.0.0.1:5000/page/articleChar?type=' + e.target.value
-                                         }
-                                     </script>
-                                 </div>
-                              </div>
-                     </div>
-                  </div>
-                  </div>
-                <div class="row">
-                    <div class="col-lg-6">
-                         <div class="card card-block">
-                            <div class="card-header d-flex justify-content-between pb-0">
-                               <div class="header-title">
-                                  <h4 class="card-title mb-0">文章点赞量分析 👍</h4>
-                               </div>
-                            </div>
-                            <div class="card-body">
-                               <div id="main" style="width: 100%;height: 450px"></div>
-                            </div>
-                         </div>
-                      </div>
-                    <div class="col-lg-6">
-                         <div class="card card-block">
-                            <div class="card-header d-flex justify-content-between pb-0">
-                               <div class="header-title">
-                                  <h4 class="card-title mb-0">文章评论量分析 🔥</h4>
-                               </div>
-                            </div>
-                            <div class="card-body">
-                               <div id="mainTwo" style="width: 100%;height: 450px"></div>
-                            </div>
-                         </div>
-                      </div>
-                    <div class="col-lg-12">
-                         <div class="card card-block">
-                            <div class="card-header d-flex justify-content-between pb-0">
-                               <div class="header-title">
-                                  <h4 class="card-title mb-0">文章转发量分析 🥇</h4>
-                               </div>
-                            </div>
-                            <div class="card-body">
-                               <div id="mainThree" style="width: 100%;height: 450px"></div>
-                            </div>
-                         </div>
-                      </div>
-                </div>
-          </div>
-{% endblock %}
-
-{% block echarts %}
-    <script>
-    var chartDom = document.getElementById('main');
-    var myChart = echarts.init(chartDom);
-    var option;
-    var colors = ['#66cc99','#ffcc66','#ff6666','#6699cc']
-        option = {
-          title: {
-            text: '点赞区间统计'
-          },
-          tooltip: {
-            trigger: 'axis'
-          },
-          legend: {
-            data: ['区间个数']
-          },
-          toolbox: {
-            show: true,
-            feature: {
-              dataView: { show: true, readOnly: false },
-              magicType: { show: true, type: ['line', 'bar'] },
-              restore: { show: true },
-              saveAsImage: { show: true }
-            }
-          },
-          calculable: true,
-          xAxis: [
-            {
-              type: 'category',
-              // prettier-ignore
-              data:{{ xData |tojson }}
-            }
-          ],
-          yAxis: [
-            {
-              type: 'value'
-            }
-          ],
-          series: [
-            {
-              name: '区间个数',
-              type: 'bar',
-              data: {{ yData }},
-                itemStyle:{
-                  color:function(params){
-                      return colors[params.dataIndex % colors.length];
-                  }
-                },
-              markPoint: {
-                data: [
-                  { type: 'max', name: 'Max' },
-                  { type: 'min', name: 'Min' }
-                ]
-              },
-              markLine: {
-                data: [{ type: 'average', name: 'Avg' }]
-              }
-            }
-          ]
-        };
-        option && myChart.setOption(option);
-    </script>
-    <script>
-        var chartDom = document.getElementById('mainTwo');
-        var myChart = echarts.init(chartDom);
-        var option;
-
-        option = {
-            toolbox: {
-            show: true,
-            feature: {
-              dataView: { show: true, readOnly: false },
-              magicType: { show: true, type: ['line', 'bar'] },
-              restore: { show: true },
-              saveAsImage: { show: true }
-            }
-          },
-             title: {
-            text: '文章评论区间统计'
-          },
-            tooltip: {
-            trigger: 'axis'
-          },
-          legend: {
-
-          },
-          xAxis: {
-            type: 'category',
-            data: {{ x1Data | tojson }}
-          },
-          yAxis: {
-            type: 'value'
-          },
-          series: [
-            {
-                name:"区间个数",
-              data: {{ y1Data }},
-              type: 'line',
-              symbol: 'triangle',
-              symbolSize: 20,
-              lineStyle: {
-                color: '#5470C6',
-                width: 4,
-                type: 'dashed'
-              },
-              itemStyle: {
-                borderWidth: 3,
-                borderColor: '#EE6666',
-                color: 'yellow'
-              }
-            }
-          ]
-        };
-
-        option && myChart.setOption(option);
-
-    </script>
-    <script>
-    var chartDom = document.getElementById('mainThree');
-    var myChart = echarts.init(chartDom);
-    var option;
-
-    option = {
-      title: {
-        text: '转发量分析区间图'
-      },
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow'
-        }
-      },
-      legend: {},
-      grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true
-      },
-      xAxis: {
-        type: 'value',
-        boundaryGap: [0, 0.01]
-      },
-      yAxis: {
-        type: 'category',
-        data: {{ x2Data | tojson }}
-      },
-      series: [
-        {
-          name: '区间个数',
-          type: 'bar',
-          data: {{ y2Data }}
-        }
-      ]
-    };
-
-    option && myChart.setOption(option);
-
-    </script>
+{% extends 'base_page.html' %}
+{% block title %}
+    <span data-i18n="articleChar">文章分析</span>
+{% endblock %}
+
+{% block  nav %}
+<nav class="iq-sidebar-menu">
+                  <ul id="iq-sidebar-toggle" class="side-menu">
+                      <li class="px-3 pt-3 pb-2 ">
+                          <span class="text-uppercase small font-weight-bold" data-i18n="home">首页</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/home" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="home">首页</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/hotWord" class="svg-icon ">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">热词统计</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/tableData" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">微博舆情统计</span>
+                          </a>
+                      </li>
+                      <li class="px-3 pt-3 pb-2 ">
+                          <span class="text-uppercase small font-weight-bold">数据可视化</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">文章分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/ipChar" class="svg-icon">
+                              <i class="">
+                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
+                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">IP分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/commentChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
+                                  </svg>
+                              </i><span class="ml-2">评论分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">舆情分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingpredict" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">舆情预测</span>
+                          </a>
+                      </li>
+                      <li class="px-3 pt-3 pb-2">
+                          <span class="text-uppercase small font-weight-bold">词云图</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleCloud" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+                                  </svg>
+                              </i><span class="ml-2" data-i18n="articleCloud">文章内容词云图</span>
+                          </a>
+                      </li>
+                  </ul>
+              </nav>
+{% endblock %}
+
+{% block content %}
+          <div class="container-fluid">
+                <div class="row">
+              <div class="col-md-12 mb-4 mt-1">
+                 <div class="d-flex flex-wrap justify-content-between align-items-center">
+                     <h4 class="font-weight-bold" data-i18n="articleCharPage">文章分析页</h4>
+                 </div>
+              </div>
+           </div>
+                <div class="row">
+                      <div class="col-lg-12">
+                     <div class="card card-block card-stretch card-height">
+                        <div class="card-body">
+                                 <div class="form-group">
+                                    <label data-i18n="typeSelection">类型选择</label>
+                                    <select onchange="typeChange(event)" class="form-control mb-3">
+                                        {% for i in typeList %}
+                                            {% if defaultType == i %}
+                                                                                                   <option selected value="{{ i }}">{{ i }}</option>
+                                            {% else %}
+                                                                                                   <option value="{{ i }}">{{ i }}</option>
+                                            {% endif %}
+                                        {% endfor %}
+                                    </select>
+                                     <script>
+                                         function typeChange(e){
+                                             window.location.href = 'http://127.0.0.1:5000/page/articleChar?type=' + e.target.value
+                                         }
+                                     </script>
+                                 </div>
+                              </div>
+                     </div>
+                  </div>
+                  </div>
+                <div class="row">
+                    <div class="col-lg-6">
+                         <div class="card card-block">
+                            <div class="card-header d-flex justify-content-between pb-0">
+                               <div class="header-title">
+                                  <h4 class="card-title mb-0" data-i18n="articleLikeAnalysis">文章点赞量分析 👍</h4>
+                               </div>
+                            </div>
+                            <div class="card-body">
+                               <div id="main" style="width: 100%;height: 450px"></div>
+                            </div>
+                         </div>
+                      </div>
+                    <div class="col-lg-6">
+                         <div class="card card-block">
+                            <div class="card-header d-flex justify-content-between pb-0">
+                               <div class="header-title">
+                                  <h4 class="card-title mb-0" data-i18n="articleCommentAnalysis">文章评论量分析 🔥</h4>
+                               </div>
+                            </div>
+                            <div class="card-body">
+                               <div id="mainTwo" style="width: 100%;height: 450px"></div>
+                            </div>
+                         </div>
+                      </div>
+                    <div class="col-lg-12">
+                         <div class="card card-block">
+                            <div class="card-header d-flex justify-content-between pb-0">
+                               <div class="header-title">
+                                  <h4 class="card-title mb-0" data-i18n="articleForwardAnalysis">文章转发量分析 🥇</h4>
+                               </div>
+                            </div>
+                            <div class="card-body">
+                               <div id="mainThree" style="width: 100%;height: 450px"></div>
+                            </div>
+                         </div>
+                      </div>
+                </div>
+          </div>
+{% endblock %}
+
+{% block echarts %}
+    <script>
+    var chartDom = document.getElementById('main');
+    var myChart = echarts.init(chartDom);
+    var option;
+    var colors = ['#66cc99','#ffcc66','#ff6666','#6699cc']
+        option = {
+          title: {
+            text: t('likeRangeStatistics')
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: [t('rangeCount')]
+          },
+          toolbox: {
+            show: true,
+            feature: {
+              dataView: { show: true, readOnly: false },
+              magicType: { show: true, type: ['line', 'bar'] },
+              restore: { show: true },
+              saveAsImage: { show: true }
+            }
+          },
+          calculable: true,
+          xAxis: [
+            {
+              type: 'category',
+              // prettier-ignore
+              data:{{ xData |tojson }}
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value'
+            }
+          ],
+          series: [
+            {
+              name: '区间个数',
+              type: 'bar',
+              data: {{ yData }},
+                itemStyle:{
+                  color:function(params){
+                      return colors[params.dataIndex % colors.length];
+                  }
+                },
+              markPoint: {
+                data: [
+                  { type: 'max', name: 'Max' },
+                  { type: 'min', name: 'Min' }
+                ]
+              },
+              markLine: {
+                data: [{ type: 'average', name: 'Avg' }]
+              }
+            }
+          ]
+        };
+        option && myChart.setOption(option);
+    </script>
+    <script>
+        var chartDom = document.getElementById('mainTwo');
+        var myChart = echarts.init(chartDom);
+        var option;
+
+        option = {
+            toolbox: {
+            show: true,
+            feature: {
+              dataView: { show: true, readOnly: false },
+              magicType: { show: true, type: ['line', 'bar'] },
+              restore: { show: true },
+              saveAsImage: { show: true }
+            }
+          },
+             title: {
+            text: '文章评论区间统计'
+          },
+            tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+
+          },
+          xAxis: {
+            type: 'category',
+            data: {{ x1Data | tojson }}
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [
+            {
+                name:"区间个数",
+              data: {{ y1Data }},
+              type: 'line',
+              symbol: 'triangle',
+              symbolSize: 20,
+              lineStyle: {
+                color: '#5470C6',
+                width: 4,
+                type: 'dashed'
+              },
+              itemStyle: {
+                borderWidth: 3,
+                borderColor: '#EE6666',
+                color: 'yellow'
+              }
+            }
+          ]
+        };
+
+        option && myChart.setOption(option);
+
+    </script>
+    <script>
+    var chartDom = document.getElementById('mainThree');
+    var myChart = echarts.init(chartDom);
+    var option;
+
+    option = {
+      title: {
+        text: '转发量分析区间图'
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      legend: {},
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'value',
+        boundaryGap: [0, 0.01]
+      },
+      yAxis: {
+        type: 'category',
+        data: {{ x2Data | tojson }}
+      },
+      series: [
+        {
+          name: '区间个数',
+          type: 'bar',
+          data: {{ y2Data }}
+        }
+      ]
+    };
+
+    option && myChart.setOption(option);
+
+    </script>
 {% endblock %}
\ No newline at end of file
diff --git a/views/page/templates/articleContentCloud.html b/views/page/templates/articleContentCloud.html
index c252ed3..4644c31 100644
--- a/views/page/templates/articleContentCloud.html
+++ b/views/page/templates/articleContentCloud.html
@@ -1,144 +1,144 @@
-{% extends 'base_page.html' %}
-{% block title %}
-    文章内容词云图
-{% endblock %}
-
-{% block  nav %}
-<nav class="iq-sidebar-menu">
-                  <ul id="iq-sidebar-toggle" class="side-menu">
-                      <li class="px-3 pt-3 pb-2 ">
-                          <span class="text-uppercase small font-weight-bold">首页</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/home" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">首页</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/hotWord" class="svg-icon ">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">热词统计</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/tableData" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">微博舆情统计</span>
-                          </a>
-                      </li>
-                      <li class="px-3 pt-3 pb-2 ">
-                          <span class="text-uppercase small font-weight-bold">数据可视化</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">文章分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/ipChar" class="svg-icon">
-                              <i class="">
-                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
-                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">IP分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/commentChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
-                                  </svg>
-                              </i><span class="ml-2">评论分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingpredict" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情预测</span>
-                          </a>
-                      </li>
-                      <li class="px-3 pt-3 pb-2">
-                          <span class="text-uppercase small font-weight-bold">词云图</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleCloud" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
-                                  </svg>
-                              </i><span class="ml-2">文章内容词云图</span>
-                          </a>
-                      </li>
-                  </ul>
-              </nav>
-{% endblock %}
-
-{% block content %}
-          <div class="container-fluid">
-                <div class="row">
-              <div class="col-md-12 mb-4 mt-1">
-                 <div class="d-flex flex-wrap justify-content-between align-items-center">
-                     <h4 class="font-weight-bold">文章分析页</h4>
-                 </div>
-              </div>
-           </div>
-                <div class="row">
-                    <div class="col-lg-12">
-                         <div class="card card-block">
-                            <div class="card-header d-flex justify-content-between pb-0">
-                               <div class="header-title">
-                                  <h4 class="card-title mb-0">文章内容词云图</h4>
-                               </div>
-                            </div>
-                            <div class="card-body">
-                               <div id="mainThree" style="width: 100%;height: 750px;text-align: center">
-                                   <img style="width:60%" src="/static/contentCloud.jpg" alt="">
-                               </div>
-                            </div>
-                         </div>
-                      </div>
-                </div>
-          </div>
-
-{% endblock %}
-
-{% block echarts %}
-    <script>
-
-    </script>
+{% extends 'base_page.html' %}
+{% block title %}
+    <span data-i18n="articleCloud">文章内容词云图</span>
+{% endblock %}
+
+{% block  nav %}
+<nav class="iq-sidebar-menu">
+                  <ul id="iq-sidebar-toggle" class="side-menu">
+                      <li class="px-3 pt-3 pb-2 ">
+                          <span class="text-uppercase small font-weight-bold" data-i18n="home">首页</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/home" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="home">首页</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/hotWord" class="svg-icon ">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="hotWord">热词统计</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/tableData" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="tableData">微博舆情统计</span>
+                          </a>
+                      </li>
+                      <li class="px-3 pt-3 pb-2 ">
+                          <span class="text-uppercase small font-weight-bold" data-i18n="dataVisualization">数据可视化</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="articleChar">文章分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/ipChar" class="svg-icon">
+                              <i class="">
+                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
+                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">IP分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/commentChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
+                                  </svg>
+                              </i><span class="ml-2">评论分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">舆情分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingpredict" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">舆情预测</span>
+                          </a>
+                      </li>
+                      <li class="px-3 pt-3 pb-2">
+                          <span class="text-uppercase small font-weight-bold">词云图</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleCloud" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+                                  </svg>
+                              </i><span class="ml-2" data-i18n="articleCloud">文章内容词云图</span>
+                          </a>
+                      </li>
+                  </ul>
+              </nav>
+{% endblock %}
+
+{% block content %}
+          <div class="container-fluid">
+                <div class="row">
+              <div class="col-md-12 mb-4 mt-1">
+                 <div class="d-flex flex-wrap justify-content-between align-items-center">
+                     <h4 class="font-weight-bold" data-i18n="articleCharPage">文章分析页</h4>
+                 </div>
+              </div>
+           </div>
+                <div class="row">
+                    <div class="col-lg-12">
+                         <div class="card card-block">
+                            <div class="card-header d-flex justify-content-between pb-0">
+                               <div class="header-title">
+                                  <h4 class="card-title mb-0" data-i18n="articleCloud">文章内容词云图</h4>
+                               </div>
+                            </div>
+                            <div class="card-body">
+                               <div id="mainThree" style="width: 100%;height: 750px;text-align: center">
+                                   <img style="width:60%" src="/static/contentCloud.jpg" alt="">
+                               </div>
+                            </div>
+                         </div>
+                      </div>
+                </div>
+          </div>
+
+{% endblock %}
+
+{% block echarts %}
+    <script>
+
+    </script>
 {% endblock %}
\ No newline at end of file
diff --git a/views/page/templates/base_page.html b/views/page/templates/base_page.html
index 44e0b85..9f0873e 100644
--- a/views/page/templates/base_page.html
+++ b/views/page/templates/base_page.html
@@ -1,478 +1,505 @@
-
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-      <title>{% block title %}首页{% endblock %}</title>
-
-      <link rel="stylesheet" href="/static/css/backend-plugin.min.css">
-      <link rel="stylesheet" href="/static/css/backend.css">
-        <meta name="referrer" content="no-referrer" />
-  </head>
-  <body class="  ">
-    <!-- loader Start -->
-    <div id="loading">
-          <div id="loading-center">
-          </div>
-    </div>
-    <!-- loader END -->
-    <!-- Wrapper Start -->
-    <div class="wrapper">
-      <div class="iq-sidebar  sidebar-default  ">
-          <div class="iq-sidebar-logo d-flex align-items-end justify-content-between">
-               <a href="" class="header-logo">
-                  <img src="https://lovexl-oss.oss-cn-beijing.aliyuncs.com/bed/202407051027268.png" class="img-fluid rounded-normal light-logo" alt="logo">
-                  <span>微博舆情分析系统</span>
-              </a>
-              <div class="side-menu-bt-sidebar-1">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="text-light wrapper-menu" width="30" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                      </svg>
-                  </div>
-          </div>
-          <div class="data-scrollbar" data-scroll="1">
-              {% block nav %}
-              <nav class="iq-sidebar-menu">
-                  <ul id="iq-sidebar-toggle" class="side-menu">
-                      <li class=" sidebar-layout">
-                          <a href="/page/home" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">首页</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/hotWord" class="svg-icon ">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">热词统计</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/tableData" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">微博舆情统计</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">文章分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/ipChar" class="svg-icon">
-                              <i class="">
-                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
-                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">IP分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/commentChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
-                                  </svg>
-                              </i><span class="ml-2">评论分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingpredict" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情预测</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleCloud" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
-                                  </svg>
-                              </i><span class="ml-2">文章内容词云图</span>
-                          </a>
-                      </li>
-                  </ul>
-              </nav>
-              {% endblock %}
-              <div class="pt-5 pb-5"></div>
-          </div>
-      </div>
-      <div class="content-page">
-            {% block content %}
-          <div class="container-fluid">
-   <div class="row">
-      <div class="col-md-12 mb-4 mt-1">
-         <div class="d-flex flex-wrap justify-content-between align-items-center">
-             <h4 class="font-weight-bold">首页</h4>
-         </div>
-      </div>
-      <div class="col-lg-8 col-md-12">
-        <div class="row">
-            <div class="col-md-4">
-               <div class="card">
-                  <div class="card-body">
-                     <div class="d-flex align-items-center">
-                        <div class="">
-                            <p class="mb-2 text-secondary">文章个数</p>
-                            <div class="d-flex flex-wrap justify-content-start align-items-center">
-                               <h5 class="mb-0 font-weight-bold">{{ articleLenMax }}个</h5>
-                            </div>
-                        </div>
-                     </div>
-                  </div>
-               </div>
-            </div>
-            <div class="col-md-4">
-            <div class="card">
-                <div class="card-body">
-                    <div class="d-flex align-items-center">
-                        <div class="">
-                            <p class="mb-2 text-secondary">文章爬取规则</p>
-                            <div class="d-flex flex-wrap justify-content-start align-items-center">
-                               <h5 class="mb-0 font-weight-bold">每 5 小时更新一次爬取内容</h5>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            </div>
-            <div class="col-md-4">
-            <div class="card">
-                <div class="card-body">
-                    <div class="d-flex align-items-center">
-                        <div class="">
-                           <p class="mb-2 text-secondary">下次爬取时间</p>
-                           <div class="d-flex flex-wrap justify-content-start align-items-center">
-                              <h5 class="mb-0 font-weight-bold">7-5-18:00</h5>
-                           </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            </div>
-            <div class="col-md-12">
-            <div class="card">
-                <div class="card-body">
-                  <div class="d-flex justify-content-between align-items-center flex-wrap">
-                     <h4 class="font-weight-bold">文章发布时间个数</h4>
-                  </div>
-                   <div id="main" style="width:100%;height: 350px" class="custom-chart"></div>
-                </div>
-            </div>
-            </div>
-         </div>
-      </div>
-      <div class="col-lg-4 col-md-8">
-         <div class="card card-block card-stretch card-height">
-            <div class="card-header card-header-border d-flex justify-content-between">
-               <div class="header-title">
-                  <h4 class="card-title">评论点赞量 Top Fore</h4>
-               </div>
-            </div>
-            <div class="card-body-list">
-               <ul class="list-style-3 mb-0">
-                  {% for i in commentsLikeCountTopFore %}
-                   <li class="p-3 list-item d-flex justify-content-start align-items-center">
-                     <div class="avatar">
-                         <p>
-                             🧑‍ {{ i[5] }}
-                         </p>
-                         <p class="mb-0" style="color:#ccc;width:320px;overflow: hidden;text-overflow: ellipsis;white-space:nowrap">
-                             {{ i[4] }}
-                         </p>
-                     </div>
-                     <div class="list-style-action d-flex justify-content-end ml-auto">
-                        <h6 class="font-weight-bold text-danger">👍 {{ i[2] }}</h6>
-                     </div>
-                  </li>
-                   {% endfor %}
-                    <div class="d-flex justify-content-end align-items-center border-top-table p-3">
-                         <a href="/page/tableData" class="btn btn-secondary btn-sm">查看全部</a>
-                      </div>
-               </ul>
-            </div>
-         </div>
-
-      </div>
-      <div class="col-lg-4 col-md-6">
-         <div class="card card-block card-stretch card-height">
-            <div class="card-header d-flex justify-content-between">
-               <div class="header-title">
-                  <h4 class="card-title">文章类型占比</h4>
-               </div>
-            </div>
-            <div class="card-body p-0">
-               <div id="mainTwo" style="width:100%;height:350px">
-
-               </div>
-            </div>
-         </div>
-      </div>
-         <div class="col-lg-4 col-md-6">
-         <div class="card card-block card-stretch card-height">
-            <div class="card-header d-flex justify-content-between">
-               <div class="header-title">
-                  <h4 class="card-title">评论用户名词云图</h4>
-               </div>
-            </div>
-            <div class="card-body p-0">
-               <div id="mainTwo" style="width:100%;height:350px;text-align: center">
-                   <img style="width:85%" src="/static/authorNameCloud.jpg" alt="">
-               </div>
-            </div>
-         </div>
-      </div>
-      <div class="col-lg-4 col-md-6">
-         <div class="card card-block card-stretch card-height">
-            <div class="card-header d-flex justify-content-between">
-               <div class="header-title">
-                  <h4 class="card-title">评论用户时间占比</h4>
-               </div>
-            </div>
-            <div class="card-body p-0">
-               <div id="mainThree" style="width:100%;height:350px">
-
-               </div>
-            </div>
-         </div>
-      </div>
-   </div>
-</div>
-          {% endblock %}
-      </div>
-    </div>
-    <!-- Wrapper End-->
-    <footer class="iq-footer">
-        <div class="container-fluid">
-            <div class="row">
-                <div class="col-lg-6">
-                </div>
-                <div class="col-lg-6 text-right">
-                    <span class="mr-1">网安小学期 &copy; 2024.<a target="_blank" href="#">郭航江</a></span>
-                </div>
-            </div>
-        </div>
-    </footer>
-    <script src="/static/echarts.min.js"></script>
-    <script src="/static/china.js"></script>
-    {% block echarts %}
-        <script>
-        var chartDom = document.getElementById('main');
-        var myCharts = echarts.init(chartDom);
-        var option;
-        var xData = {{ xData | tojson }};
-        var yData = {{ yData }};
-        var xRes = []
-        var yRes = []
-        for(var i = 0;i < 8;i++){
-            xRes.push(xData[i])
-            yRes.push(yData[i])
-        }
-        option = {
-            tooltip:{
-              trigger:"axis"
-            },
-            legend:{},
-             toolbox: {
-    show: true,
-    feature: {
-      dataZoom: {
-        yAxisIndex: 'none'
-      },
-      dataView: { readOnly: false },
-      magicType: { type: ['line', 'bar'] },
-      restore: {},
-      saveAsImage: {}
-    }
-  },
-        xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: xRes
-          },
-          yAxis: {
-            type: 'value'
-          },
-          series: [
-            {
-                name:"日期个数",
-              data: yRes,
-              type: 'bar',
-              areaStyle: {
-                  color:"rgba(0,128,255,0.2)"
-              },
-                smooth:true,
-                lineStyle:{
-                  width:5
-                },
-                emphasis:{
-                  focus:'series'
-                }
-            }
-          ]
-        };
-        let count = 8;
-        setInterval(()=>{
-            if(count >= xData.length) count=0
-            xRes.shift()
-            xRes.push(xData[count])
-            yRes.shift()
-            yRes.push(yData[count])
-            count++
-            myCharts.setOption({
-                xAxis:[{
-                    data:xRes
-                }],
-                series:[{
-                    data:yRes
-                }]
-            })
-        },2000)
-
-        option && myCharts.setOption(option);
-
-    </script>
-    <script>
-        var chartDom = document.getElementById('mainTwo');
-        var myChart = echarts.init(chartDom);
-        var option;
-
-        option = {
-          title: {
-            text: '各微博类型占比饼状图',
-            left: 'center'
-          },
-          tooltip: {
-            trigger: 'item'
-          },
-          legend: {
-            orient: 'vertical',
-            left: 'left',
-              padding:[10,20,30,20],
-          },
-          series: [
-            {
-              name: '博客类型占比',
-              type: 'pie',
-              radius: '50%',
-              data: {{ typeChart |tojson }},
-              emphasis: {
-                itemStyle: {
-                  shadowBlur: 10,
-                  shadowOffsetX: 0,
-                  shadowColor: 'rgba(0, 0, 0, 0.5)'
-                }
-              }
-            }
-          ]
-        };
-
-        option && myChart.setOption(option);
-
-    </script>
-    <script>
-        var chartDom = document.getElementById('mainThree');
-        var myChart = echarts.init(chartDom);
-        var option;
-
-        option = {
-          tooltip: {
-            trigger: 'item'
-          },
-          legend: {
-            top: '5%',
-            left:10,
-              right:10,
-              type: 'scroll',
-          },
-          series: [
-            {
-              name: '评论时间发布个数',
-              type: 'pie',
-              radius: ['60%', '50%'],
-              avoidLabelOverlap: false,
-              label: {
-                show: false,
-                position: 'center'
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: 20,
-                  fontWeight: 'bold'
-                }
-              },
-              labelLine: {
-                show: false
-              },
-              data: {{ createAtChart | tojson }}
-            }
-          ]
-        };
-
-        option && myChart.setOption(option);
-
-    </script>
-    {% endblock %}
-    <script src="/static/js/backend-bundle.min.js"></script>
-    <script src="/static/js/customizer.js"></script>
-    <script src="/static/js/sidebar.js"></script>
-    <script src="/static/js/flex-tree.min.js"></script>
-    <script src="/static/js/tree.js"></script>
-    <script src="/static/js/table-treeview.js"></script>
-    <script src="/static/js/sweetalert.js"></script>
-    <script src="/static/js/vector-map-custom.js"></script>
-    <script src="/static/js/chart-custom.js"></script>
-    <script src="/static/js/01.js"></script>
-    <script src="/static/js/02.js"></script>
-    <script src="/static/js/slider.js"></script>
-    <script src="/static/js/index.js" type="module"></script>
-    <script src="/static/js/app.js">
-
-    </script>
-  </body>
-</html>
-
-<style>
-    body {
-      background-color: #add8e6; /* 浅蓝色 */
-    }
-
-    .dark .card {
-        background-color: #3a4d76;
-        border-radius: 0px;
-    }
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+      <title>{% block title %}首页{% endblock %}</title>
+
+      <link rel="stylesheet" href="/static/css/backend-plugin.min.css">
+      <link rel="stylesheet" href="/static/css/backend.css">
+        <meta name="referrer" content="no-referrer" />
+      <script src="/static/js/i18n.js"></script>
+  </head>
+  <body class="  ">
+    <!-- loader Start -->
+    <div id="loading">
+          <div id="loading-center">
+          </div>
+    </div>
+    <!-- loader END -->
+    <!-- Wrapper Start -->
+    <div class="wrapper">
+      <div class="iq-sidebar  sidebar-default  ">
+          <div class="iq-sidebar-logo d-flex align-items-end justify-content-between">
+               <a href="" class="header-logo">
+                  <img src="https://lovexl-oss.oss-cn-beijing.aliyuncs.com/bed/202407051027268.png" class="img-fluid rounded-normal light-logo" alt="logo">
+                  <span data-i18n="weiboSystem">微博舆情分析系统</span>
+              </a>
+              <div class="side-menu-bt-sidebar-1">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="text-light wrapper-menu" width="30" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                      </svg>
+                  </div>
+          </div>
+          <div class="data-scrollbar" data-scroll="1">
+              {% block nav %}
+              <nav class="iq-sidebar-menu">
+                  <ul id="iq-sidebar-toggle" class="side-menu">
+                      <li class=" sidebar-layout">
+                          <a href="/page/home" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="home">首页</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/hotWord" class="svg-icon ">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="hotWord">热词统计</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/tableData" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="tableData">微博舆情统计</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="articleChar">文章分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/ipChar" class="svg-icon">
+                              <i class="">
+                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
+                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="ipChar">IP分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/commentChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
+                                  </svg>
+                              </i><span class="ml-2" data-i18n="commentChar">评论分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="yuqingChar">舆情分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingpredict" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="yuqingpredict">舆情预测</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleCloud" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+                                  </svg>
+                              </i><span class="ml-2" data-i18n="articleCloud">文章内容词云图</span>
+                          </a>
+                      </li>
+                      <li class="sidebar-layout">
+                          <a href="javascript:void(0)" id="language-switcher" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" id="language-text">切换语言</span>
+                          </a>
+                      </li>
+                  </ul>
+              </nav>
+              {% endblock %}
+              <div class="pt-5 pb-5"></div>
+          </div>
+      </div>
+      <div class="content-page">
+            {% block content %}
+          <div class="container-fluid">
+   <div class="row">
+      <div class="col-md-12 mb-4 mt-1">
+         <div class="d-flex flex-wrap justify-content-between align-items-center">
+             <h4 class="font-weight-bold" data-i18n="home">首页</h4>
+         </div>
+      </div>
+      <div class="col-lg-8 col-md-12">
+        <div class="row">
+            <div class="col-md-4">
+               <div class="card">
+                  <div class="card-body">
+                     <div class="d-flex align-items-center">
+                        <div class="">
+                            <p class="mb-2 text-secondary" data-i18n="articleCount">文章个数</p>
+                            <div class="d-flex flex-wrap justify-content-start align-items-center">
+                               <h5 class="mb-0 font-weight-bold">{{ articleLenMax }}个</h5>
+                            </div>
+                        </div>
+                     </div>
+                  </div>
+               </div>
+            </div>
+            <div class="col-md-4">
+            <div class="card">
+                <div class="card-body">
+                    <div class="d-flex align-items-center">
+                        <div class="">
+                            <p class="mb-2 text-secondary" data-i18n="articleCrawlRule">文章爬取规则</p>
+                            <div class="d-flex flex-wrap justify-content-start align-items-center">
+                               <h5 class="mb-0 font-weight-bold">每 5 小时更新一次爬取内容</h5>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            </div>
+            <div class="col-md-4">
+            <div class="card">
+                <div class="card-body">
+                    <div class="d-flex align-items-center">
+                        <div class="">
+                           <p class="mb-2 text-secondary" data-i18n="nextCrawlTime">下次爬取时间</p>
+                           <div class="d-flex flex-wrap justify-content-start align-items-center">
+                              <h5 class="mb-0 font-weight-bold">7-5-18:00</h5>
+                           </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            </div>
+            <div class="col-md-12">
+            <div class="card">
+                <div class="card-body">
+                  <div class="d-flex justify-content-between align-items-center flex-wrap">
+                     <h4 class="font-weight-bold" data-i18n="articlePublishTimeCount">文章发布时间个数</h4>
+                  </div>
+                   <div id="main" style="width:100%;height: 350px" class="custom-chart"></div>
+                </div>
+            </div>
+            </div>
+         </div>
+      </div>
+      <div class="col-lg-4 col-md-8">
+         <div class="card card-block card-stretch card-height">
+            <div class="card-header card-header-border d-flex justify-content-between">
+               <div class="header-title">
+                  <h4 class="card-title" data-i18n="commentLikeCountTopFore">评论点赞量 Top Fore</h4>
+               </div>
+            </div>
+            <div class="card-body-list">
+               <ul class="list-style-3 mb-0">
+                  {% for i in commentsLikeCountTopFore %}
+                   <li class="p-3 list-item d-flex justify-content-start align-items-center">
+                     <div class="avatar">
+                         <p>
+                             🧑‍ {{ i[5] }}
+                         </p>
+                         <p class="mb-0" style="color:#ccc;width:320px;overflow: hidden;text-overflow: ellipsis;white-space:nowrap">
+                             {{ i[4] }}
+                         </p>
+                     </div>
+                     <div class="list-style-action d-flex justify-content-end ml-auto">
+                        <h6 class="font-weight-bold text-danger">👍 {{ i[2] }}</h6>
+                     </div>
+                  </li>
+                   {% endfor %}
+                    <div class="d-flex justify-content-end align-items-center border-top-table p-3">
+                         <a href="/page/tableData" class="btn btn-secondary btn-sm" data-i18n="viewAll">查看全部</a>
+                      </div>
+               </ul>
+            </div>
+         </div>
+
+      </div>
+      <div class="col-lg-4 col-md-6">
+         <div class="card card-block card-stretch card-height">
+            <div class="card-header d-flex justify-content-between">
+               <div class="header-title">
+                  <h4 class="card-title" data-i18n="articleTypeRatio">文章类型占比</h4>
+               </div>
+            </div>
+            <div class="card-body p-0">
+               <div id="mainTwo" style="width:100%;height:350px">
+
+               </div>
+            </div>
+         </div>
+      </div>
+         <div class="col-lg-4 col-md-6">
+         <div class="card card-block card-stretch card-height">
+            <div class="card-header d-flex justify-content-between">
+               <div class="header-title">
+                  <h4 class="card-title" data-i18n="commentUserWordCloud">评论用户名词云图</h4>
+               </div>
+            </div>
+            <div class="card-body p-0">
+               <div id="mainTwo" style="width:100%;height:350px;text-align: center">
+                   <img style="width:85%" src="/static/authorNameCloud.jpg" alt="">
+               </div>
+            </div>
+         </div>
+      </div>
+      <div class="col-lg-4 col-md-6">
+         <div class="card card-block card-stretch card-height">
+            <div class="card-header d-flex justify-content-between">
+               <div class="header-title">
+                  <h4 class="card-title" data-i18n="commentUserTimeRatio">评论用户时间占比</h4>
+               </div>
+            </div>
+            <div class="card-body p-0">
+               <div id="mainThree" style="width:100%;height:350px">
+
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
+</div>
+          {% endblock %}
+      </div>
+    </div>
+    <!-- Wrapper End-->
+    <footer class="iq-footer">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-lg-6">
+                </div>
+                <div class="col-lg-6 text-right">
+                    <span class="mr-1"><span data-i18n="semester">网安小学期</span> &copy; 2024.<a target="_blank" href="#">郭航江</a></span>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script src="/static/echarts.min.js"></script>
+    <script src="/static/china.js"></script>
+    <!-- 添加语言切换脚本 -->
+    <script>
+        // 页面加载完成后初始化语言切换功能
+        document.addEventListener('DOMContentLoaded', function() {
+            // 更新语言切换按钮文本
+            updateLanguageSwitcherText();
+        });
+        
+        // 更新语言切换按钮文本
+        function updateLanguageSwitcherText() {
+            const currentLang = getCurrentLanguage();
+            const langText = document.getElementById('language-text');
+            if (langText) {
+                langText.textContent = currentLang === 'zh' ? '切换到英文' : 'Switch to Chinese';
+            }
+        }
+    </script>
+    {% block echarts %}
+        <script>
+        var chartDom = document.getElementById('main');
+        var myCharts = echarts.init(chartDom);
+        var option;
+        var xData = {{ xData | tojson }};
+        var yData = {{ yData }};
+        var xRes = []
+        var yRes = []
+        for(var i = 0;i < 8;i++){
+            xRes.push(xData[i])
+            yRes.push(yData[i])
+        }
+        option = {
+            tooltip:{
+              trigger:"axis"
+            },
+            legend:{},
+             toolbox: {
+    show: true,
+    feature: {
+      dataZoom: {
+        yAxisIndex: 'none'
+      },
+      dataView: { readOnly: false },
+      magicType: { type: ['line', 'bar'] },
+      restore: {},
+      saveAsImage: {}
+    }
+  },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: xRes
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [
+            {
+                name:"日期个数",
+              data: yRes,
+              type: 'bar',
+              areaStyle: {
+                  color:"rgba(0,128,255,0.2)"
+              },
+                smooth:true,
+                lineStyle:{
+                  width:5
+                },
+                emphasis:{
+                  focus:'series'
+                }
+            }
+          ]
+        };
+        let count = 8;
+        setInterval(()=>{
+            if(count >= xData.length) count=0
+            xRes.shift()
+            xRes.push(xData[count])
+            yRes.shift()
+            yRes.push(yData[count])
+            count++
+            myCharts.setOption({
+                xAxis:[{
+                    data:xRes
+                }],
+                series:[{
+                    data:yRes
+                }]
+            })
+        },2000)
+
+        option && myCharts.setOption(option);
+
+    </script>
+    <script>
+        var chartDom = document.getElementById('mainTwo');
+        var myChart = echarts.init(chartDom);
+        var option;
+
+        option = {
+          title: {
+            text: '各微博类型占比饼状图',
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left',
+              padding:[10,20,30,20],
+          },
+          series: [
+            {
+              name: '博客类型占比',
+              type: 'pie',
+              radius: '50%',
+              data: {{ typeChart |tojson }},
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              }
+            }
+          ]
+        };
+
+        option && myChart.setOption(option);
+
+    </script>
+    <script>
+        var chartDom = document.getElementById('mainThree');
+        var myChart = echarts.init(chartDom);
+        var option;
+
+        option = {
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            top: '5%',
+            left:10,
+              right:10,
+              type: 'scroll',
+          },
+          series: [
+            {
+              name: '评论时间发布个数',
+              type: 'pie',
+              radius: ['60%', '50%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: 20,
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: {{ createAtChart | tojson }}
+            }
+          ]
+        };
+
+        option && myChart.setOption(option);
+
+    </script>
+    {% endblock %}
+    <script src="/static/js/backend-bundle.min.js"></script>
+    <script src="/static/js/customizer.js"></script>
+    <script src="/static/js/sidebar.js"></script>
+    <script src="/static/js/flex-tree.min.js"></script>
+    <script src="/static/js/tree.js"></script>
+    <script src="/static/js/table-treeview.js"></script>
+    <script src="/static/js/sweetalert.js"></script>
+    <script src="/static/js/vector-map-custom.js"></script>
+    <script src="/static/js/chart-custom.js"></script>
+    <script src="/static/js/01.js"></script>
+    <script src="/static/js/02.js"></script>
+    <script src="/static/js/slider.js"></script>
+    <script src="/static/js/index.js" type="module"></script>
+    <script src="/static/js/app.js">
+
+    </script>
+  </body>
+</html>
+
+<style>
+    body {
+      background-color: #add8e6; /* 浅蓝色 */
+    }
+
+    .dark .card {
+        background-color: #3a4d76;
+        border-radius: 0px;
+    }
 </style>
\ No newline at end of file
diff --git a/views/page/templates/commentChar.html b/views/page/templates/commentChar.html
index 814630d..0ec50c1 100644
--- a/views/page/templates/commentChar.html
+++ b/views/page/templates/commentChar.html
@@ -1,317 +1,317 @@
-{% extends 'base_page.html' %}
-
-{% block title %}
-    评论分析
-{% endblock %}
-{% block  nav %}
-<nav class="iq-sidebar-menu">
-                  <ul id="iq-sidebar-toggle" class="side-menu">
-                      <li class="px-3 pt-3 pb-2 ">
-                          <span class="text-uppercase small font-weight-bold">首页</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/home" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">首页</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/hotWord" class="svg-icon ">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">热词统计</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/tableData" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">微博舆情统计</span>
-                          </a>
-                      </li>
-                      <li class="px-3 pt-3 pb-2 ">
-                          <span class="text-uppercase small font-weight-bold">数据可视化</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">文章分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/ipChar" class="svg-icon">
-                              <i class="">
-                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
-                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">IP分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/commentChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
-                                  </svg>
-                              </i><span class="ml-2">评论分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingpredict" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情预测</span>
-                          </a>
-                      </li>
-                      <li class="px-3 pt-3 pb-2">
-                          <span class="text-uppercase small font-weight-bold">词云图</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleCloud" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
-                                  </svg>
-                              </i><span class="ml-2">文章内容词云图</span>
-                          </a>
-                      </li>
-                  </ul>
-              </nav>
-{% endblock %}
-{% block content %}
-          <div class="container-fluid">
-                <div class="row">
-                      <div class="col-md-12 mb-4 mt-1">
-                         <div class="d-flex flex-wrap justify-content-between align-items-center">
-                             <h4 class="font-weight-bold">评论分析</h4>
-                         </div>
-                      </div>
-                   </div>
-                <div class="row">
-                    <div class="col-lg-12">
-                         <div class="card card-block">
-                            <div class="card-header d-flex justify-content-between pb-0">
-                               <div class="header-title">
-                                  <h4 class="card-title mb-0">评论点赞次数区间图</h4>
-                               </div>
-                            </div>
-                            <div class="card-body">
-                               <div id="main" style="width: 100%;height: 450px"></div>
-                            </div>
-                         </div>
-                      </div>
-                    <div class="col-lg-6">
-                         <div class="card card-block">
-                            <div class="card-header d-flex justify-content-between pb-0">
-                               <div class="header-title">
-                                  <h4 class="card-title mb-0">评论用户性别占比</h4>
-                               </div>
-                            </div>
-                            <div class="card-body">
-                               <div id="mainTwo" style="width: 100%;height: 450px"></div>
-                            </div>
-                         </div>
-                      </div>
-                    <div class="col-lg-6">
-                         <div class="card card-block">
-                            <div class="card-header d-flex justify-content-between pb-0">
-                               <div class="header-title">
-                                  <h4 class="card-title mb-0">用户评论词云图</h4>
-                               </div>
-                            </div>
-                            <div class="card-body">
-                               <div id="mainThree" style="width: 100%;height: 450px;text-align: center">
-                                   <img style="width:84%" src="/static/commentCloud.jpg" alt="">
-                               </div>
-                            </div>
-                         </div>
-                      </div>
-                </div>
-          </div>
-
-{% endblock %}
-
-{% block echarts %}
-    <script>
-        var chartDom = document.getElementById('main');
-        var myChart = echarts.init(chartDom);
-        var option;
-
-        option = {
-              title: {
-                text: '评论点赞量区间折线图',
-                left: '1%'
-              },
-              tooltip: {
-                trigger: 'axis'
-              },
-              grid: {
-                left: '5%',
-                right: '15%',
-                bottom: '10%'
-              },
-            legend:{},
-              xAxis: {
-                data: {{ xData | tojson }}
-              },
-              yAxis: {},
-              toolbox: {
-                right: 10,
-                feature: {
-                  dataZoom: {
-                    yAxisIndex: 'none'
-                  },
-                  restore: {},
-                  saveAsImage: {}
-                }
-              },
-              dataZoom: [
-                {
-                  show: true,
-                  start: 80,
-                  end: 100
-                },
-                {
-                  type: 'inside',
-                  start: 80,
-                  end: 100
-                }
-              ],
-              visualMap: {
-                top: 50,
-                right: 10,
-                pieces: [
-                  {
-                    gt: 0,
-                    lte: 50,
-                    color: '#93CE07'
-                  },
-                  {
-                    gt: 50,
-                    lte: 100,
-                    color: '#FBDB0F'
-                  },
-                  {
-                    gt: 100,
-                    lte: 150,
-                    color: '#FC7D02'
-                  },
-                  {
-                    gt: 150,
-                    lte: 200,
-                    color: '#FD0100'
-                  },
-                  {
-                    gt: 200,
-                    lte: 300,
-                    color: '#AA069F'
-                  },
-                  {
-                    gt: 300,
-                    color: '#AC3B2A'
-                  }
-                ],
-                outOfRange: {
-                  color: '#999'
-                }
-              },
-              series: {
-                name: '点赞个数',
-                type: 'line',
-                data: {{ yData }},
-                markLine: {
-                  silent: true,
-                  lineStyle: {
-                    color: '#333'
-                  },
-                  data: [
-                    {
-                      yAxis: 50
-                    },
-                    {
-                      yAxis: 100
-                    },
-                    {
-                      yAxis: 150
-                    },
-                    {
-                      yAxis: 200
-                    },
-                    {
-                      yAxis: 300
-                    }
-                  ]
-                }
-              }
-            }
-
-        option && myChart.setOption(option);
-
-    </script>
-    <script>
-        var chartDom = document.getElementById('mainTwo');
-        var myChart = echarts.init(chartDom);
-        var option;
-
-        option = {
-          title: {
-            text: '评论性别占比饼图',
-            left: 'center'
-          },
-          tooltip: {
-            trigger: 'item'
-          },
-          legend: {
-            orient: 'vertical',
-            left: 'left'
-          },
-          series: [
-            {
-              name: '性别个数',
-              type: 'pie',
-              radius: '50%',
-              data: {{ genderPieData | tojson }},
-              emphasis: {
-                itemStyle: {
-                  shadowBlur: 10,
-                  shadowOffsetX: 0,
-                  shadowColor: 'rgba(0, 0, 0, 0.5)'
-                }
-              }
-            }
-          ]
-        };
-
-        option && myChart.setOption(option);
-
-    </script>
+{% extends 'base_page.html' %}
+
+{% block title %}
+    <span data-i18n="commentChar">评论分析</span>
+{% endblock %}
+{% block  nav %}
+<nav class="iq-sidebar-menu">
+                  <ul id="iq-sidebar-toggle" class="side-menu">
+                      <li class="px-3 pt-3 pb-2 ">
+                          <span class="text-uppercase small font-weight-bold" data-i18n="home">首页</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/home" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="home">首页</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/hotWord" class="svg-icon ">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="hotWord">热词统计</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/tableData" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="tableData">微博舆情统计</span>
+                          </a>
+                      </li>
+                      <li class="px-3 pt-3 pb-2 ">
+                          <span class="text-uppercase small font-weight-bold" data-i18n="dataVisualization">数据可视化</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="articleChar">文章分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/ipChar" class="svg-icon">
+                              <i class="">
+                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
+                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">IP分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/commentChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
+                                  </svg>
+                              </i><span class="ml-2">评论分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">舆情分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingpredict" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">舆情预测</span>
+                          </a>
+                      </li>
+                      <li class="px-3 pt-3 pb-2">
+                          <span class="text-uppercase small font-weight-bold">词云图</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleCloud" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+                                  </svg>
+                              </i><span class="ml-2" data-i18n="articleCloud">文章内容词云图</span>
+                          </a>
+                      </li>
+                  </ul>
+              </nav>
+{% endblock %}
+{% block content %}
+          <div class="container-fluid">
+                <div class="row">
+                      <div class="col-md-12 mb-4 mt-1">
+                         <div class="d-flex flex-wrap justify-content-between align-items-center">
+                             <h4 class="font-weight-bold" data-i18n="commentChar">评论分析</h4>
+                         </div>
+                      </div>
+                   </div>
+                <div class="row">
+                    <div class="col-lg-12">
+                         <div class="card card-block">
+                            <div class="card-header d-flex justify-content-between pb-0">
+                               <div class="header-title">
+                                  <h4 class="card-title mb-0" data-i18n="commentLikeRangeChart">评论点赞次数区间图</h4>
+                               </div>
+                            </div>
+                            <div class="card-body">
+                               <div id="main" style="width: 100%;height: 450px"></div>
+                            </div>
+                         </div>
+                      </div>
+                    <div class="col-lg-6">
+                         <div class="card card-block">
+                            <div class="card-header d-flex justify-content-between pb-0">
+                               <div class="header-title">
+                                  <h4 class="card-title mb-0" data-i18n="commentUserGenderRatio">评论用户性别占比</h4>
+                               </div>
+                            </div>
+                            <div class="card-body">
+                               <div id="mainTwo" style="width: 100%;height: 450px"></div>
+                            </div>
+                         </div>
+                      </div>
+                    <div class="col-lg-6">
+                         <div class="card card-block">
+                            <div class="card-header d-flex justify-content-between pb-0">
+                               <div class="header-title">
+                                  <h4 class="card-title mb-0" data-i18n="userCommentWordCloud">用户评论词云图</h4>
+                               </div>
+                            </div>
+                            <div class="card-body">
+                               <div id="mainThree" style="width: 100%;height: 450px;text-align: center">
+                                   <img style="width:84%" src="/static/commentCloud.jpg" alt="">
+                               </div>
+                            </div>
+                         </div>
+                      </div>
+                </div>
+          </div>
+
+{% endblock %}
+
+{% block echarts %}
+    <script>
+        var chartDom = document.getElementById('main');
+        var myChart = echarts.init(chartDom);
+        var option;
+
+        option = {
+              title: {
+                text: '评论点赞量区间折线图',
+                left: '1%'
+              },
+              tooltip: {
+                trigger: 'axis'
+              },
+              grid: {
+                left: '5%',
+                right: '15%',
+                bottom: '10%'
+              },
+            legend:{},
+              xAxis: {
+                data: {{ xData | tojson }}
+              },
+              yAxis: {},
+              toolbox: {
+                right: 10,
+                feature: {
+                  dataZoom: {
+                    yAxisIndex: 'none'
+                  },
+                  restore: {},
+                  saveAsImage: {}
+                }
+              },
+              dataZoom: [
+                {
+                  show: true,
+                  start: 80,
+                  end: 100
+                },
+                {
+                  type: 'inside',
+                  start: 80,
+                  end: 100
+                }
+              ],
+              visualMap: {
+                top: 50,
+                right: 10,
+                pieces: [
+                  {
+                    gt: 0,
+                    lte: 50,
+                    color: '#93CE07'
+                  },
+                  {
+                    gt: 50,
+                    lte: 100,
+                    color: '#FBDB0F'
+                  },
+                  {
+                    gt: 100,
+                    lte: 150,
+                    color: '#FC7D02'
+                  },
+                  {
+                    gt: 150,
+                    lte: 200,
+                    color: '#FD0100'
+                  },
+                  {
+                    gt: 200,
+                    lte: 300,
+                    color: '#AA069F'
+                  },
+                  {
+                    gt: 300,
+                    color: '#AC3B2A'
+                  }
+                ],
+                outOfRange: {
+                  color: '#999'
+                }
+              },
+              series: {
+                name: '点赞个数',
+                type: 'line',
+                data: {{ yData }},
+                markLine: {
+                  silent: true,
+                  lineStyle: {
+                    color: '#333'
+                  },
+                  data: [
+                    {
+                      yAxis: 50
+                    },
+                    {
+                      yAxis: 100
+                    },
+                    {
+                      yAxis: 150
+                    },
+                    {
+                      yAxis: 200
+                    },
+                    {
+                      yAxis: 300
+                    }
+                  ]
+                }
+              }
+            }
+
+        option && myChart.setOption(option);
+
+    </script>
+    <script>
+        var chartDom = document.getElementById('mainTwo');
+        var myChart = echarts.init(chartDom);
+        var option;
+
+        option = {
+          title: {
+            text: '评论性别占比饼图',
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left'
+          },
+          series: [
+            {
+              name: '性别个数',
+              type: 'pie',
+              radius: '50%',
+              data: {{ genderPieData | tojson }},
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              }
+            }
+          ]
+        };
+
+        option && myChart.setOption(option);
+
+    </script>
 {% endblock %}
\ No newline at end of file
diff --git a/views/page/templates/hotWord.html b/views/page/templates/hotWord.html
index 4600cf1..2c3b269 100644
--- a/views/page/templates/hotWord.html
+++ b/views/page/templates/hotWord.html
@@ -1,503 +1,503 @@
-{% extends 'base_page.html' %}
-{% block title %}
-    热词统计
-{% endblock %}
-{% block  nav %}
-<nav class="iq-sidebar-menu">
-                  <ul id="iq-sidebar-toggle" class="side-menu">
-                      <li class="px-3 pt-3 pb-2 ">
-                          <span class="text-uppercase small font-weight-bold">首页</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/home" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">首页</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/hotWord" class="svg-icon ">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">热词统计</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/tableData" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">微博舆情统计</span>
-                          </a>
-                      </li>
-                      <li class="px-3 pt-3 pb-2 ">
-                          <span class="text-uppercase small font-weight-bold">数据可视化</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">文章分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/ipChar" class="svg-icon">
-                              <i class="">
-                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
-                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">IP分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/commentChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
-                                  </svg>
-                              </i><span class="ml-2">评论分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingpredict" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情预测</span>
-                          </a>
-                      </li>
-                      <li class="px-3 pt-3 pb-2">
-                          <span class="text-uppercase small font-weight-bold">词云图</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleCloud" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
-                                  </svg>
-                              </i><span class="ml-2">文章内容词云图</span>
-                          </a>
-                      </li>
-                  </ul>
-              </nav>
-{% endblock %}
-{% block content %}
-          <div class="container-fluid">
-   <div class="row">
-      <div class="col-md-12 mb-4 mt-1">
-         <div class="d-flex flex-wrap justify-content-between align-items-center">
-             <h4 class="font-weight-bold">热词统计页</h4>
-         </div>
-      </div>
-   </div>
-      <div class="row">
-          <div class="col-lg-12">
-         <div class="card card-block card-stretch card-height">
-            <div class="card-body">
-                     <div class="collapse" id="form-element-15">
-                           <div class="card"><kbd class="bg-dark"><pre id="select-size" class="text-white"><code>
-&lt;div class="form-group"&gt;
-   &lt;label&gt;Small&lt;/label&gt;
-   &lt;select class="form-control form-control-sm mb-3"&gt;
-      &lt;option selected=""&gt;Open this select menu&lt;/option&gt;
-      &lt;option value="1"&gt;One&lt;/option&gt;
-      &lt;option value="2"&gt;Two&lt;/option&gt;
-      &lt;option value="3"&gt;Three&lt;/option&gt;
-   &lt;/select&gt;
-&lt;/div&gt;
-&lt;div class="form-group"&gt;
-   &lt;label&gt;Default&lt;/label&gt;
-   &lt;select class="form-control mb-3"&gt;
-      &lt;option selected=""&gt;Open this select menu&lt;/option&gt;
-      &lt;option value="1"&gt;One&lt;/option&gt;
-      &lt;option value="2"&gt;Two&lt;/option&gt;
-      &lt;option value="3"&gt;Three&lt;/option&gt;
-   &lt;/select&gt;
-&lt;/div&gt;
-&lt;div class="form-group"&gt;
-   &lt;label&gt;Large&lt;/label&gt;
-   &lt;select class="form-control form-control-lg"&gt;
-      &lt;option selected=""&gt;Open this select menu&lt;/option&gt;
-      &lt;option value="1"&gt;One&lt;/option&gt;
-      &lt;option value="2"&gt;Two&lt;/option&gt;
-      &lt;option value="3"&gt;Three&lt;/option&gt;
-   &lt;/select&gt;
-&lt;/div&gt;
-</code></pre></kbd></div>
-                        </div>
-                     <div class="form-group">
-                        <label>热词选择</label>
-                        <select onchange="hotWordChange(event)" class="form-control mb-3">
-                            {% for i in hotWordList %}
-                                {% if defaultHotWord == i[0] %}
-                                                                                       <option selected value="{{ i[0] }}">{{ i[0] }}</option>
-                                {% else %}
-                                                                                       <option value="{{ i[0] }}">{{ i[0] }}</option>
-                                {% endif %}
-                            {% endfor %}
-                        </select>
-                         <script>
-                             function hotWordChange(e){
-                                 window.location.href = 'http://127.0.0.1:5000/page/hotWord?hotWord=' + e.target.value
-                             }
-                         </script>
-                     </div>
-                  </div>
-         </div>
-
-      </div>
-      </div>
-          <div class="row" style="justify-content: center">
-                <div class="col-md-6 col-xl-6">
-                                    <div class="card">
-                                        <div class="card-body">
-                                            <h4 class="card-title font-size-16 mt-0">{{ defaultHotWord }}</h4>
-                                        </div>
-                                        <ul class="list-group list-group-flush">
-                                            <li class="list-group-item">热词名称：{{ defaultHotWord }}</li>
-                                            <li class="list-group-item">出现次数：{{ hotWordLen }}次</li>
-                                            <li class="list-group-item">热词情感：{{ sentences }}</li>
-                                        </ul>
-                                    </div>
-
-                                </div>
-        </div>
-          <div class="row">
-              <div class="col-lg-12">
-                  <div class="card">
-                                        <div class="card-body">
-                                            <h4 class="card-title font-size-16 mt-0">热词年份变化趋势</h4>
-                                        </div>
-                                        <div id="main" style="width:100%;height: 450px"></div>
-                                    </div>
-              </div>
-          </div>
-          <div class="row">
-              <div class="col-lg-12">
-                  <div class="card">
-                  <div class="card-header d-flex justify-content-between">
-                     <div class="header-title">
-                        <h4 class="card-title">热词查询表格</h4>
-                     </div>
-                  <div class="header-action">
-                           <i data-toggle="collapse" data-target="#datatable-1" aria-expanded="false">
-                              <svg width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
-                              </svg>
-                           </i>
-                        </div>
-                  </div>
-                  <div class="card-body">
-                     <div class="collapse" id="datatable-1">
-                           <div class="card"><kbd class="bg-dark">
-                               <pre id="bootstrap-datatables" class="text-white"><code>
-&lt;table id="datatable" class="table data-table table-striped table-bordered" &gt;
-   &lt;thead&gt;
-      &lt;tr&gt;
-         &lt;th&gt;Name&lt;/th&gt;
-         &lt;th&gt;Position&lt;/th&gt;
-         &lt;th&gt;Office&lt;/th&gt;
-         &lt;th&gt;Age&lt;/th&gt;
-         &lt;th&gt;Start date&lt;/th&gt;
-         &lt;th&gt;Salary&lt;/th&gt;
-      &lt;/tr&gt;
-   &lt;/thead&gt;
-   &lt;tbody&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Tiger Nixon&lt;/td&gt;
-         &lt;td&gt;System Architect&lt;/td&gt;
-         &lt;td&gt;Edinburgh&lt;/td&gt;
-         &lt;td&gt;61&lt;/td&gt;
-         &lt;td&gt;2011/04/25&lt;/td&gt;
-         &lt;td&gt;$320,800&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Garrett Winters&lt;/td&gt;
-         &lt;td&gt;Accountant&lt;/td&gt;
-         &lt;td&gt;Tokyo&lt;/td&gt;
-         &lt;td&gt;63&lt;/td&gt;
-         &lt;td&gt;2011/07/25&lt;/td&gt;
-         &lt;td&gt;$170,750&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Ashton Cox&lt;/td&gt;
-         &lt;td&gt;Junior Technical Author&lt;/td&gt;
-         &lt;td&gt;San Francisco&lt;/td&gt;
-         &lt;td&gt;66&lt;/td&gt;
-         &lt;td&gt;2009/01/12&lt;/td&gt;
-         &lt;td&gt;$86,000&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Cedric Kelly&lt;/td&gt;
-         &lt;td&gt;Senior Javascript Developer&lt;/td&gt;
-         &lt;td&gt;Edinburgh&lt;/td&gt;
-         &lt;td&gt;22&lt;/td&gt;
-         &lt;td&gt;2012/03/29&lt;/td&gt;
-         &lt;td&gt;$433,060&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Airi Satou&lt;/td&gt;
-         &lt;td&gt;Accountant&lt;/td&gt;
-         &lt;td&gt;Tokyo&lt;/td&gt;
-         &lt;td&gt;33&lt;/td&gt;
-         &lt;td&gt;2008/11/28&lt;/td&gt;
-         &lt;td&gt;$162,700&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Brielle Williamson&lt;/td&gt;
-         &lt;td&gt;Integration Specialist&lt;/td&gt;
-         &lt;td&gt;New York&lt;/td&gt;
-         &lt;td&gt;61&lt;/td&gt;
-         &lt;td&gt;2012/12/02&lt;/td&gt;
-         &lt;td&gt;$372,000&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Herrod Chandler&lt;/td&gt;
-         &lt;td&gt;Sales Assistant&lt;/td&gt;
-         &lt;td&gt;San Francisco&lt;/td&gt;
-         &lt;td&gt;59&lt;/td&gt;
-         &lt;td&gt;2012/08/06&lt;/td&gt;
-         &lt;td&gt;$137,500&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Rhona Davidson&lt;/td&gt;
-         &lt;td&gt;Integration Specialist&lt;/td&gt;
-         &lt;td&gt;Tokyo&lt;/td&gt;
-         &lt;td&gt;55&lt;/td&gt;
-         &lt;td&gt;2010/10/14&lt;/td&gt;
-         &lt;td&gt;$327,900&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Colleen Hurst&lt;/td&gt;
-         &lt;td&gt;Javascript Developer&lt;/td&gt;
-         &lt;td&gt;San Francisco&lt;/td&gt;
-         &lt;td&gt;39&lt;/td&gt;
-         &lt;td&gt;2009/09/15&lt;/td&gt;
-         &lt;td&gt;$205,500&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Sonya Frost&lt;/td&gt;
-         &lt;td&gt;Software Engineer&lt;/td&gt;
-         &lt;td&gt;Edinburgh&lt;/td&gt;
-         &lt;td&gt;23&lt;/td&gt;
-         &lt;td&gt;2008/12/13&lt;/td&gt;
-         &lt;td&gt;$103,600&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Jena Gaines&lt;/td&gt;
-         &lt;td&gt;Office Manager&lt;/td&gt;
-         &lt;td&gt;London&lt;/td&gt;
-         &lt;td&gt;30&lt;/td&gt;
-         &lt;td&gt;2008/12/19&lt;/td&gt;
-         &lt;td&gt;$90,560&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Quinn Flynn&lt;/td&gt;
-         &lt;td&gt;Support Lead&lt;/td&gt;
-         &lt;td&gt;Edinburgh&lt;/td&gt;
-         &lt;td&gt;22&lt;/td&gt;
-         &lt;td&gt;2013/03/03&lt;/td&gt;
-         &lt;td&gt;$342,000&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Charde Marshall&lt;/td&gt;
-         &lt;td&gt;Regional Director&lt;/td&gt;
-         &lt;td&gt;San Francisco&lt;/td&gt;
-         &lt;td&gt;36&lt;/td&gt;
-         &lt;td&gt;2008/10/16&lt;/td&gt;
-         &lt;td&gt;$470,600&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Haley Kennedy&lt;/td&gt;
-         &lt;td&gt;Senior Marketing Designer&lt;/td&gt;
-         &lt;td&gt;London&lt;/td&gt;
-         &lt;td&gt;43&lt;/td&gt;
-         &lt;td&gt;2012/12/18&lt;/td&gt;
-         &lt;td&gt;$313,500&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Tatyana Fitzpatrick&lt;/td&gt;
-         &lt;td&gt;Regional Director&lt;/td&gt;
-         &lt;td&gt;London&lt;/td&gt;
-         &lt;td&gt;19&lt;/td&gt;
-         &lt;td&gt;2010/03/17&lt;/td&gt;
-         &lt;td&gt;$385,750&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Michael Silva&lt;/td&gt;
-         &lt;td&gt;Marketing Designer&lt;/td&gt;
-         &lt;td&gt;London&lt;/td&gt;
-         &lt;td&gt;66&lt;/td&gt;
-         &lt;td&gt;2012/11/27&lt;/td&gt;
-         &lt;td&gt;$198,500&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Paul Byrd&lt;/td&gt;
-         &lt;td&gt;Chief Financial Officer (CFO)&lt;/td&gt;
-         &lt;td&gt;New York&lt;/td&gt;
-         &lt;td&gt;64&lt;/td&gt;
-         &lt;td&gt;2010/06/09&lt;/td&gt;
-         &lt;td&gt;$725,000&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Gloria Little&lt;/td&gt;
-         &lt;td&gt;Systems Administrator&lt;/td&gt;
-         &lt;td&gt;New York&lt;/td&gt;
-         &lt;td&gt;59&lt;/td&gt;
-         &lt;td&gt;2009/04/10&lt;/td&gt;
-         &lt;td&gt;$237,500&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Bradley Greer&lt;/td&gt;
-         &lt;td&gt;Software Engineer&lt;/td&gt;
-         &lt;td&gt;London&lt;/td&gt;
-         &lt;td&gt;41&lt;/td&gt;
-         &lt;td&gt;2012/10/13&lt;/td&gt;
-         &lt;td&gt;$132,000&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Dai Rios&lt;/td&gt;
-         &lt;td&gt;Personnel Lead&lt;/td&gt;
-         &lt;td&gt;Edinburgh&lt;/td&gt;
-         &lt;td&gt;35&lt;/td&gt;
-         &lt;td&gt;2012/09/26&lt;/td&gt;
-         &lt;td&gt;$217,500&lt;/td&gt;
-      &lt;/tr&gt;
-&lt;/table&gt;
-</code></pre></kbd></div>
-                        </div>
-                     <p>根据选择的热词从而查询出评论数据</p>
-                     <div class="table-responsive">
-                        <div id="datatable-1_wrapper" class="dataTables_wrapper dt-bootstrap4">
-                            <div class="row"><div class="col-sm-12"><table id="datatable-1" class="table data-table table-striped table-bordered dataTable" role="grid" aria-describedby="datatable-1_info">
-                           <thead>
-                              <tr role="row">
-                                  <th class="sorting sorting_asc" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 250.844px;">文章ID</th>
-                                  <th class="sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 392.094px;">评论用户</th>
-                                  <th class="sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 190.75px;">评论性别</th>
-                                  <th class="sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 84.2656px;">评论地址</th>
-                                  <th class="sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 172.594px;">评论内容</th>
-                                  <th class="text-right sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 158.453px;">点赞量</th></tr>
-                           </thead>
-                           <tbody>
-                                {% for i in comments %}
-                                <tr class="odd">
-                                     <td class="sorting_1">{{ i[0] }}</td>
-                                     <td>{{ i[5] }}</td>
-                                     <td>
-                                         {% if i[6]  =='f' %}
-                                             女生
-                                         {% else %}
-                                            男生
-                                         {% endif %}
-                                     </td>
-                                     <td>{{ i[3] }}</td>
-                                     <td>{{ i[4] }}</td>
-                                     <td class="text-right">👍{{ i[2] }}</td>
-                                  </tr>
-                               {% endfor %}
-                           </tbody>
-                        </table></div></div>
-                     </div>
-                  </div>
-               </div>
-              </div>
-          </div>
-</div>
-
-{% endblock %}
-
-{% block echarts %}
-    <script>
-    var chartDom = document.getElementById('main');
-    var myChart = echarts.init(chartDom);
-    var option;
-
-    option = {
-      tooltip: {
-        trigger: 'axis'
-      },
-      legend: {
-        data: ['热词出现时间分布个数']
-      },
-      toolbox: {
-        show: true,
-        feature: {
-          dataView: { show: true, readOnly: false },
-          magicType: { show: true, type: ['line', 'bar'] },
-          restore: { show: true },
-          saveAsImage: { show: true }
-        }
-      },
-      calculable: true,
-      xAxis: [
-        {
-          type: 'category',
-          // prettier-ignore
-          data: {{ xData | tojson }}
-        }
-      ],
-      yAxis: [
-        {
-          type: 'value'
-        }
-      ],
-        dataZoom: [
-        {
-          show: true,
-          start: 10,
-          end: 60
-        },
-        {
-          type: 'inside',
-          start: 10,
-          end: 60
-        }
-      ],
-      series: [
-        {
-          name: '热词出现时间分布个数',
-          type: 'bar',
-          data: {{ yData }},
-          markPoint: {
-            data: [
-              { type: 'max', name: 'Max' },
-              { type: 'min', name: 'Min' }
-            ]
-          },
-          markLine: {
-            data: [{ type: 'average', name: 'Avg' }]
-          }
-        }
-      ]
-    };
-
-    option && myChart.setOption(option);
-
-    </script>
+{% extends 'base_page.html' %}
+{% block title %}
+    <span data-i18n="hotWord">热词统计</span>
+{% endblock %}
+{% block  nav %}
+<nav class="iq-sidebar-menu">
+                  <ul id="iq-sidebar-toggle" class="side-menu">
+                      <li class="px-3 pt-3 pb-2 ">
+                          <span class="text-uppercase small font-weight-bold" data-i18n="home">首页</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/home" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="home">首页</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/hotWord" class="svg-icon ">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="hotWord">热词统计</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/tableData" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="tableData">微博舆情统计</span>
+                          </a>
+                      </li>
+                      <li class="px-3 pt-3 pb-2 ">
+                          <span class="text-uppercase small font-weight-bold" data-i18n="dataVisualization">数据可视化</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="articleChar">文章分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/ipChar" class="svg-icon">
+                              <i class="">
+                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
+                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="ipChar">IP分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/commentChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
+                                  </svg>
+                              </i><span class="ml-2" data-i18n="commentChar">评论分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="yuqingChar">舆情分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingpredict" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="yuqingpredict">舆情预测</span>
+                          </a>
+                      </li>
+                      <li class="px-3 pt-3 pb-2">
+                          <span class="text-uppercase small font-weight-bold" data-i18n="wordCloud">词云图</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleCloud" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+                                  </svg>
+                              </i><span class="ml-2" data-i18n="articleCloud">文章内容词云图</span>
+                          </a>
+                      </li>
+                  </ul>
+              </nav>
+{% endblock %}
+{% block content %}
+          <div class="container-fluid">
+   <div class="row">
+      <div class="col-md-12 mb-4 mt-1">
+         <div class="d-flex flex-wrap justify-content-between align-items-center">
+             <h4 class="font-weight-bold" data-i18n="hotWordStatistics">热词统计页</h4>
+         </div>
+      </div>
+   </div>
+      <div class="row">
+          <div class="col-lg-12">
+         <div class="card card-block card-stretch card-height">
+            <div class="card-body">
+                     <div class="collapse" id="form-element-15">
+                           <div class="card"><kbd class="bg-dark"><pre id="select-size" class="text-white"><code>
+&lt;div class="form-group"&gt;
+   &lt;label&gt;Small&lt;/label&gt;
+   &lt;select class="form-control form-control-sm mb-3"&gt;
+      &lt;option selected=""&gt;Open this select menu&lt;/option&gt;
+      &lt;option value="1"&gt;One&lt;/option&gt;
+      &lt;option value="2"&gt;Two&lt;/option&gt;
+      &lt;option value="3"&gt;Three&lt;/option&gt;
+   &lt;/select&gt;
+&lt;/div&gt;
+&lt;div class="form-group"&gt;
+   &lt;label&gt;Default&lt;/label&gt;
+   &lt;select class="form-control mb-3"&gt;
+      &lt;option selected=""&gt;Open this select menu&lt;/option&gt;
+      &lt;option value="1"&gt;One&lt;/option&gt;
+      &lt;option value="2"&gt;Two&lt;/option&gt;
+      &lt;option value="3"&gt;Three&lt;/option&gt;
+   &lt;/select&gt;
+&lt;/div&gt;
+&lt;div class="form-group"&gt;
+   &lt;label&gt;Large&lt;/label&gt;
+   &lt;select class="form-control form-control-lg"&gt;
+      &lt;option selected=""&gt;Open this select menu&lt;/option&gt;
+      &lt;option value="1"&gt;One&lt;/option&gt;
+      &lt;option value="2"&gt;Two&lt;/option&gt;
+      &lt;option value="3"&gt;Three&lt;/option&gt;
+   &lt;/select&gt;
+&lt;/div&gt;
+</code></pre></kbd></div>
+                        </div>
+                     <div class="form-group">
+                        <label data-i18n="hotWordSelection">热词选择</label>
+                        <select onchange="hotWordChange(event)" class="form-control mb-3">
+                            {% for i in hotWordList %}
+                                {% if defaultHotWord == i[0] %}
+                                                                                       <option selected value="{{ i[0] }}">{{ i[0] }}</option>
+                                {% else %}
+                                                                                       <option value="{{ i[0] }}">{{ i[0] }}</option>
+                                {% endif %}
+                            {% endfor %}
+                        </select>
+                         <script>
+                             function hotWordChange(e){
+                                 window.location.href = 'http://127.0.0.1:5000/page/hotWord?hotWord=' + e.target.value
+                             }
+                         </script>
+                     </div>
+                  </div>
+         </div>
+
+      </div>
+      </div>
+          <div class="row" style="justify-content: center">
+                <div class="col-md-6 col-xl-6">
+                                    <div class="card">
+                                        <div class="card-body">
+                                            <h4 class="card-title font-size-16 mt-0">{{ defaultHotWord }}</h4>
+                                        </div>
+                                        <ul class="list-group list-group-flush">
+                                            <li class="list-group-item"><span data-i18n="hotWordName">热词名称</span>：{{ defaultHotWord }}</li>
+                                            <li class="list-group-item"><span data-i18n="occurrenceCount">出现次数</span>：{{ hotWordLen }}次</li>
+                                            <li class="list-group-item"><span data-i18n="hotWordSentiment">热词情感</span>：{{ sentences }}</li>
+                                        </ul>
+                                    </div>
+
+                                </div>
+        </div>
+          <div class="row">
+              <div class="col-lg-12">
+                  <div class="card">
+                                        <div class="card-body">
+                                            <h4 class="card-title font-size-16 mt-0" data-i18n="hotWordYearTrend">热词年份变化趋势</h4>
+                                        </div>
+                                        <div id="main" style="width:100%;height: 450px"></div>
+                                    </div>
+              </div>
+          </div>
+          <div class="row">
+              <div class="col-lg-12">
+                  <div class="card">
+                  <div class="card-header d-flex justify-content-between">
+                     <div class="header-title">
+                        <h4 class="card-title" data-i18n="hotWordRanking">热词查询表格</h4>
+                     </div>
+                  <div class="header-action">
+                           <i data-toggle="collapse" data-target="#datatable-1" aria-expanded="false">
+                              <svg width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
+                              </svg>
+                           </i>
+                        </div>
+                  </div>
+                  <div class="card-body">
+                     <div class="collapse" id="datatable-1">
+                           <div class="card"><kbd class="bg-dark">
+                               <pre id="bootstrap-datatables" class="text-white"><code>
+&lt;table id="datatable" class="table data-table table-striped table-bordered" &gt;
+   &lt;thead&gt;
+      &lt;tr&gt;
+         &lt;th&gt;Name&lt;/th&gt;
+         &lt;th&gt;Position&lt;/th&gt;
+         &lt;th&gt;Office&lt;/th&gt;
+         &lt;th&gt;Age&lt;/th&gt;
+         &lt;th&gt;Start date&lt;/th&gt;
+         &lt;th&gt;Salary&lt;/th&gt;
+      &lt;/tr&gt;
+   &lt;/thead&gt;
+   &lt;tbody&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Tiger Nixon&lt;/td&gt;
+         &lt;td&gt;System Architect&lt;/td&gt;
+         &lt;td&gt;Edinburgh&lt;/td&gt;
+         &lt;td&gt;61&lt;/td&gt;
+         &lt;td&gt;2011/04/25&lt;/td&gt;
+         &lt;td&gt;$320,800&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Garrett Winters&lt;/td&gt;
+         &lt;td&gt;Accountant&lt;/td&gt;
+         &lt;td&gt;Tokyo&lt;/td&gt;
+         &lt;td&gt;63&lt;/td&gt;
+         &lt;td&gt;2011/07/25&lt;/td&gt;
+         &lt;td&gt;$170,750&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Ashton Cox&lt;/td&gt;
+         &lt;td&gt;Junior Technical Author&lt;/td&gt;
+         &lt;td&gt;San Francisco&lt;/td&gt;
+         &lt;td&gt;66&lt;/td&gt;
+         &lt;td&gt;2009/01/12&lt;/td&gt;
+         &lt;td&gt;$86,000&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Cedric Kelly&lt;/td&gt;
+         &lt;td&gt;Senior Javascript Developer&lt;/td&gt;
+         &lt;td&gt;Edinburgh&lt;/td&gt;
+         &lt;td&gt;22&lt;/td&gt;
+         &lt;td&gt;2012/03/29&lt;/td&gt;
+         &lt;td&gt;$433,060&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Airi Satou&lt;/td&gt;
+         &lt;td&gt;Accountant&lt;/td&gt;
+         &lt;td&gt;Tokyo&lt;/td&gt;
+         &lt;td&gt;33&lt;/td&gt;
+         &lt;td&gt;2008/11/28&lt;/td&gt;
+         &lt;td&gt;$162,700&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Brielle Williamson&lt;/td&gt;
+         &lt;td&gt;Integration Specialist&lt;/td&gt;
+         &lt;td&gt;New York&lt;/td&gt;
+         &lt;td&gt;61&lt;/td&gt;
+         &lt;td&gt;2012/12/02&lt;/td&gt;
+         &lt;td&gt;$372,000&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Herrod Chandler&lt;/td&gt;
+         &lt;td&gt;Sales Assistant&lt;/td&gt;
+         &lt;td&gt;San Francisco&lt;/td&gt;
+         &lt;td&gt;59&lt;/td&gt;
+         &lt;td&gt;2012/08/06&lt;/td&gt;
+         &lt;td&gt;$137,500&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Rhona Davidson&lt;/td&gt;
+         &lt;td&gt;Integration Specialist&lt;/td&gt;
+         &lt;td&gt;Tokyo&lt;/td&gt;
+         &lt;td&gt;55&lt;/td&gt;
+         &lt;td&gt;2010/10/14&lt;/td&gt;
+         &lt;td&gt;$327,900&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Colleen Hurst&lt;/td&gt;
+         &lt;td&gt;Javascript Developer&lt;/td&gt;
+         &lt;td&gt;San Francisco&lt;/td&gt;
+         &lt;td&gt;39&lt;/td&gt;
+         &lt;td&gt;2009/09/15&lt;/td&gt;
+         &lt;td&gt;$205,500&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Sonya Frost&lt;/td&gt;
+         &lt;td&gt;Software Engineer&lt;/td&gt;
+         &lt;td&gt;Edinburgh&lt;/td&gt;
+         &lt;td&gt;23&lt;/td&gt;
+         &lt;td&gt;2008/12/13&lt;/td&gt;
+         &lt;td&gt;$103,600&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Jena Gaines&lt;/td&gt;
+         &lt;td&gt;Office Manager&lt;/td&gt;
+         &lt;td&gt;London&lt;/td&gt;
+         &lt;td&gt;30&lt;/td&gt;
+         &lt;td&gt;2008/12/19&lt;/td&gt;
+         &lt;td&gt;$90,560&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Quinn Flynn&lt;/td&gt;
+         &lt;td&gt;Support Lead&lt;/td&gt;
+         &lt;td&gt;Edinburgh&lt;/td&gt;
+         &lt;td&gt;22&lt;/td&gt;
+         &lt;td&gt;2013/03/03&lt;/td&gt;
+         &lt;td&gt;$342,000&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Charde Marshall&lt;/td&gt;
+         &lt;td&gt;Regional Director&lt;/td&gt;
+         &lt;td&gt;San Francisco&lt;/td&gt;
+         &lt;td&gt;36&lt;/td&gt;
+         &lt;td&gt;2008/10/16&lt;/td&gt;
+         &lt;td&gt;$470,600&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Haley Kennedy&lt;/td&gt;
+         &lt;td&gt;Senior Marketing Designer&lt;/td&gt;
+         &lt;td&gt;London&lt;/td&gt;
+         &lt;td&gt;43&lt;/td&gt;
+         &lt;td&gt;2012/12/18&lt;/td&gt;
+         &lt;td&gt;$313,500&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Tatyana Fitzpatrick&lt;/td&gt;
+         &lt;td&gt;Regional Director&lt;/td&gt;
+         &lt;td&gt;London&lt;/td&gt;
+         &lt;td&gt;19&lt;/td&gt;
+         &lt;td&gt;2010/03/17&lt;/td&gt;
+         &lt;td&gt;$385,750&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Michael Silva&lt;/td&gt;
+         &lt;td&gt;Marketing Designer&lt;/td&gt;
+         &lt;td&gt;London&lt;/td&gt;
+         &lt;td&gt;66&lt;/td&gt;
+         &lt;td&gt;2012/11/27&lt;/td&gt;
+         &lt;td&gt;$198,500&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Paul Byrd&lt;/td&gt;
+         &lt;td&gt;Chief Financial Officer (CFO)&lt;/td&gt;
+         &lt;td&gt;New York&lt;/td&gt;
+         &lt;td&gt;64&lt;/td&gt;
+         &lt;td&gt;2010/06/09&lt;/td&gt;
+         &lt;td&gt;$725,000&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Gloria Little&lt;/td&gt;
+         &lt;td&gt;Systems Administrator&lt;/td&gt;
+         &lt;td&gt;New York&lt;/td&gt;
+         &lt;td&gt;59&lt;/td&gt;
+         &lt;td&gt;2009/04/10&lt;/td&gt;
+         &lt;td&gt;$237,500&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Bradley Greer&lt;/td&gt;
+         &lt;td&gt;Software Engineer&lt;/td&gt;
+         &lt;td&gt;London&lt;/td&gt;
+         &lt;td&gt;41&lt;/td&gt;
+         &lt;td&gt;2012/10/13&lt;/td&gt;
+         &lt;td&gt;$132,000&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Dai Rios&lt;/td&gt;
+         &lt;td&gt;Personnel Lead&lt;/td&gt;
+         &lt;td&gt;Edinburgh&lt;/td&gt;
+         &lt;td&gt;35&lt;/td&gt;
+         &lt;td&gt;2012/09/26&lt;/td&gt;
+         &lt;td&gt;$217,500&lt;/td&gt;
+      &lt;/tr&gt;
+&lt;/table&gt;
+</code></pre></kbd></div>
+                        </div>
+                     <p data-i18n="queryCommentsByHotWord">根据选择的热词从而查询出评论数据</p>
+                     <div class="table-responsive">
+                        <div id="datatable-1_wrapper" class="dataTables_wrapper dt-bootstrap4">
+                            <div class="row"><div class="col-sm-12"><table id="datatable-1" class="table data-table table-striped table-bordered dataTable" role="grid" aria-describedby="datatable-1_info">
+                           <thead>
+                              <tr role="row">
+                                  <th class="sorting sorting_asc" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 250.844px;" data-i18n="articleId">文章ID</th>
+                                  <th class="sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 392.094px;" data-i18n="commentUser">评论用户</th>
+                                  <th class="sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 190.75px;" data-i18n="commentGender">评论性别</th>
+                                  <th class="sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 84.2656px;" data-i18n="commentAddress">评论地址</th>
+                                  <th class="sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 172.594px;" data-i18n="commentContent">评论内容</th>
+                                  <th class="text-right sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 158.453px;" data-i18n="likeCount">点赞量</th></tr>
+                           </thead>
+                           <tbody>
+                                {% for i in comments %}
+                                <tr class="odd">
+                                     <td class="sorting_1">{{ i[0] }}</td>
+                                     <td>{{ i[5] }}</td>
+                                     <td>
+                                         {% if i[6]  =='f' %}
+                                             女生
+                                         {% else %}
+                                            男生
+                                         {% endif %}
+                                     </td>
+                                     <td>{{ i[3] }}</td>
+                                     <td>{{ i[4] }}</td>
+                                     <td class="text-right">👍{{ i[2] }}</td>
+                                  </tr>
+                               {% endfor %}
+                           </tbody>
+                        </table></div></div>
+                     </div>
+                  </div>
+               </div>
+              </div>
+          </div>
+</div>
+
+{% endblock %}
+
+{% block echarts %}
+    <script>
+    var chartDom = document.getElementById('main');
+    var myChart = echarts.init(chartDom);
+    var option;
+
+    option = {
+      tooltip: {
+        trigger: 'axis'
+      },
+      legend: {
+        data: [t('hotWordTimeDistribution')]
+      },
+      toolbox: {
+        show: true,
+        feature: {
+          dataView: { show: true, readOnly: false },
+          magicType: { show: true, type: ['line', 'bar'] },
+          restore: { show: true },
+          saveAsImage: { show: true }
+        }
+      },
+      calculable: true,
+      xAxis: [
+        {
+          type: 'category',
+          // prettier-ignore
+          data: {{ xData | tojson }}
+        }
+      ],
+      yAxis: [
+        {
+          type: 'value'
+        }
+      ],
+        dataZoom: [
+        {
+          show: true,
+          start: 10,
+          end: 60
+        },
+        {
+          type: 'inside',
+          start: 10,
+          end: 60
+        }
+      ],
+      series: [
+        {
+          name: t('hotWordTimeDistribution'),
+          type: 'bar',
+          data: {{ yData }},
+          markPoint: {
+            data: [
+              { type: 'max', name: 'Max' },
+              { type: 'min', name: 'Min' }
+            ]
+          },
+          markLine: {
+            data: [{ type: 'average', name: 'Avg' }]
+          }
+        }
+      ]
+    };
+
+    option && myChart.setOption(option);
+
+    </script>
 {% endblock %}
\ No newline at end of file
diff --git a/views/page/templates/index.html b/views/page/templates/index.html
index 3f4a51d..d3c6cc8 100644
--- a/views/page/templates/index.html
+++ b/views/page/templates/index.html
@@ -1,27 +1,30 @@
-<!--
-                         _oo0oo_
-                        o8888888o
-                        88" . "88
-                        (| -_- |)
-                        0\  =  /0
-                      ___/`---'\___
-                    .' \\|     |// '.
-                   / \\|||  :  |||// \
-                  / _||||| -:- |||||- \
-                 |   | \\\  - /// |   |
-                 | \_|  ''\---/''  |_/ |
-                 \  .-\__  '-'  ___/-. /
-               ___'. .'  /--.--\  `. .'___
-            ."" '<  `.___\_<|>_/___.' >' "".
-           | | :  `- \`.;`\ _ /`;.`/ - ` : | |
-           \  \ `_.   \_ __\ /__ _/   .-` /  /
-       =====`-.____`.___ \_____/___.-`___.-'=====
-                         `=---='
- 
- 
-    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- 
-     佛祖保佑   代码永无BUG
- 
--->
-{% extends 'base_page.html' %}
\ No newline at end of file
+<!--
+                         _oo0oo_
+                        o8888888o
+                        88" . "88
+                        (| -_- |)
+                        0\  =  /0
+                      ___/`---'\___
+                    .' \\|     |// '.
+                   / \\|||  :  |||// \
+                  / _||||| -:- |||||- \
+                 |   | \\\  - /// |   |
+                 | \_|  ''\---/''  |_/ |
+                 \  .-\__  '-'  ___/-. /
+               ___'. .'  /--.--\  `. .'___
+            ."" '<  `.___\_<|>_/___.' >' "".
+           | | :  `- \`.;`\ _ /`;.`/ - ` : | |
+           \  \ `_.   \_ __\ /__ _/   .-` /  /
+       =====`-.____`.___ \_____/___.-`___.-'=====
+                         `=---='
+ 
+ 
+    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ 
+     佛祖保佑   代码永无BUG
+ 
+-->
+{% extends 'base_page.html' %}
+{% block title %}
+    <span data-i18n="home">首页</span>
+{% endblock %}
\ No newline at end of file
diff --git a/views/page/templates/ipChar.html b/views/page/templates/ipChar.html
index 718084e..c0c5afb 100644
--- a/views/page/templates/ipChar.html
+++ b/views/page/templates/ipChar.html
@@ -1,275 +1,275 @@
-{% extends 'base_page.html' %}
-
-{% block title %}
-    IP分析
-{% endblock %}
-
-{% block  nav %}
-<nav class="iq-sidebar-menu">
-                  <ul id="iq-sidebar-toggle" class="side-menu">
-                      <li class="px-3 pt-3 pb-2 ">
-                          <span class="text-uppercase small font-weight-bold">首页</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/home" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">首页</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/hotWord" class="svg-icon ">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">热词统计</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/tableData" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">微博舆情统计</span>
-                          </a>
-                      </li>
-                      <li class="px-3 pt-3 pb-2 ">
-                          <span class="text-uppercase small font-weight-bold">数据可视化</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">文章分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/ipChar" class="svg-icon">
-                              <i class="">
-                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
-                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">IP分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/commentChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
-                                  </svg>
-                              </i><span class="ml-2">评论分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingpredict" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情预测</span>
-                          </a>
-                      </li>
-                      <li class="px-3 pt-3 pb-2">
-                          <span class="text-uppercase small font-weight-bold">词云图</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleCloud" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
-                                  </svg>
-                              </i><span class="ml-2">文章内容词云图</span>
-                          </a>
-                      </li>
-                  </ul>
-              </nav>
-{% endblock %}
-{% block content %}
-          <div class="container-fluid">
-                <div class="row">
-                      <div class="col-md-12 mb-4 mt-1">
-                         <div class="d-flex flex-wrap justify-content-between align-items-center">
-                             <h4 class="font-weight-bold">IP分析</h4>
-                         </div>
-                      </div>
-                   </div>
-                <div class="row">
-                    <div class="col-lg-12">
-                         <div class="card card-block">
-                            <div class="card-header d-flex justify-content-between pb-0">
-                               <div class="header-title">
-                                  <h4 class="card-title mb-0">文章IP位置分析图</h4>
-                               </div>
-                            </div>
-                            <div class="card-body">
-                               <div id="main" style="width: 100%;height: 750px"></div>
-                            </div>
-                         </div>
-                      </div>
-                    <div class="col-lg-12">
-                         <div class="card card-block">
-                            <div class="card-header d-flex justify-content-between pb-0">
-                               <div class="header-title">
-                                  <h4 class="card-title mb-0">评论IP位置分析图</h4>
-                               </div>
-                            </div>
-                            <div class="card-body">
-                               <div id="mainTwo" style="width: 100%;height: 750px"></div>
-                            </div>
-                         </div>
-                      </div>
-                </div>
-          </div>
-
-{% endblock %}
-
-{% block echarts %}
-    <script>
-        var chartDom = document.getElementById('main');
-        var myChart = echarts.init(chartDom);
-        var option;
-
-        option = {
-            title:{
-                text:'文章IP发布地址地图',
-                left:'center',
-                textStyle:{
-                    color:"#333",
-                    fontWeight:"bold"
-                }
-            },
-            tooltip:{
-                trigger:'item',
-                formatter:function(params){
-                    return params.name + '<br>微博发布个数： ' + params.value + ' 个'
-                }
-            },
-            visualMap:{
-                min:0,
-                max:50,
-                text:['高','低'],
-                realtime:true,
-                calulable:true,
-                inRange:{
-                    color:['orange','green']
-                }
-            },
-            series:[{
-                type:'map',
-                map:"china",
-                label:{
-                    normal:{
-                        show:true,
-                        color:"white",
-                        fontSize:'12'
-                    }
-                },
-                emphasis:{
-                    label:{
-                        show:true
-                    },
-                },
-                data:{{ articleRegionData | tojson }},
-                itemStyle:{
-                    normal: {
-                        areaColor:"skyblue",
-                        borderColor:"#fff"
-                    },
-                    emphasis:{
-                        areaColor: '#2b91b7'
-                    }
-                },
-                zoom:1.4,
-                roam:true
-            }]
-        }
-
-        option && myChart.setOption(option);
-    </script>
-    <script>
-        var chartDom = document.getElementById('mainTwo');
-        var myChart = echarts.init(chartDom);
-        var option;
-
-        option = {
-            title:{
-                text:'文章IP发布地址地图',
-                left:'center',
-                textStyle:{
-                    color:"#333",
-                    fontWeight:"bold"
-                }
-            },
-            tooltip:{
-                trigger:'item',
-                formatter:function(params){
-                    return params.name + '<br>微博发布个数： ' + params.value + ' 个'
-                }
-            },
-            visualMap:{
-                min:0,
-                max:200,
-                text:['高','低'],
-                realtime:true,
-                calulable:true,
-                inRange:{
-                    color:['orange','green']
-                }
-            },
-            series:[{
-                type:'map',
-                map:"china",
-                label:{
-                    normal:{
-                        show:true,
-                        color:"white",
-                        fontSize:'12'
-                    }
-                },
-                emphasis:{
-                    label:{
-                        show:true
-                    },
-                },
-                data:{{ commentRegionData | tojson }},
-                itemStyle:{
-                    normal: {
-                        areaColor:"skyblue",
-                        borderColor:"#fff"
-                    },
-                    emphasis:{
-                        areaColor: '#2b91b7'
-                    }
-                },
-                zoom:1.4,
-                roam:true
-            }]
-        }
-
-        option && myChart.setOption(option);
-    </script>
+{% extends 'base_page.html' %}
+
+{% block title %}
+    <span data-i18n="ipChar">IP分析</span>
+{% endblock %}
+
+{% block  nav %}
+<nav class="iq-sidebar-menu">
+                  <ul id="iq-sidebar-toggle" class="side-menu">
+                      <li class="px-3 pt-3 pb-2 ">
+                          <span class="text-uppercase small font-weight-bold" data-i18n="home">首页</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/home" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="home">首页</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/hotWord" class="svg-icon ">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="hotWord">热词统计</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/tableData" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="tableData">微博舆情统计</span>
+                          </a>
+                      </li>
+                      <li class="px-3 pt-3 pb-2 ">
+                          <span class="text-uppercase small font-weight-bold" data-i18n="dataVisualization">数据可视化</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="articleChar">文章分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/ipChar" class="svg-icon">
+                              <i class="">
+                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
+                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">IP分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/commentChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
+                                  </svg>
+                              </i><span class="ml-2">评论分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingpredict" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">舆情分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">舆情预测</span>
+                          </a>
+                      </li>
+                      <li class="px-3 pt-3 pb-2">
+                          <span class="text-uppercase small font-weight-bold">词云图</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleCloud" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+                                  </svg>
+                              </i><span class="ml-2" data-i18n="articleCloud">文章内容词云图</span>
+                          </a>
+                      </li>
+                  </ul>
+              </nav>
+{% endblock %}
+{% block content %}
+          <div class="container-fluid">
+                <div class="row">
+                      <div class="col-md-12 mb-4 mt-1">
+                         <div class="d-flex flex-wrap justify-content-between align-items-center">
+                             <h4 class="font-weight-bold" data-i18n="ipChar">IP分析</h4>
+                         </div>
+                      </div>
+                   </div>
+                <div class="row">
+                    <div class="col-lg-12">
+                         <div class="card card-block">
+                            <div class="card-header d-flex justify-content-between pb-0">
+                               <div class="header-title">
+                                  <h4 class="card-title mb-0" data-i18n="articleIpLocationAnalysis">文章IP位置分析图</h4>
+                               </div>
+                            </div>
+                            <div class="card-body">
+                               <div id="main" style="width: 100%;height: 750px"></div>
+                            </div>
+                         </div>
+                      </div>
+                    <div class="col-lg-12">
+                         <div class="card card-block">
+                            <div class="card-header d-flex justify-content-between pb-0">
+                               <div class="header-title">
+                                  <h4 class="card-title mb-0" data-i18n="commentIpLocationAnalysis">评论IP位置分析图</h4>
+                               </div>
+                            </div>
+                            <div class="card-body">
+                               <div id="mainTwo" style="width: 100%;height: 750px"></div>
+                            </div>
+                         </div>
+                      </div>
+                </div>
+          </div>
+
+{% endblock %}
+
+{% block echarts %}
+    <script>
+        var chartDom = document.getElementById('main');
+        var myChart = echarts.init(chartDom);
+        var option;
+
+        option = {
+            title:{
+                text:'文章IP发布地址地图',
+                left:'center',
+                textStyle:{
+                    color:"#333",
+                    fontWeight:"bold"
+                }
+            },
+            tooltip:{
+                trigger:'item',
+                formatter:function(params){
+                    return params.name + '<br>微博发布个数： ' + params.value + ' 个'
+                }
+            },
+            visualMap:{
+                min:0,
+                max:50,
+                text:['高','低'],
+                realtime:true,
+                calulable:true,
+                inRange:{
+                    color:['orange','green']
+                }
+            },
+            series:[{
+                type:'map',
+                map:"china",
+                label:{
+                    normal:{
+                        show:true,
+                        color:"white",
+                        fontSize:'12'
+                    }
+                },
+                emphasis:{
+                    label:{
+                        show:true
+                    },
+                },
+                data:{{ articleRegionData | tojson }},
+                itemStyle:{
+                    normal: {
+                        areaColor:"skyblue",
+                        borderColor:"#fff"
+                    },
+                    emphasis:{
+                        areaColor: '#2b91b7'
+                    }
+                },
+                zoom:1.4,
+                roam:true
+            }]
+        }
+
+        option && myChart.setOption(option);
+    </script>
+    <script>
+        var chartDom = document.getElementById('mainTwo');
+        var myChart = echarts.init(chartDom);
+        var option;
+
+        option = {
+            title:{
+                text:'文章IP发布地址地图',
+                left:'center',
+                textStyle:{
+                    color:"#333",
+                    fontWeight:"bold"
+                }
+            },
+            tooltip:{
+                trigger:'item',
+                formatter:function(params){
+                    return params.name + '<br>微博发布个数： ' + params.value + ' 个'
+                }
+            },
+            visualMap:{
+                min:0,
+                max:200,
+                text:['高','低'],
+                realtime:true,
+                calulable:true,
+                inRange:{
+                    color:['orange','green']
+                }
+            },
+            series:[{
+                type:'map',
+                map:"china",
+                label:{
+                    normal:{
+                        show:true,
+                        color:"white",
+                        fontSize:'12'
+                    }
+                },
+                emphasis:{
+                    label:{
+                        show:true
+                    },
+                },
+                data:{{ commentRegionData | tojson }},
+                itemStyle:{
+                    normal: {
+                        areaColor:"skyblue",
+                        borderColor:"#fff"
+                    },
+                    emphasis:{
+                        areaColor: '#2b91b7'
+                    }
+                },
+                zoom:1.4,
+                roam:true
+            }]
+        }
+
+        option && myChart.setOption(option);
+    </script>
 {% endblock %}
\ No newline at end of file
diff --git a/views/page/templates/tableData.html b/views/page/templates/tableData.html
index c86a6cb..d465ec5 100644
--- a/views/page/templates/tableData.html
+++ b/views/page/templates/tableData.html
@@ -1,225 +1,228 @@
-{% extends 'base_page.html' %}
-
-{% block title %}
-微博舆情统计页
-{% endblock %}
-{% block  nav %}
-<nav class="iq-sidebar-menu">
-                  <ul id="iq-sidebar-toggle" class="side-menu">
-                      <li class="px-3 pt-3 pb-2 ">
-                          <span class="text-uppercase small font-weight-bold">首页</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/home" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">首页</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/hotWord" class="svg-icon ">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">热词统计</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/tableData" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">微博舆情统计</span>
-                          </a>
-                      </li>
-                      <li class="px-3 pt-3 pb-2 ">
-                          <span class="text-uppercase small font-weight-bold">数据可视化</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">文章分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/ipChar" class="svg-icon">
-                              <i class="">
-                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
-                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">IP分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/commentChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
-                                  </svg>
-                              </i><span class="ml-2">评论分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingpredict" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情预测</span>
-                          </a>
-                      </li>
-                      <li class="px-3 pt-3 pb-2">
-                          <span class="text-uppercase small font-weight-bold">词云图</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleCloud" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
-                                  </svg>
-                              </i><span class="ml-2">文章内容词云图</span>
-                          </a>
-                      </li>
-                  </ul>
-              </nav>
-{% endblock %}
-{% block content %}
-              <div class="container-fluid">
-                   <div class="row">
-                      <div class="col-md-12 mb-4 mt-1">
-                         <div class="d-flex flex-wrap justify-content-between align-items-center">
-                             <h4 class="font-weight-bold">微博舆情统计页</h4>
-                         </div>
-                      </div>
-                   </div>
-
-                    <div class="row">
-                        <div class="col-sm-12">
-                           <div class="card">
-                              <div class="card-header d-flex justify-content-between">
-                                 <div class="header-title">
-                                    <h4 class="card-title">微博文章统计表格 - 舆情 情感分类
-</h4>
-                                 </div>
-                              <div class="header-action">
-                                       <i data-toggle="collapse" data-target="#datatable-1" aria-expanded="false">
-                                          <svg width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
-                                          </svg>
-                                       </i>
-                                    </div>
-                              </div>
-                              <div class="card-body">
-                                 <p><a href="/page/tableData?flag=True" class="btn btn-primary btn-sm">情感分类</a></p>
-                                 <div class="table-responsive">
-                                    <div id="datatable-1_wrapper" class="dataTables_wrapper dt-bootstrap4">
-                                        <div class="row">
-                                        <table id="datatable-1" class="table data-table table-striped table-bordered dataTable" role="grid" aria-describedby="datatable-1_info">
-                                               <thead>
-                                                <tr>
-                                                    <th style="font-weight: bold">
-                                                        文章ID
-                                                    </th>
-                                                    <th style="font-weight: bold">
-                                                        文章IP
-                                                    </th>
-                                                    <th style="font-weight: bold">
-                                                        点赞量
-                                                    </th>
-                                                    <th style="font-weight: bold">
-                                                        转发量
-                                                    </th>
-                                                    <th style="font-weight: bold">
-                                                        评论量
-                                                    </th>
-                                                    <th style="font-weight: bold">
-                                                        类型
-                                                    </th>
-                                                    <th style="font-weight: bold">
-                                                        内容
-                                                    </th>
-                                                    <th style="font-weight: bold">
-                                                        发布时间
-                                                    </th>
-                                                    {% if defaultFlag %}
-                                                    <th style="font-weight: bold">
-                                                        情感分类
-                                                    </th>
-                                                    {% endif %}
-                                                </tr>
-                                               </thead>
-                                                <tbody>
-                                                   {% for article in tableData %}
-                                                    <tr class="even">
-                                                         <td style="width:330px" class="sorting_1">
-                                                             <a href="{{ article[9] }}">
-                                                                 {{ article[0] }}
-                                                             </a>
-                                                         </td>
-                                                         <td style="width:90px">{{ article[4] }}</td>
-                                                         <td style="width:90px">👍{{ article[1] }}</td>
-                                                         <td style="width:90px">🥇{{ article[2] }}</td>
-                                                         <td style="width:90px">🔥{{ article[3] }}</td>
-                                                         <td style="width:90px" class="text-right">{{ article[8] }}</td>
-                                                         <td style="width:155px" class="text-right">{{ article[5] }}</td>
-                                                         <td style="width:90px" class="text-right">{{ article[7] }}</td>
-                                                         {% if defaultFlag %}
-                                                                                                                         <td style="width:90px">
-                                                             {% if article[-1] == '正面' %}
-                                                                 <span class="text-success">
-                                                                 {{ article[-1] }}
-                                                                 </span>
-
-                                                                 {% else %}
-                                                                 <span class="text-danger">
-                                                                 {{ article[-1] }}
-                                                                 </span>
-
-                                                                 {% endif %}
-                                                             </td>
-                                                        {% endif %}
-                                                      </tr>
-                                                    {% endfor %}
-                                                </tbody>
-                                            </table>
-                                    </div>
-                                    </div>
-                                 </div>
-                              </div>
-                           </div>
-                        </div>
-                     </div>
-
-              </div>
-{% endblock %}
-
-
-{% block echarts %}
-    <script>
-
-    </script>
+{% extends 'base_page.html' %}
+
+{% block title %}
+<span data-i18n="tableData">微博舆情统计页</span>
+{% endblock %}
+{% block  nav %}
+<nav class="iq-sidebar-menu">
+                  <ul id="iq-sidebar-toggle" class="side-menu">
+                      <li class="px-3 pt-3 pb-2 ">
+                          <span class="text-uppercase small font-weight-bold" data-i18n="home">首页</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/home" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="home">首页</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/hotWord" class="svg-icon ">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="hotWord">热词统计</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/tableData" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="tableData">微博舆情统计</span>
+                          </a>
+                      </li>
+                      <li class="px-3 pt-3 pb-2 ">
+                          <span class="text-uppercase small font-weight-bold" data-i18n="dataVisualization">数据可视化</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="articleChar">文章分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/ipChar" class="svg-icon">
+                              <i class="">
+                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
+                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">IP分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/commentChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
+                                  </svg>
+                              </i><span class="ml-2">评论分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">舆情分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingpredict" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">舆情预测</span>
+                          </a>
+                      </li>
+                      <li class="px-3 pt-3 pb-2">
+                          <span class="text-uppercase small font-weight-bold">词云图</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleCloud" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+                                  </svg>
+                              </i><span class="ml-2" data-i18n="articleCloud">文章内容词云图</span>
+                          </a>
+                      </li>
+                  </ul>
+              </nav>
+{% endblock %}
+{% block content %}
+              <div class="container-fluid">
+                   <div class="row">
+                      <div class="col-md-12 mb-4 mt-1">
+                         <div class="d-flex flex-wrap justify-content-between align-items-center">
+                             <h4 class="font-weight-bold" data-i18n="tableData">微博舆情统计页</h4>
+                         </div>
+                      </div>
+                   </div>
+
+                    <div class="row">
+                        <div class="col-sm-12">
+                           <div class="card">
+                              <div class="card-header d-flex justify-content-between">
+                                 <div class="header-title">
+                                    <h4 class="card-title" data-i18n="weiboArticleStatTable">微博文章统计表格 - 舆情 情感分类</h4>
+                                 </div>
+                              <div class="header-action">
+                                       <i data-toggle="collapse" data-target="#datatable-1" aria-expanded="false">
+                                          <svg width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
+                                          </svg>
+                                       </i>
+                                    </div>
+                              </div>
+                              <div class="card-body">
+                                 <p><a href="/page/tableData?flag=True" class="btn btn-primary btn-sm" data-i18n="sentimentClassification">情感分类</a></p>
+                                 <div class="table-responsive">
+                                    <div id="datatable-1_wrapper" class="dataTables_wrapper dt-bootstrap4">
+                                        <div class="row">
+                                        <table id="datatable-1" class="table data-table table-striped table-bordered dataTable" role="grid" aria-describedby="datatable-1_info">
+                                               <thead>
+                                                <tr>
+                                                    <th style="font-weight: bold" data-i18n="articleId">
+                                                        文章ID
+                                                    </th>
+                                                    <th style="font-weight: bold" data-i18n="articleIp">
+                                                        文章IP
+                                                    </th>
+                                                    <th style="font-weight: bold" data-i18n="articleTitle">
+                                                        文章标题
+                                                    </th>
+                                                    <th style="font-weight: bold" data-i18n="articleLike">
+                                                        点赞量
+                                                    </th>
+                                                    <th style="font-weight: bold" data-i18n="articleForward">
+                                                        转发量
+                                                    </th>
+                                                    <th style="font-weight: bold" data-i18n="articleComment">
+                                                        评论量
+                                                    </th>
+                                                    <th style="font-weight: bold" data-i18n="articleType">
+                                                        类型
+                                                    </th>
+                                                    <th style="font-weight: bold" data-i18n="articleContent">
+                                                        内容
+                                                    </th>
+                                                    <th style="font-weight: bold" data-i18n="articleTime">
+                                                        发布时间
+                                                    </th>
+                                                    {% if defaultFlag %}
+                                                    <th style="font-weight: bold" data-i18n="sentimentClassification">
+                                                        情感分类
+                                                    </th>
+                                                    {% endif %}
+                                                </tr>
+                                               </thead>
+                                                <tbody>
+                                                   {% for article in tableData %}
+                                                    <tr class="even">
+                                                         <td style="width:330px" class="sorting_1">
+                                                             <a href="{{ article[9] }}">
+                                                                 {{ article[0] }}
+                                                             </a>
+                                                         </td>
+                                                         <td style="width:90px">{{ article[4] }}</td>
+                                                         <td style="width:90px" class="text-right">{{ article[5] }}</td>
+                                                         <td style="width:90px">👍{{ article[1] }}</td>
+                                                         <td style="width:90px">🥇{{ article[2] }}</td>
+                                                         <td style="width:90px">🔥{{ article[3] }}</td>
+                                                         <td style="width:90px" class="text-right">{{ article[8] }}</td>
+                                                         <td style="width:155px" class="text-right">{{ article[5] }}</td>
+                                                         <td style="width:90px" class="text-right">{{ article[7] }}</td>
+                                                         {% if defaultFlag %}
+                                                                                                                         <td style="width:90px">
+                                                             {% if article[-1] == '正面' %}
+                                                                 <span class="text-success">
+                                                                 {{ article[-1] }}
+                                                                 </span>
+
+                                                                 {% else %}
+                                                                 <span class="text-danger">
+                                                                 {{ article[-1] }}
+                                                                 </span>
+
+                                                                 {% endif %}
+                                                             </td>
+                                                        {% endif %}
+                                                      </tr>
+                                                    {% endfor %}
+                                                </tbody>
+                                            </table>
+                                    </div>
+                                    </div>
+                                 </div>
+                              </div>
+                           </div>
+                        </div>
+                     </div>
+
+              </div>
+{% endblock %}
+
+
+{% block echarts %}
+    <script>
+
+    </script>
 {% endblock %}
\ No newline at end of file
diff --git a/views/page/templates/yuqingChar.html b/views/page/templates/yuqingChar.html
index 0972902..25d92d4 100644
--- a/views/page/templates/yuqingChar.html
+++ b/views/page/templates/yuqingChar.html
@@ -1,401 +1,401 @@
-{% extends 'base_page.html' %}
-{% block title %}
-    舆情分析
-{% endblock %}
-{% block  nav %}
-<nav class="iq-sidebar-menu">
-                  <ul id="iq-sidebar-toggle" class="side-menu">
-                      <li class="px-3 pt-3 pb-2 ">
-                          <span class="text-uppercase small font-weight-bold">首页</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/home" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">首页</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/hotWord" class="svg-icon ">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">热词统计</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/tableData" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">微博舆情统计</span>
-                          </a>
-                      </li>
-                      <li class="px-3 pt-3 pb-2 ">
-                          <span class="text-uppercase small font-weight-bold">数据可视化</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">文章分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/ipChar" class="svg-icon">
-                              <i class="">
-                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
-                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">IP分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/commentChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
-                                  </svg>
-                              </i><span class="ml-2">评论分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingpredict" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情预测</span>
-                          </a>
-                      </li>
-                      <li class="px-3 pt-3 pb-2">
-                          <span class="text-uppercase small font-weight-bold">词云图</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleCloud" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
-                                  </svg>
-                              </i><span class="ml-2">文章内容词云图</span>
-                          </a>
-                      </li>
-                  </ul>
-              </nav>
-{% endblock %}
-
-{% block content %}
-          <div class="container-fluid">
-                <div class="row">
-              <div class="col-md-12 mb-4 mt-1">
-                 <div class="d-flex flex-wrap justify-content-between align-items-center">
-                     <h4 class="font-weight-bold">舆情分析</h4>
-                 </div>
-              </div>
-           </div>
-                <div class="row">
-                    <div class="col-lg-6">
-                         <div class="card card-block">
-                            <div class="card-header d-flex justify-content-between pb-0">
-                               <div class="header-title">
-                                  <h4 class="card-title mb-0">热词情感趋势柱状图</h4>
-                               </div>
-                            </div>
-                            <div class="card-body">
-                               <div id="main" style="width: 100%;height: 450px"></div>
-                            </div>
-                         </div>
-                      </div>
-                    <div class="col-lg-6">
-                         <div class="card card-block">
-                            <div class="card-header d-flex justify-content-between pb-0">
-                               <div class="header-title">
-                                  <h4 class="card-title mb-0">热词情感趋势树形图</h4>
-                               </div>
-                            </div>
-                            <div class="card-body">
-                               <div id="mainTwo" style="width: 100%;height: 450px"></div>
-                            </div>
-                         </div>
-                      </div>
-                    <div class="col-lg-6">
-                         <div class="card card-block">
-                            <div class="card-header d-flex justify-content-between pb-0">
-                               <div class="header-title">
-                                  <h4 class="card-title mb-0">文章内容与评论内容舆情趋势饼状图</h4>
-                               </div>
-                            </div>
-                            <div class="card-body">
-                               <div id="mainThree" style="width: 100%;height: 450px"></div>
-                            </div>
-                         </div>
-                      </div>
-                    <div class="col-lg-6">
-                         <div class="card card-block">
-                            <div class="card-header d-flex justify-content-between pb-0">
-                               <div class="header-title">
-                                  <h4 class="card-title mb-0">热词TOP10</h4>
-                               </div>
-                            </div>
-                            <div class="card-body">
-                               <div id="mainFore" style="width: 100%;height: 450px"></div>
-                            </div>
-                         </div>
-                      </div>
-                </div>
-                <div class="col-lg-12 mb-3">
-                    <div class="form-group">
-                        <label for="modelSelect">选择分析模型：</label>
-                        <select class="form-control" id="modelSelect" onchange="updateModel(this.value)">
-                            <optgroup label="基础模型">
-                                <option value="basic" {% if model_type == 'basic' %}selected{% endif %}>SnowNLP</option>
-                            </optgroup>
-                            <optgroup label="OpenAI 模型">
-                                <option value="gpt-3.5-turbo" {% if model_type == 'gpt-3.5-turbo' %}selected{% endif %}>GPT-3.5-Turbo</option>
-                                <option value="gpt-4" {% if model_type == 'gpt-4' %}selected{% endif %}>GPT-4</option>
-                            </optgroup>
-                            <optgroup label="Claude 模型">
-                                <option value="claude-3-opus-20240229" {% if model_type == 'claude-3-opus-20240229' %}selected{% endif %}>Claude-3 Opus</option>
-                                <option value="claude-3-sonnet-20240229" {% if model_type == 'claude-3-sonnet-20240229' %}selected{% endif %}>Claude-3 Sonnet</option>
-                                <option value="claude-3-haiku-20240307" {% if model_type == 'claude-3-haiku-20240307' %}selected{% endif %}>Claude-3 Haiku</option>
-                            </optgroup>
-                            <optgroup label="DeepSeek 模型">
-                                <option value="deepseek-chat" {% if model_type == 'deepseek-chat' %}selected{% endif %}>DeepSeek-V3</option>
-                                <option value="deepseek-reasoner" {% if model_type == 'deepseek-reasoner' %}selected{% endif %}>DeepSeek-R1</option>
-                            </optgroup>
-                        </select>
-                    </div>
-                </div>
-          </div>
-
-{% endblock %}
-
-{% block echarts %}
-    <script>
-            var chartDom = document.getElementById('main');
-            var myChart = echarts.init(chartDom);
-            var option;
-
-            var colors = ['#66CC99', '#FFCC66', '#FF6666'];
-            option = {
-              title: {
-                text: '热词情感分析柱状图'
-              },
-              tooltip: {
-                trigger: 'axis'
-              },
-              legend: {
-                data: ['Rainfall']
-              },
-              toolbox: {
-                show: true,
-                feature: {
-                  dataView: { show: true, readOnly: false },
-                  magicType: { show: true, type: ['line', 'bar'] },
-                  restore: { show: true },
-                  saveAsImage: { show: true }
-                }
-              },
-              calculable: true,
-              xAxis: [
-                {
-                  type: 'category',
-                  // prettier-ignore
-                  data: {{ xData | tojson }}
-                }
-              ],
-              yAxis: [
-                {
-                  type: 'value'
-                }
-              ],
-              series: [
-                {
-                  name: '舆情个数',
-                  type: 'bar',
-                  data: {{ yData }},
-                  markPoint: {
-                    data: [
-                      { type: 'max', name: 'Max' },
-                      { type: 'min', name: 'Min' }
-                    ]
-                  },
-                  markLine: {
-                    data: [{ type: 'average', name: 'Avg' }]
-                  },
-                  itemStyle: {
-                    color: function (parmas) {
-                      return colors[parmas.dataIndex % colors.length];
-                    }
-                  }
-                }
-              ]
-            };
-
-            option && myChart.setOption(option);
-
-    </script>
-    <script>
-        var chartDom = document.getElementById('mainTwo');
-        var myChart = echarts.init(chartDom);
-        var option;
-
-        option = {
-          series: [
-            {
-              type: 'treemap',
-              data: {{ biedata | tojson }}
-            }
-          ]
-        };
-
-        option && myChart.setOption(option);
-
-    </script>
-    <script>
-    var chartDom = document.getElementById('mainThree');
-    var myChart = echarts.init(chartDom);
-    var option;
-
-    option = {
-      tooltip: {
-        trigger: 'item',
-        formatter: '{a} <br/>{b}: {c} ({d}%)'
-      },
-      legend: {
-        data: [
-          '正面',
-          '负面',
-          '中性'
-        ]
-      },
-      series: [
-        {
-          name: '评论舆情结果',
-          type: 'pie',
-          selectedMode: 'single',
-          radius: [0, '30%'],
-          label: {
-            position: 'inner',
-            fontSize: 14
-          },
-          labelLine: {
-            show: false
-          },
-          data: {{ biedata1 | tojson }}
-        },
-        {
-          name: '文章舆情结果',
-          type: 'pie',
-          radius: ['45%', '60%'],
-          labelLine: {
-            length: 30
-          },
-          label: {
-            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
-            backgroundColor: '#F6F8FC',
-            borderColor: '#8C8D8E',
-            borderWidth: 1,
-            borderRadius: 4,
-            rich: {
-              a: {
-                color: '#6E7079',
-                lineHeight: 22,
-                align: 'center'
-              },
-              hr: {
-                borderColor: '#8C8D8E',
-                width: '100%',
-                borderWidth: 1,
-                height: 0
-              },
-              b: {
-                color: '#4C5058',
-                fontSize: 14,
-                fontWeight: 'bold',
-                lineHeight: 33
-              },
-              per: {
-                color: '#fff',
-                backgroundColor: '#4C5058',
-                padding: [3, 4],
-                borderRadius: 4
-              }
-            }
-          },
-          data: {{ biedata2 | tojson }}
-        }
-      ]
-    };
-
-    option && myChart.setOption(option);
-
-    </script>
-    <script>
-        var chartDom = document.getElementById('mainFore');
-        var myChart = echarts.init(chartDom);
-        var option;
-
-        option = {
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow'
-            }
-          },
-          legend: {},
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-          },
-          xAxis: {
-            type: 'value',
-            boundaryGap: [0, 0.01]
-          },
-          yAxis: {
-            type: 'category',
-            data: {{ x1Data | tojson }}
-          },
-          series: [
-            {
-              name: '热词出现个数',
-              type: 'bar',
-              data:{{ y1Data }}
-            }
-          ]
-        };
-
-        option && myChart.setOption(option);
-
-    </script>
-    <script>
-    function updateModel(value) {
-        window.location.href = '/page/yuqingChar?model=' + value;
-    }
-    </script>
+{% extends 'base_page.html' %}
+{% block title %}
+    <span data-i18n="yuqingChar">舆情分析</span>
+{% endblock %}
+{% block  nav %}
+<nav class="iq-sidebar-menu">
+                  <ul id="iq-sidebar-toggle" class="side-menu">
+                      <li class="px-3 pt-3 pb-2 ">
+                          <span class="text-uppercase small font-weight-bold" data-i18n="home">首页</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/home" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="home">首页</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/hotWord" class="svg-icon ">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="hotWord">热词统计</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/tableData" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="tableData">微博舆情统计</span>
+                          </a>
+                      </li>
+                      <li class="px-3 pt-3 pb-2 ">
+                          <span class="text-uppercase small font-weight-bold" data-i18n="dataVisualization">数据可视化</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="articleChar">文章分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/ipChar" class="svg-icon">
+                              <i class="">
+                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
+                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">IP分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/commentChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
+                                  </svg>
+                              </i><span class="ml-2">评论分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">舆情分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingpredict" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">舆情预测</span>
+                          </a>
+                      </li>
+                      <li class="px-3 pt-3 pb-2">
+                          <span class="text-uppercase small font-weight-bold">词云图</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleCloud" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+                                  </svg>
+                              </i><span class="ml-2" data-i18n="articleCloud">文章内容词云图</span>
+                          </a>
+                      </li>
+                  </ul>
+              </nav>
+{% endblock %}
+
+{% block content %}
+          <div class="container-fluid">
+                <div class="row">
+              <div class="col-md-12 mb-4 mt-1">
+                 <div class="d-flex flex-wrap justify-content-between align-items-center">
+                     <h4 class="font-weight-bold" data-i18n="yuqingChar">舆情分析</h4>
+                 </div>
+              </div>
+           </div>
+                <div class="row">
+                    <div class="col-lg-6">
+                         <div class="card card-block">
+                            <div class="card-header d-flex justify-content-between pb-0">
+                               <div class="header-title">
+                                  <h4 class="card-title mb-0" data-i18n="hotWordSentimentTrendBar">热词情感趋势柱状图</h4>
+                               </div>
+                            </div>
+                            <div class="card-body">
+                               <div id="main" style="width: 100%;height: 450px"></div>
+                            </div>
+                         </div>
+                      </div>
+                    <div class="col-lg-6">
+                         <div class="card card-block">
+                            <div class="card-header d-flex justify-content-between pb-0">
+                               <div class="header-title">
+                                  <h4 class="card-title mb-0" data-i18n="hotWordSentimentTrendTree">热词情感趋势树形图</h4>
+                               </div>
+                            </div>
+                            <div class="card-body">
+                               <div id="mainTwo" style="width: 100%;height: 450px"></div>
+                            </div>
+                         </div>
+                      </div>
+                    <div class="col-lg-6">
+                         <div class="card card-block">
+                            <div class="card-header d-flex justify-content-between pb-0">
+                               <div class="header-title">
+                                  <h4 class="card-title mb-0" data-i18n="articleCommentSentimentTrendPie">文章内容与评论内容舆情趋势饼状图</h4>
+                               </div>
+                            </div>
+                            <div class="card-body">
+                               <div id="mainThree" style="width: 100%;height: 450px"></div>
+                            </div>
+                         </div>
+                      </div>
+                    <div class="col-lg-6">
+                         <div class="card card-block">
+                            <div class="card-header d-flex justify-content-between pb-0">
+                               <div class="header-title">
+                                  <h4 class="card-title mb-0">热词TOP10</h4>
+                               </div>
+                            </div>
+                            <div class="card-body">
+                               <div id="mainFore" style="width: 100%;height: 450px"></div>
+                            </div>
+                         </div>
+                      </div>
+                </div>
+                <div class="col-lg-12 mb-3">
+                    <div class="form-group">
+                        <label for="modelSelect">选择分析模型：</label>
+                        <select class="form-control" id="modelSelect" onchange="updateModel(this.value)">
+                            <optgroup label="基础模型">
+                                <option value="basic" {% if model_type == 'basic' %}selected{% endif %}>SnowNLP</option>
+                            </optgroup>
+                            <optgroup label="OpenAI 模型">
+                                <option value="gpt-3.5-turbo" {% if model_type == 'gpt-3.5-turbo' %}selected{% endif %}>GPT-3.5-Turbo</option>
+                                <option value="gpt-4" {% if model_type == 'gpt-4' %}selected{% endif %}>GPT-4</option>
+                            </optgroup>
+                            <optgroup label="Claude 模型">
+                                <option value="claude-3-opus-20240229" {% if model_type == 'claude-3-opus-20240229' %}selected{% endif %}>Claude-3 Opus</option>
+                                <option value="claude-3-sonnet-20240229" {% if model_type == 'claude-3-sonnet-20240229' %}selected{% endif %}>Claude-3 Sonnet</option>
+                                <option value="claude-3-haiku-20240307" {% if model_type == 'claude-3-haiku-20240307' %}selected{% endif %}>Claude-3 Haiku</option>
+                            </optgroup>
+                            <optgroup label="DeepSeek 模型">
+                                <option value="deepseek-chat" {% if model_type == 'deepseek-chat' %}selected{% endif %}>DeepSeek-V3</option>
+                                <option value="deepseek-reasoner" {% if model_type == 'deepseek-reasoner' %}selected{% endif %}>DeepSeek-R1</option>
+                            </optgroup>
+                        </select>
+                    </div>
+                </div>
+          </div>
+
+{% endblock %}
+
+{% block echarts %}
+    <script>
+            var chartDom = document.getElementById('main');
+            var myChart = echarts.init(chartDom);
+            var option;
+
+            var colors = ['#66CC99', '#FFCC66', '#FF6666'];
+            option = {
+              title: {
+                text: '热词情感分析柱状图'
+              },
+              tooltip: {
+                trigger: 'axis'
+              },
+              legend: {
+                data: ['Rainfall']
+              },
+              toolbox: {
+                show: true,
+                feature: {
+                  dataView: { show: true, readOnly: false },
+                  magicType: { show: true, type: ['line', 'bar'] },
+                  restore: { show: true },
+                  saveAsImage: { show: true }
+                }
+              },
+              calculable: true,
+              xAxis: [
+                {
+                  type: 'category',
+                  // prettier-ignore
+                  data: {{ xData | tojson }}
+                }
+              ],
+              yAxis: [
+                {
+                  type: 'value'
+                }
+              ],
+              series: [
+                {
+                  name: '舆情个数',
+                  type: 'bar',
+                  data: {{ yData }},
+                  markPoint: {
+                    data: [
+                      { type: 'max', name: 'Max' },
+                      { type: 'min', name: 'Min' }
+                    ]
+                  },
+                  markLine: {
+                    data: [{ type: 'average', name: 'Avg' }]
+                  },
+                  itemStyle: {
+                    color: function (parmas) {
+                      return colors[parmas.dataIndex % colors.length];
+                    }
+                  }
+                }
+              ]
+            };
+
+            option && myChart.setOption(option);
+
+    </script>
+    <script>
+        var chartDom = document.getElementById('mainTwo');
+        var myChart = echarts.init(chartDom);
+        var option;
+
+        option = {
+          series: [
+            {
+              type: 'treemap',
+              data: {{ biedata | tojson }}
+            }
+          ]
+        };
+
+        option && myChart.setOption(option);
+
+    </script>
+    <script>
+    var chartDom = document.getElementById('mainThree');
+    var myChart = echarts.init(chartDom);
+    var option;
+
+    option = {
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b}: {c} ({d}%)'
+      },
+      legend: {
+        data: [
+          '正面',
+          '负面',
+          '中性'
+        ]
+      },
+      series: [
+        {
+          name: '评论舆情结果',
+          type: 'pie',
+          selectedMode: 'single',
+          radius: [0, '30%'],
+          label: {
+            position: 'inner',
+            fontSize: 14
+          },
+          labelLine: {
+            show: false
+          },
+          data: {{ biedata1 | tojson }}
+        },
+        {
+          name: '文章舆情结果',
+          type: 'pie',
+          radius: ['45%', '60%'],
+          labelLine: {
+            length: 30
+          },
+          label: {
+            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
+            backgroundColor: '#F6F8FC',
+            borderColor: '#8C8D8E',
+            borderWidth: 1,
+            borderRadius: 4,
+            rich: {
+              a: {
+                color: '#6E7079',
+                lineHeight: 22,
+                align: 'center'
+              },
+              hr: {
+                borderColor: '#8C8D8E',
+                width: '100%',
+                borderWidth: 1,
+                height: 0
+              },
+              b: {
+                color: '#4C5058',
+                fontSize: 14,
+                fontWeight: 'bold',
+                lineHeight: 33
+              },
+              per: {
+                color: '#fff',
+                backgroundColor: '#4C5058',
+                padding: [3, 4],
+                borderRadius: 4
+              }
+            }
+          },
+          data: {{ biedata2 | tojson }}
+        }
+      ]
+    };
+
+    option && myChart.setOption(option);
+
+    </script>
+    <script>
+        var chartDom = document.getElementById('mainFore');
+        var myChart = echarts.init(chartDom);
+        var option;
+
+        option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          legend: {},
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'value',
+            boundaryGap: [0, 0.01]
+          },
+          yAxis: {
+            type: 'category',
+            data: {{ x1Data | tojson }}
+          },
+          series: [
+            {
+              name: '热词出现个数',
+              type: 'bar',
+              data:{{ y1Data }}
+            }
+          ]
+        };
+
+        option && myChart.setOption(option);
+
+    </script>
+    <script>
+    function updateModel(value) {
+        window.location.href = '/page/yuqingChar?model=' + value;
+    }
+    </script>
 {% endblock %}
\ No newline at end of file
diff --git a/views/page/templates/yuqingpredict.html b/views/page/templates/yuqingpredict.html
index 50334b4..0653c29 100644
--- a/views/page/templates/yuqingpredict.html
+++ b/views/page/templates/yuqingpredict.html
@@ -1,925 +1,925 @@
-{% extends 'base_page.html' %}
-{% block title %}
-    舆情预测
-{% endblock %}
-{% block  nav %}
-<nav class="iq-sidebar-menu">
-                  <ul id="iq-sidebar-toggle" class="side-menu">
-                      <li class="px-3 pt-3 pb-2 ">
-                          <span class="text-uppercase small font-weight-bold">首页</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/home" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">首页</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/hotWord" class="svg-icon ">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">热词统计</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/tableData" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">微博舆情统计</span>
-                          </a>
-                      </li>
-                      <li class="px-3 pt-3 pb-2 ">
-                          <span class="text-uppercase small font-weight-bold">数据可视化</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">文章分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/ipChar" class="svg-icon">
-                              <i class="">
-                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
-                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">IP分析</span>
-                          </a>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/commentChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
-                                  </svg>
-                              </i><span class="ml-2">评论分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingChar" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情分析</span>
-                          </a>
-                      </li>
-                      <li class="active sidebar-layout">
-                          <a href="/page/yuqingpredict" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                                  </svg>
-                              </i>
-                              <span class="ml-2">舆情预测</span>
-                          </a>
-                      </li>
-                      <li class="px-3 pt-3 pb-2">
-                          <span class="text-uppercase small font-weight-bold">词云图</span>
-                      </li>
-                      <li class=" sidebar-layout">
-                          <a href="/page/articleCloud" class="svg-icon">
-                              <i class="">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
-                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
-                                  </svg>
-                              </i><span class="ml-2">文章内容词云图</span>
-                          </a>
-                      </li>
-                  </ul>
-              </nav>
-{% endblock %}
-{% block content %}
-          <div class="container-fluid">
-   <div class="row">
-      <div class="col-md-12 mb-4 mt-1">
-         <div class="d-flex flex-wrap justify-content-between align-items-center">
-             <h4 class="font-weight-bold">话题统计页</h4>
-         </div>
-      </div>
-   </div>
-      <div class="row">
-          <div class="col-lg-12">
-         <div class="card card-block card-stretch card-height">
-            <div class="card-body">
-                     <div class="collapse" id="form-element-15">
-                           <div class="card"><kbd class="bg-dark"><pre id="select-size" class="text-white"><code>
-&lt;div class="form-group"&gt;
-   &lt;label&gt;Small&lt;/label&gt;
-   &lt;select class="form-control form-control-sm mb-3"&gt;
-      &lt;option selected=""&gt;Open this select menu&lt;/option&gt;
-      &lt;option value="1"&gt;One&lt;/option&gt;
-      &lt;option value="2"&gt;Two&lt;/option&gt;
-      &lt;option value="3"&gt;Three&lt;/option&gt;
-   &lt;/select&gt;
-&lt;/div&gt;
-&lt;div class="form-group"&gt;
-   &lt;label&gt;Default&lt;/label&gt;
-   &lt;select class="form-control mb-3"&gt;
-      &lt;option selected=""&gt;Open this select menu&lt;/option&gt;
-      &lt;option value="1"&gt;One&lt;/option&gt;
-      &lt;option value="2"&gt;Two&lt;/option&gt;
-      &lt;option value="3"&gt;Three&lt;/option&gt;
-   &lt;/select&gt;
-&lt;/div&gt;
-&lt;div class="form-group"&gt;
-   &lt;label&gt;Large&lt;/label&gt;
-   &lt;select class="form-control form-control-lg"&gt;
-      &lt;option selected=""&gt;Open this select menu&lt;/option&gt;
-      &lt;option value="1"&gt;One&lt;/option&gt;
-      &lt;option value="2"&gt;Two&lt;/option&gt;
-      &lt;option value="3"&gt;Three&lt;/option&gt;
-   &lt;/select&gt;
-&lt;/div&gt;
-</code></pre></kbd></div>
-                        </div>
-                     <div class="form-group">
-                        <label>话题选择</label>
-                        <select onchange="hotWordChange(event)" class="form-control mb-3">
-                            {% for i in hotWordList %}
-                                {% if defaultHotWord == i[0] %}
-                                    <option selected value="{{ i[0] }}">{{ i[0] }}</option>
-                                {% else %}
-                                    <option value="{{ i[0] }}">{{ i[0] }}</option>
-                                {% endif %}
-                            {% endfor %}
-                        </select>
-                     </div>
-                     <div class="col-lg-12">
-                        <div class="form-group">
-                            <label for="modelSelect">选择分析模型：</label>
-                            <select class="form-control" id="modelSelect" onchange="updateModel(this.value)">
-                                <optgroup label="基础模型">
-                                    <option value="basic" {% if model_type == 'basic' %}selected{% endif %}>SnowNLP</option>
-                                </optgroup>
-                                <optgroup label="OpenAI 模型">
-                                    <option value="gpt-3.5-turbo" {% if model_type == 'gpt-3.5-turbo' %}selected{% endif %}>GPT-3.5-Turbo</option>
-                                    <option value="gpt-4" {% if model_type == 'gpt-4' %}selected{% endif %}>GPT-4</option>
-                                </optgroup>
-                                <optgroup label="Claude 模型">
-                                    <option value="claude-3-opus-20240229" {% if model_type == 'claude-3-opus-20240229' %}selected{% endif %}>Claude-3 Opus</option>
-                                    <option value="claude-3-sonnet-20240229" {% if model_type == 'claude-3-sonnet-20240229' %}selected{% endif %}>Claude-3 Sonnet</option>
-                                    <option value="claude-3-haiku-20240307" {% if model_type == 'claude-3-haiku-20240307' %}selected{% endif %}>Claude-3 Haiku</option>
-                                </optgroup>
-                                <optgroup label="DeepSeek 模型">
-                                    <option value="deepseek-chat" {% if model_type == 'deepseek-chat' %}selected{% endif %}>DeepSeek-V3</option>
-                                    <option value="deepseek-reasoner" {% if model_type == 'deepseek-reasoner' %}selected{% endif %}>DeepSeek-R1</option>
-                                </optgroup>
-                            </select>
-                        </div>
-                     </div>
-                         <script>
-                             function hotWordChange(e){
-                                 const model = document.querySelector('select[onchange="updateModel(this.value)"]').value;
-                                 window.location.href = 'http://127.0.0.1:5000/page/yuqingpredict?Topic=' + e.target.value + '&model=' + model;
-                             }
-                             function updateModel(value) {
-                                 const topic = document.querySelector('select[onchange="hotWordChange(event)"]').value;
-                                 window.location.href = 'http://127.0.0.1:5000/page/yuqingpredict?Topic=' + topic + '&model=' + value;
-                             }
-                         </script>
-                  </div>
-         </div>
-
-      </div>
-      </div>
-          <div class="row" style="justify-content: center">
-                <div class="col-md-6 col-xl-6">
-                                    <div class="card">
-                                        <div class="card-body">
-                                            <h4 class="card-title font-size-16 mt-0">{{ defaultHotWord }}</h4>
-                                        </div>
-                                        <ul class="list-group list-group-flush">
-                                            <li class="list-group-item">话题名称：{{ defaultHotWord }}</li>
-                                            <li class="list-group-item">出现次数：{{ hotWordLen }}次</li>
-                                            <li class="list-group-item">话题情感：{{ sentences }}</li>
-                                        </ul>
-                                    </div>
-
-                                </div>
-        </div>
-          <div class="row">
-              <div class="col-lg-12">
-                  <div class="card">
-                                        <div class="card-body">
-                                            <h4 class="card-title font-size-16 mt-0">话题年份变化趋势</h4>
-                                        </div>
-                                        <div id="main" style="width:100%;height: 450px"></div>
-                                    </div>
-              </div>
-          </div>
-          <div class="row">
-              <div class="col-lg-12">
-                  <div class="card">
-                  <div class="card-header d-flex justify-content-between">
-                     <div class="header-title">
-                        <h4 class="card-title">话题查询表格</h4>
-                     </div>
-                  <div class="header-action">
-                           <i data-toggle="collapse" data-target="#datatable-1" aria-expanded="false">
-                              <svg width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
-                              </svg>
-                           </i>
-                        </div>
-                  </div>
-                  <div class="card-body">
-                     <div class="collapse" id="datatable-1">
-                           <div class="card"><kbd class="bg-dark">
-                               <pre id="bootstrap-datatables" class="text-white"><code>
-&lt;table id="datatable" class="table data-table table-striped table-bordered" &gt;
-   &lt;thead&gt;
-      &lt;tr&gt;
-         &lt;th&gt;Name&lt;/th&gt;
-         &lt;th&gt;Position&lt;/th&gt;
-         &lt;th&gt;Office&lt;/th&gt;
-         &lt;th&gt;Age&lt;/th&gt;
-         &lt;th&gt;Start date&lt;/th&gt;
-         &lt;th&gt;Salary&lt;/th&gt;
-      &lt;/tr&gt;
-   &lt;/thead&gt;
-   &lt;tbody&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Tiger Nixon&lt;/td&gt;
-         &lt;td&gt;System Architect&lt;/td&gt;
-         &lt;td&gt;Edinburgh&lt;/td&gt;
-         &lt;td&gt;61&lt;/td&gt;
-         &lt;td&gt;2011/04/25&lt;/td&gt;
-         &lt;td&gt;$320,800&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Garrett Winters&lt;/td&gt;
-         &lt;td&gt;Accountant&lt;/td&gt;
-         &lt;td&gt;Tokyo&lt;/td&gt;
-         &lt;td&gt;63&lt;/td&gt;
-         &lt;td&gt;2011/07/25&lt;/td&gt;
-         &lt;td&gt;$170,750&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Ashton Cox&lt;/td&gt;
-         &lt;td&gt;Junior Technical Author&lt;/td&gt;
-         &lt;td&gt;San Francisco&lt;/td&gt;
-         &lt;td&gt;66&lt;/td&gt;
-         &lt;td&gt;2009/01/12&lt;/td&gt;
-         &lt;td&gt;$86,000&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Cedric Kelly&lt;/td&gt;
-         &lt;td&gt;Senior Javascript Developer&lt;/td&gt;
-         &lt;td&gt;Edinburgh&lt;/td&gt;
-         &lt;td&gt;22&lt;/td&gt;
-         &lt;td&gt;2012/03/29&lt;/td&gt;
-         &lt;td&gt;$433,060&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Airi Satou&lt;/td&gt;
-         &lt;td&gt;Accountant&lt;/td&gt;
-         &lt;td&gt;Tokyo&lt;/td&gt;
-         &lt;td&gt;33&lt;/td&gt;
-         &lt;td&gt;2008/11/28&lt;/td&gt;
-         &lt;td&gt;$162,700&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Brielle Williamson&lt;/td&gt;
-         &lt;td&gt;Integration Specialist&lt;/td&gt;
-         &lt;td&gt;New York&lt;/td&gt;
-         &lt;td&gt;61&lt;/td&gt;
-         &lt;td&gt;2012/12/02&lt;/td&gt;
-         &lt;td&gt;$372,000&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Herrod Chandler&lt;/td&gt;
-         &lt;td&gt;Sales Assistant&lt;/td&gt;
-         &lt;td&gt;San Francisco&lt;/td&gt;
-         &lt;td&gt;59&lt;/td&gt;
-         &lt;td&gt;2012/08/06&lt;/td&gt;
-         &lt;td&gt;$137,500&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Rhona Davidson&lt;/td&gt;
-         &lt;td&gt;Integration Specialist&lt;/td&gt;
-         &lt;td&gt;Tokyo&lt;/td&gt;
-         &lt;td&gt;55&lt;/td&gt;
-         &lt;td&gt;2010/10/14&lt;/td&gt;
-         &lt;td&gt;$327,900&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Colleen Hurst&lt;/td&gt;
-         &lt;td&gt;Javascript Developer&lt;/td&gt;
-         &lt;td&gt;San Francisco&lt;/td&gt;
-         &lt;td&gt;39&lt;/td&gt;
-         &lt;td&gt;2009/09/15&lt;/td&gt;
-         &lt;td&gt;$205,500&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Sonya Frost&lt;/td&gt;
-         &lt;td&gt;Software Engineer&lt;/td&gt;
-         &lt;td&gt;Edinburgh&lt;/td&gt;
-         &lt;td&gt;23&lt;/td&gt;
-         &lt;td&gt;2008/12/13&lt;/td&gt;
-         &lt;td&gt;$103,600&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Jena Gaines&lt;/td&gt;
-         &lt;td&gt;Office Manager&lt;/td&gt;
-         &lt;td&gt;London&lt;/td&gt;
-         &lt;td&gt;30&lt;/td&gt;
-         &lt;td&gt;2008/12/19&lt;/td&gt;
-         &lt;td&gt;$90,560&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Quinn Flynn&lt;/td&gt;
-         &lt;td&gt;Support Lead&lt;/td&gt;
-         &lt;td&gt;Edinburgh&lt;/td&gt;
-         &lt;td&gt;22&lt;/td&gt;
-         &lt;td&gt;2013/03/03&lt;/td&gt;
-         &lt;td&gt;$342,000&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Charde Marshall&lt;/td&gt;
-         &lt;td&gt;Regional Director&lt;/td&gt;
-         &lt;td&gt;San Francisco&lt;/td&gt;
-         &lt;td&gt;36&lt;/td&gt;
-         &lt;td&gt;2008/10/16&lt;/td&gt;
-         &lt;td&gt;$470,600&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Haley Kennedy&lt;/td&gt;
-         &lt;td&gt;Senior Marketing Designer&lt;/td&gt;
-         &lt;td&gt;London&lt;/td&gt;
-         &lt;td&gt;43&lt;/td&gt;
-         &lt;td&gt;2012/12/18&lt;/td&gt;
-         &lt;td&gt;$313,500&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Tatyana Fitzpatrick&lt;/td&gt;
-         &lt;td&gt;Regional Director&lt;/td&gt;
-         &lt;td&gt;London&lt;/td&gt;
-         &lt;td&gt;19&lt;/td&gt;
-         &lt;td&gt;2010/03/17&lt;/td&gt;
-         &lt;td&gt;$385,750&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Michael Silva&lt;/td&gt;
-         &lt;td&gt;Marketing Designer&lt;/td&gt;
-         &lt;td&gt;London&lt;/td&gt;
-         &lt;td&gt;66&lt;/td&gt;
-         &lt;td&gt;2012/11/27&lt;/td&gt;
-         &lt;td&gt;$198,500&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Paul Byrd&lt;/td&gt;
-         &lt;td&gt;Chief Financial Officer (CFO)&lt;/td&gt;
-         &lt;td&gt;New York&lt;/td&gt;
-         &lt;td&gt;64&lt;/td&gt;
-         &lt;td&gt;2010/06/09&lt;/td&gt;
-         &lt;td&gt;$725,000&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Gloria Little&lt;/td&gt;
-         &lt;td&gt;Systems Administrator&lt;/td&gt;
-         &lt;td&gt;New York&lt;/td&gt;
-         &lt;td&gt;59&lt;/td&gt;
-         &lt;td&gt;2009/04/10&lt;/td&gt;
-         &lt;td&gt;$237,500&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Bradley Greer&lt;/td&gt;
-         &lt;td&gt;Software Engineer&lt;/td&gt;
-         &lt;td&gt;London&lt;/td&gt;
-         &lt;td&gt;41&lt;/td&gt;
-         &lt;td&gt;2012/10/13&lt;/td&gt;
-         &lt;td&gt;$132,000&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-         &lt;td&gt;Dai Rios&lt;/td&gt;
-         &lt;td&gt;Personnel Lead&lt;/td&gt;
-         &lt;td&gt;Edinburgh&lt;/td&gt;
-         &lt;td&gt;35&lt;/td&gt;
-         &lt;td&gt;2012/09/26&lt;/td&gt;
-         &lt;td&gt;$217,500&lt;/td&gt;
-      &lt;/tr&gt;
-&lt;/table&gt;
-</code></pre></kbd></div>
-                        </div>
-                     <p>根据选择的话题从而查询出评论数据</p>
-                     <div class="table-responsive">
-                        <div id="datatable-1_wrapper" class="dataTables_wrapper dt-bootstrap4">
-                            <div class="row"><div class="col-sm-12"><table id="datatable-1" class="table data-table table-striped table-bordered dataTable" role="grid" aria-describedby="datatable-1_info">
-                           <thead>
-                              <tr role="row">
-                                  <th class="sorting sorting_asc" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 250.844px;">文章ID</th>
-                                  <th class="sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 392.094px;">评论用户</th>
-                                  <th class="sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 190.75px;">评论性别</th>
-                                  <th class="sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 84.2656px;">评论话题</th>
-                                  <th class="sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 172.594px;">评论内容</th>
-                                  <th class="text-right sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 158.453px;">点赞量</th></tr>
-                           </thead>
-                           <tbody>
-                                {% for i in comments %}
-                                <tr class="odd">
-                                     <td class="sorting_1">{{ i[0] }}</td>
-                                     <td>{{ i[5] }}</td>
-                                     <td>
-                                         {% if i[6]  =='f' %}
-                                             女生
-                                         {% else %}
-                                            男生
-                                         {% endif %}
-                                     </td>
-                                     <td>{{ i[9] }}</td>
-                                     <td>{{ i[4] }}</td>
-                                     <td class="text-right">👍{{ i[2] }}</td>
-                                  </tr>
-                               {% endfor %}
-                           </tbody>
-                        </table></div></div>
-                     </div>
-                  </div>
-               </div>
-              </div>
-          </div>
-
-<!-- AI分析结果展示区域 -->
-<div class="row">
-    <div class="col-lg-12">
-        <div class="card">
-            <div class="card-header d-flex justify-content-between">
-                <div class="header-title">
-                    <h4 class="card-title">AI深度分析</h4>
-                </div>
-                <div class="analysis-controls">
-                    <!-- 批量处理设置 -->
-                    <div class="d-flex align-items-center">
-                        <div class="form-group mx-2 mb-0">
-                            <select id="batchSize" class="form-control form-control-sm">
-                                <option value="10">每批10条</option>
-                                <option value="20">每批20条</option>
-                                <option value="50" selected>每批50条</option>
-                                <option value="100">每批100条</option>
-                            </select>
-                        </div>
-                        <div class="form-group mx-2 mb-0">
-                            <select id="modelType" class="form-control form-control-sm">
-                                <optgroup label="OpenAI 模型">
-                                    <option value="gpt-3.5-turbo">GPT-3.5-Turbo ($0.0015/1K tokens)</option>
-                                    <option value="gpt-3.5-turbo-16k">GPT-3.5-Turbo-16K ($0.003/1K tokens)</option>
-                                    <option value="gpt-4">GPT-4 ($0.03/1K tokens)</option>
-                                    <option value="gpt-4-32k">GPT-4-32K ($0.06/1K tokens)</option>
-                                    <option value="gpt-4-turbo-preview">GPT-4-Turbo ($0.01/1K tokens)</option>
-                                </optgroup>
-                                <optgroup label="Claude 模型">
-                                    <option value="claude-3-opus-20240229">Claude-3 Opus ($0.015/1K tokens)</option>
-                                    <option value="claude-3-sonnet-20240229">Claude-3 Sonnet ($0.003/1K tokens)</option>
-                                    <option value="claude-3-haiku-20240307">Claude-3 Haiku ($0.0025/1K tokens)</option>
-                                    <option value="claude-2.1">Claude-2.1 ($0.008/1K tokens)</option>
-                                    <option value="claude-2.0">Claude-2.0 ($0.008/1K tokens)</option>
-                                    <option value="claude-instant-1.2">Claude Instant ($0.0015/1K tokens)</option>
-                                </optgroup>
-                            </select>
-                        </div>
-                        <div class="form-group mx-2 mb-0">
-                            <select id="analysisDepth" class="form-control form-control-sm">
-                                <option value="basic">基础分析</option>
-                                <option value="standard" selected>标准分析</option>
-                                <option value="deep">深度分析</option>
-                            </select>
-                        </div>
-                        <div class="custom-control custom-switch mx-2">
-                            <input type="checkbox" class="custom-control-input" id="autoUpdate">
-                            <label class="custom-control-label" for="autoUpdate">自动更新</label>
-                        </div>
-                        <button class="btn btn-primary btn-sm" onclick="requestAIAnalysis()">
-                            开始分析
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="card-body">
-                <!-- 进度显示 -->
-                <div id="analysis-progress" class="mb-3" style="display: none;">
-                    <div class="progress">
-                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
-                    </div>
-                    <small class="text-muted mt-1 d-block">正在分析: <span id="progress-text">0/0</span></small>
-                </div>
-                
-                <!-- 分析结果过滤器 -->
-                <div class="mb-3">
-                    <div class="d-flex align-items-center">
-                        <div class="form-group mb-0 mr-2">
-                            <input type="text" class="form-control form-control-sm" id="keywordFilter" placeholder="按关键词过滤">
-                        </div>
-                        <div class="form-group mb-0 mr-2">
-                            <select class="form-control form-control-sm" id="sentimentFilter">
-                                <option value="">全部情感</option>
-                                <option value="积极">积极</option>
-                                <option value="消极">消极</option>
-                                <option value="中性">中性</option>
-                            </select>
-                        </div>
-                        <div class="form-group mb-0">
-                            <select class="form-control form-control-sm" id="riskFilter">
-                                <option value="">全部风险等级</option>
-                                <option value="高">高风险</option>
-                                <option value="中">中风险</option>
-                                <option value="低">低风险</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-                
-                <div id="ai-analysis-results" class="analysis-container">
-                    <!-- 分析结果将在这里动态显示 -->
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- 更新CSS样式 -->
-<style>
-.analysis-container {
-    max-height: 600px;
-    overflow-y: auto;
-}
-
-.analysis-card {
-    border: 1px solid #eee;
-    border-radius: 8px;
-    padding: 15px;
-    margin-bottom: 15px;
-    background-color: #fff;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    transition: all 0.3s ease;
-}
-
-.analysis-card:hover {
-    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-    transform: translateY(-2px);
-}
-
-.risk-level {
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-weight: bold;
-}
-
-.risk-low {
-    background-color: #e8f5e9;
-    color: #2e7d32;
-}
-
-.risk-medium {
-    background-color: #fff3e0;
-    color: #f57c00;
-}
-
-.risk-high {
-    background-color: #ffebee;
-    color: #c62828;
-}
-
-.keywords-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin: 10px 0;
-}
-
-.keyword-tag {
-    background-color: #e3f2fd;
-    color: #1976d2;
-    padding: 4px 8px;
-    border-radius: 16px;
-    font-size: 0.9em;
-    transition: all 0.2s ease;
-}
-
-.keyword-tag:hover {
-    background-color: #1976d2;
-    color: #fff;
-}
-
-.sentiment-score {
-    display: inline-block;
-    padding: 2px 6px;
-    border-radius: 4px;
-    font-size: 0.9em;
-    margin-left: 8px;
-}
-
-.sentiment-positive {
-    background-color: #e8f5e9;
-    color: #2e7d32;
-}
-
-.sentiment-negative {
-    background-color: #ffebee;
-    color: #c62828;
-}
-
-.sentiment-neutral {
-    background-color: #f5f5f5;
-    color: #616161;
-}
-
-.progress {
-    height: 0.5rem;
-}
-
-.analysis-controls {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 10px;
-}
-
-@media (max-width: 768px) {
-    .analysis-controls {
-        flex-direction: column;
-        align-items: stretch;
-    }
-}
-</style>
-
-<!-- 更新JavaScript代码 -->
-<script>
-let currentAnalysis = {
-    inProgress: false,
-    totalMessages: 0,
-    processedMessages: 0,
-    autoUpdateInterval: null
-};
-
-async function requestAIAnalysis() {
-    if (currentAnalysis.inProgress) {
-        return;
-    }
-    
-    try {
-        currentAnalysis.inProgress = true;
-        showProgress();
-        
-        const batchSize = parseInt(document.getElementById('batchSize').value);
-        const modelType = document.getElementById('modelType').value;
-        const analysisDepth = document.getElementById('analysisDepth').value;
-        
-        const response = await fetch('/page/api/analyze_messages', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                batch_size: batchSize,
-                model_type: modelType,
-                analysis_depth: analysisDepth
-            })
-        });
-        
-        const result = await response.json();
-        if (result.success) {
-            displayAnalysisResults(result.data);
-            setupAutoUpdate();
-        } else {
-            showError(result.error);
-        }
-    } catch (error) {
-        console.error('AI分析请求失败:', error);
-        showError('请求失败，请稍后重试');
-    } finally {
-        currentAnalysis.inProgress = false;
-        hideProgress();
-    }
-}
-
-function showProgress() {
-    const progressDiv = document.getElementById('analysis-progress');
-    progressDiv.style.display = 'block';
-    updateProgress(0, 100);
-}
-
-function hideProgress() {
-    const progressDiv = document.getElementById('analysis-progress');
-    progressDiv.style.display = 'none';
-}
-
-function updateProgress(current, total) {
-    const progressBar = document.querySelector('.progress-bar');
-    const progressText = document.getElementById('progress-text');
-    const percentage = (current / total) * 100;
-    
-    progressBar.style.width = `${percentage}%`;
-    progressText.textContent = `${current}/${total}`;
-}
-
-function setupAutoUpdate() {
-    const autoUpdate = document.getElementById('autoUpdate').checked;
-    if (autoUpdate && !currentAnalysis.autoUpdateInterval) {
-        currentAnalysis.autoUpdateInterval = setInterval(requestAIAnalysis, 300000); // 5分钟更新一次
-    } else if (!autoUpdate && currentAnalysis.autoUpdateInterval) {
-        clearInterval(currentAnalysis.autoUpdateInterval);
-        currentAnalysis.autoUpdateInterval = null;
-    }
-}
-
-function filterResults() {
-    const keyword = document.getElementById('keywordFilter').value.toLowerCase();
-    const sentiment = document.getElementById('sentimentFilter').value;
-    const risk = document.getElementById('riskFilter').value;
-    
-    const cards = document.querySelectorAll('.analysis-card');
-    cards.forEach(card => {
-        let show = true;
-        
-        // 关键词过滤
-        if (keyword) {
-            const content = card.textContent.toLowerCase();
-            show = show && content.includes(keyword);
-        }
-        
-        // 情感过滤
-        if (sentiment) {
-            const cardSentiment = card.querySelector('.sentiment-text').textContent;
-            show = show && cardSentiment.includes(sentiment);
-        }
-        
-        // 风险等级过滤
-        if (risk) {
-            const cardRisk = card.querySelector('.risk-level').textContent;
-            show = show && cardRisk.includes(risk);
-        }
-        
-        card.style.display = show ? 'block' : 'none';
-    });
-}
-
-function displayAnalysisResults(results) {
-    const container = document.getElementById('ai-analysis-results');
-    container.innerHTML = ''; // 清空现有结果
-    
-    results.forEach(analysis => {
-        const card = document.createElement('div');
-        card.className = 'analysis-card';
-        
-        const riskLevelClass = 
-            analysis.risk_level === '高' ? 'risk-high' :
-            analysis.risk_level === '中' ? 'risk-medium' : 'risk-low';
-            
-        const sentimentClass = 
-            analysis.sentiment === '积极' ? 'sentiment-positive' :
-            analysis.sentiment === '消极' ? 'sentiment-negative' : 'sentiment-neutral';
-        
-        card.innerHTML = `
-            <div class="d-flex justify-content-between align-items-center">
-                <h5 class="mb-2">消息ID: ${analysis.id}</h5>
-                <span class="risk-level ${riskLevelClass}">
-                    风险等级: ${analysis.risk_level}
-                </span>
-            </div>
-            <div class="mb-2">
-                <strong>情感倾向:</strong> 
-                <span class="sentiment-text">${analysis.sentiment}</span>
-                <span class="sentiment-score ${sentimentClass}">${analysis.sentiment_score}</span>
-            </div>
-            <div class="keywords-container">
-                ${analysis.keywords.split(',').map(keyword => 
-                    `<span class="keyword-tag">${keyword.trim()}</span>`
-                ).join('')}
-            </div>
-            <div class="mb-2">
-                <strong>核心观点:</strong>
-                <p class="mb-1">${analysis.key_points}</p>
-            </div>
-            <div class="mb-2">
-                <strong>影响分析:</strong>
-                <p class="mb-1">${analysis.influence}</p>
-            </div>
-            <div class="text-muted">
-                分析时间: ${analysis.analysis_time}
-            </div>
-        `;
-        
-        container.appendChild(card);
-    });
-    
-    // 应用当前的过滤器
-    filterResults();
-}
-
-function showError(message) {
-    alert(message);
-}
-
-// 设置事件监听器
-document.addEventListener('DOMContentLoaded', () => {
-    // 自动更新切换
-    document.getElementById('autoUpdate').addEventListener('change', setupAutoUpdate);
-    
-    // 过滤器变化监听
-    document.getElementById('keywordFilter').addEventListener('input', filterResults);
-    document.getElementById('sentimentFilter').addEventListener('change', filterResults);
-    document.getElementById('riskFilter').addEventListener('change', filterResults);
-    
-    // 首次加载时请求分析
-    requestAIAnalysis();
-});
-</script>
-
-{% endblock %}
-
-{% block echarts %}
-<script>
-  var yData = {{ yData | tojson }};
-  var xData = {{ xData | tojson }};
-
-  var chartDom = document.getElementById('main');
-  var myChart = echarts.init(chartDom);
-  var option;
-
-  var lastFiveStartIndex = yData.length - 5; // 最后五个数据点的开始索引
-
-  option = {
-    tooltip: {
-      trigger: 'axis'
-    },
-    legend: {
-      data: ['话题出现时间分布个数', '话题预测时间分布个数']
-    },
-    toolbox: {
-      show: true,
-      feature: {
-        dataView: { show: true, readOnly: false },
-        magicType: { show: true, type: ['line', 'bar'] },
-        restore: { show: true },
-        saveAsImage: { show: true }
-      }
-    },
-    calculable: true,
-    xAxis: [
-      {
-        type: 'category',
-        data: xData
-      }
-    ],
-    yAxis: [
-      {
-        type: 'value'
-      }
-    ],
-    dataZoom: [
-      {
-        show: true,
-        start: 10,
-        end: 60
-      },
-      {
-        type: 'inside',
-        start: 10,
-        end: 60
-      }
-    ],
-    series: [
-      {
-        name: '话题预测时间分布个数',
-        type: 'bar',
-        data: yData.map((value, index) => ({
-          value: value,
-          itemStyle: {
-            color: index >= lastFiveStartIndex ? 'orange' : 'blue'
-          }
-        })),
-        markPoint: {
-          data: [
-            { type: 'max', name: 'Max' },
-            { type: 'min', name: 'Min' }
-          ]
-        },
-        markLine: {
-          data: [{ type: 'average', name: 'Avg' }]
-        }
-      }
-    ]
-  };
-
-  myChart.setOption(option);
-</script>
-
+{% extends 'base_page.html' %}
+{% block title %}
+    <span data-i18n="yuqingpredict">舆情预测</span>
+{% endblock %}
+{% block  nav %}
+<nav class="iq-sidebar-menu">
+                  <ul id="iq-sidebar-toggle" class="side-menu">
+                      <li class="px-3 pt-3 pb-2 ">
+                          <span class="text-uppercase small font-weight-bold" data-i18n="home">首页</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/home" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="home">首页</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/hotWord" class="svg-icon ">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="hotWord">热词统计</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/tableData" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="tableData">微博舆情统计</span>
+                          </a>
+                      </li>
+                      <li class="px-3 pt-3 pb-2 ">
+                          <span class="text-uppercase small font-weight-bold" data-i18n="dataVisualization">数据可视化</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2" data-i18n="articleChar">文章分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/ipChar" class="svg-icon">
+                              <i class="">
+                                  <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
+                                      <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">IP分析</span>
+                          </a>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/commentChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
+                                  </svg>
+                              </i><span class="ml-2">评论分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingChar" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">舆情分析</span>
+                          </a>
+                      </li>
+                      <li class="active sidebar-layout">
+                          <a href="/page/yuqingpredict" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                  </svg>
+                              </i>
+                              <span class="ml-2">舆情预测</span>
+                          </a>
+                      </li>
+                      <li class="px-3 pt-3 pb-2">
+                          <span class="text-uppercase small font-weight-bold">词云图</span>
+                      </li>
+                      <li class=" sidebar-layout">
+                          <a href="/page/articleCloud" class="svg-icon">
+                              <i class="">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+                                  </svg>
+                              </i><span class="ml-2" data-i18n="articleCloud">文章内容词云图</span>
+                          </a>
+                      </li>
+                  </ul>
+              </nav>
+{% endblock %}
+{% block content %}
+          <div class="container-fluid">
+   <div class="row">
+      <div class="col-md-12 mb-4 mt-1">
+         <div class="d-flex flex-wrap justify-content-between align-items-center">
+             <h4 class="font-weight-bold" data-i18n="topicStatisticsPage">话题统计页</h4>
+         </div>
+      </div>
+   </div>
+      <div class="row">
+          <div class="col-lg-12">
+         <div class="card card-block card-stretch card-height">
+            <div class="card-body">
+                     <div class="collapse" id="form-element-15">
+                           <div class="card"><kbd class="bg-dark"><pre id="select-size" class="text-white"><code>
+&lt;div class="form-group"&gt;
+   &lt;label&gt;Small&lt;/label&gt;
+   &lt;select class="form-control form-control-sm mb-3"&gt;
+      &lt;option selected=""&gt;Open this select menu&lt;/option&gt;
+      &lt;option value="1"&gt;One&lt;/option&gt;
+      &lt;option value="2"&gt;Two&lt;/option&gt;
+      &lt;option value="3"&gt;Three&lt;/option&gt;
+   &lt;/select&gt;
+&lt;/div&gt;
+&lt;div class="form-group"&gt;
+   &lt;label&gt;Default&lt;/label&gt;
+   &lt;select class="form-control mb-3"&gt;
+      &lt;option selected=""&gt;Open this select menu&lt;/option&gt;
+      &lt;option value="1"&gt;One&lt;/option&gt;
+      &lt;option value="2"&gt;Two&lt;/option&gt;
+      &lt;option value="3"&gt;Three&lt;/option&gt;
+   &lt;/select&gt;
+&lt;/div&gt;
+&lt;div class="form-group"&gt;
+   &lt;label&gt;Large&lt;/label&gt;
+   &lt;select class="form-control form-control-lg"&gt;
+      &lt;option selected=""&gt;Open this select menu&lt;/option&gt;
+      &lt;option value="1"&gt;One&lt;/option&gt;
+      &lt;option value="2"&gt;Two&lt;/option&gt;
+      &lt;option value="3"&gt;Three&lt;/option&gt;
+   &lt;/select&gt;
+&lt;/div&gt;
+</code></pre></kbd></div>
+                        </div>
+                     <div class="form-group">
+                        <label>话题选择</label>
+                        <select onchange="hotWordChange(event)" class="form-control mb-3">
+                            {% for i in hotWordList %}
+                                {% if defaultHotWord == i[0] %}
+                                    <option selected value="{{ i[0] }}">{{ i[0] }}</option>
+                                {% else %}
+                                    <option value="{{ i[0] }}">{{ i[0] }}</option>
+                                {% endif %}
+                            {% endfor %}
+                        </select>
+                     </div>
+                     <div class="col-lg-12">
+                        <div class="form-group">
+                            <label for="modelSelect">选择分析模型：</label>
+                            <select class="form-control" id="modelSelect" onchange="updateModel(this.value)">
+                                <optgroup label="基础模型">
+                                    <option value="basic" {% if model_type == 'basic' %}selected{% endif %}>SnowNLP</option>
+                                </optgroup>
+                                <optgroup label="OpenAI 模型">
+                                    <option value="gpt-3.5-turbo" {% if model_type == 'gpt-3.5-turbo' %}selected{% endif %}>GPT-3.5-Turbo</option>
+                                    <option value="gpt-4" {% if model_type == 'gpt-4' %}selected{% endif %}>GPT-4</option>
+                                </optgroup>
+                                <optgroup label="Claude 模型">
+                                    <option value="claude-3-opus-20240229" {% if model_type == 'claude-3-opus-20240229' %}selected{% endif %}>Claude-3 Opus</option>
+                                    <option value="claude-3-sonnet-20240229" {% if model_type == 'claude-3-sonnet-20240229' %}selected{% endif %}>Claude-3 Sonnet</option>
+                                    <option value="claude-3-haiku-20240307" {% if model_type == 'claude-3-haiku-20240307' %}selected{% endif %}>Claude-3 Haiku</option>
+                                </optgroup>
+                                <optgroup label="DeepSeek 模型">
+                                    <option value="deepseek-chat" {% if model_type == 'deepseek-chat' %}selected{% endif %}>DeepSeek-V3</option>
+                                    <option value="deepseek-reasoner" {% if model_type == 'deepseek-reasoner' %}selected{% endif %}>DeepSeek-R1</option>
+                                </optgroup>
+                            </select>
+                        </div>
+                     </div>
+                         <script>
+                             function hotWordChange(e){
+                                 const model = document.querySelector('select[onchange="updateModel(this.value)"]').value;
+                                 window.location.href = 'http://127.0.0.1:5000/page/yuqingpredict?Topic=' + e.target.value + '&model=' + model;
+                             }
+                             function updateModel(value) {
+                                 const topic = document.querySelector('select[onchange="hotWordChange(event)"]').value;
+                                 window.location.href = 'http://127.0.0.1:5000/page/yuqingpredict?Topic=' + topic + '&model=' + value;
+                             }
+                         </script>
+                  </div>
+         </div>
+
+      </div>
+      </div>
+          <div class="row" style="justify-content: center">
+                <div class="col-md-6 col-xl-6">
+                                    <div class="card">
+                                        <div class="card-body">
+                                            <h4 class="card-title font-size-16 mt-0">{{ defaultHotWord }}</h4>
+                                        </div>
+                                        <ul class="list-group list-group-flush">
+                                            <li class="list-group-item">话题名称：{{ defaultHotWord }}</li>
+                                            <li class="list-group-item">出现次数：{{ hotWordLen }}次</li>
+                                            <li class="list-group-item">话题情感：{{ sentences }}</li>
+                                        </ul>
+                                    </div>
+
+                                </div>
+        </div>
+          <div class="row">
+              <div class="col-lg-12">
+                  <div class="card">
+                                        <div class="card-body">
+                                            <h4 class="card-title font-size-16 mt-0">话题年份变化趋势</h4>
+                                        </div>
+                                        <div id="main" style="width:100%;height: 450px"></div>
+                                    </div>
+              </div>
+          </div>
+          <div class="row">
+              <div class="col-lg-12">
+                  <div class="card">
+                  <div class="card-header d-flex justify-content-between">
+                     <div class="header-title">
+                        <h4 class="card-title">话题查询表格</h4>
+                     </div>
+                  <div class="header-action">
+                           <i data-toggle="collapse" data-target="#datatable-1" aria-expanded="false">
+                              <svg width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
+                              </svg>
+                           </i>
+                        </div>
+                  </div>
+                  <div class="card-body">
+                     <div class="collapse" id="datatable-1">
+                           <div class="card"><kbd class="bg-dark">
+                               <pre id="bootstrap-datatables" class="text-white"><code>
+&lt;table id="datatable" class="table data-table table-striped table-bordered" &gt;
+   &lt;thead&gt;
+      &lt;tr&gt;
+         &lt;th&gt;Name&lt;/th&gt;
+         &lt;th&gt;Position&lt;/th&gt;
+         &lt;th&gt;Office&lt;/th&gt;
+         &lt;th&gt;Age&lt;/th&gt;
+         &lt;th&gt;Start date&lt;/th&gt;
+         &lt;th&gt;Salary&lt;/th&gt;
+      &lt;/tr&gt;
+   &lt;/thead&gt;
+   &lt;tbody&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Tiger Nixon&lt;/td&gt;
+         &lt;td&gt;System Architect&lt;/td&gt;
+         &lt;td&gt;Edinburgh&lt;/td&gt;
+         &lt;td&gt;61&lt;/td&gt;
+         &lt;td&gt;2011/04/25&lt;/td&gt;
+         &lt;td&gt;$320,800&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Garrett Winters&lt;/td&gt;
+         &lt;td&gt;Accountant&lt;/td&gt;
+         &lt;td&gt;Tokyo&lt;/td&gt;
+         &lt;td&gt;63&lt;/td&gt;
+         &lt;td&gt;2011/07/25&lt;/td&gt;
+         &lt;td&gt;$170,750&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Ashton Cox&lt;/td&gt;
+         &lt;td&gt;Junior Technical Author&lt;/td&gt;
+         &lt;td&gt;San Francisco&lt;/td&gt;
+         &lt;td&gt;66&lt;/td&gt;
+         &lt;td&gt;2009/01/12&lt;/td&gt;
+         &lt;td&gt;$86,000&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Cedric Kelly&lt;/td&gt;
+         &lt;td&gt;Senior Javascript Developer&lt;/td&gt;
+         &lt;td&gt;Edinburgh&lt;/td&gt;
+         &lt;td&gt;22&lt;/td&gt;
+         &lt;td&gt;2012/03/29&lt;/td&gt;
+         &lt;td&gt;$433,060&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Airi Satou&lt;/td&gt;
+         &lt;td&gt;Accountant&lt;/td&gt;
+         &lt;td&gt;Tokyo&lt;/td&gt;
+         &lt;td&gt;33&lt;/td&gt;
+         &lt;td&gt;2008/11/28&lt;/td&gt;
+         &lt;td&gt;$162,700&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Brielle Williamson&lt;/td&gt;
+         &lt;td&gt;Integration Specialist&lt;/td&gt;
+         &lt;td&gt;New York&lt;/td&gt;
+         &lt;td&gt;61&lt;/td&gt;
+         &lt;td&gt;2012/12/02&lt;/td&gt;
+         &lt;td&gt;$372,000&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Herrod Chandler&lt;/td&gt;
+         &lt;td&gt;Sales Assistant&lt;/td&gt;
+         &lt;td&gt;San Francisco&lt;/td&gt;
+         &lt;td&gt;59&lt;/td&gt;
+         &lt;td&gt;2012/08/06&lt;/td&gt;
+         &lt;td&gt;$137,500&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Rhona Davidson&lt;/td&gt;
+         &lt;td&gt;Integration Specialist&lt;/td&gt;
+         &lt;td&gt;Tokyo&lt;/td&gt;
+         &lt;td&gt;55&lt;/td&gt;
+         &lt;td&gt;2010/10/14&lt;/td&gt;
+         &lt;td&gt;$327,900&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Colleen Hurst&lt;/td&gt;
+         &lt;td&gt;Javascript Developer&lt;/td&gt;
+         &lt;td&gt;San Francisco&lt;/td&gt;
+         &lt;td&gt;39&lt;/td&gt;
+         &lt;td&gt;2009/09/15&lt;/td&gt;
+         &lt;td&gt;$205,500&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Sonya Frost&lt;/td&gt;
+         &lt;td&gt;Software Engineer&lt;/td&gt;
+         &lt;td&gt;Edinburgh&lt;/td&gt;
+         &lt;td&gt;23&lt;/td&gt;
+         &lt;td&gt;2008/12/13&lt;/td&gt;
+         &lt;td&gt;$103,600&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Jena Gaines&lt;/td&gt;
+         &lt;td&gt;Office Manager&lt;/td&gt;
+         &lt;td&gt;London&lt;/td&gt;
+         &lt;td&gt;30&lt;/td&gt;
+         &lt;td&gt;2008/12/19&lt;/td&gt;
+         &lt;td&gt;$90,560&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Quinn Flynn&lt;/td&gt;
+         &lt;td&gt;Support Lead&lt;/td&gt;
+         &lt;td&gt;Edinburgh&lt;/td&gt;
+         &lt;td&gt;22&lt;/td&gt;
+         &lt;td&gt;2013/03/03&lt;/td&gt;
+         &lt;td&gt;$342,000&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Charde Marshall&lt;/td&gt;
+         &lt;td&gt;Regional Director&lt;/td&gt;
+         &lt;td&gt;San Francisco&lt;/td&gt;
+         &lt;td&gt;36&lt;/td&gt;
+         &lt;td&gt;2008/10/16&lt;/td&gt;
+         &lt;td&gt;$470,600&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Haley Kennedy&lt;/td&gt;
+         &lt;td&gt;Senior Marketing Designer&lt;/td&gt;
+         &lt;td&gt;London&lt;/td&gt;
+         &lt;td&gt;43&lt;/td&gt;
+         &lt;td&gt;2012/12/18&lt;/td&gt;
+         &lt;td&gt;$313,500&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Tatyana Fitzpatrick&lt;/td&gt;
+         &lt;td&gt;Regional Director&lt;/td&gt;
+         &lt;td&gt;London&lt;/td&gt;
+         &lt;td&gt;19&lt;/td&gt;
+         &lt;td&gt;2010/03/17&lt;/td&gt;
+         &lt;td&gt;$385,750&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Michael Silva&lt;/td&gt;
+         &lt;td&gt;Marketing Designer&lt;/td&gt;
+         &lt;td&gt;London&lt;/td&gt;
+         &lt;td&gt;66&lt;/td&gt;
+         &lt;td&gt;2012/11/27&lt;/td&gt;
+         &lt;td&gt;$198,500&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Paul Byrd&lt;/td&gt;
+         &lt;td&gt;Chief Financial Officer (CFO)&lt;/td&gt;
+         &lt;td&gt;New York&lt;/td&gt;
+         &lt;td&gt;64&lt;/td&gt;
+         &lt;td&gt;2010/06/09&lt;/td&gt;
+         &lt;td&gt;$725,000&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Gloria Little&lt;/td&gt;
+         &lt;td&gt;Systems Administrator&lt;/td&gt;
+         &lt;td&gt;New York&lt;/td&gt;
+         &lt;td&gt;59&lt;/td&gt;
+         &lt;td&gt;2009/04/10&lt;/td&gt;
+         &lt;td&gt;$237,500&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Bradley Greer&lt;/td&gt;
+         &lt;td&gt;Software Engineer&lt;/td&gt;
+         &lt;td&gt;London&lt;/td&gt;
+         &lt;td&gt;41&lt;/td&gt;
+         &lt;td&gt;2012/10/13&lt;/td&gt;
+         &lt;td&gt;$132,000&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;Dai Rios&lt;/td&gt;
+         &lt;td&gt;Personnel Lead&lt;/td&gt;
+         &lt;td&gt;Edinburgh&lt;/td&gt;
+         &lt;td&gt;35&lt;/td&gt;
+         &lt;td&gt;2012/09/26&lt;/td&gt;
+         &lt;td&gt;$217,500&lt;/td&gt;
+      &lt;/tr&gt;
+&lt;/table&gt;
+</code></pre></kbd></div>
+                        </div>
+                     <p>根据选择的话题从而查询出评论数据</p>
+                     <div class="table-responsive">
+                        <div id="datatable-1_wrapper" class="dataTables_wrapper dt-bootstrap4">
+                            <div class="row"><div class="col-sm-12"><table id="datatable-1" class="table data-table table-striped table-bordered dataTable" role="grid" aria-describedby="datatable-1_info">
+                           <thead>
+                              <tr role="row">
+                                  <th class="sorting sorting_asc" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 250.844px;">文章ID</th>
+                                  <th class="sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 392.094px;">评论用户</th>
+                                  <th class="sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 190.75px;">评论性别</th>
+                                  <th class="sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 84.2656px;">评论话题</th>
+                                  <th class="sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 172.594px;">评论内容</th>
+                                  <th class="text-right sorting" tabindex="0" aria-controls="datatable-1" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 158.453px;">点赞量</th></tr>
+                           </thead>
+                           <tbody>
+                                {% for i in comments %}
+                                <tr class="odd">
+                                     <td class="sorting_1">{{ i[0] }}</td>
+                                     <td>{{ i[5] }}</td>
+                                     <td>
+                                         {% if i[6]  =='f' %}
+                                             女生
+                                         {% else %}
+                                            男生
+                                         {% endif %}
+                                     </td>
+                                     <td>{{ i[9] }}</td>
+                                     <td>{{ i[4] }}</td>
+                                     <td class="text-right">👍{{ i[2] }}</td>
+                                  </tr>
+                               {% endfor %}
+                           </tbody>
+                        </table></div></div>
+                     </div>
+                  </div>
+               </div>
+              </div>
+          </div>
+
+<!-- AI分析结果展示区域 -->
+<div class="row">
+    <div class="col-lg-12">
+        <div class="card">
+            <div class="card-header d-flex justify-content-between">
+                <div class="header-title">
+                    <h4 class="card-title">AI深度分析</h4>
+                </div>
+                <div class="analysis-controls">
+                    <!-- 批量处理设置 -->
+                    <div class="d-flex align-items-center">
+                        <div class="form-group mx-2 mb-0">
+                            <select id="batchSize" class="form-control form-control-sm">
+                                <option value="10">每批10条</option>
+                                <option value="20">每批20条</option>
+                                <option value="50" selected>每批50条</option>
+                                <option value="100">每批100条</option>
+                            </select>
+                        </div>
+                        <div class="form-group mx-2 mb-0">
+                            <select id="modelType" class="form-control form-control-sm">
+                                <optgroup label="OpenAI 模型">
+                                    <option value="gpt-3.5-turbo">GPT-3.5-Turbo ($0.0015/1K tokens)</option>
+                                    <option value="gpt-3.5-turbo-16k">GPT-3.5-Turbo-16K ($0.003/1K tokens)</option>
+                                    <option value="gpt-4">GPT-4 ($0.03/1K tokens)</option>
+                                    <option value="gpt-4-32k">GPT-4-32K ($0.06/1K tokens)</option>
+                                    <option value="gpt-4-turbo-preview">GPT-4-Turbo ($0.01/1K tokens)</option>
+                                </optgroup>
+                                <optgroup label="Claude 模型">
+                                    <option value="claude-3-opus-20240229">Claude-3 Opus ($0.015/1K tokens)</option>
+                                    <option value="claude-3-sonnet-20240229">Claude-3 Sonnet ($0.003/1K tokens)</option>
+                                    <option value="claude-3-haiku-20240307">Claude-3 Haiku ($0.0025/1K tokens)</option>
+                                    <option value="claude-2.1">Claude-2.1 ($0.008/1K tokens)</option>
+                                    <option value="claude-2.0">Claude-2.0 ($0.008/1K tokens)</option>
+                                    <option value="claude-instant-1.2">Claude Instant ($0.0015/1K tokens)</option>
+                                </optgroup>
+                            </select>
+                        </div>
+                        <div class="form-group mx-2 mb-0">
+                            <select id="analysisDepth" class="form-control form-control-sm">
+                                <option value="basic">基础分析</option>
+                                <option value="standard" selected>标准分析</option>
+                                <option value="deep">深度分析</option>
+                            </select>
+                        </div>
+                        <div class="custom-control custom-switch mx-2">
+                            <input type="checkbox" class="custom-control-input" id="autoUpdate">
+                            <label class="custom-control-label" for="autoUpdate">自动更新</label>
+                        </div>
+                        <button class="btn btn-primary btn-sm" onclick="requestAIAnalysis()">
+                            开始分析
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="card-body">
+                <!-- 进度显示 -->
+                <div id="analysis-progress" class="mb-3" style="display: none;">
+                    <div class="progress">
+                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
+                    </div>
+                    <small class="text-muted mt-1 d-block">正在分析: <span id="progress-text">0/0</span></small>
+                </div>
+                
+                <!-- 分析结果过滤器 -->
+                <div class="mb-3">
+                    <div class="d-flex align-items-center">
+                        <div class="form-group mb-0 mr-2">
+                            <input type="text" class="form-control form-control-sm" id="keywordFilter" placeholder="按关键词过滤">
+                        </div>
+                        <div class="form-group mb-0 mr-2">
+                            <select class="form-control form-control-sm" id="sentimentFilter">
+                                <option value="">全部情感</option>
+                                <option value="积极">积极</option>
+                                <option value="消极">消极</option>
+                                <option value="中性">中性</option>
+                            </select>
+                        </div>
+                        <div class="form-group mb-0">
+                            <select class="form-control form-control-sm" id="riskFilter">
+                                <option value="">全部风险等级</option>
+                                <option value="高">高风险</option>
+                                <option value="中">中风险</option>
+                                <option value="低">低风险</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                
+                <div id="ai-analysis-results" class="analysis-container">
+                    <!-- 分析结果将在这里动态显示 -->
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 更新CSS样式 -->
+<style>
+.analysis-container {
+    max-height: 600px;
+    overflow-y: auto;
+}
+
+.analysis-card {
+    border: 1px solid #eee;
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 15px;
+    background-color: #fff;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+}
+
+.analysis-card:hover {
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    transform: translateY(-2px);
+}
+
+.risk-level {
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-weight: bold;
+}
+
+.risk-low {
+    background-color: #e8f5e9;
+    color: #2e7d32;
+}
+
+.risk-medium {
+    background-color: #fff3e0;
+    color: #f57c00;
+}
+
+.risk-high {
+    background-color: #ffebee;
+    color: #c62828;
+}
+
+.keywords-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 10px 0;
+}
+
+.keyword-tag {
+    background-color: #e3f2fd;
+    color: #1976d2;
+    padding: 4px 8px;
+    border-radius: 16px;
+    font-size: 0.9em;
+    transition: all 0.2s ease;
+}
+
+.keyword-tag:hover {
+    background-color: #1976d2;
+    color: #fff;
+}
+
+.sentiment-score {
+    display: inline-block;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.9em;
+    margin-left: 8px;
+}
+
+.sentiment-positive {
+    background-color: #e8f5e9;
+    color: #2e7d32;
+}
+
+.sentiment-negative {
+    background-color: #ffebee;
+    color: #c62828;
+}
+
+.sentiment-neutral {
+    background-color: #f5f5f5;
+    color: #616161;
+}
+
+.progress {
+    height: 0.5rem;
+}
+
+.analysis-controls {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+@media (max-width: 768px) {
+    .analysis-controls {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}
+</style>
+
+<!-- 更新JavaScript代码 -->
+<script>
+let currentAnalysis = {
+    inProgress: false,
+    totalMessages: 0,
+    processedMessages: 0,
+    autoUpdateInterval: null
+};
+
+async function requestAIAnalysis() {
+    if (currentAnalysis.inProgress) {
+        return;
+    }
+    
+    try {
+        currentAnalysis.inProgress = true;
+        showProgress();
+        
+        const batchSize = parseInt(document.getElementById('batchSize').value);
+        const modelType = document.getElementById('modelType').value;
+        const analysisDepth = document.getElementById('analysisDepth').value;
+        
+        const response = await fetch('/page/api/analyze_messages', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                batch_size: batchSize,
+                model_type: modelType,
+                analysis_depth: analysisDepth
+            })
+        });
+        
+        const result = await response.json();
+        if (result.success) {
+            displayAnalysisResults(result.data);
+            setupAutoUpdate();
+        } else {
+            showError(result.error);
+        }
+    } catch (error) {
+        console.error('AI分析请求失败:', error);
+        showError('请求失败，请稍后重试');
+    } finally {
+        currentAnalysis.inProgress = false;
+        hideProgress();
+    }
+}
+
+function showProgress() {
+    const progressDiv = document.getElementById('analysis-progress');
+    progressDiv.style.display = 'block';
+    updateProgress(0, 100);
+}
+
+function hideProgress() {
+    const progressDiv = document.getElementById('analysis-progress');
+    progressDiv.style.display = 'none';
+}
+
+function updateProgress(current, total) {
+    const progressBar = document.querySelector('.progress-bar');
+    const progressText = document.getElementById('progress-text');
+    const percentage = (current / total) * 100;
+    
+    progressBar.style.width = `${percentage}%`;
+    progressText.textContent = `${current}/${total}`;
+}
+
+function setupAutoUpdate() {
+    const autoUpdate = document.getElementById('autoUpdate').checked;
+    if (autoUpdate && !currentAnalysis.autoUpdateInterval) {
+        currentAnalysis.autoUpdateInterval = setInterval(requestAIAnalysis, 300000); // 5分钟更新一次
+    } else if (!autoUpdate && currentAnalysis.autoUpdateInterval) {
+        clearInterval(currentAnalysis.autoUpdateInterval);
+        currentAnalysis.autoUpdateInterval = null;
+    }
+}
+
+function filterResults() {
+    const keyword = document.getElementById('keywordFilter').value.toLowerCase();
+    const sentiment = document.getElementById('sentimentFilter').value;
+    const risk = document.getElementById('riskFilter').value;
+    
+    const cards = document.querySelectorAll('.analysis-card');
+    cards.forEach(card => {
+        let show = true;
+        
+        // 关键词过滤
+        if (keyword) {
+            const content = card.textContent.toLowerCase();
+            show = show && content.includes(keyword);
+        }
+        
+        // 情感过滤
+        if (sentiment) {
+            const cardSentiment = card.querySelector('.sentiment-text').textContent;
+            show = show && cardSentiment.includes(sentiment);
+        }
+        
+        // 风险等级过滤
+        if (risk) {
+            const cardRisk = card.querySelector('.risk-level').textContent;
+            show = show && cardRisk.includes(risk);
+        }
+        
+        card.style.display = show ? 'block' : 'none';
+    });
+}
+
+function displayAnalysisResults(results) {
+    const container = document.getElementById('ai-analysis-results');
+    container.innerHTML = ''; // 清空现有结果
+    
+    results.forEach(analysis => {
+        const card = document.createElement('div');
+        card.className = 'analysis-card';
+        
+        const riskLevelClass = 
+            analysis.risk_level === '高' ? 'risk-high' :
+            analysis.risk_level === '中' ? 'risk-medium' : 'risk-low';
+            
+        const sentimentClass = 
+            analysis.sentiment === '积极' ? 'sentiment-positive' :
+            analysis.sentiment === '消极' ? 'sentiment-negative' : 'sentiment-neutral';
+        
+        card.innerHTML = `
+            <div class="d-flex justify-content-between align-items-center">
+                <h5 class="mb-2">消息ID: ${analysis.id}</h5>
+                <span class="risk-level ${riskLevelClass}">
+                    风险等级: ${analysis.risk_level}
+                </span>
+            </div>
+            <div class="mb-2">
+                <strong>情感倾向:</strong> 
+                <span class="sentiment-text">${analysis.sentiment}</span>
+                <span class="sentiment-score ${sentimentClass}">${analysis.sentiment_score}</span>
+            </div>
+            <div class="keywords-container">
+                ${analysis.keywords.split(',').map(keyword => 
+                    `<span class="keyword-tag">${keyword.trim()}</span>`
+                ).join('')}
+            </div>
+            <div class="mb-2">
+                <strong>核心观点:</strong>
+                <p class="mb-1">${analysis.key_points}</p>
+            </div>
+            <div class="mb-2">
+                <strong>影响分析:</strong>
+                <p class="mb-1">${analysis.influence}</p>
+            </div>
+            <div class="text-muted">
+                分析时间: ${analysis.analysis_time}
+            </div>
+        `;
+        
+        container.appendChild(card);
+    });
+    
+    // 应用当前的过滤器
+    filterResults();
+}
+
+function showError(message) {
+    alert(message);
+}
+
+// 设置事件监听器
+document.addEventListener('DOMContentLoaded', () => {
+    // 自动更新切换
+    document.getElementById('autoUpdate').addEventListener('change', setupAutoUpdate);
+    
+    // 过滤器变化监听
+    document.getElementById('keywordFilter').addEventListener('input', filterResults);
+    document.getElementById('sentimentFilter').addEventListener('change', filterResults);
+    document.getElementById('riskFilter').addEventListener('change', filterResults);
+    
+    // 首次加载时请求分析
+    requestAIAnalysis();
+});
+</script>
+
+{% endblock %}
+
+{% block echarts %}
+<script>
+  var yData = {{ yData | tojson }};
+  var xData = {{ xData | tojson }};
+
+  var chartDom = document.getElementById('main');
+  var myChart = echarts.init(chartDom);
+  var option;
+
+  var lastFiveStartIndex = yData.length - 5; // 最后五个数据点的开始索引
+
+  option = {
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data: ['话题出现时间分布个数', '话题预测时间分布个数']
+    },
+    toolbox: {
+      show: true,
+      feature: {
+        dataView: { show: true, readOnly: false },
+        magicType: { show: true, type: ['line', 'bar'] },
+        restore: { show: true },
+        saveAsImage: { show: true }
+      }
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: 'category',
+        data: xData
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    dataZoom: [
+      {
+        show: true,
+        start: 10,
+        end: 60
+      },
+      {
+        type: 'inside',
+        start: 10,
+        end: 60
+      }
+    ],
+    series: [
+      {
+        name: '话题预测时间分布个数',
+        type: 'bar',
+        data: yData.map((value, index) => ({
+          value: value,
+          itemStyle: {
+            color: index >= lastFiveStartIndex ? 'orange' : 'blue'
+          }
+        })),
+        markPoint: {
+          data: [
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' }
+          ]
+        },
+        markLine: {
+          data: [{ type: 'average', name: 'Avg' }]
+        }
+      }
+    ]
+  };
+
+  myChart.setOption(option);
+</script>
+
 {% endblock %}
\ No newline at end of file
diff --git a/views/spider_control.py b/views/spider_control.py
index bd062a7..67a445f 100644
--- a/views/spider_control.py
+++ b/views/spider_control.py
@@ -1,371 +1,371 @@
-from flask import Blueprint, jsonify, request, render_template
-import json
-import os
-from datetime import datetime
-import threading
-from queue import Queue
-import asyncio
-import websockets
-import logging
-from spider.spiderData import SpiderData
-from openai import OpenAI
-from anthropic import Anthropic
-import aiohttp
-from concurrent.futures import ThreadPoolExecutor
-from ratelimit import limits, sleep_and_retry
-from tenacity import retry, stop_after_attempt, wait_exponential
-
-# 创建蓝图
-spider_bp = Blueprint('spider', __name__)
-
-# 创建日志记录器
-logger = logging.getLogger('spider_control')
-logger.setLevel(logging.INFO)
-
-# 存储WebSocket连接的集合
-websocket_connections = set()
-
-# 创建消息队列
-message_queue = Queue()
-
-# 创建线程池
-thread_pool = ThreadPoolExecutor(max_workers=3)
-
-# 创建异步事件循环
-loop = asyncio.new_event_loop()
-asyncio.set_event_loop(loop)
-
-# 默认配置
-DEFAULT_CONFIG = {
-    'crawlDepth': 3,
-    'interval': 5,
-    'maxRetries': 3,
-    'timeout': 30,
-    'maxConcurrent': 2
-}
-
-# 限流装饰器
-@sleep_and_retry
-@limits(calls=100, period=60)  # 每分钟最多100个请求
-def rate_limited_request():
-    pass
-
-class SpiderWorker:
-    def __init__(self, topics, parameters):
-        self.topics = topics
-        self.parameters = parameters
-        self.total_topics = len(topics)
-        self.completed_topics = 0
-        self.spider = SpiderData()
-        self.message_buffer = []
-        self.message_buffer_size = 10
-        self.semaphore = asyncio.Semaphore(parameters.get('maxConcurrent', DEFAULT_CONFIG['maxConcurrent']))
-    
-    async def send_message(self, message):
-        """异步发送消息，使用缓冲区优化"""
-        self.message_buffer.append(message)
-        if len(self.message_buffer) >= self.message_buffer_size:
-            await self.flush_messages()
-    
-    async def flush_messages(self):
-        """刷新消息缓冲区"""
-        if not self.message_buffer:
-            return
-        
-        try:
-            await broadcast_message(self.message_buffer)
-            self.message_buffer.clear()
-        except Exception as e:
-            logger.error(f"发送消息失败: {e}")
-    
-    @retry(stop=stop_after_attempt(3), wait=wait_exponential(multiplier=1, min=4, max=10))
-    async def crawl_single_topic(self, topic):
-        """爬取单个话题"""
-        try:
-            rate_limited_request()
-            
-            await self.send_message({
-                'type': 'log',
-                'message': f'开始爬取话题: {topic}'
-            })
-            
-            async with self.semaphore:
-                await asyncio.get_event_loop().run_in_executor(
-                    thread_pool,
-                    self.spider.crawl_topic,
-                    topic,
-                    self.parameters['crawlDepth'],
-                    self.parameters['interval'],
-                    self.parameters['maxRetries'],
-                    self.parameters['timeout']
-                )
-            
-            self.completed_topics += 1
-            progress = int((self.completed_topics / self.total_topics) * 100)
-            
-            await self.send_message({
-                'type': 'progress',
-                'value': progress
-            })
-            
-            await self.send_message({
-                'type': 'log',
-                'message': f'话题 {topic} 爬取完成'
-            })
-            
-        except Exception as e:
-            logger.error(f"爬取话题 {topic} 失败: {e}")
-            await self.send_message({
-                'type': 'log',
-                'message': f'爬取话题 {topic} 时出错: {str(e)}'
-            })
-            raise
-    
-    async def run(self):
-        """运行爬虫任务"""
-        try:
-            tasks = [self.crawl_single_topic(topic) for topic in self.topics]
-            await asyncio.gather(*tasks)
-            await self.flush_messages()
-            
-            await self.send_message({
-                'type': 'log',
-                'message': '所有话题爬取完成'
-            })
-            
-        except Exception as e:
-            logger.error(f"爬虫任务执行出错: {e}")
-            await self.send_message({
-                'type': 'log',
-                'message': f'爬虫任务执行出错: {str(e)}'
-            })
-        finally:
-            await self.flush_messages()
-
-async def broadcast_message(messages):
-    """广播消息到所有WebSocket连接"""
-    if not websocket_connections:
-        return
-    
-    for websocket in websocket_connections.copy():
-        try:
-            if isinstance(messages, list):
-                for message in messages:
-                    await websocket.send(json.dumps(message))
-            else:
-                await websocket.send(json.dumps(messages))
-        except websockets.exceptions.ConnectionClosed:
-            websocket_connections.remove(websocket)
-        except Exception as e:
-            logger.error(f"发送WebSocket消息失败: {e}")
-            websocket_connections.remove(websocket)
-
-@spider_bp.route('/spider/control')
-def spider_control():
-    """渲染爬虫控制页面"""
-    return render_template('spider_control.html')
-
-@spider_bp.route('/api/spider/start', methods=['POST'])
-async def start_spider():
-    """启动爬虫任务"""
-    try:
-        data = request.get_json()
-        topics = data.get('topics', [])
-        parameters = {**DEFAULT_CONFIG, **data.get('parameters', {})}
-        
-        if not topics:
-            return jsonify({
-                'success': False,
-                'message': '请选择至少一个话题'
-            })
-        
-        # 创建爬虫工作器
-        worker = SpiderWorker(topics, parameters)
-        
-        # 在事件循环中运行爬虫任务
-        asyncio.create_task(worker.run())
-        
-        return jsonify({
-            'success': True,
-            'message': '爬虫任务已启动'
-        })
-        
-    except Exception as e:
-        logger.error(f"启动爬虫任务失败: {e}")
-        return jsonify({
-            'success': False,
-            'message': str(e)
-        })
-
-@spider_bp.route('/api/spider/save-config', methods=['POST'])
-def save_spider_config():
-    """保存爬虫配置"""
-    try:
-        config = request.get_json()
-        if save_config(config):
-            return jsonify({
-                'success': True,
-                'message': '配置保存成功'
-            })
-        else:
-            return jsonify({
-                'success': False,
-                'message': '配置保存失败'
-            })
-    except Exception as e:
-        logger.error(f"保存配置失败: {e}")
-        return jsonify({
-            'success': False,
-            'message': str(e)
-        })
-
-@spider_bp.websocket('/ws/spider-status')
-async def spider_status_socket(websocket):
-    """WebSocket连接处理"""
-    try:
-        websocket_connections.add(websocket)
-        logging.info("新的WebSocket连接已建立")
-        
-        try:
-            while True:
-                # 等待消息，保持连接活跃
-                message = await websocket.receive()
-                if message is None:
-                    break
-        except websockets.exceptions.ConnectionClosed:
-            logging.info("WebSocket连接已关闭")
-        finally:
-            websocket_connections.remove(websocket)
-            logging.info("WebSocket连接已移除")
-    except Exception as e:
-        logger.error(f"WebSocket连接处理失败: {e}")
-        if websocket in websocket_connections:
-            websocket_connections.remove(websocket)
-
-def get_ai_client():
-    """获取可用的AI客户端"""
-    # 按优先级尝试不同的AI服务
-    if os.getenv('ANTHROPIC_API_KEY'):
-        return {
-            'type': 'anthropic',
-            'client': Anthropic(api_key=os.getenv('ANTHROPIC_API_KEY'))
-        }
-    elif os.getenv('OPENAI_API_KEY'):
-        return {
-            'type': 'openai',
-            'client': OpenAI(api_key=os.getenv('OPENAI_API_KEY'))
-        }
-    else:
-        raise ValueError("未找到可用的AI API密钥")
-
-def parse_ai_response(response_text):
-    """解析AI响应中的JSON配置"""
-    try:
-        # 查找JSON内容
-        start = response_text.find('{')
-        end = response_text.rfind('}') + 1
-        if start == -1 or end == 0:
-            raise ValueError("未找到有效的JSON配置")
-        
-        json_str = response_text[start:end]
-        config = json.loads(json_str)
-        
-        # 验证配置格式
-        if not isinstance(config.get('topics'), list):
-            raise ValueError("配置必须包含话题列表")
-        
-        parameters = config.get('parameters', {})
-        if not all(key in parameters for key in ['crawlDepth', 'interval', 'maxRetries', 'timeout']):
-            raise ValueError("配置缺少必要的参数")
-        
-        # 提取建议文本（JSON之前的部分）
-        suggestion = response_text[:start].strip()
-        
-        return config, suggestion
-    except Exception as e:
-        raise ValueError(f"解析AI响应失败: {str(e)}")
-
-@spider_bp.route('/api/spider/ai-config', methods=['POST'])
-def generate_ai_config():
-    """使用AI生成爬虫配置"""
-    try:
-        prompt = request.json.get('prompt', '')
-        if not prompt:
-            return jsonify({
-                'success': False,
-                'message': '请提供爬虫需求描述'
-            })
-        
-        # 构建AI提示
-        system_prompt = """你是一个专业的爬虫配置助手。请根据用户的自然语言描述，生成合适的微博爬虫配置。
-配置应包含以下内容：
-1. 要爬取的话题列表
-2. 爬虫参数（爬取深度、间隔时间、重试次数、超时时间）
-
-请先用通俗易懂的语言解释你的配置建议，然后在最后提供一个JSON格式的具体配置。
-注意：
-- 爬取深度(crawlDepth)范围：1-10页
-- 间隔时间(interval)范围：3-30秒
-- 重试次数(maxRetries)范围：1-5次
-- 超时时间(timeout)范围：10-60秒
-- 所有参数都必须是整数
-
-示例输出格式：
-根据您的需求，我建议...
-
-{
-    "topics": ["话题1", "话题2"],
-    "parameters": {
-        "crawlDepth": 5,
-        "interval": 5,
-        "maxRetries": 3,
-        "timeout": 30
-    }
-}"""
-
-        # 获取AI客户端
-        ai = get_ai_client()
-        
-        try:
-            if ai['type'] == 'anthropic':
-                response = ai['client'].messages.create(
-                    model="claude-3-sonnet-20240229",
-                    max_tokens=1000,
-                    messages=[
-                        {"role": "system", "content": system_prompt},
-                        {"role": "user", "content": prompt}
-                    ]
-                )
-                response_text = response.content[0].text
-            else:  # OpenAI
-                response = ai['client'].chat.completions.create(
-                    model="gpt-3.5-turbo",
-                    messages=[
-                        {"role": "system", "content": system_prompt},
-                        {"role": "user", "content": prompt}
-                    ]
-                )
-                response_text = response.choices[0].message.content
-            
-            # 解析AI响应
-            config, suggestion = parse_ai_response(response_text)
-            
-            return jsonify({
-                'success': True,
-                'config': config,
-                'suggestion': suggestion
-            })
-            
-        except Exception as e:
-            logger.error(f"AI服务调用失败: {e}")
-            return jsonify({
-                'success': False,
-                'message': f"AI配置生成失败: {str(e)}"
-            })
-            
-    except Exception as e:
-        logger.error(f"生成配置失败: {e}")
-        return jsonify({
-            'success': False,
-            'message': str(e)
+from flask import Blueprint, jsonify, request, render_template
+import json
+import os
+from datetime import datetime
+import threading
+from queue import Queue
+import asyncio
+import websockets
+import logging
+from spider.spiderData import SpiderData
+from openai import OpenAI
+from anthropic import Anthropic
+import aiohttp
+from concurrent.futures import ThreadPoolExecutor
+from ratelimit import limits, sleep_and_retry
+from tenacity import retry, stop_after_attempt, wait_exponential
+
+# 创建蓝图
+spider_bp = Blueprint('spider', __name__)
+
+# 创建日志记录器
+logger = logging.getLogger('spider_control')
+logger.setLevel(logging.INFO)
+
+# 存储WebSocket连接的集合
+websocket_connections = set()
+
+# 创建消息队列
+message_queue = Queue()
+
+# 创建线程池
+thread_pool = ThreadPoolExecutor(max_workers=3)
+
+# 创建异步事件循环
+loop = asyncio.new_event_loop()
+asyncio.set_event_loop(loop)
+
+# 默认配置
+DEFAULT_CONFIG = {
+    'crawlDepth': 3,
+    'interval': 5,
+    'maxRetries': 3,
+    'timeout': 30,
+    'maxConcurrent': 2
+}
+
+# 限流装饰器
+@sleep_and_retry
+@limits(calls=100, period=60)  # 每分钟最多100个请求
+def rate_limited_request():
+    pass
+
+class SpiderWorker:
+    def __init__(self, topics, parameters):
+        self.topics = topics
+        self.parameters = parameters
+        self.total_topics = len(topics)
+        self.completed_topics = 0
+        self.spider = SpiderData()
+        self.message_buffer = []
+        self.message_buffer_size = 10
+        self.semaphore = asyncio.Semaphore(parameters.get('maxConcurrent', DEFAULT_CONFIG['maxConcurrent']))
+    
+    async def send_message(self, message):
+        """异步发送消息，使用缓冲区优化"""
+        self.message_buffer.append(message)
+        if len(self.message_buffer) >= self.message_buffer_size:
+            await self.flush_messages()
+    
+    async def flush_messages(self):
+        """刷新消息缓冲区"""
+        if not self.message_buffer:
+            return
+        
+        try:
+            await broadcast_message(self.message_buffer)
+            self.message_buffer.clear()
+        except Exception as e:
+            logger.error(f"发送消息失败: {e}")
+    
+    @retry(stop=stop_after_attempt(3), wait=wait_exponential(multiplier=1, min=4, max=10))
+    async def crawl_single_topic(self, topic):
+        """爬取单个话题"""
+        try:
+            rate_limited_request()
+            
+            await self.send_message({
+                'type': 'log',
+                'message': f'开始爬取话题: {topic}'
+            })
+            
+            async with self.semaphore:
+                await asyncio.get_event_loop().run_in_executor(
+                    thread_pool,
+                    self.spider.crawl_topic,
+                    topic,
+                    self.parameters['crawlDepth'],
+                    self.parameters['interval'],
+                    self.parameters['maxRetries'],
+                    self.parameters['timeout']
+                )
+            
+            self.completed_topics += 1
+            progress = int((self.completed_topics / self.total_topics) * 100)
+            
+            await self.send_message({
+                'type': 'progress',
+                'value': progress
+            })
+            
+            await self.send_message({
+                'type': 'log',
+                'message': f'话题 {topic} 爬取完成'
+            })
+            
+        except Exception as e:
+            logger.error(f"爬取话题 {topic} 失败: {e}")
+            await self.send_message({
+                'type': 'log',
+                'message': f'爬取话题 {topic} 时出错: {str(e)}'
+            })
+            raise
+    
+    async def run(self):
+        """运行爬虫任务"""
+        try:
+            tasks = [self.crawl_single_topic(topic) for topic in self.topics]
+            await asyncio.gather(*tasks)
+            await self.flush_messages()
+            
+            await self.send_message({
+                'type': 'log',
+                'message': '所有话题爬取完成'
+            })
+            
+        except Exception as e:
+            logger.error(f"爬虫任务执行出错: {e}")
+            await self.send_message({
+                'type': 'log',
+                'message': f'爬虫任务执行出错: {str(e)}'
+            })
+        finally:
+            await self.flush_messages()
+
+async def broadcast_message(messages):
+    """广播消息到所有WebSocket连接"""
+    if not websocket_connections:
+        return
+    
+    for websocket in websocket_connections.copy():
+        try:
+            if isinstance(messages, list):
+                for message in messages:
+                    await websocket.send(json.dumps(message))
+            else:
+                await websocket.send(json.dumps(messages))
+        except websockets.exceptions.ConnectionClosed:
+            websocket_connections.remove(websocket)
+        except Exception as e:
+            logger.error(f"发送WebSocket消息失败: {e}")
+            websocket_connections.remove(websocket)
+
+@spider_bp.route('/spider/control')
+def spider_control():
+    """渲染爬虫控制页面"""
+    return render_template('spider_control.html')
+
+@spider_bp.route('/api/spider/start', methods=['POST'])
+async def start_spider():
+    """启动爬虫任务"""
+    try:
+        data = request.get_json()
+        topics = data.get('topics', [])
+        parameters = {**DEFAULT_CONFIG, **data.get('parameters', {})}
+        
+        if not topics:
+            return jsonify({
+                'success': False,
+                'message': '请选择至少一个话题'
+            })
+        
+        # 创建爬虫工作器
+        worker = SpiderWorker(topics, parameters)
+        
+        # 在事件循环中运行爬虫任务
+        asyncio.create_task(worker.run())
+        
+        return jsonify({
+            'success': True,
+            'message': '爬虫任务已启动'
+        })
+        
+    except Exception as e:
+        logger.error(f"启动爬虫任务失败: {e}")
+        return jsonify({
+            'success': False,
+            'message': str(e)
+        })
+
+@spider_bp.route('/api/spider/save-config', methods=['POST'])
+def save_spider_config():
+    """保存爬虫配置"""
+    try:
+        config = request.get_json()
+        if save_config(config):
+            return jsonify({
+                'success': True,
+                'message': '配置保存成功'
+            })
+        else:
+            return jsonify({
+                'success': False,
+                'message': '配置保存失败'
+            })
+    except Exception as e:
+        logger.error(f"保存配置失败: {e}")
+        return jsonify({
+            'success': False,
+            'message': str(e)
+        })
+
+@spider_bp.websocket('/ws/spider-status')
+async def spider_status_socket(websocket):
+    """WebSocket连接处理"""
+    try:
+        websocket_connections.add(websocket)
+        logging.info("新的WebSocket连接已建立")
+        
+        try:
+            while True:
+                # 等待消息，保持连接活跃
+                message = await websocket.receive()
+                if message is None:
+                    break
+        except websockets.exceptions.ConnectionClosed:
+            logging.info("WebSocket连接已关闭")
+        finally:
+            websocket_connections.remove(websocket)
+            logging.info("WebSocket连接已移除")
+    except Exception as e:
+        logger.error(f"WebSocket连接处理失败: {e}")
+        if websocket in websocket_connections:
+            websocket_connections.remove(websocket)
+
+def get_ai_client():
+    """获取可用的AI客户端"""
+    # 按优先级尝试不同的AI服务
+    if os.getenv('ANTHROPIC_API_KEY'):
+        return {
+            'type': 'anthropic',
+            'client': Anthropic(api_key=os.getenv('ANTHROPIC_API_KEY'))
+        }
+    elif os.getenv('OPENAI_API_KEY'):
+        return {
+            'type': 'openai',
+            'client': OpenAI(api_key=os.getenv('OPENAI_API_KEY'))
+        }
+    else:
+        raise ValueError("未找到可用的AI API密钥")
+
+def parse_ai_response(response_text):
+    """解析AI响应中的JSON配置"""
+    try:
+        # 查找JSON内容
+        start = response_text.find('{')
+        end = response_text.rfind('}') + 1
+        if start == -1 or end == 0:
+            raise ValueError("未找到有效的JSON配置")
+        
+        json_str = response_text[start:end]
+        config = json.loads(json_str)
+        
+        # 验证配置格式
+        if not isinstance(config.get('topics'), list):
+            raise ValueError("配置必须包含话题列表")
+        
+        parameters = config.get('parameters', {})
+        if not all(key in parameters for key in ['crawlDepth', 'interval', 'maxRetries', 'timeout']):
+            raise ValueError("配置缺少必要的参数")
+        
+        # 提取建议文本（JSON之前的部分）
+        suggestion = response_text[:start].strip()
+        
+        return config, suggestion
+    except Exception as e:
+        raise ValueError(f"解析AI响应失败: {str(e)}")
+
+@spider_bp.route('/api/spider/ai-config', methods=['POST'])
+def generate_ai_config():
+    """使用AI生成爬虫配置"""
+    try:
+        prompt = request.json.get('prompt', '')
+        if not prompt:
+            return jsonify({
+                'success': False,
+                'message': '请提供爬虫需求描述'
+            })
+        
+        # 构建AI提示
+        system_prompt = """你是一个专业的爬虫配置助手。请根据用户的自然语言描述，生成合适的微博爬虫配置。
+配置应包含以下内容：
+1. 要爬取的话题列表
+2. 爬虫参数（爬取深度、间隔时间、重试次数、超时时间）
+
+请先用通俗易懂的语言解释你的配置建议，然后在最后提供一个JSON格式的具体配置。
+注意：
+- 爬取深度(crawlDepth)范围：1-10页
+- 间隔时间(interval)范围：3-30秒
+- 重试次数(maxRetries)范围：1-5次
+- 超时时间(timeout)范围：10-60秒
+- 所有参数都必须是整数
+
+示例输出格式：
+根据您的需求，我建议...
+
+{
+    "topics": ["话题1", "话题2"],
+    "parameters": {
+        "crawlDepth": 5,
+        "interval": 5,
+        "maxRetries": 3,
+        "timeout": 30
+    }
+}"""
+
+        # 获取AI客户端
+        ai = get_ai_client()
+        
+        try:
+            if ai['type'] == 'anthropic':
+                response = ai['client'].messages.create(
+                    model="claude-3-sonnet-20240229",
+                    max_tokens=1000,
+                    messages=[
+                        {"role": "system", "content": system_prompt},
+                        {"role": "user", "content": prompt}
+                    ]
+                )
+                response_text = response.content[0].text
+            else:  # OpenAI
+                response = ai['client'].chat.completions.create(
+                    model="gpt-3.5-turbo",
+                    messages=[
+                        {"role": "system", "content": system_prompt},
+                        {"role": "user", "content": prompt}
+                    ]
+                )
+                response_text = response.choices[0].message.content
+            
+            # 解析AI响应
+            config, suggestion = parse_ai_response(response_text)
+            
+            return jsonify({
+                'success': True,
+                'config': config,
+                'suggestion': suggestion
+            })
+            
+        except Exception as e:
+            logger.error(f"AI服务调用失败: {e}")
+            return jsonify({
+                'success': False,
+                'message': f"AI配置生成失败: {str(e)}"
+            })
+            
+    except Exception as e:
+        logger.error(f"生成配置失败: {e}")
+        return jsonify({
+            'success': False,
+            'message': str(e)
         }) 
\ No newline at end of file
diff --git a/views/user/__pycache__/user.cpython-38.pyc b/views/user/__pycache__/user.cpython-38.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..696375f953091c955323d386bbc8ad72b33ee8fb
GIT binary patch
literal 2249
zcmbVO-EUMy6rZ_Yd-v`~zkpH^Tt84&OG~QaM+ia1j|WrGLL{5&X1g=nz4YF_>&#rB
zP5WSqga?Vn5EI|FBpQqlP1J<{z&~PMO`(18A811GoVhHtgePx1XFkr{Gv}Q7{m$L<
zrBXoP`SFu)TmSlm{DYI7j|Y=e(Bv%;j4&FJTGrDVg}D`3v0bxcr{=_N&5ga97w2lZ
z*su8%_t{ZC4r+lJJ5eDn){2yHo4LHiJeFhr4X0M-<%<I>&jMDMw^;Fp#Y(Jvm8{a*
zpwSHM&<wI6qZ#7m-T)h3qilrjF)PE2&XDTfE%1{}S3RA7KT3I5gdL@Q!C5GHQ|ST0
zJB*9E;&C@>D6VsYf1PrvwEI!ikPA8|xs+kjsZ#BNLM+0d#Dz%2=UjG^j^x@&B^OKX
zBz8LAw<N2U4pI@-yMnjED|(=>sJD^`j$HC4qhvnpX#3+2&uQoEnVEB7Iu~=*PMB<>
z*Zs$afdlOWX!0u%id>|OE?8n%S<G66IGN3yt7L^J$mBd>-m1Mqm80BcvP@TD$BL!A
zW$5K;m18-418n%rA0sNy{1Ze4EN|=($XPHg%5ci|sBy5~=&-ur^PyB+Ote)TH7RKO
zj|Br4+6**#3WOp(aIOcAt<g2QLYHaJR?bD2*<+-?N{Lx<#>g^R@RF0T$6GUFINqJs
zr3+yrxsdYD!l`3ZZ*04%Y8`!B``w0=mlMIXkGbwNVqVSZT)QFLQ8=eP*=|g|d0czE
z(@YrGUfN}Fr2@UvPAd_y&bRp$7S6-{RxN=**JXUWemPX_x@<)1HzE$g^7g0AcW2MT
z8FKdcTgTpcefBh$3o7Z(e!;`Jq<%J?i^AraZrA~2)ZgngqD2|XnMKG@JbNkRm*p%v
zXv9Q!QRiD>1dh~OojqV&4uc?cknW=nwH{c|92z`W+HcZ5aUx2ZjYyuHc=Xctu;dY-
zweo7EC6c&efaYau>0Yq4`PZ)--`}}={ilufYxjEJY~B2MbA4T)W+|BLHs<+cJAqsk
zvQ&5(#sor20LLLY5nQhJvIDgp@s7x&@);C46bQkpEuMo;yLi5=l`?e5wAloTn6zc$
zklAFk2%{`qE1<sZdqrBNKJl$G6|aD9DL>gq)-J^3m7!+_@qfeM|07;JM!et4E5GNj
z5rCzwf?k37y&}sSm^#Z&uLP%*SpYD7xC$_}S;4Fp0jf@KV2!B3Wt)}8pc=9AXf_+b
z*(iB5AI#?S_NoOIhS<;}W({Y|5<?KuE*2r9kV%F`n6)h6j32-WYua2VpcYeOE~ZKi
zf}cpdxuPSmN1{1Gmk#t3{1jk`3TzS2gGl#-*j)eR-p$*0uix4D;l{?DKQ?due)rGY
z8`r)Q2v{+K0`a@_Wl(wI384-ORe{=?7<3*%h#)`5`;;AT3JzpE7Xl6|ml{xt<&nd3
z-27K}*)xF(OvpApx`q7~hO%8S1vV?1)!{4;FM#4Pj>U^OeF?>36o_H%C^%B*4XJP_
z_MvJN1;#AKP#B;efRVPP5*gZElS=V2tkwz-xoCJ2pqaW#yAc=9;@em;c0eD#E?Kce
z?<C#@$<S{b^ixDXk{^g~`_!X{fc(~d>%J3+W3YEAhcTW>)h<RDD<BLb24R3@c8vhO
zEJhJu2$9!d9axHt)owH5jVzQM4jNYtLA~sdQ?OTJB_Nhh#T4|_5it&($&+?l_!Sg*
z0VXS1vJD3Dmq2z@Ayr`{C(P&36qMRXwzBIxnO%opuOlw%b#0|{+7(F(g%L}EiQPEx
nRCoOoal+DwpF}`NjKHTptyo1`w4jRO-+j*;q`?TZgFgKakG>_0

literal 0
HcmV?d00001

diff --git a/views/user/templates/login_and_register.html b/views/user/templates/login_and_register.html
index 0102aa0..644f712 100644
--- a/views/user/templates/login_and_register.html
+++ b/views/user/templates/login_and_register.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>微博舆情分析系统 | 登录</title>
     <link rel="icon" href="../../../static/原神启动/favicon.ico" />
+    <script src="/static/js/i18n.js"></script>
   </head>
 
   <style>
@@ -287,9 +288,31 @@
     .yanzhengma:hover {
       color: #aa863e;
     }
+
+    /* 添加语言切换按钮样式 */
+    .language-switcher {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      background-color: rgba(255, 255, 255, 0.8);
+      padding: 8px 15px;
+      border-radius: 20px;
+      cursor: pointer;
+      z-index: 1000;
+      font-size: 14px;
+      transition: all 0.3s ease;
+    }
+    
+    .language-switcher:hover {
+      background-color: rgba(255, 255, 255, 1);
+    }
   </style>
 
   <body onclick="playAudio()">
+    <div class="language-switcher" id="language-switcher">
+      <span id="language-text">切换语言</span>
+    </div>
+
     <audio id="audio-player" autoplay class="hide-player">
       <source
         src="https://lovexl-oss.oss-cn-beijing.aliyuncs.com/bed/%E5%8E%9F%E7%A5%9E%E9%A6%96%E9%A1%B5%E8%83%8C%E6%99%AF%E9%9F%B3.mp4"
diff --git a/views/user/user.py b/views/user/user.py
index a044285..beca421 100644
--- a/views/user/user.py
+++ b/views/user/user.py
@@ -1,372 +1,372 @@
-import time
-import hashlib
-from flask import Blueprint, redirect, render_template, request, Flask, session, current_app, make_response
-from datetime import datetime, timedelta
-import re
-from utils.query import query
-from utils.errorResponse import errorResponse
-from utils.logger import app_logger as logging
-from functools import wraps
-import secrets
-from flask_limiter import Limiter
-from flask_limiter.util import get_remote_address
-import redis
-import json
-import bleach
-from argon2 import PasswordHasher
-from argon2.exceptions import VerifyMismatchError
-import html
-
-# 创建Argon2密码哈希器
-ph = PasswordHasher()
-
-# Redis连接
-redis_client = redis.Redis(host='localhost', port=6379, db=0, decode_responses=True)
-
-# 创建限流器
-limiter = Limiter(
-    key_func=get_remote_address,
-    default_limits=["200 per day", "50 per hour"]
-)
-
-ub = Blueprint('user',
-               __name__,
-               url_prefix='/user',
-               template_folder='templates')
-
-def sanitize_input(text):
-    """清理用户输入，防止XSS攻击"""
-    if text is None:
-        return None
-    return bleach.clean(str(text), strip=True)
-
-def validate_csrf_token():
-    """验证CSRF令牌"""
-    token = request.form.get('csrf_token')
-    stored_token = session.get('csrf_token')
-    if not token or not stored_token or token != stored_token:
-        return False
-    return True
-
-def get_client_info():
-    """获取客户端信息"""
-    return {
-        'ip': request.remote_addr,
-        'user_agent': str(request.user_agent.string),
-        'platform': str(request.user_agent.platform),
-        'browser': str(request.user_agent.browser),
-    }
-
-def is_suspicious_ip(ip):
-    """检查IP是否可疑"""
-    key = f"login_attempts:{ip}"
-    attempts = redis_client.get(key)
-    if attempts and int(attempts) >= 5:  # 5次失败尝试
-        return True
-    return False
-
-def record_failed_attempt(ip):
-    """记录失败的登录尝试"""
-    key = f"login_attempts:{ip}"
-    pipe = redis_client.pipeline()
-    pipe.incr(key)
-    pipe.expire(key, 1800)  # 30分钟后重置
-    pipe.execute()
-
-def clear_login_attempts(ip):
-    """清除登录尝试记录"""
-    redis_client.delete(f"login_attempts:{ip}")
-
-def set_secure_headers(response):
-    """设置安全响应头"""
-    response.headers['X-Content-Type-Options'] = 'nosniff'
-    response.headers['X-Frame-Options'] = 'SAMEORIGIN'
-    response.headers['X-XSS-Protection'] = '1; mode=block'
-    response.headers['Strict-Transport-Security'] = 'max-age=31536000; includeSubDomains'
-    response.headers['Content-Security-Policy'] = "default-src 'self'"
-    return response
-
-def login_required(f):
-    @wraps(f)
-    def decorated_function(*args, **kwargs):
-        if 'username' not in session:
-            return redirect('/user/login')
-        
-        # 验证会话完整性
-        if 'client_info' not in session or 'session_id' not in session:
-            session.clear()
-            return redirect('/user/login')
-            
-        # 验证客户端信息
-        current_client = get_client_info()
-        stored_client = session['client_info']
-        
-        if (current_client['ip'] != stored_client['ip'] or 
-            current_client['user_agent'] != stored_client['user_agent']):
-            session.clear()
-            return redirect('/user/login')
-            
-        # 验证会话ID
-        stored_session_id = redis_client.get(f"session:{session['username']}")
-        if not stored_session_id or stored_session_id != session['session_id']:
-            session.clear()
-            return redirect('/user/login')
-            
-        return f(*args, **kwargs)
-    return decorated_function
-
-def hash_password(password: str) -> str:
-    """
-    使用Argon2id算法哈希密码
-    :param password: 用户输入的密码
-    :return: 哈希后的密码
-    """
-    return ph.hash(password)
-
-def verify_password(stored_hash: str, password: str) -> bool:
-    """
-    验证密码
-    :param stored_hash: 存储的密码哈希
-    :param password: 用户输入的密码
-    :return: 是否匹配
-    """
-    try:
-        return ph.verify(stored_hash, password)
-    except VerifyMismatchError:
-        return False
-
-def validate_password(password: str) -> bool:
-    """
-    验证密码强度
-    """
-    if len(password) < 12:  # 增加最小长度要求
-        return False
-    if not re.search(r"[A-Z]", password):
-        return False
-    if not re.search(r"[a-z]", password):
-        return False
-    if not re.search(r"\d", password):
-        return False
-    if not re.search(r"[!@#$%^&*(),.?\":{}|<>]", password):
-        return False
-    # 检查常见密码模式
-    common_patterns = ['password', '123456', 'qwerty']
-    if any(pattern in password.lower() for pattern in common_patterns):
-        return False
-    return True
-
-@ub.route('/login', methods=['GET', 'POST'])
-@limiter.limit("5 per minute")
-def login():
-    """处理用户登录请求"""
-    if request.method == 'GET':
-        response = make_response(render_template('login_and_register.html'))
-        return set_secure_headers(response)
-
-    try:
-        if request.method == 'POST' and not validate_csrf_token():
-            logging.warning("CSRF验证失败")
-            return errorResponse('无效的请求')
-
-        client_ip = request.remote_addr
-        
-        if is_suspicious_ip(client_ip):
-            logging.warning(f"可疑IP尝试登录: {client_ip}")
-            return errorResponse('由于多次失败尝试，请30分钟后再试')
-
-        username = sanitize_input(request.form.get('username'))
-        password = request.form.get('password')  # 密码不需要sanitize
-        
-        if not username or not password:
-            logging.warning("登录失败：用户名或密码为空")
-            return errorResponse('用户名和密码不能为空')
-        
-        # 查询用户信息
-        sql = "SELECT password, status FROM user WHERE username = %s"
-        result = query(sql, [username], "select")
-        
-        if result:
-            stored_password = result[0]['password']
-            status = result[0]['status']
-            
-            if status != 'active':
-                logging.warning(f"已禁用的账户尝试登录: {username}")
-                return errorResponse('账户已被禁用')
-            
-            if verify_password(stored_password, password):
-                session.clear()
-                session.regenerate()
-                
-                # 生成唯一会话ID
-                session_id = secrets.token_hex(32)
-                client_info = get_client_info()
-                
-                # 存储会话信息
-                session['username'] = username
-                session['login_time'] = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
-                session['csrf_token'] = secrets.token_hex(32)
-                session['client_info'] = client_info
-                session['session_id'] = session_id
-                session.permanent = True
-                current_app.permanent_session_lifetime = timedelta(hours=2)
-                
-                # 在Redis中存储会话ID
-                redis_client.setex(
-                    f"session:{username}",
-                    int(current_app.permanent_session_lifetime.total_seconds()),
-                    session_id
-                )
-                
-                clear_login_attempts(client_ip)
-                
-                # 记录登录历史
-                login_history_sql = '''
-                    INSERT INTO login_history 
-                    (username, login_time, ip_address, user_agent, success, attempt_count) 
-                    VALUES (%s, %s, %s, %s, %s, %s)
-                '''
-                query(login_history_sql, [
-                    username,
-                    datetime.now(),
-                    client_info['ip'],
-                    client_info['user_agent'],
-                    True,
-                    redis_client.get(f"login_attempts:{client_ip}") or 0
-                ])
-                
-                logging.info(f"用户 {username} 登录成功")
-                response = make_response(redirect('/page/home'))
-                return set_secure_headers(response)
-        
-        record_failed_attempt(client_ip)
-        logging.warning(f"登录失败：用户名或密码错误")
-        return errorResponse('用户名或密码错误')
-            
-    except Exception as e:
-        logging.error(f"登录过程发生错误: {e}")
-        return errorResponse('登录失败，请稍后重试')
-
-@ub.route('/register', methods=['GET', 'POST'])
-@limiter.limit("3 per hour")
-def register():
-    if request.method == 'GET':
-        response = make_response(render_template('login_and_register.html'))
-        return set_secure_headers(response)
-    
-    try:
-        if request.method == 'POST' and not validate_csrf_token():
-            logging.warning("CSRF验证失败")
-            return errorResponse('无效的请求')
-
-        username = sanitize_input(request.form.get('username'))
-        password = request.form.get('password')
-        email = sanitize_input(request.form.get('email'))
-
-        if not username or not password or not email:
-            return errorResponse('用户名、密码和邮箱不能为空')
-
-        # 验证用户名格式
-        if not re.match(r'^[a-zA-Z0-9_]{4,20}$', username):
-            return errorResponse('用户名只能包含字母、数字和下划线，长度4-20位')
-
-        # 验证邮箱格式
-        if not re.match(r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$', email):
-            return errorResponse('邮箱格式不正确')
-
-        # 验证密码强度
-        if not validate_password(password):
-            return errorResponse('密码必须包含大小写字母、数字和特殊字符，且长度至少12位')
-
-        try:
-            # 检查用户名和邮箱是否存在
-            check_sql = """
-                SELECT 
-                    (SELECT COUNT(*) FROM user WHERE LOWER(username) = LOWER(%s)) as username_count,
-                    (SELECT COUNT(*) FROM user WHERE LOWER(email) = LOWER(%s)) as email_count
-            """
-            result = query(check_sql, [username.lower(), email.lower()], "select")
-            
-            if result[0]['username_count'] > 0:
-                return errorResponse('该用户名已被注册')
-                
-            if result[0]['email_count'] > 0:
-                return errorResponse('该邮箱已被注册')
-
-            # 哈希密码
-            hashed_password = hash_password(password)
-            
-            # 插入新用户
-            insert_sql = '''
-                INSERT INTO user(username, password, email, status, createTime, last_password_change) 
-                VALUES(%s, %s, %s, %s, %s, %s)
-            '''
-            current_time = datetime.now()
-            query(insert_sql, [
-                username, 
-                hashed_password,
-                email,
-                'active',
-                current_time,
-                current_time
-            ])
-            
-            # 记录注册信息
-            client_info = get_client_info()
-            register_history_sql = '''
-                INSERT INTO register_history 
-                (username, register_time, ip_address, user_agent, email) 
-                VALUES (%s, %s, %s, %s, %s)
-            '''
-            query(register_history_sql, [
-                username,
-                current_time,
-                client_info['ip'],
-                client_info['user_agent'],
-                email
-            ])
-            
-            logging.info(f"新用户注册成功: {username}")
-            response = make_response(redirect('/user/login'))
-            return set_secure_headers(response)
-            
-        except Exception as e:
-            logging.error(f"注册过程发生错误: {e}")
-            return errorResponse('注册失败，请稍后重试')
-
-    except Exception as e:
-        logging.error(f"注册过程发生错误: {e}")
-        return errorResponse('注册失败，请稍后重试')
-
-@ub.route('/logout')
-@login_required
-def logout():
-    """用户登出"""
-    try:
-        username = session.get('username')
-        client_info = session.get('client_info', {})
-        
-        # 记录登出历史
-        logout_history_sql = '''
-            INSERT INTO logout_history 
-            (username, logout_time, ip_address, user_agent, session_id) 
-            VALUES (%s, %s, %s, %s, %s)
-        '''
-        query(logout_history_sql, [
-            username,
-            datetime.now(),
-            client_info.get('ip'),
-            client_info.get('user_agent'),
-            session.get('session_id')
-        ])
-        
-        # 删除Redis中的会话
-        redis_client.delete(f"session:{username}")
-        
-        session.clear()
-        logging.info(f"用户 {username} 成功登出")
-        response = make_response(redirect('/user/login'))
-        return set_secure_headers(response)
-    except Exception as e:
-        logging.error(f"登出过程发生错误: {e}")
-        response = make_response(redirect('/user/login'))
-        return set_secure_headers(response)
+import time
+import hashlib
+from flask import Blueprint, redirect, render_template, request, Flask, session, current_app, make_response
+from datetime import datetime, timedelta
+import re
+from utils.query import query
+from utils.errorResponse import errorResponse
+from utils.logger import app_logger as logging
+from functools import wraps
+import secrets
+from flask_limiter import Limiter
+from flask_limiter.util import get_remote_address
+import redis
+import json
+import bleach
+from argon2 import PasswordHasher
+from argon2.exceptions import VerifyMismatchError
+import html
+
+# 创建Argon2密码哈希器
+ph = PasswordHasher()
+
+# Redis连接
+redis_client = redis.Redis(host='localhost', port=6379, db=0, decode_responses=True)
+
+# 创建限流器
+limiter = Limiter(
+    key_func=get_remote_address,
+    default_limits=["200 per day", "50 per hour"]
+)
+
+ub = Blueprint('user',
+               __name__,
+               url_prefix='/user',
+               template_folder='templates')
+
+def sanitize_input(text):
+    """清理用户输入，防止XSS攻击"""
+    if text is None:
+        return None
+    return bleach.clean(str(text), strip=True)
+
+def validate_csrf_token():
+    """验证CSRF令牌"""
+    token = request.form.get('csrf_token')
+    stored_token = session.get('csrf_token')
+    if not token or not stored_token or token != stored_token:
+        return False
+    return True
+
+def get_client_info():
+    """获取客户端信息"""
+    return {
+        'ip': request.remote_addr,
+        'user_agent': str(request.user_agent.string),
+        'platform': str(request.user_agent.platform),
+        'browser': str(request.user_agent.browser),
+    }
+
+def is_suspicious_ip(ip):
+    """检查IP是否可疑"""
+    key = f"login_attempts:{ip}"
+    attempts = redis_client.get(key)
+    if attempts and int(attempts) >= 5:  # 5次失败尝试
+        return True
+    return False
+
+def record_failed_attempt(ip):
+    """记录失败的登录尝试"""
+    key = f"login_attempts:{ip}"
+    pipe = redis_client.pipeline()
+    pipe.incr(key)
+    pipe.expire(key, 1800)  # 30分钟后重置
+    pipe.execute()
+
+def clear_login_attempts(ip):
+    """清除登录尝试记录"""
+    redis_client.delete(f"login_attempts:{ip}")
+
+def set_secure_headers(response):
+    """设置安全响应头"""
+    response.headers['X-Content-Type-Options'] = 'nosniff'
+    response.headers['X-Frame-Options'] = 'SAMEORIGIN'
+    response.headers['X-XSS-Protection'] = '1; mode=block'
+    response.headers['Strict-Transport-Security'] = 'max-age=31536000; includeSubDomains'
+    response.headers['Content-Security-Policy'] = "default-src 'self'"
+    return response
+
+def login_required(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if 'username' not in session:
+            return redirect('/user/login')
+        
+        # 验证会话完整性
+        if 'client_info' not in session or 'session_id' not in session:
+            session.clear()
+            return redirect('/user/login')
+            
+        # 验证客户端信息
+        current_client = get_client_info()
+        stored_client = session['client_info']
+        
+        if (current_client['ip'] != stored_client['ip'] or 
+            current_client['user_agent'] != stored_client['user_agent']):
+            session.clear()
+            return redirect('/user/login')
+            
+        # 验证会话ID
+        stored_session_id = redis_client.get(f"session:{session['username']}")
+        if not stored_session_id or stored_session_id != session['session_id']:
+            session.clear()
+            return redirect('/user/login')
+            
+        return f(*args, **kwargs)
+    return decorated_function
+
+def hash_password(password: str) -> str:
+    """
+    使用Argon2id算法哈希密码
+    :param password: 用户输入的密码
+    :return: 哈希后的密码
+    """
+    return ph.hash(password)
+
+def verify_password(stored_hash: str, password: str) -> bool:
+    """
+    验证密码
+    :param stored_hash: 存储的密码哈希
+    :param password: 用户输入的密码
+    :return: 是否匹配
+    """
+    try:
+        return ph.verify(stored_hash, password)
+    except VerifyMismatchError:
+        return False
+
+def validate_password(password: str) -> bool:
+    """
+    验证密码强度
+    """
+    if len(password) < 12:  # 增加最小长度要求
+        return False
+    if not re.search(r"[A-Z]", password):
+        return False
+    if not re.search(r"[a-z]", password):
+        return False
+    if not re.search(r"\d", password):
+        return False
+    if not re.search(r"[!@#$%^&*(),.?\":{}|<>]", password):
+        return False
+    # 检查常见密码模式
+    common_patterns = ['password', '123456', 'qwerty']
+    if any(pattern in password.lower() for pattern in common_patterns):
+        return False
+    return True
+
+@ub.route('/login', methods=['GET', 'POST'])
+@limiter.limit("5 per minute")
+def login():
+    """处理用户登录请求"""
+    if request.method == 'GET':
+        response = make_response(render_template('login_and_register.html'))
+        return set_secure_headers(response)
+
+    try:
+        if request.method == 'POST' and not validate_csrf_token():
+            logging.warning("CSRF验证失败")
+            return errorResponse('无效的请求')
+
+        client_ip = request.remote_addr
+        
+        if is_suspicious_ip(client_ip):
+            logging.warning(f"可疑IP尝试登录: {client_ip}")
+            return errorResponse('由于多次失败尝试，请30分钟后再试')
+
+        username = sanitize_input(request.form.get('username'))
+        password = request.form.get('password')  # 密码不需要sanitize
+        
+        if not username or not password:
+            logging.warning("登录失败：用户名或密码为空")
+            return errorResponse('用户名和密码不能为空')
+        
+        # 查询用户信息
+        sql = "SELECT password, status FROM user WHERE username = %s"
+        result = query(sql, [username], "select")
+        
+        if result:
+            stored_password = result[0]['password']
+            status = result[0]['status']
+            
+            if status != 'active':
+                logging.warning(f"已禁用的账户尝试登录: {username}")
+                return errorResponse('账户已被禁用')
+            
+            if verify_password(stored_password, password):
+                session.clear()
+                session.regenerate()
+                
+                # 生成唯一会话ID
+                session_id = secrets.token_hex(32)
+                client_info = get_client_info()
+                
+                # 存储会话信息
+                session['username'] = username
+                session['login_time'] = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+                session['csrf_token'] = secrets.token_hex(32)
+                session['client_info'] = client_info
+                session['session_id'] = session_id
+                session.permanent = True
+                current_app.permanent_session_lifetime = timedelta(hours=2)
+                
+                # 在Redis中存储会话ID
+                redis_client.setex(
+                    f"session:{username}",
+                    int(current_app.permanent_session_lifetime.total_seconds()),
+                    session_id
+                )
+                
+                clear_login_attempts(client_ip)
+                
+                # 记录登录历史
+                login_history_sql = '''
+                    INSERT INTO login_history 
+                    (username, login_time, ip_address, user_agent, success, attempt_count) 
+                    VALUES (%s, %s, %s, %s, %s, %s)
+                '''
+                query(login_history_sql, [
+                    username,
+                    datetime.now(),
+                    client_info['ip'],
+                    client_info['user_agent'],
+                    True,
+                    redis_client.get(f"login_attempts:{client_ip}") or 0
+                ])
+                
+                logging.info(f"用户 {username} 登录成功")
+                response = make_response(redirect('/page/home'))
+                return set_secure_headers(response)
+        
+        record_failed_attempt(client_ip)
+        logging.warning(f"登录失败：用户名或密码错误")
+        return errorResponse('用户名或密码错误')
+            
+    except Exception as e:
+        logging.error(f"登录过程发生错误: {e}")
+        return errorResponse('登录失败，请稍后重试')
+
+@ub.route('/register', methods=['GET', 'POST'])
+@limiter.limit("3 per hour")
+def register():
+    if request.method == 'GET':
+        response = make_response(render_template('login_and_register.html'))
+        return set_secure_headers(response)
+    
+    try:
+        if request.method == 'POST' and not validate_csrf_token():
+            logging.warning("CSRF验证失败")
+            return errorResponse('无效的请求')
+
+        username = sanitize_input(request.form.get('username'))
+        password = request.form.get('password')
+        email = sanitize_input(request.form.get('email'))
+
+        if not username or not password or not email:
+            return errorResponse('用户名、密码和邮箱不能为空')
+
+        # 验证用户名格式
+        if not re.match(r'^[a-zA-Z0-9_]{4,20}$', username):
+            return errorResponse('用户名只能包含字母、数字和下划线，长度4-20位')
+
+        # 验证邮箱格式
+        if not re.match(r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$', email):
+            return errorResponse('邮箱格式不正确')
+
+        # 验证密码强度
+        if not validate_password(password):
+            return errorResponse('密码必须包含大小写字母、数字和特殊字符，且长度至少12位')
+
+        try:
+            # 检查用户名和邮箱是否存在
+            check_sql = """
+                SELECT 
+                    (SELECT COUNT(*) FROM user WHERE LOWER(username) = LOWER(%s)) as username_count,
+                    (SELECT COUNT(*) FROM user WHERE LOWER(email) = LOWER(%s)) as email_count
+            """
+            result = query(check_sql, [username.lower(), email.lower()], "select")
+            
+            if result[0]['username_count'] > 0:
+                return errorResponse('该用户名已被注册')
+                
+            if result[0]['email_count'] > 0:
+                return errorResponse('该邮箱已被注册')
+
+            # 哈希密码
+            hashed_password = hash_password(password)
+            
+            # 插入新用户
+            insert_sql = '''
+                INSERT INTO user(username, password, email, status, createTime, last_password_change) 
+                VALUES(%s, %s, %s, %s, %s, %s)
+            '''
+            current_time = datetime.now()
+            query(insert_sql, [
+                username, 
+                hashed_password,
+                email,
+                'active',
+                current_time,
+                current_time
+            ])
+            
+            # 记录注册信息
+            client_info = get_client_info()
+            register_history_sql = '''
+                INSERT INTO register_history 
+                (username, register_time, ip_address, user_agent, email) 
+                VALUES (%s, %s, %s, %s, %s)
+            '''
+            query(register_history_sql, [
+                username,
+                current_time,
+                client_info['ip'],
+                client_info['user_agent'],
+                email
+            ])
+            
+            logging.info(f"新用户注册成功: {username}")
+            response = make_response(redirect('/user/login'))
+            return set_secure_headers(response)
+            
+        except Exception as e:
+            logging.error(f"注册过程发生错误: {e}")
+            return errorResponse('注册失败，请稍后重试')
+
+    except Exception as e:
+        logging.error(f"注册过程发生错误: {e}")
+        return errorResponse('注册失败，请稍后重试')
+
+@ub.route('/logout')
+@login_required
+def logout():
+    """用户登出"""
+    try:
+        username = session.get('username')
+        client_info = session.get('client_info', {})
+        
+        # 记录登出历史
+        logout_history_sql = '''
+            INSERT INTO logout_history 
+            (username, logout_time, ip_address, user_agent, session_id) 
+            VALUES (%s, %s, %s, %s, %s)
+        '''
+        query(logout_history_sql, [
+            username,
+            datetime.now(),
+            client_info.get('ip'),
+            client_info.get('user_agent'),
+            session.get('session_id')
+        ])
+        
+        # 删除Redis中的会话
+        redis_client.delete(f"session:{username}")
+        
+        session.clear()
+        logging.info(f"用户 {username} 成功登出")
+        response = make_response(redirect('/user/login'))
+        return set_secure_headers(response)
+    except Exception as e:
+        logging.error(f"登出过程发生错误: {e}")
+        response = make_response(redirect('/user/login'))
+        return set_secure_headers(response)