From 83226f2d2f04712f08ba5411fb4be166208005ed Mon Sep 17 00:00:00 2001 From: wil Date: Sun, 4 Feb 2024 00:46:39 -0500 Subject: [PATCH 1/3] input Seed component --- .../fakeyou.com/src/scss/site-refresh.scss | 14 ++++ .../components/inputSeed.tsx | 67 +++++++++++++++++++ .../components/pageFilterControls.tsx | 11 ++- 3 files changed, 89 insertions(+), 3 deletions(-) create mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/inputSeed.tsx diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index dc32fc7c6b..58af52afc2 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -36,6 +36,20 @@ styles with important tags: .ratio-1x1 { aspect-ratio: 1/1; } + /* Chrome, Safari, Edge, Opera */ + .numberInputNoArrows input::-webkit-outer-spin-button, + .numberInputNoArrows input::-webkit-inner-spin-button, + input.numberInputNoArrows::-webkit-outer-spin-button, + input.numberInputNoArrows::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + /* Firefox */ + .numberInputNoArrows input[type=number], + input.numberInputNoArrows[type=number] { + -moz-appearance: textfield; + } + //-end--// ::-webkit-scrollbar-thumb { diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/inputSeed.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/inputSeed.tsx new file mode 100644 index 0000000000..1ad61f4e27 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/inputSeed.tsx @@ -0,0 +1,67 @@ +import React, {useState} from 'react'; +import { + Input, + SegmentButtons +} from "components/common"; + +export default function InputSeet({ + label, + onChange : onChangeCallback +}:{ + label:string + onChange: (newSeed: string)=>void +}){ + function generateRandomSeed(){ + return Math.floor(Math.random() * Math.pow(2, 32)).toString(); + }; + + const [inputType, setInputType] = useState<"random"|"custom">("random"); + const [seedValue, setSeedValue] = useState(generateRandomSeed()); + + const handleInputTypeChange = (e:any) => { + console.log(typeof e); + const newValue = e.target.value; + if (newValue === "custom") { + setInputType("custom"); + } else { + const newRandom = generateRandomSeed(); + setInputType("random"); + setSeedValue(newRandom); + onChangeCallback(newRandom); + } + }; + const handleSeedChange = (event: any) => { + const customSeed = event.target.value; + setInputType("custom"); + setSeedValue(customSeed); + onChangeCallback(customSeed); + }; + + const seedOpts = [ + { label: "Random", value: "random" }, + { label: "Custom", value: "custom" }, + ]; + + return( +
+ +
+ + +
+
+ ) +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx index 0d90ab03b9..fe0e32151e 100644 --- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx @@ -1,4 +1,4 @@ -import React, {useState, useEffect} from "react"; +import React, {useState, useEffect, useRef} from "react"; import { useParams } from "react-router-dom"; import { useMedia } from "hooks"; @@ -14,7 +14,7 @@ import { Spinner, TextAreaV2 } from "components/common"; - +import InputSeed from "./inputSeed"; import { faChevronRight } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -45,7 +45,8 @@ export default function PageFilterControls({ posPrompt: "", negPrompt: "", firstPass: 15, - upScalePass: 15 + upScalePass: 15, + seed: "", }); useEffect(()=>{ if(debug) console.log(filterState) @@ -57,6 +58,7 @@ export default function PageFilterControls({ if (pageState.mediaFile){ const mediaLink = new BucketConfig().getGcsUrl(pageState.mediaFile.public_bucket_path); + if (mediaLink) return( <> @@ -142,6 +144,9 @@ export default function PageFilterControls({ required: false, }} /> + handleOnChange("seed", val) + }/> From 5f4b74cb08cf25f6b64476dd1c66730486ed4473 Mon Sep 17 00:00:00 2001 From: wil Date: Sun, 4 Feb 2024 02:15:01 -0500 Subject: [PATCH 2/3] UI visuals done --- .../common/NumberSliderV2/NumberSliderV2.tsx | 2 +- .../components/pageFilterControls.tsx | 338 +++++++++++++++--- .../storytellerFilterReducer.tsx | 7 +- 3 files changed, 302 insertions(+), 45 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx b/packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx index 4796403494..74519c1364 100644 --- a/packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx +++ b/packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx @@ -56,7 +56,7 @@ export default function NumberSlider({ }: Props) { const step = stepProps && stepProps <= max-min ? stepProps : max-min >= 1 ? 1 : (max-min) / 10; - const initialValue = initialValueProps && initialValueProps <= max && initialValueProps >= min ? initialValueProps + const initialValue = initialValueProps !== undefined && initialValueProps <= max && initialValueProps >= min ? initialValueProps : max-min === step ? min : roundToStep((max+min)/2, step); function handleInputOnChange(e: React.ChangeEvent){ diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx index fe0e32151e..572eceebb2 100644 --- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx @@ -7,7 +7,9 @@ import { states, Action, State } from "../storytellerFilterReducer"; import { Accordion, BasicVideo, + Checkbox, ErrorMessage, + Input, NumberSliderV2, Panel, SelectModal, @@ -27,26 +29,36 @@ export default function PageFilterControls({ dispatchPageState: (action: Action) => void; }) { const { mediaToken } = useParams(); - useMedia({ mediaToken: pageState.mediaFileToken || mediaToken, onSuccess: (res: any) => { // ratings.gather({ res, key: "token" }); dispatchPageState({ type: 'loadFileSuccess', - payload: {mediaFile: res} + payload: { + mediaFile: res, + mediaFileToken: pageState.mediaFileToken || mediaToken + } }) }, }); const [filterState, setFilterState] = useState({ + seed: "", sdModelToken: "", loraModelToken: "", posPrompt: "", negPrompt: "", - firstPass: 15, - upScalePass: 15, - seed: "", + firstPass: 1, + upscalePass: 0.42, + motionScale:1, + upscaleMultiplier: 1.5, + useEmptyLatent: false, + useFaceDetailer: false, + denoiseFaceDetailer: 0.45, + useLCM: false, + lcmCFG: 2, + lcmSteps: 8 }); useEffect(()=>{ if(debug) console.log(filterState) @@ -77,7 +89,7 @@ export default function PageFilterControls({ - +
+
+
- handleOnChange("posPrompt", val), - value: filterState.posPrompt, - required: false, - }} - /> - handleOnChange("negPrompt", val), - value: filterState.negPrompt, - required: false, - }} - /> +
+
+
+ handleOnChange("posPrompt", val), + value: filterState.posPrompt, + required: false, + }} + /> +
+
+ handleOnChange("negPrompt", val), + value: filterState.negPrompt, + required: false, + }} + /> +
+
+
handleOnChange("seed", val) }/>
+ - +
- {handleOnChange("firstPass",val)} +
+ {handleOnChange("firstPass",val)} + }}/> +
+
+ {handleOnChange("upscalePass", val)} }}/> - {handleOnChange("upScalePass", val)} - }}/> -
+
+
+
+
+ {handleOnChange("motionScale", val)} + }}/> +
+
+ {handleOnChange("upscaleMultiplier", val)} + }}/> +
+
+
+
+ {handleOnChange("useEmptyLatent", e.target.checked)}} + /> +
+
+ {handleOnChange("useFaceDetailer", e.target.checked)}} + /> +
+
+
+
+ +
+
+ {handleOnChange("denoiseFaceDetailer", val)} + }}/> +
+
+
+ {handleOnChange("useLCM", e.target.checked)}} + /> +
+
+
+ {handleOnChange("lcmCFG", val)} + }}/> +
+
+ {handleOnChange("lcmSteps", val)} + }}/> +
+
+ + +
+ { + console.log(`Use Control Nets: ${e.target.checked}`) + }} + /> +
+
+
+ {console.log(`Canny: ${val}`)} + }}/> +
+
+ {console.log(`Line Art Anime: ${val}`)} + }}/> +
+
+
+
+ {console.log(`Depth: ${val}`)} + }}/> +
+
+ {console.log(`OpenPose: ${val}`)} + }}/> +
+
+
+
+ {console.log(`Media Pipe Face: ${val}`)} + }}/> +
+
+ {console.log(`Sparse Scribble: ${val}`)} + }}/> +
+
+
+
+ {console.log(`Video CN: ${val}`)} + }}/> +
+
+ {console.log(`Tile CN: ${val}`)} + }}/> +
+
+ + +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx index 7da0a9e6cd..87f44546a9 100644 --- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx @@ -24,7 +24,9 @@ export type Action = | {type: 'uploadFile'} | {type: 'uploadFileSuccess', payload:{ mediaFileToken: string}} | {type: 'loadFile'} - | {type: 'loadFileSuccess', payload:{mediaFile: MediaFile}} + | {type: 'loadFileSuccess', payload:{ + mediaFileToken: string, mediaFile: MediaFile + }} export function reducer (state: State, action: Action): State { @@ -55,7 +57,8 @@ export function reducer (state: State, action: Action): State { return { ...state, status: states.FILE_LOADED, - mediaFile: action.payload.mediaFile + mediaFile: action.payload.mediaFile, + mediaFileToken : action.payload.mediaFileToken, } default: return {status: states.NO_FILE}; From dab490779b4f4e78c1f22fa881d3d63ac5931fbf Mon Sep 17 00:00:00 2001 From: wil Date: Sun, 4 Feb 2024 02:23:31 -0500 Subject: [PATCH 3/3] fixing for netlify --- .../pages/storyteller_filter/components/pageFilterControls.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx index 572eceebb2..c49c18f257 100644 --- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx @@ -1,4 +1,4 @@ -import React, {useState, useEffect, useRef} from "react"; +import React, {useState, useEffect} from "react"; import { useParams } from "react-router-dom"; import { useMedia } from "hooks";