|
<!DOCTYPE html>
|
|
<html lang="vi" charset="UTF-8">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Video Creator</title>
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
<link rel="stylesheet" type="text/css" href="/static/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="container" id="app">
|
|
<header class="bg-gradient">
|
|
<img src="/static/banner.png" alt="Banner" class="img-fluid">
|
|
<nav class="mt-2">
|
|
<a href="/" class="btn btn-primary mx-3">Trang chủ</a>
|
|
<a href="/pexels" class="btn btn-secondary mx-3">Tạo video từ Pexels</a>
|
|
<a href="#" class="btn btn-info mx-3">Hướng dẫn</a>
|
|
<a href="#" class="btn btn-success mx-3">Liên hệ</a>
|
|
</nav>
|
|
</header>
|
|
<main class="my-5">
|
|
<h2 class="text-center mb-4 highlight-text">ỨNG DỤNG SẢN XUẤT VIDEO TỰ ĐỘNG</h2>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<form id="form1" enctype="multipart/form-data">
|
|
<div class="form-group">
|
|
<label for="imageFolder">Chọn thư mục ảnh/video:</label>
|
|
<input type="file" class="form-control-file" id="imageFolder" name="imageFolder" webkitdirectory multiple required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="voiceOff">Chọn file voice off:</label>
|
|
<input type="file" class="form-control-file" id="voiceOff" name="voiceOff" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="backgroundMusic">Chọn file nhạc nền (tùy chọn):</label>
|
|
<input type="file" class="form-control-file" id="backgroundMusic" name="backgroundMusic">
|
|
</div>
|
|
<button type="button" class="btn btn-primary" onclick="createVideoFromPexels()">Tạo video</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<div id="notification"></div>
|
|
</div>
|
|
|
|
<script>
|
|
async function createVideoFromPexels() {
|
|
const formData = new FormData(document.getElementById('form1'));
|
|
const response = await fetch('/create-video-from-pexels', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
const result = await response.json();
|
|
if (result.message) {
|
|
alert(result.message);
|
|
} else {
|
|
alert('Video đã được tạo thành công');
|
|
}
|
|
}
|
|
|
|
|
|
const socket = new WebSocket('ws://localhost:8000/ws');
|
|
socket.onmessage = function(event) {
|
|
const data = JSON.parse(event.data);
|
|
const notificationDiv = document.getElementById('notification');
|
|
const notificationElement = document.createElement('div');
|
|
notificationElement.classList.add('alert', 'alert-info');
|
|
notificationElement.textContent = `Task ID: ${data.task_id} - ${data.message}`;
|
|
notificationDiv.appendChild(notificationElement);
|
|
|
|
|
|
setTimeout(() => {
|
|
notificationElement.remove();
|
|
}, 5000);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |
