diff --git a/package.json b/package.json index 5b6f298..b95b0bc 100644 --- a/package.json +++ b/package.json @@ -21,13 +21,15 @@ }, "license": "AGPL-3.0", "dependencies": { + "@popperjs/core": "^2.11.6", "@solidjs/router": "^0.6.0", "@tanstack/solid-query": "^4.24.4", "js-cookie": "^3.0.1", "lodash": "^4.17.21", "lucide-solid": "0.105.0-alpha.9", "showdown": "^2.1.0", - "solid-js": "^1.6.9" + "solid-js": "^1.6.9", + "solid-popper": "^0.3.0" }, "devDependencies": { "@babel/core": "^7.20.12", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7df3b8e..ad131a4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2,6 +2,7 @@ lockfileVersion: 5.4 specifiers: '@babel/core': ^7.20.12 + '@popperjs/core': ^2.11.6 '@solidjs/router': ^0.6.0 '@tanstack/solid-query': ^4.24.4 '@types/fetch-mock': ^7.3.5 @@ -29,11 +30,13 @@ specifiers: prettier-plugin-tailwindcss: ^0.2.1 showdown: ^2.1.0 solid-js: ^1.6.9 + solid-popper: ^0.3.0 solid-refresh: ^0.4.2 tailwindcss: ^3.2.4 typescript: ^4.9.4 dependencies: + '@popperjs/core': 2.11.6 '@solidjs/router': 0.6.0_solid-js@1.6.9 '@tanstack/solid-query': 4.24.4_solid-js@1.6.9 js-cookie: 3.0.1 @@ -41,6 +44,7 @@ dependencies: lucide-solid: 0.105.0-alpha.9_solid-js@1.6.9 showdown: 2.1.0 solid-js: 1.6.9 + solid-popper: 0.3.0_4d4c2ryvs4cd2topoga5pasuua devDependencies: '@babel/core': 7.20.12 @@ -1182,6 +1186,10 @@ packages: nullthrows: 1.1.1 dev: true + /@popperjs/core/2.11.6: + resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==} + dev: false + /@solidjs/router/0.6.0_solid-js@1.6.9: resolution: {integrity: sha512-7ug2fzXXhvvDBL4CQyMvMM9o3dgBE6PoRh38T8UTmMnYz4rcCfROqSZc9yq+YEC96qWt5OvJgZ1Uj/4EAQXlfA==} peerDependencies: @@ -3516,6 +3524,17 @@ packages: dependencies: csstype: 3.1.1 + /solid-popper/0.3.0_4d4c2ryvs4cd2topoga5pasuua: + resolution: {integrity: sha512-XlfEWAyxGGqFgg/uRpF+BemSfCqjbLA8p6fToDa+6v3paw3eBQj0TU08aBOIj2VeigaEiz8ZTlDx1eBLVRivBg==} + engines: {node: '>=10'} + peerDependencies: + '@popperjs/core': ^2.11 + solid-js: ^1.2 + dependencies: + '@popperjs/core': 2.11.6 + solid-js: 1.6.9 + dev: false + /solid-refresh/0.4.2_solid-js@1.6.9: resolution: {integrity: sha512-6g1HsgQkY0X0ZmsaydNgHwRaQIhH3bAbagZiYwWnGO7mqli50ehlwQUN18RZ2MH3fTIs9Y1bankZapVhMVuijg==} peerDependencies: diff --git a/src/pages/GenerationSettings/index.tsx b/src/pages/GenerationSettings/index.tsx index c7c8319..46581e7 100644 --- a/src/pages/GenerationSettings/index.tsx +++ b/src/pages/GenerationSettings/index.tsx @@ -3,6 +3,8 @@ import { Save, X } from "lucide-solid"; import Button from "../../shared/Button"; import RangeInput from "../../shared/RangeInput"; +import Dropdown from "../../shared/Dropdown"; +import DropdownItem from "../../shared/DropdownItem"; const GenerationSettings: Component = () => ( <> @@ -11,6 +13,15 @@ const GenerationSettings: Component = () => ( Some settings might not show up depending on which inference backend is being used.

+ +
+ + Classic-Pygmalion-6b + Calibrated-Pygmalion-6b + GPU-Pygmalion-6b + DragonSlayer-Pygmalion-6b + Classic-Pygmalion-2.7b +
diff --git a/src/shared/Button.tsx b/src/shared/Button.tsx index 5b07c37..3758075 100644 --- a/src/shared/Button.tsx +++ b/src/shared/Button.tsx @@ -9,6 +9,7 @@ const schemaNameToClass: Record = { const Button: Component<{ children: JSX.Element; + onClick?: JSX.EventHandler; 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} diff --git a/src/shared/Dropdown.tsx b/src/shared/Dropdown.tsx new file mode 100644 index 0000000..f423231 --- /dev/null +++ b/src/shared/Dropdown.tsx @@ -0,0 +1,58 @@ +import { ChevronDown } from "lucide-solid"; +import { Component, JSX, createSignal } from "solid-js"; +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", + }); + + window.onclick = function (e) { + const dropdownButton = (dropdown() as unknown as HTMLElement).children[0]; + const dropdownButtonChevron = (dropdown() as unknown as HTMLElement) + .children[0].children[0]; + + if ( + open() && + e.target !== dropdownButton && + e.target !== dropdownButtonChevron + ) { + setOpen(!open()); + } + }; + + return ( + <> +
+ +
+ + + + ); +}; + +export default Dropdown; diff --git a/src/shared/DropdownItem.tsx b/src/shared/DropdownItem.tsx new file mode 100644 index 0000000..62c7e34 --- /dev/null +++ b/src/shared/DropdownItem.tsx @@ -0,0 +1,17 @@ +import { Component, JSX } from "solid-js"; + +const DropdownItem: Component<{ + children: JSX.Element; + reference?: any; + onClick?: JSX.EventHandler; +}> = (props) => ( + + {props.children} + +); + +export default DropdownItem; diff --git a/src/shared/RangeInput.tsx b/src/shared/RangeInput.tsx index 79eebb3..56ccaa5 100644 --- a/src/shared/RangeInput.tsx +++ b/src/shared/RangeInput.tsx @@ -13,10 +13,10 @@ const RangeInput: Component<{ function updateRangeSliders() { Array.from(document.getElementsByTagName("input")).forEach((input) => { - input.style.backgroundSize = + input.style.backgroundSize = `${ ((Number(input.value) - Number(input.min)) * 100) / - (Number(input.max) - Number(input.min)) + - "% 100%"; + (Number(input.max) - Number(input.min)) + }% 100%`; }); }