diff --git a/web/containers/ModelDropdown/ModelSection.tsx b/web/containers/ModelDropdown/ModelSection.tsx index 63a2512bf1..dca851c1fc 100644 --- a/web/containers/ModelDropdown/ModelSection.tsx +++ b/web/containers/ModelDropdown/ModelSection.tsx @@ -25,7 +25,11 @@ import { twMerge } from 'tailwind-merge' import useEngineQuery from '@/hooks/useEngineQuery' import useGetModelsByEngine from '@/hooks/useGetModelsByEngine' -import { getLogoByLocalEngine, getTitleByCategory } from '@/utils/model-engine' +import { + getLogoByLocalEngine, + getLogoByRemoteEngine, + getTitleByCategory, +} from '@/utils/model-engine' import ModelLabel from '../ModelLabel' @@ -96,6 +100,7 @@ const ModelSection: React.FC = ({ const engineName = getTitleByCategory(engine) const localEngineLogo = getLogoByLocalEngine(engine as LocalEngine) + const remoteEngineLogo = getLogoByRemoteEngine(engine as RemoteEngine) const isRemoteEngine = RemoteEngines.includes(engine as RemoteEngine) if (models.length === 0) return null @@ -107,22 +112,23 @@ const ModelSection: React.FC = ({ className="flex cursor-pointer gap-2 pl-3" onClick={onClickChevron} > - {!isRemoteEngine && ( + {!isRemoteEngine && localEngineLogo && ( logo )} - {engineLogo && ( + + {remoteEngineLogo && ( logo )}
diff --git a/web/public/icons/anthropic.svg b/web/public/icons/anthropic.svg new file mode 100644 index 0000000000..1f3f18dcfc --- /dev/null +++ b/web/public/icons/anthropic.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/web/public/icons/cohere.svg b/web/public/icons/cohere.svg new file mode 100644 index 0000000000..0ff4f00290 --- /dev/null +++ b/web/public/icons/cohere.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/web/public/icons/dot.svg b/web/public/icons/dot.svg new file mode 100644 index 0000000000..f667c20b13 --- /dev/null +++ b/web/public/icons/dot.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/public/icons/groq.svg b/web/public/icons/groq.svg new file mode 100644 index 0000000000..9c2e0a34a8 --- /dev/null +++ b/web/public/icons/groq.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/web/public/icons/martian.svg b/web/public/icons/martian.svg new file mode 100644 index 0000000000..b5ceacdf8c --- /dev/null +++ b/web/public/icons/martian.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/web/public/icons/mistral.svg b/web/public/icons/mistral.svg new file mode 100644 index 0000000000..22233c55cd --- /dev/null +++ b/web/public/icons/mistral.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/public/icons/nvidia.svg b/web/public/icons/nvidia.svg new file mode 100644 index 0000000000..09c2194ece --- /dev/null +++ b/web/public/icons/nvidia.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/web/public/icons/openRouter.svg b/web/public/icons/openRouter.svg new file mode 100644 index 0000000000..62ff2b424b --- /dev/null +++ b/web/public/icons/openRouter.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/web/public/icons/openai.svg b/web/public/icons/openai.svg new file mode 100644 index 0000000000..8f07854155 --- /dev/null +++ b/web/public/icons/openai.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/web/public/icons/send.svg b/web/public/icons/send.svg new file mode 100644 index 0000000000..28d30299fd --- /dev/null +++ b/web/public/icons/send.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/screens/HubScreen2/components/RemoteModelGroup.tsx b/web/screens/HubScreen2/components/RemoteModelGroup.tsx index a1bc3f5110..52b1eb2c23 100644 --- a/web/screens/HubScreen2/components/RemoteModelGroup.tsx +++ b/web/screens/HubScreen2/components/RemoteModelGroup.tsx @@ -14,7 +14,7 @@ import useEngineQuery from '@/hooks/useEngineQuery' import { HfModelEntry } from '@/utils/huggingface' -import { getTitleByCategory } from '@/utils/model-engine' +import { getLogoByRemoteEngine, getTitleByCategory } from '@/utils/model-engine' import RemoteModelCard from './RemoteModelCard' @@ -30,14 +30,12 @@ const RemoteModelGroup: React.FC = ({ data, engine, onSeeAllClick }) => { const { data: engineData } = useEngineQuery() const setUpRemoteModelStage = useSetAtom(setUpRemoteModelStageAtom) - const engineLogo: string | undefined = data.find( - (entry) => entry.model?.metadata?.logo != null - )?.model?.metadata?.logo - const apiKeyUrl: string | undefined = data.find( (entry) => entry.model?.metadata?.api_key_url != null )?.model?.metadata?.api_key_url + const remoteEngineLogo = getLogoByRemoteEngine(engine as RemoteEngine) + // get maximum 4 items const models = data.slice(0, 4) const showSeeAll = models.length < data.length @@ -54,19 +52,19 @@ const RemoteModelGroup: React.FC = ({ data, engine, onSeeAllClick }) => { const onSetUpClick = useCallback(() => { setUpRemoteModelStage('SETUP_API_KEY', engine, { - logo: engineLogo, + logo: remoteEngineLogo, api_key_url: apiKeyUrl, }) - }, [setUpRemoteModelStage, engine, engineLogo, apiKeyUrl]) + }, [setUpRemoteModelStage, engine, remoteEngineLogo, apiKeyUrl]) return (
- {engineLogo && ( + {remoteEngineLogo && ( Engine logo diff --git a/web/screens/Settings/MyModels/ModelGroup/index.tsx b/web/screens/Settings/MyModels/ModelGroup/index.tsx index fe5e9aac60..c72e57fe52 100644 --- a/web/screens/Settings/MyModels/ModelGroup/index.tsx +++ b/web/screens/Settings/MyModels/ModelGroup/index.tsx @@ -23,7 +23,11 @@ import { import useEngineQuery from '@/hooks/useEngineQuery' import useGetModelsByEngine from '@/hooks/useGetModelsByEngine' -import { getLogoByLocalEngine, getTitleByCategory } from '@/utils/model-engine' +import { + getLogoByLocalEngine, + getLogoByRemoteEngine, + getTitleByCategory, +} from '@/utils/model-engine' import ModelItem from '../ModelItem' @@ -89,6 +93,7 @@ const ModelGroup: React.FC = ({ engine, searchText }) => { const engineName = getTitleByCategory(engine) const localEngineLogo = getLogoByLocalEngine(engine as LocalEngine) + const remoteEngineLogo = getLogoByRemoteEngine(engine as RemoteEngine) const isRemoteEngine = RemoteEngines.includes(engine as RemoteEngine) if (models.length === 0) return null @@ -100,21 +105,21 @@ const ModelGroup: React.FC = ({ engine, searchText }) => { className="flex cursor-pointer items-center gap-2 pl-3" onClick={onClickChevron} > - {!isRemoteEngine && ( + {!isRemoteEngine && localEngineLogo && ( logo )} - {engineLogo && ( + {remoteEngineLogo && ( logo )} diff --git a/web/utils/model-engine.ts b/web/utils/model-engine.ts index 9c6630ed09..fac3dbdd9b 100644 --- a/web/utils/model-engine.ts +++ b/web/utils/model-engine.ts @@ -1,4 +1,4 @@ -import { LocalEngine } from '@janhq/core' +import { LocalEngine, RemoteEngine } from '@janhq/core' import { ModelHubCategory } from '@/hooks/useModelHub' @@ -57,3 +57,29 @@ export const getLogoByLocalEngine = (engine: LocalEngine) => { return undefined } } + +export const getLogoByRemoteEngine = (engine: RemoteEngine) => { + switch (engine) { + case 'anthropic': + return 'icons/anthropic.svg' + case 'mistral': + return 'icons/mistral.svg' + case 'martian': + return 'icons/martian.svg' + case 'openrouter': + return 'icons/openrouter.svg' + case 'openai': + return 'icons/openai.svg' + case 'groq': + return 'icons/groq.svg' + case 'triton_trtllm': + return 'icons/triton_trtllm.svg' + case 'cohere': + return 'icons/cohere.svg' + case 'nvidia': + return 'icons/nvidia.svg' + + default: + return undefined + } +}