chore: Add basic statistics to demo apps

apps/computer-vision/app/classification/index.tsx

@@ -9,12 +9,14 @@ import { BottomBar } from '../../components/BottomBar';
 import React, { useContext, useEffect, useState } from 'react';
 import { GeneratingContext } from '../../context';
 import ScreenWrapper from '../../ScreenWrapper';
+import { StatsBar } from '../../components/StatsBar';
 
 export default function ClassificationScreen() {
   const [results, setResults] = useState<{ label: string; score: number }[]>(
     []
   );
   const [imageUri, setImageUri] = useState('');
+  const [inferenceTime, setInferenceTime] = useState<number | null>(null);
 
   const model = useClassification({ model: EFFICIENTNET_V2_S_QUANTIZED });
   const { setGlobalGenerating } = useContext(GeneratingContext);
@@ -34,7 +36,9 @@ export default function ClassificationScreen() {
   const runForward = async () => {
     if (imageUri) {
       try {
+        const start = Date.now();
         const output = await model.forward(imageUri);
+        setInferenceTime(Date.now() - start);
         const top10 = Object.entries(output)
           .sort(([, a], [, b]) => (b as number) - (a as number))
           .slice(0, 10)
@@ -80,6 +84,7 @@ export default function ClassificationScreen() {
           </View>
         )}
       </View>
+      <StatsBar inferenceTime={inferenceTime} />
       <BottomBar
         handleCameraPress={handleCameraPress}
         runForward={runForward}

apps/computer-vision/app/object_detection/index.tsx

@@ -14,6 +14,7 @@ import ImageWithBboxes from '../../components/ImageWithBboxes';
 import React, { useContext, useEffect, useState } from 'react';
 import { GeneratingContext } from '../../context';
 import ScreenWrapper from '../../ScreenWrapper';
+import { StatsBar } from '../../components/StatsBar';
 
 const MODELS: ModelOption<ObjectDetectionModelSources>[] = [
   { label: 'RF-DeTR Nano', value: RF_DETR_NANO },
@@ -29,6 +30,7 @@ export default function ObjectDetectionScreen() {
   }>();
   const [selectedModel, setSelectedModel] =
     useState<ObjectDetectionModelSources>(RF_DETR_NANO);
+  const [inferenceTime, setInferenceTime] = useState<number | null>(null);
 
   const model = useObjectDetection({ model: selectedModel });
   const { setGlobalGenerating } = useContext(GeneratingContext);
@@ -52,7 +54,9 @@ export default function ObjectDetectionScreen() {
   const runForward = async () => {
     if (imageUri) {
       try {
+        const start = Date.now();
         const output = await model.forward(imageUri);
+        setInferenceTime(Date.now() - start);
         setResults(output);
       } catch (e) {
         console.error(e);
@@ -100,6 +104,10 @@ export default function ObjectDetectionScreen() {
           setResults([]);
         }}
       />
+      <StatsBar
+        inferenceTime={inferenceTime}
+        detectionCount={results.length > 0 ? results.length : null}
+      />
       <BottomBar
         handleCameraPress={handleCameraPress}
         runForward={runForward}

apps/computer-vision/app/ocr/index.tsx

@@ -18,6 +18,7 @@ import ImageWithBboxes2 from '../../components/ImageWithOCRBboxes';
 import React, { useContext, useEffect, useState } from 'react';
 import { GeneratingContext } from '../../context';
 import ScreenWrapper from '../../ScreenWrapper';
+import { StatsBar } from '../../components/StatsBar';
 
 type OCRModelSources = OCRProps['model'];
 
@@ -40,6 +41,7 @@ export default function OCRScreen() {
   }>();
   const [selectedModel, setSelectedModel] =
     useState<OCRModelSources>(OCR_ENGLISH);
+  const [inferenceTime, setInferenceTime] = useState<number | null>(null);
 
   const model = useOCR({
     model: selectedModel,
@@ -63,7 +65,9 @@ export default function OCRScreen() {
 
   const runForward = async () => {
     try {
+      const start = Date.now();
       const output = await model.forward(imageUri);
+      setInferenceTime(Date.now() - start);
       setResults(output);
     } catch (e) {
       console.error(e);
@@ -123,6 +127,10 @@ export default function OCRScreen() {
           setResults([]);
         }}
       />
+      <StatsBar
+        inferenceTime={inferenceTime}
+        detectionCount={results.length > 0 ? results.length : null}
+      />
       <BottomBar
         handleCameraPress={handleCameraPress}
         runForward={runForward}

apps/computer-vision/app/ocr_vertical/index.tsx

@@ -7,6 +7,7 @@ import ImageWithBboxes2 from '../../components/ImageWithOCRBboxes';
 import React, { useContext, useEffect, useState } from 'react';
 import { GeneratingContext } from '../../context';
 import ScreenWrapper from '../../ScreenWrapper';
+import { StatsBar } from '../../components/StatsBar';
 
 export default function VerticalOCRScree() {
   const [imageUri, setImageUri] = useState('');
@@ -15,6 +16,7 @@ export default function VerticalOCRScree() {
     width: number;
     height: number;
   }>();
+  const [inferenceTime, setInferenceTime] = useState<number | null>(null);
   const model = useVerticalOCR({
     model: OCR_ENGLISH,
     independentCharacters: true,
@@ -38,7 +40,9 @@ export default function VerticalOCRScree() {
 
   const runForward = async () => {
     try {
+      const start = Date.now();
       const output = await model.forward(imageUri);
+      setInferenceTime(Date.now() - start);
       setResults(output);
     } catch (e) {
       console.error(e);
@@ -89,6 +93,10 @@ export default function VerticalOCRScree() {
           </View>
         )}
       </View>
+      <StatsBar
+        inferenceTime={inferenceTime}
+        detectionCount={results.length > 0 ? results.length : null}
+      />
       <BottomBar
         handleCameraPress={handleCameraPress}
         runForward={runForward}

apps/computer-vision/app/semantic_segmentation/index.tsx

@@ -24,6 +24,7 @@ import { View, StyleSheet, Image } from 'react-native';
 import React, { useContext, useEffect, useState } from 'react';
 import { GeneratingContext } from '../../context';
 import ScreenWrapper from '../../ScreenWrapper';
+import { StatsBar } from '../../components/StatsBar';
 
 const numberToColor: number[][] = [
   [255, 87, 51], // 0 Red
@@ -75,6 +76,7 @@ export default function SemanticSegmentationScreen() {
   const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
   const [segImage, setSegImage] = useState<SkImage | null>(null);
   const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
+  const [inferenceTime, setInferenceTime] = useState<number | null>(null);
 
   useEffect(() => {
     setGlobalGenerating(isGenerating);
@@ -91,6 +93,7 @@ export default function SemanticSegmentationScreen() {
   const runForward = async () => {
     if (!imageUri || imageSize.width === 0 || imageSize.height === 0) return;
     try {
+      const start = Date.now();
       const { width, height } = imageSize;
       const output = await forward(imageUri, [], true);
       const argmax = output.ARGMAX || [];
@@ -119,6 +122,7 @@ export default function SemanticSegmentationScreen() {
         width * 4
       );
       setSegImage(img);
+      setInferenceTime(Date.now() - start);
     } catch (e) {
       console.error(e);
     }
@@ -179,6 +183,7 @@ export default function SemanticSegmentationScreen() {
           setSegImage(null);
         }}
       />
+      <StatsBar inferenceTime={inferenceTime} />
       <BottomBar
         handleCameraPress={handleCameraPress}
         runForward={runForward}

apps/computer-vision/app/style_transfer/index.tsx

@@ -16,6 +16,7 @@ import { View, StyleSheet, Image } from 'react-native';
 import React, { useContext, useEffect, useState } from 'react';
 import { GeneratingContext } from '../../context';
 import ScreenWrapper from '../../ScreenWrapper';
+import { StatsBar } from '../../components/StatsBar';
 
 type StyleTransferModelSources = {
   modelName: StyleTransferModelName;
@@ -42,6 +43,7 @@ export default function StyleTransferScreen() {
 
   const [imageUri, setImageUri] = useState('');
   const [styledUri, setStyledUri] = useState('');
+  const [inferenceTime, setInferenceTime] = useState<number | null>(null);
 
   const handleCameraPress = async (isCamera: boolean) => {
     const image = await getImage(isCamera);
@@ -55,7 +57,9 @@ export default function StyleTransferScreen() {
   const runForward = async () => {
     if (imageUri) {
       try {
+        const start = Date.now();
         const uri = await model.forward(imageUri, 'url');
+        setInferenceTime(Date.now() - start);
         setStyledUri(uri);
       } catch (e) {
         console.error(e);
@@ -96,6 +100,7 @@ export default function StyleTransferScreen() {
           setStyledUri('');
         }}
       />
+      <StatsBar inferenceTime={inferenceTime} />
       <BottomBar
         handleCameraPress={handleCameraPress}
         runForward={runForward}

apps/computer-vision/app/text_to_image/index.tsx

@@ -23,6 +23,7 @@ import { GeneratingContext } from '../../context';
 import ColorPalette from '../../colors';
 import ProgressBar from '../../components/ProgressBar';
 import { Ionicons } from '@expo/vector-icons';
+import { StatsBar } from '../../components/StatsBar';
 
 type TextToImageModelSources = TextToImageProps['model'];
 
@@ -39,6 +40,7 @@ export default function TextToImageScreen() {
   const [selectedModel, setSelectedModel] = useState<TextToImageModelSources>(
     BK_SDM_TINY_VPRED_256
   );
+  const [generationTime, setGenerationTime] = useState<number | null>(null);
 
   const imageSize = 224;
   const model = useTextToImage({
@@ -55,8 +57,13 @@ export default function TextToImageScreen() {
   const runForward = async () => {
     if (!input.trim()) return;
     try {
+      const start = Date.now();
       const output = await model.generate(input, imageSize, steps);
-      if (output.length) setImage(output);
+
+      if (output.length) {
+        setImage(output);
+        setGenerationTime(Date.now() - start);
+      }
     } catch (e) {
       console.error(e);
     } finally {
@@ -105,6 +112,7 @@ export default function TextToImageScreen() {
           onSelect={(m) => {
             setSelectedModel(m);
             setImage(null);
+            setGenerationTime(null);
           }}
         />
 
@@ -124,6 +132,9 @@ export default function TextToImageScreen() {
           </TouchableOpacity>
         </View>
 
+        {/* Added StatsBar here, just above the input row */}
+        <StatsBar inferenceTime={generationTime} />
+
         <View style={styles.inputRow}>
           <TextInput
             style={styles.textInput}

apps/computer-vision/components/StatsBar.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+interface Props {
+  inferenceTime: number | null;
+  detectionCount?: number | null;
+}
+
+export function StatsBar({ inferenceTime, detectionCount }: Props) {
+  if (inferenceTime === null) return null;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.stat}>Inference: {inferenceTime} ms</Text>
+      {detectionCount != null && (
+        <>
+          <Text style={styles.separator}>·</Text>
+          <Text style={styles.stat}>
+            {detectionCount} detection{detectionCount !== 1 ? 's' : ''}
+          </Text>
+        </>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 8,
+    paddingVertical: 6,
+  },
+  stat: {
+    fontSize: 13,
+    color: '#334155',
+    fontWeight: '500',
+  },
+  separator: {
+    fontSize: 13,
+    color: '#94A3B8',
+  },
+});

apps/llm/app/llm/index.tsx

@@ -28,6 +28,8 @@ const SUGGESTED_PROMPTS = [
   'What are the benefits of on-device AI?',
   'Give me 3 fun facts about space',
 ];
+import { useLLMStats } from '../../hooks/useLLMStats';
+import { StatsBar } from '../../components/StatsBar';
 
 export default function LLMScreenWrapper() {
   const isFocused = useIsFocused();
@@ -44,6 +46,7 @@ function LLMScreen() {
   const { setGlobalGenerating } = useContext(GeneratingContext);
 
   const llm = useLLM({ model: selectedModel });
+  const { stats, onMessageSend } = useLLMStats(llm.response, llm.isGenerating);
 
   useEffect(() => {
     if (llm.error) {
@@ -56,6 +59,7 @@ function LLMScreen() {
   }, [llm.isGenerating, setGlobalGenerating]);
 
   const sendMessage = async () => {
+    onMessageSend();
     setUserInput('');
     textInputRef.current?.clear();
     try {
@@ -109,7 +113,7 @@ function LLMScreen() {
             onSelect={(m) => setSelectedModel(m)}
             disabled={llm.isGenerating}
           />
-
+          <StatsBar stats={stats} />
           <View style={styles.bottomContainer}>
             <TextInput
               autoCorrect={false}

apps/llm/app/llm_structured_output/index.tsx

@@ -20,6 +20,8 @@ const SUGGESTED_PROMPTS = [
   "I'm Bob. Does it have warranty? I'll pay €50.",
   "Name's Sara. What condition? My bid is $75.",
 ];
+import { useLLMStats } from '../../hooks/useLLMStats';
+import { StatsBar } from '../../components/StatsBar';
 import {
   useLLM,
   fixAndValidateStructuredOutput,
@@ -85,7 +87,8 @@ function LLMScreen() {
   const textInputRef = useRef<TextInput>(null);
   const { setGlobalGenerating } = useContext(GeneratingContext);
 
-  const llm = useLLM({ model: selectedModel }); // try out 4B model if 1.7B struggles with following structured output
+  const llm = useLLM({ model: selectedModel });
+  const { stats, onMessageSend } = useLLMStats(llm.response, llm.isGenerating);
 
   useEffect(() => {
     setGlobalGenerating(llm.isGenerating);
@@ -136,6 +139,7 @@ function LLMScreen() {
   }, [llm.error]);
 
   const sendMessage = async () => {
+    onMessageSend();
     setUserInput('');
     textInputRef.current?.clear();
     try {
@@ -190,7 +194,7 @@ function LLMScreen() {
             onSelect={(m) => setSelectedModel(m)}
             disabled={llm.isGenerating}
           />
-
+          <StatsBar stats={stats} />
           <View style={styles.bottomContainer}>
             <TextInput
               autoCorrect={false}