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/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..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 @@ -7,14 +7,16 @@ import { states, Action, State } from "../storytellerFilterReducer"; import { Accordion, BasicVideo, + Checkbox, ErrorMessage, + Input, NumberSliderV2, Panel, SelectModal, Spinner, TextAreaV2 } from "components/common"; - +import InputSeed from "./inputSeed"; import { faChevronRight } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -27,25 +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 + 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) @@ -57,6 +70,7 @@ export default function PageFilterControls({ if (pageState.mediaFile){ const mediaLink = new BucketConfig().getGcsUrl(pageState.mediaFile.public_bucket_path); + if (mediaLink) return( <> @@ -75,7 +89,7 @@ export default function PageFilterControls({ - +
+
+
- handleOnChange("posPrompt", val), - value: filterState.posPrompt, - 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("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("negPrompt", val), - value: filterState.negPrompt, - required: false, +
+
+
+ {handleOnChange("lcmCFG", val)} + }}/> +
+
+ {handleOnChange("lcmSteps", val)} + }}/> +
+
+ + +
+ { + console.log(`Use Control Nets: ${e.target.checked}`) }} />
- -
- {handleOnChange("firstPass",val)} - }}/> - {handleOnChange("upScalePass", val)} - }}/> -
+
+ {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};