Skip to content

feat: MLC support for Android #134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
Oct 14, 2025
Merged

feat: MLC support for Android #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
b87e042
initial commit
grabbou Sep 30, 2025
234240f
chore: move packages, clean-up implementation, drop gson and more
grabbou Oct 10, 2025
92fa67e
chore: refactor model downloader
grabbou Oct 10, 2025
0c2af86
chore: finish model management, preparing and downloading
grabbou Oct 10, 2025
3228f39
tweaks
grabbou Oct 10, 2025
cf6069b
fixes
grabbou Oct 10, 2025
658c3a6
fixes on real device
grabbou Oct 11, 2025
cfd7bf2
update android
grabbou Oct 13, 2025
6d2f0a2
feat: ui tweak
grabbou Oct 13, 2025
fc7cf7c
fix
grabbou Oct 13, 2025
8034dd6
remove progress counter
grabbou Oct 13, 2025
fd78a95
chore: finish the work
grabbou Oct 13, 2025
5704d0b
modify on android
grabbou Oct 13, 2025
9f9957e
fix
grabbou Oct 13, 2025
63fa673
chore: address feedback
grabbou Oct 13, 2025
bde2251
fix
grabbou Oct 13, 2025
2c66693
chore: update download progress
grabbou Oct 13, 2025
3450aaa
chore: update models configuration across both platforms
grabbou Oct 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 162 additions & 0 deletions apps/example-apple/src/App.ios.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
import './global.css'

import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation'
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { StatusBar } from 'expo-status-bar'
import React from 'react'
import { Image } from 'react-native'
import { KeyboardProvider } from 'react-native-keyboard-controller'
import { SafeAreaProvider } from 'react-native-safe-area-context'

import LLMScreen from './screens/LLMScreen'
import MLCScreen from './screens/MLCScreen'
import PlaygroundScreen from './screens/PlaygroundScreen'
import SpeechScreen from './screens/SpeechScreen'
import TranscribeScreen from './screens/TranscribeScreen'

const Tab = createNativeBottomTabNavigator()

const RootStack = createNativeStackNavigator()
const LLMStack = createNativeStackNavigator()
const MLCStack = createNativeStackNavigator()
const PlaygroundStack = createNativeStackNavigator()
const TranscribeStack = createNativeStackNavigator()
const SpeechStack = createNativeStackNavigator()

function LLMStackScreen() {
return (
<LLMStack.Navigator>
<LLMStack.Screen
name="LLMScreen"
component={LLMScreen}
options={{
headerTitle: () => (
<Image
source={require('../assets/ck.png')}
style={{ width: 36, height: 36, marginTop: 10 }}
resizeMode="contain"
/>
),
}}
/>
</LLMStack.Navigator>
)
}

function MLCStackScreen() {
return (
<MLCStack.Navigator>
<MLCStack.Screen
name="MLCScreen"
component={MLCScreen}
options={{
title: 'MLC Engine',
}}
/>
</MLCStack.Navigator>
)
}

function PlaygroundStackScreen() {
return (
<PlaygroundStack.Navigator>
<PlaygroundStack.Screen
name="PlaygroundScreen"
component={PlaygroundScreen}
options={{
title: 'Playground',
}}
/>
</PlaygroundStack.Navigator>
)
}

function TranscribeStackScreen() {
return (
<TranscribeStack.Navigator>
<TranscribeStack.Screen
name="TranscribeScreen"
component={TranscribeScreen}
options={{
title: 'Speech to Text',
}}
/>
</TranscribeStack.Navigator>
)
}

function SpeechStackScreen() {
return (
<SpeechStack.Navigator>
<SpeechStack.Screen
name="SpeechScreen"
component={SpeechScreen}
options={{
title: 'Text to Speech',
}}
/>
</SpeechStack.Navigator>
)
}

function Tabs() {
return (
<Tab.Navigator sidebarAdaptable>
<Tab.Screen
name="LLM"
component={LLMStackScreen}
options={{
tabBarIcon: () => ({ sfSymbol: 'brain.head.profile' }),
}}
/>
<Tab.Screen
name="MLC"
component={MLCStackScreen}
options={{
tabBarIcon: () => ({ sfSymbol: 'cpu' }),
}}
/>
<Tab.Screen
name="Playground"
component={PlaygroundStackScreen}
options={{
tabBarIcon: () => ({ sfSymbol: 'play.circle' }),
}}
/>
<Tab.Screen
name="Transcribe"
component={TranscribeStackScreen}
options={{
tabBarIcon: () => ({ sfSymbol: 'text.quote' }),
}}
/>
<Tab.Screen
name="Speech"
component={SpeechStackScreen}
options={{
tabBarIcon: () => ({ sfSymbol: 'speaker.wave.3' }),
}}
/>
</Tab.Navigator>
)
}

export default function App() {
return (
<KeyboardProvider>
<SafeAreaProvider>
<NavigationContainer>
<RootStack.Navigator>
<RootStack.Screen
name="Home"
component={Tabs}
options={{ headerShown: false }}
/>
</RootStack.Navigator>
<StatusBar style="auto" />
</NavigationContainer>
</SafeAreaProvider>
</KeyboardProvider>
)
}
147 changes: 1 addition & 146 deletions apps/example-apple/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,161 +1,16 @@
import './global.css'

import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation'
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { StatusBar } from 'expo-status-bar'
import React from 'react'
import { Image } from 'react-native'
import { KeyboardProvider } from 'react-native-keyboard-controller'
import { SafeAreaProvider } from 'react-native-safe-area-context'

import LLMScreen from './screens/LLMScreen'
import MLCScreen from './screens/MLCScreen'
import PlaygroundScreen from './screens/PlaygroundScreen'
import SpeechScreen from './screens/SpeechScreen'
import TranscribeScreen from './screens/TranscribeScreen'

const Tab = createNativeBottomTabNavigator()

const RootStack = createNativeStackNavigator()
const LLMStack = createNativeStackNavigator()
const MLCStack = createNativeStackNavigator()
const PlaygroundStack = createNativeStackNavigator()
const TranscribeStack = createNativeStackNavigator()
const SpeechStack = createNativeStackNavigator()

function LLMStackScreen() {
return (
<LLMStack.Navigator>
<LLMStack.Screen
name="LLMScreen"
component={LLMScreen}
options={{
headerTitle: () => (
<Image
source={require('../assets/ck.png')}
style={{ width: 36, height: 36, marginTop: 10 }}
resizeMode="contain"
/>
),
}}
/>
</LLMStack.Navigator>
)
}

function MLCStackScreen() {
return (
<MLCStack.Navigator>
<MLCStack.Screen
name="MLCScreen"
component={MLCScreen}
options={{
title: 'MLC Engine',
}}
/>
</MLCStack.Navigator>
)
}

function PlaygroundStackScreen() {
return (
<PlaygroundStack.Navigator>
<PlaygroundStack.Screen
name="PlaygroundScreen"
component={PlaygroundScreen}
options={{
title: 'Playground',
}}
/>
</PlaygroundStack.Navigator>
)
}

function TranscribeStackScreen() {
return (
<TranscribeStack.Navigator>
<TranscribeStack.Screen
name="TranscribeScreen"
component={TranscribeScreen}
options={{
title: 'Speech to Text',
}}
/>
</TranscribeStack.Navigator>
)
}

function SpeechStackScreen() {
return (
<SpeechStack.Navigator>
<SpeechStack.Screen
name="SpeechScreen"
component={SpeechScreen}
options={{
title: 'Text to Speech',
}}
/>
</SpeechStack.Navigator>
)
}

function Tabs() {
return (
<Tab.Navigator sidebarAdaptable>
<Tab.Screen
name="LLM"
component={LLMStackScreen}
options={{
tabBarIcon: () => ({ sfSymbol: 'brain.head.profile' }),
}}
/>
<Tab.Screen
name="MLC"
component={MLCStackScreen}
options={{
tabBarIcon: () => ({ sfSymbol: 'cpu' }),
}}
/>
<Tab.Screen
name="Playground"
component={PlaygroundStackScreen}
options={{
tabBarIcon: () => ({ sfSymbol: 'play.circle' }),
}}
/>
<Tab.Screen
name="Transcribe"
component={TranscribeStackScreen}
options={{
tabBarIcon: () => ({ sfSymbol: 'text.quote' }),
}}
/>
<Tab.Screen
name="Speech"
component={SpeechStackScreen}
options={{
tabBarIcon: () => ({ sfSymbol: 'speaker.wave.3' }),
}}
/>
</Tab.Navigator>
)
}

export default function App() {
return (
<KeyboardProvider>
<SafeAreaProvider>
<NavigationContainer>
<RootStack.Navigator>
<RootStack.Screen
name="Home"
component={Tabs}
options={{ headerShown: false }}
/>
</RootStack.Navigator>
<StatusBar style="auto" />
</NavigationContainer>
<MLCScreen />
</SafeAreaProvider>
</KeyboardProvider>
)
Expand Down
Loading
Loading