69 lines
2.7 KiB
JavaScript
69 lines
2.7 KiB
JavaScript
import styles from "./DownloadModelsContainer.module.scss";
|
|
import vrct_logo_for_dark_mode from "@images/vrct_logo_for_dark_mode.png";
|
|
import vrct_now_downloading from "@images/VRCT_now_downloading.png";
|
|
|
|
import {
|
|
useCTranslate2WeightTypeStatus,
|
|
useWhisperWeightTypeStatus,
|
|
} from "@logics_configs";
|
|
|
|
export const DownloadModelsContainer = () => {
|
|
const { currentCTranslate2WeightTypeStatus } = useCTranslate2WeightTypeStatus();
|
|
const { currentWhisperWeightTypeStatus } = useWhisperWeightTypeStatus();
|
|
|
|
const c_translate_2 = currentCTranslate2WeightTypeStatus.data.find(d => d.id === "small");
|
|
const whisper = currentWhisperWeightTypeStatus.data.find(d => d.id === "base");
|
|
|
|
if (c_translate_2.progress === null && whisper.progress === null) return null;
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.progress_container}>
|
|
<DownloadModelsProgress progress={c_translate_2.progress} type_label="CTranslate2 Model"/>
|
|
<DownloadModelsProgress progress={whisper.progress} type_label="Whisper Model"/>
|
|
</div>
|
|
<div className={styles.labels_wrapper}>
|
|
<img src={vrct_logo_for_dark_mode} className={styles.logo_img}/>
|
|
<img src={vrct_now_downloading} className={styles.vrct_now_downloading_img}/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
const DownloadModelsProgress = (props) => {
|
|
if (props.progress === null) return null;
|
|
const circular_progress = Math.floor(props.progress / 5) * 5;
|
|
|
|
const progress_color = generateGradientColor({
|
|
value: circular_progress,
|
|
colorStart: [242, 242, 242], // #f2f2f2
|
|
colorEnd: [72, 164, 149], // #48a495
|
|
});
|
|
|
|
return(
|
|
<div className={styles.progress_bar_container}>
|
|
<div className={styles.progress_bar_wrapper}>
|
|
<div
|
|
className={styles.progress_bar}
|
|
style={{
|
|
width: `${props.progress}%`,
|
|
backgroundColor: progress_color,
|
|
}}
|
|
/>
|
|
</div>
|
|
<p className={styles.progress_label}>{`${props.type_label}: ${Math.round(props.progress)}%`}</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
const generateGradientColor = ({ value, colorStart, colorEnd }) => {
|
|
const normalizedValue = Math.max(0, Math.min(100, value)) / 100;
|
|
const interpolatedColor = colorStart.map((start, i) => {
|
|
const end = colorEnd[i];
|
|
return Math.round(start + (end - start) * normalizedValue);
|
|
});
|
|
const hexColor = `#${interpolatedColor.map(val => val.toString(16).padStart(2, '0')).join('')}`;
|
|
return hexColor;
|
|
}; |