chore: add engine logo from local instead of metadata logo (#3363)

This commit is contained in:
Faisal Amir 2024-08-13 20:17:47 +07:00 committed by GitHub
parent 3b2c84c4fe
commit ad6fbea22d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 161 additions and 21 deletions

View File

@ -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<Props> = ({
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<Props> = ({
className="flex cursor-pointer gap-2 pl-3"
onClick={onClickChevron}
>
{!isRemoteEngine && (
{!isRemoteEngine && localEngineLogo && (
<Image
className="h-5 w-5 flex-shrink-0 rounded-full object-cover"
width={40}
height={40}
src={localEngineLogo as string}
src={localEngineLogo}
alt="logo"
/>
)}
{engineLogo && (
{remoteEngineLogo && (
<Image
className="h-5 w-5 flex-shrink-0 rounded-full object-cover"
width={40}
height={40}
src={engineLogo}
alt="logo"
src={remoteEngineLogo}
alt={`logo - ${engine}`}
/>
)}
<h6 className="pr-3 font-medium text-[hsla(var(--text-secondary))]">

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 9.6 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 35 KiB

3
web/public/icons/dot.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="3" fill="#18181B"/>
</svg>

After

Width:  |  Height:  |  Size: 148 B

View File

@ -0,0 +1,9 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="16" height="16" rx="8" fill="url(#pattern0_3571_159)"/>
<defs>
<pattern id="pattern0_3571_159" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_3571_159" transform="scale(0.00497512)"/>
</pattern>
<image id="image0_3571_159" width="201" height="201" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMkAAADJCAMAAAC+GOY3AAAAQlBMVEX1TzX1TzX1TzX1TzX1TzX2WkL4e2j6p5r7sqf9083+9PL////+6eb5kYH4hnT7vbP3cFv8yMD93tn2ZU75nI31TzW9T89eAAAABXRSTlOPv2CAQLFEbcUAAAUSSURBVHic7ZzrmqMgDIbnsIra2mpb7/9Wt4c5dElQMGH57JPv90zlFXKQQN7e3l9DH2/v02vo00jgZCR4MhI8GQmejARPRoInI8GTkeDJSPBkJHgyEjwZCZ6MBE9GgicjwZOR4MlI8GQkeDKSKFW1a9q22920b1vX1/melY+kOhz3O6rWDXmel4vkMDIUX9o3WWBykFSuC3PcderVH5qBpDouYDwmRp1Fm2R5Pn5YDqoP1iapOSsPqT1rPlqVpGoSOK7qNJeYJsmQMiEPHSu1pyuS9LEW8qyTmkfWI3ErOK7qtFDUSKJ8L4ui5MO0SFaDXKVj90okEhClBaZDcpGAKKGokBxkINd4r+CMNUjOYffbja5+vPD64NowSisehArJKYRB0vdwsu/Eo1AgCQQSPts9hzJMsanISQZ+Pi6hvw9k/SfhMBRI2LU1zpkwnzBL15eYpOdGFZyQh9hp6YT+S0zCvN+I8MDZ1lE2ECkJMyVRcY6bStmHl5SETklkwGZQGtFIhCTMeGJ356ityCxFSELDdrwLok5PlBTLSM5kMAlpB01yRDFFRkJz4BSrlf23LxkJWSBp4Y24i4U4NCsRCVlciTZbay4vEQnxXKkZB5kUgfcSkRBHmrrOyasQFFhEJP4rHVN/oJJO6pNEJP440uOB/+Ul+HaUkBCDTXei/vLarx6MiMTfiFgxDPKZtnowIhI/NU82k4ku0PWxUZNkjbn6idt65yUh8Z3wmgiNQaIxCn9ejcRIHnodEj9Ar7F4DBINL4xJsiYyYpBoJE0YJAoZJAiJQlaPQiL+0oIhEX/9wpCQDat0PwxCIt0lmmBI6C5P8qSgkJDzXF2qpaCQ0Gpp6uYICglTOUhMI2FImEpQWmEdhmSi5wTSjtPgkDBF3CQUHJKKObyRgoJDwh7tSjgQCETCHS3Y7ZrYYI9EQr5S7oo9a45EQgP9Q23UoKBIqtBJtf1lOXeBIpmG8OnBU7NwowmLhD8ZFdbzaMFIQqayQZK0k8/QJEko2CQpKOAkCSjoJPEeDJ5kqiMvBeGTTNXMzdJtkUTe1doESdRFwG2QTNN50YltheTGMr/GtkNyXWN9KNPfGslV534MzczzaP2lCEhy09C77+YLodFinFvRkL8Kt0viz9f6XypMQjZm1v9UYRLfdRU60akg30wE94LKkpBCpeBgfVkSkqQJbjUWJSEb/Z3gx4qSkOKL5PpcSRJae5FcbypJQtN/yZWzgiT0Vr3obmY5EuZWvai9VzESplYhuOgwlSPhii6yHh8ZSIZ22XA5ENmUZCAZuuUyNlsGE7ZdUSe5F7gWmkCxm5XSpgXaJN+VupmmBYEtMWlfQmWS35Jj5wIsPd8bS3alfNIm+ad2yrFUAQ6F3jGqJKQIPPbPdeyqD2/pyXteqvZU48a5b52r69q5cW4zT3J1+UuKJDNl+SUJm2HcpUciADlpdLtTIykNokcy0wjqv4AUqf1mAdG0+HUosx2MUqTphRMP4twlDu0/0o2MqU06tToo3qSbrUSWsb+l2gJWOxdOaGar2v81x5dWZIPhYK68Vhm+fmOaJXeNam/hm7LsSMyXfm9HPZXn46ZceytDEzKYTK3Rc+4SnXvSsX4/XnK1q8++31UfnHNt2zbOHeoMa+pXpWu/ejISPBkJnowET0aCJyPBk5HgyUjwZCR4MhI8GQmejARPRoInI8GTkeDJSPBkJHgyEjwZCZ5eieTj8zX05y/Z/fRFIEbR7gAAAABJRU5ErkJggg=="/>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -0,0 +1,11 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3571_178)">
<path d="M9.36718 16C12.8752 16 15.719 13.0785 15.719 9.47471C15.719 5.87092 12.8752 2.94946 9.36718 2.94946C5.85918 2.94946 3.01538 5.87092 3.01538 9.47471C3.01538 13.0785 5.85918 16 9.36718 16Z" fill="#FF563F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.97746 10.1876C4.96849 12.1786 8.1966 12.1786 10.1876 10.1876C12.1786 8.1966 12.1786 4.96849 10.1876 2.97746C8.1966 0.986425 4.96849 0.986425 2.97746 2.97746C0.986425 4.96849 0.986425 8.1966 2.97746 10.1876ZM11.2371 11.2371C8.66645 13.8077 4.49863 13.8077 1.92798 11.2371C-0.64266 8.66645 -0.64266 4.49863 1.92798 1.92798C4.49863 -0.64266 8.66645 -0.64266 11.2371 1.92798C13.8077 4.49863 13.8077 8.66645 11.2371 11.2371Z" fill="#0C0C0C"/>
</g>
<defs>
<clipPath id="clip0_3571_178">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 951 B

View File

@ -0,0 +1,28 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.909 2H10.7272V4.39719H12.909V2Z" fill="black"/>
<path d="M14.0001 2H11.8182V4.39719H14.0001V2Z" fill="#F7D046"/>
<path d="M4.18182 2H2V4.39719H4.18182V2Z" fill="black"/>
<path d="M4.18182 4.39722H2V6.79441H4.18182V4.39722Z" fill="black"/>
<path d="M4.18182 6.79419H2V9.19138H4.18182V6.79419Z" fill="black"/>
<path d="M4.18182 9.19165H2V11.5888H4.18182V9.19165Z" fill="black"/>
<path d="M4.18182 11.5889H2V13.9861H4.18182V11.5889Z" fill="black"/>
<path d="M5.27276 2H3.09094V4.39719H5.27276V2Z" fill="#F7D046"/>
<path d="M14.0001 4.39722H11.8182V6.79441H14.0001V4.39722Z" fill="#F2A73B"/>
<path d="M5.27276 4.39722H3.09094V6.79441H5.27276V4.39722Z" fill="#F2A73B"/>
<path d="M10.7272 4.39722H8.54541V6.79441H10.7272V4.39722Z" fill="black"/>
<path d="M11.8182 4.39722H9.63635V6.79441H11.8182V4.39722Z" fill="#F2A73B"/>
<path d="M7.45465 4.39722H5.27283V6.79441H7.45465V4.39722Z" fill="#F2A73B"/>
<path d="M9.63641 6.79419H7.45459V9.19138H9.63641V6.79419Z" fill="#EE792F"/>
<path d="M11.8182 6.79419H9.63635V9.19138H11.8182V6.79419Z" fill="#EE792F"/>
<path d="M7.45465 6.79419H5.27283V9.19138H7.45465V6.79419Z" fill="#EE792F"/>
<path d="M8.54547 9.19165H6.36365V11.5888H8.54547V9.19165Z" fill="black"/>
<path d="M9.63641 9.19165H7.45459V11.5888H9.63641V9.19165Z" fill="#EB5829"/>
<path d="M14.0001 6.79419H11.8182V9.19138H14.0001V6.79419Z" fill="#EE792F"/>
<path d="M5.27276 6.79419H3.09094V9.19138H5.27276V6.79419Z" fill="#EE792F"/>
<path d="M12.909 9.19165H10.7272V11.5888H12.909V9.19165Z" fill="black"/>
<path d="M14.0001 9.19165H11.8182V11.5888H14.0001V9.19165Z" fill="#EB5829"/>
<path d="M12.909 11.5889H10.7272V13.9861H12.909V11.5889Z" fill="black"/>
<path d="M5.27276 9.19165H3.09094V11.5888H5.27276V9.19165Z" fill="#EB5829"/>
<path d="M14.0001 11.5889H11.8182V13.9861H14.0001V11.5889Z" fill="#EA3326"/>
<path d="M5.27276 11.5889H3.09094V13.9861H5.27276V11.5889Z" fill="#EA3326"/>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -0,0 +1,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3572_51)">
<path d="M5.966 6.15551V5.20179C6.06019 5.19591 6.15439 5.19002 6.24858 5.19002C8.86247 5.1076 10.5756 7.43891 10.5756 7.43891C10.5756 7.43891 8.72707 10.0057 6.7431 10.0057C6.47818 10.0057 6.21915 9.96449 5.97189 9.88207V6.9856C6.99036 7.10923 7.19641 7.55665 7.80279 8.57513L9.16272 7.43302C9.16272 7.43302 8.16779 6.13196 6.49584 6.13196C6.31923 6.12607 6.14261 6.13785 5.966 6.15551ZM5.966 3V4.42469L6.24858 4.40703C9.88095 4.2834 12.2535 7.38592 12.2535 7.38592C12.2535 7.38592 9.53361 10.6945 6.70189 10.6945C6.45463 10.6945 6.21326 10.671 5.97189 10.6297V11.5128C6.17205 11.5364 6.3781 11.554 6.57826 11.554C9.2157 11.554 11.1231 10.2059 12.9717 8.61634C13.2778 8.8636 14.5318 9.4582 14.7908 9.71723C13.0365 11.189 8.94489 12.3723 6.62536 12.3723C6.40165 12.3723 6.18971 12.3606 5.97777 12.337V13.5792H15.9977V3L5.966 3ZM5.966 9.88207V10.6356C3.52872 10.2 2.8517 7.66262 2.8517 7.66262C2.8517 7.66262 4.02324 6.36745 5.966 6.15551V6.97971H5.96011C4.94163 6.85608 4.14098 7.8098 4.14098 7.8098C4.14098 7.8098 4.59429 9.41699 5.966 9.88207ZM1.63895 7.55665C1.63895 7.55665 3.0813 5.4255 5.97189 5.20179V4.42469C2.76928 4.68372 0.00231934 7.39181 0.00231934 7.39181C0.00231934 7.39181 1.5683 11.9249 5.966 12.337V11.5128C2.73984 11.1125 1.63895 7.55665 1.63895 7.55665Z" fill="#76B900"/>
</g>
<defs>
<clipPath id="clip0_3572_51">
<rect width="16" height="10.5792" fill="white" transform="translate(0 3)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,14 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="16" height="16" rx="8" fill="white"/>
<mask id="mask0_3571_174" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="1" y="2" width="13" height="12">
<path d="M13.5 2H1.5V14H13.5V2Z" fill="white"/>
</mask>
<g mask="url(#mask0_3571_174)">
<path d="M1.57031 7.83424C1.92188 7.83424 3.28125 7.53084 3.98438 7.1324C4.6875 6.73396 4.6875 6.73396 6.14062 5.70271C7.9804 4.39708 9.28125 4.83424 11.4141 4.83424" fill="black"/>
<path d="M1.57031 7.83424C1.92188 7.83424 3.28125 7.53084 3.98438 7.1324C4.6875 6.73396 4.6875 6.73396 6.14062 5.70271C7.9804 4.39708 9.28125 4.83424 11.4141 4.83424" stroke="black" stroke-width="2.10937"/>
<path d="M13.4766 4.84758L9.87305 6.92808V2.76709L13.4766 4.84758Z" fill="black" stroke="black" stroke-width="0.0234375"/>
<path d="M1.5 7.83594C1.85156 7.83594 3.21094 8.13934 3.91406 8.53777C4.61719 8.93621 4.61719 8.93621 6.07031 9.96746C7.91009 11.2731 9.21094 10.8359 11.3438 10.8359" fill="black"/>
<path d="M1.5 7.83594C1.85156 7.83594 3.21094 8.13934 3.91406 8.53777C4.61719 8.93621 4.61719 8.93621 6.07031 9.96746C7.91009 11.2731 9.21094 10.8359 11.3438 10.8359" stroke="black" stroke-width="2.10937"/>
<path d="M13.4062 10.8229L9.80273 8.74243V12.9034L13.4062 10.8229Z" fill="black" stroke="black" stroke-width="0.0234375"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 146 KiB

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.09026 8.41933L3.72077 7.62985C1.24061 6.80348 0 6.3903 0 5.63033C0 4.87142 1.24061 4.45718 3.72077 3.63081L12.6938 0.639442C14.4393 0.0576106 15.3121 -0.233305 15.7727 0.227312C16.2333 0.687928 15.9424 1.56068 15.3616 3.30512L12.3692 12.2792C11.5428 14.7594 11.1296 16 10.3697 16C9.61076 16 9.19652 14.7594 8.37015 12.2792L7.57962 9.9108L12.1689 5.3215C12.3609 5.1227 12.4672 4.85645 12.4648 4.58008C12.4624 4.30372 12.3515 4.03935 12.1561 3.84392C11.9607 3.64849 11.6963 3.53764 11.4199 3.53524C11.1435 3.53284 10.8773 3.63908 10.6785 3.83108L6.09026 8.41933Z" fill="#4377E9"/>
</svg>

After

Width:  |  Height:  |  Size: 734 B

View File

@ -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<Props> = ({ 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<Props> = ({ 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 (
<Fragment>
<div className="mt-12 flex items-center gap-2 first:mt-0">
{engineLogo && (
{remoteEngineLogo && (
<Image
width={24}
height={24}
src={engineLogo}
src={remoteEngineLogo}
alt="Engine logo"
className="rounded-full"
/>

View File

@ -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<Props> = ({ 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<Props> = ({ engine, searchText }) => {
className="flex cursor-pointer items-center gap-2 pl-3"
onClick={onClickChevron}
>
{!isRemoteEngine && (
{!isRemoteEngine && localEngineLogo && (
<Image
className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
width={48}
height={48}
src={localEngineLogo as string}
src={localEngineLogo}
alt="logo"
/>
)}
{engineLogo && (
{remoteEngineLogo && (
<Image
className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
width={48}
height={48}
src={engineLogo}
src={remoteEngineLogo}
alt="logo"
/>
)}

View File

@ -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
}
}