Spaces:
Running
Running
File size: 4,154 Bytes
c51a38f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
{% extends "base.html" %}
{% block title %}Inference Result{% endblock %}
{% block head_extra %}
<style>
.result-container {
text-align: center;
padding: 40px 20px;
background-color: var(--card-background);
border-radius: 12px;
box-shadow: 0 8px 20px var(--shadow);
margin-top: 40px;
margin-bottom: 40px;
animation: fadeInScale 0.8s ease-out forwards;
}
.result-container h2 {
color: var(--primary-color);
margin-bottom: 30px;
font-size: 2.5em;
}
.result-video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000; /* Fallback for no video */
border-radius: 10px;
margin: 0 auto 30px;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.result-video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
}
.download-button {
background-color: var(--accent-color);
color: #fff;
padding: 12px 25px;
border: none;
border-radius: 5px;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
font-weight: 600;
text-decoration: none; /* For the anchor tag */
display: inline-block;
margin-top: 20px;
}
.download-button:hover {
background-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.download-button:active {
transform: translateY(0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
/* Flash message styling (re-used from index.html) */
.flash-messages {
list-style: none;
padding: 0;
margin: 20px 0;
text-align: center;
}
.flash-messages li {
padding: 10px 20px;
margin-bottom: 10px;
border-radius: 8px;
font-weight: 600;
display: inline-block;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
animation: fadeInOut 0.5s ease forwards;
}
.flash-messages .error {
background-color: #dc3545;
color: #fff;
}
.flash-messages .success {
background-color: #28a745;
color: #fff;
}
.flash-messages .info {
background-color: #007bff;
color: #fff;
}
@media (max-width: 768px) {
.result-container {
padding: 30px 15px;
}
.result-container h2 {
font-size: 2em;
}
}
</style>
{% endblock %}
{% block content %}
<section class="result-container">
<h2>Your Lip-Synced Video is Ready!</h2>
<div class="result-video-wrapper">
<video controls autoplay loop muted>
{# This line is crucial. It now points to the new route that serves the file. #}
<source src="{{ url_for('serve_result_video', filename=video_filename) }}" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
{# Update download link to new route #}
<a href="{{ url_for('download_result', filename=video_filename) }}" class="download-button hover-grow" download>
Download Video
</a>
<a href="{{ url_for('index') }}" class="cta-button hover-grow" style="margin-left: 20px;">
Generate Another
</a>
</section>
{% endblock %} |