Refactor config loading to use dynamic AppConfig from server

Author: ServeurpersoCom

tools/server/public/index.html.gz

@@ -3,7 +3,7 @@ import StorageUtils from '../utils/storage';
 import { useAppContext } from '../utils/app.context';
 import { classNames } from '../utils/misc';
 import daisyuiThemes from 'daisyui/theme/object';
-import { THEMES } from '../Config';
+import { THEMES } from '../utils/initConfig';
 import {
   Cog8ToothIcon,
   MoonIcon,
@@ -66,7 +66,7 @@ export default function Header() {
                   auto
                 </button>
               </li>
-              {THEMES.map((theme) => (
+              {THEMES.map((theme: string) => (
                 <li key={theme}>
                   <input
                     type="radio"

tools/server/webui/src/components/Header.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useAppContext } from '../utils/app.context';
-import { CONFIG_DEFAULT, CONFIG_INFO } from '../Config';
-import { isDev } from '../Config';
+import { CONFIG_INFO } from '../utils/initConfig';
+import { isDev } from '../utils/initConfig';
 import StorageUtils from '../utils/storage';
 import { classNames, isBoolean, isNumeric, isString } from '../utils/misc';
 import {
@@ -14,7 +14,8 @@ import {
 } from '@heroicons/react/24/outline';
 import { OpenInNewTab } from '../utils/common';
 
-type SettKey = keyof typeof CONFIG_DEFAULT;
+import type { AppConfig } from '../utils/initConfig';
+type SettKey = keyof AppConfig;
 
 const BASIC_KEYS: SettKey[] = [
   'temperature',
@@ -269,27 +270,23 @@ export default function SettingDialog({
   const [sectionIdx, setSectionIdx] = useState(0);
 
   // clone the config object to prevent direct mutation
-  const [localConfig, setLocalConfig] = useState<typeof CONFIG_DEFAULT>(
-    JSON.parse(JSON.stringify(config))
-  );
+  const [localConfig, setLocalConfig] = useState<AppConfig>({ ...config });
 
   const resetConfig = () => {
     if (window.confirm('Are you sure you want to reset all settings?')) {
-      setLocalConfig(CONFIG_DEFAULT);
+      setLocalConfig({ ...config });
     }
   };
 
   const handleSave = () => {
     // copy the local config to prevent direct mutation
-    const newConfig: typeof CONFIG_DEFAULT = JSON.parse(
-      JSON.stringify(localConfig)
-    );
+    const newConfig: AppConfig = JSON.parse(JSON.stringify(localConfig));
     // validate the config
     for (const key in newConfig) {
       const value = newConfig[key as SettKey];
-      const mustBeBoolean = isBoolean(CONFIG_DEFAULT[key as SettKey]);
-      const mustBeString = isString(CONFIG_DEFAULT[key as SettKey]);
-      const mustBeNumeric = isNumeric(CONFIG_DEFAULT[key as SettKey]);
+      const mustBeBoolean = typeof config[key as SettKey] === 'boolean';
+      const mustBeString = typeof config[key as SettKey] === 'string';
+      const mustBeNumeric = typeof config[key as SettKey] === 'number';
       if (mustBeString) {
         if (!isString(value)) {
           alert(`Value for ${key} must be string`);
@@ -382,6 +379,7 @@ export default function SettingDialog({
                     value={localConfig[field.key]}
                     onChange={onChange(field.key)}
                     label={field.label as string}
+                    defaultValue={config[field.key]}
                   />
                 );
               } else if (field.type === SettingInputType.LONG_INPUT) {
@@ -392,6 +390,7 @@ export default function SettingDialog({
                     value={localConfig[field.key].toString()}
                     onChange={onChange(field.key)}
                     label={field.label as string}
+                    defaultValue={config[field.key]}
                   />
                 );
               } else if (field.type === SettingInputType.CHECKBOX) {
@@ -445,18 +444,20 @@ function SettingsModalLongInput({
   value,
   onChange,
   label,
+  defaultValue,
 }: {
   configKey: SettKey;
   value: string;
   onChange: (value: string) => void;
   label?: string;
+  defaultValue: string | number | boolean;
 }) {
   return (
     <label className="form-control mb-2">
       <div className="label inline">{label || configKey}</div>
       <textarea
         className="textarea textarea-bordered h-24"
-        placeholder={`Default: ${CONFIG_DEFAULT[configKey] || 'none'}`}
+        placeholder={`Default: ${defaultValue ?? 'none'}`}
         value={value}
         onChange={(e) => onChange(e.target.value)}
       />
@@ -469,12 +470,13 @@ function SettingsModalShortInput({
   value,
   onChange,
   label,
+  defaultValue,
 }: {
   configKey: SettKey;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any;
   onChange: (value: string) => void;
   label?: string;
+  defaultValue: string | number | boolean;
 }) {
   const helpMsg = CONFIG_INFO[configKey];
 
@@ -502,7 +504,7 @@ function SettingsModalShortInput({
         <input
           type="text"
           className="grow"
-          placeholder={`Default: ${CONFIG_DEFAULT[configKey] || 'none'}`}
+          placeholder={`Default: ${defaultValue ?? 'none'}`}
           value={value}
           onChange={(e) => onChange(e.target.value)}
         />

tools/server/webui/src/components/SettingDialog.tsx

@@ -15,7 +15,7 @@ import {
   getSSEStreamAsync,
   getServerProps,
 } from './misc';
-import { BASE_URL, CONFIG_DEFAULT, isDev } from '../Config';
+import { BASE_URL, getServerDefaultConfig, isDev, type AppConfig } from '../utils/initConfig';
 import { matchPath, useLocation, useNavigate } from 'react-router';
 import toast from 'react-hot-toast';
 
@@ -45,8 +45,8 @@ interface AppContextValue {
   setCanvasData: (data: CanvasData | null) => void;
 
   // config
-  config: typeof CONFIG_DEFAULT;
-  saveConfig: (config: typeof CONFIG_DEFAULT) => void;
+  config: AppConfig;
+  saveConfig: (config: AppConfig) => void;
   showSettings: boolean;
   setShowSettings: (show: boolean) => void;
 
@@ -90,16 +90,25 @@ export const AppContextProvider = ({
   const [aborts, setAborts] = useState<
     Record<Conversation['id'], AbortController>
   >({});
-  const [config, setConfig] = useState(StorageUtils.getConfig());
+  const [config, setConfig] = useState<AppConfig>(() => {
+    const cfg = StorageUtils.getConfig();
+    if (Object.keys(cfg).length === 0) {
+      console.warn('Config is empty at init (using {})');
+    }
+    return cfg;
+  });
   const [canvasData, setCanvasData] = useState<CanvasData | null>(null);
   const [showSettings, setShowSettings] = useState(false);
 
   // get server props
   useEffect(() => {
     getServerProps(BASE_URL, config.apiKey)
-      .then((props) => {
+      .then(async (props) => {
         console.debug('Server props:', props);
         setServerProps(props);
+        const cfg = await getServerDefaultConfig(config.apiKey);
+        StorageUtils.setConfig(cfg);
+        setConfig(cfg);
       })
       .catch((err) => {
         console.error(err);
@@ -380,7 +389,7 @@ export const AppContextProvider = ({
     await generateMessage(convId, parentNodeId, onChunk);
   };
 
-  const saveConfig = (config: typeof CONFIG_DEFAULT) => {
+  const saveConfig = (config: AppConfig) => {
     StorageUtils.setConfig(config);
     setConfig(config);
   };

tools/server/webui/src/utils/app.context.tsx

@@ -1,45 +1,92 @@
-import daisyuiThemes from 'daisyui/theme/object';
-import { isNumeric } from './utils/misc';
-
-export const isDev = import.meta.env.MODE === 'development';
-
-// constants
 export const BASE_URL = new URL('.', document.baseURI).href
   .toString()
   .replace(/\/$/, '');
 
-export const CONFIG_DEFAULT = {
-  // Note: in order not to introduce breaking changes, please keep the same data type (number, string, etc) if you want to change the default value. Do not use null or undefined for default value.
-  // Do not use nested objects, keep it single level. Prefix the key if you need to group them.
-  apiKey: '',
-  systemMessage: '',
-  showTokensPerSecond: false,
-  showThoughtInProgress: false,
-  excludeThoughtOnReq: true,
-  // make sure these default values are in sync with `common.h`
-  samplers: 'edkypmxt',
-  temperature: 0.8,
-  dynatemp_range: 0.0,
-  dynatemp_exponent: 1.0,
-  top_k: 40,
-  top_p: 0.95,
-  min_p: 0.05,
-  xtc_probability: 0.0,
-  xtc_threshold: 0.1,
-  typical_p: 1.0,
-  repeat_last_n: 64,
-  repeat_penalty: 1.0,
-  presence_penalty: 0.0,
-  frequency_penalty: 0.0,
-  dry_multiplier: 0.0,
-  dry_base: 1.75,
-  dry_allowed_length: 2,
-  dry_penalty_last_n: -1,
-  max_tokens: -1,
-  custom: '', // custom json-stringified object
-  // experimental features
-  pyIntepreterEnabled: false,
+export type AppConfig = {
+  apiKey: string;
+  systemMessage: string;
+  showTokensPerSecond: boolean;
+  showThoughtInProgress: boolean;
+  excludeThoughtOnReq: boolean;
+  samplers: string;
+  temperature: number;
+  dynatemp_range: number;
+  dynatemp_exponent: number;
+  top_k: number;
+  top_p: number;
+  min_p: number;
+  xtc_probability: number;
+  xtc_threshold: number;
+  typical_p: number;
+  repeat_last_n: number;
+  repeat_penalty: number;
+  presence_penalty: number;
+  frequency_penalty: number;
+  dry_multiplier: number;
+  dry_base: number;
+  dry_allowed_length: number;
+  dry_penalty_last_n: number;
+  max_tokens: number;
+  custom: string;
+  pyIntepreterEnabled: boolean;
 };
+
+const mapSamplerNameToChar = (name: string): string => {
+  const mapping: Record<string, string> = {
+    penalties: 'e',
+    dry: 'd',
+    top_n_sigma: 'k',
+    top_k: 'k',
+    typ_p: 'y',
+    top_p: 'p',
+    min_p: 'm',
+    xtc: 'x',
+    temperature: 't',
+  };
+  return mapping[name] || '';
+};
+
+export async function getServerDefaultConfig(apiKey?: string): Promise<AppConfig> {
+  const response = await fetch(`${BASE_URL}/props`, {
+    headers: {
+      'Content-Type': 'application/json',
+      ...(apiKey ? { Authorization: `Bearer ${apiKey}` } : {}),
+    },
+  });
+
+  if (!response.ok) throw new Error('Failed to fetch server props');
+  const data = await response.json();
+  const params = data.default_generation_settings?.params;
+  if (!params) throw new Error('Missing generation params in /props');
+
+  const baseConfig: Partial<AppConfig> = {};
+
+  for (const [key, value] of Object.entries(params)) {
+    if (typeof value === 'number') {
+      (baseConfig as any)[key] = parseFloat(value.toFixed(3));
+    } else if (typeof value === 'boolean' || typeof value === 'string') {
+      baseConfig[key as keyof AppConfig] = value as any;
+    }
+  }
+
+  return {
+    // client-only settings
+    apiKey: '',
+    systemMessage: '',
+    showTokensPerSecond: false,
+    showThoughtInProgress: false,
+    excludeThoughtOnReq: true,
+    custom: '',
+    pyIntepreterEnabled: false,
+
+    // server-provided
+    samplers: Array.isArray(params.samplers)
+      ? params.samplers.map(mapSamplerNameToChar).join('')
+      : 'edkypmxt',
+    ...baseConfig,
+  } as AppConfig;
+}
+
 export const CONFIG_INFO: Record<string, string> = {
   apiKey: 'Set the API Key if you are using --api-key option for the server.',
   systemMessage: 'The starting message that defines how model should behave.',
@@ -80,13 +127,11 @@ export const CONFIG_INFO: Record<string, string> = {
   max_tokens: 'The maximum number of token per output.',
   custom: '', // custom json-stringified object
 };
-// config keys having numeric value (i.e. temperature, top_k, top_p, etc)
-export const CONFIG_NUMERIC_KEYS = Object.entries(CONFIG_DEFAULT)
-  .filter((e) => isNumeric(e[1]))
-  .map((e) => e[0]);
-// list of themes supported by daisyui
-export const THEMES = ['light', 'dark']
-  // make sure light & dark are always at the beginning
-  .concat(
-    Object.keys(daisyuiThemes).filter((t) => t !== 'light' && t !== 'dark')
-  );
+
+import daisyuiThemes from 'daisyui/theme/object';
+
+export const THEMES = ['light', 'dark'].concat(
+  Object.keys(daisyuiThemes).filter((t) => t !== 'light' && t !== 'dark')
+);
+
+export const isDev = import.meta.env.MODE === 'development';

tools/server/webui/src/Config.ts renamed to tools/server/webui/src/utils/initConfig.ts

@@ -1,7 +1,7 @@
 // coversations is stored in localStorage
 // format: { [convId]: { id: string, lastModified: number, messages: [...] } }
 
-import { CONFIG_DEFAULT } from '../Config';
+import type { AppConfig } from './initConfig';
 import { Conversation, Message, TimingReport } from './types';
 import Dexie, { Table } from 'dexie';
 
@@ -192,15 +192,10 @@ const StorageUtils = {
   },
 
   // manage config
-  getConfig(): typeof CONFIG_DEFAULT {
-    const savedVal = JSON.parse(localStorage.getItem('config') || '{}');
-    // to prevent breaking changes in the future, we always provide default value for missing keys
-    return {
-      ...CONFIG_DEFAULT,
-      ...savedVal,
-    };
+  getConfig(): AppConfig {
+    return JSON.parse(localStorage.getItem('config') || '{}') as AppConfig;
   },
-  setConfig(config: typeof CONFIG_DEFAULT) {
+  setConfig(config: AppConfig) {
     localStorage.setItem('config', JSON.stringify(config));
   },
   getTheme(): string {