Commit 4b0c6de7 authored by Thivanka Saparamadu's avatar Thivanka Saparamadu

Update

parent 018db342
......@@ -16,6 +16,7 @@
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.5.0",
"file-saver": "^2.0.5",
"install": "^0.13.0",
"npm": "^9.8.1",
"react": "^18.2.0",
......@@ -8604,6 +8605,11 @@
"webpack": "^4.0.0 || ^5.0.0"
}
},
"node_modules/file-saver": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
},
"node_modules/filelist": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
......
......@@ -11,6 +11,7 @@
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.5.0",
"file-saver": "^2.0.5",
"install": "^0.13.0",
"npm": "^9.8.1",
"react": "^18.2.0",
......
import React from "react";
import Backdrop from "@mui/material/Backdrop";
import CircularProgress from "@mui/material/CircularProgress";
import Typography from "@mui/material/Typography";
export default function Loader({ openState, message }) {
return (
<div>
<Backdrop
sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={openState}
>
<div style={{ textAlign: "center" }}>
<CircularProgress color="inherit" sx={{ fontWeight: "bold" }} />
<Typography variant="h5" sx={{ fontWeight: "bold" }}>
{message}
</Typography>
</div>
</Backdrop>
</div>
);
}
import React from "react";
import "../css/movie-analysis-card.css";
import DownloadIcon from "@mui/icons-material/Download";
import axios from "axios";
import { saveAs } from "file-saver";
function MovieAnalysisCard({image,name}) {
const [mouseHover, setMouseHover] = React.useState(false);
......@@ -13,9 +14,18 @@ function MovieAnalysisCard({image,name}) {
setMouseHover(false);
};
const reportDownloadHandler = () => {
alert("hi");
axios
.get(`http://localhost:5000/download/${name}`)
.then((res) => {
saveAs(res.request.responseURL, `Result.zip`);
})
.catch((err) => {
alert(err.message);
});
};
const myStyle = {
width: "170px",
height: "200px",
......
.loader-container{
width: 80%;
height: 100vh;
position: fixed;
background-color:rgba(0, 0, 0, 0.349);
z-index:20;
display: flex;
align-items: center;
justify-content: center
}
\ No newline at end of file
......@@ -4,7 +4,6 @@
margin-left: auto;
margin-right: 0;
}
.movie-page-container-title {
font-size: 23px;
font-weight: 500;
......@@ -23,3 +22,132 @@
.movie-page-result-container::-webkit-scrollbar {
display: none;
}
.movie-page-form-wrapper {
width: 25%;
height: 88vh;
background-color: #5143b8;
position: fixed;
top: 12vh;
right: -371px;
z-index: 10;
}
.movie-page-form-wrapper-active {
width: 25%;
height: 88vh;
background-color: #5143b8;
position: fixed;
top: 12vh;
z-index: 10;
animation: formSlider 1s forwards;
}
@keyframes formSlider {
from {
right: -370px;
}
to {
right: 0;
}
}
.movie-page-form-wrapper-expander {
height: 120px;
width: 15px;
position: absolute;
top: 250px;
left: -8px;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
background-image: linear-gradient(to right, #5143b8, rgb(255, 255, 255));
border-radius: 10px;
}
.movie-page-form-container {
width: 100%;
text-align: center;
}
.movie-page-form-title-wrapper {
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
margin: auto;
margin-top: 15px;
}
.movie-page-form-title {
font-size: 20px;
font-weight: 500;
color: white;
text-align: center;
}
.movie-page-form-one-container {
width: 100%;
display: flex;
flex-direction: column;
padding-top: 10px;
}
.movie-form-input-wrapper {
width: 90%;
display: flex;
flex-direction: column;
text-align: start;
margin: auto;
margin-top: 15px;
}
.movie-form-input-label {
font-size: 15px;
color: white;
margin-bottom: 10px;
}
.movie-form-input {
height: 38px;
border-radius: 12px;
border: none;
outline: none;
background-color: #46399e;
padding-left: 7px;
padding-right: 7px;
color: white;
}
.movie-form-input::placeholder{
color: rgb(197, 197, 197);
}
.movie-form-input-file {
border-radius: 12px;
border: none;
outline: none;
background-color: #46399e;
padding: 10px;
color: white;
}
.movie-form-action-wrapper {
width: 90%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
margin-top: 20px;
position: absolute;
right: 0;
bottom: 35px;
}
.movie-form-action-button {
width: 180px;
height: 33px;
border-radius: 10px;
border: 2px solid white;
background-color: white;
font-size: 15px;
color: #5143b8;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s;
}
.movie-form-action-button:hover {
transform: scale(1.05);
}
import React from "react";
import React, { useEffect, useState } from "react";
import "../css/movie-analysis.css";
import MovieAnalysisCard from "../components/movie-analysis-card";
import Background from "../images/movie.jpeg";
import Background2 from "../images/images.jpeg";
import CloseIcon from "@mui/icons-material/Close";
import axios from "axios";
import Loader from "../components/loader";
function MovieAnalysis() {
const [formActive, setFormActive] = useState(false);
const [movies, setMovies] = useState([]);
const [pageActivater, setPageActivater] = useState(false);
const [movieName, setMovieName] = useState("");
const [movieFile, setMovieFile] = useState("");
const [btnText, setBtnText] = useState("Continue");
const [loader, setLoader] = useState(false);
const [analyisData, setAnalyisData] = useState({
fps: 0,
obj_accuracy: 0,
obj_dimension: 0,
img_accuracy: 0,
year: 0,
});
useEffect(() => {
axios
.get(`http://localhost:5000/movie/details/1020`)
.then((res) => {
if (res.status === 200) {
console.log(res.data);
setMovies(res.data);
}
console.log(res.data.message);
})
.catch((err) => {
console.log(err);
alert(err.message);
});
}, []);
const formHandlerActive = () => {
setFormActive(true);
};
const formHandlerInActive = () => {
setFormActive(false);
};
const continueHandler = () => {
setPageActivater(true);
};
const videoUploadHandler = async () => {
setBtnText("Please waite");
if (movieName.trim().length === 0) {
alert("Please enter movie name.");
return;
}
if (!movieFile) {
alert("Please select upload a movie.");
return;
}
let formData = new FormData();
formData.append("video", movieFile);
axios
.post(`http://localhost:5000/upload/${movieName}`, formData)
.then((res) => {
if (res.status === 201) {
setBtnText("Continue");
continueHandler();
}
console.log(res.data.message);
})
.catch((err) => {
console.log(err);
setBtnText("Continue");
alert(err.message);
});
};
const analyzeHandler = () => {
if (analyisData.fps === 0) {
alert("Please enter fps rate.");
return;
}
if (analyisData.obj_accuracy === 0) {
alert("Please enter object accuracy.");
return;
}
if (analyisData.obj_dimension === 0) {
alert("Please enter object dimension.");
return;
}
if (analyisData.img_accuracy === 0) {
alert("Please enter image accuracy.");
return;
}
if (analyisData.year === 0) {
alert("Please enter movie related year.");
return;
}
const data = {
user_id: "1020",
movie_name: movieName,
file_name: movieName + ".mp4",
fps_rate: analyisData.fps,
obj_accuracy: analyisData.obj_accuracy,
obj_dimension: analyisData.obj_dimension,
img_accuracy: analyisData.img_accuracy,
year: analyisData.year,
};
setLoader(true);
setPageActivater(false);
setFormActive(false);
axios
.post(`http://localhost:5000/check/video`, data)
.then((res) => {
setLoader(false);
alert("Movie analyzed successfully.");
console.log(res.data.message);
})
.catch((err) => {
console.log(err);
alert(err.message);
});
};
return (
<div className="movie-page-container">
<Loader
openState={loader}
message="We are currently analyzing the movie. Please be patient."
/>
<label className="movie-page-container-title">
Movies Analyzed Results
</label>
<div className="movie-page-result-container">
<MovieAnalysisCard image={Background} name="Blade Runner" />
<MovieAnalysisCard image={Background2} name="Pathan" />
<MovieAnalysisCard image={Background} name="Blade Runner" />
<MovieAnalysisCard image={Background2} name="Pathan" />
<MovieAnalysisCard image={Background} name="Blade Runner" />
<MovieAnalysisCard image={Background2} name="Pathan" />
<MovieAnalysisCard image={Background} name="Blade Runner" />
<MovieAnalysisCard image={Background2} name="Pathan" />
{movies.map((movie, index) => (
<MovieAnalysisCard
image={Background}
name={movie.movie_name}
key={index}
/>
))}
</div>
<div
onMouseOver={formHandlerActive}
className={
formActive
? "movie-page-form-wrapper-active"
: "movie-page-form-wrapper"
}
>
<div
className="movie-page-form-wrapper-expander"
onMouseOver={formHandlerActive}
/>
<div className="movie-page-form-container">
<div className="movie-page-form-title-wrapper">
<label className="movie-page-form-title">Analyze Movie</label>
<CloseIcon
onClick={formHandlerInActive}
sx={{ color: "white", fontSize: "22px", cursor: "pointer" }}
/>
</div>
{!pageActivater ? (
<div className="movie-page-form-one-container">
<div className="movie-form-input-wrapper">
<label className="movie-form-input-label">Movie Name</label>
<input
type="text"
placeholder="Movie Name"
className="movie-form-input"
onChange={(e) => {
setMovieName(e.target.value);
}}
/>
</div>
<div className="movie-form-input-wrapper">
<label className="movie-form-input-label">Movie</label>
<input
type="file"
className="movie-form-input-file"
onChange={(e) => {
setMovieFile(e.target.files[0]);
}}
/>
</div>
<div className="movie-form-action-wrapper">
<button
className="movie-form-action-button"
onClick={videoUploadHandler}
>
{btnText}
</button>
</div>
</div>
) : (
<div className="movie-page-form-one-container">
<div className="movie-form-input-wrapper">
<label className="movie-form-input-label">FPS Rate</label>
<input
type="number"
placeholder="2 to 6"
className="movie-form-input"
onChange={(e) => {
setAnalyisData({
...analyisData,
fps: parseInt(e.target.value),
});
}}
/>
</div>
<div className="movie-form-input-wrapper">
<label className="movie-form-input-label">Object Size</label>
<select
type="text"
className="movie-form-input"
onChange={(e) => {
setAnalyisData({
...analyisData,
obj_dimension: parseInt(e.target.value),
});
}}
>
<option value={0}>Select One</option>
<option value={20}>20x20</option>
<option value={40}>40x40</option>
<option value={60}>60x60</option>
<option value={80}>80x80</option>
<option value={100}>100x100</option>
</select>
</div>
<div className="movie-form-input-wrapper">
<label className="movie-form-input-label">
Object Accuracy
</label>
<select
type="text"
className="movie-form-input"
onChange={(e) => {
setAnalyisData({
...analyisData,
obj_accuracy: parseFloat(e.target.value),
});
}}
>
<option value={"0"}>Select One</option>
<option value={"0.5"}>0.5</option>
<option value={"0.6"}>0.6</option>
<option value={"0.7"}>0.7</option>
<option value={"0.8"}>0.8</option>
<option value={"0.9"}>0.9</option>
</select>
</div>
<div className="movie-form-input-wrapper">
<label className="movie-form-input-label">Image Accuracy</label>
<select
type="text"
className="movie-form-input"
onChange={(e) => {
setAnalyisData({
...analyisData,
img_accuracy: parseFloat(e.target.value),
});
}}
>
<option value={"0"}>Select One</option>
<option value={"0.5"}>0.5</option>
<option value={"0.6"}>0.6</option>
<option value={"0.7"}>0.7</option>
<option value={"0.8"}>0.8</option>
<option value={"0.9"}>0.9</option>
</select>
</div>
<div className="movie-form-input-wrapper">
<label className="movie-form-input-label">
Movie Represented Year
</label>
<input
type="number"
placeholder="eg:- 2000"
className="movie-form-input"
onChange={(e) => {
setAnalyisData({
...analyisData,
year: parseInt(e.target.value),
});
}}
/>
</div>
<div className="movie-form-action-wrapper">
<button
className="movie-form-action-button"
onClick={analyzeHandler}
>
Submit
</button>
</div>
</div>
)}
</div>
</div>
</div>
);
......
main.py
\ No newline at end of file
......@@ -4,9 +4,11 @@ import json
from Mistakes_Identify import identifyMistakes
import os
from werkzeug.utils import secure_filename
from flask_cors import CORS
from functions import allowed_file, enhance_image, zip_folder
app = Flask(__name__)
CORS(app)
UPLOAD_FOLDER = 'Uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
......@@ -26,6 +28,7 @@ def clear_image():
@app.route('/check/video', methods=['POST'])
def analise_video():
data = request.json
print(data)
required_keys = ['user_id', 'movie_name', 'file_name', 'fps_rate', 'obj_accuracy', 'obj_dimension', 'img_accuracy',
'year']
missing_keys = [key for key in required_keys if key not in data]
......@@ -72,20 +75,24 @@ def analise_video():
return jsonify({"message": "Failed to save data"}), 500
@app.route('/upload', methods=['POST'])
def upload_file():
@app.route('/upload/<movieName>', methods=['POST'])
def upload_file(movieName):
if 'video' not in request.files:
print("1")
return jsonify({"message": "Video could not found."}), 400
file = request.files['video']
if file.filename == '':
print("2")
return jsonify({"message": "Please select a video."}), 400
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
filename = secure_filename(movieName+".mp4")
filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
file.save(filepath)
return jsonify({"message": "Video uploaded successfully. Please wait for the results."}), 201
print("3")
return jsonify({"message": "Video uploaded successfully. Please wait for the results."}),201
else:
print("4")
return jsonify({"message": "Please upload a valid file format.(mp4, avi, mkv)"}), 400
......@@ -108,7 +115,7 @@ def get_data(userID):
if data:
return json.dumps(data), 200
else:
return jsonify({"message": "No data found"}), 404
return jsonify([]), 200
else:
return jsonify({"message": "Missing user_id parameter"}), 400
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment