Skip to content

Commit f145812

Browse files
grabbougrabbou
authored
feat: MLC support for Android (#134)
* initial commit * chore: move packages, clean-up implementation, drop gson and more * chore: refactor model downloader * chore: finish model management, preparing and downloading * tweaks * fixes * fixes on real device * update android * feat: ui tweak * fix * remove progress counter * chore: finish the work * modify on android * fix * chore: address feedback * fix * chore: update download progress * chore: update models configuration across both platforms
1 parent 718dd76 commit f145812

22 files changed

+830
-961
lines changed

‎apps/example-apple/src/App.ios.tsx‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import './global.css'
2+
3+
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation'
4+
import { NavigationContainer } from '@react-navigation/native'
5+
import { createNativeStackNavigator } from '@react-navigation/native-stack'
6+
import { StatusBar } from 'expo-status-bar'
7+
import React from 'react'
8+
import { Image } from 'react-native'
9+
import { KeyboardProvider } from 'react-native-keyboard-controller'
10+
import { SafeAreaProvider } from 'react-native-safe-area-context'
11+
12+
import LLMScreen from './screens/LLMScreen'
13+
import MLCScreen from './screens/MLCScreen'
14+
import PlaygroundScreen from './screens/PlaygroundScreen'
15+
import SpeechScreen from './screens/SpeechScreen'
16+
import TranscribeScreen from './screens/TranscribeScreen'
17+
18+
const Tab = createNativeBottomTabNavigator()
19+
20+
const RootStack = createNativeStackNavigator()
21+
const LLMStack = createNativeStackNavigator()
22+
const MLCStack = createNativeStackNavigator()
23+
const PlaygroundStack = createNativeStackNavigator()
24+
const TranscribeStack = createNativeStackNavigator()
25+
const SpeechStack = createNativeStackNavigator()
26+
27+
function LLMStackScreen() {
28+
return (
29+
<LLMStack.Navigator>
30+
<LLMStack.Screen
31+
name="LLMScreen"
32+
component={LLMScreen}
33+
options={{
34+
headerTitle: () => (
35+
<Image
36+
source={require('../assets/ck.png')}
37+
style={{ width: 36, height: 36, marginTop: 10 }}
38+
resizeMode="contain"
39+
/>
40+
),
41+
}}
42+
/>
43+
</LLMStack.Navigator>
44+
)
45+
}
46+
47+
function MLCStackScreen() {
48+
return (
49+
<MLCStack.Navigator>
50+
<MLCStack.Screen
51+
name="MLCScreen"
52+
component={MLCScreen}
53+
options={{
54+
title: 'MLC Engine',
55+
}}
56+
/>
57+
</MLCStack.Navigator>
58+
)
59+
}
60+
61+
function PlaygroundStackScreen() {
62+
return (
63+
<PlaygroundStack.Navigator>
64+
<PlaygroundStack.Screen
65+
name="PlaygroundScreen"
66+
component={PlaygroundScreen}
67+
options={{
68+
title: 'Playground',
69+
}}
70+
/>
71+
</PlaygroundStack.Navigator>
72+
)
73+
}
74+
75+
function TranscribeStackScreen() {
76+
return (
77+
<TranscribeStack.Navigator>
78+
<TranscribeStack.Screen
79+
name="TranscribeScreen"
80+
component={TranscribeScreen}
81+
options={{
82+
title: 'Speech to Text',
83+
}}
84+
/>
85+
</TranscribeStack.Navigator>
86+
)
87+
}
88+
89+
function SpeechStackScreen() {
90+
return (
91+
<SpeechStack.Navigator>
92+
<SpeechStack.Screen
93+
name="SpeechScreen"
94+
component={SpeechScreen}
95+
options={{
96+
title: 'Text to Speech',
97+
}}
98+
/>
99+
</SpeechStack.Navigator>
100+
)
101+
}
102+
103+
function Tabs() {
104+
return (
105+
<Tab.Navigator sidebarAdaptable>
106+
<Tab.Screen
107+
name="LLM"
108+
component={LLMStackScreen}
109+
options={{
110+
tabBarIcon: () => ({ sfSymbol: 'brain.head.profile' }),
111+
}}
112+
/>
113+
<Tab.Screen
114+
name="MLC"
115+
component={MLCStackScreen}
116+
options={{
117+
tabBarIcon: () => ({ sfSymbol: 'cpu' }),
118+
}}
119+
/>
120+
<Tab.Screen
121+
name="Playground"
122+
component={PlaygroundStackScreen}
123+
options={{
124+
tabBarIcon: () => ({ sfSymbol: 'play.circle' }),
125+
}}
126+
/>
127+
<Tab.Screen
128+
name="Transcribe"
129+
component={TranscribeStackScreen}
130+
options={{
131+
tabBarIcon: () => ({ sfSymbol: 'text.quote' }),
132+
}}
133+
/>
134+
<Tab.Screen
135+
name="Speech"
136+
component={SpeechStackScreen}
137+
options={{
138+
tabBarIcon: () => ({ sfSymbol: 'speaker.wave.3' }),
139+
}}
140+
/>
141+
</Tab.Navigator>
142+
)
143+
}
144+
145+
export default function App() {
146+
return (
147+
<KeyboardProvider>
148+
<SafeAreaProvider>
149+
<NavigationContainer>
150+
<RootStack.Navigator>
151+
<RootStack.Screen
152+
name="Home"
153+
component={Tabs}
154+
options={{ headerShown: false }}
155+
/>
156+
</RootStack.Navigator>
157+
<StatusBar style="auto" />
158+
</NavigationContainer>
159+
</SafeAreaProvider>
160+
</KeyboardProvider>
161+
)
162+
}

‎apps/example-apple/src/App.tsx‎

Lines changed: 1 addition & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -1,161 +1,16 @@
11
import './global.css'
22

3-
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation'
4-
import { NavigationContainer } from '@react-navigation/native'
5-
import { createNativeStackNavigator } from '@react-navigation/native-stack'
6-
import { StatusBar } from 'expo-status-bar'
73
import React from 'react'
8-
import { Image } from 'react-native'
94
import { KeyboardProvider } from 'react-native-keyboard-controller'
105
import { SafeAreaProvider } from 'react-native-safe-area-context'
116

12-
import LLMScreen from './screens/LLMScreen'
137
import MLCScreen from './screens/MLCScreen'
14-
import PlaygroundScreen from './screens/PlaygroundScreen'
15-
import SpeechScreen from './screens/SpeechScreen'
16-
import TranscribeScreen from './screens/TranscribeScreen'
17-
18-
const Tab = createNativeBottomTabNavigator()
19-
20-
const RootStack = createNativeStackNavigator()
21-
const LLMStack = createNativeStackNavigator()
22-
const MLCStack = createNativeStackNavigator()
23-
const PlaygroundStack = createNativeStackNavigator()
24-
const TranscribeStack = createNativeStackNavigator()
25-
const SpeechStack = createNativeStackNavigator()
26-
27-
function LLMStackScreen() {
28-
return (
29-
<LLMStack.Navigator>
30-
<LLMStack.Screen
31-
name="LLMScreen"
32-
component={LLMScreen}
33-
options={{
34-
headerTitle: () => (
35-
<Image
36-
source={require('../assets/ck.png')}
37-
style={{ width: 36, height: 36, marginTop: 10 }}
38-
resizeMode="contain"
39-
/>
40-
),
41-
}}
42-
/>
43-
</LLMStack.Navigator>
44-
)
45-
}
46-
47-
function MLCStackScreen() {
48-
return (
49-
<MLCStack.Navigator>
50-
<MLCStack.Screen
51-
name="MLCScreen"
52-
component={MLCScreen}
53-
options={{
54-
title: 'MLC Engine',
55-
}}
56-
/>
57-
</MLCStack.Navigator>
58-
)
59-
}
60-
61-
function PlaygroundStackScreen() {
62-
return (
63-
<PlaygroundStack.Navigator>
64-
<PlaygroundStack.Screen
65-
name="PlaygroundScreen"
66-
component={PlaygroundScreen}
67-
options={{
68-
title: 'Playground',
69-
}}
70-
/>
71-
</PlaygroundStack.Navigator>
72-
)
73-
}
74-
75-
function TranscribeStackScreen() {
76-
return (
77-
<TranscribeStack.Navigator>
78-
<TranscribeStack.Screen
79-
name="TranscribeScreen"
80-
component={TranscribeScreen}
81-
options={{
82-
title: 'Speech to Text',
83-
}}
84-
/>
85-
</TranscribeStack.Navigator>
86-
)
87-
}
88-
89-
function SpeechStackScreen() {
90-
return (
91-
<SpeechStack.Navigator>
92-
<SpeechStack.Screen
93-
name="SpeechScreen"
94-
component={SpeechScreen}
95-
options={{
96-
title: 'Text to Speech',
97-
}}
98-
/>
99-
</SpeechStack.Navigator>
100-
)
101-
}
102-
103-
function Tabs() {
104-
return (
105-
<Tab.Navigator sidebarAdaptable>
106-
<Tab.Screen
107-
name="LLM"
108-
component={LLMStackScreen}
109-
options={{
110-
tabBarIcon: () => ({ sfSymbol: 'brain.head.profile' }),
111-
}}
112-
/>
113-
<Tab.Screen
114-
name="MLC"
115-
component={MLCStackScreen}
116-
options={{
117-
tabBarIcon: () => ({ sfSymbol: 'cpu' }),
118-
}}
119-
/>
120-
<Tab.Screen
121-
name="Playground"
122-
component={PlaygroundStackScreen}
123-
options={{
124-
tabBarIcon: () => ({ sfSymbol: 'play.circle' }),
125-
}}
126-
/>
127-
<Tab.Screen
128-
name="Transcribe"
129-
component={TranscribeStackScreen}
130-
options={{
131-
tabBarIcon: () => ({ sfSymbol: 'text.quote' }),
132-
}}
133-
/>
134-
<Tab.Screen
135-
name="Speech"
136-
component={SpeechStackScreen}
137-
options={{
138-
tabBarIcon: () => ({ sfSymbol: 'speaker.wave.3' }),
139-
}}
140-
/>
141-
</Tab.Navigator>
142-
)
143-
}
1448

1459
export default function App() {
14610
return (
14711
<KeyboardProvider>
14812
<SafeAreaProvider>
149-
<NavigationContainer>
150-
<RootStack.Navigator>
151-
<RootStack.Screen
152-
name="Home"
153-
component={Tabs}
154-
options={{ headerShown: false }}
155-
/>
156-
</RootStack.Navigator>
157-
<StatusBar style="auto" />
158-
</NavigationContainer>
13+
<MLCScreen />
15914
</SafeAreaProvider>
16015
</KeyboardProvider>
16116
)

0 commit comments

Comments
 (0)