small beginnings..

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

@@ -16,9 +16,10 @@ export function ChannelCard({
     className={cn(
       `flex flex-col`,
       `items-center justify-center`,
+      `space-y-1`,
       `w-52 h-52`,
       `rounded-lg`,
-      `bg-neutral-900 hover:bg-neutral-700/80`,
+      `hover:bg-neutral-800/30`,
       `text-neutral-100/80 hover:text-neutral-100/100`,
       `cursor-pointer`,
       className,
@@ -31,31 +32,33 @@ export function ChannelCard({
     >
       <div
         className={cn(
-          `rounded-lg overflow-hidden`
+          `flex flex-col items-center justify-center`,
+          `rounded-full overflow-hidden`,
+          `w-26 h-26`
         )}
       >
-        <img src="" />
+        <img src={channel.thumbnail} />
       </div>
 
       <div className={cn(
         `flex flex-col`,
          `items-center justify-center text-center`,
-         `space-y-2`
+         `space-y-1`
       )}>
-        <div className="text-center text-lg">{channel.label}</div>
+        <div className="text-center text-base font-medium text-zinc-100">{channel.label}</div>
         {/*<div className="text-center text-sm font-semibold">
           by <a href={
             `https://huggingface.co/${channel.datasetUser}`
           } target="_blank">@{channel.datasetUser}</a>
         </div>
         */}
-        <div className="text-center text-sm font-semibold">
+        <div className="text-center text-xs font-medium">
           @{channel.datasetUser}
         </div>
-        <div className="flex flex-row items-center justify-center">
-          <div className="text-center text-sm">{0} videos</div>
+        <div className="flex flex-row items-center justify-center text-neutral-400">
+          <div className="text-center text-xs">{0} videos</div>
           <div className="px-1">-</div>
-          <div className="text-center text-sm">{channel.likes} likes</div>
+          <div className="text-center text-xs">{channel.likes} likes</div>
         </div>
       </div>
     </div>

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

@@ -29,7 +29,7 @@ export function ChannelList({
     <div
       className={cn(
         layout === "grid"
-          ? `grid grid-cols-4 gap-4`
+          ? `grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4`
           : `flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4`,
         className,
       )}

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

@@ -33,13 +33,13 @@ export function LeftMenu() {
           >
           Discover
         </MenuItem>
-        {showBetaFeatures && <MenuItem
+        <MenuItem
           icon={<GrChannel className="h-5 w-5" />}
           selected={view === "public_channels"}
           onClick={() => setView("public_channels")}
           >
           Channels
-        </MenuItem>}
+        </MenuItem>
       </div>
       <div className={cn(
         `flex flex-col w-full`,

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

@@ -86,11 +86,7 @@ export function TopHeader() {
               </div>
             </div>
             <div className="font-semibold">
-              {view === "user_channels"
-                ? "My account"
-              : view === "public_channels"
-                ? "AI Channels"
-              : "AiTube" }
+              AiTube
             </div>
           </div>
         </div>
@@ -98,8 +94,9 @@ export function TopHeader() {
            `transition-all duration-200 ease-in-out`,
            `flex flex-col items-center justify-center`,
            `px-4 py-2 w-max-64`,
+           `text-neutral-400 text-sm italic`
         )}>
-          {/*[ Search bar goes here ]*/}
+        Ai Tube is a platform where all videos are generated using AI, for research and experimentation purposes.
         </div>
         <div className={cn()}>
           &nbsp; {/* more buttons? unused for now */}

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

@@ -11,7 +11,7 @@ export async function getChannels(options: {
   owner?: string
   renewCache?: boolean
 } = {}): Promise<ChannelInfo[]> {
-
+  // console.log("getChannels")
   let credentials: Credentials = adminCredentials
   let owner = options?.owner
 
@@ -38,13 +38,12 @@ export async function getChannels(options: {
     ? { owner } // search channels of a specific user
     : prefix // global search (note: might be costly?)
 
-  console.log("search:", search)
-
+ 
   for await (const { id, name, likes, updatedAt } of listDatasets({
     search,
     credentials,
     requestInit: options?.renewCache
-    ? { cache: "no-cache" }
+    ? { cache: "no-store" }
     : undefined
   })) {
 
@@ -56,7 +55,8 @@ export async function getChannels(options: {
       : [name, name]
 
     // console.log(`found a candidate dataset "${datasetName}" owned by @${datasetUser}`)
-
+    
+    // ignore channels which don't start with ai-tube
     if (!datasetName.startsWith(prefix)) {
       continue
     }
@@ -73,9 +73,10 @@ export async function getChannels(options: {
     // TODO parse the README to get the proper label
     let label = slug.replaceAll("-", " ")
 
-    const thumbnail = ""
+    let thumbnail = ""
     let prompt = ""
     let description = ""
+    let voice = ""
     let tags: string[] = []
 
     // console.log(`going to read datasets/${name}`)
@@ -94,15 +95,21 @@ export async function getChannels(options: {
       prompt = parsedDatasetReadme.prompt
       label = parsedDatasetReadme.pretty_name
       description = parsedDatasetReadme.description
+      thumbnail = parsedDatasetReadme.thumbnail || "thumbnail.jpg"
+
+      thumbnail =
+        thumbnail.startsWith("http")
+          ? thumbnail
+          : (thumbnail.endsWith(".jpg") || thumbnail.endsWith(".jpeg"))
+          ? `https://huggingface.co/datasets/${name}/resolve/main/${thumbnail}`
+          : ""
 
-      const prefix = "ai-tube:"
+      voice = parsedDatasetReadme.voice
 
       tags = parsedDatasetReadme.tags
-        .filter(tag => tag.startsWith(prefix)) // remove any tag not belonging to us
-        .map(tag => tag.replaceAll(prefix, "").trim()) // remove the prefix
+        .map(tag => tag.trim()) // clean them up
         .filter(tag => tag) // remove empty tags
       
-      
     } catch (err) {
       // console.log("failed to read the readme:", err)
     }

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

@@ -71,22 +71,28 @@ export async function getVideoRequestsFromChannel({
           continue
         }
 
-        const { title, description, tags, prompt } = parseDatasetPrompt(rawMarkdown)
+        const { title, description, tags, prompt, thumbnail } = parseDatasetPrompt(rawMarkdown)
 
         if (!title || !description || !prompt) {
           // console.log("dataset prompt is incomplete or unparseable")
           continue
         }
         // console.log("prompt parsed markdown:", { title, description, tags })
+        let thumbnailUrl =
+          thumbnail.startsWith("http")
+            ? thumbnail
+            : (thumbnail.endsWith(".jpg") || thumbnail.endsWith(".jpeg"))
+            ? `https://huggingface.co/${repo}/resolve/main/${thumbnail}`
+            : ""
 
         const video: VideoRequest = {
           id,
           label: title,
           description,
           prompt,
-          thumbnailUrl: "",
+          thumbnailUrl,
     
-          updatedAt: file.lastCommit?.date || "",
+          updatedAt: file.lastCommit?.date || new Date().toISOString(),
           tags, // read them from the file?
           channel,
         }

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

@@ -75,7 +75,7 @@ ${prompt}
     label: title,
     description,
     prompt,
-    thumbnailUrl: "",
+    thumbnailUrl: channel.thumbnail,
     updatedAt: new Date().toISOString(),
     tags,
     channel,
@@ -87,7 +87,7 @@ ${prompt}
     label: title,
     description,
     prompt,
-    thumbnailUrl: "", // will be generated in async
+    thumbnailUrl: channel.thumbnail, // will be generated in async
     assetUrl: "", // will be generated in async
     numberOfViews: 0,
     numberOfLikes: 0,

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

@@ -3,13 +3,14 @@ import { ParsedDatasetPrompt } from "@/types"
 
 export function parseDatasetPrompt(markdown: string = ""): ParsedDatasetPrompt {
   try {
-    const { title, description, tags, prompt } = parseMarkdown(markdown)
+    const { title, description, tags, prompt, thumbnail } = parseMarkdown(markdown)
 
     return {
       title: typeof title === "string" && title ? title : "",
       description: typeof description === "string" && description ? description : "",
       tags: tags && typeof tags === "string" ? tags.split("-").map(x => x.trim()).filter(x => x) : [], 
       prompt: typeof prompt === "string" && prompt ? prompt : "",
+      thumbnail: typeof thumbnail === "string" && thumbnail ? thumbnail : "",
     }
   } catch (err) {
     return {
@@ -17,6 +18,7 @@ export function parseDatasetPrompt(markdown: string = ""): ParsedDatasetPrompt {
       description:  "",
       tags: [],
       prompt:  "",
+      thumbnail: "",
     }
   }
 }
@@ -31,26 +33,26 @@ function parseMarkdown(markdown: string): {
   description: string
   tags: string
   prompt: string
+  thumbnail: string
 } {
-  // Regular expression to find markdown sections based on the provided structure
-  const sectionRegex = /^#+ (.+?)\n+([\s\S]+?)(?=\n+? |$)/gm;
+  markdown = markdown.trim()
+
+  // Improved regular expression to find markdown sections and accommodate multi-line content.
+  const sectionRegex = /^#+\s+(?<key>.+?)\n\n?(?<content>[^#]+)/gm;
 
-  let match;
   const sections: { [key: string]: string } = {};
 
-  // Iterate over each section match to populate the sections object
+  let match;
   while ((match = sectionRegex.exec(markdown))) {
-    const [, key, value] = match;
-    sections[key.toLowerCase()] = value.trim();
+    const { key, content } = match.groups as { key: string; content: string };
+    sections[key.trim().toLowerCase()] = content.trim();
   }
 
-  // Create the resulting JSON object with "description" and "prompt" keys
-  const result = {
-    title: sections['title'] || '',
-    description: sections['description'] || '',
-    tags: sections['tags'] || '',
-    prompt: sections['prompt'] || '',
+  return {
+    title: sections["title"] || "",
+    description: sections["description"] || "",
+    tags: sections["tags"] || "",
+    prompt: sections["prompt"] || "",
+    thumbnail: sections["thumbnail"] || "",
   };
-
-  return result;
 }

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

@@ -5,14 +5,22 @@ import { ParsedDatasetReadme, ParsedMetadataAndContent } from "@/types"
 
 export function parseDatasetReadme(markdown: string = ""): ParsedDatasetReadme {
   try {
+    markdown = markdown.trim()
+
     const { metadata, content } = metadataParser(markdown) as ParsedMetadataAndContent
 
-    const { description, prompt } = parseMarkdown(content)
+    // console.log("DEBUG README:", { metadata, content })
+    
+    const { model, thumbnail, voice, description, prompt, tags } = 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 : [],
+      hf_tags: Array.isArray(metadata?.tags) ? metadata.tags : [],
+      tags: tags && typeof tags === "string" ? tags.split("-").map(x => x.trim()).filter(x => x) : [], 
+      model,
+      thumbnail,
+      voice,
       description,
       prompt,
     }
@@ -20,7 +28,11 @@ export function parseDatasetReadme(markdown: string = ""): ParsedDatasetReadme {
     return {
       license: "",
       pretty_name: "",
-      tags: [], // Hugging Face tags
+      hf_tags: [], // Hugging Face tags
+      tags: [],
+      model: "",
+      thumbnail: "",
+      voice: "",
       description: "",
       prompt: "",
     }
@@ -33,28 +45,31 @@ export function parseDatasetReadme(markdown: string = ""): ParsedDatasetReadme {
  * @returns A JSON object with { "description": "...", "prompt": "..." }
  */
 function parseMarkdown(markdown: string): {
+  model: string
+  thumbnail: string
+  voice: string
   description: string
   prompt: string
-  // categories: string
+  tags: string
 } {
-  // Regular expression to find markdown sections based on the provided structure
-  const sectionRegex = /^## (.+?)\n\n([\s\S]+?)(?=\n## |$)/gm;
+  // console.log("markdown:", markdown)
+  // Improved regular expression to find markdown sections and accommodate multi-line content.
+  const sectionRegex = /^#+\s+(?<key>.+?)\n\n?(?<content>[^#]+)/gm;
 
-  let match;
   const sections: { [key: string]: string } = {};
 
-  // Iterate over each section match to populate the sections object
+  let match;
   while ((match = sectionRegex.exec(markdown))) {
-    const [, key, value] = match;
-    sections[key.toLowerCase()] = value.trim();
+    const { key, content } = match.groups as { key: string; content: string };
+    sections[key.trim().toLowerCase()] = content.trim();
   }
 
-  // Create the resulting JSON object with "description" and "prompt" keys
-  const result = {
-    description: sections['description'] || '',
-    // categories: sections['categories'] || '',
-    prompt: sections['prompt'] || '',
+  return {
+    description: sections["description"] || "",
+    model: sections["model"] || "",
+    thumbnail: sections["thumbnail"] || "",
+    voice: sections["voice"] || "",
+    prompt: sections["prompt"] || "",
+    tags: sections["tags"] || "",
   };
-
-  return result;
 }

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

@@ -33,6 +33,7 @@ export function PublicChannelsView() {
   return (
     <div className={cn(`flex flex-col`)}>
       <ChannelList
+        layout="grid"
         channels={currentChannels}
       />
     </div>

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

@@ -69,6 +69,7 @@ export function UserChannelsView() {
       <div className="flex flex-col space-y-4">
         <h2 className="text-3xl font-bold">Your custom channels:</h2>
         {currentChannels?.length ? <ChannelList
+          layout="grid"
           channels={currentChannels}
           onSelect={(channel) => {
             setCurrentChannel(channel)

src/types.ts

@@ -374,7 +374,11 @@ export type Settings = {
 export type ParsedDatasetReadme = {
   license: string
   pretty_name: string
+  model: string
+  thumbnail: string
+  voice: string
   tags: string[]
+  hf_tags: string[]
   description: string
   prompt: string
 }
@@ -393,6 +397,7 @@ export type ParsedDatasetPrompt = {
   description: string
   tags: string[]
   prompt: string
+  thumbnail: string
 }
 
 

tailwind.config.js

@@ -53,6 +53,8 @@ module.exports = {
         20: '5rem', // 80px
         21: '5.25rem', // 84px
         22: '5.5rem', // 88px
+        22: '5.5rem', // 88px
+        26: '6.5rem', // 104px
       },
       width: {
         17: '4.25rem', // 68px
@@ -61,6 +63,7 @@ module.exports = {
         20: '5rem', // 80px
         21: '5.25rem', // 84px
         22: '5.5rem', // 88px
+        26: '6.5rem', // 104px
       }
     },
   },