Syndria98/quibot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

TTs whisper

Browse Source
This commit is contained in:
BinarySandia04
2026-06-18 13:45:32 +02:00
parent 0e7fbbfdca
commit 9a23863320
57 changed files with 10430 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

275
apk/app/index.tsx
View File

@@ -1,6 +1,7 @@
import { Audio, InterruptionModeAndroid, InterruptionModeIOS } from "expo-av";
import { router, useFocusEffect } from "expo-router";
import { useCallback, useEffect, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import Svg, { Path } from "react-native-svg";
import {
ActivityIndicator,
Alert,
@@ -12,8 +13,8 @@ import {
Text,
View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { loadRecorderSettings } from "@/lib/recorder-settings";
import { getStrings, type Locale, t } from "@/lib/translations";
function formatDuration(durationMs: number) {
const totalSeconds = Math.floor(durationMs / 1000);
@@ -50,14 +51,16 @@ export default function RecorderScreen() {
const [backendUrl, setBackendUrl] = useState("");
const [authToken, setAuthToken] = useState("");
const [fieldName, setFieldName] = useState("file");
const [locale, setLocale] = useState<Locale>("ca");
const [strings, setStrings] = useState(() => getStrings("ca"));
const [recording, setRecording] = useState<Audio.Recording | null>(null);
const [recordingUri, setRecordingUri] = useState<string | null>(null);
const [recordingMs, setRecordingMs] = useState(0);
const [statusMessage, setStatusMessage] = useState(
"Ready to record and send audio.",
);
const [statusMessage, setStatusMessage] = useState("");
const [responsePreview, setResponsePreview] = useState("");
const [isUploading, setIsUploading] = useState(false);
const [isHolding, setIsHolding] = useState(false);
const recordingRef = useRef<Audio.Recording | null>(null);
const refreshSettings = useCallback(() => {
let isMounted = true;
@@ -73,9 +76,11 @@ export default function RecorderScreen() {
setBackendUrl(settings.backendUrl);
setAuthToken(settings.authToken);
setFieldName(settings.fieldName);
setLocale(settings.language);
setStrings(getStrings(settings.language));
} catch {
if (isMounted) {
setStatusMessage("Could not load saved backend settings.");
setStatusMessage(strings.loadError);
}
}
}
@@ -123,10 +128,10 @@ export default function RecorderScreen() {
const permission = await Audio.requestPermissionsAsync();
if (!permission.granted) {
setStatusMessage("Microphone permission was denied.");
setStatusMessage(strings.micPermissionDenied);
Alert.alert(
"Microphone access required",
"Enable microphone access to record audio.",
strings.micAccessRequiredTitle,
strings.micAccessRequiredMsg,
);
return;
}
@@ -144,26 +149,28 @@ export default function RecorderScreen() {
Audio.RecordingOptionsPresets.HIGH_QUALITY,
);
recordingRef.current = result.recording;
setRecording(result.recording);
setRecordingMs(0);
setStatusMessage("Recording in progress.");
setStatusMessage(strings.recording);
} catch (error) {
setStatusMessage("Recording could not be started.");
setStatusMessage(strings.couldNotStartRecording);
Alert.alert(
"Recording failed",
error instanceof Error ? error.message : "Unknown recording error.",
strings.recordingFailedTitle,
error instanceof Error ? error.message : "",
);
}
}
async function stopRecording() {
if (!recording) {
async function stopRecordingAndUpload() {
if (!recordingRef.current) {
return;
}
try {
const activeRecording = recording;
const activeRecording = recordingRef.current;
const currentStatus = await activeRecording.getStatusAsync();
const durationMillis = currentStatus.durationMillis ?? 0;
await activeRecording.stopAndUnloadAsync();
await Audio.setAudioModeAsync({
@@ -172,25 +179,86 @@ export default function RecorderScreen() {
});
const uri = activeRecording.getURI();
recordingRef.current = null;
setRecording(null);
setRecordingMs(currentStatus.durationMillis ?? recordingMs);
setRecordingUri(uri);
setStatusMessage(
uri ? "Recording finished. Preparing to send voice message." : "Recording finished.",
);
setRecordingMs(durationMillis);
if (uri && backendUrl.trim()) {
await uploadRecording(uri);
if (!uri) {
setStatusMessage(strings.readyToRecord);
return;
}
setRecordingUri(uri);
setStatusMessage(strings.finishedUpload);
const trimmedUrl = backendUrl.trim().replace(/\/+$/, '');
const uploadUrl = trimmedUrl.endsWith('/audio/upload')
? trimmedUrl
: `${trimmedUrl}/audio/upload`;
if (uploadUrl) {
try {
const mimeType = buildMimeType(uri);
const extension = buildFileExtension(uri);
const formData = new FormData();
formData.append(fieldName.trim() || "file", {
name: `recording-${Date.now()}.${extension}`,
type: mimeType,
uri: uri,
} as never);
const headers: Record<string, string> = {};
if (authToken.trim()) {
headers.Authorization = `Bearer ${authToken.trim()}`;
}
const response = await fetch(uploadUrl, {
method: "POST",
headers,
body: formData,
});
const responseText = await response.text();
setResponsePreview(responseText.slice(0, 400));
if (!response.ok) {
throw new Error(`${response.status}. ${responseText}`);
}
setStatusMessage(strings.voiceMessageSent);
} catch (error) {
setStatusMessage(strings.uploadFailed);
Alert.alert(
strings.uploadFailed,
error instanceof Error ? error.message : "",
);
}
} else {
setStatusMessage(strings.noBackendUrl);
}
} catch (error) {
setStatusMessage("Recording could not be stopped cleanly.");
recordingRef.current = null;
setRecording(null);
setStatusMessage(strings.stopFailedTitle);
Alert.alert(
"Stop failed",
error instanceof Error ? error.message : "Unknown stop error.",
strings.stopFailedTitle,
error instanceof Error ? error.message : "",
);
}
}
async function handlePressIn() {
if (isUploading) return;
setIsHolding(true);
await startRecording();
}
async function handlePressOut() {
if (!isHolding) return;
setIsHolding(false);
await stopRecordingAndUpload();
}
async function uploadRecording(uriOverride?: string) {
const targetUri = uriOverride ?? recordingUri;
@@ -198,16 +266,19 @@ export default function RecorderScreen() {
return;
}
const trimmedUrl = backendUrl.trim();
const trimmedUrl = backendUrl.trim().replace(/\/+$/, '');
const uploadUrl = trimmedUrl.endsWith('/audio/upload')
? trimmedUrl
: `${trimmedUrl}/audio/upload`;
if (!trimmedUrl) {
Alert.alert("Missing backend URL", "Enter the backend endpoint first.");
if (!uploadUrl) {
Alert.alert(strings.missingBackendUrlTitle, strings.missingBackendUrlMsg);
return;
}
try {
setIsUploading(true);
setStatusMessage("Uploading recording.");
setStatusMessage(strings.uploadingRecording);
setResponsePreview("");
const mimeType = buildMimeType(targetUri);
@@ -226,7 +297,7 @@ export default function RecorderScreen() {
headers.Authorization = `Bearer ${authToken.trim()}`;
}
const response = await fetch(trimmedUrl, {
const response = await fetch(uploadUrl, {
method: "POST",
headers,
body: formData,
@@ -236,23 +307,30 @@ export default function RecorderScreen() {
setResponsePreview(responseText.slice(0, 400));
if (!response.ok) {
throw new Error(`Upload failed with ${response.status}. ${responseText}`);
throw new Error(`${response.status}. ${responseText}`);
}
setStatusMessage("Upload complete.");
setStatusMessage(strings.uploadComplete);
} catch (error) {
setStatusMessage("Upload failed.");
setStatusMessage(strings.uploadFailed);
Alert.alert(
"Upload failed",
error instanceof Error ? error.message : "Unknown upload error.",
strings.uploadFailed,
error instanceof Error ? error.message : "",
);
} finally {
setIsUploading(false);
}
}
const releaseLabel = t("releaseToStop", locale);
const holdLabel = t("holdToRecord", locale);
const openSettingsLabel = t("openSettingsHint", locale);
const appTitleLabel = t("appTitle", locale);
const recorderTitleLabel = t("recorderTitle", locale);
const serverResponseLabel = t("serverResponse", locale);
return (
<SafeAreaView style={styles.safeArea}>
<View style={styles.safeArea}>
<KeyboardAvoidingView
style={styles.keyboardAvoidingView}
behavior={Platform.OS === "ios" ? "padding" : undefined}
@@ -265,59 +343,88 @@ export default function RecorderScreen() {
<View style={styles.hero}>
<View style={styles.heroTopRow}>
<View style={styles.heroBadge}>
<Text style={styles.heroBadgeText}>Assistant Voice</Text>
<Text style={styles.heroBadgeText}>{appTitleLabel}</Text>
</View>
<Pressable onPress={() => router.push("/settings")} style={styles.settingsLink}>
<Text style={styles.settingsLinkText}>Settings</Text>
<Pressable
onPress={() => router.push("/settings")}
hitSlop={10}
style={styles.settingsCog}
>
<Svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<Path
d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
fill="#d3deea"
/>
<Path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1.08-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l-.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1.08 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1.08 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.26.604.852.997 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1.08Z"
stroke="#d3deea"
strokeWidth="1.5"
/>
</Svg>
</Pressable>
</View>
<Text style={styles.subtitle}>
Record a voice message and send it to your backend.
</Text>
</View>
<View style={styles.panel}>
<Text style={styles.meterValueCentered}>
<Text style={[styles.meterValueCentered, isHolding && { color: "#d04f2d" }]}>
{formatDuration(recordingMs)}
</Text>
<Pressable
disabled={isUploading}
onPress={recording ? stopRecording : startRecording}
onPressIn={handlePressIn}
onPressOut={handlePressOut}
style={[
styles.micButton,
recording ? styles.stopButton : styles.recordButton,
isHolding ? styles.holdingButton : styles.idleButton,
isUploading && styles.buttonDisabled,
]}
>
{isUploading ? (
<ActivityIndicator color="#fff6f3" size="large" />
) : (
<Text style={styles.micButtonText}>
{recording ? "Stop" : "Record"}
</Text>
<Svg width="64" height="64" viewBox="0 0 24 24" fill="none">
<Path
d="M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3z"
fill="#fff6f3"
stroke="#fff6f3"
strokeWidth="1"
/>
<Path
d="M19 10v1a7 7 0 0 1-14 0v-1"
stroke="#fff6f3"
strokeWidth="2"
strokeLinecap="round"
/>
<Path
d="M12 18v3"
stroke="#fff6f3"
strokeWidth="2"
strokeLinecap="round"
/>
</Svg>
)}
</Pressable>
<Text style={styles.statusText}>{statusMessage}</Text>
<Text style={styles.statusText}>{statusMessage || strings.readyToRecord}</Text>
<Text style={styles.helperText}>
{backendUrl.trim()
? recording
? "Tap again when you finish speaking."
: "Tap the button to start a new voice message."
: "Open settings to add your backend URL before sending voice messages."}
{isHolding
? releaseLabel
: backendUrl.trim()
? holdLabel
: openSettingsLabel}
</Text>
{responsePreview ? (
<View style={styles.responseBox}>
<Text style={styles.responseLabel}>Server response</Text>
<Text style={styles.responseLabel}>{serverResponseLabel}</Text>
<Text style={styles.responseText}>{responsePreview}</Text>
</View>
) : null}
</View>
</ScrollView>
</KeyboardAvoidingView>
</SafeAreaView>
</View>
);
}
@@ -333,17 +440,17 @@ const styles = StyleSheet.create({
flex: 1,
},
content: {
flex: 1,
alignItems: "center",
justifyContent: "center",
paddingVertical: 32,
paddingHorizontal: 20,
paddingBottom: 32,
paddingTop: 8,
gap: 18,
},
hero: {
backgroundColor: "#13304a",
borderRadius: 28,
backgroundColor: "transparent",
paddingHorizontal: 22,
paddingVertical: 24,
gap: 12,
paddingTop: 40,
},
heroTopRow: {
alignItems: "center",
@@ -351,7 +458,6 @@ const styles = StyleSheet.create({
justifyContent: "space-between",
},
heroBadge: {
alignSelf: "flex-start",
backgroundColor: "#f2b15d",
borderRadius: 999,
paddingHorizontal: 12,
@@ -364,22 +470,14 @@ const styles = StyleSheet.create({
letterSpacing: 0.5,
textTransform: "uppercase",
},
settingsLink: {
borderColor: "#58718d",
settingsCog: {
alignItems: "center",
justifyContent: "center",
width: 40,
height: 40,
borderRadius: 999,
borderWidth: 1,
paddingHorizontal: 12,
paddingVertical: 7,
},
settingsLinkText: {
color: "#d3deea",
fontSize: 13,
fontWeight: "700",
},
subtitle: {
color: "#d3deea",
fontSize: 16,
lineHeight: 22,
backgroundColor: "#13304a",
marginLeft: 12,
},
panel: {
backgroundColor: "#fffaf1",
@@ -388,6 +486,8 @@ const styles = StyleSheet.create({
borderWidth: 1,
gap: 12,
padding: 18,
alignSelf: "center",
maxWidth: 340,
},
meterValueCentered: {
color: "#d04f2d",
@@ -404,17 +504,21 @@ const styles = StyleSheet.create({
width: 164,
alignSelf: "center",
},
recordButton: {
backgroundColor: "#d04f2d",
idleButton: {
backgroundColor: "#13304a",
},
stopButton: {
backgroundColor: "#8c1c13",
holdingButton: {
backgroundColor: "#d04f2d",
transform: [{ scale: 1.08 }],
},
micButtonText: {
color: "#fff6f3",
fontSize: 24,
fontSize: 20,
fontWeight: "800",
},
recordingLabel: {
fontSize: 18,
},
buttonDisabled: {
opacity: 0.45,
},
@@ -422,11 +526,13 @@ const styles = StyleSheet.create({
color: "#1f2d3d",
fontSize: 15,
lineHeight: 21,
textAlign: "center",
},
helperText: {
color: "#665f54",
fontSize: 13,
lineHeight: 18,
textAlign: "center",
},
responseBox: {
backgroundColor: "#f7f0e0",
@@ -440,6 +546,7 @@ const styles = StyleSheet.create({
fontSize: 13,
fontWeight: "700",
textTransform: "uppercase",
textAlign: "center",
},
responseText: {
color: "#36475a",