Your IP : 216.73.216.79
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Generator - Image to Video</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.header {
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
color: #1b1b1b;
padding: 30px;
text-align: center;
}
.header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
.header p {
opacity: 0.9;
font-size: 1.1em;
}
.content {
padding: 40px;
}
.form-group {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
}
input[type="text"],
textarea,
select {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s;
}
input[type="text"]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: #667eea;
}
textarea {
resize: vertical;
min-height: 100px;
}
.file-input-wrapper {
position: relative;
display: inline-block;
width: 100%;
}
input[type="file"] {
width: 100%;
padding: 12px;
border: 2px dashed #e0e0e0;
border-radius: 8px;
cursor: pointer;
}
.checkbox-group {
display: flex;
align-items: center;
gap: 10px;
}
.checkbox-group input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
}
.button-group {
display: flex;
gap: 15px;
margin-top: 30px;
}
button {
flex: 1;
padding: 15px 30px;
font-size: 18px;
font-weight: 600;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}
.btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.status-container {
margin-top: 30px;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
display: none;
}
.status-container.show {
display: block;
}
.status-text {
font-size: 16px;
margin-bottom: 15px;
}
.progress-bar {
width: 100%;
height: 10px;
background: #e0e0e0;
border-radius: 5px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
width: 0%;
transition: width 0.3s;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.result-container {
margin-top: 30px;
display: none;
}
.result-container.show {
display: block;
}
.video-player {
width: 100%;
border-radius: 8px;
margin-top: 20px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.error-message {
padding: 15px;
background: #fee;
color: #c33;
border-radius: 8px;
margin-top: 20px;
display: none;
}
.error-message.show {
display: block;
}
.info-box {
background: #e3f2fd;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
border-left: 4px solid #2196f3;
}
.info-box ul {
margin-left: 20px;
margin-top: 10px;
}
.info-box li {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎬 Video Generator</h1>
<p>Transform images into videos with AI</p>
</div>
<div class="content">
<div class="info-box">
<strong>ℹ️ How to use:</strong>
<ul>
<li>Upload an image or provide an image URL</li>
<li>Optionally add audio or audio URL</li>
<li>Write a prompt describing the video you want to create</li>
<li>Click "Generate Video" and wait (usually 30-120 seconds)</li>
</ul>
</div>
<form id="videoForm">
<div class="form-group">
<label for="prompt">Video Prompt *</label>
<textarea
id="prompt"
name="prompt"
placeholder="Describe what should happen in the video..."
required
></textarea>
</div>
<div class="form-group">
<label for="imageFile">Upload Image (or use URL below)</label>
<input
type="file"
id="imageFile"
name="image"
accept="image/png,image/jpeg,image/jpg,image/gif,image/webp"
>
</div>
<div class="form-group">
<label for="imgUrl">OR Image URL</label>
<input
type="text"
id="imgUrl"
name="img_url"
placeholder="https://example.com/image.jpg"
>
</div>
<div class="form-group">
<label for="audioFile">Upload Audio (Optional)</label>
<input
type="file"
id="audioFile"
name="audio"
accept="audio/mp3,audio/wav,audio/ogg,audio/m4a,audio/aac"
>
</div>
<div class="form-group">
<label for="audioUrl">OR Audio URL</label>
<input
type="text"
id="audioUrl"
name="audio_url"
placeholder="https://example.com/audio.mp3"
>
</div>
<div class="form-group">
<label for="resolution">Resolution</label>
<select id="resolution" name="resolution">
<option value="720P" selected>720P (Standard)</option>
<option value="1080P">1080P (High Quality)</option>
</select>
</div>
<div class="form-group">
<label for="duration">Duration (seconds: 1-60)</label>
<input
type="number"
id="duration"
name="duration"
value="10"
min="1"
max="60"
>
</div>
<div class="form-group">
<label for="negativePrompt">Negative Prompt (Optional)</label>
<input
type="text"
id="negativePrompt"
name="negative_prompt"
placeholder="Things to avoid in the video..."
>
</div>
<div class="form-group checkbox-group">
<input
type="checkbox"
id="promptExtend"
name="prompt_extend"
checked
>
<label for="promptExtend" style="margin: 0;">Extend Prompt (AI enhances your description)</label>
</div>
<div class="form-group checkbox-group">
<input
type="checkbox"
id="watermark"
name="watermark"
>
<label for="watermark" style="margin: 0;">Add Watermark</label>
</div>
<div class="button-group">
<button type="submit" class="btn-primary" id="generateBtn">
🚀 Generate Video
</button>
</div>
</form>
<div class="status-container" id="statusContainer">
<div class="status-text" id="statusText">Preparing...</div>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
</div>
<div class="error-message" id="errorMessage"></div>
<div class="result-container" id="resultContainer">
<h2>✅ Video Generated Successfully!</h2>
<video id="videoPlayer" class="video-player" controls>
Your browser does not support the video tag.
</video>
<p style="margin-top: 15px; color: #666;">
<strong>Task ID:</strong> <span id="taskId"></span><br>
<strong>Request ID:</strong> <span id="requestId"></span>
</p>
</div>
</div>
</div>
<script>
const form = document.getElementById('videoForm');
const generateBtn = document.getElementById('generateBtn');
const statusContainer = document.getElementById('statusContainer');
const statusText = document.getElementById('statusText');
const progressFill = document.getElementById('progressFill');
const errorMessage = document.getElementById('errorMessage');
const resultContainer = document.getElementById('resultContainer');
const videoPlayer = document.getElementById('videoPlayer');
const taskIdSpan = document.getElementById('taskId');
const requestIdSpan = document.getElementById('requestId');
let pollingInterval;
form.addEventListener('submit', async (e) => {
e.preventDefault();
// Reset UI
errorMessage.classList.remove('show');
resultContainer.classList.remove('show');
statusContainer.classList.add('show');
generateBtn.disabled = true;
statusText.textContent = 'Starting video generation...';
progressFill.style.width = '10%';
try {
// Prepare form data
const formData = new FormData(form);
// Check if image file or URL is provided
const imageFile = document.getElementById('imageFile').files[0];
const imgUrl = document.getElementById('imgUrl').value.trim();
if (!imageFile && !imgUrl) {
throw new Error('Please provide either an image file or image URL');
}
// Start video generation
const response = await fetch('/generate-video', {
method: 'POST',
body: formData
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || 'Failed to start video generation');
}
// Start polling for status
taskIdSpan.textContent = data.task_id;
statusText.textContent = 'Video generation in progress... This may take 1-2 minutes.';
progressFill.style.width = '30%';
pollVideoStatus(data.task_id);
} catch (error) {
showError(error.message);
statusContainer.classList.remove('show');
generateBtn.disabled = false;
}
});
async function pollVideoStatus(taskId) {
let attempts = 0;
const maxAttempts = 120; // 2 minutes max (120 * 1 second)
pollingInterval = setInterval(async () => {
attempts++;
try {
const response = await fetch(`/video-status/${taskId}`);
const data = await response.json();
if (data.status === 'completed') {
clearInterval(pollingInterval);
showSuccess(data);
} else if (data.status === 'failed') {
clearInterval(pollingInterval);
throw new Error(data.error || 'Video generation failed');
} else if (data.status === 'processing') {
// Update progress based on time elapsed
const progress = Math.min(30 + (attempts * 0.5), 90);
progressFill.style.width = `${progress}%`;
statusText.textContent = `Generating video... (${attempts}s elapsed)`;
}
if (attempts >= maxAttempts) {
clearInterval(pollingInterval);
throw new Error('Video generation timeout. Please try again.');
}
} catch (error) {
clearInterval(pollingInterval);
showError(error.message);
}
}, 1000); // Poll every 1 second
}
function showSuccess(data) {
statusContainer.classList.remove('show');
resultContainer.classList.add('show');
generateBtn.disabled = false;
videoPlayer.src = data.video_url;
requestIdSpan.textContent = data.request_id || 'N/A';
// Auto-play video
videoPlayer.play().catch(() => {
// Autoplay blocked, user needs to click play
});
}
function showError(message) {
errorMessage.textContent = `❌ Error: ${message}`;
errorMessage.classList.add('show');
statusContainer.classList.remove('show');
generateBtn.disabled = false;
}
// Clear error when user starts typing
form.addEventListener('input', () => {
errorMessage.classList.remove('show');
});
</script>
</body>
</html>