【web网页设计】bilibili用户评论情感分析的web网页展示

青鱼鱼

已于 2024-07-23 15:29:32 修改

阅读量480

点赞数 12

分类专栏： web网页设计文章标签： python flask javascript 前端后端自然语言处理

于 2024-07-23 13:30:04 首次发布

本文链接：https://blog.csdn.net/weixin_61207422/article/details/140630416

版权

web网页设计专栏收录该内容

1 篇文章 0 订阅

订阅专栏

模板来源：图表统计模板_站长素材

模型训练：利用bert-base-chinese实现情感预测(weibo_senti_100k 正负情感)

注：链接中我的博文情感预测结果只有-1和1，本文模型预测结果分为七种

数据来源：哔哩哔哩视频、八爪鱼软件（菜的问老师爬虫老是失败怎么办哈哈哈哈老师推荐我用软件爬虫）

网页展示：

可放大查看（很明显第一个页面是我改的，后面俩是我自己做的哈哈哈哈，有被丑到）

完整代码：

所有文件包括已经训练的模型等，放在这个链接里了：

链接：网页模板+完整代码+数据集
提取码：0bze

部分代码展示：

文件路径：

app.py:

# app.py
import pandas as pd
from flask import Flask, render_template, request

from 七类情感预测 import model_7

app = Flask(__name__)


@app.route('/', methods=['GET', 'POST'])
def dis_index():
    return render_template('index.html')


@app.route('/li1', methods=['GET', 'POST'])
def li1():
    return render_template('li1.html')


@app.route('/li2', methods=['GET', 'POST'])
def li2():
    data_path = 'D:\\CodeField\\flaskProject\\static\\data\\bili_3_7情绪_结果.csv'
    df = pd.read_csv(data_path, encoding='utf-8')
    return render_template('li2.html', data=df.to_dict(orient='records'))


@app.route('/li3', methods=['GET', 'POST'])
def li3():
    if request.method == 'POST':
        text = request.form['text_input']
        return render_template('li3.html', result=model_7(text))
    else:  # GET请求
        return render_template('li3.html')  # 显示空白表单供用户输入



if __name__ == '__main__':
    app.run(debug=True)

七类情感预测.py:

# -*- coding: utf-8 -*-
import os

import torch
from transformers import BertTokenizer, BertForSequenceClassification


def model_7(text):
    max_length = 300
    sentiment_mapping = {'厌恶': 0, '喜欢': 1, '害怕': 2, '开心': 3, '惊讶': 4, '愤怒': 5, '难过': 6}
    device = torch.device("cuda" if torch.cuda.is_available() else "cpu")

    tokenizer = BertTokenizer.from_pretrained("bert-base-chinese")
    model = BertForSequenceClassification.from_pretrained("saved_model_7")

    model_folder = 'models/'
    state_dict_path = os.path.join(model_folder, 'saved_model_7.pth')
    if os.path.isfile(state_dict_path):
        model.load_state_dict(torch.load(state_dict_path))

    model.to(device)
    model.eval()

    test_encoding = tokenizer.encode_plus(text, add_special_tokens=True, max_length=max_length,
                                          return_tensors='pt')
    test_input_ids = test_encoding['input_ids'].to(device)
    test_attention_mask = test_encoding['attention_mask'].to(device)

    with torch.no_grad():
        test_output = model(test_input_ids, attention_mask=test_attention_mask)
        prediction = torch.argmax(test_output.logits, dim=1).item()
        predicted_sentiment = list(sentiment_mapping.keys())[list(sentiment_mapping.values()).index(prediction)]
    return predicted_sentiment

index.html / 首页:

注意：页面展示所用的数据都是我自己手动输上去的，而不是后端动态分析数据并传递给前端展示的。

如图，我先自己运行自己写的别的代码，获取每种情绪的评论的被点赞数量，再手动输入到了"data"值中，最后网页展示绘图结果。

后端动态分析数据并传递给前端我试过实现，但距离期末时间太紧就没做，现在也搁置了这个项目，就不了了之了。。。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Home</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="static/tb/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="static/tb/css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="static/tb/css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="static/tb/css/style.min.css" rel="stylesheet">
  <style>

    .map-container{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-container iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
  </style>
</head>

<body class="grey lighten-3">

  <!--Main Navigation-->
  <header>

    <!-- Navbar -->
    <nav class="navbar fixed-top navbar-expand-lg navbar-light white scrolling-navbar">
      <div class="container-fluid">

        <!-- Brand -->
        <a class="navbar-brand waves-effect" href="#" target="_blank">
          <strong class="blue-text">BiliBili视频下群体用户评论情感分析可视化展示</strong>
        </a>

        <!-- Logo (on the right) -->
        <a href="#" class="order-0 order-lg-1 ml-auto d-none d-lg-block">
          <img src="static/tb/img/cloud.png" alt="Logo" height="30" class="d-inline-block align-top">
        </a>

        <!-- Collapse -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

      </div>
    </nav>
    <!-- Navbar -->

    <!-- Sidebar -->
    <div class="sidebar-fixed position-fixed">

      <a class="logo-wrapper waves-effect">
        <img src="static/tb/img/cloud.png" class="img-fluid" alt="">
      </a>

      <div class="list-group list-group-flush">
        <a href="{{ url_for('li1') }}" class="list-group-item active waves-effect">
          <i class="fas fa-chart-pie mr-3"></i>可视化分析
        </a>
        <a href="{{ url_for('li2') }}" class="list-group-item list-group-item-action waves-effect">
          <i class="fas fa-table mr-3"></i>评论列表
        </a>
        <a href="{{ url_for('li3') }}" class="list-group-item list-group-item-action waves-effect">
          <i class="fas fa-map mr-3"></i>情感预测
        </a>
      </div>

    </div>
    <!-- Sidebar -->

  </header>
  <!--Main Navigation-->

  <!--Main layout-->
  <main class="pt-5 mx-lg-5">
    <div class="container-fluid mt-5">

      <!-- Heading 页面标题-->
      <div class="card mb-4 wow fadeIn">

        <!--Card content-->
        <div class="card-body d-sm-flex justify-content-between">

          <h4 class="mb-2 mb-sm-0 pt-1">
            <span>情感分析</span>
          </h4>

          <form class="d-flex justify-content-center">
            <!-- Default input -->
            <input type="search" placeholder="Search" aria-label="Search" class="form-control">
            <button class="btn btn-primary btn-sm my-0 p" type="submit">
              <i class="fas fa-search"></i>
            </button>

          </form>

        </div>

      </div>
      <!-- Heading -->

      <!--Grid row-->
      <div class="row wow fadeIn">

        <!--Grid column-->
        <div class="col-md-9 mb-4">

          <!--Card-->
          <div class="card">

            <!-- Card header -->
            <div class="card-header">情绪-点赞关系</div>

            <!--Card content-->
            <div class="card-body">

              <canvas id="myChart"></canvas>

            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-md-3 mb-4">

          <!--Card-->
          <div class="card mb-4">

            <!-- Card header -->
            <div class="card-header text-center">
              正负情绪-点赞关系
            </div>

            <!--Card content-->
            <div class="card-body">

              <canvas id="pieChart"></canvas>

            </div>

          </div>
          <!--/.Card-->

          <!--Card-->
          <div class="card mb-4">

            <!--Card content-->
            <div class="card-body">

              <!-- List group links -->
              <div class="list-group list-group-flush">
                <a class="list-group-item list-group-item-action waves-effect">正向情绪
                    <span class="badge badge-primary badge-pill pull-right">278</span>
                    <span class="badge badge-success badge-pill pull-right">27%</span>
                </a>
                <a class="list-group-item list-group-item-action waves-effect">负面情绪
                    <span class="badge badge-primary badge-pill pull-right">744</span>
                  <span class="badge badge-danger badge-pill pull-right">73%</span>
                </a>
                <a class="list-group-item list-group-item-action waves-effect">点赞
                    <span class="badge badge-primary badge-pill pull-right">449146</span>
                  <span class="badge badge-success badge-pill pull-right">29%</span>
                </a>
                <a class="list-group-item list-group-item-action waves-effect">点赞
                    <span class="badge badge-primary badge-pill pull-right">1082352</span>
                  <span class="badge badge-danger badge-pill pull-right">71%</span>
                </a>
              </div>
              <!-- List group links -->

            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

      </div>
      <!--Grid row-->

      <!--Grid row-->
      <div class="row wow fadeIn">

        <!--Grid column-->
        <div class="col-lg-6 col-md-6 mb-4">

          <!--Card-->
          <div class="card">

            <!-- Card header -->
            <div class="card-header">Line——情绪分布</div>

            <!--Card content-->
            <div class="card-body">

              <canvas id="lineChart"></canvas>

            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-6 col-md-6 mb-4">

          <!--Card-->
          <div class="card">

            <!-- Card header -->
            <div class="card-header">Rader——情绪分布</div>

            <!--Card content-->
            <div class="card-body">

              <canvas id="radarChart"></canvas>

            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-6 col-md-6 mb-4">

          <!--Card-->
          <div class="card">

            <!-- Card header -->
            <div class="card-header">Pie——情绪分布</div>

            <!--Card content-->
            <div class="card-body">

              <canvas id="doughnutChart"></canvas>

            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-6 col-md-6 mb-4">

          <!--Card-->
          <div class="card">

            <!-- Card header -->
            <div class="card-header">HorizontalBar——词频Top10</div>

            <!--Card content-->
            <div class="card-body">

              <canvas id="horizontalBar"></canvas>

            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->
      </div>
      <!--Grid row-->

      <!--Grid row-->
      <div class="row wow fadeIn">

        <!--Grid column-->
        <div class="col-md-6 mb-4">

          <!--Card-->
          <div class="card">

            <!--Card content-->
            <div class="card-body">

              <!-- Table  -->
              <table class="table table-hover">
                  <!-- Table head -->
                <thead class="blue lighten-4">
                  <tr>
                    <th style="text-align: center;" colspan="11">群体评论 词频 TOP30</th>
                  </tr>
                </thead>
                <!-- Table head -->
                <!-- Table body -->
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                      <td>自己</td>
                      <td>抑郁症</td>
                      <td>抑郁</td>
                      <td>自杀</td>
                      <td>希望</td>
                      <td>孩子</td>
                      <td>朋友</td>
                      <td>父母</td>
                      <td>世界</td>
                      <td>喜欢</td>
                  </tr>
                  <tr>
                    <th scope="row">2</th>
                      <td>生活</td>
                      <td>死</td>
                      <td>情绪</td>
                      <td>痛苦</td>
                      <td>家长</td>
                      <td>哭</td>
                      <td>活着</td>
                      <td>问题</td>
                      <td>生命</td>
                      <td>心理</td>
                  </tr>
                  <tr>
                    <th scope="row">3</th>
                      <td>人生</td>
                      <td>开心</td>
                      <td>大家</td>
                      <td>意义</td>
                      <td>学习</td>
                      <td>工作</td>
                      <td>老师</td>
                      <td>死亡</td>
                      <td>笑</td>
                      <td>时间</td>
                  </tr>
                </tbody>
                <!-- Table body -->
              </table>
              <!-- Table  -->

            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-md-6 mb-4">

          <!--Card-->
          <div class="card">

            <!--Card content-->
            <div class="card-body">

              <!-- Table  -->
              <table class="table table-hover">
                <!-- Table head -->
                <thead class="green lighten-4">
                  <tr>
                      <th style="text-align: center;" colspan="11">单用户评论 词频 TOP5</th>
                  </tr>
                </thead>
                <!-- Table head -->

                <!-- Table body -->
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                        <td>自己</td>
                        <td>抑郁</td>
                        <td>世界</td>
                        <td>情绪</td>
                        <td>状态</td>
                  </tr>
                  <tr>
                    <th scope="row">2</th>
                        <td>自己</td>
                        <td>抑郁症</td>
                        <td>希望</td>
                        <td>朋友</td>
                        <td>经历</td>
                  </tr>
                  <tr>
                    <th scope="row">3</th>
                        <td>想哭</td>
                        <td>自我</td>
                        <td>生活</td>
                        <td>希望</td>
                        <td>倾诉</td>
                  </tr>
                  <tr>
                    <th scope="row">4</th>
                        <td>自己</td>
                        <td>生活</td>
                        <td>患者</td>
                        <td>恐惧</td>
                        <td>倾诉</td>
                  </tr>
                  <tr>
                    <th scope="row">5</th>
                        <td>自我</td>
                        <td>治疗</td>
                        <td>经历</td>
                        <td>朋友</td>
                        <td>生活</td>
                  </tr>
                </tbody>
                <!-- Table body -->
              </table>
              <!-- Table  -->

            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

      </div>
      <!--Grid row-->

    </div>
  </main>
  <!--Main layout-->

  <!--Footer（卡片底部区域）-->
  <footer class="page-footer text-center font-small primary-color-dark darken-2 mt-4 wow fadeIn">

    <!--Call to action-->
    <div class="pt-4">

    </div>
    <!--/.Call to action-->

    <hr class="my-4">

    <!--Copyright-->
    <div class="footer-copyright py-3">希望今天的你也很开心.</div>
    <!--/.Copyright-->

  </footer>
  <!--/.Footer-->

  <!-- SCRIPTS 用于增强页面的交互性和视觉效果-->
  <!-- JQuery -->
  <script type="text/javascript" src="static/tb/js/jquery-3.4.1.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="static/tb/js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="static/tb/js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="static/tb/js/mdb.min.js"></script>
  <!-- Initializations -->
  <script type="text/javascript">
    // Animations initialization
    new WOW().init();
  </script>

<!--
  <script>  // 获取所有的列表项
      const listItems = document.querySelectorAll('.list-group-item');
      // 为每个列表项添加点击事件监听器
      listItems.forEach(item => {
        item.addEventListener('click', function(e) {
          e.preventDefault(); // 阻止默认的链接行为
          // 移除所有活动链接的active类
          listItems.forEach(link => link.classList.remove('active'));
          // 给当前点击的链接添加active类
          this.classList.add('active');
        });
      });
  </script>
-->

  <!-- Charts 画每个图(除了表格)-->
  <script>
    // Bar
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ["厌恶", "喜欢", "害怕", "开心", "惊讶", "愤怒","难过"],
        datasets: [{
          label: '点赞数',
          data: [589810, 252329, 92688, 56783, 140034, 62991, 336863],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)',
              'rgba(128, 128, 0, 0.2)'
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)',
              'rgba(128, 128, 0, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });


    //pie
    var ctxP = document.getElementById("pieChart").getContext('2d');
    var myPieChart = new Chart(ctxP, {
      type: 'pie',
      data: {
        labels: ["点赞 正向情绪", "点赞 负面情绪"],
        datasets: [{
          data: [449146, 1082352],
            backgroundColor: ["#4CAF50", "#FF6384"],
            hoverBackgroundColor: ["#43A047", "#FF454F"],
        }]
      },
      options: {
        responsive: true,
        legend: false
      }
    });


    //line
    var ctxL = document.getElementById("lineChart").getContext('2d');
    var myLineChart = new Chart(ctxL, {
      type: 'line',
      data: {
        labels: ["厌恶", "喜欢", "害怕", "开心", "惊讶", "愤怒","难过"],
        datasets: [{
            label: "情绪数",
            backgroundColor: [
              'rgba(105, 0, 132, .2)',
            ],
            borderColor: [
              'rgba(200, 99, 132, .7)',
            ],
            borderWidth: 2,
            data: [224, 233, 49, 45, 37, 26, 408]
          }
        ]
      },
      options: {
        responsive: true
      }
    });

    //radar
    var ctxR = document.getElementById("radarChart").getContext('2d');
    var myRadarChart = new Chart(ctxR, {
      type: 'radar',
      data: {
        labels: ["开心", "惊讶", "喜欢", "厌恶", "害怕", "愤怒", "难过"],
        datasets: [{
          label: "情绪数",
          data: [45, 37, 233, 224, 49, 37, 408],
          backgroundColor: [
            'rgba(0, 250, 220, .2)',
          ],
          borderColor: [
            'rgba(0, 213, 132, .7)',
          ],
          borderWidth: 2
        }]
      },
      options: {
        responsive: true
      }
    });

    //doughnut
    var ctxD = document.getElementById("doughnutChart").getContext('2d');
    var myLineChart = new Chart(ctxD, {
      type: 'doughnut',
      data: {
        labels: ["厌恶", "喜欢", "害怕", "开心", "惊讶", "愤怒","难过"],
        datasets: [{
          data: [224, 233, 49, 45, 37, 26, 408],
            backgroundColor: ["#FF6384", "#36A2EB", "#FFECD8", "#4BC0C0", "#9966FF", "#FF9F40", "#808000"],
            hoverBackgroundColor: ["#FF7098", "#3CB5F5", "#FFEEEC", "#52C8CC", "#8F70FF", "#FFB179", "#8A8A00"],
        }]
      },
      options: {
        responsive: true
      }
    });

    // Horiznotal Bar
    var ctx = document.getElementById("horizontalBar").getContext('2d');
    var myHoriznotalBar = new Chart(ctx, {
      type: 'horizontalBar',
      data: {
        labels: ["自己", "抑郁症", "抑郁", "自杀", "希望", "孩子","朋友", "父母", "世界", "喜欢"],
        datasets: [{
          label: '词频',
          data: [997, 381, 378, 181, 178, 161, 157, 157, 142, 138],
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
          borderColor: 'rgba(54, 162, 235, 1)',
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          xAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });

  </script>

</body>

</html>

li1.html / 可视化分析:

和index差不多，写li1.html是为了方便跳转和强迫症哈哈哈哈哈

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Home</title>
    <!-- Font Awesome -->
  <link rel="stylesheet" href="static/tb/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="static/tb/css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="static/tb/css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="static/tb/css/style.min.css" rel="stylesheet">
  <style>

    .map-container{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-container iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
  </style>
</head>

<body class="grey lighten-3">

  <!--Main Navigation-->
  <header>

    <!-- Navbar -->
    <nav class="navbar fixed-top navbar-expand-lg navbar-light white scrolling-navbar">
      <div class="container-fluid">

        <!-- Brand -->
        <a class="navbar-brand waves-effect" href="#" target="_blank">
          <strong class="blue-text">BiliBili视频下群体用户评论情感分析可视化展示</strong>
        </a>

        <!-- Logo (on the right) -->
        <a href="#" class="order-0 order-lg-1 ml-auto d-none d-lg-block">
          <img src="static/tb/img/cloud.png" alt="Logo" height="30" class="d-inline-block align-top">
        </a>

        <!-- Collapse -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

      </div>
    </nav>
    <!-- Navbar -->

    <!-- Sidebar -->
    <div class="sidebar-fixed position-fixed">

      <a class="logo-wrapper waves-effect">
        <img src="static/tb/img/cloud.png" class="img-fluid" alt="">
      </a>

      <div class="list-group list-group-flush">
        <a href="{{ url_for('li1') }}" class="list-group-item active waves-effect">
          <i class="fas fa-chart-pie mr-3"></i>可视化分析
        </a>
        <a href="{{ url_for('li2') }}" class="list-group-item list-group-item-action waves-effect">
          <i class="fas fa-table mr-3"></i>评论列表
        </a>
        <a href="{{ url_for('li3') }}" class="list-group-item list-group-item-action waves-effect">
          <i class="fas fa-map mr-3"></i>情感预测
        </a>
      </div>

    </div>
    <!-- Sidebar -->

  </header>
  <!--Main Navigation-->

  <!--Main layout-->
  <main class="pt-5 mx-lg-5">
    <div class="container-fluid mt-5">

      <!-- Heading 页面标题-->
      <div class="card mb-4 wow fadeIn">

        <!--Card content-->
        <div class="card-body d-sm-flex justify-content-between">

          <h4 class="mb-2 mb-sm-0 pt-1">
            <span>情感分析</span>
          </h4>

          <form class="d-flex justify-content-center">
            <!-- Default input -->
            <input type="search" placeholder="Search" aria-label="Search" class="form-control">
            <button class="btn btn-primary btn-sm my-0 p" type="submit">
              <i class="fas fa-search"></i>
            </button>

          </form>

        </div>

      </div>
      <!-- Heading -->

      <!--Grid row-->
      <div class="row wow fadeIn">

        <!--Grid column-->
        <div class="col-md-9 mb-4">

          <!--Card-->
          <div class="card">

            <!-- Card header -->
            <div class="card-header">情绪-点赞关系</div>

            <!--Card content-->
            <div class="card-body">

              <canvas id="myChart"></canvas>

            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-md-3 mb-4">

          <!--Card-->
          <div class="card mb-4">

            <!-- Card header -->
            <div class="card-header text-center">
              正负情绪-点赞关系
            </div>

            <!--Card content-->
            <div class="card-body">

              <canvas id="pieChart"></canvas>

            </div>

          </div>
          <!--/.Card-->

          <!--Card-->
          <div class="card mb-4">

            <!--Card content-->
            <div class="card-body">

              <!-- List group links -->
              <div class="list-group list-group-flush">
                <a class="list-group-item list-group-item-action waves-effect">正向情绪
                    <span class="badge badge-primary badge-pill pull-right">278</span>
                    <span class="badge badge-success badge-pill pull-right">27%</span>
                </a>
                <a class="list-group-item list-group-item-action waves-effect">负面情绪
                    <span class="badge badge-primary badge-pill pull-right">744</span>
                  <span class="badge badge-danger badge-pill pull-right">73%</span>
                </a>
                <a class="list-group-item list-group-item-action waves-effect">点赞
                    <span class="badge badge-primary badge-pill pull-right">449146</span>
                  <span class="badge badge-success badge-pill pull-right">29%</span>
                </a>
                <a class="list-group-item list-group-item-action waves-effect">点赞
                    <span class="badge badge-primary badge-pill pull-right">1082352</span>
                  <span class="badge badge-danger badge-pill pull-right">71%</span>
                </a>
              </div>
              <!-- List group links -->

            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

      </div>
      <!--Grid row-->

      <!--Grid row-->
      <div class="row wow fadeIn">

        <!--Grid column-->
        <div class="col-lg-6 col-md-6 mb-4">

          <!--Card-->
          <div class="card">

            <!-- Card header -->
            <div class="card-header">Line——情绪分布</div>

            <!--Card content-->
            <div class="card-body">

              <canvas id="lineChart"></canvas>

            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-6 col-md-6 mb-4">

          <!--Card-->
          <div class="card">

            <!-- Card header -->
            <div class="card-header">Rader——情绪分布</div>

            <!--Card content-->
            <div class="card-body">

              <canvas id="radarChart"></canvas>

            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-6 col-md-6 mb-4">

          <!--Card-->
          <div class="card">

            <!-- Card header -->
            <div class="card-header">Pie——情绪分布</div>

            <!--Card content-->
            <div class="card-body">

              <canvas id="doughnutChart"></canvas>

            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-6 col-md-6 mb-4">

          <!--Card-->
          <div class="card">

            <!-- Card header -->
            <div class="card-header">HorizontalBar——词频Top10</div>

            <!--Card content-->
            <div class="card-body">

              <canvas id="horizontalBar"></canvas>

            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->
      </div>
      <!--Grid row-->

      <!--Grid row-->
      <div class="row wow fadeIn">

        <!--Grid column-->
        <div class="col-md-6 mb-4">

          <!--Card-->
          <div class="card">

            <!--Card content-->
            <div class="card-body">

              <!-- Table  -->
              <table class="table table-hover">
                  <!-- Table head -->
                <thead class="blue lighten-4">
                  <tr>
                    <th style="text-align: center;" colspan="11">群体评论 词频 TOP30</th>
                  </tr>
                </thead>
                <!-- Table head -->
                <!-- Table body -->
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                      <td>自己</td>
                      <td>抑郁症</td>
                      <td>抑郁</td>
                      <td>自杀</td>
                      <td>希望</td>
                      <td>孩子</td>
                      <td>朋友</td>
                      <td>父母</td>
                      <td>世界</td>
                      <td>喜欢</td>
                  </tr>
                  <tr>
                    <th scope="row">2</th>
                      <td>生活</td>
                      <td>死</td>
                      <td>情绪</td>
                      <td>痛苦</td>
                      <td>家长</td>
                      <td>哭</td>
                      <td>活着</td>
                      <td>问题</td>
                      <td>生命</td>
                      <td>心理</td>
                  </tr>
                  <tr>
                    <th scope="row">3</th>
                      <td>人生</td>
                      <td>开心</td>
                      <td>大家</td>
                      <td>意义</td>
                      <td>学习</td>
                      <td>工作</td>
                      <td>老师</td>
                      <td>死亡</td>
                      <td>笑</td>
                      <td>时间</td>
                  </tr>
                </tbody>
                <!-- Table body -->
              </table>
              <!-- Table  -->

            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-md-6 mb-4">

          <!--Card-->
          <div class="card">

            <!--Card content-->
            <div class="card-body">

              <!-- Table  -->
              <table class="table table-hover">
                <!-- Table head -->
                <thead class="green lighten-4">
                  <tr>
                      <th style="text-align: center;" colspan="11">单用户评论 词频 TOP5</th>
                  </tr>
                </thead>
                <!-- Table head -->

                <!-- Table body -->
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                        <td>自己</td>
                        <td>抑郁</td>
                        <td>世界</td>
                        <td>情绪</td>
                        <td>状态</td>
                  </tr>
                  <tr>
                    <th scope="row">2</th>
                        <td>自己</td>
                        <td>抑郁症</td>
                        <td>希望</td>
                        <td>朋友</td>
                        <td>经历</td>
                  </tr>
                  <tr>
                    <th scope="row">3</th>
                        <td>想哭</td>
                        <td>自我</td>
                        <td>生活</td>
                        <td>希望</td>
                        <td>倾诉</td>
                  </tr>
                  <tr>
                    <th scope="row">4</th>
                        <td>自己</td>
                        <td>生活</td>
                        <td>患者</td>
                        <td>恐惧</td>
                        <td>倾诉</td>
                  </tr>
                  <tr>
                    <th scope="row">5</th>
                        <td>自我</td>
                        <td>治疗</td>
                        <td>经历</td>
                        <td>朋友</td>
                        <td>生活</td>
                  </tr>
                </tbody>
                <!-- Table body -->
              </table>
              <!-- Table  -->

            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

      </div>
      <!--Grid row-->

    </div>
  </main>
  <!--Main layout-->

  <!--Footer（卡片底部区域）-->
  <footer class="page-footer text-center font-small primary-color-dark darken-2 mt-4 wow fadeIn">

    <!--Call to action-->
    <div class="pt-4">

    </div>
    <!--/.Call to action-->

    <hr class="my-4">

    <!--Copyright-->
    <div class="footer-copyright py-3">希望今天的你也很开心.</div>
    <!--/.Copyright-->

  </footer>
  <!--/.Footer-->

  <!-- SCRIPTS 用于增强页面的交互性和视觉效果-->
  <!-- JQuery -->
  <script type="text/javascript" src="static/tb/js/jquery-3.4.1.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="static/tb/js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="static/tb/js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="static/tb/js/mdb.min.js"></script>
  <!-- Initializations -->
  <script type="text/javascript">
    // Animations initialization
    new WOW().init();
  </script>

<!--
  <script>  // 获取所有的列表项
      const listItems = document.querySelectorAll('.list-group-item');
      // 为每个列表项添加点击事件监听器
      listItems.forEach(item => {
        item.addEventListener('click', function(e) {
          e.preventDefault(); // 阻止默认的链接行为
          // 移除所有活动链接的active类
          listItems.forEach(link => link.classList.remove('active'));
          // 给当前点击的链接添加active类
          this.classList.add('active');
        });
      });
  </script>
-->

  <!-- Charts 画每个图(除了表格)-->
  <script>
    // Bar
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ["厌恶", "喜欢", "害怕", "开心", "惊讶", "愤怒","难过"],
        datasets: [{
          label: '点赞数',
          data: [589810, 252329, 92688, 56783, 140034, 62991, 336863],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)',
              'rgba(128, 128, 0, 0.2)'
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)',
              'rgba(128, 128, 0, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });


    //pie
    var ctxP = document.getElementById("pieChart").getContext('2d');
    var myPieChart = new Chart(ctxP, {
      type: 'pie',
      data: {
        labels: ["点赞 正向情绪", "点赞 负面情绪"],
        datasets: [{
          data: [449146, 1082352],
            backgroundColor: ["#4CAF50", "#FF6384"],
            hoverBackgroundColor: ["#43A047", "#FF454F"],
        }]
      },
      options: {
        responsive: true,
        legend: false
      }
    });


    //line
    var ctxL = document.getElementById("lineChart").getContext('2d');
    var myLineChart = new Chart(ctxL, {
      type: 'line',
      data: {
        labels: ["厌恶", "喜欢", "害怕", "开心", "惊讶", "愤怒","难过"],
        datasets: [{
            label: "情绪数",
            backgroundColor: [
              'rgba(105, 0, 132, .2)',
            ],
            borderColor: [
              'rgba(200, 99, 132, .7)',
            ],
            borderWidth: 2,
            data: [224, 233, 49, 45, 37, 26, 408]
          }
        ]
      },
      options: {
        responsive: true
      }
    });

    //radar
    var ctxR = document.getElementById("radarChart").getContext('2d');
    var myRadarChart = new Chart(ctxR, {
      type: 'radar',
      data: {
        labels: ["开心", "惊讶", "喜欢", "厌恶", "害怕", "愤怒", "难过"],
        datasets: [{
          label: "情绪数",
          data: [45, 37, 233, 224, 49, 37, 408],
          backgroundColor: [
            'rgba(0, 250, 220, .2)',
          ],
          borderColor: [
            'rgba(0, 213, 132, .7)',
          ],
          borderWidth: 2
        }]
      },
      options: {
        responsive: true
      }
    });

    //doughnut
    var ctxD = document.getElementById("doughnutChart").getContext('2d');
    var myDoughnutChart = new Chart(ctxD, {
      type: 'doughnut',
      data: {
        labels: ["厌恶", "喜欢", "害怕", "开心", "惊讶", "愤怒","难过"],
        datasets: [{
          data: [224, 233, 49, 45, 37, 26, 408],
            backgroundColor: ["#FF6384", "#36A2EB", "#FFECD8", "#4BC0C0", "#9966FF", "#FF9F40", "#808000"],
            hoverBackgroundColor: ["#FF7098", "#3CB5F5", "#FFEEEC", "#52C8CC", "#8F70FF", "#FFB179", "#8A8A00"],
        }]
      },
      options: {
        responsive: true
      }
    });

    // Horiznotal Bar
    var ctxH = document.getElementById("horizontalBar").getContext('2d');
    var myHoriznotalBar = new Chart(ctxH, {
      type: 'horizontalBar',
      data: {
        labels: ["自己", "抑郁症", "抑郁", "自杀", "希望", "孩子","朋友", "父母", "世界", "喜欢"],
        datasets: [{
          label: '词频',
          data: [997, 381, 378, 181, 178, 161, 157, 157, 142, 138],
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
          borderColor: 'rgba(54, 162, 235, 1)',
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          xAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });

  </script>

</body>

</html>

li2.html / 评论列表:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Home</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="static/tb/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="static/tb/css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="static/tb/css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="static/tb/css/style.min.css" rel="stylesheet">

  <style>
    .map-container{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-container iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
.table-container {
    max-width: 100%; /* 限制表格容器的最大宽度，使其不超过父元素宽度 */
    max-height: 540px; /* 限制高度，根据需求调整数值 */
    overflow-x: auto; /* 当内容宽度超过容器宽度时，启用水平滚动条 */
    overflow-y: auto;
    box-sizing: border-box; /* 包括边框和内边距在内计算宽度和高度 */
    padding: 10px; /* 添加内边距 */
    margin: auto; /* 居中对齐 */
    border: 1px solid #ccc; /* 边框 */
}
/* 为了防止表格头在滚动时与内容分离，可以使用以下样式 */
.table-container table {
    width: 100%; /* 表格宽度填充整个容器 */
    table-layout: fixed; /* 固定列宽，避免内容宽度影响列宽 */
    border-collapse: collapse; /* 合并相邻单元格的边框 */
}
.table-container th:first-child,
.table-container td:first-child {
    width: 16%; /* 第一列 */
}
.table-container th:nth-child(2),
.table-container td:nth-child(2) {
    width: 66%; /* 第二列 */
}
.table-container th:nth-child(3),
.table-container td:nth-child(3) {
    width: 10%; /* 第三列 */
}
.table-container th:nth-child(4),
.table-container td:nth-child(4) {
    width: 8%; /* 第四列 */
}
.table-container thead tr,
.table-container tbody {
    display: table; /* 保持thead和tbody作为表格的一部分 */
    width: 100%; /* 宽度填充整个表格容器 */
    table-layout: fixed; /* 与表格相同，固定列宽 */
}
.table-container th,
.table-container td {
    border: 1px solid #ccc; /* 给每个单元格添加边框 */
    padding: 8px 16px; /* 内边距，提升阅读体验 */
    overflow: hidden; /* 避免内容溢出，隐藏超出部分 */
    text-overflow: ellipsis; /* 当内容超出时，使用省略号表示 */
    white-space: nowrap; /* 防止内容换行 */
}
.table-container th {
    font-size: 20px;
    text-align: left; /* 标题左对齐 */
}

.table-container td {
    font-size: 18px;
}
  </style>
</head>

<body class="grey lighten-3">

  <!--Main Navigation-->
  <header>

    <!-- Navbar -->
    <nav class="navbar fixed-top navbar-expand-lg navbar-light white scrolling-navbar">
      <div class="container-fluid">

        <!-- Brand -->
        <a class="navbar-brand waves-effect" href="#" target="_blank">
          <strong class="blue-text">BiliBili视频下群体用户评论内容展示</strong>
        </a>

        <!-- Logo (on the right) -->
        <a href="#" class="order-0 order-lg-1 ml-auto d-none d-lg-block">
          <img src="static/tb/img/cloud.png" alt="Logo" height="30" class="d-inline-block align-top">
        </a>

        <!-- Collapse -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

      </div>
    </nav>
    <!-- Navbar -->

    <!-- Sidebar -->
    <div class="sidebar-fixed position-fixed">

      <a class="logo-wrapper waves-effect">
        <img src="static/tb/img/cloud.png" class="img-fluid" alt="">
      </a>

      <div class="list-group list-group-flush">
        <a href="{{ url_for('li1') }}" class="list-group-item list-group-item-action waves-effect">
          <i class="fas fa-chart-pie mr-3"></i>可视化分析
        </a>
        <a href="{{ url_for('li2') }}" class="list-group-item active waves-effect">
          <i class="fas fa-table mr-3"></i>评论列表
        </a>
        <a href="{{ url_for('li3') }}" class="list-group-item list-group-item-action waves-effect">
          <i class="fas fa-map mr-3"></i>情感预测
        </a>
      </div>

    </div>
    <!-- Sidebar -->

  </header>
  <!--Main Navigation-->

  <!--Main layout-->
  <main class="pt-5 mx-lg-5">
    <div class="container-fluid mt-5">

      <!--Grid row-->
      <div class="row wow fadeIn">

            <div class="card">
              <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                {% for column in data[0].keys() %}
                                    <th>{{ column }}</th>
                                {% endfor %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in data %}
                                <tr>
                                    {% for value in row.values() %}
                                        <td>{{ value }}</td>
                                    {% endfor %}
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

      </div>
      <!--Grid row-->


    </div>
  </main>
  <!--Main layout-->

  <!--Footer（卡片底部区域）-->
  <footer class="page-footer text-center font-small primary-color-dark darken-2 mt-4 wow fadeIn">

    <!--Call to action-->
    <div class="pt-4">

    </div>
    <!--/.Call to action-->

    <hr class="my-4">

    <!--Copyright-->
    <div class="footer-copyright py-3">希望今天的你也很开心.</div>
    <!--/.Copyright-->

  </footer>
  <!--/.Footer-->

  <!-- SCRIPTS 用于增强页面的交互性和视觉效果-->
  <!-- JQuery -->
  <script type="text/javascript" src="static/tb/js/jquery-3.4.1.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="static/tb/js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="static/tb/js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="static/tb/js/mdb.min.js"></script>
  <!-- Initializations -->
  <script type="text/javascript">
    // Animations initialization
    new WOW().init();
  </script>

</body>

</html>

li3.html / 情感预测:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Home</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="static/tb/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="static/tb/css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="static/tb/css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="static/tb/css/style.min.css" rel="stylesheet">

  <style>
    .map-container{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-container iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
.form-container {
            width: 350px; /* 调整宽度以适应你的需求 */
            margin: auto; /* 居中显示 */
        }

.form-container label {
            float: left; /* 让标签浮动到左侧 */
            font-size: 18px;
        }

.form-container textarea {
            float: left; /* 让文本框浮动到左侧 */
            width: 100%;
            box-sizing: border-box;
            padding: 5px;
            resize: vertical; /* 允许垂直调整大小 */
        }

.form-container button {
            clear: both; /* 清除浮动，让按钮居中 */
            display: block;
            width: 100%;
            margin-top: 10px;
        }

.card-ccc {
    width: 1050px; /* 设置卡片宽度 */
    height: 540px; /* 设置卡片高度 */
    margin: auto; /* 使卡片居中显示 */
    position: relative; /* 用于子元素的绝对定位 */
    padding: 1rem; /* 添加内边距，可根据需要调整 */
    background-color: #f9f9f9; /* 示例背景色，可自定义 */
    border-radius: 4px; /* 示例圆角，可自定义 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 示例阴影，可自定义 */
}

.card-ccc form {
    text-align: center; /* 使表单内容居中 */
}

.card-ccc h2 {
    margin-top: 1rem; /* 示例标题与输入框之间的间距，可自定义 */
}

.card-ccc p {
    margin: 0.5rem 0; /* 示例段落上下间距，可自定义 */
}
  </style>

</head>

<body class="grey lighten-3">

  <!--Main Navigation-->
  <header>

    <!-- Navbar -->
    <nav class="navbar fixed-top navbar-expand-lg navbar-light white scrolling-navbar">
      <div class="container-fluid">

        <!-- Brand -->
        <a class="navbar-brand waves-effect" href="#" target="_blank">
          <strong class="blue-text">情感倾向预测</strong>
        </a>

        <!-- Logo (on the right) -->
        <a href="#" class="order-0 order-lg-1 ml-auto d-none d-lg-block">
          <img src="static/tb/img/cloud.png" alt="Logo" height="30" class="d-inline-block align-top">
        </a>

        <!-- Collapse -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

      </div>
    </nav>
    <!-- Navbar -->

    <!-- Sidebar -->
    <div class="sidebar-fixed position-fixed">

      <a class="logo-wrapper waves-effect">
        <img src="static/tb/img/cloud.png" class="img-fluid" alt="">
      </a>

      <div class="list-group list-group-flush">
        <a href="{{ url_for('li1') }}" class="list-group-item list-group-item-action waves-effect">
          <i class="fas fa-chart-pie mr-3"></i>可视化分析
        </a>
        <a href="{{ url_for('li2') }}" class="list-group-item list-group-item-action waves-effect">
          <i class="fas fa-table mr-3"></i>评论列表
        </a>
        <a href="{{ url_for('li3') }}" class="list-group-item active waves-effect">
          <i class="fas fa-map mr-3"></i>情感预测
        </a>
      </div>

    </div>
    <!-- Sidebar -->

  </header>
  <!--Main Navigation-->

  <!--Main layout-->
  <main class="pt-5 mx-lg-5">
    <div class="container-fluid mt-5">

      <!--Grid row-->
      <div class="row wow fadeIn">
            <div class="card">
                <div class="card-ccc">
                    <style>        .card-ccc {
                            background-color: #ffffff;
                            border-radius: 8px;
                            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                            padding: 20px;
                            margin: 0 auto;
                        }
                        .form-container {
                            display: flex;
                            flex-direction: column;
                            gap: 10px;
                        }
                        .rounded-bold {
                            font-family: Arial, sans-serif; /* 使用你喜欢的字体 */
                            font-weight: bold; /* 加粗字体 */
                            font-size: 18px; /* 可以根据需要调整字体大小 */
                            line-height: 1.5; /* 增加行高，使文字看起来更圆润 */
                            letter-spacing: 0.05em; /* 增加字母间距，让文字更美观 */
                            text-align: center;
                        }
                        textarea {
                            width: 100%;
                            min-height: 100px;
                            border-radius: 4px;
                            border: 1px solid #ddd;
                            padding: 8px;
                            resize: vertical;
                        }
                        button {
                            width: 100%;
                            padding: 10px;
                            border: none;
                            border-radius: 4px;
                            background-color: rgba(0, 55, 255, 0.71);
                            color: white;
                            cursor: pointer;
                            transition: background-color 0.3s ease;
                        }
                        button:hover {
                            background-color: rgba(0, 55, 255, 0.9);
                        }
                        h2 {
                            margin-top: 22px;
                            text-align: center;
                            color: rgba(0, 55, 255, 0.74);
                        }
                        p {
                            text-align: center;
                            font-size: 16px;
                            color: rgba(0, 55, 255, 0.78);
                            margin: 10px 0;
                        }
                     </style>

                    <div class="form-container">
                            <form action="{{ url_for('li3') }}" method="post">
                                <label for="text_input">请输入文本:</label>
                                <textarea id="text_input" name="text_input" rows="3" cols="52" required></textarea>
                                <button type="submit">分析情感</button>
                            </form>
                            {% if result %}
                                <h2 class="rounded-bold">预测结果: {{ result }}</h2>
                            {% endif %}
                            {% if result == '厌恶' %}
                                <p>没关系，让我们一起避开那些不愉快的事物，寻找更美好的感受吧。</p>
                            {% elif result == '喜欢' %}
                                <p>很高兴你喜欢！这份喜悦值得我们好好珍惜，未来还有更多美好等着我们发现。</p>
                            {% elif result == '害怕' %}
                                <p>别怕，我在这里，我们一起面对，勇敢一点，每一步都比想象中坚强。</p>
                            {% elif result == '开心' %}
                                <p>看到你开心，我也感到无比快乐！继续保持这份笑容，让快乐延续下去吧！</p>
                            {% elif result == '惊讶' %}
                                <p>哇，没想到吧！生活总是充满惊喜，让我们带着好奇心继续探索这奇妙的世界。</p>
                            {% elif result == '愤怒' %}
                                <p>深呼吸，生气是正常的，但不要让它控制你。我们一起找寻解决问题的方法，冷静下来，事情会变得更好。</p>
                            {% elif result == '难过' %}
                                <p>感到难过的时候，记得你不是一个人。我在这里陪伴你，让我们慢慢走过这段，明天又是新的一天。</p>
                            {% endif %}
                        </div>
                </div>
            </div>

      </div>
      <!--Grid row-->


    </div>
  </main>
  <!--Main layout-->

  <!--Footer（卡片底部区域）-->
  <footer class="page-footer text-center font-small primary-color-dark darken-2 mt-4 wow fadeIn">

    <!--Call to action-->
    <div class="pt-4">

    </div>
    <!--/.Call to action-->

    <hr class="my-4">

    <!--Copyright-->
    <div class="footer-copyright py-3">希望今天的你也很开心.</div>
    <!--/.Copyright-->

  </footer>
  <!--/.Footer-->

  <!-- SCRIPTS 用于增强页面的交互性和视觉效果-->
  <!-- JQuery -->
  <script type="text/javascript" src="static/tb/js/jquery-3.4.1.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="static/tb/js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="static/tb/js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="static/tb/js/mdb.min.js"></script>
  <!-- Initializations -->
  <script type="text/javascript">
    // Animations initialization
    new WOW().init();
  </script>

</body>

</html>

再次强调：因为原文件太大无法上传，所以这里只展示了部分代码，直接用这些代码运行是不行的，仅供参考（和水字数嘿嘿嘿）

所有文件链接↓

链接：网页模板+完整代码+数据集
提取码：0bze