From 4cd0e3651df795ddc49654bca621580cde2aeba8 Mon Sep 17 00:00:00 2001
From: HynoR <20227709+HynoR@users.noreply.github.com>
Date: Mon, 6 Apr 2026 00:40:08 +0800
Subject: [PATCH 1/2] 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.
---
 .../playground/ParameterControl.jsx           | 20 ++++---
 .../components/playground/configStorage.js    |  5 +-
 web/src/helpers/api.js                        | 13 ++++-
 web/src/helpers/index.js                      |  1 +
 web/src/helpers/playgroundMaxTokens.js        | 55 +++++++++++++++++++
 web/src/helpers/playgroundMaxTokens.test.mjs  | 43 +++++++++++++++
 .../hooks/playground/usePlaygroundState.js    | 15 ++++-
 7 files changed, 139 insertions(+), 13 deletions(-)
 create mode 100644 web/src/helpers/playgroundMaxTokens.js
 create mode 100644 web/src/helpers/playgroundMaxTokens.test.mjs

diff --git a/web/src/components/playground/ParameterControl.jsx b/web/src/components/playground/ParameterControl.jsx
index e06c3973..82ab4b77 100644
--- a/web/src/components/playground/ParameterControl.jsx
+++ b/web/src/components/playground/ParameterControl.jsx
@@ -18,7 +18,14 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Input, Slider, Typography, Button, Tag } from '@douyinfe/semi-ui';
+import {
+  Input,
+  InputNumber,
+  Slider,
+  Typography,
+  Button,
+  Tag,
+} from '@douyinfe/semi-ui';
 import { useTranslation } from 'react-i18next';
 import {
   Hash,
@@ -241,15 +248,14 @@ const ParameterControl = ({
             disabled={disabled}
           />
         </div>
-        <Input
+        <InputNumber
           placeholder='MaxTokens'
           name='max_tokens'
-          required
-          autoComplete='new-password'
-          defaultValue={0}
           value={inputs.max_tokens}
-          onChange={(value) => onInputChange('max_tokens', value)}
-          className='!rounded-lg'
+          onNumberChange={(value) => onInputChange('max_tokens', value)}
+          min={0}
+          precision={0}
+          style={{ width: '100%' }}
           disabled={!parameterEnabled.max_tokens || disabled}
         />
       </div>
diff --git a/web/src/components/playground/configStorage.js b/web/src/components/playground/configStorage.js
index 86674eb5..273d39f9 100644
--- a/web/src/components/playground/configStorage.js
+++ b/web/src/components/playground/configStorage.js
@@ -21,6 +21,7 @@ import {
   STORAGE_KEYS,
   DEFAULT_CONFIG,
 } from '../../constants/playground.constants';
+import { sanitizePlaygroundInputs } from '../../helpers/playgroundMaxTokens';
 
 const MESSAGES_STORAGE_KEY = 'playground_messages';
 
@@ -67,10 +68,10 @@ export const loadConfig = () => {
       const parsedConfig = JSON.parse(savedConfig);
 
       const mergedConfig = {
-        inputs: {
+        inputs: sanitizePlaygroundInputs({
           ...DEFAULT_CONFIG.inputs,
           ...parsedConfig.inputs,
-        },
+        }),
         parameterEnabled: {
           ...DEFAULT_CONFIG.parameterEnabled,
           ...parsedConfig.parameterEnabled,
diff --git a/web/src/helpers/api.js b/web/src/helpers/api.js
index 9381968e..88122a56 100644
--- a/web/src/helpers/api.js
+++ b/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;
     }
   });
diff --git a/web/src/helpers/index.js b/web/src/helpers/index.js
index a86c3bca..1c959d8d 100644
--- a/web/src/helpers/index.js
+++ b/web/src/helpers/index.js
@@ -30,3 +30,4 @@ export * from './boolean';
 export * from './dashboard';
 export * from './passkey';
 export * from './statusCodeRules';
+export * from './playgroundMaxTokens';
diff --git a/web/src/helpers/playgroundMaxTokens.js b/web/src/helpers/playgroundMaxTokens.js
new file mode 100644
index 00000000..19d5f2c4
--- /dev/null
+++ b/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),
+  };
+};
diff --git a/web/src/helpers/playgroundMaxTokens.test.mjs b/web/src/helpers/playgroundMaxTokens.test.mjs
new file mode 100644
index 00000000..3503ca9a
--- /dev/null
+++ b/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');
diff --git a/web/src/hooks/playground/usePlaygroundState.js b/web/src/hooks/playground/usePlaygroundState.js
index 79be1013..9818db91 100644
--- a/web/src/hooks/playground/usePlaygroundState.js
+++ b/web/src/hooks/playground/usePlaygroundState.js
@@ -32,7 +32,11 @@ import {
   loadMessages,
   saveMessages,
 } from '../../components/playground/configStorage';
-import { processIncompleteThinkTags } from '../../helpers';
+import {
+  processIncompleteThinkTags,
+  normalizePlaygroundInputValue,
+  sanitizePlaygroundInputs,
+} from '../../helpers';
 
 export const usePlaygroundState = () => {
   const { t } = useTranslation();
@@ -121,7 +125,10 @@ export const usePlaygroundState = () => {
 
   // 配置更新函数
   const handleInputChange = useCallback((name, value) => {
-    setInputs((prev) => ({ ...prev, [name]: value }));
+    setInputs((prev) => ({
+      ...prev,
+      [name]: normalizePlaygroundInputValue(name, value),
+    }));
   }, []);
 
   const handleParameterToggle = useCallback((paramName) => {
@@ -167,7 +174,9 @@ export const usePlaygroundState = () => {
   // 配置导入/重置
   const handleConfigImport = useCallback((importedConfig) => {
     if (importedConfig.inputs) {
-      setInputs((prev) => ({ ...prev, ...importedConfig.inputs }));
+      setInputs((prev) =>
+        sanitizePlaygroundInputs({ ...prev, ...importedConfig.inputs }),
+      );
     }
     if (importedConfig.parameterEnabled) {
       setParameterEnabled((prev) => ({

From 427fb7eaf6819b3b1dfc287debdcd4d4258762b9 Mon Sep 17 00:00:00 2001
From: HynoR <20227709+HynoR@users.noreply.github.com>
Date: Mon, 6 Apr 2026 00:48:06 +0800
Subject: [PATCH 2/2] refactor(playground): remove playgroundMaxTokens helper
 and update input handling

- Deleted the `playgroundMaxTokens` helper functions and their associated tests.
- Updated `loadConfig` and `usePlaygroundState` to handle `max_tokens` directly without sanitization.
- Simplified input handling in `usePlaygroundState` to directly set values without normalization.
---
 .../components/playground/configStorage.js    |  9 ++-
 web/src/helpers/index.js                      |  1 -
 web/src/helpers/playgroundMaxTokens.js        | 55 -------------------
 web/src/helpers/playgroundMaxTokens.test.mjs  | 43 ---------------
 .../hooks/playground/usePlaygroundState.js    | 22 ++++----
 5 files changed, 16 insertions(+), 114 deletions(-)
 delete mode 100644 web/src/helpers/playgroundMaxTokens.js
 delete mode 100644 web/src/helpers/playgroundMaxTokens.test.mjs

diff --git a/web/src/components/playground/configStorage.js b/web/src/components/playground/configStorage.js
index 273d39f9..d201ed6a 100644
--- a/web/src/components/playground/configStorage.js
+++ b/web/src/components/playground/configStorage.js
@@ -21,7 +21,6 @@ import {
   STORAGE_KEYS,
   DEFAULT_CONFIG,
 } from '../../constants/playground.constants';
-import { sanitizePlaygroundInputs } from '../../helpers/playgroundMaxTokens';
 
 const MESSAGES_STORAGE_KEY = 'playground_messages';
 
@@ -66,12 +65,16 @@ export const loadConfig = () => {
     const savedConfig = localStorage.getItem(STORAGE_KEYS.CONFIG);
     if (savedConfig) {
       const parsedConfig = JSON.parse(savedConfig);
+      const parsedMaxTokens = parseInt(parsedConfig?.inputs?.max_tokens, 10);
 
       const mergedConfig = {
-        inputs: sanitizePlaygroundInputs({
+        inputs: {
           ...DEFAULT_CONFIG.inputs,
           ...parsedConfig.inputs,
-        }),
+          max_tokens: Number.isNaN(parsedMaxTokens)
+            ? parsedConfig?.inputs?.max_tokens
+            : parsedMaxTokens,
+        },
         parameterEnabled: {
           ...DEFAULT_CONFIG.parameterEnabled,
           ...parsedConfig.parameterEnabled,
diff --git a/web/src/helpers/index.js b/web/src/helpers/index.js
index 1c959d8d..a86c3bca 100644
--- a/web/src/helpers/index.js
+++ b/web/src/helpers/index.js
@@ -30,4 +30,3 @@ export * from './boolean';
 export * from './dashboard';
 export * from './passkey';
 export * from './statusCodeRules';
-export * from './playgroundMaxTokens';
diff --git a/web/src/helpers/playgroundMaxTokens.js b/web/src/helpers/playgroundMaxTokens.js
deleted file mode 100644
index 19d5f2c4..00000000
--- a/web/src/helpers/playgroundMaxTokens.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
-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),
-  };
-};
diff --git a/web/src/helpers/playgroundMaxTokens.test.mjs b/web/src/helpers/playgroundMaxTokens.test.mjs
deleted file mode 100644
index 3503ca9a..00000000
--- a/web/src/helpers/playgroundMaxTokens.test.mjs
+++ /dev/null
@@ -1,43 +0,0 @@
-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');
diff --git a/web/src/hooks/playground/usePlaygroundState.js b/web/src/hooks/playground/usePlaygroundState.js
index 9818db91..130df90d 100644
--- a/web/src/hooks/playground/usePlaygroundState.js
+++ b/web/src/hooks/playground/usePlaygroundState.js
@@ -32,11 +32,7 @@ import {
   loadMessages,
   saveMessages,
 } from '../../components/playground/configStorage';
-import {
-  processIncompleteThinkTags,
-  normalizePlaygroundInputValue,
-  sanitizePlaygroundInputs,
-} from '../../helpers';
+import { processIncompleteThinkTags } from '../../helpers';
 
 export const usePlaygroundState = () => {
   const { t } = useTranslation();
@@ -125,10 +121,7 @@ export const usePlaygroundState = () => {
 
   // 配置更新函数
   const handleInputChange = useCallback((name, value) => {
-    setInputs((prev) => ({
-      ...prev,
-      [name]: normalizePlaygroundInputValue(name, value),
-    }));
+    setInputs((prev) => ({ ...prev, [name]: value }));
   }, []);
 
   const handleParameterToggle = useCallback((paramName) => {
@@ -174,9 +167,14 @@ export const usePlaygroundState = () => {
   // 配置导入/重置
   const handleConfigImport = useCallback((importedConfig) => {
     if (importedConfig.inputs) {
-      setInputs((prev) =>
-        sanitizePlaygroundInputs({ ...prev, ...importedConfig.inputs }),
-      );
+      const parsedMaxTokens = parseInt(importedConfig.inputs.max_tokens, 10);
+      setInputs((prev) => ({
+        ...prev,
+        ...importedConfig.inputs,
+        max_tokens: Number.isNaN(parsedMaxTokens)
+          ? importedConfig.inputs.max_tokens
+          : parsedMaxTokens,
+      }));
     }
     if (importedConfig.parameterEnabled) {
       setParameterEnabled((prev) => ({