Spaces:

RandomPersonRR
/

Video_tools

Paused

App Files Files Community

RandomPersonRR commited on Nov 11, 2024

Commit

9f97732

verified ·

1 Parent(s): c27b24a

Update html.html

Browse files

Files changed (1) hide show

html.html +41 -183

html.html CHANGED Viewed

@@ -2,191 +2,49 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Video Processing</title>
-    <!-- Add some basic styling for better visuals -->
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f3f3f3;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-        }
-        h1 {
-            color: #333;
-            text-align: center;
-        }
-        .form-container {
-            background-color: #fff;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            width: 300px;
-        }
-        label {
-            font-size: 16px;
-            margin-bottom: 5px;
-            color: #333;
-        }
-        input, select, button {
-            width: 100%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            box-sizing: border-box;
-        }
-        input[type="file"] {
-            padding: 5px;
-        }
-        button {
-            background-color: #007BFF;
-            color: #fff;
-            border: none;
-            cursor: pointer;
-            font-size: 16px;
-        }
-        button:hover {
-            background-color: #0056b3;
-        }
-        .options-container {
-            margin-top: 10px;
-            padding-left: 15px;
-        }
-        .hidden {
-            display: none;
-        }
-        #copy-streams-container {
-            background-color: #f9f9f9;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            margin-top: 15px;
-        }
-        #copy-streams-container label {
-            font-size: 14px;
-            color: #555;
-        }
-        .form-container select,
-        .form-container input {
-            background-color: #f9f9f9;
         }
-    </style>
 </head>
 <body>
-    <div class="form-container">
-        <h1>Video Processing</h1>
-        <form id="video-form" action="/process" method="POST" enctype="multipart/form-data">
-            <label for="video">Select Video:</label>
-            <input type="file" name="video" id="video" required><br><br>
-            <label for="action">Select Action:</label>
-            <select name="action" id="action" required>
-                <option value="Convert Format">Convert Format</option>
-                <option value="Trim Video">Trim Video</option>
-                <option value="Resize Video">Resize Video</option>
-                <option value="Extract Audio">Extract Audio</option>
-                <option value="Extract Frames">Extract Frames</option>
-                <option value="Change Video Speed">Change Video Speed</option>
-            </select><br><br>
-            <!-- Show Copy Streams checkbox only for Convert Format and Trim Video -->
-            <div id="copy-streams-container" class="hidden">
-                <label for="copy_streams">Copy Streams (No Re-encoding):</label>
-                <input type="checkbox" name="copy_streams" id="copy_streams"><br><br>
-            </div>
-            <!-- Inputs for Convert Format action -->
-            <div id="format-options" class="hidden options-container">
-                <label for="format">Select Output Format:</label>
-                <select name="format" id="format">
-                    <option value="mp4">MP4</option>
-                    <option value="avi">AVI</option>
-                    <option value="mkv">MKV</option>
-                    <option value="mov">MOV</option>
-                    <option value="flv">FLV</option>
-                    <option value="webm">WEBM</option>
-                </select><br><br>
-            </div>
-            <!-- Inputs for Trim Video action -->
-            <div id="trim-options" class="hidden options-container">
-                <label for="start_time">Start Time (for Trim Video):</label>
-                <input type="text" name="start_time" id="start_time"><br><br>
-                <label for="duration">Duration (for Trim Video):</label>
-                <input type="text" name="duration" id="duration"><br><br>
-            </div>
-            <!-- Inputs for Resize Video action -->
-            <div id="resize-options" class="hidden options-container">
-                <label for="width">Width (for Resize Video):</label>
-                <input type="text" name="width" id="width"><br><br>
-                <label for="height">Height (for Resize Video):</label>
-                <input type="text" name="height" id="height"><br><br>
-            </div>
-            <!-- Inputs for Change Video Speed action -->
-            <div id="speed-options" class="hidden options-container">
-                <label for="speed_factor">Speed Factor (for Change Video Speed):</label>
-                <input type="text" name="speed_factor" id="speed_factor"><br><br>
-            </div>
-            <button type="submit">Submit</button>
-        </form>
-    </div>
-    <script>
-        // Show or hide the corresponding inputs based on selected action
-        document.getElementById('action').addEventListener('change', function() {
-            const action = this.value;
-            const copyStreamsContainer = document.getElementById('copy-streams-container');
-            const formatOptions = document.getElementById('format-options');
-            const trimOptions = document.getElementById('trim-options');
-            const resizeOptions = document.getElementById('resize-options');
-            const speedOptions = document.getElementById('speed-options');
-            // Hide all extra options initially
-            formatOptions.classList.add('hidden');
-            trimOptions.classList.add('hidden');
-            resizeOptions.classList.add('hidden');
-            speedOptions.classList.add('hidden');
-            copyStreamsContainer.classList.add('hidden');
-            // Show options based on selected action
-            if (action === 'Trim Video') {
-                trimOptions.classList.remove('hidden');
-                copyStreamsContainer.classList.remove('hidden');  // Show the copy streams option for Trim Video
-            } else if (action === 'Resize Video') {
-                resizeOptions.classList.remove('hidden');
-            } else if (action === 'Change Video Speed') {
-                speedOptions.classList.remove('hidden');
-            } else if (action === 'Convert Format') {
-                formatOptions.classList.remove('hidden');  // Show the format selection for Convert Format
-                copyStreamsContainer.classList.remove('hidden');  // Show the copy streams option for Convert Format
-            }
-        });
-        // Trigger the change event to set initial visibility based on the default selection
-        document.getElementById('action').dispatchEvent(new Event('change'));
-    </script>
 </body>
 </html>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <title>Video Processing Tool</title>
+    <script>
+        function processVideo(event) {
+            event.preventDefault();
+            const formData = new FormData(document.getElementById('video-form'));
+            fetch('/process', { method: 'POST', body: formData })
+                .then(response => {
+                    if (!response.ok) throw new Error("Error during processing");
+                    return response.blob();
+                })
+                .then(blob => {
+                    const downloadUrl = URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = downloadUrl;
+                    a.download = "output.mp4";
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                })
+                .catch(error => alert(error.message));
         }
+    </script>
 </head>
 <body>
+    <h1>Video Processing Tool</h1>
+    <form id="video-form" onsubmit="processVideo(event)">
+        <label for="video">Upload Video:</label>
+        <input type="file" id="video" name="video" required>
+        <label for="action">Action:</label>
+        <select id="action" name="action">
+            <option value="Convert Format">Convert Format</option>
+            <option value="Trim Video">Trim Video</option>
+            <!-- Other actions... -->
+        </select>
+        <label for="format">Format:</label>
+        <input type="text" id="format" name="format">
+        <label><input type="checkbox" name="copy_streams"> Copy Streams</label>
+        <button type="submit">Process Video</button>
+    </form>
 </body>
 </html>