From 0cdffb1377015e98e4dbd5722acfcea5b71bd723 Mon Sep 17 00:00:00 2001
From: elwolf <elwolf6@protonmail.com>
Date: Sat, 18 Feb 2023 22:07:19 +0000
Subject: [PATCH] feat: generation settings page prototype (#7)

* chore: flesh out RangeInput component
feat: setup generation_settings page

* fix typo with importing Register component

* update ranger slider component

* merge upstream and swap window.onload for createEffect in RangeInput component

* Revert "merge upstream and swap window.onload for createEffect in RangeInput component"

This reverts commit 7d535333f7ad0c79bc48fb6c9fcefd3cc2a4c389.

* swap window.onload for createEffect in RangeInput component
---
 .gitignore                             |  1 +
 pnpm-lock.yaml                         |  8 ++-
 src/App.tsx                            |  2 +
 src/pages/GenerationSettings/index.tsx | 86 ++++++++++++++++++++++++++
 src/shared/RangeInput.tsx              | 83 ++++++++++++++++++-------
 src/tailwind.css                       | 20 ++++++
 6 files changed, 174 insertions(+), 26 deletions(-)
 create mode 100644 src/pages/GenerationSettings/index.tsx

diff --git a/.gitignore b/.gitignore
index 7cb6c2f..f373f2d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 /dist
 /node_modules
 .pnpm-debug.log
+src/pages/Chat/mocks.tsx
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5eef11b..0459bc9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -61,7 +61,7 @@ devDependencies:
   prettier: 2.8.3
   prettier-plugin-tailwindcss: 0.2.1_prettier@2.8.3
   solid-refresh: 0.4.2_solid-js@1.6.9
-  tailwindcss: 3.2.4
+  tailwindcss: 3.2.4_postcss@8.4.21
   typescript: 4.9.4
 
 packages:
@@ -2077,7 +2077,7 @@ packages:
     dependencies:
       fast-glob: 3.2.12
       postcss: 8.4.21
-      tailwindcss: 3.2.4
+      tailwindcss: 3.2.4_postcss@8.4.21
     transitivePeerDependencies:
       - ts-node
     dev: true
@@ -3552,10 +3552,12 @@ packages:
       stable: 0.1.8
     dev: true
 
-  /tailwindcss/3.2.4:
+  /tailwindcss/3.2.4_postcss@8.4.21:
     resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
     engines: {node: '>=12.13.0'}
     hasBin: true
+    peerDependencies:
+      postcss: ^8.0.9
     dependencies:
       arg: 5.0.2
       chokidar: 3.5.3
diff --git a/src/App.tsx b/src/App.tsx
index a1625db..aefdeb7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import NavBar from "./shared/NavBar";
 
 const ChatPage = lazy(() => import("./pages/Chat"));
 const CharacterSettings = lazy(() => import("./pages/CharacterSettings"));
+const GenerationSettings = lazy(() => import("./pages/GenerationSettings"));
 const Home = lazy(() => import("./pages/Home"));
 const Login = lazy(() => import("./pages/Login"));
 
@@ -17,6 +18,7 @@ const App: Component = () => (
         <Routes>
           <Route path="/chat" component={ChatPage} />
           <Route path="/character" component={CharacterSettings} />
+          <Route path="/generation-settings" component={GenerationSettings} />
           <Route path="/" component={Home} />
           <Route path="/account/login" component={Login} />
         </Routes>
diff --git a/src/pages/GenerationSettings/index.tsx b/src/pages/GenerationSettings/index.tsx
new file mode 100644
index 0000000..0ff5632
--- /dev/null
+++ b/src/pages/GenerationSettings/index.tsx
@@ -0,0 +1,86 @@
+import { Component } from "solid-js";
+import { Save, X } from "lucide-solid";
+
+import Button from "../../shared/Button";
+import RangeInput from "../../shared/RangeInput";
+
+const GenerationSettings: Component = () => (
+  <>
+    <h1 class="text-4xl">Generation Settings Settings</h1>
+    <p class="text-white/50">Some settings might not show up depending on which inference backend is being used.</p>
+    <div class="my-4 border-b border-white/5" />
+
+    <div class="flex flex-col gap-8">
+        <RangeInput 
+            label="Max New Tokens"
+            helperText="Number of tokens the AI should generate. Higher numbers will take longer to generate."
+            min={16}
+            max={512}
+            step={4}
+            value={196}
+        />
+        <RangeInput 
+            label="Temperature"
+            helperText="Randomness of sampling. High values can increase creativity but may make text less sensible. Lower values will make text more predictable but can become repetitious."
+            min={0.1}
+            max={2}
+            step={0.01}
+            value={0.5}
+        />
+        <RangeInput 
+            label="Top P"
+            helperText="Used to discard unlikely text in the sampling process. Lower values will make text more predictable but can become repetitious. (Put this value on 1 to disable its effect)"
+            min={0}
+            max={1}
+            step={0.01}
+            value={0.9}
+        />
+        <RangeInput 
+            label="Top K"
+            helperText="Alternative sampling method, can be combined with top_p. The number of highest probability vocabulary tokens to keep for top-k-filtering. (Put this value on 0 to disable its effect)"
+            min={0}
+            max={100}
+            step={1}
+            value={0}
+        />
+        <RangeInput 
+            label="Typical P"
+            helperText="Alternative sampling method described in the paper 'Typical_p Decoding for Natural Language Generation' (10.48550/ARXIV.2202.00666). The paper suggests 0.2 as a good value for this setting. Set this setting to 1 to disable its effect."
+            min={0}
+            max={1}
+            step={0.01}
+            value={1}
+        />
+        <RangeInput 
+            label="Repetition Penalty"
+            helperText="Used to penalize words that were already generated or belong to the context (Going over 1.2 breaks 6B models. Set to 1.0 to disable)."
+            min={0}
+            max={3}
+            step={0.01}
+            value={1.05}
+        />
+        <RangeInput 
+            label="Penalty Alpha"
+            helperText="The alpha coefficient when using contrastive search."
+            min={0}
+            max={1}
+            step={0.05}
+            value={0.6}
+        />
+
+        <div class="flex justify-end gap-2">
+            <Button schema="secondary">
+                <X />
+                Cancel
+            </Button>
+
+            <Button>
+                <Save />
+                Save
+            </Button>
+        </div>
+    </div>
+  </>
+);
+
+export default GenerationSettings;
\ No newline at end of file
diff --git a/src/shared/RangeInput.tsx b/src/shared/RangeInput.tsx
index 2bb9202..15c782f 100644
--- a/src/shared/RangeInput.tsx
+++ b/src/shared/RangeInput.tsx
@@ -1,26 +1,63 @@
-import { Component } from "solid-js";
+import { Component, Show, createSignal, createEffect } from "solid-js";
+import type { JSX } from "solid-js";
 
-const RangeInput: Component = () => (
-  <div class="relative pt-1">
-    <label for="customRange2" class="form-label">
-      Example range
-    </label>
-    <input
-      type="range"
-      class="
-      form-range
-      h-6
-      w-full
-      appearance-none
-      bg-transparent
-      p-0
-      focus:shadow-none focus:outline-none focus:ring-0
-    "
-      min="0"
-      max="5"
-      id="customRange2"
-    />
-  </div>
-);
+const RangeInput: Component<{
+  label: string;
+  value: number;
+  helperText?: string;
+  min: number;
+  max: number;
+  step: number;
+}> = (props) => {
+
+  const [value, setValue] = createSignal(props.value);
+  
+  function updateRangeSliders() {
+    Array.from(document.getElementsByTagName('input')).forEach(input => {
+      input.style.backgroundSize = (Number(input.value) - Number(input.min)) * 100 / (Number(input.max) - Number(input.min)) + '% 100%';
+    });
+  }
+
+  const onInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (event) => {
+    setValue(Number(event.currentTarget.value));
+    updateRangeSliders();
+  };  
+
+  createEffect(updateRangeSliders);
+
+  return (
+    <div class="relative pt-1">
+      <ul class="w-full">
+        <label class="form-label block-block">
+          {props.label}
+        </label>
+        <input class="inline-block float-right rounded-lg border border-white/5 hover:border-white/20 focusable-field bg-transparent" value={value()} type="number" min={props.min} max={props.max} step={props.step} onInput={onInput} />
+      </ul>
+      <Show when={props.helperText}>
+        <p class="mt-[-0.125rem] pb-2 text-sm text-white/50">
+          {props.helperText}
+        </p>
+      </Show>
+      <input
+        type="range"
+        class="
+        form-range
+        appearance-none
+        accent-purple-400/50
+        cursor-ew-resize
+        h-1
+        w-full
+        rounded-xl
+        focus:shadow-none focus:outline-none focus:ring-0
+      "
+        min={props.min}
+        max={props.max}
+        step={props.step}
+        onInput={onInput}
+        value={value()}
+      />
+    </div>
+  );
+};
 
 export default RangeInput;
diff --git a/src/tailwind.css b/src/tailwind.css
index 7a76bb9..455b8f2 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -67,4 +67,24 @@
   .form-check-input:checked[type="radio"] {
     background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-4 -4 8 8%22%3E%3Ccircle r=%222%22 fill=%22%23fff%22/%3E%3C/svg%3E");
   }
+
+  input[type="range"] {
+    background: rgb(255 255 255 / 0.05);
+    background-image: linear-gradient(rgb(152 64 160), rgb(152 64 160));
+    background-repeat: no-repeat;
+  }
+
+  input[type="range"]::-webkit-slider-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: rgb(152 64 160);
+    box-shadow: 0 0 2px 0 #555;
+  }
+
+  input[type="range"]::-webkit-slider-runnable-track {
+    box-shadow: none;
+    border: none;
+    background: transparent;
+  }
 }