about page and terms page

vocodes/src/v2/NewVocodesContainer.tsx

@@ -25,6 +25,8 @@ import { W2lTemplateListFc } from './w2l/w2l_template_list/W2lTemplateListFc';
 import { W2lTemplateUploadJob } from '../jobs/W2lTemplateUploadJobs';
 import { W2lTemplateViewFc } from './w2l/w2l_template_view/W2lTemplateViewFc';
 import { ModerationViewIpBanFc } from './moderation/moderation_view_ip_ban/ModerationViewIpBanFc';
+import { AboutFc } from './about/about_page/AboutFc';
+import { TermsFc } from './about/terms_page/TermsFc';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -196,6 +198,14 @@ class NewVocodesContainer extends React.Component<Props, State> {
               />
             </Route>
 
+            <Route path="/about">
+              <AboutFc />
+            </Route>
+
+            <Route path="/terms">
+              <TermsFc />
+            </Route>
+
             <Route path="/">
               <TtsModelFormFc
                 sessionWrapper={this.props.sessionWrapper}

vocodes/src/v2/about/about_page/AboutFc.tsx

@@ -0,0 +1,134 @@
+
+import React from 'react';
+
+interface Props {
+}
+
+function AboutFc(props: Props) {
+  return (
+    <div className="content is-medium">
+      <h1 className="">About Vocodes</h1>
+
+      <p>
+        Your brain was already capable of imagining things spoken in other people's voices. This is
+        a demonstration of how far computers have caught up. One day computers will be able to
+        bring all of the rich and vivid imagery of your hopes and dreams to life. There's never been a
+        better time throughout all history to be a creative than now.
+      </p>
+
+      <h1 className="title is-4"> Technology disclosure </h1>
+
+      <p>
+        <em>We'll be happy to remove any of the voices featured here for any reason.</em>
+      </p>
+
+      <p>
+        &rdquo;Deep fakes&rdquo; are kind of like Photoshop when it first came out. They're impressive, maybe a
+        little bit scary, but they're about to become the new norm. People will become accustomed to the technology,
+        and the results will be used mostly for creative good, unlocking previously costly and unattainable high 
+        production values for individual creators. It's our belief that the next Hollywood will be <em>you</em>.
+      </p>
+
+      <p>
+        The technology to clone voices is already out in the open, and the voices here are built by a 
+        community of contributors. We're not the only website doing this, and plenty of people are producing 
+        these same results on their own at home, independent of our work. You can see thousands of examples
+        on YouTube and social media.
+      </p>
+
+      <p>
+        Even if the United States chooses to ban this technology, institutions in China, Japan, Canada,
+        and other countries all over the world are rapidly conducting and publishing research
+        on this topic. People everywhere have access to this easy-to-use technology. State actors
+        probably have even more sophisiticated versions available.
+      </p>
+
+      <p>
+        As an interesting point, most if not all of the voices produced by this website are actually 
+        <em>Linda Johnson</em> with a little bit layered on top.
+      </p>
+
+      <p>
+        <a href="https://github.com/NVIDIA/tacotron2" target="_blank" rel="noopener noreferrer">NVIDIA
+        makes these tools publicly available for you to make your own voice models</a>. Check it out!
+      </p>
+
+      <h1 className="title is-4">Thanks</h1>
+
+      <p>
+        Thanks to the following individuals (in no particular order) for help with data
+        gathering and annotation, Discord moderation, ML advice, etc.
+      </p>
+
+      <p>
+        Vegito1089,
+        Shin,
+        Ashurath,
+        MakaveliGH,
+        Blutarch Mann,
+        Yahia,
+        Tim Squid,
+        Seuneramet,
+        Matt,
+        Seth,
+        CookiePPP,
+        <a href="https://twitter.com/r9y9/" target="_blank" rel="noopener noreferrer">@r9y9</a>.
+      </p>
+
+      <p>
+        The following papers, models, and resources were used:
+
+        <a href="https://github.com/NVIDIA/tacotron2" target="_blank" rel="noopener noreferrer">Tacotron2</a> (BSD-3 license),
+        <a href="https://github.com/jaywalnut310/glow-tts" target="_blank" rel="noopener noreferrer">glow-tts</a> (MIT license), {/* MIT */}
+        <a href="https://github.com/seungwonpark/melgan" target="_blank" rel="noopener noreferrer">MelGAN</a> (BSD-3 license), {/* BSD3 */}
+        <a href="https://arxiv.org/pdf/2005.05106.pdf" target="_blank" rel="noopener noreferrer">Multi-band MelGAN</a> (paper),
+        <a href="https://arxiv.org/abs/2010.05646" target="_blank" rel="noopener noreferrer">HiFi-GAN</a> (paper),
+        <a href="https://github.com/Rudrabha/Wav2Lip" target="_blank" rel="noopener noreferrer">Wav2Lip</a> (MIT license), {/* Non-commercial */}
+        <a href="http://www.speech.cs.cmu.edu/cgi-bin/cmudict" target="_blank" rel="noopener noreferrer">CMUDict</a> (BSD-2 license),
+        <a href="https://keithito.com/LJ-Speech-Dataset/" target="_blank" rel="noopener noreferrer">LJSpeech</a> (public domain),
+        <a href="https://datashare.is.ed.ac.uk/handle/10283/3443" target="_blank" rel="noopener noreferrer">VCTK</a> (CC BY 4.0).
+      </p>
+
+      <p>
+        Videos are generated by the amazing Wav2Lip system <a 
+        href="https://doi.org/10.1145/3394171.3413532" target="_blank" rel="noopener noreferrer">(paper)</a>, 
+        by Prajwal <a href="https://twitter.com/prajwalkr14" target="_blank" rel="noopener noreferrer">(@prajwalkr14)</a>, 
+        K R and Mukhopadhyay, Rudrabha and Namboodiri, Vinay P. and Jawahar, C.V.
+      </p>
+
+      <h1 className="title is-4">Contact</h1>
+
+      <p>
+        Reach out to "echelon" on <a href="https://twitter.com/echelon" target="_blank" rel="noopener noreferrer">Twitter</a>&nbsp;and 
+        Hacker News. Say hi.
+      </p>
+
+      <p>
+        The Storyteller Company (registered as Learning Machines, LLC)
+      </p>
+
+      <h1 className="title is-4"> Built With </h1>
+
+      <div className="columns is-mobile is-gapless">
+        <div className="column">
+          <figure className="image is-square is-fullwidth vocodes-grid-marginless">
+            <img src="/logos/pytorch.png" alt="models are written in pytorch" />
+          </figure>
+        </div>
+        <div className="column">
+          <figure className="image is-square is-fullwidth vocodes-grid-marginless">
+            <img src="/logos/rust.png" alt="core server components are written in Rust" />
+          </figure>
+        </div>
+        <div className="column">
+          <figure className="image is-square is-fullwidth vocodes-grid-marginless">
+            <img src="/logos/kubernetes.png" alt="the cluster scales with k8s" />
+          </figure>
+        </div>
+      </div>
+
+    </div>
+  )
+}
+
+export { AboutFc };

vocodes/src/v2/about/terms_page/TermsFc.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface Props {
+}
+
+function TermsFc(props: Props) {
+  return (
+    <div className="content is-medium">
+      <h1 className="">Terms of Use</h1>
+
+      <p>
+        We do not condone the use of vocodes for any type of deception, slur, 
+        abuse, or mistreatment of any individual or group. Please report such 
+        abuses to our <a href="https://discord.gg/H72KFXm">community staff on Discord</a>. 
+        Bad actors will have their access revoked.
+      </p>
+
+      <p>
+        We'll be happy to remove any of the voices featured here for any reason.
+      </p>
+
+
+    </div>
+  )
+}
+
+export { TermsFc };