Spaces:
Runtime error
Runtime error
Upload 11 files
Browse files- .gitattributes +3 -0
- 6773201.jpg +3 -0
- LICENSE +21 -0
- README.md +58 -13
- app.py +60 -0
- main.py +156 -0
- static/6773201.jpg +3 -0
- static/script.js +60 -0
- static/style.css +103 -0
- templates/index.html +30 -0
- templates/result.html +30 -0
- test2.mp4 +3 -0
.gitattributes
CHANGED
|
@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
|
|
| 33 |
*.zip filter=lfs diff=lfs merge=lfs -text
|
| 34 |
*.zst filter=lfs diff=lfs merge=lfs -text
|
| 35 |
*tfevents* filter=lfs diff=lfs merge=lfs -text
|
|
|
|
|
|
|
|
|
|
|
|
| 33 |
*.zip filter=lfs diff=lfs merge=lfs -text
|
| 34 |
*.zst filter=lfs diff=lfs merge=lfs -text
|
| 35 |
*tfevents* filter=lfs diff=lfs merge=lfs -text
|
| 36 |
+
6773201.jpg filter=lfs diff=lfs merge=lfs -text
|
| 37 |
+
static/6773201.jpg filter=lfs diff=lfs merge=lfs -text
|
| 38 |
+
test2.mp4 filter=lfs diff=lfs merge=lfs -text
|
6773201.jpg
ADDED
|
Git LFS Details
|
LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
MIT License
|
| 2 |
+
|
| 3 |
+
Copyright (c) 2024 Naveen Wilson
|
| 4 |
+
|
| 5 |
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
| 6 |
+
of this software and associated documentation files (the "Software"), to deal
|
| 7 |
+
in the Software without restriction, including without limitation the rights
|
| 8 |
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
| 9 |
+
copies of the Software, and to permit persons to whom the Software is
|
| 10 |
+
furnished to do so, subject to the following conditions:
|
| 11 |
+
|
| 12 |
+
The above copyright notice and this permission notice shall be included in all
|
| 13 |
+
copies or substantial portions of the Software.
|
| 14 |
+
|
| 15 |
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
| 16 |
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
| 17 |
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
| 18 |
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
| 19 |
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
| 20 |
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
| 21 |
+
SOFTWARE.
|
README.md
CHANGED
|
@@ -1,13 +1,58 @@
|
|
| 1 |
-
|
| 2 |
-
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# Cricket Ball Tracking using YOLOv8
|
| 2 |
+
|
| 3 |
+
## Overview
|
| 4 |
+
This project leverages **YOLOv8** to accurately detect and track a cricket ball in video footage, predicting its trajectory in real time. Designed as a mini **Decision Review System (DRS)**, it integrates **OpenCV** for enhanced visualization and analysis.
|
| 5 |
+
|
| 6 |
+
## Key Features
|
| 7 |
+
|
| 8 |
+
- **Precision Ball Tracking**: Utilizes YOLOv8 to detect and track the cricket ball with high accuracy.
|
| 9 |
+
- **Trajectory Prediction**: Employs a linear regression model to forecast the ball’s future path based on historical movement.
|
| 10 |
+
- **Enhanced Visualization**: Overlays both the tracked path and predicted trajectory directly onto the video for better interpretation.
|
| 11 |
+
- **DRS Simulation**: Analyzes the ball's trajectory to estimate its impact point, mimicking professional DRS systems.
|
| 12 |
+
|
| 13 |
+
## Installation & Setup
|
| 14 |
+
|
| 15 |
+
### 1. Clone the Repository
|
| 16 |
+
```bash
|
| 17 |
+
git clone https://github.com/your-username/cricket-ball-tracking.git
|
| 18 |
+
cd cricket-ball-tracking
|
| 19 |
+
```
|
| 20 |
+
|
| 21 |
+
### 2. Install Dependencies
|
| 22 |
+
```bash
|
| 23 |
+
pip install -r requirements.txt
|
| 24 |
+
```
|
| 25 |
+
|
| 26 |
+
### 3. Execute the Main Script
|
| 27 |
+
```bash
|
| 28 |
+
python main.py
|
| 29 |
+
```
|
| 30 |
+
This command processes the input video, tracks the ball, and outputs a new video with trajectory visualization.
|
| 31 |
+
|
| 32 |
+
## Project Structure
|
| 33 |
+
```
|
| 34 |
+
cricket-ball-tracking/
|
| 35 |
+
│── main.py # Core script for ball tracking and visualization
|
| 36 |
+
│── model/ # Directory containing YOLOv8 model weights
|
| 37 |
+
│── data/ # Folder for input and output videos
|
| 38 |
+
│── requirements.txt # List of dependencies
|
| 39 |
+
│── README.md # Project documentation
|
| 40 |
+
```
|
| 41 |
+
|
| 42 |
+
## Future Enhancements
|
| 43 |
+
|
| 44 |
+
- **Advanced Prediction Models**: Integrate deep learning techniques for superior trajectory forecasting.
|
| 45 |
+
- **Comprehensive Ball Analysis**: Include additional features such as ball speed, spin rate, and bounce estimation.
|
| 46 |
+
- **User-Friendly Interface**: Develop an intuitive GUI for better interaction and visualization.
|
| 47 |
+
|
| 48 |
+
## Contribution Guidelines
|
| 49 |
+
We welcome contributions from the community! If you'd like to contribute, please follow these steps:
|
| 50 |
+
- Fork the repository
|
| 51 |
+
- Create a feature branch (`git checkout -b feature-branch`)
|
| 52 |
+
- Commit your changes (`git commit -m 'Add new feature'`)
|
| 53 |
+
- Push to the branch (`git push origin feature-branch`)
|
| 54 |
+
- Submit a pull request for review
|
| 55 |
+
|
| 56 |
+
## License
|
| 57 |
+
|
| 58 |
+
This project is licensed under the **MIT License**. For more details, please refer to the [LICENSE](LICENSE) file.
|
app.py
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
|
| 2 |
+
from flask import Flask, render_template, request, redirect, url_for
|
| 3 |
+
import os
|
| 4 |
+
from werkzeug.utils import secure_filename
|
| 5 |
+
import cv2
|
| 6 |
+
from multiprocessing import Process
|
| 7 |
+
from main import split_video_last_frame, detect_and_track, color_pixels_last_frame
|
| 8 |
+
|
| 9 |
+
app = Flask(__name__)
|
| 10 |
+
|
| 11 |
+
# Configure upload folder and allowed extensions
|
| 12 |
+
UPLOAD_FOLDER = 'uploads'
|
| 13 |
+
ALLOWED_EXTENSIONS = {'mp4'}
|
| 14 |
+
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
|
| 15 |
+
|
| 16 |
+
|
| 17 |
+
# Function to check if the file extension is allowed
|
| 18 |
+
def allowed_file(filename):
|
| 19 |
+
return '.' in filename and \
|
| 20 |
+
filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
# Route for home page
|
| 24 |
+
@app.route('/', methods=['GET', 'POST'])
|
| 25 |
+
def home():
|
| 26 |
+
if request.method == 'POST':
|
| 27 |
+
# Check if the post request has the file part
|
| 28 |
+
if 'file' not in request.files:
|
| 29 |
+
return redirect(request.url)
|
| 30 |
+
file = request.files['file']
|
| 31 |
+
# If user does not select file, browser also
|
| 32 |
+
# submit an empty part without filename
|
| 33 |
+
if file.filename == '':
|
| 34 |
+
return redirect(request.url)
|
| 35 |
+
if file and allowed_file(file.filename):
|
| 36 |
+
# Create the uploads directory if it doesn't exist
|
| 37 |
+
if not os.path.exists(app.config['UPLOAD_FOLDER']):
|
| 38 |
+
os.makedirs(app.config['UPLOAD_FOLDER'])
|
| 39 |
+
# Save uploaded video
|
| 40 |
+
filename = secure_filename(file.filename)
|
| 41 |
+
video_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
|
| 42 |
+
file.save(video_path)
|
| 43 |
+
# Start processing the video
|
| 44 |
+
p1 = Process(target=detect_and_track, args=(video_path, filename[:-4] + '_coordinates.txt'))
|
| 45 |
+
p2 = Process(target=split_video_last_frame, args=(video_path, os.path.join('static', 'last_frame.jpg')))
|
| 46 |
+
p1.start()
|
| 47 |
+
p2.start()
|
| 48 |
+
p1.join()
|
| 49 |
+
p2.join()
|
| 50 |
+
# Process the colored last frame
|
| 51 |
+
colored_last_frame = color_pixels_last_frame(os.path.join('static', 'last_frame.jpg'),
|
| 52 |
+
filename[:-4] + '_coordinates.txt')
|
| 53 |
+
cv2.imwrite(os.path.join('static', 'colored_last_frame.jpg'), colored_last_frame)
|
| 54 |
+
return render_template('result.html', result_image='colored_last_frame.jpg')
|
| 55 |
+
return render_template('index.html')
|
| 56 |
+
|
| 57 |
+
|
| 58 |
+
|
| 59 |
+
if __name__ == '__main__':
|
| 60 |
+
app.run(debug=True)
|
main.py
ADDED
|
@@ -0,0 +1,156 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import cv2
|
| 2 |
+
import os
|
| 3 |
+
import multiprocessing
|
| 4 |
+
from ultralytics import YOLO
|
| 5 |
+
import numpy as np
|
| 6 |
+
from sklearn.linear_model import LinearRegression
|
| 7 |
+
N
|
| 8 |
+
def color_pixels_last_frame(last_frame_path, coordinates_file_path):
|
| 9 |
+
# Read the last frame
|
| 10 |
+
last_frame = cv2.imread(last_frame_path)
|
| 11 |
+
|
| 12 |
+
# Initialize the previous point
|
| 13 |
+
prev_point = None
|
| 14 |
+
|
| 15 |
+
# Initialize the coordinates list
|
| 16 |
+
coordinates = []
|
| 17 |
+
|
| 18 |
+
# Open the coordinates file
|
| 19 |
+
with open(coordinates_file_path, 'r') as f:
|
| 20 |
+
# Read each line (each line contains coordinates)
|
| 21 |
+
for line in f:
|
| 22 |
+
# Extract coordinates
|
| 23 |
+
x, y = map(float, line.strip().split(',')) # Convert to float instead of int
|
| 24 |
+
x, y = int(x), int(y) # Convert to int if necessary
|
| 25 |
+
|
| 26 |
+
# Add the coordinates to the list
|
| 27 |
+
coordinates.append((x, y))
|
| 28 |
+
|
| 29 |
+
# Draw a circle using coordinates on the last frame
|
| 30 |
+
cv2.circle(last_frame, (x, y), 10, (0, 255, 0), cv2.FILLED) # Green filled circle, adjust color as needed
|
| 31 |
+
|
| 32 |
+
# If there is a previous point, draw a line from the previous point to the current point
|
| 33 |
+
if prev_point is not None:
|
| 34 |
+
cv2.line(last_frame, prev_point, (x, y), (0, 255, 0), 10) # Green line, adjust color as needed
|
| 35 |
+
|
| 36 |
+
# Update the previous point
|
| 37 |
+
prev_point = (x, y)
|
| 38 |
+
|
| 39 |
+
# Convert the coordinates to a numpy array
|
| 40 |
+
coordinates = np.array(coordinates)
|
| 41 |
+
|
| 42 |
+
# Create a Linear Regression model
|
| 43 |
+
model = LinearRegression()
|
| 44 |
+
|
| 45 |
+
# Ensure we only consider the latest 4 points
|
| 46 |
+
if len(coordinates) > 4:
|
| 47 |
+
coordinates = coordinates[-4:]
|
| 48 |
+
|
| 49 |
+
# Train the model with the current coordinates
|
| 50 |
+
model.fit(np.arange(len(coordinates)).reshape(-1, 1), coordinates)
|
| 51 |
+
|
| 52 |
+
# Predict the next 3 coordinates
|
| 53 |
+
next_coordinates = model.predict(np.array([len(coordinates), len(coordinates) + 1, len(coordinates) + 2]).reshape(-1, 1))
|
| 54 |
+
|
| 55 |
+
# Draw the predicted coordinates in red and connect them with a line
|
| 56 |
+
prev_predicted_point = None
|
| 57 |
+
for x, y in next_coordinates:
|
| 58 |
+
x, y = int(x), int(y) # Convert to int if necessary
|
| 59 |
+
cv2.circle(last_frame, (x, y), 10, (0, 0, 255), cv2.FILLED) # Red filled circle, adjust color as needed
|
| 60 |
+
|
| 61 |
+
# If there is a previous predicted point, draw a line from the previous predicted point to the current predicted point
|
| 62 |
+
if prev_predicted_point is not None:
|
| 63 |
+
cv2.line(last_frame, prev_predicted_point, (x, y), (0, 0, 255), 10) # Red line, adjust color as needed
|
| 64 |
+
|
| 65 |
+
# Update the previous predicted point
|
| 66 |
+
prev_predicted_point = (x, y)
|
| 67 |
+
|
| 68 |
+
return last_frame
|
| 69 |
+
|
| 70 |
+
|
| 71 |
+
|
| 72 |
+
# Function to split video and save the last frame
|
| 73 |
+
def split_video_last_frame(video_path, save_path):
|
| 74 |
+
# Open the video file
|
| 75 |
+
cap = cv2.VideoCapture(video_path)
|
| 76 |
+
|
| 77 |
+
# Get total number of frames
|
| 78 |
+
total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
|
| 79 |
+
|
| 80 |
+
# Read and discard all frames except the last one
|
| 81 |
+
for _ in range(total_frames - 1):
|
| 82 |
+
success, _ = cap.read()
|
| 83 |
+
if not success:
|
| 84 |
+
break
|
| 85 |
+
|
| 86 |
+
# Read the last frame
|
| 87 |
+
success, last_frame = cap.read()
|
| 88 |
+
|
| 89 |
+
# Save the last frame
|
| 90 |
+
if success:
|
| 91 |
+
cv2.imwrite(save_path, last_frame)
|
| 92 |
+
print("Last frame saved successfully.")
|
| 93 |
+
else:
|
| 94 |
+
print("Failed to read the last frame.")
|
| 95 |
+
|
| 96 |
+
# Release the video capture object
|
| 97 |
+
cap.release()
|
| 98 |
+
|
| 99 |
+
# Load YOLOv8 model
|
| 100 |
+
def detect_and_track(video_path, output_filename):
|
| 101 |
+
model = YOLO('best.pt')#loading model
|
| 102 |
+
cap = cv2.VideoCapture(video_path)
|
| 103 |
+
ret = True
|
| 104 |
+
frameTime = 10 # Time of each frame in ms (adjust for playback speed)
|
| 105 |
+
|
| 106 |
+
# Open the coordinates file for writing
|
| 107 |
+
with open(output_filename, 'w') as f:
|
| 108 |
+
pass
|
| 109 |
+
# Read frames
|
| 110 |
+
while ret:
|
| 111 |
+
ret, frame = cap.read()
|
| 112 |
+
|
| 113 |
+
if ret:
|
| 114 |
+
# Detect and track objects
|
| 115 |
+
results = model.track(frame, persist=True)
|
| 116 |
+
|
| 117 |
+
# Extract bounding box coordinates, calculate mid point, and save to file
|
| 118 |
+
for box in results[0].boxes:
|
| 119 |
+
x1, y1, x2, y2 = map(int, box.xyxy[0]) # Convert to integer values
|
| 120 |
+
mid_x, mid_y = (x1 + x2) / 2, (y1 + y2) / 2 # Calculate mid point of bounding box
|
| 121 |
+
f.write(f"{mid_x}, {mid_y}\n") # Write mid point coordinates tofile
|
| 122 |
+
|
| 123 |
+
# Release video capture object and close all frames
|
| 124 |
+
cap.release()
|
| 125 |
+
cv2.destroyAllWindows()
|
| 126 |
+
|
| 127 |
+
print(f"Mid point coordinates saved to: {output_filename}" if os.path.exists(output_filename) else "") # Conditional print for coordinates file
|
| 128 |
+
|
| 129 |
+
|
| 130 |
+
if __name__ == '__main__':
|
| 131 |
+
# Example usage:
|
| 132 |
+
# Load video
|
| 133 |
+
video_path = "C:/Users/navee/OneDrive/Desktop/test/1.mp4"
|
| 134 |
+
# File paths
|
| 135 |
+
save_path = "last_frame.jpg"
|
| 136 |
+
coordinates_file_path = os.path.splitext(os.path.basename(video_path))[0] + '_coordinates.txt'
|
| 137 |
+
last_frame_path = "last_frame.jpg"
|
| 138 |
+
|
| 139 |
+
'''# Multiprocessing
|
| 140 |
+
p1 = multiprocessing.Process(target=detect_and_track, args=(video_path, coordinates_file_path))
|
| 141 |
+
p2 = multiprocessing.Process(target=split_video_last_frame, args=(video_path, save_path))
|
| 142 |
+
p1.start()
|
| 143 |
+
p2.start()
|
| 144 |
+
p1.join()
|
| 145 |
+
p2.join()'''
|
| 146 |
+
|
| 147 |
+
# Call the function to color pixels in the last frame
|
| 148 |
+
#colored_last_frame = color_pixels_last_frame(last_frame_path, coordinates_file_path)
|
| 149 |
+
|
| 150 |
+
# Save the modified last frame
|
| 151 |
+
# cv2.imwrite("colored_last_frame.jpg", colored_last_frame)
|
| 152 |
+
# Show the image
|
| 153 |
+
# cv2.imshow("Colored last frame", colored_last_frame)
|
| 154 |
+
#cv2.waitKey(0)
|
| 155 |
+
|
| 156 |
+
print("Colored last frame saved as 'colored_last_frame.jpg'.")
|
static/6773201.jpg
ADDED
|
Git LFS Details
|
static/script.js
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
const videoUpload = document.getElementById('videoUpload');
|
| 2 |
+
const processButton = document.getElementById('processButton');
|
| 3 |
+
const showTrackedButton = document.getElementById('showTrackedButton');
|
| 4 |
+
const output = document.getElementById('output');
|
| 5 |
+
const resultImage = document.getElementById('resultImage');
|
| 6 |
+
|
| 7 |
+
videoUpload.addEventListener('change', function() {
|
| 8 |
+
// Enable buttons when a video is uploaded
|
| 9 |
+
processButton.disabled = false;
|
| 10 |
+
showTrackedButton.disabled = false;
|
| 11 |
+
processButton.style.opacity = 1;
|
| 12 |
+
});
|
| 13 |
+
|
| 14 |
+
// Function to display processing message
|
| 15 |
+
function displayProcessingMessage() {
|
| 16 |
+
output.innerHTML = 'Processing video...';
|
| 17 |
+
}
|
| 18 |
+
|
| 19 |
+
// Function to display processing complete message
|
| 20 |
+
function displayProcessingCompleteMessage() {
|
| 21 |
+
output.innerHTML = '<b>Video processing complete!</b><br>Ball trajectory analysis available.';
|
| 22 |
+
showTrackedButton.style.display = 'block'; // Show "See Tracked Video" button after processing
|
| 23 |
+
}
|
| 24 |
+
|
| 25 |
+
// Function to send video to server for processing
|
| 26 |
+
function processVideo() {
|
| 27 |
+
// Create FormData object to send the video file
|
| 28 |
+
const formData = new FormData();
|
| 29 |
+
formData.append('file', videoUpload.files[0]);
|
| 30 |
+
|
| 31 |
+
// Send POST request to server
|
| 32 |
+
const xhr = new XMLHttpRequest();
|
| 33 |
+
xhr.open('POST', '/', true);
|
| 34 |
+
xhr.onreadystatechange = function() {
|
| 35 |
+
if (xhr.readyState === XMLHttpRequest.DONE) {
|
| 36 |
+
if (xhr.status === 200) {
|
| 37 |
+
// Display processing complete message after receiving response
|
| 38 |
+
displayProcessingCompleteMessage();
|
| 39 |
+
} else {
|
| 40 |
+
// Handle error
|
| 41 |
+
output.innerHTML = 'Error processing video.';
|
| 42 |
+
}
|
| 43 |
+
}
|
| 44 |
+
};
|
| 45 |
+
xhr.send(formData);
|
| 46 |
+
}
|
| 47 |
+
|
| 48 |
+
// Process video when "Start Tracking" button is clicked
|
| 49 |
+
processButton.addEventListener('click', function() {
|
| 50 |
+
displayProcessingMessage(); // Display processing message immediately
|
| 51 |
+
processVideo(); // Send video to server for processing
|
| 52 |
+
});
|
| 53 |
+
|
| 54 |
+
// Display tracked image when "See Result" button is clicked
|
| 55 |
+
showTrackedButton.addEventListener('click', function() {
|
| 56 |
+
// Show the result image
|
| 57 |
+
resultImage.style.display = 'block';
|
| 58 |
+
// Set the source of the result image
|
| 59 |
+
resultImage.src = 'C:\Users\navee\OneDrive\Desktop\mini using yolo\static\script.js';
|
| 60 |
+
});
|
static/style.css
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
body {
|
| 2 |
+
font-family: sans-serif;
|
| 3 |
+
background-color: #e0e0e0;
|
| 4 |
+
color: #333;
|
| 5 |
+
margin: 0;
|
| 6 |
+
padding: 0;
|
| 7 |
+
background-image: url("6773201.jpg");
|
| 8 |
+
background-repeat: no-repeat;
|
| 9 |
+
background-attachment: fixed; /* Set background image as fixed */
|
| 10 |
+
background-position: center;
|
| 11 |
+
position: relative; /* Position relative for absolute positioning of overlay */
|
| 12 |
+
}
|
| 13 |
+
|
| 14 |
+
/* Overlay to create faded effect */
|
| 15 |
+
.overlay {
|
| 16 |
+
position: absolute;
|
| 17 |
+
top: 0;
|
| 18 |
+
left: 0;
|
| 19 |
+
width: 100%;
|
| 20 |
+
height: 100%;
|
| 21 |
+
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
|
| 22 |
+
}
|
| 23 |
+
|
| 24 |
+
.container {
|
| 25 |
+
max-width: 800px;
|
| 26 |
+
margin: 50px auto;
|
| 27 |
+
text-align: center;
|
| 28 |
+
position: relative; /* Position relative for z-index stacking */
|
| 29 |
+
z-index: 1; /* Ensure container appears above overlay */
|
| 30 |
+
}
|
| 31 |
+
|
| 32 |
+
.header-box {
|
| 33 |
+
padding: 20px;
|
| 34 |
+
border: 2px solid #ccc; /* Box border */
|
| 35 |
+
border-radius: 5px;
|
| 36 |
+
margin-bottom: 20px;
|
| 37 |
+
background-color: #f2f2f2; /* Light gray background for the box */
|
| 38 |
+
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Shadow for the box */
|
| 39 |
+
}
|
| 40 |
+
|
| 41 |
+
.header-box h1 {
|
| 42 |
+
font-size: 2em;
|
| 43 |
+
margin-bottom: 10px;
|
| 44 |
+
color: #c0392b; /* Reddish color for heading */
|
| 45 |
+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
|
| 46 |
+
}
|
| 47 |
+
|
| 48 |
+
.header-box h1 .ball {
|
| 49 |
+
color: #ffd700; /* Gold color for "Ball" */
|
| 50 |
+
font-weight: bold; /* Make "Ball" stand out */
|
| 51 |
+
}
|
| 52 |
+
|
| 53 |
+
.header-box img {
|
| 54 |
+
width: 100px;
|
| 55 |
+
width: auto;
|
| 56 |
+
}
|
| 57 |
+
|
| 58 |
+
.content {
|
| 59 |
+
padding: 0px;
|
| 60 |
+
color: #ede5e4;
|
| 61 |
+
}
|
| 62 |
+
|
| 63 |
+
.content p {
|
| 64 |
+
margin-bottom: 10px;
|
| 65 |
+
}
|
| 66 |
+
|
| 67 |
+
#videoUpload {
|
| 68 |
+
padding: 40px;
|
| 69 |
+
border: 2px solid #4d4242;
|
| 70 |
+
border-radius: 5px;
|
| 71 |
+
background-color: #e0caca;
|
| 72 |
+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
|
| 73 |
+
}
|
| 74 |
+
|
| 75 |
+
.button-container {
|
| 76 |
+
display: flex;
|
| 77 |
+
color: black;
|
| 78 |
+
justify-content: center;
|
| 79 |
+
margin-top: 10px;
|
| 80 |
+
}
|
| 81 |
+
|
| 82 |
+
button {
|
| 83 |
+
padding: 10px 20px;
|
| 84 |
+
background-color: #7c1105; /* Red color for track button */
|
| 85 |
+
color: #fff; /* White text for track button */
|
| 86 |
+
border: none;
|
| 87 |
+
border-radius: 5px;
|
| 88 |
+
cursor: pointer;
|
| 89 |
+
margin-right: 10px; /* Spacing between buttons */
|
| 90 |
+
}
|
| 91 |
+
|
| 92 |
+
button:hover {
|
| 93 |
+
background-color: #a72e23; /* Darker red on hover */
|
| 94 |
+
}
|
| 95 |
+
|
| 96 |
+
#processButton:disabled, #showTrackedButton:disabled {
|
| 97 |
+
opacity: 1;
|
| 98 |
+
cursor: default;
|
| 99 |
+
}
|
| 100 |
+
|
| 101 |
+
#output {
|
| 102 |
+
margin-top: 20px;
|
| 103 |
+
}
|
templates/index.html
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>Ball Tracker</title>
|
| 7 |
+
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
| 8 |
+
</head>
|
| 9 |
+
<body>
|
| 10 |
+
<div class="container">
|
| 11 |
+
<div class="header-box">
|
| 12 |
+
<h1>CRICKET <span class="ball"> BALL</span>TRACKER</h1>
|
| 13 |
+
</div>
|
| 14 |
+
<div class="content">
|
| 15 |
+
<p>Upload the video to track the ball !</p>
|
| 16 |
+
<form action="/" method="post" enctype="multipart/form-data">
|
| 17 |
+
<input type="file" name="file" id="videoUpload" accept="video/*">
|
| 18 |
+
<div class="button-container">
|
| 19 |
+
<button id="processButton" disabled>Start Tracking</button>
|
| 20 |
+
<button id="showTrackedButton" disabled>See Result</button>
|
| 21 |
+
</div>
|
| 22 |
+
</form>
|
| 23 |
+
<div id="output">
|
| 24 |
+
<img id="resultImage" src="" alt="Tracked Image" style="display: none;">
|
| 25 |
+
</div>
|
| 26 |
+
</div>
|
| 27 |
+
</div>
|
| 28 |
+
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
| 29 |
+
</body>
|
| 30 |
+
</html>
|
templates/result.html
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>BALL TRAGETORY</title>
|
| 7 |
+
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
| 8 |
+
</head>
|
| 9 |
+
<body>
|
| 10 |
+
<div class="container">
|
| 11 |
+
<div class="header-box">
|
| 12 |
+
<h1>CRICKET <span class="ball">BALL </span>TRACKER</h1>
|
| 13 |
+
</div>
|
| 14 |
+
<div class="content">
|
| 15 |
+
<p>Upload a video and track ball !</p>
|
| 16 |
+
<form action="/" method="post" enctype="multipart/form-data">
|
| 17 |
+
<input type="file" name="file" id="videoUpload" accept="video/*" disabled>
|
| 18 |
+
<div class="button-container">
|
| 19 |
+
<button id="processButton" disabled>Start Tracking</button>
|
| 20 |
+
<button id="showTrackedButton" disabled>See Result</button>
|
| 21 |
+
</div>
|
| 22 |
+
</form>
|
| 23 |
+
<div id="output">
|
| 24 |
+
<img id="resultImage" src="{{ url_for('static', filename='colored_last_frame.jpg') }}" alt="Tracked Image">
|
| 25 |
+
</div>
|
| 26 |
+
</div>
|
| 27 |
+
</div>
|
| 28 |
+
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
| 29 |
+
</body>
|
| 30 |
+
</html>
|
test2.mp4
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
version https://git-lfs.github.com/spec/v1
|
| 2 |
+
oid sha256:0194b4b68c6d816c91ee263ef6669545c71a4ba806c09cfce7e52dde120c260b
|
| 3 |
+
size 519505
|