Spaces:

RandomPersonRR
/

FFmpeg

Sleeping

App Files Files Community

RandomPersonRR commited on Sep 11, 2024

Commit

c950606

verified ·

1 Parent(s): 8df4907

Update index.html

Browse files

Files changed (1) hide show

index.html +71 -56

index.html CHANGED Viewed

@@ -3,76 +3,91 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FFmpeg Web Interface</title>
 </head>
 <body>
-    <h1>FFmpeg Web Interface</h1>
-    <!-- File Upload Section -->
-    <h2>Upload File</h2>
-    <input type="file" id="fileUpload" />
-    <button onclick="uploadFile()">Upload</button>
-    <!-- HTML Audio Player -->
-    <h2>Audio Player</h2>
-    <audio id="audioPlayer" controls></audio>
-    <!-- HTML Video Player -->
-    <h2>Video Player</h2>
-    <video id="videoPlayer" controls width="600"></video>
-    <!-- Command Input -->
-    <h2>Command Input</h2>
-    <textarea id="commandInput" rows="4" cols="50" placeholder="Enter FFmpeg commands here..."></textarea>
-    <button onclick="executeCommand()">Execute Command</button>
-    <!-- Logs Section -->
-    <h2>Logs</h2>
-    <pre id="logs"></pre>
     <script>
-        function uploadFile() {
-            const fileInput = document.getElementById('fileUpload');
-            const file = fileInput.files[0];
-            if (file) {
-                const formData = new FormData();
-                formData.append('file', file);
-                fetch('/upload', {
-                    method: 'POST',
-                    body: formData
-                }).then(response => response.text())
-                .then(data => {
-                    document.getElementById('logs').textContent = data;
-                    const audioPlayer = document.getElementById('audioPlayer');
-                    const videoPlayer = document.getElementById('videoPlayer');
-                    const fileUrl = URL.createObjectURL(file);
-                    // Display appropriate player based on file type
-                    if (file.type.startsWith('audio/')) {
-                        audioPlayer.src = fileUrl;
-                        audioPlayer.style.display = 'block';
-                        videoPlayer.style.display = 'none';
-                    } else if (file.type.startsWith('video/')) {
-                        videoPlayer.src = fileUrl;
-                        videoPlayer.style.display = 'block';
-                        audioPlayer.style.display = 'none';
-                    }
-                });
-            }
-        }
-        function executeCommand() {
             const command = document.getElementById('commandInput').value;
-            fetch('/execute', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ command })
-            }).then(response => response.text())
             .then(data => {
-                document.getElementById('logs').textContent = data;
             });
-        }
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FFmpeg Command Executor</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+        }
+        textarea {
+            width: 100%;
+            height: 100px;
+        }
+        .log, .player {
+            margin-top: 20px;
+        }
+        #videoPlayer {
+            display: none;
+            width: 100%;
+            height: auto;
+        }
+    </style>
 </head>
 <body>
+    <h1>FFmpeg Command Executor</h1>
+    <!-- File upload form -->
+    <form id="uploadForm" enctype="multipart/form-data">
+        <label for="fileInput">Upload a file:</label>
+        <input type="file" id="fileInput" name="file" required>
+        <br><br>
+        <input type="submit" value="Upload">
+    </form>
+    <!-- Command input -->
+    <h2>FFmpeg Command</h2>
+    <textarea id="commandInput" placeholder="Enter FFmpeg command here..."></textarea>
+    <br>
+    <button id="runCommand">Run Command</button>
+    <!-- Logs and video player -->
+    <div class="log">
+        <h2>FFmpeg Logs</h2>
+        <pre id="logOutput"></pre>
+    </div>
+    <div class="player">
+        <h2>Processed Video</h2>
+        <video id="videoPlayer" controls>
+            <source id="videoSource" src="" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+    </div>
     <script>
+        document.getElementById('uploadForm').addEventListener('submit', function(event) {
+            event.preventDefault();
+            const formData = new FormData(this);
+            fetch('/upload', {
+                method: 'POST',
+                body: formData
+            }).then(response => response.text())
+            .then(text => {
+                document.getElementById('logOutput').textContent = 'File uploaded successfully.';
+            }).catch(error => {
+                document.getElementById('logOutput').textContent = 'Error uploading file: ' + error.message;
+            });
+        });
+        document.getElementById('runCommand').addEventListener('click', function() {
             const command = document.getElementById('commandInput').value;
+            fetch('/run', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ command: command })
+            }).then(response => response.json())
             .then(data => {
+                document.getElementById('logOutput').textContent = data.logs;
+                if (data.videoUrl) {
+                    const videoPlayer = document.getElementById('videoPlayer');
+                    const videoSource = document.getElementById('videoSource');
+                    videoSource.src = data.videoUrl;
+                    videoPlayer.style.display = 'block';
+                }
+            }).catch(error => {
+                document.getElementById('logOutput').textContent = 'Error running command: ' + error.message;
             });
+        });
     </script>
 </body>
 </html>