Merge pull request #240 from storytold/bflat-fy-upload-visible

upload visibility

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

@@ -1265,6 +1265,10 @@ styles with important tags:
   .fs-14 {
     font-size: 14px;
   }
+
+  .alert-info {
+    font-size: 14px;
+  }
 }
 
 select {
@@ -1334,12 +1338,6 @@ textarea {
   color: $white !important;
 }
 
-// input {
-//   background-color: $input !important;
-//   border-color: $input !important;
-//   color: $white !important;
-// }
-
 .img-product {
   &.img-tts {
     margin-top: -82px;
@@ -1428,6 +1426,10 @@ textarea {
       padding-top: 7rem;
       padding-bottom: 7rem;
     }
+
+    .alert-info {
+      font-size: 16px;
+    }
   }
 }
 

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

@@ -170,7 +170,7 @@ function FooterNav(props: Props) {
               </li>
 
               <li>
-                <Link to="/voice-conversion">Voice Conversion</Link>
+                <Link to="/voice-conversion">Voice to Voice</Link>
               </li>
 
               <li>
@@ -181,7 +181,7 @@ function FooterNav(props: Props) {
               <p className="fw-bold">Community</p>
 
               <li>
-                <Link to="/contribute">Upload</Link>
+                <Link to="/contribute">Upload Models</Link>
               </li>
 
               <li>

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

@@ -39,6 +39,7 @@ import "tippy.js/animations/shift-away.css";
 import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
 import { Analytics } from "../../../common/Analytics";
 import {
+  faFileArrowUp,
   faMicrophoneLines,
   faWaveformLines,
 } from "@fortawesome/pro-solid-svg-icons";
@@ -390,7 +391,7 @@ function TopNav(props: Props) {
                           className="me-2"
                         />
                         {"  "}
-                        Voice Conversion
+                        Voice to Voice
                       </Link>
                     </li>
                     <li data-bs-toggle="offcanvas">
@@ -399,6 +400,20 @@ function TopNav(props: Props) {
                         {t("nav.TopNav.main.videoOption")}
                       </Link>
                     </li>
+                    <hr className="my-2" />
+                    <li data-bs-toggle="offcanvas">
+                      <Link
+                        className="dropdown-item"
+                        to="/contribute"
+                        title="to Upload page"
+                      >
+                        <FontAwesomeIcon
+                          icon={faFileArrowUp}
+                          className="me-2"
+                        />
+                        Upload Models
+                      </Link>
+                    </li>
                   </ul>
                 </li>
 

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

@@ -9,7 +9,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faVolumeHigh,
   faVideo,
-  faUpload,
   faImage,
   faTags,
   faHandsHelping,
@@ -18,7 +17,10 @@ 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";
+import {
+  faFileArrowUp,
+  faHandHoldingHeart,
+} from "@fortawesome/pro-solid-svg-icons";
 import { faMicrophoneStand } from "@fortawesome/pro-duotone-svg-icons";
 import { faWaveformLines } from "@fortawesome/pro-regular-svg-icons";
 
@@ -76,14 +78,14 @@ function ContributeIndexPage(props: Props) {
         titleIcon={titleIcon}
       />
 
-      <motion.div className="container-panel pt-2 pb-5" variants={panel}>
-        <div className="panel p-3 p-lg-4 mt-3">
-          <h2 className="panel-title fw-bold">
-            <FontAwesomeIcon icon={faUpload} className="me-3" />
+      <motion.div className="container-panel pb-3" variants={panel}>
+        <div className="panel p-3 p-lg-4">
+          <h2 className="fw-bold">
+            <FontAwesomeIcon icon={faFileArrowUp} className="me-3" />
             {t("pages.contributeIndex.headingUploadModels")}
           </h2>
-          <div className="py-6 d-flex flex-column gap-4">
-            <p className="text-center text-lg-start">
+          <div className="d-flex flex-column gap-4">
+            <p className="text-center text-lg-start mb-3">
               <Trans i18nKey="pages.contributeIndex.describeUploadModels">
                 Create new voices and video templates for FakeYou.
                 <DiscordLink
@@ -95,9 +97,12 @@ function ContributeIndexPage(props: Props) {
             </p>
             <div className="row gx-3 gy-3">
               <div className="col-12 col-md-6">
-                <Link to="/upload/voice_conversion" className="btn btn-primary w-100">
+                <Link
+                  to="/upload/voice_conversion"
+                  className="btn btn-primary w-100"
+                >
                   <FontAwesomeIcon icon={faMicrophoneStand} className="me-3" />
-                  Upload Voice Conversion Model
+                  Upload Voice to Voice Model
                 </Link>
               </div>
               <div className="col-12 col-md-6">
@@ -129,14 +134,14 @@ function ContributeIndexPage(props: Props) {
         </div>
       </motion.div>
 
-      <motion.div className="container-panel pt-3 pb-5" variants={item}>
+      <motion.div className="container-panel pt-3 pb-3" variants={item}>
         <div className="panel p-3 p-lg-4 mt-lg-0">
-          <h2 className="panel-title fw-bold">
+          <h2 className="fw-bold">
             <FontAwesomeIcon icon={faTags} className="me-3" />
             {categoryHeading}
           </h2>
-          <div className="py-6 d-flex flex-column gap-4">
-            <p className="text-center text-lg-start">
+          <div className="d-flex flex-column gap-4">
+            <p className="text-center text-lg-start mb-3">
               {t("pages.contributeIndex.describeSuggest")}
             </p>
             <div className="d-flex gap-3">
@@ -150,13 +155,13 @@ function ContributeIndexPage(props: Props) {
           </div>
         </div>
       </motion.div>
-      <div className="container-panel pt-3 pb-5">
+      <div className="container-panel pt-3">
         <div className="panel p-3 p-lg-4 load-hidden mt-lg-0">
-          <h2 className="panel-title fw-bold">
+          <h2 className="fw-bold">
             <FontAwesomeIcon icon={faHandsHelping} className="me-3" />
             {t("pages.contributeIndex.headingMore")}
           </h2>
-          <div className="py-6 d-flex flex-column gap-4">
+          <div className="d-flex flex-column gap-4">
             <p className="text-center text-lg-start">
               <Trans i18nKey="pages.contributeIndex.describeMore">
                 Want to contribute code, design, or data science?

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

@@ -13,7 +13,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { faDiscord, faTwitter } from "@fortawesome/free-brands-svg-icons";
 import { WebUrl } from "../../../../common/WebUrl";
-import { faMoneyBill } from "@fortawesome/pro-solid-svg-icons";
+import { faFileArrowUp, faMoneyBill } from "@fortawesome/pro-solid-svg-icons";
 // import {
 //   faFileArrowUp,
 //   faMicrophone,
@@ -31,6 +31,7 @@ function LandingPage(props: Props) {
   let viewPricingButton = <></>;
   let upgradeButton = <></>;
   let myProfileButton = <></>;
+  let uploadModelSection = <></>;
 
   if (!props.sessionWrapper.isLoggedIn()) {
     signUpButton = (
@@ -82,6 +83,41 @@ function LandingPage(props: Props) {
         </Link>
       </>
     );
+
+    uploadModelSection = (
+      <>
+        <h2 className="fw-bold mb-4 mt-5 pt-4">Upload Models</h2>
+        <div className="panel p-4 rounded">
+          <div className="row gy-3 zi-2">
+            <div className="col-12 col-lg-4">
+              <Link to="/upload/tts" className="btn btn-secondary">
+                <span className="d-flex align-items-center">
+                  <FontAwesomeIcon icon={faFileArrowUp} className="me-2" />
+                  Upload TTS Model
+                </span>
+              </Link>
+            </div>
+            <div className="col-12 col-lg-4">
+              <Link to="/upload/voice_conversion" className="btn btn-secondary">
+                <span className="d-flex align-items-center">
+                  <FontAwesomeIcon icon={faFileArrowUp} className="me-2" />
+                  Upload VTV Model
+                </span>
+              </Link>
+            </div>
+            <div className="col-12 col-lg-4">
+              <Link to="/upload/w2l_photo" className="btn btn-secondary">
+                <span className="d-flex align-items-center">
+                  <FontAwesomeIcon icon={faFileArrowUp} className="me-2" />
+                  Upload W2L Model
+                </span>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+
     if (!props.sessionSubscriptionsWrapper.hasPaidFeatures()) {
       upgradeButton = (
         <>
@@ -116,13 +152,16 @@ function LandingPage(props: Props) {
     <motion.div initial="hidden" animate="visible" variants={container}>
       <div className="container pb-5 pb-lg-0 pt-lg-2 px-md-5 px-lg-5 px-xl-3">
         {/* Community Commissions Alert */}
-        <div className="alert alert-info fs-6">
+        <div className="alert alert-info">
           <FontAwesomeIcon icon={faMoneyBill} className="me-2" />
           <span className="fw-medium">
             Get rewarded from our $15k prize pool for creating Voice to Voice
             models!
           </span>
-          <Link to="/commissions" className="fw-semibold ms-2">
+          <Link
+            to="/commissions"
+            className="fw-semibold ms-2 d-inline-flex align-items-center"
+          >
             See details <FontAwesomeIcon icon={faArrowRight} className="ms-1" />
           </Link>
         </div>
@@ -297,6 +336,8 @@ function LandingPage(props: Props) {
             className="dots-left-bottom"
           />
         </div>
+
+        {uploadModelSection}
       </div>
 
       <div className="container section mt-4 px-md-5 px-xl-3">

packages/fakeyou.com/src/v2/view/pages/upload/UploadVoiceConversionModel.tsx

@@ -89,14 +89,14 @@ function UploadVoiceConversionModel(props: Props) {
 
   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 className="container pt-5 pb-3 px-md-4 px-lg-5 px-xl-3">
         <div className="d-flex flex-column">
           <motion.h1 className=" fw-bold" variants={item}>
-            Upload Voice Conversion Model
-            {" "}
-            <FontAwesomeIcon icon={faMicrophoneStand} className="me-3" />
+            Upload Voice to Voice Model
           </motion.h1>
-          <motion.h4 variants={item}>Transform your voice into another!</motion.h4>
+          <motion.h4 variants={item}>
+            Transform your voice into another!
+          </motion.h4>
           <motion.div className="my-3" variants={item}>
             <BackLink
               link={WebUrl.contributePage()}
@@ -120,7 +120,7 @@ function UploadVoiceConversionModel(props: Props) {
         </p>
 
         <p>
-          Once your voice conversion model is successfully uploaded, you'll be 
+          Once your voice conversion model is successfully uploaded, you'll be
           able to use it from the main page. Others will be able to use it too,
           and you'll get credited.
         </p>

packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx

@@ -184,13 +184,16 @@ function VcModelListPage(props: Props) {
       />
 
       <motion.div variants={panel} className="container">
-        <div className="alert alert-info fs-6">
+        <div className="alert alert-info">
           <FontAwesomeIcon icon={faMoneyBill} className="me-2" />
           <span className="fw-medium">
             Get rewarded from our $15k prize pool for creating Voice to Voice
             models!
           </span>
-          <Link to="/commissions" className="fw-semibold ms-2">
+          <Link
+            to="/commissions"
+            className="fw-semibold ms-2 d-inline-flex align-items-center"
+          >
             See details <FontAwesomeIcon icon={faArrowRight} className="ms-1" />
           </Link>
         </div>

packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/VcPageHero.tsx

@@ -8,7 +8,7 @@ import {
   faStar,
   faUser,
   faArrowRight,
-  faWaveformLines,
+  faMicrophoneLines,
 } from "@fortawesome/pro-solid-svg-icons";
 import { Analytics } from "../../../../../../common/Analytics";
 import { WebUrl } from "../../../../../../common/WebUrl";
@@ -101,8 +101,10 @@ export function VcPageHero(props: Props) {
     }
   }
 
-  const titleIcon = <FontAwesomeIcon icon={faWaveformLines} className="me-3" />;
-  const title = <>Voice Conversion</>;
+  const titleIcon = (
+    <FontAwesomeIcon icon={faMicrophoneLines} className="me-3" />
+  );
+  const title = <>Voice to Voice</>;
   const subText = (
     <>Use this tool to change your voice into your favorite characters.</>
   );