fix: ML predict multipart + timeout

Author: GAchuzia

backend/app.py

@@ -43,7 +43,7 @@ def create_app(config_override=None):
         app,
         origins="*",
         methods=["GET", "POST", "PUT", "DELETE"],
-        allow_headers=["Content-Type"],
+        allow_headers=["Content-Type", "Accept", "Authorization"],
     )
 
     # Homepage Endpoints to Delete Later

backend/services/authentication_service.py

@@ -14,8 +14,13 @@
 
 def login_user_json(data):
     """Attempt to login a user"""
-    username = data.get("username")
-    password = data.get("password")
+    if not data:
+        return (
+            jsonify({"status": "error", "message": "Invalid password or username."}),
+            400,
+        )
+    username = (data.get("username") or "").strip()
+    password = (data.get("password") or "").strip()
 
     # Err on the side of caution for error messages to give no hints to
     # attackers

frontend/cu-bytes/app/login.tsx

@@ -67,14 +67,14 @@ export default function LoginScreen() {
     /*
         Send a request to the backend endpoint to get the logged-in user's username and profile settings
     */
-    const loadSettings = async () => {
-
+    const loadSettings = async (loggedInAs: string) => {
         try {
-            const res = await fetch(`${API_BASE_URL}/profile/retreive/${username}`);
+            const res = await fetch(
+                `${API_BASE_URL}/profile/retreive/${encodeURIComponent(loggedInAs)}`
+            );
             const data = await res.json();
 
-            // Update the copy of the logged-in user's username and profile settings using the retrieved data
-            setUsernameGlobal(username);
+            setUsernameGlobal(loggedInAs);
             setHasConfiguredSettingsGlobal(data.has_configured_settings)
             setShowStatsGlobal(data.show_stats);
             setHasEggAllergyGlobal(data.has_egg_allergy);
@@ -107,35 +107,54 @@ export default function LoginScreen() {
             string - psswrd: The password entered by the user to login into an account
     */
     const loginUser = async (name: string, psswrd: string) => {
+        const trimmedUser = name.trim();
+        const trimmedPass = psswrd.trim();
+        setError({ message: '', status: '' });
+
         try {
             const res = await fetch(`${API_BASE_URL}/auth/login`, {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify( { username: name, password: psswrd} )
-                }
-            );
-            const data = await res.json();
-
-            // If the backend endpoint returns an error, store the error message
-            // (The user failed to log in to an account with the entered username and password)
-            if (data.status === 'error') {
-                setError(data);
-                console.log(error);
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    username: trimmedUser,
+                    password: trimmedPass,
+                }),
+            });
+
+            let data: { status?: string; message?: string } = {};
+            try {
+                data = await res.json();
+            } catch {
+                setError({
+                    message: 'Invalid response from server.',
+                    status: 'error',
+                });
+                return;
             }
-            // Else, update the copy of the user's username to the username they entered,
-            // load the user's profile settings from the backend endpoint, and route the user to the 'home' page
-            // (The user successfully logged in to an account with the entered username and password)
-            else if (data.status === 'success') {
-                await loadSettings();
-                router.push("/home");
+
+            if (data.status === 'error' || !res.ok) {
+                setError({
+                    message: data.message || `Login failed (${res.status})`,
+                    status: 'error',
+                });
+                return;
             }
 
+            if (data.status === 'success') {
+                setUsername(trimmedUser);
+                await loadSettings(trimmedUser);
+                router.push('/home');
+            }
         } catch (err) {
             console.error(err);
+            setError({
+                message: 'Network error. Check your connection and try again.',
+                status: 'error',
+            });
         } finally {
             setLoading(false);
         }
-    }
+    };
 
     /*
         Log out the logged-in user by setting their profile settings to false, and routing to the splash page

frontend/cu-bytes/services/api.ts

@@ -46,12 +46,15 @@ console.log('Config LOCAL_IP:', LOCAL_IP);
 
 const api = axios.create({
   baseURL: API_BASE_URL,
-  timeout: 15000,
+  timeout: 30000,
   headers: {
     'Content-Type': 'application/json',
   },
 });
 
+/** ML upload timeout (cold start + inference on Azure can exceed 15s). */
+const ML_PREDICT_TIMEOUT_MS = 120000;
+
 // Request interceptor
 api.interceptors.request.use(
   (config) => {
@@ -83,19 +86,20 @@ api.interceptors.response.use(
 
 // API functions
 export const apiService = {
-  // ML Prediction
+  /**
+   * POST multipart image to /ml/predict.
+   * Uses fetch (not the JSON-configured axios instance) so the browser/RN sets
+   * multipart boundaries; axios defaults would send application/json and break uploads.
+   */
   async predictFood(imageUri: string) {
-    // Convert image URI to FormData for upload
     const formData = new FormData();
 
-    // For web, we need to fetch the image and convert to blob
     if (Platform.OS === 'web') {
       const response = await fetch(imageUri);
       const blob = await response.blob();
       const file = new File([blob], 'image.jpg', { type: 'image/jpeg' });
       formData.append('image', file);
     } else {
-      // For mobile (React Native)
       const filename = imageUri.split('/').pop() || 'image.jpg';
       const match = /\.(\w+)$/.exec(filename);
       const type = match ? `image/${match[1]}` : 'image/jpeg';
@@ -107,12 +111,27 @@ export const apiService = {
       } as any);
     }
 
-    const response = await api.post('/ml/predict', formData, {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-      },
-    });
-    return response.data;
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), ML_PREDICT_TIMEOUT_MS);
+
+    try {
+      const res = await fetch(`${API_BASE_URL}/ml/predict`, {
+        method: 'POST',
+        body: formData,
+        signal: controller.signal,
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        const msg =
+          typeof data === 'object' && data && 'error' in data
+            ? String((data as { error?: string }).error)
+            : res.statusText;
+        throw new Error(msg || `Predict failed (${res.status})`);
+      }
+      return data;
+    } finally {
+      clearTimeout(timeoutId);
+    }
   },
 };