add thumbnail fallback

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

@@ -109,7 +109,7 @@ export function TopHeader() {
            `px-4 py-2 w-max-64`,
            `text-neutral-400 text-sm italic`
         )}>
-        All the videos are generated using AI for research purposes. Some models might produce factually incorrect or biased outputs.
+        All the videos are generated using AI, for research purposes only. Some models might produce factually incorrect or biased outputs.
         </div>
         <div className={cn()}>
           &nbsp; {/* more buttons? unused for now */}

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

@@ -7,6 +7,8 @@ import { formatDuration } from "@/lib/formatDuration"
 import { formatTimeAgo } from "@/lib/formatTimeAgo"
 import Link from "next/link"
 
+const defaultChannelThumbnail = "/huggingface-avatar.jpeg"
+
 export function VideoCard({
   video,
   className = "",
@@ -19,6 +21,8 @@ export function VideoCard({
   const ref = useRef<HTMLVideoElement>(null)
   const [duration, setDuration] = useState(0)
 
+  const [channelThumbnail, setChannelThumbnail] = useState(video.channel.thumbnail)
+
   const handlePointerEnter = () => {
     // ref.current?.load()
     ref.current?.play()
@@ -37,6 +41,16 @@ export function VideoCard({
     onSelect?.(video)
   }
 
+  const handleBadChannelThumbnail = () => {
+    try {
+      if (channelThumbnail !== defaultChannelThumbnail) {
+        setChannelThumbnail(defaultChannelThumbnail)
+      }
+    } catch (err) {
+      
+    }
+  }
+
   return (
   <Link href={`/watch?v=${video.id}`}>
     <div
@@ -92,7 +106,8 @@ export function VideoCard({
           <div className="flex flex-col">
             <div className="flex w-9 rounded-full overflow-hidden">
               <img
-                src="huggingface-avatar.jpeg"
+                src={channelThumbnail}
+                onError={handleBadChannelThumbnail}
               />
             </div>
           </div>

src/app/page.tsx

@@ -3,12 +3,81 @@ import { AppQueryProps } from "@/types"
 
 import { Main } from "./main"
 import { getVideo } from "./server/actions/ai-tube-hf/getVideo"
+import { Metadata, ResolvingMetadata } from "next"
+
+
+export async function generateMetadata(
+  { params, searchParams: { v: videoId } }: AppQueryProps,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  // read route params
+
+  const metadataBase = new URL('https://huggingface.co/spaces/jbilcke-hf/ai-tube')
+
+  if (!videoId) {
+    return {
+      title: `🍿 AI Tube`,
+      metadataBase,
+      openGraph: {
+        type: "website",
+        // url: "https://example.com",
+        title: "AI Tube",
+        description: "The first fully AI generated video platform",
+        siteName: "🍿 AI Tube",
+
+        videos: [],
+        images: [],
+      },
+    }
+  }
+
+  try {
+    const video = await getVideo({ videoId, neverThrow: true })
+
+    if (!video) {
+      throw new Error("Video not found")
+    }
+
+    return {
+      title: `${video.label} - AI Tube`,
+      metadataBase,
+      openGraph: {
+        type: "website",
+        // url: "https://example.com",
+        title: video.label || "", // put the video title here
+        description: video.description || "", // put the vide description here
+        siteName: "AI Tube",
+  
+        videos: [
+          {
+            "url": video.assetUrl
+          }
+        ],
+        // images: ['/some-specific-page-image.jpg', ...previousImages],
+      },
+    }
+  } catch (err) {
+    return {
+      title: "AI Tube - 404 Video Not Found",
+      metadataBase,
+      openGraph: {
+        type: "website",
+        // url: "https://example.com",
+        title: "AI Tube - 404 Not Found", // put the video title here
+        description: "", // put the vide description here
+        siteName: "AI Tube",
+  
+        videos: [],
+        images: [],
+      },
+    }
+  }
+}
 
 // we have routes but on Hugging Face we don't see them
 // so.. let's use the work around
 export default async function Page({ searchParams: { v: videoId } }: AppQueryProps) {
   const video = await getVideo({ videoId, neverThrow: true })
-  // console.log("Root page: videoId ----> ", video?.id)
   return (
     <Main video={video} />
   )

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

@@ -0,0 +1,131 @@
+"use server"
+
+import { Credentials, downloadFile, whoAmI } from "@/huggingface/hub/src"
+import { parseDatasetReadme } from "@/app/server/actions/utils/parseDatasetReadme"
+import { ChannelInfo } from "@/types"
+
+import { adminCredentials } from "../config"
+
+export async function getChannel(options: {
+  id: string
+  name: string
+  likes: number
+  updatedAt: Date
+  apiKey?: string
+  owner?: string
+  renewCache?: boolean
+}): Promise<ChannelInfo> {
+  // console.log("getChannels")
+  let credentials: Credentials = adminCredentials
+  let owner = options.owner
+
+  if (options.apiKey) {
+    try {
+      credentials = { accessToken: options.apiKey }
+      const { name: username } = await whoAmI({ credentials })
+      if (!username) {
+        throw new Error(`couldn't get the username`)
+      }
+      // everything is in order,
+      owner = username
+    } catch (err) {
+      console.error(err)
+      throw err
+    }
+  }
+
+
+  const prefix = "ai-tube-"
+
+  const name = options.name
+
+  const chunks = name.split("/")
+  const [datasetUser, datasetName] = chunks.length === 2
+    ? chunks
+    : [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)) {
+    throw new Error("this is not an AI Tube channel")
+  }
+
+  // ignore the video index
+  if (datasetName === "ai-tube-index") {
+    throw new Error("cannot get channel of ai-tube-index: time-space continuum broken!")
+  }
+
+  const slug = datasetName.replaceAll(prefix, "")
+  
+  // console.log(`found an AI Tube channel: "${slug}"`)
+
+  // TODO parse the README to get the proper label
+  let label = slug.replaceAll("-", " ")
+
+  let model = ""
+  let lora = ""
+  let style = ""
+  let thumbnail = ""
+  let prompt = ""
+  let description = ""
+  let voice = ""
+  let tags: string[] = []
+
+  // 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
+    thumbnail = parsedDatasetReadme.thumbnail || "thumbnail.jpg"
+    model = parsedDatasetReadme.model || ""
+    lora = parsedDatasetReadme.lora || ""
+    style = parsedDatasetReadme.style || ""
+    voice = parsedDatasetReadme.voice || ""
+
+    thumbnail =
+      thumbnail.startsWith("http")
+        ? thumbnail
+        : (thumbnail.endsWith(".jpg") || thumbnail.endsWith(".jpeg"))
+        ? `https://huggingface.co/datasets/${name}/resolve/main/${thumbnail}`
+        : ""
+
+    tags = parsedDatasetReadme.tags
+      .map(tag => tag.trim()) // clean them up
+      .filter(tag => tag) // remove empty tags
+    
+  } catch (err) {
+    // console.log("failed to read the readme:", err)
+  }
+
+  const channel: ChannelInfo = {
+    id: options.id,
+    datasetUser,
+    datasetName,
+    slug,
+    label,
+    description,
+    model,
+    lora,
+    style,
+    voice,
+    thumbnail,
+    prompt,
+    likes: options.likes,
+    tags,
+    updatedAt: options.updatedAt.toISOString()
+  }
+
+  return channel
+}

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

@@ -1,10 +1,10 @@
 "use server"
 
-import { Credentials, downloadFile, listDatasets, whoAmI } from "@/huggingface/hub/src"
-import { parseDatasetReadme } from "@/app/server/actions/utils/parseDatasetReadme"
+import { Credentials, listDatasets, whoAmI } from "@/huggingface/hub/src"
 import { ChannelInfo } from "@/types"
 
 import { adminCredentials } from "../config"
+import { getChannel } from "./getChannel"
 
 export async function getChannels(options: {
   apiKey?: string
@@ -50,7 +50,7 @@ export async function getChannels(options: {
     // TODO: need to handle better cases where the username is missing
 
     const chunks = name.split("/")
-    const [datasetUser, datasetName] = chunks.length === 2
+    const [_datasetUser, datasetName] = chunks.length === 2
       ? chunks
       : [name, name]
 
@@ -66,67 +66,10 @@ export async function getChannels(options: {
       continue
     }
 
-    const slug = datasetName.replaceAll(prefix, "")
-    
-    // console.log(`found an AI Tube channel: "${slug}"`)
-
-    // TODO parse the README to get the proper label
-    let label = slug.replaceAll("-", " ")
-
-    let thumbnail = ""
-    let prompt = ""
-    let description = ""
-    let voice = ""
-    let tags: string[] = []
-
-    // 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
-      thumbnail = parsedDatasetReadme.thumbnail || "thumbnail.jpg"
-
-      thumbnail =
-        thumbnail.startsWith("http")
-          ? thumbnail
-          : (thumbnail.endsWith(".jpg") || thumbnail.endsWith(".jpeg"))
-          ? `https://huggingface.co/datasets/${name}/resolve/main/${thumbnail}`
-          : ""
-
-      voice = parsedDatasetReadme.voice
-
-      tags = parsedDatasetReadme.tags
-        .map(tag => tag.trim()) // clean them up
-        .filter(tag => tag) // remove empty tags
-      
-    } catch (err) {
-      // console.log("failed to read the readme:", err)
-    }
-
-    const channel: ChannelInfo = {
-      id,
-      datasetUser,
-      datasetName,
-      slug,
-      label,
-      description,
-      thumbnail,
-      prompt,
-      likes,
-      tags,
-      updatedAt: updatedAt.toISOString()
-    }
+    const channel = await getChannel({
+      ...options,
+      id, name, likes, updatedAt
+    })
 
     channels.push(channel)
   }

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

@@ -11,7 +11,7 @@ export function parseDatasetReadme(markdown: string = ""): ParsedDatasetReadme {
 
     // console.log("DEBUG README:", { metadata, content })
     
-    const { model, thumbnail, voice, description, prompt, tags } = parseMarkdown(content)
+    const { model, lora, style, thumbnail, voice, description, prompt, tags } = parseMarkdown(content)
 
     return {
       license: typeof metadata?.license === "string" ? metadata.license : "",
@@ -19,6 +19,8 @@ export function parseDatasetReadme(markdown: string = ""): ParsedDatasetReadme {
       hf_tags: Array.isArray(metadata?.tags) ? metadata.tags : [],
       tags: tags && typeof tags === "string" ? tags.split("-").map(x => x.trim()).filter(x => x) : [], 
       model,
+      lora,
+      style,
       thumbnail,
       voice,
       description,
@@ -31,6 +33,8 @@ export function parseDatasetReadme(markdown: string = ""): ParsedDatasetReadme {
       hf_tags: [], // Hugging Face tags
       tags: [],
       model: "",
+      lora: "",
+      style: "",
       thumbnail: "",
       voice: "",
       description: "",
@@ -46,6 +50,8 @@ export function parseDatasetReadme(markdown: string = ""): ParsedDatasetReadme {
  */
 function parseMarkdown(markdown: string): {
   model: string
+  lora: string
+  style: string
   thumbnail: string
   voice: string
   description: string
@@ -67,6 +73,8 @@ function parseMarkdown(markdown: string): {
   return {
     description: sections["description"] || "",
     model: sections["model"] || "",
+    lora: sections["lora"] || "",
+    style: sections["style"] || "",
     thumbnail: sections["thumbnail"] || "",
     voice: sections["voice"] || "",
     prompt: sections["prompt"] || "",

src/app/watch/page.tsx

@@ -1,6 +1,4 @@
-import { useEffect, useState, useTransition } from "react"
-import Head from "next/head"
-import Script from "next/script"
+
 import { Metadata, ResolvingMetadata } from "next"
 
 import { AppQueryProps } from "@/types"
@@ -27,7 +25,7 @@ export async function generateMetadata(
 
     return {
       title: `${video.label} - AI Tube`,
-      metadataBase: new URL('https://huggingface.co/spaces/jbilcke-hf/ai-tube'),
+      metadataBase,
       openGraph: {
         type: "website",
         // url: "https://example.com",

src/types.ts

@@ -211,6 +211,14 @@ export type ChannelInfo = {
 
   thumbnail: string
 
+  model: string
+
+  lora: string
+  
+  style: string
+
+  voice: string
+
   /**
    * The system prompt
    */
@@ -376,6 +384,8 @@ export type ParsedDatasetReadme = {
   license: string
   pretty_name: string
   model: string
+  lora: string
+  style: string
   thumbnail: string
   voice: string
   tags: string[]