From d0018ea4e8f7f196f4bed9adaa90fa51432934ab Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Thu, 4 Jan 2024 15:27:59 -0500
Subject: [PATCH] added NumberSlider, reusable Label component, onChanger, and
 initial SdInferencePanel inputs

---
 .../api/image_generation/EnqueueImageGen.ts   |  16 +++
 .../src/components/common/Label/Label.tsx     |  12 ++
 .../src/components/common/Label/index.ts      |   1 +
 .../common/NumberSlider/NumberSlider.scss     |  40 ++++++
 .../common/NumberSlider/NumberSlider.tsx      |  43 ++++--
 .../common/SegmentButtons/SegmentButtons.tsx  |  23 +--
 .../src/components/common/index.tsx           |   2 +
 packages/fakeyou.com/src/resources/index.tsx  |   9 +-
 .../fakeyou.com/src/resources/onChanger.ts    |   8 ++
 .../inference_panels/SdInferencePanel.tsx     | 132 +++++++++++++++++-
 10 files changed, 262 insertions(+), 24 deletions(-)
 create mode 100644 packages/components/src/api/image_generation/EnqueueImageGen.ts
 create mode 100644 packages/fakeyou.com/src/components/common/Label/Label.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/Label/index.ts
 create mode 100644 packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.scss
 create mode 100644 packages/fakeyou.com/src/resources/onChanger.ts

diff --git a/packages/components/src/api/image_generation/EnqueueImageGen.ts b/packages/components/src/api/image_generation/EnqueueImageGen.ts
new file mode 100644
index 0000000000..158e01c476
--- /dev/null
+++ b/packages/components/src/api/image_generation/EnqueueImageGen.ts
@@ -0,0 +1,16 @@
+import MakeRequest from "../MakeRequest";
+
+export interface EnqueueImageGenRequest {
+  loRA_path: String,
+  check_point: String,
+  vae: String
+}
+
+export interface EnqueueImageGenResponse {
+  success: boolean
+}
+
+export const EnqueueImageGen = MakeRequest<string, EnqueueImageGenRequest, EnqueueImageGenResponse,{}>({
+  method: "POST", 
+  routingFunction: () => "/v1/inference/enqueue_image_gen",
+});
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Label/Label.tsx b/packages/fakeyou.com/src/components/common/Label/Label.tsx
new file mode 100644
index 0000000000..9461c32c46
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Label/Label.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface Props {
+  label?: any,
+  required?: boolean
+}
+
+export default function Label({ label, required }: Props) {
+  return label ? <label {...{ className: `sub-title${required ? " required" : ""}` }}>
+    { label }
+  </label> : null;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Label/index.ts b/packages/fakeyou.com/src/components/common/Label/index.ts
new file mode 100644
index 0000000000..12d3cc8ba4
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Label/index.ts
@@ -0,0 +1 @@
+export { default } from "./Label";
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.scss b/packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.scss
new file mode 100644
index 0000000000..5d1b48bf16
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.scss
@@ -0,0 +1,40 @@
+.fy-number-slider {
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+  margin-bottom: .75rem;
+
+  .fy-number-slider-range {
+    flex-grow: 1;
+  }
+
+  .fy-number-slider-value {
+    text-align: center;
+    width: fit-content;
+    padding: 6px;
+    border-radius: 8px;
+    background-color: #2f2f42;
+    border-width: 1px;
+    border-color: rgba(#fff, 0.12);
+    color: rgba(#fff, 0.85);
+    font-weight: 500;
+    flex-shrink: 0;
+  }
+
+  .fy-number-slider-track {
+    height: .5rem;
+    width: 100%;
+    margin: 0 0 0 .6875rem; // margin half width of thumb, so that thumb does not overlap margins at minimum position
+    background-color: #4f4f66;
+    border-radius: .25rem;
+  }
+
+  .fy-number-slider-thumb {
+    height: 1.375rem;
+    width: 1.375rem;
+    background-color: #e66462;
+    border-radius: 50%;
+    box-shadow: 0px 0px 10px rgba(#000, 0.15);
+    &:hover { background-color: #fff }
+  }
+}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.tsx b/packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.tsx
index 7969ca429c..6d7a583673 100644
--- a/packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.tsx
+++ b/packages/fakeyou.com/src/components/common/NumberSlider/NumberSlider.tsx
@@ -1,16 +1,43 @@
 import React from 'react';
-import { Slider } from "components/common";
+import { Range } from "react-range";
+import Tippy from "@tippyjs/react";
+import { Label } from "components/common";
+import "./NumberSlider.scss";
 
 interface Props {
-  max?: number;
-  min?: number;
-  onChange?: any;
-  value?: number;
+  label?: string;
+  max?: number,
+  min?: number,
+  name?: string,
+  onChange?: any,
+  required?: boolean,
+  step?: number,
+  thumbTip?: string,
+  value?: number
 }
 
-export default function NumberSlider({ max, min, onChange, value }: Props) {
+const renderTrack = ({ props: { style, ...props }, children }: any) => 
+  <div {...{ ...props, className: "fy-number-slider-track", style }}>
+    { children }
+  </div>;
+
+const thumb = (thumbTip = "") => ({ props: { style, ...props }}: any) => {
+  return <Tippy {...{ arrow: false, content: thumbTip, placement: "bottom", theme: "range-slider" }} >
+    <div {...{ ...props, className: "fy-number-slider-thumb", style }}></div>
+  </Tippy>
+};
+
+export default function NumberSlider({ label, max, min, name, onChange: inChange = () => {}, required, step = 1, thumbTip, value = 0 }: Props) {
+
+  const onChange = (newVal: number[]) => inChange({ target: { ...name && { name }, type: "number", value: newVal[0] }});
+
   return <>
-  <Slider {...{ max, min, onChange, value }}/>
-  <input {...{ min, max, onChange, type: "number", value }}/>
+    <Label {...{ label, required }}/>
+    <div {...{ className: `fy-number-slider` }}>
+      <div {...{ className: "fy-number-slider-range" }}>
+        <Range {...{ max, min, onChange, renderThumb: thumb(thumbTip), renderTrack, step, thumbTip, values: [value] }}/>
+      </div>
+      <input {...{ className: "fy-number-slider-value", min, max, name, onChange: inChange, type: "number", value }}/>
+    </div>
   </>;
 };
\ 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
index 9f9e66d4ff..049af19635 100644
--- a/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.tsx
+++ b/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.tsx
@@ -1,20 +1,25 @@
 import React from 'react';
+import { Label } from  "components/common";
 import "./SegmentButtons.scss";
 
 interface Props {
+  label?: string;
   name?: string;
   onChange?: any;
   options?: any;
-  value?: string;
+  value?: string | number;
 }
 
-export default function SegmentButtons({ name, onChange, options = [], value: inValue = "" }: Props) {
+export default function SegmentButtons({ label, name, onChange, options = [], value: inValue = "" }: Props) {
   // const onClick = ({ target }: any) => onChange();
-  return <ul {...{ className: "fy-segment-buttons" }}>
-    { options.map(({ label = "", value = "" },key: number) => <li {...{
-      ...value === inValue && { className: "fy-selected-segment" },
-      key,
-      onClick: ({ target }: any) => onChange({ target: { name, type: "option", value } })
-    }}>{ label }</li>) }
-  </ul>;
+  return <>
+    <Label {...{ label }}/>
+    <ul {...{ className: "fy-segment-buttons" }}>
+      { options.map(({ label = "", value = "" },key: number) => <li {...{
+        ...value === inValue && { className: "fy-selected-segment" },
+        key,
+        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/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx
index 4144f15120..49cf95b17f 100644
--- a/packages/fakeyou.com/src/components/common/index.tsx
+++ b/packages/fakeyou.com/src/components/common/index.tsx
@@ -11,6 +11,7 @@ import FileWrapper from "./FileWrapper";
 import FileLabel from "./FileLabel";
 import ImageInput from "./ImageInput";
 import Input from "./Input";
+import Label from "./Label";
 import NumberSlider from "./NumberSlider";
 import Panel from "./Panel";
 import Radio from "./Radio";
@@ -40,6 +41,7 @@ export {
   FileLabel,
   ImageInput,
   Input,
+  Label,
   NumberSlider,
   Panel,
   Radio,
diff --git a/packages/fakeyou.com/src/resources/index.tsx b/packages/fakeyou.com/src/resources/index.tsx
index 66196ead07..7c861ea3e0 100644
--- a/packages/fakeyou.com/src/resources/index.tsx
+++ b/packages/fakeyou.com/src/resources/index.tsx
@@ -1,5 +1,6 @@
-import basicTransition from './basicTransition';
-import baseColors from './baseColors';
-import springs from './springs';
+import basicTransition from "./basicTransition";
+import baseColors from "./baseColors";
+import onChanger from "./onChanger";
+import springs from "./springs";
 
-export { basicTransition, baseColors, springs }
\ No newline at end of file
+export { basicTransition, baseColors, onChanger, springs }
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/resources/onChanger.ts b/packages/fakeyou.com/src/resources/onChanger.ts
new file mode 100644
index 0000000000..9a44803e0d
--- /dev/null
+++ b/packages/fakeyou.com/src/resources/onChanger.ts
@@ -0,0 +1,8 @@
+type Setter = (x: any) => void
+
+export default function onChanger({ ...setters }: { [key: string]: Setter }) {
+  return ({ target }: { target: { name: string; value: any } }) => {
+    const todo: { [key: string]: Setter } = setters;
+    todo[target.name + "Set"](target.value);
+  };
+}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx b/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx
index a5738fcb39..23b1757a52 100644
--- a/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx
@@ -1,8 +1,134 @@
-import { Panel } from "components/common";
-import React from "react";
+import React, { useState } from "react";
+import { Button, NumberSlider, Panel, SegmentButtons, TempSelect, TempTextArea } from "components/common";
+import { onChanger } from 'resources';
 
 interface SdInferencePanelProps {}
 
 export default function SdInferencePanel(props: SdInferencePanelProps) {
-  return <Panel padding={true}>Generation inference here</Panel>;
+  const [seed, seedSet] = useState(5);
+  const [sampler, samplerSet] = useState("DPM++");
+  const [width, widthSet] = useState(256);
+  const [height, heightSet] = useState(256);
+  const [cfgScale, cfgScaleSet] = useState(1);
+  const [loRAPath, loRAPathSet] = useState(1);
+  const [checkPoint, checkPointSet] = useState(1);
+  const [batchSize, batchSizeSet] = useState(1);
+  const [batchCount, batchCountSet] = useState(1);
+  const onChange = onChanger({ batchCountSet, batchSizeSet, cfgScaleSet, checkPointSet, heightSet, loRAPathSet, samplerSet, seedSet, widthSet });
+
+  const samplerOpts = [
+    { label: "DPM++", value: "DPM++" },
+    { label: "2M", value: "2M" },
+    { label: "karras", value: "karras" },
+  ];
+
+  const dimensionOpts = [
+    { label: "256", value: 256 },
+    { label: "512", value: 512 },
+    { label: "1024", value: 1024 }
+  ];
+
+  const tempDeleteMeOpts = [
+    { label: "Something", value: 1 },
+    { label: "Something else", value: 2 },
+    { label: "Another thing", value: 3 }
+  ];
+
+  const batchSizeOpts = [
+    { label: "1", value: 1 },
+    { label: "2", value: 2 },
+    { label: "3", value: 3 },
+    { label: "4", value: 4 }
+  ];
+
+  const batchCountOpts = [
+    { label: "1", value: 1 },
+    { label: "2", value: 2 }
+  ];
+
+  // console.log("🚨",Math.pow(2,32));
+  return <Panel padding={true}>
+    <TempTextArea {...{
+      label: "Prompt",
+      name: "prompt",
+      placeholder: "Enter a prompt"
+    }}/>
+    <TempTextArea {...{
+      label: "Negative prompt",
+      name: "negativePrompt",
+      placeholder: "Enter a negative prompt"
+    }}/>
+    <NumberSlider {...{
+      min: 5,
+      max: 128,
+      name: "seed",
+      label: "Seed value",
+      onChange,
+      thumbTip: "Seed value",
+      value: seed
+    }}/>
+    <TempSelect {...{
+      label: "Sampler",
+      name: "sampler",
+      onChange,
+      options: samplerOpts,
+      value: sampler
+    }}/>
+    <SegmentButtons {...{
+      label: "Width",
+      name: "width",
+      onChange,
+      options: dimensionOpts,
+      value: width
+    }}/>
+    <SegmentButtons {...{
+      label: "Height",
+      name: "height",
+      onChange,
+      options: dimensionOpts,
+      value: height
+    }}/>
+    <NumberSlider {...{
+      min: 1,
+      max: 64,
+      name: "cfgScale",
+      label: "Cfg sscale",
+      onChange,
+      thumbTip: "Cfg sscale",
+      value: cfgScale
+    }}/>
+    <TempSelect {...{
+      label: "loRA path",
+      name: "loraPath",
+      onChange,
+      options: tempDeleteMeOpts,
+      value: loRAPath
+    }}/>
+    <TempSelect {...{
+      label: "Check point",
+      name: "checkPoint",
+      onChange,
+      options: tempDeleteMeOpts,
+      value: checkPoint
+    }}/>
+    <SegmentButtons {...{
+      label: "Batch size",
+      name: "batchSize",
+      onChange,
+      options: batchSizeOpts,
+      value: batchSize
+    }}/>
+    <SegmentButtons {...{
+      label: "Batch count",
+      name: "batchCount",
+      onChange,
+      options: batchCountOpts,
+      value: batchCount
+    }}/>
+    <div className="d-flex gap-3 justify-content-end">
+      <Button {...{
+        label: "Enqueue"
+      }} />
+    </div>
+  </Panel>;
 }