run style fix

PygmalionAI · Feb 19, 2023 · 9e4c193 · 9e4c193
1 parent b065e5c
commit 9e4c193
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 109 deletions.
diff --git a/src/pages/GenerationSettings/index.tsx b/src/pages/GenerationSettings/index.tsx
@@ -9,88 +9,91 @@ import DropdownItem from "../../shared/DropdownItem";
 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>
+    <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">
-        <DropdownItem>Classic-Pygmalion-6b</DropdownItem>
-        <DropdownItem>Calibrated-Pygmalion-6b</DropdownItem>
-        <DropdownItem>GPU-Pygmalion-6b</DropdownItem>
-        <DropdownItem>DragonSlayer-Pygmalion-6b</DropdownItem>
-        <DropdownItem>Classic-Pygmalion-2.7b</DropdownItem>
+      <DropdownItem>Classic-Pygmalion-6b</DropdownItem>
+      <DropdownItem>Calibrated-Pygmalion-6b</DropdownItem>
+      <DropdownItem>GPU-Pygmalion-6b</DropdownItem>
+      <DropdownItem>DragonSlayer-Pygmalion-6b</DropdownItem>
+      <DropdownItem>Classic-Pygmalion-2.7b</DropdownItem>
     </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}
-        />
+      <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>
+      <div class="flex justify-end gap-2">
+        <Button schema="secondary">
+          <X />
+          Cancel
+        </Button>
 
-            <Button>
-                <Save />
-                Save
-            </Button>
-        </div>
+        <Button>
+          <Save />
+          Save
+        </Button>
+      </div>
     </div>
   </>
 );
 
-export default GenerationSettings;
+export default GenerationSettings;
diff --git a/src/shared/Dropdown.tsx b/src/shared/Dropdown.tsx
@@ -1,36 +1,41 @@
 import { ChevronDown } from "lucide-solid";
 import { Component, JSX, createSignal } from "solid-js";
-import usePopper from 'solid-popper';
+import usePopper from "solid-popper";
 
 import Button from "./Button";
 
-
 const Dropdown: Component<{ children: JSX.Element; label: string }> = (
   props
 ) => {
-
   const [open, setOpen] = createSignal(false);
   const [dropdown, setDropdown] = createSignal();
   const [dropdownMenu, setDropdownMenu] = createSignal();
 
   usePopper(dropdown, dropdownMenu, {
-    placement: 'bottom-start',
+    placement: "bottom-start",
   });
 
   return (
     <>
-        <div ref={setDropdown}>
-          <Button
-            onClick={() => {
-              setOpen(!open());
-            }}
-            >
-            {props.label}
-            <ChevronDown/>
-          </Button>
-        </div>
-
-      <div ref={setDropdownMenu} class={`${open() ? "visible" : "invisible"} z-10 flex flex-col rounded-md bg-stone-600 drop-shadow-md`} >{props.children}</div>
+      <div ref={setDropdown}>
+        <Button
+          onClick={() => {
+            setOpen(!open());
+          }}
+        >
+          {props.label}
+          <ChevronDown />
+        </Button>
+      </div>
+
+      <div
+        ref={setDropdownMenu}
+        class={`${
+          open() ? "visible" : "invisible"
+        } z-10 flex flex-col rounded-md bg-stone-600 drop-shadow-md`}
+      >
+        {props.children}
+      </div>
     </>
   );
 };

diff --git a/src/shared/DropdownItem.tsx b/src/shared/DropdownItem.tsx
@@ -1,13 +1,17 @@
 import { Component, JSX } from "solid-js";
 
 const DropdownItem: Component<{
-    children: JSX.Element;
-    reference?: any;
-    onClick?: JSX.EventHandler<HTMLAnchorElement, MouseEvent>;
-  }> = (props) => {
-  return (
-    <a class="px-5 py-3 hover:bg-stone-500" href={props.reference} onClick={props.onClick}>{props.children}</a>
+  children: JSX.Element;
+  reference?: any;
+  onClick?: JSX.EventHandler<HTMLAnchorElement, MouseEvent>;
+}> = (props) => (
+    <a
+      class="px-5 py-3 hover:bg-stone-500"
+      href={props.reference}
+      onClick={props.onClick}
+    >
+      {props.children}
+    </a>
   );
-};
 
 export default DropdownItem;
diff --git a/src/shared/RangeInput.tsx b/src/shared/RangeInput.tsx
@@ -9,29 +9,37 @@ const RangeInput: Component<{
   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%';
+    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} />
+        <label class="form-label block-block">{props.label}</label>
+        <input
+          class="focusable-field float-right inline-block rounded-lg border border-white/5 bg-transparent hover:border-white/20"
+          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">
@@ -42,12 +50,12 @@ const RangeInput: Component<{
         type="range"
         class="
         form-range
-        appearance-none
-        accent-purple-400/50
-        cursor-ew-resize
         h-1
         w-full
+        cursor-ew-resize
+        appearance-none
         rounded-xl
+        accent-purple-400/50
         focus:shadow-none focus:outline-none focus:ring-0
       "
         min={props.min}

diff --git a/src/tailwind.css b/src/tailwind.css
@@ -87,5 +87,4 @@
     border: none;
     background: transparent;
   }
-
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -87,5 +87,4 @@ @@
         border: none;
         background: transparent;
       }
     }