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) + }/>