@lobehub/chat 1.98.2 → 1.99.0

package/locales/zh-TW/image.json

@@ -0,0 +1,100 @@
+{
+  "config": {
+    "aspectRatio": {
+      "label": "比例",
+      "lock": "鎖定寬高比",
+      "unlock": "解鎖寬高比"
+    },
+    "header": {
+      "desc": "簡單描述，即刻創作",
+      "title": "繪畫"
+    },
+    "height": {
+      "label": "高度"
+    },
+    "imageNum": {
+      "label": "圖片數量"
+    },
+    "imageUrl": {
+      "label": "參考圖"
+    },
+    "imageUrls": {
+      "label": "參考圖"
+    },
+    "model": {
+      "label": "模型"
+    },
+    "prompt": {
+      "placeholder": "描述你想要生成的內容"
+    },
+    "seed": {
+      "label": "種子",
+      "random": "隨機種子"
+    },
+    "size": {
+      "label": "尺寸"
+    },
+    "steps": {
+      "label": "步數"
+    },
+    "title": "AI 繪畫",
+    "width": {
+      "label": "寬度"
+    }
+  },
+  "generation": {
+    "actions": {
+      "applySeed": "應用種子",
+      "copyError": "複製錯誤訊息",
+      "copyPrompt": "複製提示詞",
+      "copySeed": "複製種子",
+      "delete": "刪除",
+      "deleteBatch": "刪除批次",
+      "download": "下載",
+      "downloadFailed": "下載圖片失敗",
+      "errorCopied": "錯誤訊息已複製到剪貼簿",
+      "errorCopyFailed": "複製錯誤訊息失敗",
+      "generate": "生成",
+      "promptCopied": "提示詞已複製到剪貼簿",
+      "promptCopyFailed": "複製提示詞失敗",
+      "reuseSettings": "重用設定",
+      "seedApplied": "種子已應用到配置",
+      "seedApplyFailed": "應用種子失敗",
+      "seedCopied": "種子已複製到剪貼簿",
+      "seedCopyFailed": "複製種子失敗"
+    },
+    "metadata": {
+      "count": "{{count}} 張圖片"
+    },
+    "status": {
+      "failed": "生成失敗",
+      "generating": "生成中..."
+    }
+  },
+  "notSupportGuide": {
+    "desc": "當前部署實例為客戶端資料庫模式，無法使用 AI 圖像生成功能。請切換到<1>服務端資料庫部署模式</1>，或直接使用 <3>LobeChat Cloud</3>",
+    "features": {
+      "fileIntegration": {
+        "desc": "與檔案管理系統深度整合，生成的圖片自動保存到檔案系統，支援統一管理和組織",
+        "title": "檔案系統互通"
+      },
+      "llmAssisted": {
+        "desc": "結合大型語言模型能力，智能優化和擴展提示詞，提升圖像生成品質（即將推出）",
+        "title": "LLM 輔助生圖"
+      },
+      "multiProviders": {
+        "desc": "支援多種 AI 繪畫服務商，包括 OpenAI gpt-image-1、Google Imagen、FAL.ai 等，提供豐富的模型選擇",
+        "title": "多 Providers 支援"
+      }
+    },
+    "title": "當前部署模式不支援 AI 繪畫"
+  },
+  "topic": {
+    "createNew": "新建主題",
+    "deleteConfirm": "刪除生成主題",
+    "deleteConfirmDesc": "即將刪除該生成主題，刪除後將無法復原，請謹慎操作。",
+    "empty": "暫無生成主題",
+    "title": "繪畫主題",
+    "untitled": "預設主題"
+  }
+}

package/locales/zh-TW/metadata.json

@@ -32,6 +32,10 @@
     "search": "搜尋",
     "title": "發現"
   },
+  "image": {
+    "description": "{{appName}} 帶給你最好的 GPT Image、Flux、Midjourney、Stable Diffusion 使用體驗",
+    "title": "AI 繪畫"
+  },
   "plugins": {
     "description": "搜尋、圖表生成、學術、圖像生成、視頻生成、語音生成、自動化工作流，定制 ChatGPT / Claude 專屬的 ToolCall 插件能力",
     "title": "插件市場"

package/locales/zh-TW/modelProvider.json

@@ -66,6 +66,7 @@
       "customRegion": "自定義服務區域",
       "customSessionToken": "自訂 Session Token",
       "description": "輸入你的 AWS AccessKeyId / SecretAccessKey 即可開始會話。應用程式不會記錄你的驗證配置",
+      "imageGenerationDescription": "輸入你的 AWS AccessKeyId / SecretAccessKey 即可開始生成。應用不會記錄你的鑑權配置",
       "title": "使用自定義 Bedrock 驗證資訊"
     }
   },

package/locales/zh-TW/models.json

@@ -1019,6 +1019,15 @@
   "ernie-x1-turbo-32k": {
     "description": "與ERNIE-X1-32K相比，模型效果和性能更佳。"
   },
+  "flux-kontext/dev": {
+    "description": "Frontier 影像編輯模型。"
+  },
+  "flux-pro/kontext": {
+    "description": "FLUX.1 Kontext [pro] 能夠處理文字和參考圖像作為輸入，無縫實現目標性的局部編輯和複雜的整體場景變換。"
+  },
+  "flux/schnell": {
+    "description": "FLUX.1 [schnell] 是一個擁有120億參數的流式轉換器模型，能夠在1到4步內從文字生成高品質圖像，適合個人和商業用途。"
+  },
   "gemini-1.0-pro-001": {
     "description": "Gemini 1.0 Pro 001 (Tuning) 提供穩定並可調優的性能，是複雜任務解決方案的理想選擇。"
   },
@@ -1364,6 +1373,9 @@
   "gpt-4o-transcribe": {
     "description": "GPT-4o Transcribe 是一種使用 GPT-4o 轉錄音訊的語音轉文字模型。與原始 Whisper 模型相比，它降低了字詞錯誤率，並提升了語言識別和準確性。使用它來獲得更準確的轉錄。"
   },
+  "gpt-image-1": {
+    "description": "ChatGPT 原生多模態圖片生成模型"
+  },
   "grok-2-1212": {
     "description": "該模型在準確性、指令遵循和多語言能力方面有所改進。"
   },
@@ -1484,6 +1496,9 @@
   "hunyuan-vision": {
     "description": "混元最新多模態模型，支持圖片 + 文本輸入生成文本內容。"
   },
+  "imagen4/preview": {
+    "description": "Google 最高品質的圖像生成模型"
+  },
   "internlm/internlm2_5-7b-chat": {
     "description": "InternLM2.5 提供多場景下的智能對話解決方案。"
   },

package/locales/zh-TW/plugin.json

@@ -57,12 +57,28 @@
       }
     },
     "mcp": {
+      "advanced": {
+        "title": "進階設定"
+      },
       "args": {
         "desc": "傳遞給執行命令的參數列表，一般在這裡輸入 MCP 伺服器名稱，或啟動腳本路徑",
         "label": "命令參數",
         "placeholder": "例如：--port 8080 --debug",
         "required": "請輸入啟動參數"
       },
+      "auth": {
+        "bear": "API 金鑰",
+        "desc": "選擇 MCP 伺服器的認證方式",
+        "label": "認證類型",
+        "none": "無需認證",
+        "placeholder": "請選擇認證類型",
+        "token": {
+          "desc": "輸入你的 API 金鑰或 Bearer Token",
+          "label": "API 金鑰",
+          "placeholder": "sk-xxxxx",
+          "required": "請輸入認證令牌"
+        }
+      },
       "avatar": {
         "label": "插件圖示"
       },
@@ -90,6 +106,11 @@
         "label": "MCP Server 環境變數",
         "stringifyError": "無法序列化參數，請檢查參數格式"
       },
+      "headers": {
+        "add": "新增一行",
+        "desc": "輸入請求標頭",
+        "label": "HTTP 標頭"
+      },
       "identifier": {
         "desc": "為你的 MCP 插件指定一個名稱，需要使用英文字符",
         "invalid": "只能輸入英文字符、數字、- 和_ 這兩個符號",
@@ -269,6 +290,7 @@
       "showDetails": "查看詳情"
     },
     "errorTypes": {
+      "AUTHORIZATION_ERROR": "授權驗證錯誤",
       "CONNECTION_FAILED": "連接失敗",
       "INITIALIZATION_TIMEOUT": "初始化逾時",
       "PROCESS_SPAWN_ERROR": "進程啟動失敗",

package/locales/zh-TW/providers.json

@@ -29,6 +29,9 @@
   "deepseek": {
     "description": "DeepSeek 是一家專注於人工智慧技術研究和應用的公司，其最新模型 DeepSeek-V2.5 融合了通用對話和代碼處理能力，並在人類偏好對齊、寫作任務和指令跟隨等方面實現了顯著提升。"
   },
+  "fal": {
+    "description": "面向開發者的生成式媒體平台"
+  },
   "fireworksai": {
     "description": "Fireworks AI 是一家領先的高級語言模型服務商，專注於功能調用和多模態處理。其最新模型 Firefunction V2 基於 Llama-3，優化用於函數調用、對話及指令跟隨。視覺語言模型 FireLLaVA-13B 支持圖像和文本混合輸入。其他 notable 模型包括 Llama 系列和 Mixtral 系列，提供高效的多語言指令跟隨與生成支持。"
   },

package/locales/zh-TW/setting.json

@@ -484,6 +484,11 @@
       "placeholder": "請輸入自訂提示詞",
       "title": "自訂提示詞"
     },
+    "generationTopic": {
+      "label": "AI 繪畫話題命名模型",
+      "modelDesc": "指定用於 AI 繪畫自動命名話題的模型",
+      "title": "AI 繪畫自動命名話題"
+    },
     "helpInfo": "當創建新助手時，將以預設助手設定作為預設值。",
     "historyCompress": {
       "label": "會話歷史模型",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.98.2",
+  "version": "1.99.0",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -45,6 +45,7 @@
     "db:visualize": "dbdocs build docs/development/database-schema.dbml --project lobe-chat",
     "desktop:build": "npm run desktop:build-next && npm run desktop:prepare-dist && npm run desktop:build-electron",
     "desktop:build-electron": "tsx scripts/electronWorkflow/buildElectron.ts",
+    "desktop:build-local": "npm run desktop:build-next && npm run desktop:prepare-dist && npm run build-local --prefix=./apps/desktop",
     "desktop:build-next": "npm run build:electron",
     "desktop:prepare-dist": "tsx scripts/electronWorkflow/moveNextStandalone.ts",
     "dev": "next dev --turbopack -p 3010",
@@ -61,6 +62,8 @@
     "prepare": "husky",
     "prettier": "prettier -c --write \"**/**\"",
     "pull": "git pull",
+    "reinstall": "rm -rf pnpm-lock.yaml && rm -rf node_modules && pnpm -r exec rm -rf node_modules && pnpm install",
+    "reinstall:desktop": "rm -rf pnpm-lock.yaml && rm -rf node_modules && pnpm -r exec rm -rf node_modules && pnpm install --node-linker=hoisted",
     "release": "semantic-release",
     "self-hosting:docker": "docker build -t lobe-chat:local .",
     "self-hosting:docker-cn": "docker build -t lobe-chat-local --build-arg USE_CN_MIRROR=true .",
@@ -70,8 +73,8 @@
     "test": "npm run test-app && npm run test-server",
     "test-app": "vitest run --config vitest.config.ts",
     "test-app:coverage": "vitest run --config vitest.config.ts  --coverage",
-    "test-server": "TEST_SERVER_DB=1 vitest run --config vitest.server.config.ts",
-    "test-server:coverage": "TEST_SERVER_DB=1 vitest run --config vitest.server.config.ts --coverage",
+    "test-server": "vitest run --config vitest.config.server.ts",
+    "test-server:coverage": "vitest run --config vitest.config.server.ts --coverage",
     "test:update": "vitest -u",
     "type-check": "tsgo --noEmit",
     "webhook:ngrok": "ngrok http http://localhost:3011",
@@ -132,6 +135,8 @@
     "@codesandbox/sandpack-react": "^2.20.0",
     "@cyntler/react-doc-viewer": "^1.17.0",
     "@electric-sql/pglite": "0.2.17",
+    "@fal-ai/client": "^1.5.0",
+    "@formkit/auto-animate": "^0.8.2",
     "@google/genai": "^1.6.0",
     "@huggingface/inference": "^2.8.1",
     "@icons-pack/react-simple-icons": "9.6.0",
@@ -226,6 +231,7 @@
     "plaiceholder": "^3.0.0",
     "polished": "^4.3.1",
     "posthog-js": "^1.249.0",
+    "pure-rand": "^7.0.1",
     "pwa-install-handler": "^2.6.2",
     "query-string": "^9.2.0",
     "random-words": "^2.0.1",
@@ -249,7 +255,7 @@
     "resolve-accept-language": "^3.1.11",
     "rtl-detect": "^1.1.2",
     "semver": "^7.7.2",
-    "sharp": "^0.33.5",
+    "sharp": "^0.34.2",
     "shiki": "^3.4.2",
     "stripe": "^16.12.0",
     "superjson": "^2.2.2",
@@ -349,6 +355,7 @@
     "serwist": "^9.0.14",
     "stylelint": "^15.11.0",
     "tsx": "~4.19.4",
+    "type-fest": "^4.41.0",
     "typescript": "^5.8.3",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",

package/packages/electron-server-ipc/src/events/file.ts

@@ -1,6 +1,8 @@
-import { DeleteFilesResponse } from '../types/file';
+import { CreateFileParams, DeleteFilesResponse, FileMetadata } from '../types/file';
 
 export interface FileDispatchEvents {
   deleteFiles: (paths: string[]) => DeleteFilesResponse;
   getStaticFilePath: (id: string) => string;
+  getFileHTTPURL: (path: string) => string;
+  createFile: (param: CreateFileParams) => { metadata: FileMetadata; success: boolean };
 }

package/packages/electron-server-ipc/src/types/file.ts

@@ -2,3 +2,18 @@ export interface DeleteFilesResponse {
   errors?: { message: string; path: string }[];
   success: boolean;
 }
+
+export interface CreateFileParams {
+  content: string; // Base64 encoded binary data
+  filename: string;
+  hash: string;
+  path: string;
+  type: string;
+}
+
+export interface FileMetadata {
+  date: string;
+  dirname: string;
+  filename: string;
+  path: string;
+}

package/src/app/[variants]/(main)/_layout/Desktop/SideBar/TopActions.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, ActionIconProps } from '@lobehub/ui';
-import { Compass, FolderClosed, MessageSquare } from 'lucide-react';
+import { Compass, FolderClosed, MessageSquare, Palette } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -29,6 +29,7 @@ const TopActions = memo<TopActionProps>(({ tab, isPinned }) => {
   const isChatActive = tab === SidebarTabKey.Chat && !isPinned;
   const isFilesActive = tab === SidebarTabKey.Files;
   const isDiscoverActive = tab === SidebarTabKey.Discover;
+  const isImageActive = tab === SidebarTabKey.Image;
 
   return (
     <Flexbox gap={8}>
@@ -65,6 +66,15 @@ const TopActions = memo<TopActionProps>(({ tab, isPinned }) => {
           />
         </Link>
       )}
+      <Link aria-label={t('tab.aiImage')} href={'/image'}>
+        <ActionIcon
+          active={isImageActive}
+          icon={Palette}
+          size={ICON_SIZE}
+          title={t('tab.aiImage')}
+          tooltipProps={{ placement: 'right' }}
+        />
+      </Link>
       {showMarket && (
         <Link aria-label={t('tab.discover')} href={'/discover'}>
           <ActionIcon

package/src/app/[variants]/(main)/image/@menu/components/AspectRatioSelect/index.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { Block, Grid, GridProps, Text } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+import useMergeState from 'use-merge-value';
+
+export interface AspectRatioSelectProps extends Omit<GridProps, 'children' | 'onChange'> {
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  options?: { label?: string; value: string }[];
+  value?: string;
+}
+
+const AspectRatioSelect = memo<AspectRatioSelectProps>(
+  ({ options, onChange, value, defaultValue, ...rest }) => {
+    const theme = useTheme();
+    const [active, setActive] = useMergeState('', {
+      defaultValue,
+      onChange,
+      value,
+    });
+    return (
+      <Block padding={4} variant={'filled'} {...rest}>
+        <Grid gap={4} maxItemWidth={48} rows={16}>
+          {options?.map((item) => {
+            const isActive = active === item.value;
+            const [width, height] = item.value.split(':').map(Number);
+            const isWidthGreater = width > height;
+
+            return (
+              <Block
+                align={'center'}
+                clickable
+                gap={4}
+                justify={'center'}
+                key={item.value}
+                onClick={() => {
+                  setActive(item.value);
+                  onChange?.(item.value);
+                }}
+                padding={8}
+                shadow={isActive && !theme.isDarkMode}
+                style={{
+                  backgroundColor: isActive ? theme.colorBgElevated : 'transparent',
+                }}
+                variant={'filled'}
+              >
+                <Center height={16} style={{ marginTop: 4 }} width={16}>
+                  <div
+                    style={{
+                      aspectRatio: `${width} / ${height}`,
+                      border: `2px solid ${isActive ? theme.colorText : theme.colorTextDescription}`,
+                      borderRadius: 3,
+                      height: isWidthGreater ? undefined : 16,
+                      width: isWidthGreater ? 16 : undefined,
+                    }}
+                  />
+                </Center>
+                <Text fontSize={12} type={isActive ? undefined : 'secondary'}>
+                  {item.label || item.value}
+                </Text>
+              </Block>
+            );
+          })}
+        </Grid>
+      </Block>
+    );
+  },
+);
+
+export default AspectRatioSelect;

package/src/app/[variants]/(main)/image/@menu/components/SeedNumberInput/index.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { Button, InputNumber, InputNumberProps, Tooltip } from '@lobehub/ui';
+import { Dices } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+export type SeedNumberInputProps = InputNumberProps;
+
+const SeedNumberInput = memo<SeedNumberInputProps>(
+  ({ value, step = 1, onChange, style, className, ...rest }) => {
+    const { t } = useTranslation('image');
+
+    return (
+      <Flexbox className={className} gap={4} horizontal style={style}>
+        <InputNumber
+          placeholder={t('config.seed.random')}
+          step={step}
+          style={{ width: '100%' }}
+          value={value}
+          {...rest}
+        />
+        <Tooltip title={t('config.seed.random')}>
+          <Button
+            disabled={!value}
+            icon={Dices}
+            onClick={() => onChange?.(null)}
+            style={{ flex: 'none', width: 62 }}
+            type={'primary'}
+            variant={'outlined'}
+          />
+        </Tooltip>
+      </Flexbox>
+    );
+  },
+);
+
+export default SeedNumberInput;

package/src/app/[variants]/(main)/image/@menu/components/SizeSelect/index.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { Block, Grid, GridProps, Text } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { ReactNode, memo } from 'react';
+import { Center } from 'react-layout-kit';
+import useMergeState from 'use-merge-value';
+
+export interface SizeSelectProps extends Omit<GridProps, 'children' | 'onChange'> {
+  defaultValue?: 'auto' | string;
+  onChange?: (value: string) => void;
+  options?: { label?: string; value: 'auto' | string }[];
+  value?: 'auto' | string;
+}
+
+const SizeSelect = memo<SizeSelectProps>(({ options, onChange, value, defaultValue, ...rest }) => {
+  const theme = useTheme();
+  const [active, setActive] = useMergeState('auto', {
+    defaultValue,
+    onChange,
+    value,
+  });
+  return (
+    <Block padding={4} variant={'filled'} {...rest}>
+      <Grid gap={4} maxItemWidth={72} rows={16}>
+        {options?.map((item) => {
+          const isActive = active === item.value;
+          let content: ReactNode;
+
+          if (item.value === 'auto') {
+            content = (
+              <div
+                style={{
+                  border: `2px dashed ${isActive ? theme.colorText : theme.colorTextDescription}`,
+                  borderRadius: 3,
+                  height: 16,
+                  width: 16,
+                }}
+              />
+            );
+          } else {
+            const [width, height] = item.value.split('x').map(Number);
+            const isWidthGreater = width > height;
+            content = (
+              <div
+                style={{
+                  aspectRatio: `${width} / ${height}`,
+                  border: `2px solid ${isActive ? theme.colorText : theme.colorTextDescription}`,
+                  borderRadius: 3,
+                  height: isWidthGreater ? undefined : 16,
+                  width: isWidthGreater ? 16 : undefined,
+                }}
+              />
+            );
+          }
+
+          return (
+            <Block
+              align={'center'}
+              clickable
+              gap={4}
+              justify={'center'}
+              key={item.value}
+              onClick={() => {
+                setActive(item.value);
+                onChange?.(item.value);
+              }}
+              padding={8}
+              shadow={isActive && !theme.isDarkMode}
+              style={{
+                backgroundColor: isActive ? theme.colorBgElevated : 'transparent',
+              }}
+              variant={'filled'}
+            >
+              <Center height={16} style={{ marginTop: 4 }} width={16}>
+                {content}
+              </Center>
+              <Text fontSize={12} type={isActive ? undefined : 'secondary'}>
+                {item.label || item.value}
+              </Text>
+            </Block>
+          );
+        })}
+      </Grid>
+    </Block>
+  );
+});
+
+export default SizeSelect;

package/src/app/[variants]/(main)/image/@menu/default.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import ConfigPanel from './features/ConfigPanel';
+
+const page = () => {
+  return <ConfigPanel />;
+};
+
+page.displayName = 'ImageConfigPanel';
+
+export default page;

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/AspectRatioSelect.tsx

@@ -0,0 +1,24 @@
+import { memo } from 'react';
+
+import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
+
+import Select from '../../../components/AspectRatioSelect';
+
+const AspectRatioSelect = memo(() => {
+  const { value, setValue, enumValues } = useGenerationConfigParam('aspectRatio');
+
+  // 如果模型支持 ratio 枚举值，则使用枚举值
+  if (enumValues && enumValues.length > 0) {
+    const options = enumValues.map((ratio) => ({
+      label: ratio,
+      value: ratio,
+    }));
+
+    return <Select onChange={setValue} options={options} style={{ width: '100%' }} value={value} />;
+  }
+
+  // 如果模型不支持 ratio 参数，返回 null（由外部处理是否显示）
+  return null;
+});
+
+export default AspectRatioSelect;