From 82324e637c3018797bfbbbc79621103e00365a59 Mon Sep 17 00:00:00 2001 From: Vidyoot Senthil Date: Mon, 29 Jul 2024 15:30:17 -0500 Subject: [PATCH] feature: split dataset settings ui --- .../Dashboard/Dataset/DatasetSettingsPage.tsx | 1147 ++++++++++------- .../src/pages/Dashboard/Settings.tsx | 1 + 2 files changed, 661 insertions(+), 487 deletions(-) diff --git a/frontends/dashboard/src/pages/Dashboard/Dataset/DatasetSettingsPage.tsx b/frontends/dashboard/src/pages/Dashboard/Dataset/DatasetSettingsPage.tsx index ee87fd47e6..4d8b941b14 100644 --- a/frontends/dashboard/src/pages/Dashboard/Dataset/DatasetSettingsPage.tsx +++ b/frontends/dashboard/src/pages/Dashboard/Dataset/DatasetSettingsPage.tsx @@ -2,6 +2,7 @@ import { For, Show, + Accessor, createEffect, createSignal, useContext, @@ -50,360 +51,465 @@ export const defaultServerEnvsConfiguration: ServerEnvsConfiguration = { BM25_AVG_LEN: 256, }; -export const ServerSettingsForm = () => { - const bm25Active = import.meta.env.VITE_BM25_ACTIVE as unknown as string; - const datasetContext = useContext(DatasetContext); - const [serverConfig, setServerConfig] = createSignal( - datasetContext.dataset?.()?.server_configuration ?? - defaultServerEnvsConfiguration, - ); - - createEffect(() => { - setServerConfig( - datasetContext.dataset?.()?.server_configuration ?? - defaultServerEnvsConfiguration, - ); - }); - - const [saved, setSaved] = createSignal(false); - - const onSave = () => { - const datasetId = datasetContext.dataset?.()?.id; - if (!datasetId) return; - - void fetch(`${import.meta.env.VITE_API_HOST}/dataset`, { - method: "PUT", - headers: { - "Content-Type": "application/json", - "TR-Dataset": datasetId, - }, - credentials: "include", - body: JSON.stringify({ - dataset_id: datasetContext.dataset?.()?.id, - server_configuration: serverConfig(), - }), - }) - .then((resp) => { - if (resp.ok) { - createToast({ - title: "Success", - type: "success", - message: "Dataset Server Configuration Saved", - }); - setServerConfig((prev) => ({ ...prev, LLM_API_KEY: "" })); - - setSaved(true); - void new Promise((r) => setTimeout(r, 1000)).then(() => - setSaved(false), - ); - - return; - } - - if (!resp.ok) { - let message = "Error Saving Dataset Server Configuration"; - if (resp.status === 403) { - message = - "You must have owner permissions to modify dataset settings"; - } - - createToast({ - title: "Error", - type: "error", - message: message, - }); - } - }) - .catch((err) => { - console.log(err); - }); - }; - +export const ServerSettingsForm = (props: { + serverConfig: Accessor; + setServerConfig: ( + config: (prev: ServerEnvsConfiguration) => ServerEnvsConfiguration, + ) => void; +}) => { return ( -
-
+ + {/* General LLM Settings */} +
-

- Server Settings +

+ LLM Settings

+

- Update settings for how the server behaves. + Configure the general settings for the LLM.

-
-
- - - setServerConfig((prev) => { - return { - ...prev, - LLM_BASE_URL: e.currentTarget.value, - }; - }) - } - /> -
+ {/* General Settings */} +
+ +

General Settings

+
+ -
-
+
+
- } - tooltipText="LLM API Key cannot be viewed after you set it" + + props.setServerConfig((prev) => { + return { + ...prev, + LLM_BASE_URL: e.currentTarget.value, + }; + }) + } />
- - setServerConfig((prev) => { - return { - ...prev, - LLM_API_KEY: e.currentTarget.value, - }; - }) - } - /> -
-
- - - setServerConfig((prev) => { - return { - ...prev, - LLM_DEFAULT_MODEL: e.currentTarget.value, - }; - }) - } - /> -
+
+
+ + } + tooltipText="LLM API Key cannot be viewed after you set it" + /> +
+ + props.setServerConfig((prev) => { + return { + ...prev, + LLM_API_KEY: e.currentTarget.value, + }; + }) + } + /> +
-
- - - setServerConfig((prev) => { - return { - ...prev, - N_RETRIEVALS_TO_INCLUDE: parseFloat( - e.currentTarget.value, - ), - }; - }) - } - /> +
+ + + props.setServerConfig((prev) => { + return { + ...prev, + LLM_DEFAULT_MODEL: e.currentTarget.value, + }; + }) + } + /> +
+
-
- - - setServerConfig((prev) => { - return { - ...prev, - TEMPERATURE: e.currentTarget.valueAsNumber, - }; - }) - } - /> -
-
- - - setServerConfig((prev) => { - return { - ...prev, - PRESENCE_PENALTY: e.currentTarget.valueAsNumber, - }; - }) - } - /> -
-
- - - setServerConfig((prev) => { - return { - ...prev, - FREQUENCY_PENALTY: e.currentTarget.valueAsNumber, - }; - }) - } - /> + {/* Penalties and Parameters */} +
+ +

+ Penalties and Parameters +

+
+ + +
+
+ + + props.setServerConfig((prev) => { + return { + ...prev, + TEMPERATURE: e.currentTarget.valueAsNumber, + }; + }) + } + /> +
+ +
+ + + props.setServerConfig((prev) => { + return { + ...prev, + PRESENCE_PENALTY: e.currentTarget.valueAsNumber, + }; + }) + } + /> +
+ +
+ + + props.setServerConfig((prev) => { + return { + ...prev, + FREQUENCY_PENALTY: e.currentTarget.valueAsNumber, + }; + }) + } + /> +
-
- -