made some changes to the hub.js client

src/app/main.tsx

@@ -17,11 +17,12 @@ export function Main() {
   return (
     <div className={cn(
       `flex flex-row h-screen w-screen inset-0 overflow-hidden`,
+      `dark`
     )}>
       <LeftMenu />
       <div className={cn(
         `flex flex-col`,
-        `w-[calc(100vh-56px)]`
+        `w-[calc(100vh-96px)]`
       )}>
         <TopMenu />
         {view === "home" && <HomeView />}

src/app/server/actions/api.ts

@@ -8,28 +8,17 @@ const adminUsername = `${process.env.ADMIN_HUGGING_FACE_USERNAME || ""}`
 
 const adminCredentials: Credentials = { accessToken: adminApiKey }
 
-export async function getChannels({
-  apiKey,
-  owner,
-}: { // the user wants to browse their own private or public channels
-  apiKey: string
-  owner: undefined
-} | { // the user wants to browse someone's else public channels
-  apiKey: undefined
-  owner: string
-} | { // the user wants to browse all public channels
-  apiKey: undefined
-  owner: undefined
-} = { // by default we perform a gloval search using admin credentials
-  apiKey: undefined,
-  owner: undefined
-}): Promise<ChannelInfo[]> {
+export async function getChannels(options: {
+  apiKey?: string
+  owner?: string
+} = {}): Promise<ChannelInfo[]> {
 
   let credentials: Credentials = adminCredentials
+  let owner = options?.owner
 
-  if (apiKey) {
+  if (options?.apiKey) {
     try {
-      credentials = { accessToken: apiKey }
+      credentials = { accessToken: options.apiKey }
       const { name: username } = await whoAmI({ credentials })
       if (!username) {
         throw new Error(`couldn't get the username`)
@@ -48,7 +37,7 @@ export async function getChannels({
 
   let search = owner
     ? { owner } // search channels of a specific user
-    : { search: prefix } // global search (note: might be costly?)
+    : prefix // global search (note: might be costly?)
 
   console.log("search:", search)
 
@@ -62,7 +51,7 @@ export async function getChannels({
       ? chunks
       : [name, name]
 
-    console.log(`found a candidate dataset "${datasetName}" owned by @${datasetUsername}`)
+    // console.log(`found a candidate dataset "${datasetName}" owned by @${datasetUsername}`)
 
     if (!datasetName.startsWith(prefix)) {
       continue
@@ -70,7 +59,7 @@ export async function getChannels({
 
     const slug = datasetName.replaceAll(prefix, "")
     
-    console.log(`the dataset is a valid channel: "${slug}"`)
+    console.log(`found an AI Tube channel: "${slug}"`)
 
     // TODO parse the README to get the proper label
     const label = slug.replaceAll("-", " ")

src/app/state/defaultSettings.ts

@@ -0,0 +1,5 @@
+import { Settings } from "@/types"
+
+export const defaultSettings: Settings = {
+  huggingfaceApiKey: "",
+}

src/app/state/locaStorageKeys.ts

@@ -0,0 +1,6 @@
+import { Settings } from "@/types"
+
+export const localStorageKeys: Record<keyof Settings, string> = {
+  // important: prefix with AI_TUBE to avoid collisions when running the app on localhost
+  huggingfaceApiKey: "AI_TUBE_CONF_AUTH_HF_API_TOKEN",
+}

src/app/views/channel-admin-view/index.tsx

@@ -33,10 +33,11 @@ export function ChannelAdminView() {
         channelId: "",
         channel: {
           id: "",
+          slug: "",
           label: "Hugging Face",
-          thumbnailUrl: "",
-          systemPrompt: "",
-          hfDatasetId: ""
+          thumbnail: "",
+          prompt: "",
+          likes: 0,
         }
       }
     ]

src/app/views/channel-public-view/index.tsx

@@ -33,10 +33,11 @@ export function ChannelPublicView() {
         channelId: "",
         channel: {
           id: "",
+          slug: "",
           label: "Hugging Face",
-          thumbnailUrl: "",
-          systemPrompt: "",
-          hfDatasetId: ""
+          thumbnail: "",
+          prompt: "",
+          likes: 0,
         }
       }
     ]

src/app/views/channels-admin-view/index.tsx

@@ -1,37 +1,68 @@
-import { useEffect, useTransition } from "react"
+"use client"
+
+import { useEffect, useState, useTransition } from "react"
+import { useLocalStorage } from "usehooks-ts"
 
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 import { getChannels } from "@/app/server/actions/api"
 import { ChannelList } from "@/app/interface/channel-list"
+import { Input } from "@/components/ui/input"
+import { localStorageKeys } from "@/app/state/locaStorageKeys"
+import { defaultSettings } from "@/app/state/defaultSettings"
 
 export function ChannelsAdminView() {
   const [_isPending, startTransition] = useTransition()
+  const [huggingfaceApiKey, setHuggingfaceApiKey] = useLocalStorage<string>(
+    localStorageKeys.huggingfaceApiKey,
+    defaultSettings.huggingfaceApiKey
+  )
 
   const currentChannels = useStore(s => s.currentChannels)
   const setCurrentChannels = useStore(s => s.setCurrentChannels)
-  const currentCategory = useStore(s => s.currentCategory)
+  const [isLoaded, setLoaded] = useState(false)
 
   useEffect(() => {
-    
-    startTransition(async () => {
-      console.log("querying the HF API..")
-      const channels = await getChannels()
-
-      console.log("channels:", channels)
-
-      setCurrentChannels(channels)
-    })
-
-  }, [currentCategory])
+    if (!isLoaded) {
+      startTransition(async () => {
+        try {
+          const channels = await getChannels({ apiKey: huggingfaceApiKey })
+          setCurrentChannels(channels)
+        } catch (err) {
+          console.error("failed to load the channel for the current user:", err)
+          setCurrentChannels([])
+        } finally {
+          setLoaded(true)
+        }
+      })
+    }
+  }, [isLoaded])
 
   return (
     <div className={cn(
-      `flex flex-col`
+      `flex flex-col space-y-4`
     )}>
-      <ChannelList
-        channels={currentChannels}
-      />
+      <div className="flex flex-col space-y-2">
+        <div className="flex flex-row space-x-2 items-center">
+          <label className="flex w-64">Hugging Face token:</label>
+          <Input
+            placeholder="Hugging Face token (with WRITE access)"
+            type="password"
+            className="font-mono"
+            onChange={(x) => {
+              setHuggingfaceApiKey(x.target.value)
+            }}
+            value={huggingfaceApiKey}
+          />
+        </div>
+        <p className="text-neutral-100/70">
+          Note: your Hugging Face token must be a <span className="font-bold font-mono text-yellow-300">WRITE</span> access token.
+        </p>
+      </div>
+      {huggingfaceApiKey ? 
+        <ChannelList
+          channels={currentChannels}
+        /> : null}
     </div>
   )
 }

src/app/views/channels-public-view/index.tsx

@@ -1,54 +1,39 @@
-import { useEffect } from "react"
+import { useEffect, useState, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
-import { FullVideoInfo } from "@/types"
-import { VideoList } from "@/app/interface/video-list"
+import { getChannels } from "@/app/server/actions/api"
+import { ChannelList } from "@/app/interface/channel-list"
 
 export function ChannelsPublicView() {
-  const displayMode = useStore(s => s.displayMode)
-  const setDisplayMode = useStore(s => s.setDisplayMode)
-  const currentChannel = useStore(s => s.currentChannel)
-  const setCurrentChannel = useStore(s => s.setCurrentChannel)
-  const currentCategory = useStore(s => s.currentCategory)
-  const setCurrentCategory = useStore(s => s.setCurrentCategory)
-  const currentVideos = useStore(s => s.currentVideos)
-  const setCurrentVideos = useStore(s => s.setCurrentVideos)
-  const currentVideo = useStore(s => s.currentVideo)
-  const setCurrentVideo = useStore(s => s.setCurrentVideo)
+  const [_isPending, startTransition] = useTransition()
 
-  useEffect(() => {
+  const currentChannels = useStore(s => s.currentChannels)
+  const setCurrentChannels = useStore(s => s.setCurrentChannels)
+  const [isLoaded, setLoaded] = useState(false)
 
-    // we use fake data for now
-    // this will be pulled from the Hugging Face API
-    const newVideos: FullVideoInfo[] = [
-      {
-        id: "42",
-        label: "Test Julian",
-        thumbnailUrl: "",
-        assetUrl: "",
-        numberOfViews: 0,
-        createdAt: "2023-11-27",
-        categories: [],
-        channelId: "",
-        channel: {
-          id: "",
-          label: "Hugging Face",
-          thumbnailUrl: "",
-          systemPrompt: "",
-          hfDatasetId: ""
+  useEffect(() => {
+    if (!isLoaded) {
+      startTransition(async () => {
+        try {
+          const channels = await getChannels()
+          setCurrentChannels(channels)
+        } catch (err) {
+          console.error("failed to load the public channels", err)
+          setCurrentChannels([])
+        } finally {
+          setLoaded(true)
         }
-      }
-    ]
-    setCurrentVideos(newVideos)
-  }, [currentCategory])
+      })
+    }
+  }, [isLoaded])
 
   return (
     <div className={cn(
       `flex flex-col`
     )}>
-      <VideoList
-        videos={currentVideos}
+      <ChannelList
+        channels={currentChannels}
       />
     </div>
   )

src/app/views/home-view/index.tsx

@@ -32,10 +32,11 @@ export function HomeView() {
         channelId: "",
         channel: {
           id: "",
+          slug: "",
           label: "Hugging Face",
-          thumbnailUrl: "",
-          systemPrompt: "",
-          hfDatasetId: ""
+          thumbnail: "",
+          prompt: "",
+          likes: 0,
         }
       }
     ]

src/huggingface/hub/src/lib/list-datasets.ts

@@ -20,7 +20,7 @@ export interface DatasetEntry {
 export async function* listDatasets(params?: {
 	search?: {
 		owner?: string;
-	};
+	} | string;
 	credentials?: Credentials;
 	hubUrl?: string;
 	/**
@@ -32,7 +32,10 @@ export async function* listDatasets(params?: {
 	const search = new URLSearchParams([
 		...Object.entries({
 			limit: "500",
-			...(params?.search?.owner ? { author: params.search.owner } : undefined),
+			...(
+				typeof params?.search === "string" ? { search: params?.search }
+				: params?.search?.owner ? { author: params.search.owner }
+				: undefined),
 		}),
 		...EXPAND_KEYS.map((val) => ["expand", val] satisfies [string, string]),
 	]).toString();

src/types.ts

@@ -219,4 +219,8 @@ export type InterfaceView =
   | "channels_public"
   | "channel_admin" // for a user to admin their channels
   | "channel_public" // public view of a channel
-  | "video_public" // public view of a video
+  | "video_public" // public view of a video
+
+  export type Settings = {
+    huggingfaceApiKey: string
+  }