Skip to content

2
2022-066
Commit b1ef0b43 authored by De Silva K.C.C.C's avatar De Silva K.C.C.C
Browse files
Options

Merge branch 'IT19408316' of http://gitlab.sliit.lk/2022-066/evsdh into IT19408316

parents 20f404f5 dc58ee3d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 423 additions and 263 deletions
frontend/package-lock.json
View file @ b1ef0b43
This diff is collapsed.
frontend/package.json
View file @ b1ef0b43
......@@ -12,27 +12,28 @@
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"antd": "^3.26.5",
"prop-types": "^15.7.2",
"react-dropzone": "^14.2.2",
"react-pdf": "^6.0.3",
"react-redux": "^7.1.3",
"react-speech-recognition": "^3.9.0",
"redux": "^4.0.5",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.3.0",
"uuid": "^3.3.2",
"axios": "^0.21.4",
"bootstrap": "^5.1.1",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-bootstrap-validation": "^0.1.11",
"react-dom": "^17.0.2",
"react-dropzone": "^14.2.2",
"react-hint": "^3.2.1",
"react-icons": "^4.3.1",
"react-js-loader": "^0.1.0",
"react-pdf": "^6.0.3",
"react-player": "^2.11.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.3.0",
"react-scripts": "5.0.0",
"react-select": "^5.0.0",
"react-speech-recognition": "^3.9.0",
"react-validation": "^3.0.7",
"redux": "^4.0.5",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.3.0",
"uuid": "^3.3.2",
"web-vitals": "^2.1.4"
},
"scripts": {
......
frontend/src/components/navBar/navbar.js
View file @ b1ef0b43
......@@ -27,7 +27,7 @@ const Navbar = () => {
</div>
<div className="navbar-links_container">
<p><Link style={isActive(history, '/')} to="/">Home</Link></p>
<p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p>
<p><Link style={isActive(history, '/videoSummerier')} to="/videoSummerier">Video summarizer</Link></p>
<p><Link style={isActive(history, '/digital-human')} to="/digital-human">Digital human</Link></p>
<p><Link style={isActive(history, '/class-notes')} to="/class-notes">Class notes</Link></p>
<p><Link style={isActive(history, '/upload')} to="/upload">Video Indexer</Link></p>
......@@ -43,7 +43,7 @@ const Navbar = () => {
<div className="navbar-menu_container scale-up-center">
<div className="navbar-menu_container-links">
<p><Link style={isActive(history, '/')} to="/">Home</Link></p>
<p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p>
<p><Link style={isActive(history, '/videoSummerier')} to="/videoSummerier">Video summarizer</Link></p>
<p><Link style={isActive(history, '/digital-human')} to="/digital-human">Digital human</Link></p>
<p><Link style={isActive(history, '/class-notes')} to="/class-notes">Class notes</Link></p>
<p><Link style={isActive(history, '/upload')} to="/upload">Video Indexer</Link></p>
......
frontend/src/indexing/upload.js
View file @ b1ef0b43
......@@ -2,8 +2,8 @@ import React, { Component } from 'react';
import './style/upload.css';
import { useEffect, useState } from 'react';
import ReactPlayer from "react-player";
import {render} from 'react-dom'
import ReactHintFactory from 'react-hint'
import Loader from "react-js-loader";
function Upload() {
const [isPlaying, setIsPlaying] = React.useState(true);
......@@ -14,6 +14,7 @@ function Upload() {
const [indexingData, setIndexingData] = useState([])
// const [post, setPost] = React.useState(null);
const [buttonStatus, setButtonStatus] = useState(false);
const [loadingStatus, setLoadingStatus] = useState(false);
const [videoFilePath, setVideoFilePath] = useState([]);
const [initialValue, setInitalValue] = useState(0);
const handleVideoUpload = (event) => {
......@@ -30,6 +31,7 @@ function Upload() {
}, [isReady]);
async function sendVideo() {
// console.log(video)
setLoadingStatus(true)
const formData = new FormData();
formData.append('video', video);
fetch("http://127.0.0.1:1100/topic", {
......@@ -40,9 +42,11 @@ function Upload() {
.then(response => {
setIndexingData(response);
setButtonStatus(true);
setLoadingStatus(false)
})
.catch(err => {
console.log(err);
setLoadingStatus(false);
});
}
// console.log(indexingData)
......@@ -68,12 +72,20 @@ function Upload() {
return (
<>
{loadingStatus === true ? (
<div className={"item"}>
<Loader type="spinner-default" bgColor={"#FFFFFF"} title={"Processing..."} color={'#FFFFFF'} size={100} />
</div>
):
""}
<center>
<div style={{"background-color":"White", width:"60%", "border-radius": "15px", "margin-top":"50px"}}>
<center>
<input type="file" className='forrm-control' style={{"margin-top": "100px","margin-bottom": "50px" }} onChange={handleVideoUpload}></input>
<button onClick={sendVideo} className="btn btn-primary">Upload</button>
<button disabled={loadingStatus} onClick={sendVideo} className="btn btn-primary">Upload</button>
{buttonStatus === true ? (
<div>
<ReactPlayer
......
frontend/src/main/Home/home.js
View file @ b1ef0b43
......@@ -8,7 +8,7 @@ class Home extends Component {
<div className="home home_padding">
<div className="home_content">
<h1 className="gradient_text">EDUCATIONAL VIDEO SUMMARIZER AND DIGITAL HUMAN ASSISTANT</h1>
<p>Yet bed any for travelling assistance indulgence unpleasing. Not thoughts all exercise blessing. Indulgence way everything joy alteration boisterous the attachment. Party we years to order allow asked of.</p>
<p>Education can't be there for limited people. It should be universally available. Starting from school to the area of meta-verus...</p>
</div>
</div>
</div>
......
frontend/src/routes/pageRoutes.js
View file @ b1ef0b43
......@@ -11,6 +11,7 @@ import Login from '../main/Login/login';
import ContactUs from '../main/ContactUs/contactUs';
import ClassNotes from '../classNotes/classNotes';
import Upload from '../indexing/upload';
import VideoSum from "../videoSumm/sumerzier";
function PageRoutes() {
return (
......@@ -27,6 +28,7 @@ function PageRoutes() {
<Route path="/login" component={Login}/>
<Route path="/class-notes" component={ClassNotes}/>
<Route path="/upload" component={Upload}/>
<Route path="/videoSummerier" component={VideoSum}/>
</Switch>
</section>
</Router>
......
frontend/src/videoSumm/sumerzier.js 0 → 100644
View file @ b1ef0b43
import React, { Component } from 'react';
import '../indexing/style/upload.css';
import { useEffect, useState } from 'react';
import ReactPlayer from "react-player";
import Loader from "react-js-loader";
function VideoSum() {
const [isPlaying, setIsPlaying] = React.useState(true);
const [isReady, setIsReady] = React.useState(false);
const playerRef = React.useRef();
const [video, setVideo] = useState("");
const [indexingData, setIndexingData] = useState([])
// const [post, setPost] = React.useState(null);
const [buttonStatus, setButtonStatus] = useState(false);
const [loadingStatus, setLoadingStatus] = useState(false);
const [videoFilePath, setVideoFilePath] = useState([]);
const [initialValue, setInitalValue] = useState(0);
const handleVideoUpload = (event) => {
setVideo(event.target.files[0]);
setVideoFilePath(URL.createObjectURL(event.target.files[0]));
};
const onReady = React.useCallback(() => {
// console.log("here")
if (!isReady) {
playerRef.current.seekTo(initialValue, "seconds");
setIsReady(true);
}
}, [isReady]);
async function sendVideo() {
// console.log(video)
setLoadingStatus(true)
const formData = new FormData();
formData.append('video', video);
console.log(formData)
// fetch("http://127.0.0.1:1100/topic", {
// method: 'POST',
// body: formData,
// })
// .then(response => response.json())
// .then(response => {
// setIndexingData(response);
// setButtonStatus(true);
// setLoadingStatus(false)
// })
// .catch(err => {
// console.log(err);
// setLoadingStatus(false);
// });
//temporary
setLoadingStatus(false);
}
// console.log(indexingData)
const buttonState = (event)=>{
// console.log(event.target.value)
const filterData = (event.target.value).split(" ");
setInitalValue(filterData[0]);
playerRef.current.seekTo(filterData[0], "seconds");
// setIsReady(false)
}
const selectOptions = indexingData.map((x, id)=>{
// console.log(x)
return(
<>
<button onClick={buttonState} value={x.time_frame} className="btn btn-primary">{x.topic}</button>&nbsp;&nbsp;&nbsp;&nbsp;
</>
)
})
return (
<>
{loadingStatus === true ? (
<div className={"item"}>
<Loader type="spinner-default" bgColor={"#FFFFFF"} title={"Processing..."} color={'#FFFFFF'} size={100} />
</div>
):
""}
<center>
<div style={{"background-color":"White", width:"60%", "border-radius": "15px", "margin-top":"50px"}}>
<center>
<input type="file" className='forrm-control' style={{"margin-top": "100px","margin-bottom": "50px" }} onChange={handleVideoUpload}></input>
<button disabled={loadingStatus} onClick={sendVideo} className="btn btn-primary">Upload</button>
{buttonStatus === true ? (
<div>
<ReactPlayer
ref= {playerRef}
url={videoFilePath}
playing={isPlaying}
width="50%"
height="50%"
controls={true}
onReady={onReady}
/>
<br />
<p>
{selectOptions}
</p>
</div>
): ""}
</center>
</div>
</center>
</>
);
}
export default VideoSum;
\ No newline at end of file
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