@lobehub/chat 1.104.0 → 1.104.1

package/src/app/[variants]/(main)/image/features/GenerationFeed/GenerationItem/utils.ts

@@ -1,11 +1,130 @@
-import { Generation } from '@/types/generation';
+import { Generation, GenerationBatch } from '@/types/generation';
 
-// 计算图片的宽高比，用于设置容器的 aspect-ratio
-export const getAspectRatio = (asset: Generation['asset']) => {
-  if (!asset?.width || !asset?.height) {
-    // 如果没有尺寸信息，使用 1:1 比例
-    return '1 / 1';
+// Default maximum width for image items
+export const DEFAULT_MAX_ITEM_WIDTH = 200;
+
+/**
+ * Get image dimensions from various sources
+ * Returns width, height and aspect ratio when available
+ */
+export const getImageDimensions = (
+  generation: Generation,
+  generationBatch?: GenerationBatch,
+): { aspectRatio: string | null; height: number | null; width: number | null } => {
+  // 1. Priority: actual dimensions from asset
+  if (
+    generation.asset?.width &&
+    generation.asset?.height &&
+    generation.asset.width > 0 &&
+    generation.asset.height > 0
+  ) {
+    const { width, height } = generation.asset;
+    return {
+      aspectRatio: `${width} / ${height}`,
+      height,
+      width,
+    };
+  }
+
+  // 2. Try to get dimensions from generationBatch config
+  const config = generationBatch?.config;
+  if (config?.width && config?.height && config.width > 0 && config.height > 0) {
+    const { width, height } = config;
+    return {
+      aspectRatio: `${width} / ${height}`,
+      height,
+      width,
+    };
+  }
+
+  // 3. Try to get dimensions from generationBatch top-level
+  if (
+    generationBatch?.width &&
+    generationBatch?.height &&
+    generationBatch.width > 0 &&
+    generationBatch.height > 0
+  ) {
+    const { width, height } = generationBatch;
+    return {
+      aspectRatio: `${width} / ${height}`,
+      height,
+      width,
+    };
+  }
+
+  // 4. Try to parse from size parameter (format: "1024x768")
+  if (config?.size && config.size !== 'auto') {
+    const sizeMatch = config.size.match(/^(\d+)x(\d+)$/);
+    if (sizeMatch) {
+      const [, widthStr, heightStr] = sizeMatch;
+      const width = parseInt(widthStr, 10);
+      const height = parseInt(heightStr, 10);
+      if (width > 0 && height > 0) {
+        return {
+          aspectRatio: `${width} / ${height}`,
+          height,
+          width,
+        };
+      }
+    }
+  }
+
+  // 5. Try to get aspect ratio only (format: "16:9")
+  if (config?.aspectRatio) {
+    const ratioMatch = config.aspectRatio.match(/^(\d+):(\d+)$/);
+    if (ratioMatch) {
+      const [, x, y] = ratioMatch;
+      return {
+        aspectRatio: `${x} / ${y}`,
+        height: null,
+        width: null,
+      };
+    }
   }
 
-  return `${asset.width} / ${asset.height}`;
+  // 6. No dimensions available
+  return {
+    aspectRatio: null,
+    height: null,
+    width: null,
+  };
+};
+
+export const getAspectRatio = (
+  generation: Generation,
+  generationBatch?: GenerationBatch,
+): string => {
+  const dimensions = getImageDimensions(generation, generationBatch);
+  return dimensions.aspectRatio || '1 / 1';
+};
+
+/**
+ * Calculate display max width for generation items
+ * Ensures height doesn't exceed half screen height based on original aspect ratio
+ *
+ * @note This function is only used in client-side rendering environments.
+ * It directly accesses window.innerHeight and is not designed for SSR compatibility.
+ */
+export const getThumbnailMaxWidth = (
+  generation: Generation,
+  generationBatch?: GenerationBatch,
+): number => {
+  const dimensions = getImageDimensions(generation, generationBatch);
+
+  // Return default width if dimensions are not available
+  if (!dimensions.width || !dimensions.height) {
+    return DEFAULT_MAX_ITEM_WIDTH;
+  }
+
+  const { width: originalWidth, height: originalHeight } = dimensions;
+  const aspectRatio = originalWidth / originalHeight;
+
+  // Apply screen height constraint (half of screen height)
+  // Note: window.innerHeight is safe to use here as this function is client-side only
+  const maxScreenHeight = window.innerHeight / 2;
+  const maxWidthFromHeight = Math.round(maxScreenHeight * aspectRatio);
+
+  // Use the smaller of: calculated width from height constraint or a reasonable maximum
+  const maxReasonableWidth = DEFAULT_MAX_ITEM_WIDTH * 2;
+  return Math.min(maxWidthFromHeight, maxReasonableWidth);
 };

package/src/const/imageGeneration.ts

@@ -0,0 +1,18 @@
+/**
+ * Image generation and processing configuration constants
+ */
+export const IMAGE_GENERATION_CONFIG = {
+  
+  /**
+   * Maximum cover image size in pixels (longest edge)
+   * Used for generating cover images from source images
+   */
+COVER_MAX_SIZE: 256,
+
+  
+  /**
+   * Maximum thumbnail size in pixels (longest edge)
+   * Used for generating thumbnail images from original images
+   */
+THUMBNAIL_MAX_SIZE: 512,
+} as const;

package/src/libs/model-runtime/utils/openaiCompatibleFactory/index.test.ts

@@ -1112,6 +1112,7 @@ describe('LobeOpenAICompatibleFactory', () => {
           image: expect.any(File),
           mask: 'https://example.com/mask.jpg',
           response_format: 'b64_json',
+          input_fidelity: 'high',
         });
 
         expect(result).toEqual({
@@ -1157,6 +1158,7 @@ describe('LobeOpenAICompatibleFactory', () => {
           prompt: 'Merge these images',
           image: [mockFile1, mockFile2],
           response_format: 'b64_json',
+          input_fidelity: 'high',
         });
 
         expect(result).toEqual({
@@ -1286,6 +1288,7 @@ describe('LobeOpenAICompatibleFactory', () => {
           image: expect.any(File),
           customParam: 'should remain unchanged',
           response_format: 'b64_json',
+          input_fidelity: 'high',
         });
       });
 

package/src/libs/model-runtime/utils/openaiCompatibleFactory/index.ts

@@ -340,11 +340,6 @@ export const createOpenAICompatibleRuntime = <T extends Record<string, any> = an
 
       log('Creating image with model: %s and params: %O', model, params);
 
-      const defaultInput = {
-        n: 1,
-        ...(model.includes('dall-e') ? { response_format: 'b64_json' } : {}),
-      };
-
       // 映射参数名称，将 imageUrls 映射为 image
       const paramsMap = new Map<RuntimeImageGenParamsValue, string>([
         ['imageUrls', 'image'],
@@ -357,6 +352,7 @@ export const createOpenAICompatibleRuntime = <T extends Record<string, any> = an
         ]),
       );
 
+      // https://platform.openai.com/docs/api-reference/images/createEdit
       const isImageEdit = Array.isArray(userInput.image) && userInput.image.length > 0;
       // 如果有 imageUrls 参数，将其转换为 File 对象
       if (isImageEdit) {
@@ -383,6 +379,12 @@ export const createOpenAICompatibleRuntime = <T extends Record<string, any> = an
         delete userInput.size;
       }
 
+      const defaultInput = {
+        n: 1,
+        ...(model.includes('dall-e') ? { response_format: 'b64_json' } : {}),
+        ...(isImageEdit ? { input_fidelity: 'high' } : {}),
+      };
+
       const options = {
         model,
         ...defaultInput,

package/src/libs/model-runtime/utils/streams/openai/openai.ts

@@ -23,6 +23,7 @@ import {
 const transformOpenAIStream = (
   chunk: OpenAI.ChatCompletionChunk,
   streamContext: StreamContext,
+  provider?: string,
 ): StreamProtocolChunk | StreamProtocolChunk[] => {
   // handle the first chunk error
   if (FIRST_CHUNK_ERROR_KEY in chunk) {
@@ -45,7 +46,7 @@ const transformOpenAIStream = (
     if (!item) {
       if (chunk.usage) {
         const usage = chunk.usage;
-        return { data: convertUsage(usage), id: chunk.id, type: 'usage' };
+        return { data: convertUsage(usage, provider), id: chunk.id, type: 'usage' };
       }
 
       return { data: chunk, id: chunk.id, type: 'data' };
@@ -155,7 +156,7 @@ const transformOpenAIStream = (
 
       if (chunk.usage) {
         const usage = chunk.usage;
-        return { data: convertUsage(usage), id: chunk.id, type: 'usage' };
+        return { data: convertUsage(usage, provider), id: chunk.id, type: 'usage' };
       }
 
       // xAI Live Search 功能返回引用源
@@ -274,7 +275,7 @@ const transformOpenAIStream = (
     // litellm 的返回结果中，存在 delta 为空，但是有 usage 的情况
     if (chunk.usage) {
       const usage = chunk.usage;
-      return { data: convertUsage(usage), id: chunk.id, type: 'usage' };
+      return { data: convertUsage(usage, provider), id: chunk.id, type: 'usage' };
     }
 
     // 其余情况下，返回 delta 和 index
@@ -321,6 +322,9 @@ export const OpenAIStream = (
 ) => {
   const streamStack: StreamContext = { id: '' };
 
+  const transformWithProvider = (chunk: OpenAI.ChatCompletionChunk, streamContext: StreamContext) =>
+    transformOpenAIStream(chunk, streamContext, provider);
+
   const readableStream =
     stream instanceof ReadableStream ? stream : convertIterableToStream(stream);
 
@@ -330,7 +334,7 @@ export const OpenAIStream = (
       // provider like huggingface or minimax will return error in the stream,
       // so in the first Transformer, we need to handle the error
       .pipeThrough(createFirstErrorHandleTransformer(bizErrorTypeTransformer, provider))
-      .pipeThrough(createTokenSpeedCalculator(transformOpenAIStream, { inputStartAt, streamStack }))
+      .pipeThrough(createTokenSpeedCalculator(transformWithProvider, { inputStartAt, streamStack }))
       .pipeThrough(createSSEProtocolTransformer((c) => c, streamStack))
       .pipeThrough(createCallbacksTransformer(callbacks))
   );

package/src/libs/model-runtime/utils/usageConverter.test.ts

@@ -1,7 +1,7 @@
 import OpenAI from 'openai';
 import { describe, expect, it } from 'vitest';
 
-import { convertUsage } from './usageConverter';
+import { convertUsage, convertResponseUsage } from './usageConverter';
 
 describe('convertUsage', () => {
   it('should convert basic OpenAI usage data correctly', () => {
@@ -246,4 +246,48 @@ describe('convertUsage', () => {
     expect(result).not.toHaveProperty('outputReasoningTokens');
     expect(result).not.toHaveProperty('outputAudioTokens');
   });
+
+  it('should handle XAI provider correctly where completion_tokens does not include reasoning_tokens', () => {
+    // Arrange
+    const xaiUsage: OpenAI.Completions.CompletionUsage = {
+      prompt_tokens: 6103,
+      completion_tokens: 66, // 这个不包含 reasoning_tokens
+      total_tokens: 6550,
+      prompt_tokens_details: {
+        audio_tokens: 0,
+        cached_tokens: 0,
+      },
+      completion_tokens_details: {
+        accepted_prediction_tokens: 0,
+        audio_tokens: 0,
+        reasoning_tokens: 381, // 这是额外的 reasoning tokens
+        rejected_prediction_tokens: 0,
+      },
+    };
+
+    // Act
+    const xaiResult = convertUsage(xaiUsage, 'xai');
+
+    // Assert
+    expect(xaiResult).toMatchObject({
+      totalInputTokens: 6103,
+      totalOutputTokens: 66,
+      outputTextTokens: 66, // 不减去 reasoning_tokens
+      outputReasoningTokens: 381,
+      totalTokens: 6550,
+    });
+
+    // 测试其他 provider（默认行为）
+    const defaultResult = convertUsage(xaiUsage);
+
+    // 默认行为: outputTextTokens 应该是 completion_tokens - reasoning_tokens - audio_tokens = 66 - 381 - 0 = -315
+    expect(defaultResult.outputTextTokens).toBe(-315);
+    expect(defaultResult).toMatchObject({
+      totalInputTokens: 6103,
+      totalOutputTokens: 66,
+      outputTextTokens: -315, // 负数确实会出现在结果中
+      outputReasoningTokens: 381,
+      totalTokens: 6550,
+    });
+  });
 });

package/src/libs/model-runtime/utils/usageConverter.ts

@@ -2,7 +2,7 @@ import OpenAI from 'openai';
 
 import { ModelTokensUsage } from '@/types/message';
 
-export const convertUsage = (usage: OpenAI.Completions.CompletionUsage): ModelTokensUsage => {
+export const convertUsage = (usage: OpenAI.Completions.CompletionUsage, provider?: string): ModelTokensUsage => {
   // 目前只有 pplx 才有 citation_tokens
   const inputTextTokens = usage.prompt_tokens || 0;
   const inputCitationTokens = (usage as any).citation_tokens || 0;
@@ -17,7 +17,11 @@ export const convertUsage = (usage: OpenAI.Completions.CompletionUsage): ModelTo
   const totalOutputTokens = usage.completion_tokens;
   const outputReasoning = usage.completion_tokens_details?.reasoning_tokens || 0;
   const outputAudioTokens = usage.completion_tokens_details?.audio_tokens || 0;
-  const outputTextTokens = totalOutputTokens - outputReasoning - outputAudioTokens;
+  
+  // XAI 的 completion_tokens 不包含 reasoning_tokens，需要特殊处理
+  const outputTextTokens = provider === 'xai' 
+    ? totalOutputTokens - outputAudioTokens
+    : totalOutputTokens - outputReasoning - outputAudioTokens;
 
   const totalTokens = inputCitationTokens + usage.total_tokens;