mirror of
https://github.com/Wan-Video/Wan2.1.git
synced 2025-06-08 00:04:53 +00:00
123 lines
5.9 KiB
Plaintext
123 lines
5.9 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<%- include('./partials/head') %>
|
||
<body>
|
||
<%- include('./partials/header') %>
|
||
|
||
<main class="container my-5">
|
||
<div class="card">
|
||
<div class="card-header bg-primary text-white">
|
||
<h1 class="h3 mb-0">Image to Video Generation</h1>
|
||
</div>
|
||
<div class="card-body">
|
||
<% if(message && message.length > 0) { %>
|
||
<div class="alert alert-success" role="alert">
|
||
<%= message %>
|
||
</div>
|
||
<% } %>
|
||
<% if(error && error.length > 0) { %>
|
||
<div class="alert alert-danger" role="alert">
|
||
<%= error %>
|
||
</div>
|
||
<% } %>
|
||
|
||
<form action="/image-to-video" method="POST" enctype="multipart/form-data">
|
||
<div class="mb-3">
|
||
<label for="image" class="form-label">Upload Image</label>
|
||
<input class="form-control" type="file" id="image" name="image" accept="image/*" required>
|
||
<div class="form-text">Select an image to animate (JPG, PNG, max 10MB)</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="prompt" class="form-label">Prompt (optional)</label>
|
||
<textarea class="form-control" id="prompt" name="prompt" rows="2" placeholder="Optional description to guide the video generation"></textarea>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-4 mb-3">
|
||
<label for="resolution" class="form-label">Resolution</label>
|
||
<select class="form-select" id="resolution" name="resolution" required>
|
||
<option value="512*320">512×320</option>
|
||
<option value="512*512">512×512</option>
|
||
<option value="640*384">640×384</option>
|
||
<option value="768*432">768×432</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="col-md-4 mb-3">
|
||
<label for="steps" class="form-label">Steps</label>
|
||
<input type="number" class="form-control" id="steps" name="steps" min="1" max="100" value="30" required>
|
||
</div>
|
||
|
||
<div class="col-md-4 mb-3">
|
||
<label for="guideScale" class="form-label">Guidance Scale</label>
|
||
<input type="number" class="form-control" id="guideScale" name="guideScale" min="1" max="20" step="0.5" value="7.5" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label for="shiftScale" class="form-label">Shift Scale</label>
|
||
<input type="number" class="form-control" id="shiftScale" name="shiftScale" min="0" max="10" step="0.5" value="5.0" required>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-3">
|
||
<label for="seed" class="form-label">Seed (optional, -1 for random)</label>
|
||
<input type="number" class="form-control" id="seed" name="seed" value="-1">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<label for="negativePrompt" class="form-label">Negative Prompt (optional)</label>
|
||
<textarea class="form-control" id="negativePrompt" name="negativePrompt" rows="2" placeholder="Elements you don't want in your video"></textarea>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<div id="imagePreview" class="d-none mt-2">
|
||
<h5>Image Preview:</h5>
|
||
<img id="preview" src="#" alt="Preview" style="max-width: 100%; max-height: 300px;" class="img-thumbnail">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="d-grid gap-2">
|
||
<button type="submit" class="btn btn-primary btn-lg">Generate Video</button>
|
||
<div class="text-center mt-3">
|
||
<div class="spinner-border text-primary d-none" id="loading-spinner" role="status">
|
||
<span class="visually-hidden">Loading...</span>
|
||
</div>
|
||
<p id="loading-text" class="d-none">Generating video... This may take several minutes depending on your hardware.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<%- include('./partials/footer') %>
|
||
|
||
<%- include('./partials/scripts') %>
|
||
<script>
|
||
document.getElementById('image').addEventListener('change', function(e) {
|
||
const file = e.target.files[0];
|
||
if (file) {
|
||
const reader = new FileReader();
|
||
reader.onload = function(event) {
|
||
document.getElementById('preview').src = event.target.result;
|
||
document.getElementById('imagePreview').classList.remove('d-none');
|
||
}
|
||
reader.readAsDataURL(file);
|
||
}
|
||
});
|
||
|
||
document.querySelector('form').addEventListener('submit', function(e) {
|
||
document.getElementById('loading-spinner').classList.remove('d-none');
|
||
document.getElementById('loading-text').classList.remove('d-none');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|