RaphaelLiu's picture
Update app.py
df4b872 verified
import gradio as gr
import os
css = """
<style>
body, html {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Arial, sans-serif;
height: 100%;
width: 100%;
}
.caption-row {
width: 100%;
text-align: center;
margin-bottom: -10px; /* Adjust as needed for spacing */
}
.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 {
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;
border-radius: 8px;
}
.video-caption {
padding: 0.5rem;
border-radius: 4px;
margin-top: 0.5rem;
font-size: 1.1rem;
text-align: center;
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: #e0e0e0; /* 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
import base64
def video_to_base64(video_path):
with open(video_path, "rb") as video_file:
return base64.b64encode(video_file.read()).decode('utf-8')
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):
i = 699 - i
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
if os.path.exists(video_path):
# Convert video to Base64 for embedding if necessary
video_base64 = video_to_base64(video_path)
video_html += f"""
<div class='video-item'>
<video controls autoplay muted loop>
<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}</p>
</div>
"""
video_html += "</div>"
video_html += "</div>"
return video_html
# Description and Acknowledgements
description_html = """
<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> ·
<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>
"""
TITLE = """<h1 align="center" id="space-title">EvalCrafter Text-to-Video (ECTV) Gallery 🎥📊</h1>"""
# 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.HTML(TITLE)
gr.Markdown(description_html)
gr.Markdown(js)
page_num = gr.State(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
content = showcase(page_num.value)
# app.launch(share=True)
app.launch()