chore: add suggestions from code review

msluszniak · msluszniak · commit 9807108e6604 · 2026-03-23T14:58:14.000+01:00
diff --git a/apps/computer-vision/app/classification/index.tsx b/apps/computer-vision/app/classification/index.tsx
@@ -10,6 +10,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import { GeneratingContext } from '../../context';
 import ScreenWrapper from '../../ScreenWrapper';
 import { StatsBar } from '../../components/StatsBar';
+import ErrorBanner from '../../components/ErrorBanner';
 
 export default function ClassificationScreen() {
   const [results, setResults] = useState<{ label: string; score: number }[]>(
@@ -18,12 +19,19 @@ export default function ClassificationScreen() {
   const [imageUri, setImageUri] = useState('');
   const [inferenceTime, setInferenceTime] = useState<number | null>(null);
 
+  const [error, setError] = useState<string | null>(null);
+
   const model = useClassification({ model: EFFICIENTNET_V2_S_QUANTIZED });
   const { setGlobalGenerating } = useContext(GeneratingContext);
+
   useEffect(() => {
     setGlobalGenerating(model.isGenerating);
   }, [model.isGenerating, setGlobalGenerating]);
 
+  useEffect(() => {
+    if (model.error) setError(String(model.error));
+  }, [model.error]);
+
   const handleCameraPress = async (isCamera: boolean) => {
     const image = await getImage(isCamera);
     const uri = image?.uri;
@@ -46,21 +54,24 @@ export default function ClassificationScreen() {
           .map(([label, score]) => ({ label, score: score as number }));
         setResults(top10);
       } catch (e) {
-        console.error(e);
+        setError(e instanceof Error ? e.message : String(e));
       }
     }
   };
 
-  if (!model.isReady) {
+  if (!model.isReady && !model.error) {
     return (
       <Spinner
-        visible={!model.isReady}
+        visible={true}
         textContent={`Loading the model ${(model.downloadProgress * 100).toFixed(0)} %`}
       />
     );
   }
+
   return (
     <ScreenWrapper>
+      <ErrorBanner message={error} onDismiss={() => setError(null)} />
+
       <View style={styles.imageContainer}>
         <Image
           style={styles.image}
diff --git a/apps/computer-vision/app/ocr_vertical/index.tsx b/apps/computer-vision/app/ocr_vertical/index.tsx
@@ -8,24 +8,34 @@ import React, { useContext, useEffect, useState } from 'react';
 import { GeneratingContext } from '../../context';
 import ScreenWrapper from '../../ScreenWrapper';
 import { StatsBar } from '../../components/StatsBar';
+import ErrorBanner from '../../components/ErrorBanner';
 
-export default function VerticalOCRScree() {
+export default function VerticalOCRScreen() {
   const [imageUri, setImageUri] = useState('');
   const [results, setResults] = useState<any[]>([]);
   const [imageDimensions, setImageDimensions] = useState<{
     width: number;
     height: number;
   }>();
   const [inferenceTime, setInferenceTime] = useState<number | null>(null);
+
+  const [error, setError] = useState<string | null>(null);
+
   const model = useVerticalOCR({
     model: OCR_ENGLISH,
     independentCharacters: true,
   });
+
   const { setGlobalGenerating } = useContext(GeneratingContext);
+
   useEffect(() => {
     setGlobalGenerating(model.isGenerating);
   }, [model.isGenerating, setGlobalGenerating]);
 
+  useEffect(() => {
+    if (model.error) setError(String(model.error));
+  }, [model.error]);
+
   const handleCameraPress = async (isCamera: boolean) => {
     const image = await getImage(isCamera);
     const width = image?.width;
@@ -46,14 +56,14 @@ export default function VerticalOCRScree() {
       setInferenceTime(Date.now() - start);
       setResults(output);
     } catch (e) {
-      console.error(e);
+      setError(e instanceof Error ? e.message : String(e));
     }
   };
 
-  if (!model.isReady) {
+  if (!model.isReady && !model.error) {
     return (
       <Spinner
-        visible={!model.isReady}
+        visible={true}
         textContent={`Loading the model ${(model.downloadProgress * 100).toFixed(0)} %`}
       />
     );
@@ -62,6 +72,8 @@ export default function VerticalOCRScree() {
   return (
     <ScreenWrapper>
       <View style={styles.container}>
+        <ErrorBanner message={error} onDismiss={() => setError(null)} />
+
         <View style={styles.imageContainer}>
           {imageUri && imageDimensions?.width && imageDimensions?.height ? (
             <ImageWithBboxes2
@@ -87,7 +99,7 @@ export default function VerticalOCRScree() {
               {results.map(({ text, score }, index) => (
                 <View key={index} style={styles.resultRecord}>
                   <Text style={styles.resultLabel}>{text}</Text>
-                  <Text>{score.toFixed(3)}</Text>
+                  <Text>{score?.toFixed(3)}</Text>
                 </View>
               ))}
             </ScrollView>
diff --git a/apps/computer-vision/app/vision_camera/index.tsx b/apps/computer-vision/app/vision_camera/index.tsx
@@ -34,6 +34,8 @@ import SegmentationTask from '../../components/vision_camera/tasks/SegmentationT
 import InstanceSegmentationTask from '../../components/vision_camera/tasks/InstanceSegmentationTask';
 import OCRTask from '../../components/vision_camera/tasks/OCRTask';
 import StyleTransferTask from '../../components/vision_camera/tasks/StyleTransferTask';
+// 1. Import ErrorBanner
+import ErrorBanner from '../../components/ErrorBanner';
 
 type TaskId =
   | 'classification'
@@ -112,8 +114,6 @@ const TASKS: Task[] = [
   },
 ];
 
-// Module-level consts so worklets in task components can always reference the same stable objects.
-// Never replaced — only mutated via setBlocking to avoid closure staleness.
 const frameKillSwitch = createSynchronizable(false);
 const cameraPositionSync = createSynchronizable<'front' | 'back'>('back');
 
@@ -132,6 +132,9 @@ export default function VisionCameraScreen() {
   const [frameOutput, setFrameOutput] = useState<ReturnType<
     typeof useFrameOutput
   > | null>(null);
+
+  const [error, setError] = useState<string | null>(null);
+
   const { setGlobalGenerating } = useContext(GeneratingContext);
 
   const isFocused = useIsFocused();
@@ -150,6 +153,7 @@ export default function VisionCameraScreen() {
 
   useEffect(() => {
     frameKillSwitch.setBlocking(true);
+    setError(null);
     const id = setTimeout(() => {
       frameKillSwitch.setBlocking(false);
     }, 300);
@@ -172,6 +176,10 @@ export default function VisionCameraScreen() {
     [setGlobalGenerating]
   );
 
+  const handleErrorChange = useCallback((errorMessage: string | null) => {
+    setError(errorMessage);
+  }, []);
+
   if (!cameraPermission.hasPermission) {
     return (
       <View style={styles.centered}>
@@ -209,12 +217,17 @@ export default function VisionCameraScreen() {
     onProgressChange: setDownloadProgress,
     onGeneratingChange: handleGeneratingChange,
     onFpsChange: handleFpsChange,
+    onErrorChange: handleErrorChange,
   };
 
   return (
     <View style={styles.container}>
       <StatusBar barStyle="light-content" translucent />
 
+      <View style={[styles.errorOverlay, { paddingTop: insets.top }]}>
+        <ErrorBanner message={error} onDismiss={() => setError(null)} />
+      </View>
+
       <Camera
         style={StyleSheet.absoluteFill}
         device={device}
@@ -224,7 +237,6 @@ export default function VisionCameraScreen() {
         orientationSource="device"
       />
 
-      {/* Layout sentinel — measures the full-screen area for bbox/canvas sizing */}
       <View
         style={StyleSheet.absoluteFill}
         pointerEvents="none"
@@ -280,7 +292,7 @@ export default function VisionCameraScreen() {
         />
       )}
 
-      {!isReady && (
+      {!isReady && !error && (
         <View style={styles.loadingOverlay}>
           <Spinner
             visible
@@ -387,6 +399,13 @@ export default function VisionCameraScreen() {
 
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: 'black' },
+  errorOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 100,
+  },
   centered: {
     flex: 1,
     backgroundColor: 'black',
@@ -407,6 +426,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(0,0,0,0.6)',
     justifyContent: 'center',
     alignItems: 'center',
+    zIndex: 10,
   },
   topOverlay: {
     position: 'absolute',
@@ -415,6 +435,7 @@ const styles = StyleSheet.create({
     right: 0,
     alignItems: 'center',
     gap: 8,
+    zIndex: 5,
   },
   titleRow: {
     alignItems: 'center',
@@ -487,6 +508,7 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     alignItems: 'center',
+    zIndex: 5,
   },
   flipButton: {
     width: 56,
diff --git a/apps/computer-vision/components/vision_camera/tasks/ClassificationTask.tsx b/apps/computer-vision/components/vision_camera/tasks/ClassificationTask.tsx
@@ -17,11 +17,16 @@ export default function ClassificationTask({
   onProgressChange,
   onGeneratingChange,
   onFpsChange,
+  onErrorChange,
 }: Props) {
   const model = useClassification({ model: EFFICIENTNET_V2_S });
   const [classResult, setClassResult] = useState({ label: '', score: 0 });
   const lastFrameTimeRef = useRef(Date.now());
 
+  useEffect(() => {
+    onErrorChange(model.error ? String(model.error) : null);
+  }, [model.error, onErrorChange]);
+
   useEffect(() => {
     onReadyChange(model.isReady);
   }, [model.isReady, onReadyChange]);
diff --git a/apps/computer-vision/components/vision_camera/tasks/InstanceSegmentationTask.tsx b/apps/computer-vision/components/vision_camera/tasks/InstanceSegmentationTask.tsx
@@ -34,6 +34,7 @@ export default function InstanceSegmentationTask({
   onProgressChange,
   onGeneratingChange,
   onFpsChange,
+  onErrorChange,
 }: Props) {
   const yolo26n = useInstanceSegmentation({
     model: YOLO26N_SEG,
@@ -51,6 +52,10 @@ export default function InstanceSegmentationTask({
   const [imageSize, setImageSize] = useState({ width: 1, height: 1 });
   const lastFrameTimeRef = useRef(Date.now());
 
+  useEffect(() => {
+    onErrorChange(active.error ? String(active.error) : null);
+  }, [active.error, onErrorChange]);
+
   useEffect(() => {
     onReadyChange(active.isReady);
   }, [active.isReady, onReadyChange]);
diff --git a/apps/computer-vision/components/vision_camera/tasks/OCRTask.tsx b/apps/computer-vision/components/vision_camera/tasks/OCRTask.tsx
@@ -17,12 +17,17 @@ export default function OCRTask({
   onProgressChange,
   onGeneratingChange,
   onFpsChange,
+  onErrorChange,
 }: Props) {
   const model = useOCR({ model: OCR_ENGLISH });
   const [detections, setDetections] = useState<OCRDetection[]>([]);
   const [imageSize, setImageSize] = useState({ width: 1, height: 1 });
   const lastFrameTimeRef = useRef(Date.now());
 
+  useEffect(() => {
+    onErrorChange(model.error ? String(model.error) : null);
+  }, [model.error, onErrorChange]);
+
   useEffect(() => {
     onReadyChange(model.isReady);
   }, [model.isReady, onReadyChange]);
diff --git a/apps/computer-vision/components/vision_camera/tasks/ObjectDetectionTask.tsx b/apps/computer-vision/components/vision_camera/tasks/ObjectDetectionTask.tsx
@@ -25,6 +25,7 @@ export default function ObjectDetectionTask({
   onProgressChange,
   onGeneratingChange,
   onFpsChange,
+  onErrorChange,
 }: Props) {
   const ssdlite = useObjectDetection({
     model: SSDLITE_320_MOBILENET_V3_LARGE,
@@ -41,6 +42,10 @@ export default function ObjectDetectionTask({
   const [imageSize, setImageSize] = useState({ width: 1, height: 1 });
   const lastFrameTimeRef = useRef(Date.now());
 
+  useEffect(() => {
+    onErrorChange(active.error ? String(active.error) : null);
+  }, [active.error, onErrorChange]);
+
   useEffect(() => {
     onReadyChange(active.isReady);
   }, [active.isReady, onReadyChange]);
diff --git a/apps/computer-vision/components/vision_camera/tasks/SegmentationTask.tsx b/apps/computer-vision/components/vision_camera/tasks/SegmentationTask.tsx
@@ -44,6 +44,7 @@ export default function SegmentationTask({
   onProgressChange,
   onGeneratingChange,
   onFpsChange,
+  onErrorChange,
 }: Props) {
   const segDeeplabResnet50 = useSemanticSegmentation({
     model: DEEPLAB_V3_RESNET50_QUANTIZED,
@@ -87,6 +88,10 @@ export default function SegmentationTask({
   const [maskImage, setMaskImage] = useState<SkImage | null>(null);
   const lastFrameTimeRef = useRef(Date.now());
 
+  useEffect(() => {
+    onErrorChange(active.error ? String(active.error) : null);
+  }, [active.error, onErrorChange]);
+
   useEffect(() => {
     onReadyChange(active.isReady);
   }, [active.isReady, onReadyChange]);
diff --git a/apps/computer-vision/components/vision_camera/tasks/StyleTransferTask.tsx b/apps/computer-vision/components/vision_camera/tasks/StyleTransferTask.tsx
@@ -31,6 +31,7 @@ export default function StyleTransferTask({
   onProgressChange,
   onGeneratingChange,
   onFpsChange,
+  onErrorChange,
 }: Props) {
   const candy = useStyleTransfer({
     model: STYLE_TRANSFER_CANDY,
@@ -46,6 +47,10 @@ export default function StyleTransferTask({
   const [styledImage, setStyledImage] = useState<SkImage | null>(null);
   const lastFrameTimeRef = useRef(Date.now());
 
+  useEffect(() => {
+    onErrorChange(active.error ? String(active.error) : null);
+  }, [active.error, onErrorChange]);
+
   useEffect(() => {
     onReadyChange(active.isReady);
   }, [active.isReady, onReadyChange]);
diff --git a/apps/computer-vision/components/vision_camera/tasks/types.ts b/apps/computer-vision/components/vision_camera/tasks/types.ts
@@ -11,4 +11,5 @@ export type TaskProps = {
   onProgressChange: (progress: number) => void;
   onGeneratingChange: (isGenerating: boolean) => void;
   onFpsChange: (fps: number, frameMs: number) => void;
+  onErrorChange: (error: string | null) => void;
 };
diff --git a/apps/llm/app/multimodal_llm/index.tsx b/apps/llm/app/multimodal_llm/index.tsx
