fix

.env

@@ -1,3 +1,3 @@
 NEXT_PUBLIC_BASE_URL=https://jbilcke-hf-videochain-ui.hf.space
-NEXT_PUBLIC_DOWNLOAD_URL=https://jbilcke-hf-videochain-api.hf.space/download
+NEXT_PUBLIC_DOWNLOAD_URL=https://jbilcke-hf-videochain-api.hf.space
 VC_VIDEOCHAIN_API_URL=https://jbilcke-hf-videochain-api.hf.space

src/app/studio/[ownerId]/main.tsx

@@ -12,13 +12,13 @@ export default function Main({ videos }: { videos: Video[] }) {
   const [selectedVideo, selectVideo] = useState<Video>()
 
   return (
-    <div className="flex flex-col md:flex-row">
-      <div className="h-full flex flex-col space-y-4 w-full md:w-[800px] px-4 py-8">
+    <div className="flex flex-col md:flex-row w-full">
+      <div className="h-full flex flex-col space-y-4 w-full md:w-1/2 px-4 py-8">
         <VideoForm />
         <VideosQueue videos={videos} onSelectVideo={selectVideo} />
         <RefreshStudio />
       </div>
-      <div className="flex flex-col w-auto">
+      <div className="flex flex-col w-1/2">
         <VideoPlayer video={selectedVideo} />
       </div>
     </div>

src/components/business/video-form.tsx

@@ -17,27 +17,24 @@ export const VideoForm = () => {
     <form
       action={handleFormSubmit}
     >
-      <div className="flex flex-col md:hidden w-full text-center">
-        <h2 className="text-4xl font-thin tracking-tight">VideoChain UI</h2>
-        <p className="text-md font-thin">
-          Powered by <span className="font-normal">Hugging Face 🤗</span>
-        </p>
-        <p className="text-md font-thin">
-          Keep the <a href={`/studio/${ownerId}`} className="font-normal" target="_blank">the link</a> to this page!
-        </p>
-      </div>
-
-      <div className="flex items-center justify-between md:space-x-3 w-full">
-        <div className="hidden md:flex flex-col w-54">
+      <div className="flex flex-row w-full">
+        <div className="flex flex-col w-1/2 text-center">
           <h2 className="text-4xl font-thin tracking-tight">VideoChain UI</h2>
           <p className="text-md font-thin">
             Powered by <span className="font-normal">Hugging Face 🤗</span>
           </p>
+        </div>
+        <div className="flex flex-col w-1/2 text-center">
+          <p className="text-md font-thin">
+            This is an experimental Space, for research and demonstration purposes only.
+          </p>
           <p className="text-md font-thin">
-            Save <a href={`/studio/${ownerId}`} className="font-normal" target="_blank">the link</a> to your favorites!
+            This page has a unique URL, keep <a href={`/studio/${ownerId}`} className="font-normal" target="_blank">the link</a> to share videos!
           </p>
         </div>
+      </div>
 
+      <div className="flex items-center justify-between md:space-x-3 w-full">
         <input
           type="hidden"
           id="ownerId"
@@ -48,8 +45,8 @@ export const VideoForm = () => {
         <Textarea
           id="prompt"
           name="prompt"
-          placeholder="Video of llamas playing baseball.."
-          className="md:w-3/6 mr-3 md:mr-0"
+          placeholder="6 sec video of llamas playing soccer"
+          className="mr-3 md:mr-0"
         />
 
         <Button

src/components/business/video-player.tsx

@@ -16,8 +16,10 @@ export const VideoPlayer = ({ video }: { video?: Video }) => {
           src={`${
             process.env.NEXT_PUBLIC_DOWNLOAD_URL
           }/${
-            video.fileName
-          }?progress=${
+            video.ownerId
+          }/${
+            video.id
+          }.mp4?progress=${
             video.progressPercent
           }`}
           muted

src/components/business/videos/columns.tsx

@@ -8,6 +8,7 @@ import { VideoActions } from "./video-actions"
 
 import { Video } from "@/app/types"
 import { deleteVideo } from "@/server"
+import { triggerDownload } from "@/lib/triggerDownload"
 
 export const columns: ColumnDef<Video>[] = [
   {
@@ -61,24 +62,18 @@ export const columns: ColumnDef<Video>[] = [
     enableSorting: false,
   },
   {
-    accessorKey: "fileName",
+    id: "preview",
     header: ({ column }) => null,// no header
     cell: ({ row: { original: { ownerId, id, progressPercent } } }) => <div className="w-[100px]">
-      <a
-        className="hover:underline cursor-pointer"
-        target="_blank"
-        href={`${process.env.NEXT_PUBLIC_DOWNLOAD_URL}/${ownerId}/${id}.mp4`}>
-        <video src={`${process.env.NEXT_PUBLIC_DOWNLOAD_URL}/${ownerId}/${id}.mp4?progress=${progressPercent || 0}`} muted />
-      </a>
+      <video src={`${process.env.NEXT_PUBLIC_DOWNLOAD_URL}/${ownerId}/${id}.mp4?progress=${progressPercent || 0}`} muted />
     </div>,
     enableSorting: false,
     enableHiding: false,
   },
-  /*
   {
-    accessorKey: "fileName",
+    id: "save",
     header: ({ column }) => null,
-    cell: ({ row: { original: { fileName, ownerId, id }} }) => <div className="">
+    cell: ({ row: { original: { ownerId, id }} }) => <div className="">
       <a
         className="hover:underline cursor-pointer"
         target="_blank"
@@ -87,9 +82,36 @@ export const columns: ColumnDef<Video>[] = [
     enableSorting: false,
     enableHiding: false,
   },
-  */
   {
-    accessorKey: "delete",
+    id: "save",
+    header: ({ column }) => null,
+    cell: ({ row: { original } }) => {
+      const scene = JSON.stringify({
+        videoPrompt: original.videoPrompt,
+        backgroundAudioPrompt: original.backgroundAudioPrompt,
+        foregroundAudioPrompt: original.foregroundAudioPrompt,
+        shots: original.shots.map(shot => ({
+          shotPrompt: shot.shotPrompt,
+          backgroundAudioPrompt: shot.backgroundAudioPrompt,
+          foregroundAudioPrompt: shot.foregroundAudioPrompt,
+          actorPrompt: shot.actorPrompt,
+          actorVoicePrompt: shot.actorVoicePrompt,
+          actorDialoguePrompt: shot.actorDialoguePrompt,
+        }))
+      }, null, 2)
+      return (<div className="">
+        <a
+          className="hover:underline cursor-pointer"
+          target="_blank"
+          onClick={() => triggerDownload("scene.json", scene)}>Scene</a>
+      </div>
+      )
+    },
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    id: "delete",
     header: ({ column }) => null, // no header
     cell: ({ row: { original } }) => <div
       className="hover:underline cursor-pointer"
@@ -97,8 +119,10 @@ export const columns: ColumnDef<Video>[] = [
     enableSorting: false,
     enableHiding: false,
   },
+  /*
   {
     id: "actions",
     cell: ({ row }) => <VideoActions row={row} />,
   },
+  */
 ]

src/components/business/videos/video-actions.tsx

@@ -34,10 +34,12 @@ export function VideoActions({
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-[160px]">
-      <DropdownMenuItem>
+        {/*
+        <DropdownMenuItem>
           Pause generation
           <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
         </DropdownMenuItem>
+       */}
         <DropdownMenuItem>Download</DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuItem>

src/lib/triggerDownload.ts

@@ -0,0 +1,12 @@
+export function triggerDownload(filename: string, text: string) {
+  var element = document.createElement('a');
+  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+  element.setAttribute('download', filename);
+
+  element.style.display = 'none';
+  document.body.appendChild(element);
+
+  element.click();
+
+  document.body.removeChild(element);
+}