fix playground (#2153)

web/src/helpers/base64.js

+/*
+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
+*/
+
+const toBinaryString = (text) => {
+  if (typeof TextEncoder !== 'undefined') {
+    const bytes = new TextEncoder().encode(text);
+    let binary = '';
+
+    bytes.forEach((byte) => {
+      binary += String.fromCharCode(byte);
+    });
+
+    return binary;
+  }
+
+  return encodeURIComponent(text).replace(/%([0-9A-F]{2})/g, (_, hex) =>
+    String.fromCharCode(parseInt(hex, 16)),
+  );
+};
+
+export const encodeToBase64 = (value) => {
+  const input = value == null ? '' : String(value);
+
+  if (typeof window === 'undefined') {
+    if (typeof Buffer !== 'undefined') {
+      return Buffer.from(input, 'utf-8').toString('base64');
+    }
+    if (
+      typeof globalThis !== 'undefined' &&
+      typeof globalThis.btoa === 'function'
+    ) {
+      return globalThis.btoa(toBinaryString(input));
+    }
+    throw new Error(
+      'Base64 encoding is unavailable in the current environment',
+    );
+  }
+
+  return window.btoa(toBinaryString(input));
+};

web/src/helpers/index.js

@@ -20,6 +20,7 @@ For commercial licensing, please contact support@quantumnous.com
 export * from './history';
 export * from './history';
 export * from './auth';
 export * from './auth';
 export * from './utils';
 export * from './utils';
+export * from './base64';
 export * from './api';
 export * from './api';
 export * from './render';
 export * from './render';
 export * from './log';
 export * from './log';

web/src/hooks/tokens/useTokensData.jsx

@@ -20,7 +20,13 @@ For commercial licensing, please contact support@quantumnous.com
 import { useState, useEffect } from 'react';
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useTranslation } from 'react-i18next';
 import { Modal } from '@douyinfe/semi-ui';
 import { Modal } from '@douyinfe/semi-ui';
-import { API, copy, showError, showSuccess } from '../../helpers';
+import {
+  API,
+  copy,
+  showError,
+  showSuccess,
+  encodeToBase64,
+} from '../../helpers';
 import { ITEMS_PER_PAGE } from '../../constants';
 import { ITEMS_PER_PAGE } from '../../constants';
 import { useTableCompactMode } from '../common/useTableCompactMode';
 import { useTableCompactMode } from '../common/useTableCompactMode';
 
 
@@ -136,7 +142,7 @@ export const useTokensData = (openFluentNotification) => {
         apiKey: 'sk-' + record.key,
         apiKey: 'sk-' + record.key,
       };
       };
       let encodedConfig = encodeURIComponent(
       let encodedConfig = encodeURIComponent(
-        btoa(JSON.stringify(cherryConfig)),
+        encodeToBase64(JSON.stringify(cherryConfig)),
       );
       );
       url = url.replaceAll('{cherryConfig}', encodedConfig);
       url = url.replaceAll('{cherryConfig}', encodedConfig);
     } else {
     } else {

web/src/pages/Playground/index.jsx

@@ -47,6 +47,7 @@ import {
   createLoadingAssistantMessage,
   createLoadingAssistantMessage,
   getTextContent,
   getTextContent,
   buildApiPayload,
   buildApiPayload,
+  encodeToBase64,
 } from '../../helpers';
 } from '../../helpers';
 
 
 // Components
 // Components
@@ -72,7 +73,7 @@ const generateAvatarDataUrl = (username) => {
       <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-size="16" fill="#ffffff" font-family="sans-serif">${firstLetter}</text>
       <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-size="16" fill="#ffffff" font-family="sans-serif">${firstLetter}</text>
     </svg>
     </svg>
   `;
   `;
-  return `data:image/svg+xml;base64,${btoa(svg)}`;
+  return `data:image/svg+xml;base64,${encodeToBase64(svg)}`;
 };
 };
 
 
 const Playground = () => {
 const Playground = () => {