chore: update hub search result (#3273)

web/screens/HubScreen2/components/HubScreenFilter/index.tsx

@@ -1,3 +1,7 @@
+import { Fragment } from 'react'
+
+import Image from 'next/image'
+
 import BlankState from '@/containers/BlankState'
 
 import useModelHub from '@/hooks/useModelHub'
@@ -43,6 +47,9 @@ const HubScreenFilter: React.FC<Props> = ({ queryText }) => {
     filteredHuggingFaceModels.length === 0 &&
     filteredRemoteModels.length === 0
 
+  const isOnDevice =
+    filteredBuiltInModels.length > 0 || filteredHuggingFaceModels.length > 0
+
   return (
     <div className="h-full w-full overflow-x-hidden rounded-lg bg-[hsla(var(--app-bg))]">
       {isResultEmpty ? (
@@ -50,17 +57,45 @@ const HubScreenFilter: React.FC<Props> = ({ queryText }) => {
           <BlankState title="No search results found" />
         </div>
       ) : (
-        <div className="mx-auto flex h-full w-full max-w-[650px] flex-col gap-6 py-6">
+        <div className="mx-auto mt-6 flex h-full w-full max-w-[650px] flex-col gap-6 py-6">
+          {isOnDevice && (
+            <Fragment>
+              <div className="mt-4 flex items-center gap-2 first:mt-0">
+                <Image
+                  width={24}
+                  height={24}
+                  src="icons/app_icon.svg"
+                  alt="Built-In Models"
+                />
+                <h1 className="text-lg font-semibold">On-Device Models</h1>
+              </div>
+              <div className="w-full">
                 {filteredBuiltInModels.map((hfModelEntry) => (
                   <BuiltInModelCard key={hfModelEntry.id} {...hfModelEntry} />
                 ))}
                 {filteredHuggingFaceModels.map((hfModelEntry) => (
-            <HuggingFaceModelCard key={hfModelEntry.id} {...hfModelEntry} />
+                  <HuggingFaceModelCard
+                    key={hfModelEntry.id}
+                    {...hfModelEntry}
+                  />
                 ))}
+              </div>
+            </Fragment>
+          )}
+
+          {filteredRemoteModels.length > 0 && (
+            <Fragment>
+              <div className="mt-4 flex items-center gap-2 first:mt-0">
+                <h1 className="text-lg font-semibold">Cloud Models</h1>
+              </div>
+              <div className="w-full">
                 {filteredRemoteModels.map((hfModelEntry) => (
                   <RemoteModelCard key={hfModelEntry.id} {...hfModelEntry} />
                 ))}
               </div>
+            </Fragment>
+          )}
+        </div>
       )}
     </div>
   )

web/screens/HubScreen2/components/RemoteModelGroup.tsx

@@ -62,7 +62,13 @@ const RemoteModelGroup: React.FC<Props> = ({ data, engine, onSeeAllClick }) => {
     <Fragment>
       <div className="mt-12 flex items-center gap-2 first:mt-0">
         {engineLogo && (
-          <Image width={24} height={24} src={engineLogo} alt="Engine logo" />
+          <Image
+            width={24}
+            height={24}
+            src={engineLogo}
+            alt="Engine logo"
+            className="rounded-full"
+          />
         )}
         <h1 className="text-lg font-semibold">{refinedTitle}</h1>