From 617af8b12ad684d777e45715921cbf2351b63bf8 Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Fri, 13 Sep 2024 15:46:48 +0800 Subject: [PATCH] feat: implemented vision model support and ui enhancements. - Updated color palette settings have been implemented. - Added VisionIcon component utilizing Ant Design icons and styled components for visual customization. - Updated vision model regex to include additional models. - Added support for multiple file columns in i18n resources. - Added translations to column titles. - Added support for vision models in the Select Model Button component. - Added functionality to display a vision model icon next to the model name on dropdown items. - Implemented changes to add vision model support to the Edit Models Popup. - Added icon to display vision models in provider settings. --- src/renderer/src/assets/styles/index.scss | 6 +++--- src/renderer/src/components/Icons/VisionIcon.tsx | 15 +++++++++++++++ src/renderer/src/config/models.ts | 2 +- src/renderer/src/i18n/index.ts | 12 ++++++++++-- src/renderer/src/pages/files/FilesPage.tsx | 8 ++++---- .../pages/home/components/SelectModelButton.tsx | 3 +++ .../pages/home/components/SelectModelDropdown.tsx | 8 +++++++- .../settings/ProviderSettings/EditModelsPopup.tsx | 4 +++- .../settings/ProviderSettings/ProviderSetting.tsx | 4 +++- 9 files changed, 49 insertions(+), 13 deletions(-) create mode 100644 src/renderer/src/components/Icons/VisionIcon.tsx diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss index d1fab437..155e2cc9 100644 --- a/src/renderer/src/assets/styles/index.scss +++ b/src/renderer/src/assets/styles/index.scss @@ -24,9 +24,9 @@ --color-background-soft: var(--color-black-soft); --color-background-mute: var(--color-black-mute); - --color-primary: #135200; - --color-primary-soft: #13520099; - --color-primary-mute: #13520033; + --color-primary: #00b96b; + --color-primary-soft: #00b96b99; + --color-primary-mute: #00b96b33; --color-text: var(--color-text-1); --color-icon: #ffffff99; diff --git a/src/renderer/src/components/Icons/VisionIcon.tsx b/src/renderer/src/components/Icons/VisionIcon.tsx new file mode 100644 index 00000000..6be4a087 --- /dev/null +++ b/src/renderer/src/components/Icons/VisionIcon.tsx @@ -0,0 +1,15 @@ +import { EyeOutlined } from '@ant-design/icons' +import React, { FC } from 'react' +import styled from 'styled-components' + +const VisionIcon: FC, HTMLElement>> = (props) => { + return +} + +const Icon = styled(EyeOutlined)` + color: var(--color-primary); + font-size: 14px; + margin-left: 4px; +` + +export default VisionIcon diff --git a/src/renderer/src/config/models.ts b/src/renderer/src/config/models.ts index 09696e55..46a39343 100644 --- a/src/renderer/src/config/models.ts +++ b/src/renderer/src/config/models.ts @@ -1,7 +1,7 @@ import { Model } from '@renderer/types' const TEXT_TO_IMAGE_REGEX = /flux|diffusion|stabilityai|sd-turbo|dall|cogview/i -const VISION_REGEX = /llava|moondream|minicpm|gemini|claude|vision|glm-4v/i +const VISION_REGEX = /llava|moondream|minicpm|gemini-1.5|claude-3|vision|glm-4v|gpt-4|qwen-vl/i const EMBEDDING_REGEX = /embedding/i export const SYSTEM_MODELS: Record = { diff --git a/src/renderer/src/i18n/index.ts b/src/renderer/src/i18n/index.ts index 239e2b4f..4db51f72 100644 --- a/src/renderer/src/i18n/index.ts +++ b/src/renderer/src/i18n/index.ts @@ -103,7 +103,11 @@ const resources = { 'assistant.search.placeholder': 'Search' }, files: { - title: 'Files' + title: 'Files', + file: 'File', + name: 'Name', + size: 'Size', + created_at: 'Created At' }, agents: { title: 'Assistants', @@ -362,7 +366,11 @@ const resources = { 'assistant.search.placeholder': '搜索' }, files: { - title: '文件' + title: '文件', + file: '文件', + name: '文件名', + size: '大小', + created_at: '创建时间' }, agents: { title: '智能体', diff --git a/src/renderer/src/pages/files/FilesPage.tsx b/src/renderer/src/pages/files/FilesPage.tsx index 467f9ec3..25491a37 100644 --- a/src/renderer/src/pages/files/FilesPage.tsx +++ b/src/renderer/src/pages/files/FilesPage.tsx @@ -24,23 +24,23 @@ const FilesPage: FC = () => { const columns = [ { - title: 'File', + title: t('files.file'), dataIndex: 'file', key: 'file' }, { - title: 'Name', + title: t('files.name'), dataIndex: 'name', key: 'name' }, { - title: 'Size', + title: t('files.size'), dataIndex: 'size', key: 'size', width: '100px' }, { - title: 'Created At', + title: t('files.created_at'), dataIndex: 'created_at', key: 'created_at', width: '120px' diff --git a/src/renderer/src/pages/home/components/SelectModelButton.tsx b/src/renderer/src/pages/home/components/SelectModelButton.tsx index fce7777d..a22335b5 100644 --- a/src/renderer/src/pages/home/components/SelectModelButton.tsx +++ b/src/renderer/src/pages/home/components/SelectModelButton.tsx @@ -1,5 +1,7 @@ import ModelAvatar from '@renderer/components/Avatar/ModelAvatar' +import VisionIcon from '@renderer/components/Icons/VisionIcon' import { isLocalAi } from '@renderer/config/env' +import { isVisionModel } from '@renderer/config/models' import { useAssistant } from '@renderer/hooks/useAssistant' import { Assistant } from '@renderer/types' import { Button } from 'antd' @@ -27,6 +29,7 @@ const SelectModelButton: FC = ({ assistant }) => { {model ? upperFirst(model.name) : t('button.select_model')} + {isVisionModel(model) && } ) diff --git a/src/renderer/src/pages/home/components/SelectModelDropdown.tsx b/src/renderer/src/pages/home/components/SelectModelDropdown.tsx index dca68a6e..29fceae5 100644 --- a/src/renderer/src/pages/home/components/SelectModelDropdown.tsx +++ b/src/renderer/src/pages/home/components/SelectModelDropdown.tsx @@ -1,3 +1,5 @@ +import VisionIcon from '@renderer/components/Icons/VisionIcon' +import { isVisionModel } from '@renderer/config/models' import { getModelLogo } from '@renderer/config/provider' import { useProviders } from '@renderer/hooks/useProvider' import { getModelUniqId } from '@renderer/services/model' @@ -25,7 +27,11 @@ const SelectModelDropdown: FC = ({ children, model, o type: 'group', children: reverse(sortBy(p.models, 'name')).map((m) => ({ key: getModelUniqId(m), - label: upperFirst(m?.name), + label: ( +
+ {upperFirst(m?.name)} {isVisionModel(m) && } +
+ ), defaultSelectedKeys: model ? [getModelUniqId(model)] : [], icon: ( diff --git a/src/renderer/src/pages/settings/ProviderSettings/EditModelsPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/EditModelsPopup.tsx index f1ce4dc4..6ce5cb3c 100644 --- a/src/renderer/src/pages/settings/ProviderSettings/EditModelsPopup.tsx +++ b/src/renderer/src/pages/settings/ProviderSettings/EditModelsPopup.tsx @@ -1,5 +1,6 @@ import { LoadingOutlined, MinusOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons' -import { SYSTEM_MODELS } from '@renderer/config/models' +import VisionIcon from '@renderer/components/Icons/VisionIcon' +import { isVisionModel, SYSTEM_MODELS } from '@renderer/config/models' import { getModelLogo } from '@renderer/config/provider' import { useProvider } from '@renderer/hooks/useProvider' import { fetchModels } from '@renderer/services/api' @@ -126,6 +127,7 @@ const PopupContainer: React.FC = ({ provider: _provider, resolve }) => { {model.name} + {isVisionModel(model) && } {isFreeModel(model) && ( Free diff --git a/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx b/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx index 75982592..acd8c74e 100644 --- a/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx +++ b/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx @@ -6,6 +6,8 @@ import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons' +import VisionIcon from '@renderer/components/Icons/VisionIcon' +import { isVisionModel } from '@renderer/config/models' import { getModelLogo } from '@renderer/config/provider' import { PROVIDER_CONFIG } from '@renderer/config/provider' import { useTheme } from '@renderer/context/ThemeProvider' @@ -148,7 +150,7 @@ const ProviderSetting: FC = ({ provider: _provider }) => { {model.name[0].toUpperCase()} - {model.name} + {model.name} {isVisionModel(model) && } removeModel(model)} />