Spaces:

RandomPersonRR
/

Video_tools

Paused

App Files Files Community

RandomPersonRR commited on Nov 11, 2024

Commit

985c99f

verified ·

1 Parent(s): ed9e4c3

Update html.html

Browse files

Files changed (1) hide show

html.html +153 -91

html.html CHANGED Viewed

@@ -2,124 +2,186 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Video Processing Tool</title>
     <style>
         body {
             font-family: Arial, sans-serif;
-            background-color: #f4f4f9;
             margin: 0;
-            padding: 20px;
-            color: #333;
         }
         h1 {
             color: #333;
             text-align: center;
         }
-        form {
-            background: #fff;
-            max-width: 500px;
-            margin: auto;
             padding: 20px;
-            border-radius: 5px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         }
         label {
-            font-weight: bold;
-            display: block;
-            margin-top: 10px;
         }
-        input[type="file"],
-        select,
-        input[type="text"],
-        button {
             width: 100%;
-            padding: 8px;
-            margin-top: 5px;
-            margin-bottom: 10px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
         }
         button {
-            background-color: #28a745;
             color: #fff;
             border: none;
             cursor: pointer;
-            font-weight: bold;
         }
         button:hover {
-            background-color: #218838;
         }
-        /* Processing indicator */
-        #processing-indicator {
-            display: none;
-            text-align: center;
-            color: #ff9900;
-            font-weight: bold;
             margin-top: 10px;
         }
-    </style>
-    <script>
-        function processVideo(event) {
-            event.preventDefault();
-            const formData = new FormData(document.getElementById('video-form'));
-            // Show processing indicator
-            document.getElementById('processing-indicator').style.display = 'block';
-            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))
-                .finally(() => {
-                    // Hide processing indicator
-                    document.getElementById('processing-indicator').style.display = 'none';
-                });
         }
-    </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>
-    <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>
-        <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>
-    <!-- Processing indicator -->
-    <div id="processing-indicator">Processing your video, please wait...</div>
 </body>
 </html>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Video Processing</title>
+    <!-- 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;
+        }
+    </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>
+            <!-- Copy Streams option shown 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>
+            <!-- Format selection 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>
+            <!-- Trim Video inputs -->
+            <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>
+            <!-- Resize Video inputs -->
+            <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>
+            <!-- Change Video Speed inputs -->
+            <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/hide 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 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');
+                copyStreamsContainer.classList.remove('hidden');  // Show for Convert Format
+            }
+        });
+        // Trigger the change event to set initial visibility
+        document.getElementById('action').dispatchEvent(new Event('change'));
+    </script>
 </body>
 </html>