WeSign/Signlanguage_Datacollector
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added train, val, test selctor

Browse Source
This commit is contained in:
Victor Mylle
2023-03-22 21:21:44 +00:00
parent c15178da22
commit 51bd92d65a
8 changed files with 92 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/RandomVideoUpload.tsx
View File

@@ -3,11 +3,9 @@ import { Sign, SignVideo, SimpleSign } from '../types/sign';
import { useParams } from 'react-router-dom';
import { getRandomSign, getSign } from '../services/signs';
import ReactModal from 'react-modal';
import { acceptVideo, deleteVideo, uploadSignVideo } from '../services/signvideos';
import { uploadSignVideo } from '../services/signvideos';
import { LoadingButton } from './loading-button/loading-button';
import VideoRecorder from 'react-video-recorder';
import SignVideoGrid from './SignVideoGrid';
import SignVideoPlayer from './SignVideoPlayer';
const RandomSignUpload: React.FC = () => {

21
frontend/src/components/SignDetailPage.tsx
View File

@@ -3,7 +3,7 @@ import { Sign, SignVideo } from '../types/sign';
import { useParams } from 'react-router-dom';
import { getSign } from '../services/signs';
import ReactModal from 'react-modal';
import { acceptVideo, deleteVideo, uploadSignVideo } from '../services/signvideos';
import { updateVideo, deleteVideo, uploadSignVideo } from '../services/signvideos';
import { LoadingButton } from './loading-button/loading-button';
import VideoRecorder from 'react-video-recorder';
import SignVideoGrid from './SignVideoGrid';
@@ -52,7 +52,7 @@ const SignDetailpage: React.FC<Props> = (props) => {
if (sign != null && currentVideo != null) {
console.log('accepting video');
acceptVideo(sign.id, sign.sign_videos[currentVideo].id, approved).then((response) => {
updateVideo(sign.id, sign.sign_videos[currentVideo].id, approved, sign.sign_videos[currentVideo].dataset).then((response) => {
const newSign = { ...sign };
const newSignVideo = { ...newSign.sign_videos[currentVideo] };
newSignVideo.approved = approved;
@@ -62,6 +62,21 @@ const SignDetailpage: React.FC<Props> = (props) => {
}
}
const updateDatasetSignVideo = (dataset: string) => {
// update the sign video in the sign
if (sign != null && currentVideo != null) {
console.log('updating dataset');
updateVideo(sign.id, sign.sign_videos[currentVideo].id, sign.sign_videos[currentVideo].approved, dataset).then((response) => {
const newSign = { ...sign };
const newSignVideo = { ...newSign.sign_videos[currentVideo] };
newSignVideo.dataset = dataset;
newSign.sign_videos[currentVideo] = newSignVideo;
setSign(newSign);
});
}
}
const deleteSignVideo = () => {
deleteVideo(sign!.id, sign!.sign_videos[currentVideo!].id).then((response) => {
const newSign = { ...sign! };
@@ -140,7 +155,7 @@ const SignDetailpage: React.FC<Props> = (props) => {
timeLimit={4000}
/> :
<SignVideoPlayer sign_id={sign.id} sign_video={sign.sign_videos[currentVideo]} approveSignVideo={acceptSignVideo} deleteSignVideo={deleteSignVideo} />
<SignVideoPlayer sign_id={sign.id} sign_video={sign.sign_videos[currentVideo]} datasetSignVideo={updateDatasetSignVideo} approveSignVideo={acceptSignVideo} deleteSignVideo={deleteSignVideo} />
}
</div>
</div>

18
frontend/src/components/SignVideoPlayer.tsx
View File

@@ -12,10 +12,11 @@ interface Props {
sign_id: number;
sign_video: SignVideo;
approveSignVideo: (approve: boolean) => void;
datasetSignVideo: (dataset: string) => void;
deleteSignVideo: () => void;
}
const SignVideoPlayer: React.FC<Props> = ({ sign_id, sign_video, approveSignVideo, deleteSignVideo }) => {
const SignVideoPlayer: React.FC<Props> = ({ sign_id, sign_video, approveSignVideo, deleteSignVideo, datasetSignVideo }) => {
const [videoBlob, setVideoBlob] = useState<string | null>(null)
const [showConfirm, setShowConfirm] = useState(false);
@@ -38,6 +39,10 @@ const SignVideoPlayer: React.FC<Props> = ({ sign_id, sign_video, approveSignVide
deleteSignVideo();
}
const handleTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
datasetSignVideo(e.target.value);
}
useEffect(() => {
getVideo(sign_id, sign_video.id).then((response) => {
setVideoBlob(URL.createObjectURL(response))
@@ -59,6 +64,17 @@ const SignVideoPlayer: React.FC<Props> = ({ sign_id, sign_video, approveSignVide
>
{!sign_video.approved ? "Accept video" : "Reject video"}
</button>
<select
className="ml-2 border border-gray-300 rounded-lg px-3 py-2"
value={sign_video.dataset}
onChange={handleTypeChange}
>
<option value="train">Train</option>
<option value="val">Val</option>
<option value="test">Test</option>
</select>
<button
className={`relative mt-4 text-white font-bold py-2 px-4 rounded-full transition-transform duration-200 transform hover:-translate-y-1 hover:scale-105 bg-red-500 `}
onClick={handleDeleteClick}

6
frontend/src/services/signvideos.ts
View File

@@ -57,12 +57,12 @@ const getVideo = async (sign_id: number, video_id: number) => {
};
const acceptVideo = async (sign_id: number, video_id: number, approved: boolean = false) => {
const updateVideo = async (sign_id: number, video_id: number, approved: boolean = false, dataset: string = "train") => {
// get access token from local storage
const token = localStorage.getItem('accessToken');
// make request to get signs
const response = await axios.patch(`${process.env.REACT_APP_API_URL}/signs/${sign_id}/video/${video_id}/`, { "approved": approved }, {
const response = await axios.patch(`${process.env.REACT_APP_API_URL}/signs/${sign_id}/video/${video_id}/`, { "approved": approved, "dataset": dataset }, {
headers: {
Authorization: `Bearer ${token}`,
"Access-Control-Allow-Methods": '*',
@@ -88,4 +88,4 @@ const deleteVideo = async (sign_id: number, video_id: number) => {
return response.data;
};
export { uploadSignVideo, getThumbail, getVideo, acceptVideo, deleteVideo };
export { uploadSignVideo, getThumbail, getVideo, updateVideo, deleteVideo };

1
frontend/src/types/sign.ts
View File

@@ -1,6 +1,7 @@
export interface SignVideo {
id: number;
approved: boolean;
dataset: string;
}
export interface Sign {