Commit b1ef0b43 authored by De Silva K.C.C.C's avatar De Silva K.C.C.C

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

parents 20f404f5 dc58ee3d
This diff is collapsed.
...@@ -12,27 +12,28 @@ ...@@ -12,27 +12,28 @@
"@testing-library/react": "^12.1.4", "@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"antd": "^3.26.5", "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", "axios": "^0.21.4",
"bootstrap": "^5.1.1", "bootstrap": "^5.1.1",
"prop-types": "^15.7.2",
"react": "^17.0.2", "react": "^17.0.2",
"react-bootstrap-validation": "^0.1.11", "react-bootstrap-validation": "^0.1.11",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-dropzone": "^14.2.2",
"react-hint": "^3.2.1", "react-hint": "^3.2.1",
"react-icons": "^4.3.1", "react-icons": "^4.3.1",
"react-js-loader": "^0.1.0",
"react-pdf": "^6.0.3",
"react-player": "^2.11.0", "react-player": "^2.11.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.3.0", "react-router-dom": "^5.3.0",
"react-scripts": "5.0.0", "react-scripts": "5.0.0",
"react-select": "^5.0.0", "react-select": "^5.0.0",
"react-speech-recognition": "^3.9.0",
"react-validation": "^3.0.7", "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" "web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {
......
...@@ -27,7 +27,7 @@ const Navbar = () => { ...@@ -27,7 +27,7 @@ const Navbar = () => {
</div> </div>
<div className="navbar-links_container"> <div className="navbar-links_container">
<p><Link style={isActive(history, '/')} to="/">Home</Link></p> <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, '/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, '/class-notes')} to="/class-notes">Class notes</Link></p>
<p><Link style={isActive(history, '/upload')} to="/upload">Video Indexer</Link></p> <p><Link style={isActive(history, '/upload')} to="/upload">Video Indexer</Link></p>
...@@ -43,7 +43,7 @@ const Navbar = () => { ...@@ -43,7 +43,7 @@ const Navbar = () => {
<div className="navbar-menu_container scale-up-center"> <div className="navbar-menu_container scale-up-center">
<div className="navbar-menu_container-links"> <div className="navbar-menu_container-links">
<p><Link style={isActive(history, '/')} to="/">Home</Link></p> <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, '/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, '/class-notes')} to="/class-notes">Class notes</Link></p>
<p><Link style={isActive(history, '/upload')} to="/upload">Video Indexer</Link></p> <p><Link style={isActive(history, '/upload')} to="/upload">Video Indexer</Link></p>
......
...@@ -2,8 +2,8 @@ import React, { Component } from 'react'; ...@@ -2,8 +2,8 @@ import React, { Component } from 'react';
import './style/upload.css'; import './style/upload.css';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import ReactPlayer from "react-player"; import ReactPlayer from "react-player";
import {render} from 'react-dom' import Loader from "react-js-loader";
import ReactHintFactory from 'react-hint'
function Upload() { function Upload() {
const [isPlaying, setIsPlaying] = React.useState(true); const [isPlaying, setIsPlaying] = React.useState(true);
...@@ -14,6 +14,7 @@ function Upload() { ...@@ -14,6 +14,7 @@ function Upload() {
const [indexingData, setIndexingData] = useState([]) const [indexingData, setIndexingData] = useState([])
// const [post, setPost] = React.useState(null); // const [post, setPost] = React.useState(null);
const [buttonStatus, setButtonStatus] = useState(false); const [buttonStatus, setButtonStatus] = useState(false);
const [loadingStatus, setLoadingStatus] = useState(false);
const [videoFilePath, setVideoFilePath] = useState([]); const [videoFilePath, setVideoFilePath] = useState([]);
const [initialValue, setInitalValue] = useState(0); const [initialValue, setInitalValue] = useState(0);
const handleVideoUpload = (event) => { const handleVideoUpload = (event) => {
...@@ -30,6 +31,7 @@ function Upload() { ...@@ -30,6 +31,7 @@ function Upload() {
}, [isReady]); }, [isReady]);
async function sendVideo() { async function sendVideo() {
// console.log(video) // console.log(video)
setLoadingStatus(true)
const formData = new FormData(); const formData = new FormData();
formData.append('video', video); formData.append('video', video);
fetch("http://127.0.0.1:1100/topic", { fetch("http://127.0.0.1:1100/topic", {
...@@ -40,9 +42,11 @@ function Upload() { ...@@ -40,9 +42,11 @@ function Upload() {
.then(response => { .then(response => {
setIndexingData(response); setIndexingData(response);
setButtonStatus(true); setButtonStatus(true);
setLoadingStatus(false)
}) })
.catch(err => { .catch(err => {
console.log(err); console.log(err);
setLoadingStatus(false);
}); });
} }
// console.log(indexingData) // console.log(indexingData)
...@@ -68,12 +72,20 @@ function Upload() { ...@@ -68,12 +72,20 @@ function Upload() {
return ( return (
<> <>
{loadingStatus === true ? (
<div className={"item"}>
<Loader type="spinner-default" bgColor={"#FFFFFF"} title={"Processing..."} color={'#FFFFFF'} size={100} />
</div>
):
""}
<center> <center>
<div style={{"background-color":"White", width:"60%", "border-radius": "15px", "margin-top":"50px"}}> <div style={{"background-color":"White", width:"60%", "border-radius": "15px", "margin-top":"50px"}}>
<center> <center>
<input type="file" className='forrm-control' style={{"margin-top": "100px","margin-bottom": "50px" }} onChange={handleVideoUpload}></input> <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 ? ( {buttonStatus === true ? (
<div> <div>
<ReactPlayer <ReactPlayer
......
...@@ -8,7 +8,7 @@ class Home extends Component { ...@@ -8,7 +8,7 @@ class Home extends Component {
<div className="home home_padding"> <div className="home home_padding">
<div className="home_content"> <div className="home_content">
<h1 className="gradient_text">EDUCATIONAL VIDEO SUMMARIZER AND DIGITAL HUMAN ASSISTANT</h1> <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> </div>
</div> </div>
......
...@@ -11,6 +11,7 @@ import Login from '../main/Login/login'; ...@@ -11,6 +11,7 @@ import Login from '../main/Login/login';
import ContactUs from '../main/ContactUs/contactUs'; import ContactUs from '../main/ContactUs/contactUs';
import ClassNotes from '../classNotes/classNotes'; import ClassNotes from '../classNotes/classNotes';
import Upload from '../indexing/upload'; import Upload from '../indexing/upload';
import VideoSum from "../videoSumm/sumerzier";
function PageRoutes() { function PageRoutes() {
return ( return (
...@@ -27,6 +28,7 @@ function PageRoutes() { ...@@ -27,6 +28,7 @@ function PageRoutes() {
<Route path="/login" component={Login}/> <Route path="/login" component={Login}/>
<Route path="/class-notes" component={ClassNotes}/> <Route path="/class-notes" component={ClassNotes}/>
<Route path="/upload" component={Upload}/> <Route path="/upload" component={Upload}/>
<Route path="/videoSummerier" component={VideoSum}/>
</Switch> </Switch>
</section> </section>
</Router> </Router>
......
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