feat(playground): enhance SSE debugging and add image paste support with i18n

- Add SSEViewer component for interactive SSE message inspection
  * Display SSE data stream with collapsible panels
  * Show parsed JSON with syntax highlighting
  * Display key information badges (content, tokens, finish reason)
  * Support copy individual or all SSE messages
  * Show error messages with detailed information

- Support Ctrl+V to paste images in chat input
  * Enable image paste in CustomInputRender component
  * Auto-detect and add pasted images to image list
  * Show toast notifications for paste results

- Add complete i18n support for 6 languages
  * Chinese (zh): Complete translations
  * English (en): Complete translations
  * Japanese (ja): Add 28 new translations
  * French (fr): Add 28 new translations
  * Russian (ru): Add 28 new translations
  * Vietnamese (vi): Add 32 new translations

- Update .gitignore to exclude data directory

web/src/components/playground/ImageUrlInput.jsx

@@ -21,6 +21,7 @@ import React from 'react';
 import { Input, Typography, Button, Switch } from '@douyinfe/semi-ui';
 import { IconFile } from '@douyinfe/semi-icons';
 import { FileText, Plus, X, Image } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 const ImageUrlInput = ({
   imageUrls,
@@ -29,6 +30,7 @@ const ImageUrlInput = ({
   onImageEnabledChange,
   disabled = false,
 }) => {
+  const { t } = useTranslation();
   const handleAddImageUrl = () => {
     const newUrls = [...imageUrls, ''];
     onImageUrlsChange(newUrls);
@@ -56,11 +58,11 @@ const ImageUrlInput = ({
             }
           />
           <Typography.Text strong className='text-sm'>
-            图片地址
+            {t('图片地址')}
           </Typography.Text>
           {disabled && (
             <Typography.Text className='text-xs text-orange-600'>
-              (已在自定义模式中忽略)
+              ({t('已在自定义模式中忽略')})
             </Typography.Text>
           )}
         </div>
@@ -68,8 +70,8 @@ const ImageUrlInput = ({
           <Switch
             checked={imageEnabled}
             onChange={onImageEnabledChange}
-            checkedText='启用'
-            uncheckedText='停用'
+            checkedText={t('启用')}
+            uncheckedText={t('停用')}
             size='small'
             className='flex-shrink-0'
             disabled={disabled}
@@ -89,19 +91,19 @@ const ImageUrlInput = ({
       {!imageEnabled ? (
         <Typography.Text className='text-xs text-gray-500 mb-2 block'>
           {disabled
-            ? '图片功能在自定义请求体模式下不可用'
-            : '启用后可添加图片URL进行多模态对话'}
+            ? t('图片功能在自定义请求体模式下不可用')
+            : t('启用后可添加图片URL进行多模态对话')}
         </Typography.Text>
       ) : imageUrls.length === 0 ? (
         <Typography.Text className='text-xs text-gray-500 mb-2 block'>
           {disabled
-            ? '图片功能在自定义请求体模式下不可用'
-            : '点击 + 按钮添加图片URL进行多模态对话'}
+            ? t('图片功能在自定义请求体模式下不可用')
+            : t('点击 + 按钮添加图片URL进行多模态对话')}
         </Typography.Text>
       ) : (
         <Typography.Text className='text-xs text-gray-500 mb-2 block'>
-          已添加 {imageUrls.length} 张图片
-          {disabled ? ' (自定义模式下不可用)' : ''}
+          {t('已添加')} {imageUrls.length} {t('张图片')}
+          {disabled ? ` (${t('自定义模式下不可用')})` : ''}
         </Typography.Text>
       )}