feat(playground): enhance max_tokens handling and input sanitization

- Introduced `sanitizePlaygroundInputs` to normalize `max_tokens` input values.
- Updated `loadConfig` to utilize the new sanitization function.
- Replaced `Input` with `InputNumber` for `max_tokens` in `ParameterControl` for better user experience.
- Modified API payload building logic to handle `max_tokens` more robustly.
- Added tests for new helper functions in `playgroundMaxTokens.js` to ensure correct behavior.

web/src/helpers/api.js

@@ -150,7 +150,18 @@ export const buildApiPayload = (
     const value = inputs[param];
     const hasValue = value !== undefined && value !== null;
 
-    if (enabled && hasValue) {
+    if (!enabled) {
+      return;
+    }
+
+    if (param === 'max_tokens') {
+      if (typeof value === 'number') {
+        payload[param] = value;
+      }
+      return;
+    }
+
+    if (hasValue) {
       payload[param] = value;
     }
   });

web/src/helpers/index.js

@@ -30,3 +30,4 @@ export * from './boolean';
 export * from './dashboard';
 export * from './passkey';
 export * from './statusCodeRules';
+export * from './playgroundMaxTokens';

web/src/helpers/playgroundMaxTokens.js

@@ -0,0 +1,55 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+export const normalizeMaxTokensValue = (value) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) && value >= 0 ? Math.floor(value) : null;
+  }
+
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if (trimmed === '') {
+      return null;
+    }
+
+    const parsed = Number(trimmed);
+    return Number.isFinite(parsed) && parsed >= 0 ? Math.floor(parsed) : null;
+  }
+
+  return null;
+};
+
+export const normalizePlaygroundInputValue = (name, value) => {
+  if (name === 'max_tokens') {
+    return normalizeMaxTokensValue(value);
+  }
+
+  return value;
+};
+
+export const sanitizePlaygroundInputs = (inputs) => {
+  if (!inputs) {
+    return inputs;
+  }
+
+  return {
+    ...inputs,
+    max_tokens: normalizeMaxTokensValue(inputs.max_tokens),
+  };
+};

web/src/helpers/playgroundMaxTokens.test.mjs

@@ -0,0 +1,43 @@
+import assert from 'node:assert/strict';
+
+import {
+  normalizeMaxTokensValue,
+  normalizePlaygroundInputValue,
+  sanitizePlaygroundInputs,
+} from './playgroundMaxTokens.js';
+
+assert.equal(normalizeMaxTokensValue(8192), 8192);
+assert.equal(normalizeMaxTokensValue('8192'), 8192);
+assert.equal(normalizeMaxTokensValue(' 8192 '), 8192);
+assert.equal(normalizeMaxTokensValue(''), null);
+assert.equal(normalizeMaxTokensValue('abc'), null);
+assert.equal(normalizeMaxTokensValue(-1), null);
+assert.equal(normalizeMaxTokensValue(1.9), 1);
+
+assert.equal(normalizePlaygroundInputValue('max_tokens', '2048'), 2048);
+assert.equal(normalizePlaygroundInputValue('max_tokens', 'bad'), null);
+assert.equal(normalizePlaygroundInputValue('seed', 'bad'), 'bad');
+
+assert.deepEqual(
+  sanitizePlaygroundInputs({
+    model: 'gpt-4o',
+    max_tokens: '2048',
+  }),
+  {
+    model: 'gpt-4o',
+    max_tokens: 2048,
+  },
+);
+
+assert.deepEqual(
+  sanitizePlaygroundInputs({
+    model: 'gpt-4o',
+    max_tokens: 'bad',
+  }),
+  {
+    model: 'gpt-4o',
+    max_tokens: null,
+  },
+);
+
+console.log('playground max_tokens tests passed');