[PERF][BUGFIX] Improve models load (#468)

* avoid fetching models on each request

* avoid page errors when list datasets endpoint fails

* fix: read HF image format properly on export

* chore: increase duckDB number of threads

Author: frascuchon

src/features/add-column/form/execution-form.tsx

@@ -190,6 +190,12 @@ const DatasetSearch = component$(
       return await listHubDatasets(query);
     });
 
+    const noResultsFound = useComputed$(() => {
+      return (
+        searchQueryDebounced.value.length >= 3 && datasets.value.length === 0
+      );
+    });
+
     const handleChangeDataset$ = $((value: string | string[]) => {
       const selected = value as string;
       selectedDataset.value = selected ?? '';
@@ -277,6 +283,11 @@ const DatasetSearch = component$(
             ))}
           </Select.Popover>
         </Select.Root>
+        {noResultsFound.value && (
+          <div class="text-foreground text-sm mt-1">
+            No results found. Please, try another search query.
+          </div>
+        )}
       </div>
     );
   },

src/features/import/import-from-hub.tsx

@@ -1,4 +1,3 @@
+export * from './config';
 export * from './dataset';
 export * from './session';
-export * from './config';
-export * from './hub-models';

src/loaders/index.ts

@@ -20,8 +20,11 @@ import { MainSidebarButton } from '~/features/main-sidebar';
 import { Username } from '~/features/user/username';
 import { useSession } from '~/loaders';
 import { ActiveDatasetProvider, useDatasetsStore } from '~/state';
+import {
+  type TrendingModel,
+  useTrendingHubModels,
+} from '~/usecases/models-info.usecase';
 import { runAutoDataset } from '~/usecases/run-autodataset';
-import { useTrendingModelsContext } from './layout';
 
 const runAutoDatasetAction = server$(async function* (
   instruction: string,
@@ -40,17 +43,24 @@ const runAutoDatasetAction = server$(async function* (
 });
 
 export default component$(() => {
+  const fetchTrendingModels = useTrendingHubModels();
   const session = useSession();
   const nav = useNavigate();
   const searchOnWeb = useSignal(false);
   const prompt = useSignal('');
   const currentStep = useSignal('');
-  const trendingModels = useTrendingModelsContext();
+
+  const trendingModels = useSignal<TrendingModel[]>([]);
+
   const textAreaElement = useSignal<HTMLTextAreaElement>();
   const { clearActiveDataset } = useDatasetsStore();
 
-  useTask$(() => {
+  useTask$(async () => {
     clearActiveDataset();
+
+    if (trendingModels.value.length === 0) {
+      trendingModels.value = await fetchTrendingModels();
+    }
   });
 
   const creationFlow = useStore({
@@ -354,7 +364,7 @@ export default component$(() => {
                 <p class="text-sm text-center w-full lg:text-left lg:w-fit">
                   Trending for vibe testing:
                 </p>
-                {trendingModels.map((model) => (
+                {trendingModels.value?.map((model) => (
                   <div
                     key={model.id}
                     class="flex items-center p-1 gap-1 font-mono"

src/routes/home/index.tsx

@@ -8,13 +8,7 @@ import {
 
 import { ModalsProvider } from '~/components';
 import { MainSidebar } from '~/features/main-sidebar';
-import {
-  type ClientConfig,
-  type Model,
-  useClientConfig,
-  useHubModels,
-  useTrendingHubModels,
-} from '~/loaders';
+import { type ClientConfig, useClientConfig } from '~/loaders';
 import { ActiveDatasetProvider } from '~/state';
 
 export * from '~/loaders';
@@ -25,28 +19,10 @@ export const useConfigContext = () => {
   return useContext(configContext);
 };
 
-export const modelsContext = createContextId<Model[]>('models.context');
-
-export const useModelsContext = () => {
-  return useContext(modelsContext);
-};
-
-export const trendingModelsContext = createContextId<Model[]>(
-  'trending-models.context',
-);
-
-export const useTrendingModelsContext = () => {
-  return useContext(trendingModelsContext);
-};
-
 export default component$(() => {
   const config = useClientConfig();
-  const models = useHubModels();
-  const trendingModels = useTrendingHubModels();
 
   useContextProvider(configContext, config.value);
-  useContextProvider(modelsContext, models.value);
-  useContextProvider(trendingModelsContext, trendingModels.value);
 
   return (
     <ModalsProvider>

src/routes/home/layout.tsx

@@ -6,6 +6,7 @@ const {
 } = appConfig;
 
 const duckDB = await DuckDBInstance.create(duckDb);
+const duckDBThreads = 4;
 
 export const dbConnect = async () => {
   return await duckDB.connect();
@@ -39,7 +40,7 @@ await connectAndClose(async (db) => {
     LOAD gsheets;
     LOAD nanoarrow;
     
-    SET threads=2;
+    SET threads=${duckDBThreads};
     SET temp_directory = '${duckDB}_duckdb_swap';
     SET memory_limit='128GB';
     SET max_temp_directory_size = '256GB';

src/services/db/duckdb.ts

@@ -96,10 +96,11 @@ const readImageBuffer = (data: any): Uint8Array | undefined => {
     return new Uint8Array(imageData);
   } else if (
     imageData &&
+    // Hugging Face format
     typeof imageData === 'object' &&
-    'buffer' in imageData
+    'bytes' in imageData
   ) {
-    return new Uint8Array(imageData.buffer);
+    return new Uint8Array(imageData.bytes);
   } else {
     throw new Error(`Invalid image data format`);
   }

src/services/repository/tables/list-table-rows.ts

@@ -12,13 +12,18 @@ export const useListHubDatasets = () =>
     const session = useServerSession(this);
     const query = searchQuery.trim();
 
-    const datasets = await listDatasets({
-      query,
-      accessToken: session.token,
-      limit: 10,
-    });
+    try {
+      const datasets = await listDatasets({
+        query,
+        accessToken: session.token,
+        limit: 10,
+      });
 
-    return datasets.map((dataset) => dataset.name);
+      return datasets.map((dataset) => dataset.name);
+    } catch (error) {
+      console.error('Error listing datasets:', error);
+      return [];
+    }
   });
 
 export const useListDatasetDataFiles = () =>