group speakers by quality, retain default to attenborough

vocodes/src/App.tsx

@@ -55,10 +55,13 @@ class App extends React.Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
+
+    let defaultSpeaker : Speaker = SPEAKERS.find(speaker => speaker.isDefaultVoice())!;
+
     this.state = {
       mode: Mode.SPEAK_MODE,
       extrasMode: ExtrasMode.SPEAKER_INFO,
-      speaker: SPEAKERS[0],
+      speaker: defaultSpeaker,
       spectrogramMode: SpectrogramMode.VIRIDIS,
       utterances: [],
       currentText: '',

vocodes/src/model/Speakers.ts

@@ -2,20 +2,24 @@
 class Speaker {
   name: string;
   slug: string;
+  defaultVoice: boolean;
   description: string;
   avatarUrl?: string;
   fullUrl?: string;
+  voiceQuality?: number;
 
-  constructor(name: string, slug: string, description: string, avatarUrl?: string, fullUrl?: string) {
+  constructor(name: string, slug: string, description: string, avatarUrl?: string, fullUrl?: string, voiceQuality?: number, defaultVoice?: boolean) {
     this.name = name;
     this.slug = slug;
     this.description = description;
     this.avatarUrl = avatarUrl;
     this.fullUrl = fullUrl;
+    this.voiceQuality = voiceQuality;
+    this.defaultVoice = defaultVoice !== undefined && defaultVoice;
   }
 
   static fromJson(json: any) : Speaker {
-    return new Speaker(json.name, json.slug, json.description, json.avatarUrl, json.fullUrl);
+    return new Speaker(json.name, json.slug, json.description, json.avatarUrl, json.fullUrl, json.voiceQuality, json.defaultVoice);
   }
 
   getName() : string {
@@ -45,22 +49,32 @@ class Speaker {
   getFull() : string | undefined {
     return this.fullUrl;
   }
+
+  getVoiceQuality() : number {
+    return this.voiceQuality === undefined ? 0.0 : this.voiceQuality;
+  }
+
+  isDefaultVoice(): boolean {
+    return this.defaultVoice;
+  }
 }
 
 const SPEAKERS : Speaker[] = [
   Speaker.fromJson({
-    name: "Sir David Attenborough (high quality)",
-    slug: "david-attenborough",
-    description: "Naturalist",
-    avatarUrl: "david-attenborough.jpg",
-    fullUrl: "david-attenborough-full.png",
+    name: "Arnold Schwarzenegger",
+    slug: "arnold-schwarzenegger",
+    description: "Terminator.",
+    avatarUrl: "arnold-schwarzenegger.jpg",
+    fullUrl: "arnold-schwarzenegger-full.png",
+    voiceQuality: 2.0,
   }),
   Speaker.fromJson({
     name: "Betty White",
     slug: "betty-white",
-    description: "This model needs more training.",
+    description: "Actress.",
     avatarUrl: "betty-white.jpg",
     fullUrl: "betty-white-full.png",
+    voiceQuality: 7.6,
   }),
   Speaker.fromJson({
     name: "Bill Gates (needs work)",
@@ -68,6 +82,7 @@ const SPEAKERS : Speaker[] = [
     description: "Microsoft.",
     avatarUrl: "bill-gates.jpg",
     fullUrl: "bill-gates-full.png",
+    voiceQuality: 6.3,
   }),
   Speaker.fromJson({
     name: "Bill Nye",
@@ -75,6 +90,7 @@ const SPEAKERS : Speaker[] = [
     description: "The Science Guy.",
     avatarUrl: "bill-nye.jpg",
     fullUrl: "bill-nye-full.png",
+    voiceQuality: 6.7,
   }),
   Speaker.fromJson({
     name: "Christopher Lee",
@@ -82,6 +98,7 @@ const SPEAKERS : Speaker[] = [
     description: "An actor well known for playing Count Dooku and Saruman.",
     avatarUrl: "christopher-lee.jpg",
     fullUrl: "christopher-lee-full.png",
+    voiceQuality: 6.5,
   }),
   Speaker.fromJson({
     name: "Danny Devito",
@@ -89,6 +106,7 @@ const SPEAKERS : Speaker[] = [
     description: "Always delightful.",
     avatarUrl: "danny-devito.jpg",
     fullUrl: "danny-devito-full.png",
+    voiceQuality: 6.9,
   }),
   Speaker.fromJson({
     name: "Dr. Phil McGraw",
@@ -96,6 +114,7 @@ const SPEAKERS : Speaker[] = [
     description: "Celebrity doctor.",
     avatarUrl: "dr-phil-mcgraw.jpg",
     fullUrl: "dr-phil-mcgraw-full.png",
+    voiceQuality: 6.1,
   }),
   Speaker.fromJson({
     name: "Gilbert Gottfried",
@@ -103,6 +122,7 @@ const SPEAKERS : Speaker[] = [
     description: "Voice actor and comedian.",
     avatarUrl: "gilbert-gottfried.jpg",
     fullUrl: "gilbert-gottfried-full.png",
+    voiceQuality: 6.2,
   }),
   Speaker.fromJson({
     name: "John Oliver",
@@ -110,13 +130,15 @@ const SPEAKERS : Speaker[] = [
     description: "TV news.",
     avatarUrl: "john-oliver.jpg",
     fullUrl: "john-oliver-full.png",
+    voiceQuality: 5.2,
   }),
   Speaker.fromJson({
-    name: "Mark Zuckerberg (needs work)",
+    name: "Mark Zuckerberg",
     slug: "mark-zuckerberg",
     description: "Facebook.",
     avatarUrl: "mark-zuckerberg.jpg",
     fullUrl: "mark-zuckerberg-full.png",
+    voiceQuality: 4.9,
   }),
   Speaker.fromJson({
     name: "Mr. Fred Rogers",
@@ -124,6 +146,7 @@ const SPEAKERS : Speaker[] = [
     description: "Educator and amazing human being.",
     avatarUrl: "fred-rogers.jpg",
     fullUrl: "fred-rogers-full.png",
+    voiceQuality: 4.9,
   }),
   Speaker.fromJson({
     name: "President #37 Richard Nixon",
@@ -131,6 +154,7 @@ const SPEAKERS : Speaker[] = [
     description: "The 37th President of the United States",
     avatarUrl: "richard-nixon.jpg",
     fullUrl: "richard-nixon-full.png",
+    voiceQuality: 6.0,
   }),
   Speaker.fromJson({
     name: "President #39 Jimmy Carter",
@@ -138,6 +162,7 @@ const SPEAKERS : Speaker[] = [
     description: "The 39th President of the United States.",
     avatarUrl: "jimmy-carter.jpg",
     fullUrl: "jimmy-carter-full.png",
+    voiceQuality: 6.3,
   }),
   Speaker.fromJson({
     name: "President #40 Ronald Reagan",
@@ -145,6 +170,7 @@ const SPEAKERS : Speaker[] = [
     description: "The 40th President of the United States.",
     avatarUrl: "ronald-reagan.jpg",
     fullUrl: "ronald-reagan-full.png",
+    voiceQuality: 6.4,
   }),
   Speaker.fromJson({
     name: "President #42 Bill Clinton",
@@ -152,13 +178,15 @@ const SPEAKERS : Speaker[] = [
     description: "The 42nd President of the United States.",
     avatarUrl: "bill-clinton.jpg",
     fullUrl: "bill-clinton-full.png",
+    voiceQuality: 6.5,
   }),
   Speaker.fromJson({
-    name: "President #44 Barack Obama (needs more training)",
+    name: "President #44 Barack Obama",
     slug: "barack-obama",
     description: "The 44th President of the United States.",
     avatarUrl: "barack-obama.jpg",
     fullUrl: "barack-obama-full.png",
+    voiceQuality: 4.2,
   }),
   Speaker.fromJson({
     name: "President #45 Donald Trump",
@@ -166,6 +194,16 @@ const SPEAKERS : Speaker[] = [
     description: "The 45th President of the United States.",
     avatarUrl: "donald-trump.jpg",
     fullUrl: "donald-trump-full.png",
+    voiceQuality: 5.2,
+  }),
+  Speaker.fromJson({
+    name: "Sir David Attenborough",
+    slug: "david-attenborough",
+    description: "Naturalist.",
+    avatarUrl: "david-attenborough.jpg",
+    fullUrl: "david-attenborough-full.png",
+    voiceQuality: 8.0,
+    defaultVoice: true,
   }),
   Speaker.fromJson({
     name: "Tupac Shakur (acapella lyrics)",
@@ -173,13 +211,7 @@ const SPEAKERS : Speaker[] = [
     description: "Musician.",
     avatarUrl: "tupac-shakur.jpg",
     fullUrl: "tupac-shakur-full.png",
-  }),
-  Speaker.fromJson({
-    name: "[outdated architecture] Arnold Schwarzenegger",
-    slug: "arnold-schwarzenegger",
-    description: "Terminator.",
-    avatarUrl: "arnold-schwarzenegger.jpg",
-    fullUrl: "arnold-schwarzenegger-full.png",
+    voiceQuality: 5.0,
   }),
 ];
 

vocodes/src/modes/speak/SpeakComponent.tsx

@@ -171,11 +171,32 @@ class SpeakComponent extends React.Component<Props, State> {
         onClick={this.toggleMode}>{modeText}</button>
     }
 
-    let speakerOptions : any[] = [];
+    let bestSpeakerOptions : any[] = [];
+    let goodSpeakerOptions : any[] = [];
+    let badSpeakerOptions : any[] = [];
+    let terribleSpeakerOptions : any[] = [];
 
     SPEAKERS.forEach(speaker => {
-      let slug = speaker.getSlug();
-      speakerOptions.push(<option key={slug} value={speaker.getSlug()}>{speaker.getName()}</option>);
+      const quality = speaker.getVoiceQuality();
+      const slug = speaker.getSlug();
+      let selected = undefined;
+      if (this.props.currentSpeaker.slug === speaker.slug) {
+        selected = true;
+      }
+      const option = <option 
+        key={slug} 
+        value={speaker.getSlug()} 
+        selected={selected}>{speaker.getName()}</option>;
+
+      if (quality >= 7.5) {
+        bestSpeakerOptions.push(option);
+      } else if (quality >= 5.9) {
+        goodSpeakerOptions.push(option);
+      } else if (quality >= 4.5) {
+        badSpeakerOptions.push(option);
+      } else {
+        terribleSpeakerOptions.push(option);
+      }
     });
 
     return (
@@ -186,13 +207,31 @@ class SpeakComponent extends React.Component<Props, State> {
             <div className="control is-expanded">
               <div className="select is-fullwidth">
                 <select onChange={this.changeSpeaker}>
-                  {speakerOptions.map(option => {
-                    return option;
-                  })}
+                  <optgroup label="Highest Quality Voices">
+                    {bestSpeakerOptions.map(option => {
+                      return option;
+                    })}
+                  </optgroup>
+                  <optgroup label="Decent Quality Voices">
+                    {goodSpeakerOptions.map(option => {
+                      return option;
+                    })}
+                  </optgroup>
+                  <optgroup label="Poor Quality Voices (need retraining)">
+                    {badSpeakerOptions.map(option => {
+                      return option;
+                    })}
+                  </optgroup>
+                  <optgroup label="Terrible Quality Voices (ugh, really need work)">
+                    {terribleSpeakerOptions.map(option => {
+                      return option;
+                    })}
+                  </optgroup>
                 </select>
               </div>
             </div>
           </div>
+
           <div className="column">
             {switchButton}
           </div>