input Seed component

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 {

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<string>(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(
+    <div>
+      <label className="sub-title">{label}</label>
+      <div className="d-flex gap-2 align-items-center">
+        <SegmentButtons
+          {...{
+            name: "seed",
+            onChange: handleInputTypeChange,
+            options: seedOpts,
+            value: inputType,
+          }}
+        />
+        <Input
+          className="numberInputNoArrows"
+          placeholder="Random"
+          value={seedValue}
+          onChange={handleSeedChange}
+          type="number"
+        />
+      </div>
+    </div>
+  )
+}

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,
                   }}
                 />
+                <InputSeed label="Seed" onChange={
+                  (val:string)=>handleOnChange("seed", val)
+                }/>
               </div>
             </Accordion.Item>
             <Accordion.Item title={t("headings2")}>