video file related changes

app/main.py

@@ -5,6 +5,7 @@ from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from fastapi.middleware.cors import CORSMiddleware
 from pydantic import BaseModel
+import mimetypes  # For determining file type
 
 import subprocess
 from pathlib import Path
@@ -38,6 +39,10 @@ async def detect_objects(request: Request, file: UploadFile):
         with open(input_file_path, "wb") as input_file:
             input_file.write(await file.read())
 
+        # Determine the file type
+        file_type, _ = mimetypes.guess_type(file.filename)
+        is_video = file_type and file_type.startswith('video')
+
         print('Detect start')
 
         # Run YOLOv7 detection and save output
@@ -55,7 +60,7 @@ async def detect_objects(request: Request, file: UploadFile):
         # Render HTML using Jinja2Templates
         return templates.TemplateResponse(
             "result.html",
-            {"request": request, "output_image": str(output_image_path)}
+            {"request": request, "output_image": str(output_image_path), "is_video": is_video}
         )
 
 

app/templates/result.html

@@ -10,7 +10,7 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            justify-content: flex-start;
+            justify-content: flex-start; /* Align content at the top */
             height: 100vh;
             margin: 0;
         }
@@ -28,13 +28,25 @@
             height: auto;
             display: none; /* Initially hidden until loaded */
         }
+
+        #output-video {
+            max-width: 100%;
+            height: auto;
+            display: none; /* Initially hidden until loaded */
+        }
     </style>
     <script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
     <script type="text/javascript">
         function onOpenCvReady() {
-            document.getElementById("output").src = "{{ output_image }}";
+            var isVideo = "{{ is_video }}";  // Assuming you pass a variable indicating whether it's a video
+            if (isVideo === "true") {
+                document.getElementById("output-video").src = "{{ output_image }}";
+                document.getElementById("output-video").style.display = "block"; // Show the output video
+            } else {
+                document.getElementById("output").src = "{{ output_image }}";
+                document.getElementById("output").style.display = "block"; // Show the output image
+            }
             document.getElementById("loading").style.display = "none"; // Hide the loading icon
-            document.getElementById("output").style.display = "block"; // Show the output image
         }
 
         // Function to show loading icon while waiting for response
@@ -53,5 +65,6 @@
     <br/>
     <div id="loading">Loading...</div>
     <img id="output"/>
+    <video id="output-video" controls></video>
 </body>
 </html>