Skip to content

Commit 07fd627

Browse files
pweglikpweglik
committed
Fixes
1 parent 5bc11a0 commit 07fd627

6 files changed

Lines changed: 256 additions & 179 deletions

File tree

‎apps/llm/app/_layout.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
DrawerContentScrollView,
99
DrawerItemList,
1010
} from '@react-navigation/drawer';
11-
import { GeneratingContext } from './context';
11+
import { GeneratingContext } from '../context';
1212

1313
interface CustomDrawerProps extends DrawerContentComponentProps {
1414
isGenerating: boolean;
@@ -27,7 +27,7 @@ function CustomDrawerContent(props: CustomDrawerProps) {
2727
);
2828
}
2929

30-
function DrawerWithScreens() {
30+
export default function _layout() {
3131
const [isGenerating, setIsGenerating] = useState(false);
3232

3333
console.log('isGlobalGenerating', isGenerating);
@@ -52,7 +52,7 @@ function DrawerWithScreens() {
5252
}}
5353
>
5454
<Drawer.Screen
55-
name="index"
55+
name="llm/index"
5656
options={{
5757
drawerLabel: 'LLM',
5858
title: 'LLM',
@@ -75,11 +75,13 @@ function DrawerWithScreens() {
7575
headerTitleStyle: { color: ColorPalette.primary },
7676
}}
7777
/>
78+
<Drawer.Screen
79+
name="index"
80+
options={{
81+
drawerLabel: () => null,
82+
}}
83+
/>
7884
</Drawer>
7985
</GeneratingContext>
8086
);
8187
}
82-
83-
export default function _layout() {
84-
return <DrawerWithScreens />;
85-
}

‎apps/llm/app/index.tsx‎

Lines changed: 60 additions & 170 deletions
Original file line numberDiff line numberDiff line change
@@ -1,185 +1,75 @@
1-
import { useContext, useEffect, useRef, useState } from 'react';
2-
import {
3-
Keyboard,
4-
KeyboardAvoidingView,
5-
StyleSheet,
6-
Text,
7-
TextInput,
8-
Platform,
9-
TouchableOpacity,
10-
TouchableWithoutFeedback,
11-
View,
12-
} from 'react-native';
13-
import SendIcon from '../assets/icons/send_icon.svg';
14-
import Spinner from 'react-native-loading-spinner-overlay';
15-
import {
16-
LLAMA3_2_1B_QLORA,
17-
LLAMA3_2_TOKENIZER,
18-
LLAMA3_2_TOKENIZER_CONFIG,
19-
useLLM,
20-
} from 'react-native-executorch';
21-
import PauseIcon from '../assets/icons/pause_icon.svg';
1+
import { useRouter } from 'expo-router';
2+
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
223
import ColorPalette from '../colors';
23-
import Messages from '../components/Messages';
24-
import { useIsFocused } from '@react-navigation/native';
25-
import { GeneratingContext } from './context';
4+
import ExecutorchLogo from '../assets/icons/executorch.svg';
265

27-
export default function LLMScreenWrapper() {
28-
const isFocused = useIsFocused();
6+
export default function App() {
7+
const router = useRouter();
298

30-
return isFocused ? <LLMScreen /> : null;
31-
}
32-
33-
function LLMScreen() {
34-
const [isTextInputFocused, setIsTextInputFocused] = useState(false);
35-
const [userInput, setUserInput] = useState('');
36-
const textInputRef = useRef<TextInput>(null);
37-
const { setGlobalGenerating } = useContext(GeneratingContext);
38-
39-
const llm = useLLM({
40-
modelSource: LLAMA3_2_1B_QLORA,
41-
tokenizerSource: LLAMA3_2_TOKENIZER,
42-
tokenizerConfigSource: LLAMA3_2_TOKENIZER_CONFIG,
43-
});
44-
45-
useEffect(() => {
46-
if (llm.error) {
47-
console.log('LLM error:', llm.error);
48-
}
49-
}, [llm.error]);
50-
51-
useEffect(() => {
52-
setGlobalGenerating(llm.isGenerating);
53-
}, [llm.isGenerating, setGlobalGenerating]);
54-
55-
const sendMessage = async () => {
56-
setUserInput('');
57-
textInputRef.current?.clear();
58-
try {
59-
await llm.sendMessage(userInput);
60-
} catch (e) {
61-
console.error(e);
62-
}
63-
};
64-
65-
return !llm.isReady ? (
66-
<Spinner
67-
visible={!llm.isReady}
68-
textContent={`Loading the model ${(llm.downloadProgress * 100).toFixed(0)} %`}
69-
/>
70-
) : (
71-
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
72-
<KeyboardAvoidingView
73-
style={{
74-
...styles.container,
75-
paddingBottom: Platform.OS === 'android' ? 20 : 0,
76-
}}
77-
collapsable={false}
78-
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
79-
keyboardVerticalOffset={Platform.OS === 'ios' ? 120 : 40}
80-
>
81-
<View style={styles.container}>
82-
{llm.messageHistory.length ? (
83-
<View style={styles.chatContainer}>
84-
<Messages
85-
chatHistory={llm.messageHistory}
86-
llmResponse={llm.response}
87-
isGenerating={llm.isGenerating}
88-
deleteMessage={llm.deleteMessage}
89-
/>
90-
</View>
91-
) : (
92-
<View style={styles.helloMessageContainer}>
93-
<Text style={styles.helloText}>Hello! 👋</Text>
94-
<Text style={styles.bottomHelloText}>
95-
What can I help you with?
96-
</Text>
97-
</View>
98-
)}
99-
100-
<View style={styles.bottomContainer}>
101-
<TextInput
102-
autoCorrect={false}
103-
onFocus={() => setIsTextInputFocused(true)}
104-
onBlur={() => setIsTextInputFocused(false)}
105-
style={{
106-
...styles.textInput,
107-
borderColor: isTextInputFocused
108-
? ColorPalette.blueDark
109-
: ColorPalette.blueLight,
110-
}}
111-
placeholder="Your message"
112-
placeholderTextColor={'#C1C6E5'}
113-
multiline={true}
114-
ref={textInputRef}
115-
onChangeText={(text: string) => setUserInput(text)}
116-
/>
117-
{userInput && (
118-
<TouchableOpacity
119-
style={styles.sendChatTouchable}
120-
onPress={async () => !llm.isGenerating && (await sendMessage())}
121-
>
122-
<SendIcon height={24} width={24} padding={4} margin={8} />
123-
</TouchableOpacity>
124-
)}
125-
{llm.isGenerating && (
126-
<TouchableOpacity
127-
style={styles.sendChatTouchable}
128-
onPress={llm.interrupt}
129-
>
130-
<PauseIcon height={24} width={24} padding={4} margin={8} />
131-
</TouchableOpacity>
132-
)}
133-
</View>
134-
</View>
135-
</KeyboardAvoidingView>
136-
</TouchableWithoutFeedback>
9+
return (
10+
<View style={styles.container}>
11+
<ExecutorchLogo width={64} height={64} />
12+
<Text style={styles.headerText}>Select a demo model</Text>
13+
<View style={styles.buttonContainer}>
14+
<TouchableOpacity
15+
style={styles.button}
16+
onPress={() => router.navigate('app/llm/')}
17+
>
18+
<Text style={styles.buttonText}>LLM</Text>
19+
</TouchableOpacity>
20+
<TouchableOpacity
21+
style={styles.button}
22+
onPress={() => router.navigate('app/llm_tool_calling/')}
23+
>
24+
<Text style={styles.buttonText}>LLM Tool Calling</Text>
25+
</TouchableOpacity>
26+
<TouchableOpacity
27+
style={styles.button}
28+
onPress={() => router.navigate('app/voice_chat/')}
29+
>
30+
<Text style={styles.buttonText}>Voice Chat</Text>
31+
</TouchableOpacity>
32+
</View>
33+
</View>
13734
);
13835
}
13936

37+
export const fontSizes = {
38+
xxl: 34,
39+
xl: 22,
40+
lg: 18,
41+
md: 16,
42+
sm: 14,
43+
xs: 12,
44+
xxs: 10,
45+
};
46+
14047
const styles = StyleSheet.create({
141-
keyboardAvoidingView: { flex: 1 },
142-
container: { flex: 1 },
143-
chatContainer: { flex: 10, width: '100%' },
144-
helloMessageContainer: {
145-
flex: 10,
146-
width: '100%',
147-
alignItems: 'center',
48+
container: {
49+
flex: 1,
14850
justifyContent: 'center',
51+
alignItems: 'center',
52+
backgroundColor: '#fff',
14953
},
150-
helloText: {
151-
fontFamily: 'medium',
152-
fontSize: 30,
153-
color: ColorPalette.primary,
154-
},
155-
bottomHelloText: {
156-
fontFamily: 'regular',
157-
fontSize: 20,
158-
lineHeight: 28,
159-
color: ColorPalette.primary,
54+
headerText: {
55+
fontSize: fontSizes.lg,
56+
color: ColorPalette.strongPrimary,
57+
margin: 20,
16058
},
161-
bottomContainer: {
162-
height: 100,
163-
width: '100%',
164-
flexDirection: 'row',
165-
justifyContent: 'space-between',
166-
alignItems: 'center',
167-
paddingHorizontal: 16,
59+
buttonContainer: {
60+
width: '80%',
61+
justifyContent: 'space-evenly',
62+
marginBottom: 20,
16863
},
169-
textInput: {
170-
flex: 1,
171-
borderWidth: 1,
64+
button: {
65+
backgroundColor: ColorPalette.strongPrimary,
17266
borderRadius: 8,
173-
lineHeight: 19.6,
174-
fontFamily: 'regular',
175-
fontSize: 14,
176-
color: ColorPalette.primary,
177-
padding: 16,
67+
padding: 10,
68+
alignItems: 'center',
69+
marginBottom: 10,
17870
},
179-
sendChatTouchable: {
180-
height: '100%',
181-
width: 48,
182-
justifyContent: 'center',
183-
alignItems: 'flex-end',
71+
buttonText: {
72+
color: 'white',
73+
fontSize: fontSizes.md,
18474
},
18575
});

0 commit comments

Comments
 (0)