LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 16:43:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1004 from utin-francis-peter/fix/traning-progress

Browse Source 
Fix/training progress
This commit is contained in:
Alex
2024-06-25 14:57:26 +01:00
committed by GitHub
parent ba4a7dcd45 4e5d0c2e84
commit f34a75fc5b
1 changed files with 36 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/upload/Upload.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useRef } from 'react';
import { useCallback, useEffect, useState } from 'react';
import { useDropzone } from 'react-dropzone';
import { useDispatch } from 'react-redux';
@@ -35,6 +35,7 @@ function Upload({
}>();
const { t } = useTranslation();
const setTimeoutRef = useRef<number | null>();
const urlOptions: { label: string; value: string }[] = [
{ label: 'Crawler', value: 'crawler' },
@@ -48,6 +49,31 @@ function Upload({
value: 'url',
});
useEffect(() => {
if (setTimeoutRef.current) {
clearTimeout(setTimeoutRef.current);
}
}, []);
function ProgressBar({ progress }: { progress: number }) {
return (
<div className="my-5 w-[50%]">
<div
className={`h-4 overflow-hidden rounded-lg border border-purple-30 text-xs text-white outline-none `}
>
<div
className={`h-full border-none p-1 w-${
progress || 0
}% flex items-center justify-center bg-purple-30 outline-none transition-all`}
style={{ width: `${progress || 0}%` }}
>
{progress >= 5 && `${progress}%`}
</div>
</div>
</div>
);
}
function Progress({
title,
isCancellable = false,
@@ -64,15 +90,10 @@ function Upload({
<p className={`ml-5 text-xl text-red-400 ${isFailed ? '' : 'hidden'}`}>
Over the token limit, please consider uploading smaller document
</p>
<p className="mt-10 text-2xl">{progress?.percentage || 0}%</p>
{/* <p className="mt-10 text-2xl">{progress?.percentage || 0}%</p> */}
<div className="mb-10 w-[50%]">
<div className="h-1 w-[100%] bg-purple-30"></div>
<div
className={`relative bottom-1 h-1 bg-purple-30 transition-all`}
style={{ width: `${progress?.percentage || 0}%` }}
></div>
</div>
{/* progress bar */}
<ProgressBar progress={progress?.percentage as number} />
<button
onClick={() => {
@@ -194,7 +215,9 @@ function Upload({
});
xhr.onload = () => {
const { task_id } = JSON.parse(xhr.responseText);
setProgress({ type: 'TRAINIING', percentage: 0, taskId: task_id });
setTimeoutRef.current = setTimeout(() => {
setProgress({ type: 'TRAINIING', percentage: 0, taskId: task_id });
}, 3000);
};
xhr.open('POST', `${apiHost + '/api/upload'}`);
xhr.send(formData);
@@ -223,7 +246,9 @@ function Upload({
});
xhr.onload = () => {
const { task_id } = JSON.parse(xhr.responseText);
setProgress({ type: 'TRAINIING', percentage: 0, taskId: task_id });
setTimeoutRef.current = setTimeout(() => {
setProgress({ type: 'TRAINIING', percentage: 0, taskId: task_id });
}, 3000);
};
xhr.open('POST', `${apiHost + '/api/remote'}`);
xhr.send(formData);