arcanus/koala2
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Gradio Video Upload with Progress</title>7 <style>8 #progress-container {9 width: 100%;10 background-color: #f3f3f3;11 border: 1px solid #ccc;12 margin-top: 10px;13 display: none;14 }15 #progress-bar {16 width: 0%;17 height: 20px;18 background-color: #4caf50;19 text-align: center;20 color: white;21 line-height: 20px;22 transition: width 0.3s;23 }24 pre {25 background: #f3f3f3;26 padding: 10px;27 border: 1px solid #ccc;28 overflow-x: auto;29 white-space: pre-wrap;30 margin-top: 10px;31 }32 </style>33</head>34<body>35 <h1>Upload Video and Process via Gradio API</h1>36 37 <!-- Formulář pro nahrání videa -->38 <form id="uploadForm" enctype="multipart/form-data">39 <label for="video">Choose a video file:</label>40 <input type="file" id="video" name="video" accept="video/*" required>41 <button type="submit">Upload and Process</button>42 </form>43 44 <!-- Progress bar -->45 <div id="progress-container">46 <div id="progress-bar">0%</div>47 </div>48 49 <!-- Debug výpis -->50 <h2>Debug Output:</h2>51 <pre id="debug">Waiting for upload...</pre>52 53 <script>54 document.getElementById('uploadForm').addEventListener('submit', async (event) => {55 event.preventDefault(); // Zabrání obnovení stránky56 57 const fileInput = document.getElementById('video');58 const file = fileInput.files[0];59 const debugOutput = document.getElementById('debug');60 const progressBar = document.getElementById('progress-bar');61 const progressContainer = document.getElementById('progress-container');62 63 if (!file) {64 alert('Please select a video file to upload.');65 return;66 }67 68 debugOutput.textContent = "Starting upload...\n";69 progressContainer.style.display = "block";70 71 const formData = new FormData();72 formData.append('data', file);73 74 const apiUrl = "http://127.0.0.1:7860/api/predict/";75 76 try {77 const xhr = new XMLHttpRequest();78 79 xhr.open("POST", apiUrl, true);80 81 // Aktualizace progress baru82 xhr.upload.addEventListener("progress", (event) => {83 if (event.lengthComputable) {84 const percentComplete = Math.round((event.loaded / event.total) * 100);85 progressBar.style.width = percentComplete + "%";86 progressBar.textContent = percentComplete + "%";87 }88 });89 90 // Zpracování odpovědi91 xhr.onload = function () {92 if (xhr.status === 200) {93 debugOutput.textContent += "Upload complete! Server response:\n" + xhr.responseText;94 progressBar.style.width = "100%";95 progressBar.textContent = "Done";96 } else {97 debugOutput.textContent += `Error: ${xhr.statusText}\nServer response:\n${xhr.responseText}`;98 }99 };100 101 xhr.onerror = function () {102 debugOutput.textContent += "Error during the request.";103 };104 105 xhr.send(formData);106 debugOutput.textContent += "File is being uploaded...\n";107 108 } catch (error) {109 debugOutput.textContent += `Unexpected error: ${error.message}`;110 console.error("Error:", error);111 }112 });113 </script>114</body>115</html>116