updated

DallasAutumn · Dec 31, 2019 · 107b13a · 107b13a
1 parent 7efbcfa
commit 107b13a
Show file tree

Hide file tree

Showing 14 changed files with 327 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,29 @@
-# audio_emotion
-闻声知乐
+# 闻声知乐
+
+## 1. 项目架构
+### 1.1 数据与模型训练
+使用了CASIA情感语音数据集，pytorch搭建深度学习模型进行训练。
+- extract_features.py：封装了提取音频特征的方法。
+- transforms.py：提取出的特征输入模型前进行的变换。
+- dataset.py：构建数据集的方法和类。
+- augmentation.py：对数据增强的一些方法。
+- models.ipynb：训练、保存模型。模型存放在pickles目录下。
+
+### 1.2 系统
+本系统采用前后端分离SPA（单页面应用）模式，位于app文件夹中：
+- 前端：使用vue.js，实现了接受音频上传的组件，并将音频流向后端发送。
+- 后端：使用python+flask，部署模型，接受来自前端的音频流进行预测。
+
+前后端分别位于app/frontend和app/backend中。
+
+后端主要代码实现在app/app.py中。
+
+## 2. 课程知识的体现
+- 面向对象设计：对于数据集类、变换类的封装。
+- 并行与并发：读取数据集时，使用多线程并发，cpu负载达到100%，大约节省100s时间。
+- etc……
+
+## ３. Some Details
+- tutorials文件夹：里面记录了我的一些学习过程，还有相关资料。
+- 略有遗憾的地方：前端经验不够丰富，没有想到颜值比较高的方法来渲染预测结果。。。
+- **原创性声明：除了某些前端组件，其余均为自己实现。**
diff --git a/__pycache__/models.cpython-37.pyc b/__pycache__/models.cpython-37.pyc
diff --git a/app/frontend/index.html b/app/frontend/index.html
@@ -1,12 +1,51 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>frontend</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>语音情感分类系统</title>
+  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
+  <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
+  <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
+  <style>
+  </style>
+</head>
+
+<body>
+  <nav class="navbar navbar-default" role="navigation">
+    <div class="container-fluid">
+      <div class="navbar-header">
+        <a class="navbar-brand" href="https://github.com/DallasAutumn/audio_emotion">项目地址</a>
+      </div>
+      <div>
+        <ul class="nav navbar-nav">
+          <li class="active"><a href="http://zhaojichang.cn">团队主页</a></li>
+          <li><a href="/">机器学习——从入门到转前端开发</a></li>
+          <li class="dropdown">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+              参考资料
+              <b class="caret"></b>
+            </a>
+            <ul class="dropdown-menu">
+              <li><a href="https://pytorch.org">pytorch docs</a></li>
+              <li><a href="https://towardsdatascience.com/">Towards Data Science</a></li>
+              <li><a href="https://github.com/Di-Weng">翁迪</a></li>
+              <!-- <li class="divider"></li>
+              <li><a href="#">分离的链接</a></li>
+              <li class="divider"></li>
+              <li><a href="#">另一个分离的链接</a></li> -->
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  <div id="app">
+    <img src="./src/assets/img/logo.png">
+    <router-view />
+  </div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>
diff --git a/app/frontend/package-lock.json b/app/frontend/package-lock.json
diff --git a/app/frontend/package.json b/app/frontend/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "swiper": "^5.2.1",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
     "vue-simple-uploader": "^0.7.4"
@@ -53,6 +54,8 @@
     "rimraf": "^2.6.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
+    "stylus": "^0.54.7",
+    "stylus-loader": "^3.0.2",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.3.0",

diff --git a/app/frontend/src/App.vue b/app/frontend/src/App.vue
@@ -1,17 +1,25 @@
 <template>
-  <uploader :options="options" class="uploader-example">
-    <uploader-unsupport></uploader-unsupport>
-    <uploader-drop>
-      <p>Drop files here to upload or</p>
-      <uploader-btn>select files</uploader-btn>
-      <uploader-btn :attrs="attrs">select images</uploader-btn>
-      <uploader-btn :directory="true">select folder</uploader-btn>
-    </uploader-drop>
-    <uploader-list></uploader-list>
-  </uploader>
+  <div class="uploader">
+    <uploader :options="options" class="uploader-example">
+      <uploader-unsupport></uploader-unsupport>
+      <uploader-drop>
+        <h2>上传文件</h2>
+        <h5>选择或拖动文件（文件夹）到此处</h5>
+        <uploader-btn>选择文件</uploader-btn>
+        <uploader-btn :attrs="attrs">选择图片</uploader-btn>
+        <uploader-btn :directory="true">选择文件夹</uploader-btn>
+      </uploader-drop>
+      <uploader-list></uploader-list>
+    </uploader>
+
+    <div class="result"></div>
+  </div>
 </template>
 
 <script>
+import axios from "axios";
+import Swiper from "swiper";
+
 export default {
   data() {
     return {
@@ -24,6 +32,10 @@ export default {
         accept: "image/*"
       }
     };
+  },
+
+  methods: {
+    getPredFromBackend() {}
   }
 };
 </script>
@@ -35,6 +47,8 @@ export default {
   margin: 40px auto 0;
   font-size: 12px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+  background: url(./assets/img/buaa.jpeg) no-repeat;
+  background-size: 100% 100%;
 }
 .uploader-example .uploader-btn {
   margin-right: 4px;
@@ -45,4 +59,12 @@ export default {
   overflow-x: hidden;
   overflow-y: auto;
 }
+.uploader-example .uploader-drop {
+  text-align: center;
+  /* width: 540px; */
+  margin: auto;
+}
+.result {
+  text-align: center;
+}
 </style>
diff --git a/app/frontend/src/assets/css/global.styl b/app/frontend/src/assets/css/global.styl
@@ -0,0 +1,16 @@
+html, body{
+  margin: 0
+  padding: 0
+  width: 100%
+  height: 100%
+}
+
+body{
+  background-image: url(https://www.4ui.cn/uploads/bing/2017/06/18/thumb_1366x768_6dafe7993436870b21004fe38a763e14.jpg)
+  background-size: cover
+  background-position: center
+  font: 14px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif
+  color: #4d4d4d
+  -webkit-font-smoothing: antialiased // 这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服
+  font-weight: 300
+}
diff --git a/app/frontend/src/assets/img/buaa.jpeg b/app/frontend/src/assets/img/buaa.jpeg
diff --git a/app/frontend/src/assets/logo.png → app/frontend/src/assets/img/logo.png b/app/frontend/src/assets/logo.png → app/frontend/src/assets/img/logo.png
diff --git a/app/frontend/src/assets/img/zju.jpeg b/app/frontend/src/assets/img/zju.jpeg