diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e2cf6129986..cf4d6d1c8427 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,31 @@ # Changelog +### [Version 1.16.7](https://github.com/lobehub/lobe-chat/compare/v1.16.6...v1.16.7) + +Released on **2024-09-11** + +#### 💄 Styles + +- **misc**: Optimize model token display method. + +
+ +
+Improvements and Fixes + +#### Styles + +- **misc**: Optimize model token display method, closes [#3697](https://github.com/lobehub/lobe-chat/issues/3697) ([249795c](https://github.com/lobehub/lobe-chat/commit/249795c)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ ### [Version 1.16.6](https://github.com/lobehub/lobe-chat/compare/v1.16.5...v1.16.6) Released on **2024-09-11** diff --git a/README.md b/README.md index 11fe035756f4..014fb38ac964 100644 --- a/README.md +++ b/README.md @@ -285,14 +285,14 @@ Our marketplace is not just a showcase platform but also a collaborative space. -| Recent Submits | Description | -| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [AI Agent Generator](https://chat-preview.lobehub.com/market?agent=ai-agent-generator)
By **[xyftw](https://github.com/xyftw)** on **2024-09-10** | Skilled at creating AI Agent character descriptions that meet the needs.
`ai-agent` `character-creation` | -| [Desolate Friend](https://chat-preview.lobehub.com/market?agent=meu)
By **[adminewacc](https://github.com/adminewacc)** on **2024-09-10** | Skilled at comforting and supporting friends
`friendship` `sadness` `support` | -| [NetMaster](https://chat-preview.lobehub.com/market?agent=net-master)
By **[erhuoyan](https://github.com/erhuoyan)** on **2024-09-10** | Network Engineer: Professional network topology construction and management
`network-engineer` `network-configuration` `network-management` `network-topology` `network-security` | -| [HTML to React](https://chat-preview.lobehub.com/market?agent=web-react)
By **[xingwang02](https://github.com/xingwang02)** on **2024-09-10** | Input HTML snippets and convert them into React components
`react` `html` | - -> 📊 Total agents: [**327** ](https://github.com/lobehub/lobe-chat-agents) +| Recent Submits | Description | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Resume Analysis Expert](https://chat-preview.lobehub.com/market?agent=resume-analyzer)
By **[Pandurangmopgar](https://github.com/Pandurangmopgar)** on **2024-09-11** | Expert AI assistant for comprehensive resume analysis and job-specific optimization. Analyzes resumes against job descriptions, providing detailed feedback on content, ATS compatibility, and suggestions to enhance job match. Helps tailor your resume for maximum impact across industries and career levels.
`resume` `career` `job-search` `ats` `cv` `analysis` `optimization` `professional-development` `interview-prep` | +| [AI Agent Generator](https://chat-preview.lobehub.com/market?agent=ai-agent-generator)
By **[xyftw](https://github.com/xyftw)** on **2024-09-10** | Skilled at creating AI Agent character descriptions that meet the needs.
`ai-agent` `character-creation` | +| [Desolate Friend](https://chat-preview.lobehub.com/market?agent=meu)
By **[adminewacc](https://github.com/adminewacc)** on **2024-09-10** | Skilled at comforting and supporting friends
`friendship` `sadness` `support` | +| [NetMaster](https://chat-preview.lobehub.com/market?agent=net-master)
By **[erhuoyan](https://github.com/erhuoyan)** on **2024-09-10** | Network Engineer: Professional network topology construction and management
`network-engineer` `network-configuration` `network-management` `network-topology` `network-security` | + +> 📊 Total agents: [**328** ](https://github.com/lobehub/lobe-chat-agents) diff --git a/README.zh-CN.md b/README.zh-CN.md index f9dd646aed02..eb8f5873c623 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -273,14 +273,14 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地 -| 最近新增 | 助手说明 | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | -| [AI 代理生成器](https://chat-preview.lobehub.com/market?agent=ai-agent-generator)
By **[xyftw](https://github.com/xyftw)** on **2024-09-10** | 擅长创建满足需求的 AI 代理角色描述。
`ai-agent` `角色创建` | -| [孤独的朋友](https://chat-preview.lobehub.com/market?agent=meu)
By **[adminewacc](https://github.com/adminewacc)** on **2024-09-10** | 擅长安慰和支持朋友
`友谊` `悲伤` `支持` | -| [NetMaster](https://chat-preview.lobehub.com/market?agent=net-master)
By **[erhuoyan](https://github.com/erhuoyan)** on **2024-09-10** | 网络工程师：专业网络拓扑搭建与管理
`网络工程师` `网络配置` `网络管理` `网络拓扑` `网络安全` | -| [HTML to React](https://chat-preview.lobehub.com/market?agent=web-react)
By **[xingwang02](https://github.com/xingwang02)** on **2024-09-10** | 输入 HTML 片段，转化为 React 组件
`react、-html` | - -> 📊 Total agents: [**327** ](https://github.com/lobehub/lobe-chat-agents) +| 最近新增 | 助手说明 | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [简历分析专家](https://chat-preview.lobehub.com/market?agent=resume-analyzer)
By **[Pandurangmopgar](https://github.com/Pandurangmopgar)** on **2024-09-11** | 专家级 AI 助手，提供全面的简历分析和职位特定优化。根据职位描述分析简历，提供关于内容、ATS 兼容性和增强职位匹配的详细反馈。帮助您量身定制简历，以在各行业和职业层次上产生最大影响。
`简历` `职业` `求职` `ats` `cv` `分析` `优化` `职业发展` `面试准备` | +| [AI 代理生成器](https://chat-preview.lobehub.com/market?agent=ai-agent-generator)
By **[xyftw](https://github.com/xyftw)** on **2024-09-10** | 擅长创建满足需求的 AI 代理角色描述。
`ai-agent` `角色创建` | +| [孤独的朋友](https://chat-preview.lobehub.com/market?agent=meu)
By **[adminewacc](https://github.com/adminewacc)** on **2024-09-10** | 擅长安慰和支持朋友
`友谊` `悲伤` `支持` | +| [NetMaster](https://chat-preview.lobehub.com/market?agent=net-master)
By **[erhuoyan](https://github.com/erhuoyan)** on **2024-09-10** | 网络工程师：专业网络拓扑搭建与管理
`网络工程师` `网络配置` `网络管理` `网络拓扑` `网络安全` | + +> 📊 Total agents: [**328** ](https://github.com/lobehub/lobe-chat-agents) diff --git a/package.json b/package.json index 68fe0c8f66d0..a488db36dcf0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lobehub/chat", - "version": "1.16.6", + "version": "1.16.7", "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", diff --git a/src/components/ModelSelect/index.tsx b/src/components/ModelSelect/index.tsx index 12b61d5ee1a8..c963e3df5660 100644 --- a/src/components/ModelSelect/index.tsx +++ b/src/components/ModelSelect/index.tsx @@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next'; import { Center, Flexbox } from 'react-layout-kit'; import { ChatModelCard } from '@/types/llm'; +import { formatTokenNumber } from '@/utils/format'; const useStyles = createStyles(({ css, token }) => ({ custom: css` @@ -55,15 +56,6 @@ const useStyles = createStyles(({ css, token }) => ({ border-radius: 4px; `, })); -const formatTokenNumber = (num: number): string => { - if (num > 0 && num < 1024) return '1K'; - - let kiloToken = Math.floor(num / 1024); - if (num >= 128_000 && num < 1_024_000) { - kiloToken = Math.floor(num / 1000); - } - return kiloToken < 1000 ? `${kiloToken}K` : `${Math.floor(kiloToken / 1000)}M`; -}; interface ModelInfoTagsProps extends ChatModelCard { directionReverse?: boolean; diff --git a/src/utils/format.test.ts b/src/utils/format.test.ts index 58c1daa9c808..d70a9a296c61 100644 --- a/src/utils/format.test.ts +++ b/src/utils/format.test.ts @@ -1,6 +1,6 @@ import { describe, expect, it } from 'vitest'; -import { formatSize, formatSpeed, formatTime } from './format'; +import { formatSize, formatSpeed, formatTime, formatTokenNumber } from './format'; describe('formatSize', () => { it('should format bytes to KB correctly', () => { @@ -73,3 +73,44 @@ describe('formatTime', () => { expect(formatTime(3599.99)).toBe('60.0 min'); }); }); + +describe('formatTokenNumber', () => { + it('should return "1K" for numbers between 1 and 1023', () => { + expect(formatTokenNumber(500)).toBe('1K'); + expect(formatTokenNumber(1000)).toBe('1K'); + }); + + it('should format numbers between 1024 and 41,983 correctly', () => { + expect(formatTokenNumber(1024)).toBe('1K'); + expect(formatTokenNumber(2000)).toBe('2K'); + expect(formatTokenNumber(2048)).toBe('2K'); + expect(formatTokenNumber(4000)).toBe('4K'); + expect(formatTokenNumber(4096)).toBe('4K'); + expect(formatTokenNumber(32000)).toBe('32K'); + expect(formatTokenNumber(65536)).toBe('64K'); + }); + + it('should format numbers between 41,984 and 127,999 correctly', () => { + expect(formatTokenNumber(41984)).toBe('41K'); + expect(formatTokenNumber(100000)).toBe('97K'); + expect(formatTokenNumber(127999)).toBe('124K'); + }); + + it('should return "128K" for 131,072', () => { + expect(formatTokenNumber(131072)).toBe('128K'); // Qwen + }); + + it('should format numbers between 128,000 and 999,999 correctly', () => { + expect(formatTokenNumber(128000)).toBe('128K'); + expect(formatTokenNumber(200000)).toBe('200K'); // Claude + expect(formatTokenNumber(999999)).toBe('999K'); + }); + + it('should format numbers 1,000,000 and above correctly', () => { + expect(formatTokenNumber(1000000)).toBe('1M'); + expect(formatTokenNumber(1024000)).toBe('1M'); + expect(formatTokenNumber(1048576)).toBe('1M'); // Gemini Flash + expect(formatTokenNumber(2000000)).toBe('2M'); + expect(formatTokenNumber(2097152)).toBe('2M'); // Gemini Pro + }); +}); diff --git a/src/utils/format.ts b/src/utils/format.ts index 050919f25cc8..b3bd551dc0a9 100644 --- a/src/utils/format.ts +++ b/src/utils/format.ts @@ -54,3 +54,14 @@ export const formatTime = (timeInSeconds: number): string => { export const formatNumber = (num: any) => { return new Intl.NumberFormat('en-US').format(num); }; + +export const formatTokenNumber = (num: number): string => { + if (num > 0 && num < 1024) return '1K'; + + let kiloToken = Math.floor(num / 1024); + if (num >= 1024 && num < 1024 * 41 || num >= 128_000) { + kiloToken = Math.floor(num / 1000); + } + if (num === 131_072) return '128K'; + return kiloToken < 1000 ? `${kiloToken}K` : `${Math.floor(kiloToken / 1000)}M`; +};