| <!DOCTYPE html> |
| <html lang="vi"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Video Generator API</title> |
| <style> |
| body { |
| font-family: Arial, sans-serif; |
| max-width: 800px; |
| margin: 0 auto; |
| padding: 20px; |
| background-color: #f5f5f5; |
| } |
| .container { |
| background: white; |
| padding: 30px; |
| border-radius: 10px; |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
| } |
| h1 { |
| color: #333; |
| text-align: center; |
| } |
| .section { |
| margin: 30px 0; |
| padding: 20px; |
| border: 1px solid #ddd; |
| border-radius: 5px; |
| } |
| .section h2 { |
| color: #555; |
| margin-top: 0; |
| } |
| input[type="text"] { |
| width: 100%; |
| padding: 10px; |
| border: 1px solid #ddd; |
| border-radius: 5px; |
| margin: 10px 0; |
| } |
| button { |
| background: #007bff; |
| color: white; |
| padding: 10px 20px; |
| border: none; |
| border-radius: 5px; |
| cursor: pointer; |
| margin: 5px; |
| } |
| button:hover { |
| background: #0056b3; |
| } |
| .result { |
| margin: 20px 0; |
| padding: 15px; |
| background: #f8f9fa; |
| border-radius: 5px; |
| border-left: 4px solid #007bff; |
| } |
| .error { |
| border-left-color: #dc3545; |
| background: #f8d7da; |
| } |
| .success { |
| border-left-color: #28a745; |
| background: #d4edda; |
| } |
| .code { |
| background: #f4f4f4; |
| padding: 10px; |
| border-radius: 5px; |
| font-family: monospace; |
| margin: 10px 0; |
| } |
| .status { |
| font-weight: bold; |
| padding: 5px 10px; |
| border-radius: 3px; |
| display: inline-block; |
| margin: 5px 0; |
| } |
| .status.pending { background: #ffc107; color: #212529; } |
| .status.processing { background: #17a2b8; color: white; } |
| .status.completed { background: #28a745; color: white; } |
| .status.failed { background: #dc3545; color: white; } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>🎬 Video Generator API</h1> |
| <p>API để tự động tạo video từ prompt sử dụng Hugging Face Self-Forcing</p> |
|
|
| |
| <div class="section"> |
| <h2>🧪 Test API</h2> |
| <input type="text" id="promptInput" placeholder="Nhập prompt để tạo video (ví dụ: A dog running in a park)" value="A cat playing with a ball"> |
| <button onclick="generateVideo()">Tạo Video</button> |
| <button onclick="checkStatus()">Kiểm tra trạng thái</button> |
| <button onclick="listJobs()">Danh sách Jobs</button> |
| |
| <div id="result"></div> |
| </div> |
|
|
| |
| <div class="section"> |
| <h2>📖 Hướng dẫn sử dụng API</h2> |
| |
| <h3>1. Tạo video từ prompt</h3> |
| <div class="code"> |
| GET /api/video/generate/<prompt> |
| </div> |
| <p><strong>Ví dụ:</strong></p> |
| <div class="code"> |
| GET /api/video/generate/A%20dog%20running%20in%20a%20park |
| </div> |
| <p><strong>Response:</strong></p> |
| <div class="code"> |
| { |
| "success": true, |
| "job_id": "uuid-here", |
| "message": "Video generation started", |
| "status_url": "/api/video/status/uuid-here", |
| "download_url": "/api/video/download/uuid-here" |
| } |
| </div> |
|
|
| <h3>2. Kiểm tra trạng thái</h3> |
| <div class="code"> |
| GET /api/video/status/<job_id> |
| </div> |
| <p><strong>Response:</strong></p> |
| <div class="code"> |
| { |
| "success": true, |
| "job_id": "uuid-here", |
| "status": "completed", |
| "prompt": "A dog running in a park", |
| "video_ready": true, |
| "download_url": "/api/video/download/uuid-here" |
| } |
| </div> |
|
|
| <h3>3. Tải xuống video</h3> |
| <div class="code"> |
| GET /api/video/download/<job_id> |
| </div> |
| <p>Trả về file video để tải xuống.</p> |
|
|
| <h3>4. Danh sách tất cả jobs</h3> |
| <div class="code"> |
| GET /api/video/jobs |
| </div> |
|
|
| <h3>5. Health check</h3> |
| <div class="code"> |
| GET /api/video/health |
| </div> |
| </div> |
|
|
| |
| <div class="section"> |
| <h2>💡 Ví dụ sử dụng</h2> |
| <p>Để tạo video với prompt "tạo ảnh một chú chó", bạn có thể gọi:</p> |
| <div class="code"> |
| https://your-api.com/api/video/generate/tạo%20ảnh%20một%20chú%20chó |
| </div> |
| <p>Sau đó kiểm tra trạng thái và tải xuống video khi hoàn thành.</p> |
| </div> |
| </div> |
|
|
| <script> |
| let currentJobId = null; |
| |
| function showResult(message, type = 'result') { |
| const resultDiv = document.getElementById('result'); |
| resultDiv.innerHTML = `<div class="result ${type}">${message}</div>`; |
| } |
| |
| async function generateVideo() { |
| const prompt = document.getElementById('promptInput').value.trim(); |
| if (!prompt) { |
| showResult('Vui lòng nhập prompt!', 'error'); |
| return; |
| } |
| |
| try { |
| showResult('Đang gửi yêu cầu tạo video...', 'result'); |
| |
| const response = await fetch(`/api/video/generate/${encodeURIComponent(prompt)}`); |
| const data = await response.json(); |
| |
| if (data.success) { |
| currentJobId = data.job_id; |
| showResult(` |
| <strong>✅ Đã bắt đầu tạo video!</strong><br> |
| Job ID: ${data.job_id}<br> |
| Status URL: ${data.status_url}<br> |
| Download URL: ${data.download_url} |
| `, 'success'); |
| |
| |
| setTimeout(checkStatus, 5000); |
| } else { |
| showResult(`❌ Lỗi: ${data.error}`, 'error'); |
| } |
| } catch (error) { |
| showResult(`❌ Lỗi kết nối: ${error.message}`, 'error'); |
| } |
| } |
| |
| async function checkStatus() { |
| if (!currentJobId) { |
| showResult('Chưa có job nào được tạo!', 'error'); |
| return; |
| } |
| |
| try { |
| const response = await fetch(`/api/video/status/${currentJobId}`); |
| const data = await response.json(); |
| |
| if (data.success) { |
| const statusClass = data.status; |
| let message = ` |
| <strong>📊 Trạng thái Job</strong><br> |
| Job ID: ${data.job_id}<br> |
| Prompt: ${data.prompt}<br> |
| Status: <span class="status ${statusClass}">${data.status}</span><br> |
| `; |
| |
| if (data.status === 'completed' && data.video_ready) { |
| message += `<br><a href="${data.download_url}" target="_blank"> |
| <button>📥 Tải xuống video</button> |
| </a>`; |
| } else if (data.status === 'failed') { |
| message += `<br>❌ Lỗi: ${data.error || 'Unknown error'}`; |
| } else if (data.status === 'processing') { |
| message += `<br>⏳ Đang xử lý... Sẽ kiểm tra lại sau 10 giây.`; |
| setTimeout(checkStatus, 10000); |
| } |
| |
| showResult(message, data.status === 'completed' ? 'success' : 'result'); |
| } else { |
| showResult(`❌ Lỗi: ${data.error}`, 'error'); |
| } |
| } catch (error) { |
| showResult(`❌ Lỗi kết nối: ${error.message}`, 'error'); |
| } |
| } |
| |
| async function listJobs() { |
| try { |
| const response = await fetch('/api/video/jobs'); |
| const data = await response.json(); |
| |
| if (data.success) { |
| let message = `<strong>📋 Danh sách Jobs (${data.total})</strong><br><br>`; |
| |
| if (data.jobs.length === 0) { |
| message += 'Chưa có job nào.'; |
| } else { |
| data.jobs.forEach(job => { |
| message += ` |
| <div style="border: 1px solid #ddd; padding: 10px; margin: 5px 0; border-radius: 5px;"> |
| <strong>Job:</strong> ${job.job_id}<br> |
| <strong>Prompt:</strong> ${job.prompt}<br> |
| <strong>Status:</strong> <span class="status ${job.status}">${job.status}</span><br> |
| ${job.download_url ? `<a href="${job.download_url}" target="_blank"><button>📥 Tải xuống</button></a>` : ''} |
| </div> |
| `; |
| }); |
| } |
| |
| showResult(message, 'result'); |
| } else { |
| showResult(`❌ Lỗi: ${data.error}`, 'error'); |
| } |
| } catch (error) { |
| showResult(`❌ Lỗi kết nối: ${error.message}`, 'error'); |
| } |
| } |
| |
| |
| window.onload = async function() { |
| try { |
| const response = await fetch('/api/video/health'); |
| const data = await response.json(); |
| if (data.success) { |
| console.log('✅ API đang hoạt động:', data); |
| } |
| } catch (error) { |
| console.error('❌ API không hoạt động:', error); |
| } |
| }; |
| </script> |
| </body> |
| </html> |
|
|
|
|
