336 lines
10 KiB
TypeScript
336 lines
10 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { View, Text, TextInput, Pressable, StyleSheet } from "react-native";
|
|
import {
|
|
WHISPER_FILES,
|
|
WhisperFile,
|
|
download_status_t,
|
|
whisper_tag_t,
|
|
} from "@/app/lib/whisper";
|
|
import { Settings } from "@/app/lib/settings";
|
|
import { Picker } from "@react-native-picker/picker";
|
|
import {
|
|
LanguageServer,
|
|
language_matrix,
|
|
language_matrix_entry,
|
|
} from "@/app/i18n/api";
|
|
const WHISPER_MODELS = {
|
|
small: new WhisperFile("small"),
|
|
medium: new WhisperFile("medium"),
|
|
large: new WhisperFile("large"),
|
|
};
|
|
|
|
const LIBRETRANSLATE_BASE_URL = "https://translate.argosopentech.com/translate";
|
|
|
|
const SettingsComponent = () => {
|
|
const [hostLanguage, setHostLanguage] = useState<string | null>(null);
|
|
const [libretranslateBaseUrl, setLibretranslateBaseUrl] = useState<
|
|
string | null
|
|
>(null);
|
|
const [languageOptions, setLanguageOptions] = useState<
|
|
language_matrix | undefined
|
|
>();
|
|
const [langServerConn, setLangServerConn] = useState<{
|
|
success: boolean;
|
|
error?: string;
|
|
} | null>(null);
|
|
const [whisperModel, setWhisperModel] =
|
|
useState<keyof typeof WHISPER_MODELS>("small");
|
|
const [whisperFile, setWhisperFile] = useState<WhisperFile | undefined>();
|
|
const [downloader, setDownloader] = useState<any>(null);
|
|
const [bytesDone, setBytesDone] = useState<number | undefined>();
|
|
const [bytesRemaining, setBytesRemaining] = useState<number | undefined>();
|
|
const [statusTimeout, setStatusTimeout] = useState<
|
|
NodeJS.Timeout | undefined
|
|
>();
|
|
|
|
useEffect(() => {
|
|
(async function () {
|
|
const settings = await Settings.getDefault();
|
|
setHostLanguage((await settings.getHostLanguage()) || "en");
|
|
setLibretranslateBaseUrl(
|
|
(await settings.getLibretranslateBaseUrl()) || LIBRETRANSLATE_BASE_URL
|
|
);
|
|
setWhisperModel((await settings.getWhisperModel()) || "small");
|
|
setWhisperFile(WHISPER_FILES[whisperModel]);
|
|
if (!whisperFile) {
|
|
throw new Error("Invalid Whisper file!");
|
|
}
|
|
await whisperFile.syncHfMetadata();
|
|
await whisperFile.updateTargetExistence();
|
|
await whisperFile.updateTargetHash();
|
|
console.log("Does %s exist? part=%s, target=%s", whisperFile.label, whisperFile.does_part_target_exist, whisperFile.does_target_exist)
|
|
})();
|
|
}, [whisperFile]);
|
|
|
|
const getLanguageOptions = async () => {
|
|
const languageServer = await LanguageServer.getDefault();
|
|
setLanguageOptions(await languageServer.fetchLanguages());
|
|
};
|
|
|
|
const handleHostLanguageChange = async (lang: string) => {
|
|
const settings = await Settings.getDefault();
|
|
setHostLanguage(lang);
|
|
await settings.setHostLanguage(lang);
|
|
};
|
|
|
|
const handleLibretranslateBaseUrlChange = async (url: string) => {
|
|
const settings = await Settings.getDefault();
|
|
setLibretranslateBaseUrl(url);
|
|
await settings.setLibretranslateBaseUrl(url);
|
|
checkLangServerConnection(url);
|
|
};
|
|
|
|
const checkLangServerConnection = async (baseUrl: string) => {
|
|
try {
|
|
// Replace with actual connection check logic
|
|
setLangServerConn({ success: true });
|
|
} catch (error) {
|
|
setLangServerConn({ success: false, error: `${error}` });
|
|
}
|
|
};
|
|
|
|
const handleWhisperModelChange = async (model: whisper_tag_t) => {
|
|
const settings = await Settings.getDefault();
|
|
await settings.setWhisperModel(model);
|
|
setWhisperModel(model);
|
|
const wFile = WHISPER_FILES[whisperModel];
|
|
await wFile.syncHfMetadata();
|
|
await wFile.updateTargetExistence();
|
|
// await wFile.updateTargetHash();
|
|
// setIsWhisperHashValid(wFile.isHashValid);
|
|
setWhisperFile(wFile);
|
|
};
|
|
|
|
const doSetDownloadStatus = (arg0: WhisperFile) => {
|
|
// console.log("Downloading ....");
|
|
setBytesDone(arg0.download_data?.totalBytesWritten);
|
|
setBytesRemaining(arg0.download_data?.totalBytesExpectedToWrite);
|
|
};
|
|
|
|
const doOnComplete = async (arg0: WhisperFile) => {
|
|
console.log("✅ Download complete.");
|
|
setDownloader(undefined);
|
|
await arg0.updateTargetExistence();
|
|
setWhisperFile(arg0);
|
|
await whisperFile?.updateTargetExistence();
|
|
};
|
|
|
|
const doDownload = async () => {
|
|
if (!whisperModel) {
|
|
throw new Error("Could not start download because whisperModel not set.");
|
|
}
|
|
|
|
console.log("Starting download of %s", whisperModel);
|
|
|
|
if (!whisperFile) throw new Error("No whisper file");
|
|
|
|
try {
|
|
const resumable = await whisperFile.createDownloadResumable({
|
|
onData: doSetDownloadStatus,
|
|
onComplete: doOnComplete,
|
|
});
|
|
setDownloader(resumable);
|
|
if (!resumable) throw new Error("Could not construct resumable");
|
|
await resumable.resumeAsync();
|
|
} catch (error) {
|
|
console.error("Failed to download whisper model:", error);
|
|
}
|
|
};
|
|
|
|
const doStopDownload = async () => {
|
|
downloader.cancelAsync();
|
|
setDownloader(null);
|
|
};
|
|
|
|
const doDelete = async () => {
|
|
const whisperFile = WHISPER_MODELS[whisperModel];
|
|
whisperFile.delete();
|
|
await whisperFile.updateTargetExistence();
|
|
};
|
|
|
|
return hostLanguage && libretranslateBaseUrl ? (
|
|
<View style={styles.container}>
|
|
<Text style={styles.label}>Host Language:</Text>
|
|
{
|
|
<Picker
|
|
selectedValue={hostLanguage}
|
|
style={{ height: 50, width: "100%" }}
|
|
onValueChange={handleHostLanguageChange}
|
|
accessibilityHint="host language"
|
|
>
|
|
{languageOptions &&
|
|
Object.entries(languageOptions).map(([key, value]) => {
|
|
return <Picker.Item label={value.name} value={value.code} />;
|
|
})}
|
|
</Picker>
|
|
}
|
|
|
|
<Text style={styles.label}>LibreTranslate Base URL:</Text>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={libretranslateBaseUrl || LIBRETRANSLATE_BASE_URL}
|
|
onChangeText={handleLibretranslateBaseUrlChange}
|
|
accessibilityHint="libretranslate base url"
|
|
/>
|
|
{langServerConn &&
|
|
(langServerConn.success ? (
|
|
<Text>Success connecting to {libretranslateBaseUrl}</Text>
|
|
) : (
|
|
<Text>
|
|
Error connecting to {libretranslateBaseUrl}: {langServerConn.error}
|
|
</Text>
|
|
))}
|
|
<Picker
|
|
selectedValue={whisperModel}
|
|
style={{ height: 50, width: "100%" }}
|
|
onValueChange={handleWhisperModelChange}
|
|
accessibilityHint="whisper models"
|
|
>
|
|
{Object.entries(WHISPER_MODELS).map(([key, whisperFile]) => (
|
|
<Picker.Item
|
|
key={whisperFile.tag}
|
|
label={whisperFile.label}
|
|
value={key}
|
|
/>
|
|
))}
|
|
</Picker>
|
|
<View style={styles.downloadButtonWrapper}>
|
|
{/* The target is completely downloaded */}
|
|
{!downloader && whisperFile?.does_target_exist && (
|
|
<Pressable onPress={doDelete} style={styles.deleteButton}>
|
|
<Text style={styles.buttonText}>
|
|
DELETE {whisperModel.toUpperCase()}
|
|
</Text>
|
|
</Pressable>
|
|
)}
|
|
|
|
{/* The target "part" is present and is downloading */}
|
|
|
|
{downloader && whisperFile?.does_part_target_exist && (
|
|
<Pressable
|
|
onPress={doStopDownload}
|
|
style={styles.pauseDownloadButton}
|
|
>
|
|
<Text style={styles.buttonText}>STOP DOWNLOAD</Text>
|
|
</Pressable>
|
|
)}
|
|
|
|
{/* The target "part" is present and we are NOT downloading */}
|
|
|
|
{!downloader && whisperFile?.does_part_target_exist && (
|
|
<>
|
|
<Pressable onPress={doDownload} style={styles.downloadButton}>
|
|
<Text style={styles.buttonText}>RESUME DOWNLOAD</Text>
|
|
</Pressable>
|
|
<Pressable onPress={doDelete} style={styles.deleteButton}>
|
|
<Text style={styles.buttonText}>
|
|
DELETE {whisperModel.toUpperCase()}
|
|
</Text>
|
|
</Pressable>
|
|
</>
|
|
)}
|
|
|
|
{/* Anything else -- usually if the file has not yet been downloaded */}
|
|
|
|
{!(
|
|
downloader ||
|
|
whisperFile?.does_target_exist ||
|
|
whisperFile?.does_part_target_exist
|
|
) && (
|
|
<Pressable onPress={doDownload} style={styles.downloadButton}>
|
|
<Text style={styles.buttonText}>
|
|
DOWNLOAD {whisperModel.toUpperCase()}
|
|
</Text>
|
|
</Pressable>
|
|
)}
|
|
|
|
{downloader &&
|
|
bytesDone &&
|
|
bytesRemaining &&
|
|
whisperFile?.does_part_target_exist && (
|
|
<View>
|
|
{whisperFile && (
|
|
<Text>Downloading to {whisperFile.targetPath}</Text>
|
|
)}
|
|
<Text>
|
|
{bytesDone} of {bytesRemaining} (
|
|
{(bytesDone / bytesRemaining) * 100} %){" "}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
<View>
|
|
<Text>Debug Panel</Text>
|
|
<Text>downloader is null? {downloader ? "no" : "yes"}</Text>
|
|
<Text>
|
|
whisperFile.does_target_exist{" "}
|
|
{whisperFile?.does_target_exist ? "yes" : "no"}
|
|
</Text>
|
|
<Text>
|
|
whisperFile.does_part_target_exist{" "}
|
|
{whisperFile?.does_part_target_exist ? "yes" : "no"}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
) : (
|
|
<View>
|
|
<Text>Loading ...</Text>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
// Create styles for the component
|
|
const styles = StyleSheet.create({
|
|
downloadButtonWrapper: {
|
|
flexDirection: "row",
|
|
},
|
|
downloadButton: {
|
|
backgroundColor: "#236b9f",
|
|
padding: 20,
|
|
margin: 10,
|
|
flex: 1,
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
},
|
|
deleteButton: {
|
|
backgroundColor: "darkred",
|
|
flex: 1,
|
|
flexDirection: "column",
|
|
padding: 10,
|
|
margin: 10,
|
|
height: 50,
|
|
},
|
|
pauseDownloadButton: {
|
|
backgroundColor: "#444444",
|
|
padding: 10,
|
|
margin: 10,
|
|
height: 50,
|
|
},
|
|
buttonText: {
|
|
color: "#fff",
|
|
// flex: 1,
|
|
// fontSize: 16,
|
|
// alignSelf: "center",
|
|
// textAlign: "center",
|
|
// textAlignVertical: "top",
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
padding: 20,
|
|
},
|
|
label: {
|
|
fontSize: 16,
|
|
marginBottom: 8,
|
|
},
|
|
input: {
|
|
height: 40,
|
|
borderColor: "gray",
|
|
borderWidth: 1,
|
|
marginBottom: 20,
|
|
paddingHorizontal: 8,
|
|
},
|
|
});
|
|
|
|
export default SettingsComponent;
|