Dropdown

.gitignore

@@ -2,3 +2,4 @@
 /dist
 /node_modules
 .pnpm-debug.log
+src/pages/Chat/mocks.tsx

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>

src/pages/GenerationSettings/index.tsx

@@ -0,0 +1,97 @@
+import { Component } from "solid-js";
+import { Save, X } from "lucide-solid";
+
+import Button from "../../shared/Button";
+import RangeInput from "../../shared/RangeInput";
+import Dropdown from "../../shared/Dropdown";
+
+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" />
+
+    <Dropdown label="Preset">
+        <div class="dropdown-menu">
+            <a class="dropdown-item" href="#">Classic-Pygmalion-6b</a>
+            <a class="dropdown-item" href="#">Classic-Pygmalion-2.7b</a>
+            <a class="dropdown-item" href="#">Calibrated-Pygmalion-6b</a>
+            <a class="dropdown-item" href="#">GPU-Pygmalion-6b</a>
+            <a class="dropdown-item" href="#">DragonSlayer-Pygmalion-2.7b</a>
+        </div>
+    </Dropdown>
+
+    <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;

src/shared/Button.tsx

@@ -9,6 +9,7 @@ const schemaNameToClass: Record<ButtonSchema, string> = {
 
 const Button: Component<{
   children: JSX.Element;
+  onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>;
   schema?: ButtonSchema;
   type?: "submit" | "reset" | "button";
   disabled?: boolean;
@@ -17,6 +18,7 @@ const Button: Component<{
     type={props.type || "button"}
     class={`${schemaNameToClass[props.schema || "primary"]} justify-center`}
     disabled={props.disabled}
+    onClick={props.onClick}
   >
     {props.children}
   </button>

src/shared/Dropdown.tsx

@@ -0,0 +1,21 @@
+import { Component, JSX, Show, createSignal } from "solid-js";
+
+import Button from "./Button";
+
+import { ChevronDown } from "lucide-solid";
+
+const Dropdown: Component<{ children: JSX.Element, label: string }> = (props) => {
+  const [open, setOpen] = createSignal(false);
+
+  return(
+    <div class="inline-block">
+      <Button onClick={() => {setOpen(!open())}}>
+        <ChevronDown />
+        {props.label}
+      </Button>
+      <Show when={open()}>{props.children}</Show>
+    </div>
+  );
+};
+
+export default Dropdown;

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;

src/tailwind.css

@@ -67,4 +67,37 @@
   .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;
+  }
+
+  /**
+   * Dropdowns.
+   */
+
+  .dropdown-menu {
+    @apply flex flex-col bg-stone-600  drop-shadow-md rounded-md;
+  }
+
+  .dropdown-item {
+    @apply px-5 py-3 hover:bg-stone-500;
+  }
+
 }