Merge pull request #179 from storytold/bflat-fy-tts-update

big update

packages/fakeyou.com/src/scss/site-refresh.scss

@@ -933,6 +933,10 @@ styles with important tags:
     margin-bottom: -4%;
     margin-top: -30%;
   }
+
+  .border-thick {
+    border-width: 2px;
+  }
 }
 
 select {

packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+interface Props {
+  titleIcon?: JSX.Element;
+  title: JSX.Element;
+  subText: JSX.Element;
+  showButtons: boolean;
+  actionButtons?: JSX.Element;
+}
+
+function PageHeader(props: Props) {
+  return (
+    <div className="container-panel hero-section pt-4 pt-lg-5 pb-5">
+      <div className="panel">
+        <div className="p-3 py-4 p-md-4">
+          <h1 className="fw-bold text-center text-md-start">
+            {props.titleIcon}
+            {props.title}
+          </h1>
+          <hr />
+          <p className="text-center text-md-start">{props.subText}</p>
+          {props.showButtons && (
+            <div className="d-flex flex-column flex-md-row gap-3 justify-content-center justify-content-md-start mt-4">
+              {props.actionButtons}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { PageHeader };

packages/fakeyou.com/src/v2/view/_common/PageHeaderWithImage.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { image } from "../../../data/animation";
+
+interface Props {
+  headerImage: string;
+  titleIcon?: JSX.Element;
+  title: JSX.Element;
+  subText: JSX.Element;
+  showButtons: boolean;
+  actionButtons?: JSX.Element;
+}
+
+function PageHeaderWithImage(props: Props) {
+  return (
+    <div className="container-panel hero-section pt-4 pt-lg-5 pb-5">
+      <div className="panel">
+        <div className="row gx-3 flex-md-row-reverse">
+          <div className="col-12 col-md-5 hero-img-container d-none d-md-block">
+            <motion.img
+              src={props.headerImage}
+              className="hero-img"
+              alt="Hero Image"
+              variants={image}
+            />
+          </div>
+          <div className="col-12 col-md-7">
+            <div className="p-3 py-4 p-md-4">
+              <h1 className="fw-bold text-center text-md-start">
+                {props.titleIcon}
+                {props.title}
+              </h1>
+              <hr />
+              <p className="text-center text-md-start">{props.subText}</p>
+              {props.showButtons && (
+                <div className="d-flex flex-column flex-md-row gap-3 justify-content-center justify-content-md-start mt-4">
+                  {props.actionButtons}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { PageHeaderWithImage };

packages/fakeyou.com/src/v2/view/_common/SessionTtsModelUploadResultsList.tsx

@@ -76,6 +76,12 @@ function SessionTtsModelUploadResultList(props: Props) {
     );
   }
 
+  let noResultsSection = <></>;
+
+  if (results.length === 0) {
+    return <>{noResultsSection}</>;
+  }
+
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>
       <div className="container-panel pt-4 pb-5">

packages/fakeyou.com/src/v2/view/_common/SessionW2lInferenceResultsList.tsx

@@ -81,6 +81,12 @@ function SessionW2lInferenceResultList(props: Props) {
     );
   }
 
+  let noResultsSection = <></>;
+
+  if (results.length === 0) {
+    return <>{noResultsSection}</>;
+  }
+
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>
       <div className="container-panel pt-4 pb-5">

packages/fakeyou.com/src/v2/view/_common/SessionW2lTemplateUploadResultsList.tsx

@@ -78,6 +78,12 @@ function SessionW2lTemplateUploadResultList(props: Props) {
     );
   }
 
+  let noResultsSection = <></>;
+
+  if (results.length === 0) {
+    return <>{noResultsSection}</>;
+  }
+
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>
       <div className="container-panel pt-4 pb-5">

packages/fakeyou.com/src/v2/view/nav/TopNav.tsx

@@ -6,7 +6,6 @@ import { WebUrl } from "../../../common/WebUrl";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faMicrophone,
-  faVolumeUp,
   faPlus,
   faUsers,
   faVideo,
@@ -40,6 +39,7 @@ import "tippy.js/dist/tippy.css";
 import "tippy.js/animations/shift-away.css";
 import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
 import { Analytics } from "../../../common/Analytics";
+import { faWaveformLines } from "@fortawesome/pro-solid-svg-icons";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -203,8 +203,7 @@ function TopNav(props: Props) {
             await logoutHandler();
           }}
         >
-          <FontAwesomeIcon icon={faSignOutAlt} />
-          {" "}
+          <FontAwesomeIcon icon={faSignOutAlt} />{" "}
           {t("nav.TopNav.buttons.logout")}
         </button>
       </>
@@ -216,19 +215,28 @@ function TopNav(props: Props) {
       <div className="top-bar d-none d-lg-flex">
         <div className="container d-flex align-items-center">
           <div className="d-flex gap-4 flex-grow-1">
-            <Link className="top-bar-text" to="/about" onClick={() => { Analytics.topbarClickAbout() } }>
+            <Link
+              className="top-bar-text"
+              to="/about"
+              onClick={() => {
+                Analytics.topbarClickAbout();
+              }}
+            >
               {t("nav.TopNav.topbar.aboutLink")}
             </Link>
-            <Link className="top-bar-text" to="/terms" onClick={() => { Analytics.topbarClickTerms() } }>
+            <Link
+              className="top-bar-text"
+              to="/terms"
+              onClick={() => {
+                Analytics.topbarClickTerms();
+              }}
+            >
               {t("nav.TopNav.topbar.termsLink")}
             </Link>
             <Link className="top-bar-text" to="/privacy">
               {t("nav.TopNav.topbar.privacyLink")}
             </Link>
-            <a
-              className="top-bar-text"
-              href={WebUrl.developerDocs()}
-            >
+            <a className="top-bar-text" href={WebUrl.developerDocs()}>
               {t("nav.TopNav.topbar.developersLink")}
             </a>
           </div>
@@ -265,8 +273,7 @@ function TopNav(props: Props) {
               </button>
             </Tippy>
             <p className="top-bar-text ms-2">
-              {t("nav.TopNav.topbar.ttsQueued")}:
-              {" "}
+              {t("nav.TopNav.topbar.ttsQueued")}:{" "}
               <span className="fw-bold text-red">
                 {pendingTtsJobs.pending_job_count}
               </span>
@@ -327,7 +334,9 @@ function TopNav(props: Props) {
                 <li data-bs-toggle="offcanvas" className="nav-item">
                   <Link
                     to={WebUrl.pricingPageWithReferer("topnav")}
-                    onClick={() => { Analytics.topbarClickPricing() } }
+                    onClick={() => {
+                      Analytics.topbarClickPricing();
+                    }}
                     className="nav-link"
                   >
                     <FontAwesomeIcon icon={faStar} className="me-2" />
@@ -338,7 +347,9 @@ function TopNav(props: Props) {
                 <li data-bs-toggle="offcanvas" className="nav-item">
                   <Link
                     to={WebUrl.cloneRequestPage()}
-                    onClick={() => { Analytics.topbarClickVoiceClone() } }
+                    onClick={() => {
+                      Analytics.topbarClickVoiceClone();
+                    }}
                     className="nav-link"
                   >
                     <FontAwesomeIcon icon={faMicrophone} className="me-2" />
@@ -365,7 +376,10 @@ function TopNav(props: Props) {
                   >
                     <li data-bs-toggle="offcanvas">
                       <Link className="dropdown-item" to="/">
-                        <FontAwesomeIcon icon={faVolumeUp} className="me-2" />
+                        <FontAwesomeIcon
+                          icon={faWaveformLines}
+                          className="me-2"
+                        />
                         {t("nav.TopNav.main.ttsOption")}
                       </Link>
                     </li>
@@ -537,8 +551,7 @@ function TopNav(props: Props) {
                       Online: <span className="fw-bold text-red">1,204</span>
                     </p> */}
                     <div className="top-bar-text mobile">
-                      {t("nav.TopNav.topbar.ttsQueued")}:
-                      {" "}
+                      {t("nav.TopNav.topbar.ttsQueued")}:{" "}
                       <span className="fw-bold text-red ">
                         {pendingTtsJobs.pending_job_count}
                       </span>

packages/fakeyou.com/src/v2/view/pages/contribute/ContributeIndexPage.tsx

@@ -18,6 +18,8 @@ import {
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../../data/animation";
 import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
+import { PageHeader } from "../../_common/PageHeader";
+import { faHandHoldingHeart } from "@fortawesome/pro-solid-svg-icons";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -34,9 +36,24 @@ function ContributeIndexPage(props: Props) {
 
   usePrefixedDocumentTitle("Contribute to FakeYou");
 
+  const title = <>{t("pages.contributeIndex.heroTitle")}</>;
+  const subText = (
+    <>
+      <h5 className="pb-1">
+        <Trans i18nKey="pages.contributeIndex.heroSubtitle">
+          You make FakeYou better by contributing
+        </Trans>
+      </h5>
+      {t("pages.contributeIndex.introText")}
+    </>
+  );
+  const titleIcon = (
+    <FontAwesomeIcon icon={faHandHoldingHeart} className="me-3" />
+  );
+
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>
-      <div className="container py-5 px-md-4 px-lg-5 px-xl-3">
+      {/* <div className="container py-5 px-md-4 px-lg-5 px-xl-3">
         <div className="d-flex flex-column">
           <motion.h1 className="display-5 fw-bold" variants={item}>
             {t("pages.contributeIndex.heroTitle")}
@@ -50,7 +67,13 @@ function ContributeIndexPage(props: Props) {
             {t("pages.contributeIndex.introText")}
           </motion.p>
         </div>
-      </div>
+      </div> */}
+      <PageHeader
+        title={title}
+        subText={subText}
+        showButtons={false}
+        titleIcon={titleIcon}
+      />
 
       <motion.div className="container-panel pt-2 pb-5" variants={panel}>
         <div className="panel p-3 p-lg-4 mt-3">

packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx

@@ -131,10 +131,7 @@ function LandingPage(props: Props) {
         </motion.div>
       </div>
 
-      <motion.div
-        className="container container-panel-blur mt-5 mb-5"
-        variants={panel}
-      >
+      <motion.div className="container mt-5 mb-5" variants={panel}>
         <div className="row pt-1 pt-lg-5 gy-5">
           <div className="col-12 col-md-6 text-center">
             <Link

packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx

@@ -9,12 +9,11 @@ import {
   faStar,
   faUser,
   faArrowRight,
-  faVolumeHigh,
-} from "@fortawesome/free-solid-svg-icons";
-import { item, image } from "../../../../../data/animation";
-import { motion } from "framer-motion";
+  faWaveformLines,
+} from "@fortawesome/pro-solid-svg-icons";
 import { Analytics } from "../../../../../common/Analytics";
 import { WebUrl } from "../../../../../common/WebUrl";
+import { PageHeaderWithImage } from "../../../_common/PageHeaderWithImage";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -114,43 +113,34 @@ export function TtsPageHero(props: Props) {
     }
   }
 
+  const titleIcon = <FontAwesomeIcon icon={faWaveformLines} className="me-3" />;
+  const title = <>{t("tts.TtsModelListPage.heroSection.title")}</>;
+  const subText = (
+    <>
+      <Trans i18nKey="tts.TtsModelListPage.heroSection.subtitle">
+        Use FakeYou's deepfake tech to say stuff with your favorite characters.
+      </Trans>
+    </>
+  );
+  const actionButtons = (
+    <>
+      {upgradeButton}
+      {signUpButton}
+      {viewPricingButton}
+      {myProfileButton}
+    </>
+  );
+
   return (
-    <div className="container-panel hero-section pt-4 pt-lg-5 pb-5">
-      <div className="panel">
-        <div className="row gx-3 flex-md-row-reverse">
-          <div className="col-12 col-md-5 hero-img-container d-none d-md-block">
-            <motion.img
-              src={randomImage}
-              className="hero-img"
-              alt="FakeYou Mascot"
-              variants={image}
-            />
-          </div>
-          <div className="col-12 col-md-7">
-            <div className="p-3 py-4 p-md-4">
-              <h1 className="fw-bold text-center text-md-start">
-                <FontAwesomeIcon icon={faVolumeHigh} className="me-3" />
-                {t("tts.TtsModelListPage.heroSection.title")}
-              </h1>
-              <p className="text-center text-md-start">
-                <Trans i18nKey="tts.TtsModelListPage.heroSection.subtitle">
-                  Use FakeYou's deepfake tech to say stuff with your favorite
-                  characters.
-                </Trans>
-              </p>
-              <motion.div
-                className="d-flex flex-column flex-md-row gap-3 justify-content-center justify-content-md-start mt-4"
-                variants={item}
-              >
-                {upgradeButton}
-                {signUpButton}
-                {viewPricingButton}
-                {myProfileButton}
-              </motion.div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <>
+      <PageHeaderWithImage
+        headerImage={randomImage}
+        titleIcon={titleIcon}
+        title={title}
+        subText={subText}
+        showButtons={true}
+        actionButtons={actionButtons}
+      />
+    </>
   );
 }

packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_list/W2lTemplateListPage.tsx

@@ -14,9 +14,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faChevronLeft,
   faChevronRight,
+  faFilm,
 } from "@fortawesome/free-solid-svg-icons";
 import { motion } from "framer-motion";
 import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
+import { PageHeader } from "../../../_common/PageHeader";
 
 const Fade = require("react-reveal/Fade");
 
@@ -176,7 +178,7 @@ function W2lTemplateListPage(props: Props) {
 
   if (props.sessionWrapper.isLoggedIn()) {
     extraDetails = (
-      <p className="lead mb-4">
+      <p>
         Pick a template, then you can make it lip sync. If you want to use your
         own video or image, you can
         <Link to="/contribute"> upload it as a template</Link>. You'll then be
@@ -185,7 +187,7 @@ function W2lTemplateListPage(props: Props) {
     );
   } else {
     extraDetails = (
-      <p className="lead mb-4">
+      <p>
         Pick a template, then you can make it lip sync. If you want to use your
         own video or image, you'll need to{" "}
         <Link to="/signup">create an account</Link>. You'll then be able to
@@ -196,16 +198,18 @@ function W2lTemplateListPage(props: Props) {
 
   usePrefixedDocumentTitle("Create Deep Fake lip sync videos");
 
+  const title = <>Video Lip Sync Templates</>;
+  const subText = <>{extraDetails}</>;
+  const titleIcon = <FontAwesomeIcon icon={faFilm} className="me-3" />;
+
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>
-      <div className="container pt-5 pb-4 px-md-4 px-lg-5 px-xl-3">
-        <div>
-          <motion.h1 className="display-5 fw-bold mb-3" variants={item}>
-            Video Lip Sync Templates
-          </motion.h1>
-          <motion.div variants={item}>{extraDetails}</motion.div>
-        </div>
-      </div>
+      <PageHeader
+        title={title}
+        subText={subText}
+        showButtons={false}
+        titleIcon={titleIcon}
+      />
 
       <motion.div className="container" variants={item}>
         <div className="d-flex  w-100 gap-3 mb-4">