viswanani commited on
Commit
dcf29af
·
verified ·
1 Parent(s): 671a485

Upload 11 files

Browse files
Files changed (12) hide show
  1. .gitattributes +3 -0
  2. 6773201.jpg +3 -0
  3. LICENSE +21 -0
  4. README.md +58 -13
  5. app.py +60 -0
  6. main.py +156 -0
  7. static/6773201.jpg +3 -0
  8. static/script.js +60 -0
  9. static/style.css +103 -0
  10. templates/index.html +30 -0
  11. templates/result.html +30 -0
  12. 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

  • SHA256: 23a4bbc561a07a5b2cb7ce0fd9c064d6deda2f97b283059caf2878aae912fab4
  • Pointer size: 131 Bytes
  • Size of remote file: 281 kB
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
- title: GullyDRS.LBW.Predictorapp
3
- emoji: 📈
4
- colorFrom: green
5
- colorTo: indigo
6
- sdk: gradio
7
- sdk_version: 5.34.2
8
- app_file: app.py
9
- pinned: false
10
- license: mit
11
- ---
12
-
13
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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

  • SHA256: 23a4bbc561a07a5b2cb7ce0fd9c064d6deda2f97b283059caf2878aae912fab4
  • Pointer size: 131 Bytes
  • Size of remote file: 281 kB
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