better style

tacotron_melgan/wrap_tacotron2_model.py

@@ -12,7 +12,8 @@ from math import sqrt
 from tacotron_model import Tacotron2
 
 #tacotron_model_file = '/home/bt/models/tacotron2-nvidia/tacotron2_arpabet_ljs_checkpoint_22000'
-tacotron_model_file = '/home/bt/models/tacotron2-nvidia/tacotron2_arpabet_ljs_checkpoint_54000'
+#tacotron_model_file = '/home/bt/models/tacotron2-nvidia/tacotron2_arpabet_ljs_checkpoint_54000'
+tacotron_model_file = '/home/bt/models/tacotron2-nvidia/tacotron2_arpabet_ljs_checkpoint_93000'
 output_filename = 'tacotron_arpabet_1.pt'
 
 # NB: Tacotron's original shape is [148, 512]. Arpabet encoding is [256, 512].

tts_frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tts_frontend",
-  "homepage" : "http://jungle.horse/frontend",
+  "homepage": "http://jungle.horse/frontend",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -9,8 +9,6 @@
     "@testing-library/user-event": "^7.2.1",
     "@types/jest": "^24.0.25",
     "@types/node": "^12.12.24",
-    "@types/react": "^16.9.17",
-    "@types/react-dom": "^16.9.4",
     "howler": "^2.1.3",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
@@ -39,6 +37,8 @@
     ]
   },
   "devDependencies": {
-    "@types/howler": "^2.1.2"
+    "@types/howler": "^2.1.2",
+    "@types/react": "^16.9.17",
+    "@types/react-dom": "^16.9.4"
   }
 }

tts_frontend/src/App.css

@@ -36,3 +36,22 @@
     transform: rotate(360deg);
   }
 }
+
+.track {
+  margin: 10px auto;
+  width: 600px;
+  border: 1px solid #ccc;
+  padding: 1em 1em 1em 0;
+  text-align: left;
+}
+
+.play_button,
+.reload_button {
+  size: 4em;
+  padding: 1em;
+  background-color: #ccc;
+}
+
+.track_text {
+  margin-left: 0.5em;
+}

tts_frontend/src/components/TextAudioTrack.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Howl from 'howler';
 
 interface Props {
@@ -20,11 +20,22 @@ class TextAudioTrack extends React.Component<Props, State> {
     this.props.howl.play();
   }
 
+  reload = () => {
+    console.log('Reload clicked');
+  }
+
   public render() {
     return (
-      <div onClick={this.play}>
-        Track:
-        <p onClick={this.play}>{this.props.text}</p>
+      <div className="track">
+        <span 
+          className="play_button" 
+          onClick={this.play}>&#x25b6;</span>
+        <span
+          className="reload_button"
+          onClick={this.reload}>&#x21bb;</span>
+        <span 
+          className="track_text"
+          onClick={this.play}>{this.props.text}</span>
       </div>
     );
   }