feat: upgrade MLC-LLM and fix android demo app (#190)

* fix: download tensor-cache.json for new MLC-LLM version

* fix: prevent eslint from linting dist dir

* feat: demo app to support Android

* fix(demo): icons on android

* fix(demo): model selection if at least one chat is present

* chore: comply with eslint

Author: artus9033

apps/expo-example/app.json

@@ -17,6 +17,7 @@
       "bundleIdentifier": "com.callstack.ai.example"
     },
     "android": {
+      "forceDarkAllowed": false,
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"

apps/expo-example/package.json

@@ -13,9 +13,11 @@
     "@azure/core-asynciterator-polyfill": "^1.0.2",
     "@bottom-tabs/react-navigation": "^0.10.2",
     "@expo/ui": "~0.2.0-beta.9",
+    "@expo/vector-icons": "^15.0.3",
     "@lodev09/react-native-true-sheet": "^3.8.1",
     "@react-native-ai/apple": "workspace:*",
     "@react-native-ai/llama": "workspace:*",
+    "@react-native-ai/mlc": "workspace:*",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-picker/picker": "2.11.1",
     "@react-navigation/bottom-tabs": "^7.9.0",
@@ -32,9 +34,11 @@
     "expo-clipboard": "~8.0.8",
     "expo-document-picker": "~14.0.8",
     "expo-file-system": "~19.0.21",
+    "expo-font": "^14.0.11",
     "expo-glass-effect": "~0.1.8",
     "expo-status-bar": "~3.0.9",
     "expo-symbols": "~1.0.8",
+    "expo-system-ui": "^6.0.9",
     "jotai": "^2.12.2",
     "llama.rn": "^0.10.1",
     "react": "19.1.0",

apps/expo-example/src/App.tsx

@@ -1,3 +1,4 @@
+import Ionicons from '@expo/vector-icons/Ionicons'
 import {
   createDrawerNavigator,
   DrawerContentComponentProps,
@@ -7,14 +8,14 @@ import { NavigationContainer } from '@react-navigation/native'
 import { StatusBar } from 'expo-status-bar'
 import { SymbolView } from 'expo-symbols'
 import { Provider as JotaiProvider } from 'jotai'
-import React, { Suspense } from 'react'
+import React from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { KeyboardProvider } from 'react-native-keyboard-controller'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
 
 import { AdaptiveGlass } from './components/AdaptiveGlass'
-import ChatScreen from './screens/apple/ChatScreen'
+import ChatScreen from './screens/ChatScreen'
 import { useChatStore } from './store/chatStore'
 import { colors } from './theme/colors'
 
@@ -60,6 +61,9 @@ function CustomDrawerContent({ navigation }: DrawerContentComponentProps) {
                 size={18}
                 tintColor={colors.label}
                 resizeMode="scaleAspectFit"
+                fallback={
+                  <Ionicons name="add" size={18} color={colors.label} />
+                }
               />
             </Pressable>
           </AdaptiveGlass>
@@ -74,6 +78,13 @@ function CustomDrawerContent({ navigation }: DrawerContentComponentProps) {
                 size={22}
                 tintColor={colors.secondaryLabel}
                 resizeMode="scaleAspectFit"
+                fallback={
+                  <Ionicons
+                    name="chatbubble-outline"
+                    size={22}
+                    color={colors.secondaryLabel}
+                  />
+                }
               />
             </View>
           </AdaptiveGlass>
@@ -110,6 +121,13 @@ function CustomDrawerContent({ navigation }: DrawerContentComponentProps) {
                     size={18}
                     tintColor={colors.tertiaryLabel}
                     resizeMode="scaleAspectFit"
+                    fallback={
+                      <Ionicons
+                        name="chatbubble-outline"
+                        size={18}
+                        color={colors.tertiaryLabel}
+                      />
+                    }
                   />
                   <Text style={styles.chatItemTitle} numberOfLines={1}>
                     {chat.title}
@@ -120,6 +138,13 @@ function CustomDrawerContent({ navigation }: DrawerContentComponentProps) {
                       size={16}
                       tintColor={colors.systemRed}
                       resizeMode="scaleAspectFit"
+                      fallback={
+                        <Ionicons
+                          name="trash-outline"
+                          size={16}
+                          color={colors.systemRed}
+                        />
+                      }
                     />
                   </Pressable>
                 </Pressable>
@@ -151,7 +176,7 @@ export default function App() {
                 <Drawer.Screen name="Chat" component={ChatScreen} />
               </Drawer.Navigator>
             </NavigationContainer>
-            <StatusBar style="auto" />
+            <StatusBar style="dark" />
           </JotaiProvider>
         </SafeAreaProvider>
       </KeyboardProvider>
@@ -165,7 +190,7 @@ const styles = StyleSheet.create({
   },
   drawer: {
     width: 280,
-    backgroundColor: colors.systemBackground as any,
+    backgroundColor: colors.systemBackground,
   },
   drawerScroll: {
     flex: 1,
@@ -174,7 +199,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 16,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: colors.separator as any,
+    borderBottomColor: colors.separator,
   },
   drawerHeaderRow: {
     flexDirection: 'row',

…-example/src/components/RecordButton.tsx …ents/RecordButton/RecordButtonUIBase.tsxapps/expo-example/src/components/RecordButton.tsx renamed to apps/expo-example/src/components/RecordButton/RecordButtonUIBase.tsx apps/expo-example/src/components/RecordButton.tsx renamed to apps/expo-example/src/components/RecordButton/RecordButtonUIBase.tsx

@@ -1,5 +1,5 @@
-import { apple } from '@react-native-ai/apple'
-import { experimental_transcribe } from 'ai'
+import Ionicons from '@expo/vector-icons/Ionicons'
+import { experimental_transcribe, TranscriptionModel } from 'ai'
 import { SymbolView } from 'expo-symbols'
 import { useRef, useState } from 'react'
 import { ActivityIndicator, Alert, Pressable, StyleSheet } from 'react-native'
@@ -11,25 +11,27 @@ import {
   RecorderAdapterNode,
 } from 'react-native-audio-api'
 
-import { colors } from '../theme/colors'
-import {
-  float32ArrayToWAV,
-  mergeBuffersToFloat32Array,
-} from '../utils/audioUtils'
-import { AdaptiveGlass } from './AdaptiveGlass'
+import { colors } from '../../theme/colors'
+import type { float32ArrayToWAV } from '../../utils/appleAudioUtils'
+import { mergeBuffersToFloat32Array } from '../../utils/audioUtils'
+import { AdaptiveGlass } from '../AdaptiveGlass'
 
 const SAMPLE_RATE = 16000
 const STOP_DELAY_MS = 500
 
-interface RecordButtonProps {
+export interface RecordButtonUIBaseProps {
   onTranscriptionComplete: (text: string) => void
   disabled?: boolean
+  transcriptionModel?: TranscriptionModel
+  float32ArrayToWAV?: typeof float32ArrayToWAV
 }
 
-export function RecordButton({
+export function RecordButtonUIBase({
   onTranscriptionComplete,
   disabled = false,
-}: RecordButtonProps) {
+  transcriptionModel,
+  float32ArrayToWAV,
+}: RecordButtonUIBaseProps) {
   const [isRecording, setIsRecording] = useState(false)
   const [isStopping, setIsStopping] = useState(false)
   const [isTranscribing, setIsTranscribing] = useState(false)
@@ -66,11 +68,16 @@ export function RecordButton({
   }
 
   const transcribe = async (audioBuffer: ArrayBuffer) => {
+    if (!transcriptionModel) {
+      console.error('transcriptionModel is not provided')
+      return
+    }
+
     setIsTranscribing(true)
 
     try {
       const result = await experimental_transcribe({
-        model: apple.transcriptionModel(),
+        model: transcriptionModel,
         audio: audioBuffer,
       })
 
@@ -130,6 +137,11 @@ export function RecordButton({
       return
     }
 
+    if (!float32ArrayToWAV) {
+      console.error('float32ArrayToWAV function is not provided')
+      return
+    }
+
     // Immediately update UI to feel snappy
     setIsRecording(false)
     setIsStopping(true)
@@ -166,7 +178,7 @@ export function RecordButton({
     return (
       <Pressable
         onPress={handlePress}
-        disabled={disabled}
+        disabled={disabled || !transcriptionModel}
         style={styles.recordingButton}
       >
         <ActivityIndicator size="small" color="#fff" />
@@ -178,7 +190,7 @@ export function RecordButton({
     <AdaptiveGlass isInteractive style={styles.glassButton}>
       <Pressable
         onPress={handlePress}
-        disabled={disabled || isProcessing}
+        disabled={disabled || isProcessing || !transcriptionModel}
         style={styles.pressable}
       >
         {isProcessing ? (
@@ -192,6 +204,7 @@ export function RecordButton({
             size={20}
             tintColor={colors.label}
             resizeMode="scaleAspectFit"
+            fallback={<Ionicons name="mic" size={20} color={colors.label} />}
           />
         )}
       </Pressable>

apps/expo-example/src/components/RecordButton/index.android.tsx

@@ -0,0 +1,19 @@
+import {
+  RecordButtonUIBase,
+  type RecordButtonUIBaseProps,
+} from './RecordButtonUIBase'
+
+export type RecordButtonProps = Omit<
+  RecordButtonUIBaseProps,
+  'transcriptionModel'
+>
+
+export function RecordButton(props: RecordButtonProps) {
+  return (
+    <RecordButtonUIBase
+      transcriptionModel={undefined}
+      float32ArrayToWAV={undefined}
+      {...props}
+    />
+  )
+}

apps/expo-example/src/components/RecordButton/index.ios.tsx

@@ -0,0 +1,25 @@
+import { apple } from '@react-native-ai/apple'
+import { useMemo } from 'react'
+
+import { float32ArrayToWAV } from '../../utils/appleAudioUtils'
+import {
+  RecordButtonUIBase,
+  type RecordButtonUIBaseProps,
+} from './RecordButtonUIBase'
+
+export type RecordButtonProps = Omit<
+  RecordButtonUIBaseProps,
+  'transcriptionModel' | 'float32ArrayToWAV'
+>
+
+export function RecordButton(props: RecordButtonProps) {
+  const transcriptionModel = useMemo(() => apple.transcriptionModel(), [])
+
+  return (
+    <RecordButtonUIBase
+      transcriptionModel={transcriptionModel}
+      float32ArrayToWAV={float32ArrayToWAV}
+      {...props}
+    />
+  )
+}

apps/expo-example/src/components/adapters/appleSetupAdapter.ts

@@ -2,12 +2,13 @@ import type { LanguageModelV3, SpeechModelV3 } from '@ai-sdk/provider'
 import { apple, createAppleProvider } from '@react-native-ai/apple'
 import { ToolSet } from 'ai'
 
-import type { SetupAdapter } from '../../config/providers'
+import type { SetupAdapter } from '../../config/providers.common'
 
 export const createAppleLanguageSetupAdapter = (
   tools: ToolSet = {}
 ): SetupAdapter<LanguageModelV3> => {
   const apple = createAppleProvider({
+    // @ts-expect-error
     availableTools: tools,
   })
   const model = apple.languageModel()

apps/expo-example/src/components/adapters/llamaModelSetupAdapter.ts

@@ -7,7 +7,7 @@ import {
   getModelPath,
   removeModel,
 } from '../../../../../packages/llama/src/storage'
-import type { Availability, SetupAdapter } from '../../config/providers'
+import type { Availability, SetupAdapter } from '../../config/providers.common'
 import { isModelDownloaded } from '../../utils/storage'
 
 export const createLlamaLanguageSetupAdapter = (

apps/expo-example/src/components/adapters/llamaSpeechSetupAdapter.ts

@@ -6,7 +6,7 @@ import {
   removeModel,
 } from '@react-native-ai/llama'
 
-import type { Availability, SetupAdapter } from '../../config/providers'
+import type { Availability, SetupAdapter } from '../../config/providers.common'
 import { isModelDownloaded } from '../../utils/storage'
 
 interface LlamaSpeechSetupOptions {

apps/expo-example/src/components/adapters/mlcModelSetupAdapter.ts

@@ -0,0 +1,51 @@
+import type { LanguageModelV3 } from '@ai-sdk/provider'
+import { mlc } from '@react-native-ai/mlc'
+import RNBlobUtil from 'react-native-blob-util'
+
+import type { Availability, SetupAdapter } from '../../config/providers.common'
+
+export const createMLCLanguageSetupAdapter = (
+  modelId: string
+): SetupAdapter<LanguageModelV3> => {
+  const model = mlc.languageModel(modelId)
+
+  return {
+    model,
+    modelId: model.modelId,
+    display: {
+      label: model.modelId,
+      accentColor: '#eb3c25',
+      icon: 'cpu',
+    },
+    builtIn: false,
+    async isAvailable(): Promise<Availability> {
+      return (await RNBlobUtil.fs.exists(
+        RNBlobUtil.fs.dirs.SDCardDir + `/${modelId}/tensor-cache.json`
+      ))
+        ? 'yes'
+        : 'availableForDownload'
+    },
+    async download(onProgress) {
+      await model.download(async (event) => {
+        if (Number.isNaN(event.percentage)) {
+          // handle broken partly-downloaded file
+          onProgress(0)
+          await model.remove()
+          return
+        }
+
+        onProgress(event.percentage)
+      })
+    },
+    async delete() {
+      await model.unload()
+      await model.remove()
+    },
+    async unload() {
+      await model.unload()
+    },
+    async prepare() {
+      await model.prepare()
+    },
+  }
+}