Update content

app.py

@@ -11,6 +11,12 @@ body, html {
     width: 100%;
 }
 
+.caption-row {
+    width: 100%;
+    text-align: center;
+    margin-bottom: -10px; /* Adjust as needed for spacing */
+}
+
 .gallery-container {
     display: flex;
     flex-direction: column;
@@ -30,11 +36,23 @@ body, html {
     max-width: 1200px;
 }
 
+
 .video-item {
-    padding-top: 0;
-    margin-bottom: 1rem;
+    position: relative;
+    width: 100%; /* Set to the width you desire */
+    padding-top: 56.25%; /* 16:9 Aspect Ratio */
+}
+
+video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 83%;
+    object-fit: cover; /* This will cover the area of the video-item, you can also use 'contain' to fit inside the area */
 }
 
+
 .video-item video {
     width: 100%;
     display: block;
@@ -45,7 +63,8 @@ body, html {
     padding: 0.5rem;
     border-radius: 4px;
     margin-top: 0.5rem;
-    font-size: 0.9rem;
+    font-size: 1.1rem;
+    text-align: center;
     display: block;
     width: auto;
 }
@@ -94,10 +113,11 @@ a:hover {
     color: #a4c2ff; /* Lighter blue on hover for visibility */
 }
 
+
 input[type="text"], select, textarea {
     background-color: #333333; /* Dark grey input background for contrast */
     color: #e0e0e0; /* White text for inputs */
-    border: 1px solid #343434; /* Subtle border color */
+    border: -1px solid #343434; /* Subtle border color */
     border-radius: 0.3rem;
     padding: 0.5rem;
 }
@@ -195,18 +215,23 @@ def showcase(page_num):
     for i in range(start_index, end_index):
         video_name = f"{i:04d}.mp4"
         caption_name = f"{i:04d}.txt"
+        caption_path = os.path.join('prompts', caption_name)
+
+        if os.path.exists(caption_path):
+            with open(caption_path, 'r') as file:
+                caption_text = file.read().strip()
+        video_html += f"""<h1 align="center">Prompt: {caption_text}</h1>"""
         video_html += "<div class='video-container'>"
+        # Add the caption at the top of the page, outside the video loop
+        # video_html += f"<div class='video-caption'>{caption_text}</div>"
+        # video_html += f"<div class='caption-row'><div class='video-caption'>{caption_text}</div></div>"
+        # video_html += f"<div class='caption-row'>{caption_text}</div>"
+    
 
         for category in ['VideoCrafter2', 'Pika', 'VideoCrafter1', 'VideoCrafter0.9', 'Pika1.0', 'Gen2-09.2023', 'Gen2-12.2023', 'HotShot', 'Lavie-Base', 'Lavie-Interpolation', 'ModelScope', 'MoonValley', 'Show1', 'ZeroScope']:
             video_path = f"./{category}/{video_name}"  # Updated to use local path
             # video_path = f"./0000.mp4"  # Updated to use local path
-            caption_path = os.path.join('prompts', caption_name)
             if os.path.exists(video_path):
-                caption_text = ""
-                if os.path.exists(caption_path):
-                    with open(caption_path, 'r') as file:
-                        caption_text = file.read().strip()
-
                 # Convert video to Base64 for embedding if necessary
                 video_base64 = video_to_base64(video_path)
                 video_html += f"""
@@ -215,7 +240,7 @@ def showcase(page_num):
                         <source src="data:video/mp4;base64,{video_base64}" type="video/mp4">
                         Your browser does not support the video tag.
                     </video>
-                    <p class='video-caption'>{category}: {caption_text}</p>
+                    <p class='video-caption'>{category}</p>
                 </div>
                 """
 
@@ -226,7 +251,7 @@ def showcase(page_num):
 # Description and Acknowledgements    
 
 description_html = """
-<div style="text-align: center; margin-bottom: 20px;">
+<div style="text-align: center; margin-bottom: 20px;font-size: 1.1rem;">
     <p>
     <a href="https://huggingface.co/datasets/RaphaelLiu/EvalCrafter_T2V_Dataset">Dataset</a> ·
     <a href="https://github.com/EvalCrafter/EvalCrafter">Code</a> ·