playing with stable video diffusion

src/app/interface/recommended-videos/index.tsx

@@ -0,0 +1,38 @@
+
+import { useEffect, useTransition } from "react"
+
+import { useStore } from "@/app/state/useStore"
+import { cn } from "@/lib/utils"
+import { VideoInfo } from "@/types"
+
+import { VideoList } from "../video-list"
+import { getVideos } from "@/app/server/actions/ai-tube-hf/getVideos"
+
+export function RecommendedVideos({
+  video,
+}: {
+  // the video to use for the recommendations
+  video: VideoInfo
+}) {
+  const [_isPending, startTransition] = useTransition()
+  const setRecommendedVideos = useStore(s => s.setRecommendedVideos)
+  const recommendedVideos = useStore(s => s.recommendedVideos)
+
+  useEffect(() => {
+    startTransition(async () => {
+      setRecommendedVideos(await getVideos({
+        sortBy: "random",
+        niceToHaveTags: video.tags,
+        ignoreVideoIds: [video.id],
+        maxVideos: 16
+      }))
+    })
+  }, video.tags)
+
+  return (
+    <VideoList
+      videos={recommendedVideos}
+      layout="vertical"
+    />
+  )
+}

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

@@ -12,10 +12,12 @@ const defaultChannelThumbnail = "/huggingface-avatar.jpeg"
 export function VideoCard({
   video,
   className = "",
+  layout = "normal",
   onSelect,
 }: {
   video: VideoInfo
   className?: string
+  layout?: "normal" | "compact"
   onSelect?: (video: VideoInfo) => void
  }) {
   const ref = useRef<HTMLVideoElement>(null)
@@ -23,6 +25,8 @@ export function VideoCard({
 
   const [channelThumbnail, setChannelThumbnail] = useState(video.channel.thumbnail)
 
+  const isCompact = layout === "compact"
+
   const handlePointerEnter = () => {
     // ref.current?.load()
     ref.current?.play()
@@ -55,10 +59,9 @@ export function VideoCard({
   <Link href={`/watch?v=${video.id}`}>
     <div
       className={cn(
-        `w-full`,
-        `flex flex-col`,
+        `w-full flex`,
+        isCompact ? `flex-row h-24 py-1 space-x-2` : `flex-col space-y-3`,
         `bg-line-900`,
-        `space-y-3`,
         `cursor-pointer`,
         className,
       )}
@@ -66,16 +69,20 @@ export function VideoCard({
       onPointerLeave={handlePointerLeave}
       // onClick={handleClick}
       >
+        {/* VIDEO BLOCK */}
         <div
           className={cn(
-            `flex flex-col aspect-video items-center justify-center`,
+            `flex flex-col items-center justify-center`,
             `rounded-xl overflow-hidden`,
+            isCompact ? `w-42 h-[94px]` : `aspect-video`
           )}
         >
           <video
             ref={ref}
             src={video.assetUrl}
-            className="w-full"
+            className={cn(
+              `w-full`
+              )}
             onLoadedMetadata={handleLoad}
             muted
           />
@@ -100,29 +107,41 @@ export function VideoCard({
               </div>
           </div>
         </div>
+
+        {/* TEXT BLOCK */}
         <div className={cn(
-          `flex flex-row space-x-4`,
+          `flex flex-row`,
+          isCompact ? `w-51` : `space-x-4`,
         )}>
-          <div className="flex flex-col">
+          {isCompact ? null : <div className="flex flex-col">
             <div className="flex w-9 rounded-full overflow-hidden">
               <img
                 src={channelThumbnail}
                 onError={handleBadChannelThumbnail}
               />
             </div>
-          </div>
-          <div className="flex flex-col flex-grow">
-            <h3 className="text-zinc-100 text-base font-medium mb-0 line-clamp-2">{video.label}</h3>
+          </div>}
+          <div className={cn(
+            `flex flex-col`,
+            isCompact ?  `` : `flex-grow`
+          )}>
+            <h3 className={cn(
+              `text-zinc-100 font-medium mb-0 line-clamp-2`,
+              isCompact ? `text-sm mb-1.5` : `text-base`
+            )}>{video.label}</h3>
             <div className={cn(
               `flex flex-row items-center`,
-              `text-neutral-400 text-sm font-normal space-x-1`,
+              `text-neutral-400 font-normal space-x-1`,
+              isCompact ? `text-xs` : `text-sm`
               )}>
               <div>{video.channel.label}</div>
               <div><RiCheckboxCircleFill className="" /></div>
             </div>
+            
             <div className={cn(
               `flex flex-row`,
-              `text-neutral-400 text-sm font-normal`,
+              `text-neutral-400 font-normal`,
+              isCompact ? `text-xs` : `text-sm`,
               `space-x-1`
             )}>
             <div>0 views</div>

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

@@ -5,7 +5,7 @@ import { VideoCard } from "../video-card"
 
 export function VideoList({
   videos,
-  layout = "flex",
+  layout = "grid",
   className = "",
   onSelect,
 }: {
@@ -18,7 +18,7 @@ export function VideoList({
    * - based on the device type (eg. a smart TV)
    * - a design choice for a particular page
    */
-  layout?: "grid" | "flex"
+  layout?: "grid" | "horizontal" | "vertical"
 
   className?: string
 
@@ -30,6 +30,8 @@ export function VideoList({
       className={cn(
         layout === "grid"
           ? `grid grid-cols-2 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4`
+        : layout === "vertical"
+          ? `grid grid-cols-1 gap-2`
           : `flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4`,
         className,
       )}
@@ -39,6 +41,7 @@ export function VideoList({
         key={video.id}
         video={video}
         className="w-full"
+        layout={layout === "vertical" ? "compact" : "normal"}
         onSelect={onSelect}
       />
     ))}

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

@@ -36,6 +36,11 @@ export async function getChannelVideos({
       description: v.description,
       prompt: v.prompt,
       thumbnailUrl: v.thumbnailUrl,
+      model: v.model,
+      lora: v.lora,
+      style: v.style,
+      voice: v.voice,
+      music: v.music,
       assetUrl: "",
       numberOfViews: 0,
       numberOfLikes: 0,

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

@@ -6,6 +6,7 @@ import { listFiles } from "@/huggingface/hub/src"
 import { parsePromptFileName } from "../utils/parsePromptFileName"
 import { downloadFileAsText } from "./downloadFileAsText"
 import { parseDatasetPrompt } from "../utils/parseDatasetPrompt"
+import { parseVideoModelName } from "../utils/parseVideoModelName"
 
 /**
  * Return all the videos requests created by a user on their channel
@@ -71,7 +72,7 @@ export async function getVideoRequestsFromChannel({
           continue
         }
 
-        const { title, description, tags, prompt, thumbnail } = parseDatasetPrompt(rawMarkdown)
+        const { title, description, tags, prompt, thumbnail, model, lora, style, music, voice } = parseDatasetPrompt(rawMarkdown, channel)
 
         if (!title || !description || !prompt) {
           // console.log("dataset prompt is incomplete or unparseable")
@@ -85,15 +86,20 @@ export async function getVideoRequestsFromChannel({
             ? `https://huggingface.co/${repo}/resolve/main/${thumbnail}`
             : ""
 
+        
         const video: VideoRequest = {
           id,
           label: title,
           description,
           prompt,
           thumbnailUrl,
-    
+          model,
+          lora,
+          style,
+          voice,
+          music,
           updatedAt: file.lastCommit?.date || new Date().toISOString(),
-          tags, // read them from the file?
+          tags: Array.isArray(tags) && tags.length ? tags : channel.tags,
           channel,
         }
 

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

@@ -8,12 +8,25 @@ const HARD_LIMIT = 100
 
 // this just return ALL videos on the platform
 export async function getVideos({
-  tag = "",
+  mandatoryTags = [],
+  niceToHaveTags = [],
   sortBy = "date",
+  ignoreVideoIds = [],
   maxVideos = HARD_LIMIT,
 }: {
-  tag?: string
-  sortBy?: "random" | "date",
+  // the videos MUST include those tags
+  mandatoryTags?: string[]
+
+  // tags that we should try to use to filter the videos,
+  // but it isn't a hard limit - TODO: use some semantic search here?
+  niceToHaveTags?: string[]
+
+  sortBy?: "random" | "date"
+
+  // ignore some ids - this is used to not show the same videos again
+  // eg. videos already watched, or disliked etc
+  ignoreVideoIds?: string[]
+
   maxVideos?: number
 }): Promise<VideoInfo[]> {
   // the index is gonna grow more and more,
@@ -24,23 +37,58 @@ export async function getVideos({
   })
 
 
-  let videos = Object.values(published)
+  let allPotentiallyValidVideos = Object.values(published)
   
-  // filter videos by tag, or else we return everything
-  const requestedTag = tag.toLowerCase().trim()
-  if (requestedTag) {
-    videos = videos
-      .filter(v =>
-        v.tags.map(t => t.toLowerCase().trim()).includes(requestedTag)
-      )
+  if (ignoreVideoIds.length) {
+    allPotentiallyValidVideos = allPotentiallyValidVideos.filter(video => !ignoreVideoIds.includes(video.id))
   }
 
   if (sortBy === "date") {
-    videos.sort(((a, b) => a.updatedAt.localeCompare(b.updatedAt)))
+    allPotentiallyValidVideos.sort(((a, b) => b.updatedAt.localeCompare(a.updatedAt)))
   } else {
-    videos.sort(() => Math.random() - 0.5)
+    allPotentiallyValidVideos.sort(() => Math.random() - 0.5)
   }
 
-  // we enforce a max limit of HARD_LIMIT (eg. 100)
-  return videos.slice(0, Math.min(HARD_LIMIT, maxVideos))
+  let videosMatchingFilters: VideoInfo[] = allPotentiallyValidVideos
+
+  // filter videos by mandatory tags, or else we return everything
+  const mandatoryTagsList = mandatoryTags.map(tag => tag.toLowerCase().trim()).filter(tag => tag)
+  if (mandatoryTagsList.length) {
+    videosMatchingFilters = allPotentiallyValidVideos.filter(video => 
+      video.tags.some(tag =>
+        mandatoryTagsList.includes(tag.toLowerCase().trim())
+      )
+    )
+  }
+
+  // filter videos by mandatory tags, or else we return everything
+  const niceToHaveTagsList = niceToHaveTags.map(tag => tag.toLowerCase().trim()).filter(tag => tag)
+  if (niceToHaveTagsList.length) {
+    videosMatchingFilters = videosMatchingFilters.filter(video => 
+      video.tags.some(tag =>
+        mandatoryTagsList.includes(tag.toLowerCase().trim())
+      )
+    )
+
+    // if we don't have enough videos
+    if (videosMatchingFilters.length < maxVideos) {
+      // count how many we need
+      const nbMissingVideos = maxVideos - videosMatchingFilters.length
+      
+      // then we try to fill the gap with valid videos from other topics
+      const videosToUseAsFiller = allPotentiallyValidVideos
+        .filter(video => !videosMatchingFilters.some(v => v.id === video.id)) // of course we don't reuse the same
+        // .sort(() => Math.random() - 0.5) // randomize them
+        .slice(0, nbMissingVideos) // and only pick those we need
+
+      videosMatchingFilters = [
+        ...videosMatchingFilters,
+        ...videosToUseAsFiller,
+      ]
+    }
+  }
+  
+
+  // we enforce the max limit of HARD_LIMIT (eg. 100)
+  return videosMatchingFilters.slice(0, Math.min(HARD_LIMIT, maxVideos))
 }

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

@@ -2,7 +2,7 @@
 
 import { Credentials, downloadFile, whoAmI } from "@/huggingface/hub/src"
 import { parseDatasetReadme } from "@/app/server/actions/utils/parseDatasetReadme"
-import { ChannelInfo } from "@/types"
+import { ChannelInfo, VideoGenerationModel } from "@/types"
 
 import { adminCredentials } from "../config"
 
@@ -62,13 +62,14 @@ export async function parseChannel(options: {
   // TODO parse the README to get the proper label
   let label = slug.replaceAll("-", " ")
 
-  let model = ""
+  let model: VideoGenerationModel = "HotshotXL"
   let lora = ""
   let style = ""
   let thumbnail = ""
   let prompt = ""
   let description = ""
   let voice = ""
+  let music = ""
   let tags: string[] = []
 
   // console.log(`going to read datasets/${name}`)
@@ -88,10 +89,11 @@ export async function parseChannel(options: {
     label = parsedDatasetReadme.pretty_name
     description = parsedDatasetReadme.description
     thumbnail = parsedDatasetReadme.thumbnail || "thumbnail.jpg"
-    model = parsedDatasetReadme.model || ""
+    model = parsedDatasetReadme.model
     lora = parsedDatasetReadme.lora || ""
     style = parsedDatasetReadme.style || ""
     voice = parsedDatasetReadme.voice || ""
+    music = parsedDatasetReadme.music || ""
 
     thumbnail =
       thumbnail.startsWith("http")
@@ -119,6 +121,7 @@ export async function parseChannel(options: {
     lora,
     style,
     voice,
+    music,
     thumbnail,
     prompt,
     likes: options.likes,

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

@@ -3,7 +3,7 @@
 import { Blob } from "buffer"
 
 import { Credentials, uploadFile, whoAmI } from "@/huggingface/hub/src"
-import { ChannelInfo, VideoInfo, VideoRequest } from "@/types"
+import { ChannelInfo, VideoGenerationModel, VideoInfo, VideoRequest } from "@/types"
 import { formatPromptFileName } from "../utils/formatPromptFileName"
 
 /**
@@ -16,6 +16,11 @@ export async function uploadVideoRequestToDataset({
   title,
   description,
   prompt,
+  model,
+  lora,
+  style,
+  voice,
+  music,
   tags,
 }: {
   channel: ChannelInfo
@@ -23,6 +28,11 @@ export async function uploadVideoRequestToDataset({
   title: string
   description: string
   prompt: string
+  model: VideoGenerationModel
+  lora: string
+  style: string
+  voice: string
+  music: string
   tags: string[]
 }): Promise<{
   videoRequest: VideoRequest
@@ -44,11 +54,33 @@ export async function uploadVideoRequestToDataset({
   // Convert string to a Buffer
   const blob = new Blob([`
 # Title
+
 ${title}
 
 # Description
+
 ${description}
 
+# Model
+
+${model}
+
+# LoRA
+
+${lora}
+
+# Style
+
+${style}
+
+# Voice
+
+${voice}
+
+# Music
+
+${music}
+
 # Tags
 
 ${tags.map(tag => `- ${tag}`).join("\n")}
@@ -75,6 +107,11 @@ ${prompt}
     label: title,
     description,
     prompt,
+    model,
+    style,
+    lora,
+    voice,
+    music,
     thumbnailUrl: channel.thumbnail,
     updatedAt: new Date().toISOString(),
     tags,
@@ -87,6 +124,11 @@ ${prompt}
     label: title,
     description,
     prompt,
+    model,
+    style,
+    lora,
+    voice,
+    music,
     thumbnailUrl: channel.thumbnail, // will be generated in async
     assetUrl: "", // will be generated in async
     numberOfViews: 0,

src/app/server/actions/submitVideoRequest.ts

@@ -1,9 +1,8 @@
 "use server"
 
-import { ChannelInfo, VideoInfo } from "@/types"
+import { ChannelInfo, VideoGenerationModel, VideoInfo } from "@/types"
 
 import { uploadVideoRequestToDataset } from "./ai-tube-hf/uploadVideoRequestToDataset"
-import { updateQueue } from "./ai-tube-robot/updateQueue"
 
 export async function submitVideoRequest({
   channel,
@@ -11,6 +10,11 @@ export async function submitVideoRequest({
   title,
   description,
   prompt,
+  model,
+  lora,
+  style,
+  voice,
+  music,
   tags,
 }: {
   channel: ChannelInfo
@@ -18,6 +22,11 @@ export async function submitVideoRequest({
   title: string
   description: string
   prompt: string
+  model: VideoGenerationModel
+  lora: string
+  style: string
+  voice: string
+  music: string
   tags: string[]
 }): Promise<VideoInfo> {
   if (!apiKey) {
@@ -30,6 +39,11 @@ export async function submitVideoRequest({
     title,
     description,
     prompt,
+    model,
+    lora,
+    style,
+    voice,
+    music,
     tags
   })
 

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

@@ -1,24 +1,37 @@
 
-import { ParsedDatasetPrompt } from "@/types"
+import { ChannelInfo, ParsedDatasetPrompt } from "@/types"
+import { parseVideoModelName } from "./parseVideoModelName"
 
-export function parseDatasetPrompt(markdown: string = ""): ParsedDatasetPrompt {
+export function parseDatasetPrompt(markdown: string, channel: ChannelInfo): ParsedDatasetPrompt {
   try {
-    const { title, description, tags, prompt, thumbnail } = parseMarkdown(markdown)
+    const { title, description, tags, prompt, model, lora, style, thumbnail, voice, music } = 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) : [], 
+      tags:
+        tags && typeof tags === "string" ? tags.split("-").map(x => x.trim()).filter(x => x)
+        : (channel.tags || []),
       prompt: typeof prompt === "string" && prompt ? prompt : "",
+      model: parseVideoModelName(model, channel.model),
+      lora: typeof lora === "string" && lora ? lora : (channel.lora || ""),
+      style: typeof style === "string" && style ? style : (channel.style || ""),
       thumbnail: typeof thumbnail === "string" && thumbnail ? thumbnail : "",
+      voice: typeof voice === "string" && voice ? voice : (channel.voice || ""),
+      music: typeof music === "string" && music ? music : (channel.music || ""),
     }
   } catch (err) {
     return {
       title: "",
       description:  "",
-      tags: [],
-      prompt:  "",
+      tags: channel.tags || [],
+      prompt: "",
+      model: channel.model || "HotshotXL",
+      lora: channel.lora || "",
+      style: channel.style || "",
       thumbnail: "",
+      voice: channel.voice || "",
+      music: channel.music || "",
     }
   }
 }
@@ -33,9 +46,14 @@ function parseMarkdown(markdown: string): {
   description: string
   tags: string
   prompt: string
+  model: string
+  lora: string
+  style: string
   thumbnail: string
+  voice: string
+  music: string
 } {
-  markdown = markdown.trim()
+  markdown = `${markdown || ""}`.trim()
 
   // Improved regular expression to find markdown sections and accommodate multi-line content.
   const sectionRegex = /^#+\s+(?<key>.+?)\n\n?(?<content>[^#]+)/gm;
@@ -53,6 +71,11 @@ function parseMarkdown(markdown: string): {
     description: sections["description"] || "",
     tags: sections["tags"] || "",
     prompt: sections["prompt"] || "",
+    model: sections["model"] || "",
+    lora: sections["lora"] || "",
+    style: sections["style"] || "",
     thumbnail: sections["thumbnail"] || "",
+    voice: sections["voice"] || "",
+    music: sections["music"] || "",
   };
 }

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

@@ -2,6 +2,7 @@
 import metadataParser from "markdown-yaml-metadata-parser"
 
 import { ParsedDatasetReadme, ParsedMetadataAndContent } from "@/types"
+import { parseVideoModelName } from "./parseVideoModelName"
 
 export function parseDatasetReadme(markdown: string = ""): ParsedDatasetReadme {
   try {
@@ -11,18 +12,19 @@ export function parseDatasetReadme(markdown: string = ""): ParsedDatasetReadme {
 
     // console.log("DEBUG README:", { metadata, content })
     
-    const { model, lora, style, thumbnail, voice, description, prompt, tags } = parseMarkdown(content)
+    const { model, lora, style, thumbnail, voice, music, description, prompt, tags } = parseMarkdown(content)
 
     return {
       license: typeof metadata?.license === "string" ? metadata.license : "",
       pretty_name: typeof metadata?.pretty_name === "string" ? metadata.pretty_name : "",
       hf_tags: Array.isArray(metadata?.tags) ? metadata.tags : [],
       tags: tags && typeof tags === "string" ? tags.split("-").map(x => x.trim()).filter(x => x) : [], 
-      model,
+      model: parseVideoModelName(model, "HotshotXL"),
       lora,
-      style,
+      style: style && typeof style === "string" ? style.split("- ").map(x => x.trim()).filter(x => x).join(", ") : [].join(", "),
       thumbnail,
       voice,
+      music,
       description,
       prompt,
     }
@@ -32,11 +34,12 @@ export function parseDatasetReadme(markdown: string = ""): ParsedDatasetReadme {
       pretty_name: "",
       hf_tags: [], // Hugging Face tags
       tags: [],
-      model: "",
+      model: "HotshotXL",
       lora: "",
       style: "",
       thumbnail: "",
       voice: "",
+      music: "",
       description: "",
       prompt: "",
     }
@@ -54,6 +57,7 @@ function parseMarkdown(markdown: string): {
   style: string
   thumbnail: string
   voice: string
+  music: string
   description: string
   prompt: string
   tags: string
@@ -77,6 +81,7 @@ function parseMarkdown(markdown: string): {
     style: sections["style"] || "",
     thumbnail: sections["thumbnail"] || "",
     voice: sections["voice"] || "",
+    music: sections["music"] || "",
     prompt: sections["prompt"] || "",
     tags: sections["tags"] || "",
   };

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

@@ -0,0 +1,24 @@
+import { VideoGenerationModel } from "@/types"
+
+export function parseVideoModelName(text: any, defaultToUse: VideoGenerationModel): VideoGenerationModel {
+  const rawModelString = `${text || ""}`.trim().toLowerCase()
+
+  let model: VideoGenerationModel = "HotshotXL"
+
+  if (
+    rawModelString === "stable video diffusion" || 
+    rawModelString === "stablevideodiffusion" || 
+    rawModelString === "svd"
+  ) {
+    model = "SVD"
+  }
+
+  if (
+    rawModelString === "la vie" || 
+    rawModelString === "lavie"
+  ) {
+    model = "LaVie"
+  }
+
+  return defaultToUse
+}

src/app/state/useStore.ts

@@ -55,6 +55,9 @@ export const useStore = create<{
   userVideos: VideoInfo[]
   setUserVideos: (userVideos: VideoInfo[]) => void
 
+  recommendedVideos: VideoInfo[]
+  setRecommendedVideos: (recommendedVideos: VideoInfo[]) => void
+
   // currentPrompts: VideoInfo[]
   // setCurrentPrompts: (currentPrompts: VideoInfo[]) => void
 }>((set, get) => ({
@@ -157,4 +160,11 @@ export const useStore = create<{
       userVideos: Array.isArray(userVideos) ? userVideos : [] 
     })
   },
+
+  recommendedVideos: [],
+  setRecommendedVideos: (recommendedVideos: VideoInfo[]) => {
+    set({
+      recommendedVideos: Array.isArray(recommendedVideos) ? recommendedVideos : [] 
+    })
+  },
 }))

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

@@ -21,7 +21,7 @@ export function HomeView() {
     startTransition(async () => {
       const videos = await getVideos({
         sortBy: "date",
-        tag: currentTag,
+        mandatoryTags: currentTag ? [currentTag] : [],
         maxVideos: 25
       })
 
@@ -40,7 +40,6 @@ export function HomeView() {
     )}>
       <VideoList
         videos={publicVideos}
-        layout="grid"
         onSelect={handleSelect}
       />
     </div>

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

@@ -35,7 +35,6 @@ export function PublicChannelView() {
       `flex flex-col`
     )}>
       <VideoList
-        layout="grid"
         videos={publicVideos}
       />
     </div>

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

@@ -12,6 +12,7 @@ import { cn } from "@/lib/utils"
 import { VideoPlayer } from "@/app/interface/video-player"
 import { VideoInfo } from "@/types"
 import { ActionButton } from "@/app/interface/action-button"
+import { RecommendedVideos } from "@/app/interface/recommended-videos"
 
 
 export function PublicVideoView() {
@@ -65,10 +66,14 @@ export function PublicVideoView() {
 
         {/** VIDEO TITLE - HORIZONTAL */}
         <div className={cn(
+          `flex flew-row space-x-1`,
           `text-xl text-zinc-100 font-medium mb-0 line-clamp-2`,
           `mb-2`
         )}>
-          {video.label}
+          <div>{video.label}</div>
+          <div className={cn(``)}>
+            {video.model || "HotshotXL"}
+          </div>
         </div>
         
         {/** VIDEO TOOLBAR - HORIZONTAL */}
@@ -181,11 +186,11 @@ export function PublicVideoView() {
         </div>
       </div>
       <div className={cn(
-        `sm:w-56 md:w-96`,
+        `sm:w-56 md:w-[450px]`,
         `hidden sm:flex flex-col`,
-        `px-4`
+        `pl-5 pr-8`,
       )}>
-        {/*[ TO BE CONTINUED ]*/}
+       <RecommendedVideos video={video} />
       </div>
     </div>
   )

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

@@ -4,7 +4,7 @@ import { useEffect, useState, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
-import { VideoInfo } from "@/types"
+import { VideoGenerationModel, VideoInfo } from "@/types"
 
 import { useLocalStorage } from "usehooks-ts"
 import { localStorageKeys } from "@/app/state/localStorageKeys"
@@ -15,6 +15,8 @@ import { Button } from "@/components/ui/button"
 import { submitVideoRequest } from "@/app/server/actions/submitVideoRequest"
 import { PendingVideoList } from "@/app/interface/pending-video-list"
 import { getChannelVideos } from "@/app/server/actions/ai-tube-hf/getChannelVideos"
+import { parseVideoModelName } from "@/app/server/actions/utils/parseVideoModelName"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 
 export function UserChannelView() {
   const [_isPending, startTransition] = useTransition()
@@ -22,16 +24,27 @@ export function UserChannelView() {
     localStorageKeys.huggingfaceApiKey,
     defaultSettings.huggingfaceApiKey
   )
+
+  const defaultVideoModel = "SVD"
+  const defaultVoice = "Julian"
+  
+
   const [titleDraft, setTitleDraft] = useState("")
   const [descriptionDraft, setDescriptionDraft] = useState("")
   const [tagsDraft, setTagsDraft] = useState("")
   const [promptDraft, setPromptDraft] = useState("")
-  
+  const [modelDraft, setModelDraft] = useState<VideoGenerationModel>(defaultVideoModel)
+  const [loraDraft, setLoraDraft] = useState("")
+  const [styleDraft, setStyleDraft] = useState("")
+  const [voiceDraft, setVoiceDraft] = useState(defaultVoice)
+  const [musicDraft, setMusicDraft] = useState("")
+
   // we do not include the tags in the list of required fields
   const missingFields = !titleDraft || !descriptionDraft || !promptDraft
 
   const [isSubmitting, setIsSubmitting] = useState(false)
 
+
   const userChannel = useStore(s => s.userChannel)
   const userChannels = useStore(s => s.userChannels)
   const userVideos = useStore(s => s.userVideos)
@@ -78,6 +91,11 @@ export function UserChannelView() {
           title: titleDraft,
           description: descriptionDraft,
           prompt: promptDraft,
+          model: modelDraft,
+          lora: loraDraft,
+          style: styleDraft,
+          voice: voiceDraft,
+          music: musicDraft,
           tags: tagsDraft.trim().split(",").map(x => x.trim()).filter(x => x),
         })
 
@@ -88,6 +106,12 @@ export function UserChannelView() {
         setDescriptionDraft("")
         setTagsDraft("")
         setTitleDraft("")
+        setModelDraft(defaultVideoModel)
+        setVoiceDraft(defaultVoice)
+        setMusicDraft("")
+        setLoraDraft("")
+        setStyleDraft("")
+
         // also renew the cache on Next's side
         /*
         await getChannelVideos({
@@ -174,6 +198,26 @@ export function UserChannelView() {
           </div>
         </div>
 
+        <div className="flex flex-row space-x-2 items-start">
+          <label className="flex w-24 pt-1">Video model:</label>
+          <div className="flex flex-col space-y-2 flex-grow">
+            <Select
+              onValueChange={(value: string) => {
+                setModelDraft(parseVideoModelName(value, defaultVideoModel))
+              }}
+              defaultValue={defaultVideoModel}>
+              <SelectTrigger className="">
+                <SelectValue placeholder="Video model" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="SVD">SVD</SelectItem>
+                <SelectItem value="HotshotXL">HotshotXL</SelectItem>
+                <SelectItem value="LaVie">LaVie</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        
         <div className="flex flex-row space-x-2 items-start">
           <label className="flex w-24 pt-1">Tags (optional):</label>
           <div className="flex flex-col space-y-2 flex-grow">

src/types.ts

@@ -211,7 +211,7 @@ export type ChannelInfo = {
 
   thumbnail: string
 
-  model: string
+  model: VideoGenerationModel
 
   lora: string
   
@@ -219,6 +219,8 @@ export type ChannelInfo = {
 
   voice: string
 
+  music: string
+
   /**
    * The system prompt
    */
@@ -277,6 +279,31 @@ export type VideoRequest = {
    */
   tags: string[]
 
+  /**
+   * Model name
+   */
+  model: VideoGenerationModel
+
+  /**
+   * LoRA name
+   */
+  lora: string
+
+  /**
+   * style name
+   */
+  style: string
+
+  /**
+   * Music prompt
+   */
+  music: string
+
+  /**
+   * Voice prompt
+   */
+  voice: string
+
   /**
    * ID of the channel
    */
@@ -344,12 +371,42 @@ export type VideoInfo = {
    */
   tags: string[]
 
+  /**
+   * Model name
+   */
+  model: VideoGenerationModel
+
+  /**
+   * LoRA name
+   */
+  lora: string
+
+  /**
+   * style name
+   */
+  style: string
+
+  /**
+   * Music prompt
+   */
+  music: string
+
+  /**
+   * Voice prompt
+   */
+  voice: string
+
   /**
    * The channel
    */
   channel: ChannelInfo
 }
 
+export type VideoGenerationModel =
+  | "HotshotXL"
+  | "SVD"
+  | "LaVie"
+
 export type InterfaceDisplayMode =
   | "desktop"
   | "tv"
@@ -383,11 +440,12 @@ export type Settings = {
 export type ParsedDatasetReadme = {
   license: string
   pretty_name: string
-  model: string
+  model: VideoGenerationModel
   lora: string
   style: string
   thumbnail: string
   voice: string
+  music: string
   tags: string[]
   hf_tags: string[]
   description: string
@@ -406,12 +464,16 @@ export type ParsedMetadataAndContent = {
 export type ParsedDatasetPrompt = {
   title: string
   description: string
-  tags: string[]
   prompt: string
+  tags: string[]
+  model: VideoGenerationModel
+  lora: string
+  style: string
   thumbnail: string
+  voice: string
+  music: string
 }
 
-
 export type UpdateQueueRequest = {
   channel?: ChannelInfo
   apiKey: string

tailwind.config.js

@@ -64,6 +64,9 @@ module.exports = {
         21: '5.25rem', // 84px
         22: '5.5rem', // 88px
         26: '6.5rem', // 104px
+        42: '10.5rem', // 168px
+        50: '12.5rem', // 200px
+        51: '12.75rem', // 204px
       }
     },
   },