From 1110b048a410e219e217a33df6e1d10dd4a70c2b Mon Sep 17 00:00:00 2001
From: olivicmic <vic@vics.pics>
Date: Fri, 29 Sep 2023 11:47:42 -0700
Subject: [PATCH 1/5] added controls to face animation image input

---
 .../components/common/Checkbox/Checkbox.tsx   |  19 ++++
 .../src/components/common/Checkbox/index.tsx  |   1 +
 .../common/ImageInput/ImageInput.scss         |   7 +-
 .../common/NumberSlider/NumberSlider.tsx      |  16 +++
 .../components/common/NumberSlider/index.ts   |   1 +
 .../src/components/common/Radio/Radio.scss    |   9 ++
 .../src/components/common/Radio/Radio.tsx     |  20 ++++
 .../src/components/common/Radio/index.tsx     |   1 +
 .../src/components/common/Slider/Slider.tsx   |  12 ++
 .../src/components/common/Slider/index.ts     |   1 +
 .../src/components/common/index.tsx           |  12 +-
 .../fakeyou.com/src/resources/makeClass.ts    |   5 +
 .../LipsyncEditor/FaceAnimatorTitle.tsx       |   2 +
 .../lipsync/LipsyncEditor/LipsyncEditor.scss  |   5 +
 .../lipsync/LipsyncEditor/LipsyncEditor.tsx   | 106 +++++++++++++-----
 15 files changed, 184 insertions(+), 33 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/Checkbox/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/NumberSlider/index.ts
 create mode 100644 packages/fakeyou.com/src/components/common/Radio/Radio.scss
 create mode 100644 packages/fakeyou.com/src/components/common/Radio/Radio.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/Radio/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/Slider/Slider.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/Slider/index.ts
 create mode 100644 packages/fakeyou.com/src/resources/makeClass.ts

diff --git a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
new file mode 100644
index 0000000000..35fa002acf
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useId } from "hooks";
+import makeClass from "resources/makeClass";
+
+interface Props {
+  checked?: boolean;
+  className?: string;
+  label?: string;
+  name?: string;
+  onChange?: any;
+}
+
+export default function Checkbox({ checked = false, className = "", label = "", name = "", onChange }: Props) {
+  const id = "checkbox-" + useId();
+  return <div {...makeClass("form-check",className) }>
+    <input {...{ className: "form-check-input", id, type: "checkbox", name, onChange, checked }} />
+    { label && <label {...{ className: "form-check-label", for: id, }}>{ label }</label> } 
+  </div>
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Checkbox/index.tsx b/packages/fakeyou.com/src/components/common/Checkbox/index.tsx
new file mode 100644
index 0000000000..6fb014c8a4
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Checkbox/index.tsx
@@ -0,0 +1 @@
+export { default } from './Checkbox';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss b/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss
index 21d1aaeced..612038a77e 100644
--- a/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss
+++ b/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss
@@ -3,9 +3,10 @@
 
 
 .image-upload-frame {
-	@include breakpoint(min-width 992px) {
-		aspect-ratio: 1/1;
-	}
+	aspect-ratio: 4/3;
+	// @include breakpoint(min-width 992px) {
+	// 	aspect-ratio: 1/1;
+	// }
 }
 
 .fy-image-uploader {
diff --git a/packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.tsx b/packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.tsx
new file mode 100644
index 0000000000..7969ca429c
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Slider } from "components/common";
+
+interface Props {
+  max?: number;
+  min?: number;
+  onChange?: any;
+  value?: number;
+}
+
+export default function NumberSlider({ max, min, onChange, value }: Props) {
+  return <>
+  <Slider {...{ max, min, onChange, value }}/>
+  <input {...{ min, max, onChange, type: "number", value }}/>
+  </>;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/NumberSlider/index.ts b/packages/fakeyou.com/src/components/common/NumberSlider/index.ts
new file mode 100644
index 0000000000..1d210934ba
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/NumberSlider/index.ts
@@ -0,0 +1 @@
+export { default } from './NumberSlider';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Radio/Radio.scss b/packages/fakeyou.com/src/components/common/Radio/Radio.scss
new file mode 100644
index 0000000000..50b1846765
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Radio/Radio.scss
@@ -0,0 +1,9 @@
+.fy-radio-input {
+	display: inline-block;
+	margin-right: 1rem;
+
+	input[type=radio] {
+		margin-right: .5rem;
+		background-color: red;
+	}
+}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Radio/Radio.tsx b/packages/fakeyou.com/src/components/common/Radio/Radio.tsx
new file mode 100644
index 0000000000..d10e96cf6b
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Radio/Radio.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useId } from "hooks";
+import makeClass from "resources/makeClass";
+import "./Radio.scss";
+
+interface Props {
+  className?: string;
+  label?: string;
+  name?: string;
+  onChange?: any;
+  value?: string;
+}
+
+export default function Radio({ className = "", label = "", name = "", onChange = () => {}, value }: Props) {
+  const id = "checkbox-" + useId();
+  return <div {...{ ...makeClass("fy-radio-input",className), onChange }}>
+    <input {...{ checked: value === name, id, type: "radio", name, value: name }}/>
+    { label && <label {...{ class: "form-check-label", for: id }}>{ label }</label> }
+  </div>;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Radio/index.tsx b/packages/fakeyou.com/src/components/common/Radio/index.tsx
new file mode 100644
index 0000000000..2237d4c67b
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Radio/index.tsx
@@ -0,0 +1 @@
+export { default } from './Radio';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Slider/Slider.tsx b/packages/fakeyou.com/src/components/common/Slider/Slider.tsx
new file mode 100644
index 0000000000..a591c2f815
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Slider/Slider.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface Props {
+  max?: number;
+  min?: number;
+  onChange?: any;
+  value?: number;
+}
+
+export default function Slider({ max, min, onChange, value }: Props) {
+  return <input {...{ type: "range", min, max, onChange, value }}/>;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Slider/index.ts b/packages/fakeyou.com/src/components/common/Slider/index.ts
new file mode 100644
index 0000000000..eed87a07a4
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Slider/index.ts
@@ -0,0 +1 @@
+export { default } from './Slider';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx
index fc02269cf2..8f896c4666 100644
--- a/packages/fakeyou.com/src/components/common/index.tsx
+++ b/packages/fakeyou.com/src/components/common/index.tsx
@@ -1,17 +1,25 @@
 import AudioInput from './AudioInput';
-import ImageInput from './ImageInput';
+import Checkbox from './Checkbox';
 import FileActions from './FileActions';
 import FileDetails from './FileDetails';
 import FileWrapper from './FileWrapper';
 import FileLabel from './FileLabel';
+import ImageInput from './ImageInput';
+import NumberSlider from './NumberSlider';
+import Radio from './Radio';
+import Slider from './Slider';
 import Spinner from './Spinner';
 
 export {
 	AudioInput,
-	ImageInput,
+	Checkbox,
 	FileActions,
 	FileDetails,
 	FileWrapper,
 	FileLabel,
+	ImageInput,
+	NumberSlider,
+	Radio,
+	Slider,
 	Spinner
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/resources/makeClass.ts b/packages/fakeyou.com/src/resources/makeClass.ts
new file mode 100644
index 0000000000..2c08fb55c2
--- /dev/null
+++ b/packages/fakeyou.com/src/resources/makeClass.ts
@@ -0,0 +1,5 @@
+const makeClass = (base: string, add?: string) => ({
+	className: `${ base }${ add ? " " + add : "" }`
+});
+
+export default makeClass;
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorTitle.tsx b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorTitle.tsx
index e84f271e37..cfe099fc67 100644
--- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorTitle.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorTitle.tsx
@@ -40,6 +40,7 @@ export default function FaceAnimatorTitle({ ...rest }) {
   const {
     audioProps,
     audioReady,
+    clearInputs,
     imageProps,
     imageReady,
     indexSet,
@@ -58,6 +59,7 @@ export default function FaceAnimatorTitle({ ...rest }) {
     if (page === 2) {
       imageProps.clear();
       audioProps.clear();
+      clearInputs();
       indexSet(0);
     } else if (!incomplete && !working) submit();
   };
diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss
index bed71245ae..be1de2ec1e 100644
--- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss
+++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss
@@ -12,6 +12,11 @@ $under992: max-width 992px;
       margin-bottom: 1rem;
     }
   }
+
+  .sub-title {
+    display: block;
+    margin-top: 1rem;
+  }
 }
 
 .progress-header {
diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
index 542eaea13e..a51e461e48 100644
--- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { animated, useTransition } from "@react-spring/web";
 import { v4 as uuidv4 } from "uuid";
 import { useFile, useLocalize } from "hooks";
-import { AudioInput, ImageInput, Spinner } from "components/common";
+import { AudioInput, Checkbox, ImageInput, NumberSlider, Radio, Spinner } from "components/common";
 import { springs } from "resources";
 import {
   UploadAudio,
@@ -30,16 +30,24 @@ import {
 } from "@storyteller/components/src/jobs/InferenceJob";
 
 interface LipSyncProps {
+  animationChange: any;
+  animationStyle: any;
   audioProps: any;
   children?: any;
+  cropChange: any;
+  cropping: any;
   imageProps: any;
   index: number;
-  toggle: any;
+  orientation: any;
+  orientationChange: any;
   style: any;
+  toggle: any;
   enqueueInferenceJob: any;
   sessionSubscriptionsWrapper: any;
   t: any;
   inferenceJobsByCategory: any;
+  watermark: any;
+  watermarkChange: any;
 }
 interface EditorProps {
   sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
@@ -54,37 +62,54 @@ interface EditorProps {
 const softSpring = { config: { mass: 1, tension: 80, friction: 10 } };
 
 const InputPage = ({
+  animationChange,
+  animationStyle,
   audioProps,
+  cropping,
+  cropChange,
   imageProps,
+  orientation,
+  orientationChange,
   toggle,
   style,
   t,
+  watermark,
+  watermarkChange,
 }: LipSyncProps) => {
-  return (
-    <animated.div {...{ className: "lipsync-editor row", style }}>
-      <div {...{ className: "media-input-column col-lg-6" }}>
-        <h5>{t("headings.image")}</h5>
-        <ImageInput
-          {...{
-            ...imageProps,
-            onRest: () => toggle.image(imageProps.file ? true : false),
-          }}
-        />
-      </div>
-      <div {...{ className: "media-input-column col-lg-6" }}>
-        <h5>{t("headings.audio")}</h5>
-        <AudioInput
-          {...{
-            ...audioProps,
-            onRest: (p: any, c: any, item: any, l: any) => {
-              toggle.audio(!!audioProps.file);
-            },
-            hideActions: true,
-          }}
-        />
-      </div>
-    </animated.div>
-  );
+
+  return  <animated.div {...{ className: "lipsync-editor row", style }}>
+    <div {...{ className: "media-input-column col-lg-6" }}>
+      <h5>{t("headings.image")}</h5>
+      <ImageInput
+        {...{
+          ...imageProps,
+          onRest: () => toggle.image(imageProps.file ? true : false),
+        }}
+      />
+      <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 }}/>
+      <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 }}/>
+      <label {...{ class: "sub-title", }}>Animation style</label>
+      <NumberSlider {...{ min: 0, max: 32, onChange: animationChange, value: animationStyle }}/>
+    </div>
+    <div {...{ className: "media-input-column col-lg-6" }}>
+      <h5>{t("headings.audio")}</h5>
+      <AudioInput
+        {...{
+          ...audioProps,
+          onRest: (p: any, c: any, item: any, l: any) => {
+            toggle.audio(!!audioProps.file);
+          },
+          hideActions: true,
+        }}
+      />
+    </div>
+  </animated.div>;
 };
 
 const Working = ({ audioProps, imageProps, index, style, t }: LipSyncProps) => {
@@ -143,6 +168,18 @@ export default function LipsyncEditor({
   const imageProps = useFile({}); // contains upload inout state and controls, see docs
   const [index, indexSet] = useState<number>(0); // index  = slideshow slide position
 
+
+  const [animationStyle,animationStyleSet] = useState(0);
+  const [cropping,croppingSet] = useState("cropped");
+  const [orientation,orientationSet] = useState("landscape");
+  const [watermark,watermarkSet] = 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 makeRequest = (mode: number) => ({
     uuid_idempotency_token: uuidv4(),
     file: mode ? imageProps.file : audioProps.file,
@@ -171,6 +208,10 @@ export default function LipsyncEditor({
         if ("upload_token" in responses.image) {
           indexSet(3); // set face animator API working page
           return EnqueueFaceAnimation({
+            // backend_animation_key: animationStyle,
+            // backend_cropping_key: cropping === "cropped",
+            // backend_orientation_key: orientation === "landscape",
+            // backend_watermark_key: watermark,
             uuid_idempotency_token: uuidv4(),
             audio_source: {
               maybe_media_upload_token: responses.audio.upload_token,
@@ -198,6 +239,7 @@ export default function LipsyncEditor({
   const headerProps = {
     audioProps,
     audioReady,
+    clearInputs,
     imageProps,
     imageReady,
     indexSet,
@@ -223,14 +265,22 @@ export default function LipsyncEditor({
             <Page
               {...{
                 audioProps,
-                imageProps,
+                animationStyle,
+                animationChange,
+                cropChange,
+                cropping,
                 enqueueInferenceJob,
+                imageProps,
+                orientation,
+                orientationChange,
                 sessionSubscriptionsWrapper,
                 inferenceJobsByCategory,
                 index,
                 t,
                 toggle: { audio: readyMedia(1), image: readyMedia(0) },
                 style,
+                watermark,
+                watermarkChange,
               }}
             />
           ) : (

From f502b8cf6daf72fb4193f9880d637e67a8c0314a Mon Sep 17 00:00:00 2001
From: olivicmic <vic@vics.pics>
Date: Fri, 29 Sep 2023 11:47:42 -0700
Subject: [PATCH 2/5] added controls to face animation image input

---
 .../components/common/Checkbox/Checkbox.tsx   |  19 ++++
 .../src/components/common/Checkbox/index.tsx  |   1 +
 .../common/ImageInput/ImageInput.scss         |   7 +-
 .../common/NumberSlider/NumberSlider.tsx      |  16 +++
 .../components/common/NumberSlider/index.ts   |   1 +
 .../src/components/common/Radio/Radio.scss    |   9 ++
 .../src/components/common/Radio/Radio.tsx     |  20 ++++
 .../src/components/common/Radio/index.tsx     |   1 +
 .../src/components/common/Slider/Slider.tsx   |  12 ++
 .../src/components/common/Slider/index.ts     |   1 +
 .../src/components/common/index.tsx           |  12 +-
 .../fakeyou.com/src/resources/makeClass.ts    |   5 +
 .../LipsyncEditor/FaceAnimatorTitle.tsx       |   2 +
 .../lipsync/LipsyncEditor/LipsyncEditor.scss  |   5 +
 .../lipsync/LipsyncEditor/LipsyncEditor.tsx   | 106 +++++++++++++-----
 15 files changed, 184 insertions(+), 33 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/Checkbox/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/NumberSlider/index.ts
 create mode 100644 packages/fakeyou.com/src/components/common/Radio/Radio.scss
 create mode 100644 packages/fakeyou.com/src/components/common/Radio/Radio.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/Radio/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/Slider/Slider.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/Slider/index.ts
 create mode 100644 packages/fakeyou.com/src/resources/makeClass.ts

diff --git a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
new file mode 100644
index 0000000000..35fa002acf
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useId } from "hooks";
+import makeClass from "resources/makeClass";
+
+interface Props {
+  checked?: boolean;
+  className?: string;
+  label?: string;
+  name?: string;
+  onChange?: any;
+}
+
+export default function Checkbox({ checked = false, className = "", label = "", name = "", onChange }: Props) {
+  const id = "checkbox-" + useId();
+  return <div {...makeClass("form-check",className) }>
+    <input {...{ className: "form-check-input", id, type: "checkbox", name, onChange, checked }} />
+    { label && <label {...{ className: "form-check-label", for: id, }}>{ label }</label> } 
+  </div>
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Checkbox/index.tsx b/packages/fakeyou.com/src/components/common/Checkbox/index.tsx
new file mode 100644
index 0000000000..6fb014c8a4
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Checkbox/index.tsx
@@ -0,0 +1 @@
+export { default } from './Checkbox';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss b/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss
index 21d1aaeced..612038a77e 100644
--- a/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss
+++ b/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss
@@ -3,9 +3,10 @@
 
 
 .image-upload-frame {
-	@include breakpoint(min-width 992px) {
-		aspect-ratio: 1/1;
-	}
+	aspect-ratio: 4/3;
+	// @include breakpoint(min-width 992px) {
+	// 	aspect-ratio: 1/1;
+	// }
 }
 
 .fy-image-uploader {
diff --git a/packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.tsx b/packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.tsx
new file mode 100644
index 0000000000..7969ca429c
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Slider } from "components/common";
+
+interface Props {
+  max?: number;
+  min?: number;
+  onChange?: any;
+  value?: number;
+}
+
+export default function NumberSlider({ max, min, onChange, value }: Props) {
+  return <>
+  <Slider {...{ max, min, onChange, value }}/>
+  <input {...{ min, max, onChange, type: "number", value }}/>
+  </>;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/NumberSlider/index.ts b/packages/fakeyou.com/src/components/common/NumberSlider/index.ts
new file mode 100644
index 0000000000..1d210934ba
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/NumberSlider/index.ts
@@ -0,0 +1 @@
+export { default } from './NumberSlider';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Radio/Radio.scss b/packages/fakeyou.com/src/components/common/Radio/Radio.scss
new file mode 100644
index 0000000000..50b1846765
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Radio/Radio.scss
@@ -0,0 +1,9 @@
+.fy-radio-input {
+	display: inline-block;
+	margin-right: 1rem;
+
+	input[type=radio] {
+		margin-right: .5rem;
+		background-color: red;
+	}
+}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Radio/Radio.tsx b/packages/fakeyou.com/src/components/common/Radio/Radio.tsx
new file mode 100644
index 0000000000..d10e96cf6b
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Radio/Radio.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useId } from "hooks";
+import makeClass from "resources/makeClass";
+import "./Radio.scss";
+
+interface Props {
+  className?: string;
+  label?: string;
+  name?: string;
+  onChange?: any;
+  value?: string;
+}
+
+export default function Radio({ className = "", label = "", name = "", onChange = () => {}, value }: Props) {
+  const id = "checkbox-" + useId();
+  return <div {...{ ...makeClass("fy-radio-input",className), onChange }}>
+    <input {...{ checked: value === name, id, type: "radio", name, value: name }}/>
+    { label && <label {...{ class: "form-check-label", for: id }}>{ label }</label> }
+  </div>;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Radio/index.tsx b/packages/fakeyou.com/src/components/common/Radio/index.tsx
new file mode 100644
index 0000000000..2237d4c67b
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Radio/index.tsx
@@ -0,0 +1 @@
+export { default } from './Radio';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Slider/Slider.tsx b/packages/fakeyou.com/src/components/common/Slider/Slider.tsx
new file mode 100644
index 0000000000..a591c2f815
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Slider/Slider.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface Props {
+  max?: number;
+  min?: number;
+  onChange?: any;
+  value?: number;
+}
+
+export default function Slider({ max, min, onChange, value }: Props) {
+  return <input {...{ type: "range", min, max, onChange, value }}/>;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Slider/index.ts b/packages/fakeyou.com/src/components/common/Slider/index.ts
new file mode 100644
index 0000000000..eed87a07a4
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Slider/index.ts
@@ -0,0 +1 @@
+export { default } from './Slider';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx
index fc02269cf2..8f896c4666 100644
--- a/packages/fakeyou.com/src/components/common/index.tsx
+++ b/packages/fakeyou.com/src/components/common/index.tsx
@@ -1,17 +1,25 @@
 import AudioInput from './AudioInput';
-import ImageInput from './ImageInput';
+import Checkbox from './Checkbox';
 import FileActions from './FileActions';
 import FileDetails from './FileDetails';
 import FileWrapper from './FileWrapper';
 import FileLabel from './FileLabel';
+import ImageInput from './ImageInput';
+import NumberSlider from './NumberSlider';
+import Radio from './Radio';
+import Slider from './Slider';
 import Spinner from './Spinner';
 
 export {
 	AudioInput,
-	ImageInput,
+	Checkbox,
 	FileActions,
 	FileDetails,
 	FileWrapper,
 	FileLabel,
+	ImageInput,
+	NumberSlider,
+	Radio,
+	Slider,
 	Spinner
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/resources/makeClass.ts b/packages/fakeyou.com/src/resources/makeClass.ts
new file mode 100644
index 0000000000..2c08fb55c2
--- /dev/null
+++ b/packages/fakeyou.com/src/resources/makeClass.ts
@@ -0,0 +1,5 @@
+const makeClass = (base: string, add?: string) => ({
+	className: `${ base }${ add ? " " + add : "" }`
+});
+
+export default makeClass;
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorTitle.tsx b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorTitle.tsx
index e84f271e37..cfe099fc67 100644
--- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorTitle.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorTitle.tsx
@@ -40,6 +40,7 @@ export default function FaceAnimatorTitle({ ...rest }) {
   const {
     audioProps,
     audioReady,
+    clearInputs,
     imageProps,
     imageReady,
     indexSet,
@@ -58,6 +59,7 @@ export default function FaceAnimatorTitle({ ...rest }) {
     if (page === 2) {
       imageProps.clear();
       audioProps.clear();
+      clearInputs();
       indexSet(0);
     } else if (!incomplete && !working) submit();
   };
diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss
index bed71245ae..be1de2ec1e 100644
--- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss
+++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss
@@ -12,6 +12,11 @@ $under992: max-width 992px;
       margin-bottom: 1rem;
     }
   }
+
+  .sub-title {
+    display: block;
+    margin-top: 1rem;
+  }
 }
 
 .progress-header {
diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
index 542eaea13e..a51e461e48 100644
--- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { animated, useTransition } from "@react-spring/web";
 import { v4 as uuidv4 } from "uuid";
 import { useFile, useLocalize } from "hooks";
-import { AudioInput, ImageInput, Spinner } from "components/common";
+import { AudioInput, Checkbox, ImageInput, NumberSlider, Radio, Spinner } from "components/common";
 import { springs } from "resources";
 import {
   UploadAudio,
@@ -30,16 +30,24 @@ import {
 } from "@storyteller/components/src/jobs/InferenceJob";
 
 interface LipSyncProps {
+  animationChange: any;
+  animationStyle: any;
   audioProps: any;
   children?: any;
+  cropChange: any;
+  cropping: any;
   imageProps: any;
   index: number;
-  toggle: any;
+  orientation: any;
+  orientationChange: any;
   style: any;
+  toggle: any;
   enqueueInferenceJob: any;
   sessionSubscriptionsWrapper: any;
   t: any;
   inferenceJobsByCategory: any;
+  watermark: any;
+  watermarkChange: any;
 }
 interface EditorProps {
   sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
@@ -54,37 +62,54 @@ interface EditorProps {
 const softSpring = { config: { mass: 1, tension: 80, friction: 10 } };
 
 const InputPage = ({
+  animationChange,
+  animationStyle,
   audioProps,
+  cropping,
+  cropChange,
   imageProps,
+  orientation,
+  orientationChange,
   toggle,
   style,
   t,
+  watermark,
+  watermarkChange,
 }: LipSyncProps) => {
-  return (
-    <animated.div {...{ className: "lipsync-editor row", style }}>
-      <div {...{ className: "media-input-column col-lg-6" }}>
-        <h5>{t("headings.image")}</h5>
-        <ImageInput
-          {...{
-            ...imageProps,
-            onRest: () => toggle.image(imageProps.file ? true : false),
-          }}
-        />
-      </div>
-      <div {...{ className: "media-input-column col-lg-6" }}>
-        <h5>{t("headings.audio")}</h5>
-        <AudioInput
-          {...{
-            ...audioProps,
-            onRest: (p: any, c: any, item: any, l: any) => {
-              toggle.audio(!!audioProps.file);
-            },
-            hideActions: true,
-          }}
-        />
-      </div>
-    </animated.div>
-  );
+
+  return  <animated.div {...{ className: "lipsync-editor row", style }}>
+    <div {...{ className: "media-input-column col-lg-6" }}>
+      <h5>{t("headings.image")}</h5>
+      <ImageInput
+        {...{
+          ...imageProps,
+          onRest: () => toggle.image(imageProps.file ? true : false),
+        }}
+      />
+      <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 }}/>
+      <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 }}/>
+      <label {...{ class: "sub-title", }}>Animation style</label>
+      <NumberSlider {...{ min: 0, max: 32, onChange: animationChange, value: animationStyle }}/>
+    </div>
+    <div {...{ className: "media-input-column col-lg-6" }}>
+      <h5>{t("headings.audio")}</h5>
+      <AudioInput
+        {...{
+          ...audioProps,
+          onRest: (p: any, c: any, item: any, l: any) => {
+            toggle.audio(!!audioProps.file);
+          },
+          hideActions: true,
+        }}
+      />
+    </div>
+  </animated.div>;
 };
 
 const Working = ({ audioProps, imageProps, index, style, t }: LipSyncProps) => {
@@ -143,6 +168,18 @@ export default function LipsyncEditor({
   const imageProps = useFile({}); // contains upload inout state and controls, see docs
   const [index, indexSet] = useState<number>(0); // index  = slideshow slide position
 
+
+  const [animationStyle,animationStyleSet] = useState(0);
+  const [cropping,croppingSet] = useState("cropped");
+  const [orientation,orientationSet] = useState("landscape");
+  const [watermark,watermarkSet] = 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 makeRequest = (mode: number) => ({
     uuid_idempotency_token: uuidv4(),
     file: mode ? imageProps.file : audioProps.file,
@@ -171,6 +208,10 @@ export default function LipsyncEditor({
         if ("upload_token" in responses.image) {
           indexSet(3); // set face animator API working page
           return EnqueueFaceAnimation({
+            // backend_animation_key: animationStyle,
+            // backend_cropping_key: cropping === "cropped",
+            // backend_orientation_key: orientation === "landscape",
+            // backend_watermark_key: watermark,
             uuid_idempotency_token: uuidv4(),
             audio_source: {
               maybe_media_upload_token: responses.audio.upload_token,
@@ -198,6 +239,7 @@ export default function LipsyncEditor({
   const headerProps = {
     audioProps,
     audioReady,
+    clearInputs,
     imageProps,
     imageReady,
     indexSet,
@@ -223,14 +265,22 @@ export default function LipsyncEditor({
             <Page
               {...{
                 audioProps,
-                imageProps,
+                animationStyle,
+                animationChange,
+                cropChange,
+                cropping,
                 enqueueInferenceJob,
+                imageProps,
+                orientation,
+                orientationChange,
                 sessionSubscriptionsWrapper,
                 inferenceJobsByCategory,
                 index,
                 t,
                 toggle: { audio: readyMedia(1), image: readyMedia(0) },
                 style,
+                watermark,
+                watermarkChange,
               }}
             />
           ) : (

From 78c8e610904fa976aa306cd0305d493880630fe7 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Sun, 1 Oct 2023 04:22:26 -0400
Subject: [PATCH 3/5] add additional args

---
 .../face_animation/EnqueueFaceAnimation.ts    |  5 ++
 .../lipsync/LipsyncEditor/LipsyncEditor.tsx   | 66 ++++++++++++-------
 2 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/packages/components/src/api/face_animation/EnqueueFaceAnimation.ts b/packages/components/src/api/face_animation/EnqueueFaceAnimation.ts
index 0beae23e82..8c404bab57 100644
--- a/packages/components/src/api/face_animation/EnqueueFaceAnimation.ts
+++ b/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 {
diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
index a51e461e48..86af634c81 100644
--- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
+++ b/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,19 @@ 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 +180,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 +231,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 +287,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,
               }}
             />
           ) : (

From 765ce1e8f875e8c2d9cbde5aecbe6bbc8dbac386 Mon Sep 17 00:00:00 2001
From: olivicmic <vic@vics.pics>
Date: Tue, 3 Oct 2023 13:44:33 -0700
Subject: [PATCH 4/5] added styled Checkbox and SegmentedButtons

---
 .../src/components/common/Check/Check.tsx     | 23 ++++++++++++++
 .../src/components/common/Check/index.ts      |  1 +
 .../components/common/Checkbox/Checkbox.scss  | 12 ++++++++
 .../components/common/Checkbox/Checkbox.tsx   | 21 +++++++++----
 .../common/SegmentButtons/SegmentButtons.scss | 30 +++++++++++++++++++
 .../common/SegmentButtons/SegmentButtons.tsx  | 19 ++++++++++++
 .../components/common/SegmentButtons/index.ts |  1 +
 .../src/components/common/index.tsx           |  4 +++
 .../lipsync/LipsyncEditor/LipsyncEditor.tsx   | 10 ++++---
 9 files changed, 112 insertions(+), 9 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/Check/Check.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/Check/index.ts
 create mode 100644 packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss
 create mode 100644 packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss
 create mode 100644 packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/SegmentButtons/index.ts

diff --git a/packages/fakeyou.com/src/components/common/Check/Check.tsx b/packages/fakeyou.com/src/components/common/Check/Check.tsx
new file mode 100644
index 0000000000..0c4a988a4d
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Check/Check.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { a, useSpring } from "@react-spring/web";
+
+interface Props {
+  checked?: boolean;
+}
+
+export default function Check({ checked }: Props) {
+  const style = useSpring({
+    config: { tension: 280, friction: 60 },
+    strokeDasharray: checked ? '28, 0' : '0,28'
+  });
+  return <a.polyline {...{
+    fill: "none",
+    points: "9.5 18 14.5 22 22.5 12",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "4",
+    strokeDashoffset: 4,
+    // ...rest,
+    style
+  }}/>;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Check/index.ts b/packages/fakeyou.com/src/components/common/Check/index.ts
new file mode 100644
index 0000000000..8478811f5b
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Check/index.ts
@@ -0,0 +1 @@
+export { default } from './Check';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss
new file mode 100644
index 0000000000..3d3cf2d470
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss
@@ -0,0 +1,12 @@
+@import "scss/colours.scss";
+
+.fy-checkbox {
+  background-color: $primary;
+  border-radius: .5rem;
+  cursor: pointer;
+  display: inline-block;
+  vertical-align: middle;
+  height: 2rem;
+  width: 2rem;
+  stroke: white;
+}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
index 35fa002acf..949409b055 100644
--- a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
+++ b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
-import { useId } from "hooks";
+import { a, useSpring } from "@react-spring/web";
+import { Check } from "components/common";
+import { useHover, useId } from "hooks";
 import makeClass from "resources/makeClass";
+import "./Checkbox.scss";
 
 interface Props {
   checked?: boolean;
@@ -10,10 +13,18 @@ interface Props {
   onChange?: any;
 }
 
-export default function Checkbox({ checked = false, className = "", label = "", name = "", onChange }: Props) {
+export default function Checkbox({ checked, className = "", label = "", name = "", onChange }: Props) {
+  const [hover, hoverEvents = {}] = useHover({});
+  const style = useSpring({
+    config: { tension: 120, friction: 14 },
+    backgroundColor: checked ? hover ? "#bb5a5d" : "#e66462" : hover ? "#bb5a5d" : "#39394c"
+  });
+  const onClick = ({ target }: any) => onChange({ target: { checked: !checked, name, type: 'checkbox' } });
   const id = "checkbox-" + useId();
-  return <div {...makeClass("form-check",className) }>
-    <input {...{ className: "form-check-input", id, type: "checkbox", name, onChange, checked }} />
-    { label && <label {...{ className: "form-check-label", for: id, }}>{ label }</label> } 
+  return <div {...{ ...makeClass("form-check",className),  }}>
+    <a.svg {...{ className: "fy-checkbox", onClick, style, ...hoverEvents }}>
+      <Check {...{ checked }}/>
+    </a.svg>
+    { label && <label {...{ className: "form-check-label", for: id, onClick }}>{ label }</label> } 
   </div>
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss b/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss
new file mode 100644
index 0000000000..e2589e3233
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss
@@ -0,0 +1,30 @@
+@import "scss/colours.scss";
+
+.fy-segment-buttons {
+	display: grid;
+	grid-auto-flow: column;
+	grid-auto-columns: 1fr;
+	gap: 2px;
+
+	li {
+		background-color: $secondary;
+		border-radius: .125rem;
+		cursor: pointer;
+		display: inline-flex;
+		flex: 1;
+		white-space: nowrap;
+		justify-content: center;
+		align-items: center;
+		height: 2rem;
+		padding: 0 .75rem;
+		transition: .25s background-color ease-in-out;
+
+		&:hover { background-color: lighten($secondary, 5%) !important; }
+		&:first-of-type { border-radius: .5rem .125rem .125rem .5rem; }
+		&:last-of-type { border-radius: .125rem .5rem .5rem .125rem; }
+		&.fy-selected-segment { 
+			background-color: $primary;
+			&:hover { background-color: lighten($primary, 5%) !important; }
+		}
+	}
+}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.tsx b/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.tsx
new file mode 100644
index 0000000000..d13c2384a6
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import "./SegmentButtons.scss";
+
+interface Props {
+  name?: string;
+  onChange?: any;
+  options?: any;
+  value?: string;
+}
+
+export default function SegmentButtons({ name, onChange, options = [], value: inValue = "" }: Props) {
+  // const onClick = ({ target }: any) => onChange();
+  return <ul {...{ className: "fy-segment-buttons" }}>
+    { options.map(({ label = "", value = "" },i: number) => <li {...{
+      ...value === inValue && { className: "fy-selected-segment" },
+      onClick: ({ target }: any) => onChange({ target: { name, type: "option", value } })
+    }}>{ label }</li>) }
+  </ul>;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/SegmentButtons/index.ts b/packages/fakeyou.com/src/components/common/SegmentButtons/index.ts
new file mode 100644
index 0000000000..7f140e026f
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/SegmentButtons/index.ts
@@ -0,0 +1 @@
+export { default } from './SegmentButtons';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx
index 8f896c4666..63363e3f37 100644
--- a/packages/fakeyou.com/src/components/common/index.tsx
+++ b/packages/fakeyou.com/src/components/common/index.tsx
@@ -1,4 +1,5 @@
 import AudioInput from './AudioInput';
+import Check from './Check';
 import Checkbox from './Checkbox';
 import FileActions from './FileActions';
 import FileDetails from './FileDetails';
@@ -7,11 +8,13 @@ import FileLabel from './FileLabel';
 import ImageInput from './ImageInput';
 import NumberSlider from './NumberSlider';
 import Radio from './Radio';
+import SegmentButtons from './SegmentButtons';
 import Slider from './Slider';
 import Spinner from './Spinner';
 
 export {
 	AudioInput,
+	Check,
 	Checkbox,
 	FileActions,
 	FileDetails,
@@ -20,6 +23,7 @@ export {
 	ImageInput,
 	NumberSlider,
 	Radio,
+	SegmentButtons,
 	Slider,
 	Spinner
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
index 3df18a83e8..429b822887 100644
--- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { animated, useTransition } from "@react-spring/web";
 import { v4 as uuidv4 } from "uuid";
 import { useFile, useLocalize } from "hooks";
-import { AudioInput, Checkbox, ImageInput, NumberSlider, Radio, Spinner } from "components/common";
+import { AudioInput, Checkbox, ImageInput, NumberSlider, SegmentButtons, Spinner } from "components/common";
 import { springs } from "resources";
 import {
   UploadAudio,
@@ -97,9 +97,11 @@ const InputPage = ({
       <Checkbox {...{ checked: highQuality, label: "High Quality", onChange: highQualityChange}}/>
 
       <label {...{ class: "sub-title", }}>Cropping</label>
-      <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 }}/>
+      <SegmentButtons {...{
+        onChange: cropChange,
+        options: [{ label: "Full", value: "full" },{ label: "Crop", value: "crop" },{ label: "Close crop", value: "close_crop" }],
+        value: cropping
+      }}/>
 
       <label {...{ class: "sub-title", }}>Make Animation More Still</label>
       <Checkbox {...{ checked: still, label: "Still", onChange: stillChange}}/>

From 642dc91295e54c21837bb0ea396b71c2b710a3cc Mon Sep 17 00:00:00 2001
From: olivicmic <vic@vics.pics>
Date: Thu, 5 Oct 2023 13:01:26 -0700
Subject: [PATCH 5/5] cleaned up animation configuration inputs

---
 .../components/common/Checkbox/Checkbox.scss  |  9 +++
 .../components/common/Checkbox/Checkbox.tsx   |  2 +-
 .../common/ImageInput/ImageInput.scss         |  2 +-
 .../common/SegmentButtons/SegmentButtons.scss |  1 +
 .../lipsync/LipsyncEditor/LipsyncEditor.scss  | 16 ++++++
 .../lipsync/LipsyncEditor/LipsyncEditor.tsx   | 57 +++++++++----------
 6 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss
index 3d3cf2d470..79a06040d1 100644
--- a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss
+++ b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss
@@ -1,5 +1,14 @@
 @import "scss/colours.scss";
 
+.fy-checkbox-frame {
+  margin-bottom: .5rem;
+  white-space: nowrap;
+
+  label {
+    margin-left: .5rem;
+  }
+}
+
 .fy-checkbox {
   background-color: $primary;
   border-radius: .5rem;
diff --git a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
index 949409b055..35826acf2a 100644
--- a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
+++ b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
@@ -21,7 +21,7 @@ export default function Checkbox({ checked, className = "", label = "", name = "
   });
   const onClick = ({ target }: any) => onChange({ target: { checked: !checked, name, type: 'checkbox' } });
   const id = "checkbox-" + useId();
-  return <div {...{ ...makeClass("form-check",className),  }}>
+  return <div {...{ ...makeClass("fy-checkbox-frame",className),  }}>
     <a.svg {...{ className: "fy-checkbox", onClick, style, ...hoverEvents }}>
       <Check {...{ checked }}/>
     </a.svg>
diff --git a/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss b/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss
index 612038a77e..e9804a0ae8 100644
--- a/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss
+++ b/packages/fakeyou.com/src/components/common/ImageInput/ImageInput.scss
@@ -3,7 +3,7 @@
 
 
 .image-upload-frame {
-	aspect-ratio: 4/3;
+	// aspect-ratio: 4/3;
 	// @include breakpoint(min-width 992px) {
 	// 	aspect-ratio: 1/1;
 	// }
diff --git a/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss b/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss
index e2589e3233..422a63e43c 100644
--- a/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss
+++ b/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.scss
@@ -5,6 +5,7 @@
 	grid-auto-flow: column;
 	grid-auto-columns: 1fr;
 	gap: 2px;
+	padding: 0;
 
 	li {
 		background-color: $secondary;
diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss
index be1de2ec1e..0592b46ec6 100644
--- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss
+++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss
@@ -17,6 +17,22 @@ $under992: max-width 992px;
     display: block;
     margin-top: 1rem;
   }
+
+  .animation-configure-panel {
+    margin: 1rem 0 -.5rem;
+    padding: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem 2rem;
+
+    .input-block {
+      legend {
+        font-size: .875rem;
+      };
+      flex-grow: 1;
+      vertical-align: top;
+    }
+  }
 }
 
 .progress-header {
diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
index bfaf69a409..8bc50a6e9e 100644
--- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx
@@ -2,11 +2,7 @@ import React, { useState } from "react";
 import { animated, useTransition } from "@react-spring/web";
 import { v4 as uuidv4 } from "uuid";
 import { useFile, useLocalize } from "hooks";
-<<<<<<< HEAD
-import { AudioInput, Checkbox, ImageInput, NumberSlider, SegmentButtons, Spinner } from "components/common";
-=======
 import { AudioInput, Checkbox, ImageInput, SegmentButtons, Spinner } from "components/common";
->>>>>>> master
 import { springs } from "resources";
 import {
   UploadAudio,
@@ -34,12 +30,12 @@ import {
 } from "@storyteller/components/src/jobs/InferenceJob";
 
 interface LipSyncProps {
-  animationChange: any;
-  animationStyle: any;
+  // animationChange: any;
+  // animationStyle: any;
   audioProps: any;
   children?: any;
-  cropChange: any;
-  cropping: any;
+  // cropChange: any;
+  // cropping: any;
   imageProps: any;
   frameDimensions: any;
   frameDimensionsChange: any;
@@ -70,11 +66,11 @@ interface EditorProps {
 const softSpring = { config: { mass: 1, tension: 80, friction: 10 } };
 
 const InputPage = ({
-  animationChange,
-  animationStyle,
+  // animationChange,
+  // animationStyle,
   audioProps,
-  cropping,
-  cropChange,
+  // cropping,
+  // cropChange,
   imageProps,
   frameDimensions,
   frameDimensionsChange,
@@ -99,23 +95,6 @@ const InputPage = ({
         }}
       />
 
-      <label {...{ class: "sub-title", }}>Video Dimensions</label>
-      <SegmentButtons {...{
-        onChange: frameDimensionsChange,
-        options: [{ label: "Landscape (Wide)", value: "twitter_landscape" },{ label: "Portrait (Tall)", value: "twitter_portrait" },{ label: "Square", value: "twitter_square" }],
-        value: frameDimensions
-      }}/>
-
-      <label {...{ class: "sub-title", }}>Animation</label>
-      <Checkbox {...{ checked: still, label: "Reduce Movement (not recommended)", onChange: stillChange}}/>
-      <Checkbox {...{ checked: disableFaceEnhancement, label: "Disable Face Enhancer (not recommended)", onChange: disableFaceEnhancementChange}}/>
-
-      <label {...{ class: "sub-title", }}>Watermark</label>
-      <Checkbox {...{ checked: removeWatermark, label: "Remove Watermark (premium only)", onChange: removeWatermarkChange }}/>
-      
-      {/*<label {...{ class: "sub-title", }}>Animation style</label>
-      <NumberSlider {...{ min: 0, max: 32, onChange: animationChange, value: animationStyle }}/>*/}
-
     </div>
     <div {...{ className: "media-input-column col-lg-6" }}>
       <h5>{t("headings.audio")}</h5>
@@ -129,6 +108,26 @@ const InputPage = ({
         }}
       />
     </div>
+    <div {...{ className: "animation-configure-panel panel" }}>
+      <fieldset {...{ className: "input-block" }}>
+        <legend>Video Dimensions</legend>
+        <SegmentButtons {...{
+          onChange: frameDimensionsChange,
+          options: [{ label: "Landscape (Wide)", value: "twitter_landscape" },{ label: "Portrait (Tall)", value: "twitter_portrait" },{ label: "Square", value: "twitter_square" }],
+          value: frameDimensions
+        }}/>
+      </fieldset>
+      <fieldset {...{ className: "input-block" }}>
+        <legend>Watermark</legend>
+        <Checkbox {...{ checked: removeWatermark, label: "Remove Watermark (premium only)", onChange: removeWatermarkChange }}/>
+      </fieldset>
+      <fieldset {...{ className: "input-block" }}>
+        <legend>Animation</legend>
+        <Checkbox {...{ checked: still, label: "Reduce Movement (not recommended)", onChange: stillChange}}/>
+        <Checkbox {...{ checked: disableFaceEnhancement, label: "Disable Face Enhancer (not recommended)", onChange: disableFaceEnhancementChange}}/>
+      </fieldset>
+    </div>
+
   </animated.div>;
 };