Create app

app

@@ -0,0 +1,334 @@
+import gradio as gr
+import os
+
+css = """
+<style>
+body, html {
+    margin: 0;
+    padding: 0;
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    background-color: #121212; /* Dark background for the body */
+    color: #e0e0e0; /* Light grey text for better readability */
+    height: 100%;
+    width: 100%;
+}
+
+.gr-prose h2 {
+    color: #ffffff !important; /* This ensures that the color is white */
+}
+
+.gr-prose a {
+    color: #ffffff !important; /* This ensures that the color is white */
+}
+
+
+div {
+    background-color: #121212; /* Slightly lighter dark shade for div backgrounds */
+    color: #e0e0e0; /* Light grey text color for readability */
+}
+
+.gallery-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: 100vh;
+    padding: 2rem;
+    box-sizing: border-box;
+}
+
+.video-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
+    padding: 1rem;
+    width: 100%;
+    max-width: 1200px;
+}
+
+.video-item {
+    padding-top: 0;
+    margin-bottom: 1rem;
+}
+
+.video-item video {
+    width: 100%;
+    display: block;
+    border-radius: 8px;
+}
+
+.video-caption {
+    color: #ffffff; /* Maintain white text for captions */
+    padding: 0.5rem;
+    border-radius: 4px;
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+    display: block;
+    width: auto;
+}
+
+.nav-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.button {
+    background-color: #333333; /* Dark grey button background */
+    color: #ffffff; /* White text on buttons for visibility */
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.3rem;
+    cursor: pointer;
+    transition: background 0.2s ease-in-out;
+}
+
+.gr-button {
+    background-color: #e5e7eb !important;
+}
+
+.button:hover {
+    background-color: #4f4f4f; /* Lighter grey on hover for visibility */
+}
+
+.slider {
+    background-color: #333333; /* Slider background */
+    border-radius: 0.3rem;
+    margin: 1rem 0;
+}
+
+.slider input[type="range"] {
+    width: 100%;
+}
+
+a, a:visited {
+    color: #76a9ff; /* Blue accent color for links for visibility */
+    text-decoration: none;
+}
+
+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: #ffffff; /* White text for inputs */
+    border: 1px solid #343434; /* Subtle border color */
+    border-radius: 0.3rem;
+    padding: 0.5rem;
+}
+
+input[type="text"]:focus, select:focus, textarea:focus {
+    outline: none;
+    border-color: #76a9ff; /* Blue border color for focus */
+}
+
+/* Additional global styles can go here */
+
+</style>
+"""
+
+# @keyframes animatedGradient {
+#     0% { background-position: 0% 50%; }
+#     50% { background-position: 100% 50%; }
+#     100% { background-position: 0% 50%; }
+# }
+
+# .video-item {
+#     /* ... other styles ... */
+#     background: linear-gradient(270deg, #6a6a6a, #373737, #2d2d2d, #373737);
+#     background-size: 800% 800%;
+#     animation: animatedGradient 15s ease infinite;
+# }
+
+# JavaScript function to load the motion backgrounds
+js = """
+<script>
+function addMotionBackgrounds() {
+    // Select all video containers
+    var containers = document.querySelectorAll('.video-container');
+    
+    containers.forEach(container => {
+        // Create a div for the background
+        var background = document.createElement('div');
+        background.className = 'video-background';
+        
+        // Append the background div to the container
+        container.appendChild(background);
+    });
+}
+// Call the function to add motion backgrounds
+window.onload = addMotionBackgrounds;
+</script>
+"""
+# def showcase(page_num):
+#     videos_per_page = 3
+#     start_index = (page_num - 1) * videos_per_page
+#     end_index = start_index + videos_per_page
+#     video_html = "<center>"  # Centering the content
+
+#     for i in range(start_index, end_index):
+#         video_name = f"{i:04d}.mp4"
+#         caption_name = f"{i:04d}.txt"
+#         video_html += "<div style='margin-bottom: 20px;'>"
+
+#         for category in ['gen2', 'floor33', 'pika']:
+#             video_url = f"http://localhost:8000/{category}/{video_name}"
+#             caption_path = os.path.join('prompts', caption_name)  # Path to the caption file
+#             if os.path.exists(os.path.join('static', category, video_name)):  # Check if video file exists
+#                 caption_text = ""
+#                 if os.path.exists(caption_path):  # Check if caption file exists and read it
+#                     with open(caption_path, 'r') as file:
+#                         caption_text = file.read().strip()
+
+#                 video_html += f"""
+#                 <div style="display: inline-block; margin-right: 10px; text-align: left;">
+#                     <video width='480' height='360' controls>
+#                         <source src="{video_url}" type="video/mp4">
+#                         Your browser does not support the video tag.
+#                     </video>
+#                     <p style="font-size: 16px; font-weight: bold;">{category}/{video_name}</p>
+#                     <p style="font-size: 14px; margin-top: 5px; color: #666;">{caption_text}</p> <!-- Caption text -->
+#                 </div>
+#                 """
+
+#         video_html += "</div>"
+#     # video_html += "</center>"
+#     return video_html
+
+def showcase(page_num):
+    videos_per_page = 1
+    start_index = (page_num - 1) * videos_per_page
+    end_index = start_index + videos_per_page
+    video_html = "<div class='gallery-container'>"
+
+    for i in range(start_index, end_index):
+        video_name = f"{i:04d}.mp4"
+        caption_name = f"{i:04d}.txt"
+        video_html += "<div class='video-container'>"
+
+        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_url = f"http://localhost:8000/{category}/{video_name}"
+            caption_path = os.path.join('prompts', caption_name)
+            if os.path.exists(os.path.join('static', category, video_name)):
+                caption_text = ""
+                if os.path.exists(caption_path):
+                    with open(caption_path, 'r') as file:
+                        caption_text = file.read().strip()
+
+                video_html += f"""
+                <div class='video-item'>
+                    <video controls>
+                        <source src="{video_url}" type="video/mp4">
+                        Your browser does not support the video tag.
+                    </video>
+                    <p class='video-caption'>{category}: {caption_text}</p>
+                </div>
+                """
+
+        video_html += "</div>"
+    video_html += "</div>"
+    return video_html
+
+
+# Description and Acknowledgements    
+
+description_html = """
+<div style="text-align: center; margin-bottom: 20px;">
+    <h2>EvalCrafter Text-to-Video (ECTV) Gallery 🎥📊</h2>
+    <p>
+    <a href="https://huggingface.co/datasets/RaphaelLiu/EvalCrafter_T2V_Dataset">Dataset</a> ·
+    <a href="https://github.com/EvalCrafter/EvalCrafter">Code</a> · 
+    <a href="http://evalcrafter.github.io">Project Page</a> · 
+    <a href="https://huggingface.co/spaces/AILab-CVC/EvalCrafter">Leaderboard</a> · 
+    <a href="https://arxiv.org/abs/2310.11440">Paper@ArXiv</a> · 
+    <a href="https://github.com/evalcrafter/EvalCrafter/blob/master/prompt700.txt">Prompt list</a></p>
+    <p>Welcome to the ECTV Gallery! This repository contains around 10000 videos generated by various methods using the Prompt list. These videos have been evaluated using the innovative EvalCrafter framework, which assesses generative models across visual, content, and motion qualities using 17 objective metrics and subjective user opinions.</p>
+    <!-- Add more details and acknowledgements as needed -->
+</div>
+"""
+
+
+# def navigate(direction, page_num):
+#     if direction == "Beginning":
+#         page_num.value = 1
+#     elif direction == "Previous":
+#         page_num.value = max(1, page_num.value - 1)
+#     elif direction == "Next":
+#         page_num.value = min(total_pages, page_num.value + 1)
+#     elif direction == "End":
+#         page_num.value = total_pages
+#     # Assuming showcase is a function that returns HTML content based on page_num
+#     output_html_content = showcase(page_num.value)
+#     return page_num, output_html_content
+
+def navigate(direction, current_page):
+    if direction == "Beginning":
+        return 1
+    elif direction == "Previous":
+        return max(1, current_page - 1)
+    elif direction == "Next":
+        return min(total_pages, current_page + 1)
+    elif direction == "End":
+        return total_pages
+    else:
+        # For direct navigation through the slider
+        return current_page
+
+def navigate_to_page(page_num, page_slider):
+    # Directly navigate to the selected page from the slider
+    page_num.value = page_slider
+    return page_num, showcase(page_num)
+
+
+# Define the total number of pages.
+total_videos = 700
+videos_per_page = 1
+total_pages = (total_videos + videos_per_page - 1) // videos_per_page
+
+with gr.Blocks(css=css)  as app:
+    gr.Markdown(description_html)
+    gr.Markdown(js)
+    page_num = gr.Variable(value=1)
+
+
+    
+
+    with gr.Row():
+        beginning_button = gr.Button("Beginning")
+        previous_button = gr.Button("Previous")
+        next_button = gr.Button("Next")
+        end_button = gr.Button("End")
+    page_slider = gr.Slider(minimum=1, maximum=total_pages, step=1, value=1, label="Go to page")
+    output_html = gr.HTML()
+    
+
+
+    def update_output(direction):
+        # new_page_num = navigate(direction, page_num.value)
+        if isinstance(direction, int):
+            new_page_num = direction
+        else:
+            new_page_num = navigate(direction, page_num.value)
+        page_num.value = new_page_num
+        content = showcase(new_page_num)
+        return new_page_num, content
+    
+    def initialization(start):
+        page_num.value = int(start)
+        return page_num.value, showcase(page_num.value)
+
+    app.load(fn=lambda: initialization('1'), inputs=None, outputs=[page_slider, output_html])
+    
+
+    beginning_button.click(fn=lambda: update_output("Beginning"), inputs=None, outputs=[page_slider, output_html])
+    previous_button.click(fn=lambda: update_output("Previous"), inputs=None, outputs=[page_slider, output_html])
+    next_button.click(fn=lambda: update_output("Next"), inputs=None, outputs=[page_slider, output_html])
+    end_button.click(fn=lambda: update_output("End"), inputs=None, outputs=[page_slider, output_html])
+    page_slider.change(fn=lambda x: update_output(x), inputs=page_slider, outputs=[page_slider, output_html])
+
+    # Initialize the display for the first page
+    output_html.update(value=showcase(page_num.value))
+
+app.launch(share=True)