From 10b4a9087af709d147b34f6c3ee63d2d3b75c77a Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 6 Aug 2024 13:18:10 +0700
Subject: [PATCH] chore: update hub search result (#3273)

---
 .../components/HubScreenFilter/index.tsx      | 55 +++++++++++++++----
 .../components/RemoteModelGroup.tsx           |  8 ++-
 2 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/web/screens/HubScreen2/components/HubScreenFilter/index.tsx b/web/screens/HubScreen2/components/HubScreenFilter/index.tsx
index 38b673c57..0148bb01e 100644
--- a/web/screens/HubScreen2/components/HubScreenFilter/index.tsx
+++ b/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,16 +57,44 @@ 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">
-          {filteredBuiltInModels.map((hfModelEntry) => (
-            <BuiltInModelCard key={hfModelEntry.id} {...hfModelEntry} />
-          ))}
-          {filteredHuggingFaceModels.map((hfModelEntry) => (
-            <HuggingFaceModelCard key={hfModelEntry.id} {...hfModelEntry} />
-          ))}
-          {filteredRemoteModels.map((hfModelEntry) => (
-            <RemoteModelCard key={hfModelEntry.id} {...hfModelEntry} />
-          ))}
+        <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}
+                  />
+                ))}
+              </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>
diff --git a/web/screens/HubScreen2/components/RemoteModelGroup.tsx b/web/screens/HubScreen2/components/RemoteModelGroup.tsx
index 2f8b8d9b7..ae470f09d 100644
--- a/web/screens/HubScreen2/components/RemoteModelGroup.tsx
+++ b/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>