work in progress, starting to take shape

.env

@@ -2,6 +2,11 @@
 ADMIN_HUGGING_FACE_API_TOKEN=""
 ADMIN_HUGGING_FACE_USERNAME=""
 
+AI_TUBE_ROBOT_API="https://jbilcke-hf-ai-tube-robot.hf.space"
+
+VIDEOCHAIN_API_URL=""
+VIDEOCHAIN_API_TOKEN=""
+
 # ----------- CENSORSHIP -------
 ENABLE_CENSORSHIP=
 FINGERPRINT_KEY=

declarations.d.ts

@@ -0,0 +1 @@
+declare module 'markdown-yaml-metadata-parser';

package-lock.json

@@ -40,10 +40,10 @@
         "eslint-config-next": "13.4.10",
         "hash-wasm": "^4.11.0",
         "lucide-react": "^0.260.0",
+        "markdown-yaml-metadata-parser": "^3.0.0",
         "next": "^14.0.3",
         "pick": "^0.0.1",
         "postcss": "8.4.26",
-        "pythonia": "^1.0.4",
         "qs": "^6.11.2",
         "react": "18.2.0",
         "react-circular-progressbar": "^2.1.0",
@@ -64,7 +64,7 @@
         "type-fest": "^4.8.2",
         "typescript": "5.1.6",
         "usehooks-ts": "^2.9.1",
-        "uuid": "^9.0.0",
+        "uuid": "^9.0.1",
         "zustand": "^4.4.1"
       },
       "devDependencies": {
@@ -95,9 +95,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.4.tgz",
-      "integrity": "sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
+      "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -2361,11 +2361,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/caller": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/caller/-/caller-1.1.0.tgz",
-      "integrity": "sha512-n+21IZC3j06YpCWaxmUy5AnVqhmCIM2bQtqQyy00HJlmStRt6kwDX5F9Z97pqwAB+G/tgSz6q/kUBbNyQzIubw=="
-    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -3011,6 +3006,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/detect-newline": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
+      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@@ -3108,9 +3111,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.595",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.595.tgz",
-      "integrity": "sha512-+ozvXuamBhDOKvMNUQvecxfbyICmIAwS4GpLmR0bsiSBlGnLaOcs2Cj7J8XSbW+YEaN3Xl3ffgpm+srTUWFwFQ=="
+      "version": "1.4.596",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.596.tgz",
+      "integrity": "sha512-zW3zbZ40Icb2BCWjm47nxwcFGYlIgdXkAx85XDO7cyky9J4QQfq8t0W19/TLZqq3JPQXtlv8BPIGmfa9Jb4scg=="
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -3624,6 +3627,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
@@ -4717,6 +4732,38 @@
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
     },
+    "node_modules/markdown-yaml-metadata-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-yaml-metadata-parser/-/markdown-yaml-metadata-parser-3.0.0.tgz",
+      "integrity": "sha512-gRxEfuGIpb9pS1nQyASx3+l99e1hyTaK/+zDuvGcZJvr+OlksZ5O+q7opPcQP25j/z7NoOYEp17Lxgq5Sn4vDg==",
+      "dependencies": {
+        "detect-newline": "^3.1.0",
+        "js-yaml": "^3.14.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/markdown-yaml-metadata-parser/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/markdown-yaml-metadata-parser/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -5409,18 +5456,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/pythonia": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/pythonia/-/pythonia-1.0.4.tgz",
-      "integrity": "sha512-YciqyN0ii93gmJ1S9GmB873tZPtk6TeF/35DWLHrTn+PxnHCPtaXyvjPucK8gLNgt7XSqawmNxdp6JNFjWQL4g==",
-      "dependencies": {
-        "caller": "^1.0.1",
-        "chalk": "^4.1.2"
-      },
-      "peerDependencies": {
-        "ws": "^7.5.1"
-      }
-    },
     "node_modules/qs": {
       "version": "6.11.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
@@ -6027,6 +6062,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -6849,27 +6889,6 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
-    "node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "peer": true,
-      "engines": {
-        "node": ">=8.3.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",

package.json

@@ -41,10 +41,10 @@
     "eslint-config-next": "13.4.10",
     "hash-wasm": "^4.11.0",
     "lucide-react": "^0.260.0",
+    "markdown-yaml-metadata-parser": "^3.0.0",
     "next": "^14.0.3",
     "pick": "^0.0.1",
     "postcss": "8.4.26",
-    "pythonia": "^1.0.4",
     "qs": "^6.11.2",
     "react": "18.2.0",
     "react-circular-progressbar": "^2.1.0",
@@ -65,7 +65,7 @@
     "type-fest": "^4.8.2",
     "typescript": "5.1.6",
     "usehooks-ts": "^2.9.1",
-    "uuid": "^9.0.0",
+    "uuid": "^9.0.1",
     "zustand": "^4.4.1"
   },
   "devDependencies": {

src/app/interface/channel-card/index.tsx

@@ -3,9 +3,11 @@ import { ChannelInfo } from "@/types"
 
 export function ChannelCard({
   channel,
+  onClick,
   className = "",
 }: {
   channel: ChannelInfo
+  onClick?: (channel: ChannelInfo) => void
   className?: string
  }) {
 
@@ -13,10 +15,19 @@ export function ChannelCard({
   <div
     className={cn(
       `flex flex-col`,
-      `w-[300px] h-[400px]`,
-      `bg-line-900`,
+      `items-center justify-center`,
+      `w-[300px] h-[200px]`,
+      `rounded-lg`,
+      `bg-neutral-800 hover:bg-neutral-500/80`,
+      `cursor-pointer`,
       className,
-    )}>
+    )}
+    onClick={() => {
+      if (onClick) {
+        onClick(channel)
+      }
+    }}
+    >
       <div
         className={cn(
           `rounded-lg overflow-hidden`
@@ -24,10 +35,12 @@ export function ChannelCard({
       >
         <img src="" />
       </div>
-      <div className={cn(
 
+      <div className={cn(
+        `text-center`
       )}>
         <h3>{channel.label}</h3>
+        <p>{channel.likes} likes</p>
       </div>
     </div>
   )

src/app/interface/channel-list/index.tsx

@@ -5,11 +5,14 @@ import { ChannelCard } from "../channel-card"
 
 export function ChannelList({
   channels,
+  onSelect,
   layout = "flex",
   className = "",
 }: {
   channels: ChannelInfo[]
 
+  onSelect?: (channel: ChannelInfo) => void
+
   /**
    * Layout mode
    * 
@@ -35,6 +38,7 @@ export function ChannelList({
       <ChannelCard
         key={channel.id}
         channel={channel}
+        onClick={onSelect}
         className=""
       />
     ))}

src/app/interface/left-menu/index.tsx

@@ -1,6 +1,8 @@
 import { GrChannel } from "react-icons/gr"
 import { MdVideoLibrary } from "react-icons/md"
 import { RiHome8Line } from "react-icons/ri"
+import { PiRobot } from "react-icons/pi"
+import { CgProfile } from "react-icons/cg"
 
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
@@ -11,35 +13,54 @@ export function LeftMenu() {
   const setView = useStore(s => s.setView)
   return (
     <div className={cn(
-      `flex flex-col items-center`,
-      `justify-items-stretch`,
+      `flex flex-col`,
       `w-24 px-1 pt-4`,
      // `bg-orange-500`,
     )}>
-      <MenuItem
-        icon={<RiHome8Line className="h-6 w-6" />}
-        selected={view === "home"}
-        onClick={() => setView("home")}
-        >
-        Home
-      </MenuItem>
-      <MenuItem
-        icon={<GrChannel className="h-5 w-5" />}
-        selected={view === "channels_public"}
-        onClick={() => setView("channels_public")}
-        >
-        Channels
-      </MenuItem>
-      <MenuItem
-        icon={<MdVideoLibrary className="h-6 w-6" />}
-        selected={
-          view === "channels_admin" ||
-          view === "channel_admin"
-        }
-        onClick={() => setView("channels_admin")}
-        >
-        My Content
-      </MenuItem>
+      <div className={cn(
+        `flex flex-col w-full`,
+      )}>
+        <MenuItem
+          icon={<RiHome8Line className="h-6 w-6" />}
+          selected={view === "home"}
+          onClick={() => setView("home")}
+          >
+          Discover
+        </MenuItem>
+        <MenuItem
+          icon={<GrChannel className="h-5 w-5" />}
+          selected={view === "public_channels"}
+          onClick={() => setView("public_channels")}
+          >
+          Channels
+        </MenuItem>
+      </div>
+      <div className={cn(
+        `flex flex-col w-full`,
+      )}>
+        {/*<MenuItem
+          icon={<MdVideoLibrary className="h-6 w-6" />}
+          selected={view === "user_videos"}
+          onClick={() => setView("user_videos")}
+          >
+          My Videos
+        </MenuItem>
+      */}
+        <MenuItem
+          icon={<PiRobot className="h-6 w-6" />}
+          selected={view === "user_channels"}
+          onClick={() => setView("user_channels")}
+          >
+          My Robots
+        </MenuItem>
+        <MenuItem
+          icon={<CgProfile className="h-6 w-6" />}
+          selected={view === "user_account"}
+          onClick={() => setView("user_account")}
+          >
+          Account
+        </MenuItem>
+      </div>
     </div>
     )
 }

src/app/interface/top-menu/index.tsx

@@ -1,4 +1,4 @@
-import { VideoCategory, videoCategoriesWithLabels } from "@/app/state/categories"
+import { videoCategoriesWithLabels } from "@/app/state/categories"
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 
@@ -7,8 +7,8 @@ export function TopMenu() {
   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 currentTag = useStore(s => s.currentTag)
+  const setCurrentTag = useStore(s => s.setCurrentTag)
   const currentVideos = useStore(s => s.currentVideos)
   const currentVideo = useStore(s => s.currentVideo)
   const setCurrentVideo = useStore(s => s.setCurrentVideo)
@@ -17,26 +17,26 @@ export function TopMenu() {
     <div className={cn(
       `flex flex-col`,
       `overflow-hidden`,
-      `w-full h-28`,
+      `w-full h-28 pt-4`,
     )}>
       <div className={cn(
         `flex flex-row justify-between`,
         `w-full`
       )}>
         <div className={cn(
-          `flex flex-col items-center justify-center`,
-          `px-4 py-2 w-32`,
+          `flex flex-col items-start justify-center`,
+          `py-2 w-64`,
         )}>
-          <div className="flex flex-row items-center">
-            <span className="text-3xl mr-1">🍿 </span>
-            <span className="text-xl font-semibold">HugTube</span>
+          <div className="flex flex-row items-center justify-start">
+            <span className="text-4xl mr-1">🍿 </span>
+            <span className="text-4xl font-semibold">AI Tube</span>
           </div>
         </div>
         <div className={cn(
            `flex flex-col items-center justify-center`,
            `px-4 py-2 w-max-64`,
         )}>
-          Search bar goes here
+          [ Search bar goes here ]
         </div>
         <div className={cn()}>
           &nbsp; {/* unused for now */}
@@ -55,13 +55,13 @@ export function TopMenu() {
               `rounded-lg px-3 py-1 h-8`,
               `cursor-pointer`,
               `transition-all duration-300 ease-in-out`,
-              currentCategory === key
+              currentTag === key
                 ? `bg-neutral-100 text-neutral-800`
                 : `bg-neutral-800 text-neutral-50/90 hover:bg-neutral-700 hover:text-neutral-50/90`,
               // `text-clip`
             )}
             onClick={() => {
-              setCurrentCategory(key as VideoCategory)
+              setCurrentTag(key)
             }}
           >
             <span className={cn(

src/app/interface/video-card/index.tsx

@@ -1,11 +1,11 @@
 import { cn } from "@/lib/utils"
-import { FullVideoInfo } from "@/types"
+import { VideoInfo } from "@/types"
 
 export function VideoCard({
   video,
   className = "",
 }: {
-  video: FullVideoInfo
+  video: VideoInfo
   className?: string
  }) {
 

src/app/interface/video-list/index.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils"
-import { FullVideoInfo } from "@/types"
+import { VideoInfo } from "@/types"
 
 import { VideoCard } from "../video-card"
 
@@ -8,7 +8,7 @@ export function VideoList({
   layout = "flex",
   className = "",
 }: {
-  videos: FullVideoInfo[]
+  videos: VideoInfo[]
 
   /**
    * Layout mode

src/app/main.tsx

@@ -5,11 +5,12 @@ import { TopMenu } from "./interface/top-menu"
 import { LeftMenu } from "./interface/left-menu"
 import { useStore } from "./state/useStore"
 import { HomeView } from "./views/home-view"
-import { ChannelsPublicView } from "./views/channels-public-view"
-import { ChannelsAdminView } from "./views/channels-admin-view"
-import { ChannelPublicView } from "./views/channel-public-view"
-import { ChannelAdminView } from "./views/channel-admin-view"
-import { VideoPublicView } from "./views/video-public-view"
+import { PublicChannelsView } from "./views/public-channels-view"
+import { UserChannelsView } from "./views/user-channels-view"
+import { PublicChannelView } from "./views/public-channel-view"
+import { UserChannelView } from "./views/user-channel-view"
+import { PublicVideoView } from "./views/public-video-view"
+import { UserAccountView } from "./views/user-account-view"
 
 export function Main() {
   const view = useStore(s => s.view)
@@ -22,15 +23,21 @@ export function Main() {
       <LeftMenu />
       <div className={cn(
         `flex flex-col`,
-        `w-[calc(100vh-96px)]`
+        `w-[calc(100vh-96px)]`,
+        `px-2`
       )}>
         <TopMenu />
-        {view === "home" && <HomeView />}
-        {view === "channels_admin" && <ChannelsAdminView />}
-        {view === "channels_public" && <ChannelsPublicView />}
-        {view === "channel_public" && <ChannelPublicView />}
-        {view === "channel_admin" && <ChannelAdminView />}
-        {view === "video_public" && <VideoPublicView />}
+        <div className="pt-4">
+          {view === "home" && <HomeView />}
+          {view === "public_video" && <PublicVideoView />}
+          {view === "public_channels" && <PublicChannelsView />}
+          {view === "public_channel" && <PublicChannelView />}
+          {view === "user_channels" && <UserChannelsView />}
+          {/*view === "user_videos" && <UserVideosView />*/}
+          {view === "user_channel" && <UserChannelView />}
+          {view === "user_account" && <UserAccountView />}
+
+        </div>
       </div>
     </div>
   )

src/app/server/actions/ai-tube-hf/README.md

@@ -0,0 +1,3 @@
+# server/actions/ai-tube-hf
+
+Utility functions to manipulate channels hosted as Hugging Face Datasets

src/app/server/actions/{api.ts → ai-tube-hf/getChannels.ts}

@@ -1,12 +1,10 @@
 "use server"
 
-import { Credentials, listDatasets, whoAmI } from "@/huggingface/hub/src"
+import { Credentials, downloadFile, listDatasets, whoAmI } from "@/huggingface/hub/src"
+import { parseDatasetReadme } from "@/app/server/actions/utils/parseDatasetReadme"
 import { ChannelInfo } from "@/types"
 
-const adminApiKey = `${process.env.ADMIN_HUGGING_FACE_API_TOKEN || ""}`
-const adminUsername = `${process.env.ADMIN_HUGGING_FACE_USERNAME || ""}`
-
-const adminCredentials: Credentials = { accessToken: adminApiKey }
+import { adminCredentials } from "../config"
 
 export async function getChannels(options: {
   apiKey?: string
@@ -39,46 +37,85 @@ export async function getChannels(options: {
     ? { owner } // search channels of a specific user
     : prefix // global search (note: might be costly?)
 
-  console.log("search:", search)
+  // console.log("search:", search)
 
   for await (const { id, name, likes, updatedAt } of listDatasets({
     search,
     credentials
   })) {
 
+    // TODO: need to handle better cases where the username is missing
+
     const chunks = name.split("/")
-    const [datasetUsername, datasetName] = chunks.length === 2
+    const [datasetUser, datasetName] = chunks.length === 2
       ? chunks
       : [name, name]
 
-    // console.log(`found a candidate dataset "${datasetName}" owned by @${datasetUsername}`)
+    // console.log(`found a candidate dataset "${datasetName}" owned by @${datasetUser}`)
 
     if (!datasetName.startsWith(prefix)) {
       continue
     }
 
+    // ignore the video index
+    if (datasetName === "ai-tube-index") {
+      continue
+    }
+
     const slug = datasetName.replaceAll(prefix, "")
     
-    console.log(`found an AI Tube channel: "${slug}"`)
+    // console.log(`found an AI Tube channel: "${slug}"`)
 
     // TODO parse the README to get the proper label
-    const label = slug.replaceAll("-", " ")
-
+    let label = slug.replaceAll("-", " ")
 
-    // TODO parse the README to get this
-    // we could also use the user's avatar by default
     const thumbnail = ""
+    let prompt = ""
+    let description = ""
+    let tags: string[] = []
 
-    const prompt = "" // TODO parse the README to get this
+    // console.log(`going to read datasets/${name}`)
+    try {
+      const response = await downloadFile({
+        repo: `datasets/${name}`,
+        path: "README.md",
+        credentials
+      })
+      const readme = await response?.text()
+
+      const ParsedDatasetReadme = parseDatasetReadme(readme)
+      
+      // console.log("ParsedDatasetReadme: ", ParsedDatasetReadme)
+
+  
+      prompt = ParsedDatasetReadme.prompt
+      label = ParsedDatasetReadme.pretty_name
+      description = ParsedDatasetReadme.description
+
+      const prefix = "ai-tube:"
+
+      tags = ParsedDatasetReadme.tags
+        .filter(tag => tag.startsWith(prefix)) // remove any tag not belonging to us
+        .map(tag => tag.replaceAll(prefix, "").trim()) // remove the prefix
+        .filter(tag => tag) // remove empty tags
+      
+      
+    } catch (err) {
+      console.log("failed to read the readme:", err)
+    }
 
     const channel: ChannelInfo = {
       id,
+      datasetUser,
+      datasetName,
       slug,
-      label, 
+      label,
+      description,
       thumbnail,
       prompt,
       likes,
-      // updatedAt
+      tags,
+      updatedAt: updatedAt.toISOString()
     }
 
     channels.push(channel)

src/app/server/actions/ai-tube-hf/getIndex.ts

@@ -0,0 +1,48 @@
+import { downloadFile } from "@/huggingface/hub/src"
+import { VideoInfo, VideoStatus } from "@/types"
+
+import { adminCredentials, adminUsername } from "../config"
+
+export async function getIndex({
+  status,
+  renewCache,
+}: {
+  status: VideoStatus
+
+  /**
+   * Renew the cache
+   * 
+   * This is was the batch job daemon will use, as in normal time
+   * we will want to use the cache since the file might be large
+   * 
+   * it is also possible that we decide to *never* renew the cache from a user's perspective,
+   * and only renew it manually when a video changes status
+   * 
+   * that way user requests will always be snappy!
+   */
+  renewCache?: boolean
+}): Promise<Record<string, VideoInfo>> {
+
+  // grab the current video index
+  const response = await downloadFile({
+    credentials: adminCredentials,
+    repo: `datasets/${adminUsername}/ai-tube-index`,
+    path: `${status}.json`,
+    
+  })
+
+  // attention, this list might grow, especially the "published" one
+  // published videos should be put in a big dataset folder of files
+  // named "<id>.json" and "<id>.mp4" like in VideoChain
+  const jsonResponse = await response?.json()
+  if (
+    typeof jsonResponse === "undefined" &&
+    typeof jsonResponse !== "object" &&
+     Array.isArray(jsonResponse) ||
+    jsonResponse === null) {
+    throw new Error("index is not an object, admin repair needed")
+  }
+  const videos = jsonResponse as Record<string, VideoInfo>
+
+  return videos
+}

src/app/server/actions/ai-tube-hf/getVideoRequestsFromChannel.ts

@@ -0,0 +1,112 @@
+"use server"
+
+import { Credentials, downloadFile, listFiles, whoAmI } from "@/huggingface/hub/src"
+import { parseDatasetReadme } from "@/app/server/actions/utils/parseDatasetReadme"
+import { ChannelInfo, VideoRequest } from "@/types"
+
+import { adminCredentials } from "../config"
+
+/**
+ * Return all the videos requests created by a user on their channel
+ * 
+ * @param options 
+ * @returns 
+ */
+export async function getVideoRequestsFromChannel(options: {
+  channel: ChannelInfo,
+  apiKey?: string,
+  renewCache?: boolean
+}): Promise<Record<string, VideoRequest>> {
+
+  let credentials: Credentials = adminCredentials
+
+  if (options?.apiKey) {
+    try {
+      credentials = { accessToken: options.apiKey }
+      const { name: username } = await whoAmI({ credentials })
+      if (!username) {
+        throw new Error(`couldn't get the username`)
+      }
+    } catch (err) {
+      console.error(err)
+      return {}
+    }
+  }
+
+  let videos: Record<string, VideoRequest> = {}
+
+  const repo = `datasets/${options.channel.datasetUser}/${options.channel.datasetName}`
+
+  console.log(`scanning ${repo}`)
+
+  for await (const file of listFiles({
+    repo,
+    // recursive: true,
+    // expand: true,
+    credentials,
+    requestInit: {
+      // cache invalidation should be called right after adding a new video
+      cache: options?.renewCache ? "no-cache" : "default",
+      next: {
+        revalidate: 10, // otherwise we only update very 10 seconds by default
+        // tags: [] // tags used for cache invalidation (ie. this is added to the cache key)
+      }
+    }
+  })) {
+
+    // TODO we should add some safety mechanisms here:
+    // skip lists of files that are too long
+    // skip files that are too big
+    // skip files with file.security.safe !== true
+
+     console.log("file.path:", file.path)
+    /// { type, oid, size, path }
+    if (file.path === "README.md") {
+      console.log("found the README")
+      // TODO: read this readme
+    } else if (file.path.startsWith("prompt_") && file.path.endsWith(".txt")) {
+      console.log("yes!!")
+      const fileWithoutSuffix = file.path.split(".txt").shift() || ""
+      const words = fileWithoutSuffix.split("_")
+      console.log("debug:", { path: file.path, fileWithoutSuffix, words })
+      if (words.length !== 3) {
+        console.log("found an invalid prompt file format: " + file.path)
+        continue
+      }
+      const [_prefix, date, id] = words
+      console.log("found a prompt:", file.path)
+
+      try {
+        const response = await downloadFile({
+          repo,
+          path: file.path,
+          credentials
+        })
+        const rawMarkdown = await response?.text()
+  
+        const parsedDatasetReadme = parseDatasetReadme(rawMarkdown)
+        console.log("prompt parsed markdown:", parsedDatasetReadme)
+      } catch (err) {
+        console.log("failed to parse the prompt file")
+        continue
+      }
+      const video: VideoRequest = {
+        id,
+        label: "",
+        description: "",
+        prompt: "",
+        thumbnailUrl: "",
+
+        updatedAt: file.lastCommit?.date || "",
+        tags: [], // read them from the file?
+        channel: options.channel
+      }
+
+      videos[id] = video
+    } else if (file.path.endsWith(".mp4")) {
+      console.log("found a video:", file.path)
+    }
+  }
+
+  return videos
+}

src/app/server/actions/ai-tube-hf/uploadVideoRequestToDataset.ts

@@ -0,0 +1,114 @@
+"use server"
+
+import { Blob } from "buffer"
+import { v4 as uuidv4 } from "uuid"
+
+import { Credentials, uploadFile, whoAmI } from "@/huggingface/hub/src"
+import { ChannelInfo, VideoInfo, VideoRequest } from "@/types"
+
+/**
+ * Save the video request to the user's own dataset
+ * 
+ * @param param0
+ * @returns 
+ */
+export async function uploadVideoRequestToDataset({
+  channel,
+  apiKey,
+  title,
+  description,
+  prompt,
+  tags,
+}: {
+  channel: ChannelInfo
+  apiKey: string
+  title: string
+  description: string
+  prompt: string
+  tags: string[]
+}): Promise<{
+  videoRequest: VideoRequest
+  videoInfo: VideoInfo
+}> {
+  if (!apiKey) {
+    throw new Error(`the apiKey is required`)
+  }
+
+  let credentials: Credentials = { accessToken: apiKey }
+
+  const { name: username } = await whoAmI({ credentials })
+  if (!username) {
+    throw new Error(`couldn't get the username`)
+  }
+
+  const date = new Date()
+  const dateSlug = date.toISOString().replace(/[^0-9]/gi, '').slice(0, 12);
+
+  // there is a bug in the [^] maybe, because all characters are removed
+  // const nameSlug = title.replaceAll(/\S+/gi, "-").replaceAll(/[^A-Za-z0-9\-_]/gi, "")
+  // const fileName = `prompt-${dateSlug}-${nameSlug}.txt`
+
+  const videoId = uuidv4()
+
+  const fileName = `prompt_${dateSlug}_${videoId}.txt`
+
+  // Convert string to a Buffer
+  const blob = new Blob([`
+# Title
+${title}
+
+# Description
+${description}
+
+# Tags
+
+${tags.map(tag => `- ${tag}\n`)}
+
+# Prompt
+${prompt}
+`]);
+
+
+  await uploadFile({
+	  credentials,
+    repo: `datasets/${channel.datasetUser}/${channel.datasetName}`,
+    file: {
+      path: fileName,
+      content: blob as any,
+    },
+    commitTitle: "Add new video prompt",
+  })
+
+  // TODO: now we ping the robot to come read our prompt
+
+  const newVideoRequest: VideoRequest = {
+    id: videoId,
+    label: title,
+    description,
+    prompt,
+    thumbnailUrl: "",
+    updatedAt: new Date().toISOString(),
+    tags: [...channel.tags],
+    channel,
+  }
+
+  const newVideo: VideoInfo = {
+    id: videoId,
+    status: "submitted",
+    label: title,
+    description,,
+    prompt,
+    thumbnailUrl: "", // will be generated in async
+    assetUrl: "", // will be generated in async
+    numberOfViews: 0,
+    numberOfLikes: 0,
+    updatedAt: new Date().toISOString(),
+    tags: [...channel.tags],
+    channel,
+  }
+
+  return {
+    videoRequest: newVideoRequest,
+    videoInfo: newVideo
+  }
+}

src/app/server/actions/ai-tube-robot/README.md

@@ -0,0 +1,3 @@
+# server/actions/ai-tube-robot
+
+API client for the AI Tube Robot

src/app/server/actions/ai-tube-robot/updateQueue.ts

@@ -0,0 +1,42 @@
+"use server"
+
+import { ChannelInfo, UpdateQueueResponse } from "@/types"
+
+import { aiTubeRobotApi } from "../config"
+
+export async function updateQueue({
+  channel,
+  apiKey,
+}: {
+  channel?: ChannelInfo
+  apiKey: string
+}): Promise<number> {
+  if (!apiKey) {
+    throw new Error(`the apiKey is required`)
+  }
+
+  const res = await fetch(`${aiTubeRobotApi}/update-queue`, {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      // Authorization: `Bearer ${apiToken}`,
+     },
+    body: JSON.stringify({
+      apiKey,
+      channel
+    }),
+    cache: 'no-store',
+    // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
+    // next: { revalidate: 1 }
+  })
+
+  if (res.status !== 200) {
+    // This will activate the closest `error.js` Error Boundary
+    throw new Error('Failed to fetch data')
+  }
+  
+  const response = (await res.json()) as UpdateQueueResponse
+  // console.log("response:", response)
+  return response.nbUpdated
+}

src/app/server/actions/config.ts

@@ -0,0 +1,9 @@
+
+import { Credentials } from "@/huggingface/hub/src"
+
+export const adminApiKey = `${process.env.ADMIN_HUGGING_FACE_API_TOKEN || ""}`
+export const adminUsername = `${process.env.ADMIN_HUGGING_FACE_USERNAME || ""}`
+
+export const adminCredentials: Credentials = { accessToken: adminApiKey }
+
+export const aiTubeRobotApi = `${process.env.AI_TUBE_ROBOT_API || ""}`

src/app/server/actions/datasets.ts

@@ -1,32 +0,0 @@
-import { ChannelInfo, FullVideoInfo } from "@/types"
-
-export async function getPublicChannels({
-  userHuggingFaceApiToken
-}: {
-  userHuggingFaceApiToken: string
-}): Promise<ChannelInfo[]> {
-  // search on Hugging Face for 
-  // TODO: we should probably cache this, and use a fixed list
-  return []
-}
-
-export async function getPrivateChannels({
-  userHuggingFaceApiToken
-}: {
-  userHuggingFaceApiToken: string
-}): Promise<ChannelInfo[]> {
-  return []
-}
-
-export async function getPrivateChannelVideos({
-  userHuggingFaceApiToken,
-  channel,
-}: {
-  userHuggingFaceApiToken: string
-  channel: ChannelInfo
-}): Promise<FullVideoInfo[]> {
-  // TODO:
-  // call the Hugging Face API to grab all the files in the dataset
-  // we only get the first 30, that's enough for our demo
-  return []
-}

src/app/server/actions/generation/videochain.ts

@@ -0,0 +1,161 @@
+
+// note: there is no / at the end in the variable
+// so we have to add it ourselves if needed
+const apiUrl = process.env.VIDEOCHAIN_API_URL
+
+export const GET = async <T>(path: string = '', defaultValue: T): Promise<T> => {
+  try {
+    const res = await fetch(`${apiUrl}/${path}`, {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+        Authorization: `Bearer ${process.env.SECRET_ACCESS_TOKEN}`,
+      },
+     cache: 'no-store',
+     // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
+     // next: { revalidate: 1 }
+    })
+
+    // The return value is *not* serialized
+    // You can return Date, Map, Set, etc.
+    
+    // Recommendation: handle errors
+    if (res.status !== 200) {
+      // This will activate the closest `error.js` Error Boundary
+      throw new Error('Failed to fetch data')
+    }
+    
+    const data = await res.json()
+
+    return ((data as T) || defaultValue)
+  } catch (err) {
+    console.error(err)
+    return defaultValue
+  }
+}
+
+
+export const DELETE = async <T>(path: string = '', defaultValue: T): Promise<T> => {
+  try {
+    const res = await fetch(`${apiUrl}/${path}`, {
+      method: "DELETE",
+      headers: {
+        Accept: "application/json",
+        Authorization: `Bearer ${process.env.VC_SECRET_ACCESS_TOKEN}`,
+      },
+     cache: 'no-store',
+     // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
+     // next: { revalidate: 1 }
+    })
+
+    // The return value is *not* serialized
+    // You can return Date, Map, Set, etc.
+    
+    // Recommendation: handle errors
+    if (res.status !== 200) {
+      // This will activate the closest `error.js` Error Boundary
+      throw new Error('Failed to fetch data')
+    }
+    
+    const data = await res.json()
+
+    return ((data as T) || defaultValue)
+  } catch (err) {
+    console.error(err)
+    return defaultValue
+  }
+}
+
+export const POST = async <S, T>(path: string = '', payload: S, defaultValue: T): Promise<T> => {
+  try {
+    const res = await fetch(`${apiUrl}/${path}`, {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.VC_SECRET_ACCESS_TOKEN}`,
+      },
+      body: JSON.stringify(payload),
+      // cache: 'no-store',
+      // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
+      next: { revalidate: 1 }
+    })
+    // The return value is *not* serialized
+    // You can return Date, Map, Set, etc.
+    
+    // Recommendation: handle errors
+    if (res.status !== 200) {
+      // This will activate the closest `error.js` Error Boundary
+      throw new Error('Failed to post data')
+    }
+    
+    const data = await res.json()
+
+    return ((data as T) || defaultValue)
+  } catch (err) {
+    return defaultValue
+  }
+}
+
+
+export const PUT = async <S, T>(path: string = '', payload: S, defaultValue: T): Promise<T> => {
+  try {
+    const res = await fetch(`${apiUrl}/${path}`, {
+      method: "PUT",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.VC_SECRET_ACCESS_TOKEN}`,
+      },
+      body: JSON.stringify(payload),
+      // cache: 'no-store',
+      // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
+      next: { revalidate: 1 }
+    })
+    // The return value is *not* serialized
+    // You can return Date, Map, Set, etc.
+    
+    // Recommendation: handle errors
+    if (res.status !== 200) {
+      // This will activate the closest `error.js` Error Boundary
+      throw new Error('Failed to post data')
+    }
+    
+    const data = await res.json()
+
+    return ((data as T) || defaultValue)
+  } catch (err) {
+    return defaultValue
+  }
+}
+
+export const PATCH = async <S, T>(path: string = '', payload: S, defaultValue: T): Promise<T> => {
+  try {
+    const res = await fetch(`${apiUrl}/${path}`, {
+      method: "PATCH",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.VC_SECRET_ACCESS_TOKEN}`,
+      },
+      body: JSON.stringify(payload),
+      // cache: 'no-store',
+      // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
+      next: { revalidate: 1 }
+    })
+    // The return value is *not* serialized
+    // You can return Date, Map, Set, etc.
+    
+    // Recommendation: handle errors
+    if (res.status !== 200) {
+      // This will activate the closest `error.js` Error Boundary
+      throw new Error('Failed to post data')
+    }
+    
+    const data = await res.json()
+
+    return ((data as T) || defaultValue)
+  } catch (err) {
+    return defaultValue
+  }
+}

src/app/server/actions/python-api.ts

@@ -1,19 +0,0 @@
-"use server"
-
-import { python } from "pythonia"
-
-const apiKey = `${process.env.ADMIN_HUGGING_FACE_API_TOKEN || ""}`
-
-export async function listDatasetCommunityPosts(): Promise<any[]> {
-
-  const { HfApi } = await python("huggingface_hub")
-
-  const hf = await HfApi({
-    endpoint: "https://huggingface.co",
-    token: apiKey
-  })
-  // TODO
-
-  return [] as any[]
-}
-

src/app/server/actions/submitVideoRequest.ts

@@ -0,0 +1,47 @@
+"use server"
+
+import { ChannelInfo, VideoInfo } from "@/types"
+
+import { uploadVideoRequestToDataset } from "./ai-tube-hf/uploadVideoRequestToDataset"
+import { updateQueue } from "./ai-tube-robot/updateQueue"
+
+export async function submitVideoRequest({
+  channel,
+  apiKey,
+  title,
+  description,
+  prompt,
+  tags,
+}: {
+  channel: ChannelInfo
+  apiKey: string
+  title: string
+  description: string
+  prompt: string
+  tags: string[]
+}): Promise<VideoInfo> {
+  if (!apiKey) {
+    throw new Error(`the apiKey is required`)
+  }
+
+  const { videoRequest, videoInfo } = await uploadVideoRequestToDataset({
+    channel,
+    apiKey,
+    title,
+    description,
+    prompt,
+    tags
+  })
+
+  try {
+    await updateQueue({ apiKey, channel })
+    
+    return {
+      ...videoInfo,
+      status: "queued"
+    }
+  } catch (err) {
+    console.error(`failed to update the queue, but this can be done later :)`)
+    return videoInfo
+  }
+}

src/app/server/actions/utils/parseDatasetPrompt.ts

@@ -0,0 +1,49 @@
+
+import { ParsedDatasetPrompt } from "@/types"
+
+export function parseDatasetPrompt(markdown: string = ""): ParsedDatasetPrompt {
+  try {
+    const { title, description, prompt } = parseMarkdown(markdown)
+
+    return {
+      title: typeof title === "string" && title ? title : "",
+      description: typeof description === "string" && description ? description : "",
+      prompt: typeof prompt === "string" && prompt ? prompt : "",
+    }
+  } catch (err) {
+    return {
+      title: "",
+      description:  "",
+      prompt:  "",
+    }
+  }
+}
+
+/**
+ * Simple Markdown Parser to extract sections into a JSON object
+ * @param markdown A Markdown string containing Description and Prompt sections
+ * @returns A JSON object with { "description": "...", "prompt": "..." }
+ */
+function parseMarkdown(markdown: string): ParsedDatasetPrompt {
+  // Regular expression to find markdown sections based on the provided structure
+  const sectionRegex = /^## (.+?)\n\n([\s\S]+?)(?=\n## |$)/gm;
+
+  let match;
+  const sections: { [key: string]: string } = {};
+
+  // Iterate over each section match to populate the sections object
+  while ((match = sectionRegex.exec(markdown))) {
+    const [, key, value] = match;
+    sections[key.toLowerCase()] = value.trim();
+  }
+
+  // Create the resulting JSON object with "description" and "prompt" keys
+  const result = {
+    title: sections['title'] || '',
+    description: sections['description'] || '',
+    // categories: sections['categories'] || '',
+    prompt: sections['prompt'] || '',
+  };
+
+  return result;
+}

src/app/server/actions/utils/parseDatasetReadme.ts

@@ -0,0 +1,62 @@
+
+import metadataParser from "markdown-yaml-metadata-parser"
+
+import { ParsedDatasetReadme, ParsedMetadataAndContent } from "@/types"
+
+export function parseDatasetReadme(markdown: string = ""): ParsedDatasetReadme {
+  try {
+    const { metadata, content } = metadataParser(markdown) as ParsedMetadataAndContent
+
+    // console.log("DEBUG README:", { metadata, content })
+    
+    const { description, prompt } = parseMarkdown(content)
+
+    return {
+      license: typeof metadata?.license === "string" ? metadata.license : "",
+      pretty_name: typeof metadata?.pretty_name === "string" ? metadata.pretty_name : "",
+      tags: Array.isArray(metadata?.tags) ? metadata.tags : [],
+      description,
+      prompt,
+    }
+  } catch (err) {
+    return {
+      license: "",
+      pretty_name: "",
+      tags: [], // Hugging Face tags
+      description: "",
+      prompt: "",
+    }
+  }
+}
+
+/**
+ * Simple Markdown Parser to extract sections into a JSON object
+ * @param markdown A Markdown string containing Description and Prompt sections
+ * @returns A JSON object with { "description": "...", "prompt": "..." }
+ */
+function parseMarkdown(markdown: string): {
+  description: string
+  prompt: string
+  // categories: string
+} {
+  // Regular expression to find markdown sections based on the provided structure
+  const sectionRegex = /^## (.+?)\n\n([\s\S]+?)(?=\n## |$)/gm;
+
+  let match;
+  const sections: { [key: string]: string } = {};
+
+  // Iterate over each section match to populate the sections object
+  while ((match = sectionRegex.exec(markdown))) {
+    const [, key, value] = match;
+    sections[key.toLowerCase()] = value.trim();
+  }
+
+  // Create the resulting JSON object with "description" and "prompt" keys
+  const result = {
+    description: sections['description'] || '',
+    // categories: sections['categories'] || '',
+    prompt: sections['prompt'] || '',
+  };
+
+  return result;
+}

src/app/server/config.ts

@@ -1,6 +0,0 @@
-import path from "node:path"
-
-// see the .env file fore more informations
-export const storagePath = `${process.env.STORAGE_PATH || './sandbox'}`
-
-export const partiesDirFilePath = path.join(storagePath, "parties")

src/app/state/categories.ts

@@ -1,13 +1,18 @@
+
+
+// TODO:
+// this is obsolete, we should search on the Hugging Face platform instead
+
 export const videoCategoriesWithLabels = {
  // "random": "Random",
   // "lofi": "Lofi Hip-Hop",
-  "sports": "Sports",
-  "education": "Education",
-  "timetravel": "Time Travel", // vlogs etc
-  "gaming": "Gaming",
-  "trailers": "Trailers",
-  "aitubers": "AI tubers",
-  "ads": "100% Ads",
+  "Sports": "Sports",
+  "Education": "Education",
+  "Time Travel": "Time Travel", // vlogs etc
+  // "gaming": "Gaming",
+  // "trailers": "Trailers",
+  // "aitubers": "AI tubers",
+  // "ads": "100% Ads",
 }
 
 export type VideoCategory = keyof typeof videoCategoriesWithLabels

src/app/state/useStore.ts

@@ -2,8 +2,7 @@
 
 import { create } from "zustand"
 
-import { VideoCategory } from "./categories"
-import { ChannelInfo, FullVideoInfo, InterfaceDisplayMode, InterfaceView } from "@/types"
+import { ChannelInfo, VideoInfo, InterfaceDisplayMode, InterfaceView } from "@/types"
 
 export const useStore = create<{
   displayMode: InterfaceDisplayMode
@@ -18,14 +17,17 @@ export const useStore = create<{
   currentChannels: ChannelInfo[]
   setCurrentChannels: (currentChannels?: ChannelInfo[]) => void
 
-  currentCategory?: VideoCategory
-  setCurrentCategory: (currentCategory?: VideoCategory) => void
+  currentTag?: string
+  setCurrentTag: (currentTag?: string) => void
 
-  currentVideos: FullVideoInfo[]
-  setCurrentVideos: (currentVideos: FullVideoInfo[]) => void
+  currentVideos: VideoInfo[]
+  setCurrentVideos: (currentVideos: VideoInfo[]) => void
 
-  currentVideo?: FullVideoInfo
-  setCurrentVideo: (currentVideo?: FullVideoInfo) => void
+  currentVideo?: VideoInfo
+  setCurrentVideo: (currentVideo?: VideoInfo) => void
+
+  // currentPrompts: VideoInfo[]
+  // setCurrentPrompts: (currentPrompts: VideoInfo[]) => void
 }>((set, get) => ({
   displayMode: "desktop",
   setDisplayMode: (displayMode: InterfaceDisplayMode) => {
@@ -50,18 +52,18 @@ export const useStore = create<{
     set({ currentChannels: Array.isArray(currentChannels) ? currentChannels : [] })
   },
 
-  currentCategory: undefined,
-  setCurrentCategory: (currentCategory?: VideoCategory) => {
-    set({ currentCategory })
+  currentTag: undefined,
+  setCurrentTag: (currentTag?: string) => {
+    set({ currentTag })
   },
 
   currentVideos: [],
-  setCurrentVideos: (currentVideos: FullVideoInfo[] = []) => {
+  setCurrentVideos: (currentVideos: VideoInfo[] = []) => {
     set({
       currentVideos: Array.isArray(currentVideos) ? currentVideos : [] 
     })
   },
 
   currentVideo: undefined,
-  setCurrentVideo: (currentVideo?: FullVideoInfo) => { set({ currentVideo }) },
+  setCurrentVideo: (currentVideo?: VideoInfo) => { set({ currentVideo }) },
 }))

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

@@ -1,56 +0,0 @@
-import { useEffect } from "react"
-
-import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
-import { FullVideoInfo } from "@/types"
-import { VideoList } from "@/app/interface/video-list"
-
-export function ChannelPublicView() {
-  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)
-
-  useEffect(() => {
-
-    // 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: "",
-          slug: "",
-          label: "Hugging Face",
-          thumbnail: "",
-          prompt: "",
-          likes: 0,
-        }
-      }
-    ]
-    setCurrentVideos(newVideos)
-  }, [currentCategory])
-
-  return (
-    <div className={cn(
-      `flex flex-col`
-    )}>
-      <VideoList
-        videos={currentVideos}
-      />
-    </div>
-  )
-}

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

@@ -2,7 +2,7 @@ import { useEffect } from "react"
 
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
-import { FullVideoInfo } from "@/types"
+import { VideoInfo } from "@/types"
 
 export function HomeView() {
   const displayMode = useStore(s => s.displayMode)
@@ -20,7 +20,7 @@ export function HomeView() {
 
     // we use fake data for now
     // this will be pulled from the Hugging Face API
-    const newCategoryVideos: FullVideoInfo[] = [
+    const newCategoryVideos: VideoInfo[] = [
       {
         id: "42",
         label: "Test Julian",

src/app/views/{channel-admin-view → public-channel-view}/index.tsx

@@ -1,48 +1,35 @@
-import { useEffect } from "react"
+import { useEffect, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
-import { FullVideoInfo } from "@/types"
+import { VideoInfo } from "@/types"
 import { VideoList } from "@/app/interface/video-list"
+import { getChannelVideos } from "@/app/server/actions/api"
+import { useLocalStorage } from "usehooks-ts"
+import { localStorageKeys } from "@/app/state/locaStorageKeys"
+import { defaultSettings } from "@/app/state/defaultSettings"
 
-export function ChannelAdminView() {
-  const displayMode = useStore(s => s.displayMode)
-  const setDisplayMode = useStore(s => s.setDisplayMode)
+export function PublicChannelView() {
+  const [_isPending, startTransition] = useTransition()
   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)
 
   useEffect(() => {
+    if (!currentChannel) {
+      return
+    }
 
-    // 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: "",
-          slug: "",
-          label: "Hugging Face",
-          thumbnail: "",
-          prompt: "",
-          likes: 0,
-        }
-      }
-    ]
-    setCurrentVideos(newVideos)
-  }, [currentCategory])
+    startTransition(async () => {
+      const videos = await getChannelVideos({
+        channel: currentChannel,
+      })
+      console.log("videos:", videos)
+    })
+
+    setCurrentVideos([])
+  }, [currentChannel, currentChannel?.id])
 
   return (
     <div className={cn(

src/app/views/{channels-public-view → public-channels-view}/index.tsx

@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils"
 import { getChannels } from "@/app/server/actions/api"
 import { ChannelList } from "@/app/interface/channel-list"
 
-export function ChannelsPublicView() {
+export function PublicChannelsView() {
   const [_isPending, startTransition] = useTransition()
 
   const currentChannels = useStore(s => s.currentChannels)

src/app/views/{video-public-view → public-video-view}/index.tsx

@@ -3,13 +3,13 @@ import { useEffect } from "react"
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 
-export function VideoPublicView() {
+export function PublicVideoView() {
   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 currentTag = useStore(s => s.currentTag)
+  const setCurrentTag = useStore(s => s.setCurrentTag)
   const currentVideos = useStore(s => s.currentVideos)
   const currentVideo = useStore(s => s.currentVideo)
   const setCurrentVideo = useStore(s => s.setCurrentVideo)

src/app/views/user-account-view/index.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import { useTransition } from "react"
+import { useLocalStorage } from "usehooks-ts"
+
+import { cn } from "@/lib/utils"
+import { Input } from "@/components/ui/input"
+import { localStorageKeys } from "@/app/state/locaStorageKeys"
+import { defaultSettings } from "@/app/state/defaultSettings"
+
+export function UserAccountView() {
+  const [huggingfaceApiKey, setHuggingfaceApiKey] = useLocalStorage<string>(
+    localStorageKeys.huggingfaceApiKey,
+    defaultSettings.huggingfaceApiKey
+  )
+
+  return (
+    <div className={cn(
+      `flex flex-col space-y-4`
+    )}>
+      <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
+        ? <p>You are ready to go!</p>
+        : <p>Please setup your accountabove  to get started</p>}
+    </div>
+  )
+}

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

@@ -0,0 +1,151 @@
+import { useEffect, useState, useTransition } from "react"
+
+import { useStore } from "@/app/state/useStore"
+import { cn } from "@/lib/utils"
+import { VideoInfo } from "@/types"
+import { VideoList } from "@/app/interface/video-list"
+import { submitVideoRequest, getChannelVideos } from "@/app/server/actions/api"
+import { useLocalStorage } from "usehooks-ts"
+import { localStorageKeys } from "@/app/state/locaStorageKeys"
+import { defaultSettings } from "@/app/state/defaultSettings"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Button } from "@/components/ui/button"
+
+export function UserChannelView() {
+  const [_isPending, startTransition] = useTransition()
+  const [huggingfaceApiKey, setHuggingfaceApiKey] = useLocalStorage<string>(
+    localStorageKeys.huggingfaceApiKey,
+    defaultSettings.huggingfaceApiKey
+  )
+  const [titleDraft, setTitleDraft] = useState("")
+  const [promptDraft, setPromptDraft] = useState("")
+  
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const currentChannel = useStore(s => s.currentChannel)
+  const currentVideos = useStore(s => s.currentVideos)
+  const setCurrentVideos = useStore(s => s.setCurrentVideos)
+  const setCurrentVideo = useStore(s => s.setCurrentVideo)
+
+  useEffect(() => {
+    if (!currentChannel) {
+      return
+    }
+
+    startTransition(async () => {
+      const videos = await getChannelVideos({
+        channel: currentChannel,
+        apiKey: huggingfaceApiKey,
+      })
+      console.log("videos:", videos)
+    })
+
+    setCurrentVideos([])
+  }, [huggingfaceApiKey, currentChannel, currentChannel?.id])
+
+  const handleSubmit = () => {
+    if (!currentChannel) {
+      return
+    }
+    if (!titleDraft || !promptDraft) {
+      console.log("missing title or prompt")
+      return
+    }
+
+    setIsSubmitting(true)
+
+    startTransition(async () => {
+      try {
+        const newVideo = await submitVideoRequest({
+          channel: currentChannel,
+          apiKey: huggingfaceApiKey,
+          title: titleDraft,
+          prompt: promptDraft
+        })
+
+        // in case of success we update the frontend immediately
+        // with our draft video
+        setCurrentVideos([newVideo, ...currentVideos])
+        setPromptDraft("")
+        setTitleDraft("")
+
+        // also renew the cache on Next's side
+        await getChannelVideos({
+          channel: currentChannel,
+          apiKey: huggingfaceApiKey,
+          renewCache: true,
+        })
+      } catch (err) {
+        console.error(err)
+      } finally {
+        setIsSubmitting(false)
+      }
+    })
+  }
+
+  return (
+    <div className={cn(
+      `flex flex-col space-y-8`
+    )}>
+      <h2 className="text-3xl font-bold">Robot channel settings:</h2>
+      <p>TODO</p>
+
+      <h2 className="text-3xl font-bold">Schedule a new prompt:</h2>
+
+      <div className="flex flex-row space-x-2 items-start">
+        <label className="flex w-24">Title:</label>
+        <div className="flex flex-col space-y-2 flex-grow">
+          <Input
+            placeholder="Title"
+            className="font-mono"
+            onChange={(x) => {
+              setTitleDraft(x.target.value)
+            }}
+            value={titleDraft}
+          />
+          <p className="text-neutral-100/70">
+            Title of the video, keep it short.
+          </p>
+        </div>
+      </div>
+
+      <div className="flex flex-row space-x-2 items-start">
+        <label className="flex w-24">Prompt:</label>
+        <div className="flex flex-col space-y-2 flex-grow">
+          <Textarea
+            placeholder="Prompt"
+            className="font-mono"
+            rows={6}
+            onChange={(x) => {
+              setPromptDraft(x.target.value)
+            }}
+            value={promptDraft}
+          />
+          <p className="text-neutral-100/70">
+            Describe your video in natural language.
+          </p>
+        </div>
+      </div>
+
+      <div className="flex flex-row space-x-2 items-center justify-between">
+        <Button
+          onClick={handleSubmit}
+          disabled={isSubmitting}
+          className={cn(
+            isSubmitting ? `opacity-50` : `opacity-100`
+          )}
+        >
+          {isSubmitting ? 'Adding to the queue..' : 'Add prompt to the queue'}
+        </Button>
+        <p>Note: It can take a few hours for the video to be generated.</p>
+      </div>
+
+      <h2 className="text-3xl font-bold">Current video prompts:</h2>
+
+      <VideoList
+        videos={currentVideos}
+      />
+    </div>
+  )
+}

src/app/views/{channels-admin-view → user-channels-view}/index.tsx

@@ -5,19 +5,21 @@ import { useLocalStorage } from "usehooks-ts"
 
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
-import { getChannels } from "@/app/server/actions/api"
+import { getChannels } from "@/app/server/actions/ai-tube-hf/getChannels"
 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() {
+export function UserChannelsView() {
   const [_isPending, startTransition] = useTransition()
-  const [huggingfaceApiKey, setHuggingfaceApiKey] = useLocalStorage<string>(
+  const [huggingfaceApiKey,] = useLocalStorage<string>(
     localStorageKeys.huggingfaceApiKey,
     defaultSettings.huggingfaceApiKey
   )
 
+  const setView = useStore(s => s.setView)
+  const setCurrentChannel = useStore(s => s.setCurrentChannel)
+
   const currentChannels = useStore(s => s.currentChannels)
   const setCurrentChannels = useStore(s => s.setCurrentChannels)
   const [isLoaded, setLoaded] = useState(false)
@@ -36,33 +38,20 @@ export function ChannelsAdminView() {
         }
       })
     }
-  }, [isLoaded])
+  }, [isLoaded, huggingfaceApiKey])
 
   return (
     <div className={cn(
       `flex flex-col space-y-4`
     )}>
-      <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}
+          onSelect={(channel) => {
+            setCurrentChannel(channel)
+            setView("user_channel")
+          }}
+        /> : <p>Please setup your account to get started creating robot channels!</p>}
     </div>
   )
 }

src/huggingface/hub/src/index.ts

@@ -1,4 +1,4 @@
-export * from "./lib";
+export * from "./lib/index";
 // Typescript 5 will add 'export type *'
 export type {
 	AccessToken,

src/huggingface/hub/src/lib/commit.ts

@@ -1,4 +1,4 @@
-import { isFrontend, base64FromBytes } from "../../../shared";
+import { isFrontend, base64FromBytes } from "../../../shared/index";
 import { HUB_URL } from "../consts";
 import { HubApiError, createApiError, InvalidApiResponseFormatError } from "../error";
 import type {
@@ -80,6 +80,7 @@ export interface CommitParams {
 	 * Custom fetch function to use instead of the default one, for example to use a proxy or edit headers.
 	 */
 	fetch?: typeof fetch;
+	requestInit?: RequestInit;
 	abortSignal?: AbortSignal;
 }
 
@@ -193,6 +194,7 @@ export async function* commitIter(params: CommitParams): AsyncGenerator<CommitPr
 					},
 					body: JSON.stringify(payload),
 					signal: abortSignal,
+					...params.requestInit,
 				}
 			);
 
@@ -268,6 +270,7 @@ export async function* commitIter(params: CommitParams): AsyncGenerator<CommitPr
 					},
 					body: JSON.stringify(payload),
 					signal: abortSignal,
+					...params.requestInit,
 				}
 			);
 
@@ -360,6 +363,7 @@ export async function* commitIter(params: CommitParams): AsyncGenerator<CommitPr
 												progressCallback,
 											},
 										} as any),
+										...params.requestInit,
 									});
 
 									if (!res.ok) {
@@ -392,6 +396,7 @@ export async function* commitIter(params: CommitParams): AsyncGenerator<CommitPr
 									"Content-Type": "application/vnd.git-lfs+json",
 								},
 								signal: abortSignal,
+								...params.requestInit,
 							});
 
 							if (!res.ok) {
@@ -430,6 +435,7 @@ export async function* commitIter(params: CommitParams): AsyncGenerator<CommitPr
 											}),
 									},
 								} as any),
+								...params.requestInit,
 							});
 
 							if (!res.ok) {
@@ -519,6 +525,7 @@ export async function* commitIter(params: CommitParams): AsyncGenerator<CommitPr
 								},
 							},
 						} as any),
+						...params.requestInit,
 					}
 				)
 					.then(async (res) => {

src/huggingface/hub/src/lib/create-repo.ts

@@ -2,7 +2,7 @@ import { HUB_URL } from "../consts";
 import { createApiError } from "../error";
 import type { ApiCreateRepoPayload } from "../types/api/api-create-repo";
 import type { Credentials, RepoDesignation, SpaceSdk } from "../types/public";
-import { base64FromBytes } from "../../../shared";
+import { base64FromBytes } from "../../../shared/index";
 import { checkCredentials } from "../utils/checkCredentials";
 import { toRepoId } from "../utils/toRepoId";
 
@@ -22,6 +22,7 @@ export async function createRepo(params: {
 	 * Custom fetch function to use instead of the default one, for example to use a proxy or edit headers.
 	 */
 	fetch?: typeof fetch;
+	requestInit?: RequestInit;
 }): Promise<{ repoUrl: string }> {
 	checkCredentials(params.credentials);
 	const repoId = toRepoId(params.repo);
@@ -64,6 +65,7 @@ export async function createRepo(params: {
 			Authorization: `Bearer ${params.credentials.accessToken}`,
 			"Content-Type": "application/json",
 		},
+		...params.requestInit,
 	});
 
 	if (!res.ok) {

src/huggingface/hub/src/lib/delete-repo.ts

@@ -12,6 +12,7 @@ export async function deleteRepo(params: {
 	 * Custom fetch function to use instead of the default one, for example to use a proxy or edit headers.
 	 */
 	fetch?: typeof fetch;
+	requestInit?: RequestInit;
 }): Promise<void> {
 	checkCredentials(params.credentials);
 	const repoId = toRepoId(params.repo);
@@ -28,6 +29,7 @@ export async function deleteRepo(params: {
 			Authorization: `Bearer ${params.credentials.accessToken}`,
 			"Content-Type": "application/json",
 		},
+		...params.requestInit,
 	});
 
 	if (!res.ok) {

src/huggingface/hub/src/lib/download-file.ts

@@ -27,6 +27,7 @@ export async function downloadFile(params: {
 	 * Custom fetch function to use instead of the default one, for example to use a proxy or edit headers.
 	 */
 	fetch?: typeof fetch;
+	requestInit?: RequestInit;
 }): Promise<Response | null> {
 	checkCredentials(params.credentials);
 	const repoId = toRepoId(params.repo);
@@ -47,6 +48,7 @@ export async function downloadFile(params: {
 				  }
 				: {}),
 		},
+		...params.requestInit,
 	});
 
 	if (resp.status === 404 && resp.headers.get("X-Error-Code") === "EntryNotFound") {

src/huggingface/hub/src/lib/file-download-info.ts

@@ -25,6 +25,10 @@ export async function fileDownloadInfo(params: {
 	 * Custom fetch function to use instead of the default one, for example to use a proxy or edit headers.
 	 */
 	fetch?: typeof fetch;
+	/**
+	 * Custom fetch parameters
+	 */
+	requestInit?: RequestInit;
 	/**
 	 * To get the raw pointer file behind a LFS file
 	 */
@@ -54,6 +58,7 @@ export async function fileDownloadInfo(params: {
 					Range: "bytes=0-0",
 			  }
 			: {},
+		...params.requestInit,
 	});
 
 	if (resp.status === 404 && resp.headers.get("X-Error-Code") === "EntryNotFound") {

src/huggingface/hub/src/lib/file-exists.ts

@@ -14,6 +14,7 @@ export async function fileExists(params: {
 	 * Custom fetch function to use instead of the default one, for example to use a proxy or edit headers.
 	 */
 	fetch?: typeof fetch;
+	requestInit?: RequestInit;
 }): Promise<boolean> {
 	checkCredentials(params.credentials);
 	const repoId = toRepoId(params.repo);
@@ -26,6 +27,7 @@ export async function fileExists(params: {
 	const resp = await (params.fetch ?? fetch)(url, {
 		method: "HEAD",
 		headers: params.credentials ? { Authorization: `Bearer ${params.credentials.accessToken}` } : {},
+		...params.requestInit,
 	});
 
 	if (resp.status === 404) {

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

@@ -27,6 +27,7 @@ export async function* listDatasets(params?: {
 	 * Custom fetch function to use instead of the default one, for example to use a proxy or edit headers.
 	 */
 	fetch?: typeof fetch;
+	requestInit?: RequestInit;
 }): AsyncGenerator<DatasetEntry> {
 	checkCredentials(params?.credentials);
 	const search = new URLSearchParams([

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

@@ -57,6 +57,7 @@ export async function* listFiles(params: {
 	 * Custom fetch function to use instead of the default one, for example to use a proxy or edit headers.
 	 */
 	fetch?: typeof fetch;
+	requestInit?: RequestInit;
 }): AsyncGenerator<ListFileEntry> {
 	checkCredentials(params.credentials);
 	const repoId = toRepoId(params.repo);
@@ -70,6 +71,7 @@ export async function* listFiles(params: {
 				accept: "application/json",
 				...(params.credentials ? { Authorization: `Bearer ${params.credentials.accessToken}` } : undefined),
 			},
+			...params.requestInit,
 		});
 
 		if (!res.ok) {

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

@@ -29,6 +29,7 @@ export async function* listModels(params?: {
 	 * Custom fetch function to use instead of the default one, for example to use a proxy or edit headers.
 	 */
 	fetch?: typeof fetch;
+	requestInit?: RequestInit;
 }): AsyncGenerator<ModelEntry> {
 	checkCredentials(params?.credentials);
 	const search = new URLSearchParams([

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

@@ -28,6 +28,7 @@ export async function* listSpaces(params?: {
 	 * Custom fetch function to use instead of the default one, for example to use a proxy or edit headers.
 	 */
 	fetch?: typeof fetch;
+	requestInit?: RequestInit;
 	/**
 	 * Additional fields to fetch from huggingface.co.
 	 */