Merge branch 'olivicmic-fy-faceanimation-toggles' of https://github.com/storytold/storyteller-frontend into olivicmic-fy-faceanimation-toggles

packages/components/src/api/face_animation/EnqueueFaceAnimation.ts

@@ -18,6 +18,11 @@ export interface EnqueueFaceAnimationRequest {
 
   audio_source: AudioSource,
   image_source: ImageSource,
+
+  crop?: string,
+  make_still?: boolean,
+  high_quality?: boolean,
+  remove_watermark?: boolean,
 }
 
 // export interface EnqueueFaceAnimationSuccessResponse {

packages/fakeyou.com/public/locales/bn/Footer.json

@@ -9,6 +9,7 @@
   "infoPrivacyPolicy": "গোপনীয়তা নীতি",
   "infoTerms": "ব্যবহারের শর্তাবলী",
   "infoTitle": "তথ্য",
+  "productFaceAnimator": "ফেস অ্যানিমেটর",
   "productTts": "টেক্সট টু স্পিচ",
   "productUploadModels": "আপলোড মডেল",
   "productVc": "ভয়েস টু ভয়েস",

packages/fakeyou.com/public/locales/bn/TopNav.json

@@ -12,6 +12,7 @@
   "infoTerms": "ব্যবহারের শর্তাবলী",
   "infoTitle": "তথ্য",
   "pricingTitle": "মূল্য নির্ধারণ",
+  "productFaceAnimator": "ফেস অ্যানিমেটর",
   "productTts": "টেক্সট টু স্পিচ",
   "productUploadModels": "আপলোড মডেল",
   "productVc": "ভয়েস টু ভয়েস",

packages/fakeyou.com/public/locales/de/Footer.json

@@ -9,6 +9,7 @@
   "infoPrivacyPolicy": "Datenschutzrichtlinie",
   "infoTerms": "Nutzungsbedingungen",
   "infoTitle": "Die Info",
+  "productFaceAnimator": "Gesichtsanimator",
   "productTts": "Text zu Sprache",
   "productUploadModels": "Modelle hochladen",
   "productVc": "Stimme zu Stimme",

packages/fakeyou.com/public/locales/de/TopNav.json

@@ -12,6 +12,7 @@
   "infoTerms": "Nutzungsbedingungen",
   "infoTitle": "Die Info",
   "pricingTitle": "Preisgestaltung",
+  "productFaceAnimator": "Gesichtsanimator",
   "productTts": "Text zu Sprache",
   "productUploadModels": "Modelle hochladen",
   "productVc": "Stimme zu Stimme",

packages/fakeyou.com/public/locales/en/Footer.json

@@ -10,6 +10,7 @@
   "infoPrivacyPolicy": "Privacy Policy",
   "infoTerms": "Terms of Use",
   "infoTitle": "Info",
+  "productFaceAnimator": "Face Animator",
   "productTts": "Text to Speech",
   "productUploadModels": "Upload Models",
   "productVc": "Voice to Voice",

packages/fakeyou.com/public/locales/en/TopNav.json

@@ -13,6 +13,7 @@
   "infoTerms": "Terms of Use",
   "infoTitle": "Info",
   "pricingTitle": "Pricing",
+  "productFaceAnimator": "Face Animator",
   "productTts": "Text to Speech",
   "productUploadModels": "Upload Models",
   "productVc": "Voice to Voice",

packages/fakeyou.com/public/locales/es/Footer.json

@@ -9,6 +9,7 @@
   "infoPrivacyPolicy": "política de privacidad",
   "infoTerms": "Condiciones de uso",
   "infoTitle": "Información",
+  "productFaceAnimator": "Animador de rostros",
   "productTts": "Texto a voz",
   "productUploadModels": "Subir modelos",
   "productVc": "Voz a Voz",

packages/fakeyou.com/public/locales/es/TopNav.json

@@ -12,6 +12,7 @@
   "infoTerms": "Condiciones de uso",
   "infoTitle": "Información",
   "pricingTitle": "Precios",
+  "productFaceAnimator": "Animador de rostros",
   "productTts": "Texto a voz",
   "productUploadModels": "Subir modelos",
   "productVc": "Voz a Voz",

packages/fakeyou.com/public/locales/fr/Footer.json

@@ -9,6 +9,7 @@
   "infoPrivacyPolicy": "politique de confidentialité",
   "infoTerms": "Conditions d'utilisation",
   "infoTitle": "Info",
+  "productFaceAnimator": "Animateur de visage",
   "productTts": "Texte pour parler",
   "productUploadModels": "Télécharger des modèles",
   "productVc": "Voix à voix",

packages/fakeyou.com/public/locales/fr/TopNav.json

@@ -12,6 +12,7 @@
   "infoTerms": "Conditions d'utilisation",
   "infoTitle": "Info",
   "pricingTitle": "Tarifs",
+  "productFaceAnimator": "Animateur de visage",
   "productTts": "Texte pour parler",
   "productUploadModels": "Télécharger des modèles",
   "productVc": "Voix à voix",

packages/fakeyou.com/public/locales/hi/Footer.json

@@ -9,6 +9,7 @@
   "infoPrivacyPolicy": "गोपनीयता नीति",
   "infoTerms": "उपयोग की शर्तें",
   "infoTitle": "जानकारी",
+  "productFaceAnimator": "फेस एनिमेटर",
   "productTts": "भाषण के पाठ",
   "productUploadModels": "मॉडल अपलोड करें",
   "productVc": "आवाज से आवाज",

packages/fakeyou.com/public/locales/hi/TopNav.json

@@ -12,6 +12,7 @@
   "infoTerms": "उपयोग की शर्तें",
   "infoTitle": "जानकारी",
   "pricingTitle": "मूल्य निर्धारण",
+  "productFaceAnimator": "फेस एनिमेटर",
   "productTts": "भाषण के पाठ",
   "productUploadModels": "मॉडल अपलोड करें",
   "productVc": "आवाज से आवाज",

packages/fakeyou.com/public/locales/id/Footer.json

@@ -9,6 +9,7 @@
   "infoPrivacyPolicy": "Kebijakan pribadi",
   "infoTerms": "Syarat Penggunaan",
   "infoTitle": "Informasi",
+  "productFaceAnimator": "Animator Wajah",
   "productTts": "Teks pidato",
   "productUploadModels": "Unggah Model",
   "productVc": "Suara ke Suara",

packages/fakeyou.com/public/locales/id/TopNav.json

@@ -12,6 +12,7 @@
   "infoTerms": "Syarat Penggunaan",
   "infoTitle": "Informasi",
   "pricingTitle": "Harga",
+  "productFaceAnimator": "Animator Wajah",
   "productTts": "Teks pidato",
   "productUploadModels": "Unggah Model",
   "productVc": "Suara ke Suara",

packages/fakeyou.com/public/locales/it/Footer.json

@@ -9,6 +9,7 @@
   "infoPrivacyPolicy": "politica sulla riservatezza",
   "infoTerms": "Termini di utilizzo",
   "infoTitle": "Informazioni",
+  "productFaceAnimator": "Animatore di volti",
   "productTts": "Sintesi vocale da testo",
   "productUploadModels": "Carica modelli",
   "productVc": "Da voce a voce",

packages/fakeyou.com/public/locales/it/TopNav.json

@@ -12,6 +12,7 @@
   "infoTerms": "Termini di utilizzo",
   "infoTitle": "Informazioni",
   "pricingTitle": "Prezzi",
+  "productFaceAnimator": "Animatore di volti",
   "productTts": "Sintesi vocale da testo",
   "productUploadModels": "Carica modelli",
   "productVc": "Da voce a voce",

packages/fakeyou.com/public/locales/ja/Footer.json

@@ -9,6 +9,7 @@
   "infoPrivacyPolicy": "プライバシーポリシー",
   "infoTerms": "利用規約",
   "infoTitle": "情報",
+  "productFaceAnimator": "フェイスアニメーター",
   "productTts": "テキスト読み上げ",
   "productUploadModels": "モデルのアップロード",
   "productVc": "声から声へ",

packages/fakeyou.com/public/locales/ja/TopNav.json

@@ -12,6 +12,7 @@
   "infoTerms": "利用規約",
   "infoTitle": "情報",
   "pricingTitle": "価格設定",
+  "productFaceAnimator": "フェイスアニメーター",
   "productTts": "テキスト読み上げ",
   "productUploadModels": "モデルのアップロード",
   "productVc": "声から声へ",

packages/fakeyou.com/public/locales/ko/Footer.json

@@ -9,6 +9,7 @@
   "infoPrivacyPolicy": "개인 정보 정책",
   "infoTerms": "이용약관",
   "infoTitle": "정보",
+  "productFaceAnimator": "얼굴 애니메이터",
   "productTts": "텍스트 음성 변환",
   "productUploadModels": "모델 업로드",
   "productVc": "음성 대 음성",

packages/fakeyou.com/public/locales/ko/TopNav.json

@@ -12,6 +12,7 @@
   "infoTerms": "이용약관",
   "infoTitle": "정보",
   "pricingTitle": "가격",
+  "productFaceAnimator": "얼굴 애니메이터",
   "productTts": "텍스트 음성 변환",
   "productUploadModels": "모델 업로드",
   "productVc": "음성 대 음성",

packages/fakeyou.com/public/locales/pt/Footer.json

@@ -9,6 +9,7 @@
   "infoPrivacyPolicy": "política de Privacidade",
   "infoTerms": "Termos de uso",
   "infoTitle": "Informações",
+  "productFaceAnimator": "Animador facial",
   "productTts": "Texto para fala",
   "productUploadModels": "Carregar modelos",
   "productVc": "Voz para Voz",

packages/fakeyou.com/public/locales/pt/TopNav.json

@@ -12,6 +12,7 @@
   "infoTerms": "Termos de uso",
   "infoTitle": "Informações",
   "pricingTitle": "Preços",
+  "productFaceAnimator": "Animador facial",
   "productTts": "Texto para fala",
   "productUploadModels": "Carregar modelos",
   "productVc": "Voz para Voz",

packages/fakeyou.com/public/locales/ru/Footer.json

@@ -9,6 +9,7 @@
   "infoPrivacyPolicy": "политика конфиденциальности",
   "infoTerms": "Условия эксплуатации",
   "infoTitle": "Информация",
+  "productFaceAnimator": "Лицевой Аниматор",
   "productTts": "Текст в речь",
   "productUploadModels": "Загрузить модели",
   "productVc": "Голос в голос",

packages/fakeyou.com/public/locales/ru/TopNav.json

@@ -12,6 +12,7 @@
   "infoTerms": "Условия эксплуатации",
   "infoTitle": "Информация",
   "pricingTitle": "Цены",
+  "productFaceAnimator": "Лицевой Аниматор",
   "productTts": "Текст в речь",
   "productUploadModels": "Загрузить модели",
   "productVc": "Голос в голос",

packages/fakeyou.com/public/locales/th/Footer.json

@@ -9,6 +9,7 @@
   "infoPrivacyPolicy": "นโยบายความเป็นส่วนตัว",
   "infoTerms": "ข้อกำหนดการใช้งาน",
   "infoTitle": "ข้อมูล",
+  "productFaceAnimator": "แอนิเมชั่นใบหน้า",
   "productTts": "ข้อความเป็นคำพูด",
   "productUploadModels": "อัพโหลดโมเดล",
   "productVc": "เสียงเป็นเสียง",

packages/fakeyou.com/public/locales/th/TopNav.json

@@ -12,6 +12,7 @@
   "infoTerms": "ข้อกำหนดการใช้งาน",
   "infoTitle": "ข้อมูล",
   "pricingTitle": "ราคา",
+  "productFaceAnimator": "แอนิเมชั่นใบหน้า",
   "productTts": "ข้อความเป็นคำพูด",
   "productUploadModels": "อัพโหลดโมเดล",
   "productVc": "เสียงเป็นเสียง",

packages/fakeyou.com/public/locales/tr/Footer.json

@@ -9,6 +9,7 @@
   "infoPrivacyPolicy": "Gizlilik Politikası",
   "infoTerms": "Kullanım Şartları",
   "infoTitle": "Bilgi",
+  "productFaceAnimator": "Yüz Animatörü",
   "productTts": "Konuşma metni",
   "productUploadModels": "Modelleri Yükle",
   "productVc": "Sesten Sese",

packages/fakeyou.com/public/locales/tr/TopNav.json

@@ -12,6 +12,7 @@
   "infoTerms": "Kullanım Şartları",
   "infoTitle": "Bilgi",
   "pricingTitle": "Fiyatlandırma",
+  "productFaceAnimator": "Yüz Animatörü",
   "productTts": "Konuşma metni",
   "productUploadModels": "Modelleri Yükle",
   "productVc": "Sesten Sese",

packages/fakeyou.com/public/locales/vi/Footer.json

@@ -9,6 +9,7 @@
   "infoPrivacyPolicy": "Chính sách bảo mật",
   "infoTerms": "Điều khoản sử dụng",
   "infoTitle": "Thông tin",
+  "productFaceAnimator": "khuôn mặt hoạt hình",
   "productTts": "Chuyển văn bản thành giọng nói",
   "productUploadModels": "Tải lên mô hình",
   "productVc": "Giọng nói thành giọng nói",

packages/fakeyou.com/public/locales/vi/TopNav.json

@@ -12,6 +12,7 @@
   "infoTerms": "Điều khoản sử dụng",
   "infoTitle": "Thông tin",
   "pricingTitle": "Định giá",
+  "productFaceAnimator": "khuôn mặt hoạt hình",
   "productTts": "Chuyển văn bản thành giọng nói",
   "productUploadModels": "Tải lên mô hình",
   "productVc": "Giọng nói thành giọng nói",

packages/fakeyou.com/public/locales/zh-Hans/Footer.json

@@ -9,6 +9,7 @@
   "infoPrivacyPolicy": "隐私政策",
   "infoTerms": "使用条款",
   "infoTitle": "信息",
+  "productFaceAnimator": "脸部动画师",
   "productTts": "文字转语音",
   "productUploadModels": "上传模型",
   "productVc": "语音到语音",

packages/fakeyou.com/public/locales/zh-Hans/TopNav.json

@@ -12,6 +12,7 @@
   "infoTerms": "使用条款",
   "infoTitle": "信息",
   "pricingTitle": "价钱",
+  "productFaceAnimator": "脸部动画师",
   "productTts": "文字转语音",
   "productUploadModels": "上传模型",
   "productVc": "语音到语音",

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

@@ -58,7 +58,7 @@ function FooterNav(props: Props) {
         pending_svc_jobs: 0,
         pending_rvc_jobs: 0,
         pending_face_animation_jobs: 0,
-      }
+      },
     },
     legacy_tts: {
       pending_job_count: 0,
@@ -213,6 +213,10 @@ function FooterNav(props: Props) {
                 <Link to="/voice-conversion">{t("productVc")}</Link>
               </li>
 
+              <li>
+                <Link to="/face-animation">{t("productFaceAnimator")}</Link>
+              </li>
+
               <li>
                 <Link to="/video">{t("productVideo")}</Link>
               </li>

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

@@ -27,6 +27,7 @@ import "tippy.js/animations/shift-away.css";
 import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
 import { Analytics } from "../../../common/Analytics";
 import {
+  faFaceViewfinder,
   faFileArrowUp,
   faMessageDots,
   faMicrophoneStand,
@@ -244,6 +245,15 @@ function TopNav(props: Props) {
                         {t("productVc")}
                       </Link>
                     </li>
+                    <li data-bs-toggle="offcanvas">
+                      <Link className="dropdown-item" to="/face-animation">
+                        <FontAwesomeIcon
+                          icon={faFaceViewfinder}
+                          className="me-2"
+                        />
+                        {t("productFaceAnimator")}
+                      </Link>
+                    </li>
                     <li data-bs-toggle="offcanvas">
                       <Link className="dropdown-item" to="/video">
                         <FontAwesomeIcon icon={faVideo} className="me-2" />

packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx

@@ -38,16 +38,18 @@ interface LipSyncProps {
   cropping: any;
   imageProps: any;
   index: number;
-  orientation: any;
-  orientationChange: any;
+  highQuality: any;
+  highQualityChange: any;
+  still: any;
+  stillChange: any;
   style: any;
   toggle: any;
   enqueueInferenceJob: any;
   sessionSubscriptionsWrapper: any;
   t: any;
   inferenceJobsByCategory: any;
-  watermark: any;
-  watermarkChange: any;
+  removeWatermark: any;
+  removeWatermarkChange: any;
 }
 interface EditorProps {
   sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
@@ -68,13 +70,15 @@ const InputPage = ({
   cropping,
   cropChange,
   imageProps,
-  orientation,
-  orientationChange,
+  highQuality,
+  highQualityChange,
+  still,
+  stillChange,
   toggle,
   style,
   t,
-  watermark,
-  watermarkChange,
+  removeWatermark,
+  removeWatermarkChange,
 }: LipSyncProps) => {
 
   return  <animated.div {...{ className: "lipsync-editor row", style }}>
@@ -87,13 +91,18 @@ const InputPage = ({
         }}
       />
       <label {...{ class: "sub-title", }}>Watermark</label>
-      <Checkbox {...{ checked: watermark, label: "Disable (premium only)", onChange: watermarkChange }}/>
-      <label {...{ class: "sub-title", }}>Orientation</label>
-      <Radio {...{ label: "Landscape", name: "landscape", onChange: orientationChange, value: orientation }}/>
-      <Radio {...{ label: "Portait", name: "portrait", onChange: orientationChange, value: orientation }}/>
+      <Checkbox {...{ checked: removeWatermark, label: "Remove (premium only)", onChange: removeWatermarkChange }}/>
+      
+      <label {...{ class: "sub-title", }}>Quality</label>
+      <Checkbox {...{ checked: highQuality, label: "High Quality", onChange: highQualityChange}}/>
+
       <label {...{ class: "sub-title", }}>Cropping</label>
-      <Radio {...{ label: "Cropped", name: "cropped", onChange: cropChange, value: cropping }}/>
-      <Radio {...{ label: "Full size (Premium only)", name: "fullSize", onChange: cropChange, value: cropping }}/>
+      <Radio {...{ label: "Full", name: "full", onChange: cropChange, value: cropping }}/>
+      <Radio {...{ label: "Crop", name: "crop", onChange: cropChange, value: cropping }}/>
+      <Radio {...{ label: "Close Crop", name: "close_crop", onChange: cropChange, value: cropping }}/>
+
+      <label {...{ class: "sub-title", }}>Make Animation More Still</label>
+      <Checkbox {...{ checked: still, label: "Still", onChange: stillChange}}/>
       <label {...{ class: "sub-title", }}>Animation style</label>
       <NumberSlider {...{ min: 0, max: 32, onChange: animationChange, value: animationStyle }}/>
     </div>
@@ -170,15 +179,17 @@ export default function LipsyncEditor({
 
 
   const [animationStyle,animationStyleSet] = useState(0);
-  const [cropping,croppingSet] = useState("cropped");
-  const [orientation,orientationSet] = useState("landscape");
-  const [watermark,watermarkSet] = useState(false);
+  const [cropping,croppingSet] = useState("full");
+  const [removeWatermark,removeWatermarkSet] = useState(false);
+  const [highQuality,highQualitySet] = useState(true);
+  const [still,stillSet] = useState(false);
 
   const animationChange = ({ target }: any) => animationStyleSet(target.value);
   const cropChange = ({ target }: any) => croppingSet(target.value);
-  const orientationChange = ({ target }: any) => orientationSet(target.value);
-  const watermarkChange = ({ target }: any) => watermarkSet(target.checked);
-  const clearInputs = () => { animationStyleSet(0); croppingSet("cropped"); orientationSet("landscape"); watermarkSet(false);  }
+  const removeWatermarkChange = ({ target }: any) => removeWatermarkSet(target.checked);
+  const highQualityChange = ({ target }: any) => highQualitySet(target.checked);
+  const stillChange = ({ target }: any) => stillSet(target.checked);
+  const clearInputs = () => { animationStyleSet(0); croppingSet("crop"); removeWatermarkSet(false);  }
 
   const makeRequest = (mode: number) => ({
     uuid_idempotency_token: uuidv4(),
@@ -219,6 +230,10 @@ export default function LipsyncEditor({
             image_source: {
               maybe_media_upload_token: responses.image.upload_token,
             },
+            crop: cropping,
+            make_still: still,
+            high_quality: highQuality,
+            remove_watermark: removeWatermark,
           });
         }
       })
@@ -271,16 +286,18 @@ export default function LipsyncEditor({
                 cropping,
                 enqueueInferenceJob,
                 imageProps,
-                orientation,
-                orientationChange,
+                highQuality,
+                highQualityChange,
+                still,
+                stillChange,
                 sessionSubscriptionsWrapper,
                 inferenceJobsByCategory,
                 index,
                 t,
                 toggle: { audio: readyMedia(1), image: readyMedia(0) },
                 style,
-                watermark,
-                watermarkChange,
+                removeWatermark,
+                removeWatermarkChange,
               }}
             />
           ) : (