Skip to content

Commit ddec73b

Browse files
author
Mateusz Kopciński
committed
missing import
1 parent 846ac06 commit ddec73b

File tree

1 file changed

+78
-81
lines changed

1 file changed

+78
-81
lines changed

‎examples/llm/screens/LLMScreen.tsx

+78-81
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useRef, useState } from 'react';
1+
import { useEffect, useRef, useState } from 'react';
22
import {
33
Keyboard,
44
KeyboardAvoidingView,
@@ -10,7 +10,6 @@ import {
1010
View,
1111
TextInput,
1212
} from 'react-native';
13-
import { SafeAreaView } from 'react-native-safe-area-context';
1413
import SWMIcon from '../assets/icons/swm_icon.svg';
1514
import Spinner from 'react-native-loading-spinner-overlay';
1615
import {
@@ -125,88 +124,86 @@ export default function LLMScreen({
125124
textContent={`Loading the model ${(llm.downloadProgress * 100).toFixed(0)} %\nLoading the speech model ${(speechToText.downloadProgress * 100).toFixed(0)} %`}
126125
/>
127126
) : (
128-
<SafeAreaView style={styles.container}>
129-
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
130-
<KeyboardAvoidingView
131-
style={styles.keyboardAvoidingView}
132-
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
133-
keyboardVerticalOffset={Platform.OS === 'android' ? 30 : 0}
134-
>
135-
<View style={styles.topContainer}>
136-
<SWMIcon width={45} height={45} />
137-
<Text style={styles.textModelName}>llm 3.2 1B QLoRA x Whisper</Text>
127+
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
128+
<KeyboardAvoidingView
129+
style={styles.keyboardAvoidingView}
130+
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
131+
keyboardVerticalOffset={Platform.OS === 'android' ? 30 : 0}
132+
>
133+
<View style={styles.topContainer}>
134+
<SWMIcon width={45} height={45} />
135+
<Text style={styles.textModelName}>llm 3.2 1B QLoRA x Whisper</Text>
136+
</View>
137+
{llm.messageHistory.length || speechToText.sequence ? (
138+
<View style={styles.chatContainer}>
139+
<Messages
140+
chatHistory={
141+
speechToText.isGenerating
142+
? [
143+
...llm.messageHistory,
144+
{ role: 'user', content: speechToText.sequence },
145+
]
146+
: llm.messageHistory
147+
}
148+
llmResponse={llm.response}
149+
isGenerating={llm.isGenerating}
150+
deleteMessage={llm.deleteMessage}
151+
/>
152+
</View>
153+
) : (
154+
<View style={styles.helloMessageContainer}>
155+
<Text style={styles.helloText}>Hello! 👋</Text>
156+
<Text style={styles.bottomHelloText}>
157+
What can I help you with?
158+
</Text>
138159
</View>
139-
{llm.messageHistory.length || speechToText.sequence ? (
140-
<View style={styles.chatContainer}>
141-
<Messages
142-
chatHistory={
143-
speechToText.isGenerating
144-
? [
145-
...llm.messageHistory,
146-
{ role: 'user', content: speechToText.sequence },
147-
]
148-
: llm.messageHistory
149-
}
150-
llmResponse={llm.response}
151-
isGenerating={llm.isGenerating}
152-
deleteMessage={llm.deleteMessage}
153-
/>
154-
</View>
160+
)}
161+
<View style={styles.bottomContainer}>
162+
<TextInput
163+
onFocus={() => setIsTextInputFocused(true)}
164+
onBlur={() => setIsTextInputFocused(false)}
165+
editable={!isRecording && !llm.isGenerating}
166+
style={{
167+
...styles.textInput,
168+
borderColor: isTextInputFocused
169+
? ColorPalette.blueDark
170+
: ColorPalette.blueLight,
171+
display: isRecording ? 'none' : 'flex',
172+
}}
173+
placeholder="Your message"
174+
placeholderTextColor={'#C1C6E5'}
175+
multiline={true}
176+
ref={textInputRef}
177+
onChangeText={(text: string) => setUserInput(text)}
178+
/>
179+
{llm.isGenerating ? (
180+
<TouchableOpacity onPress={llm.interrupt}>
181+
<PauseIcon height={40} width={40} padding={4} margin={8} />
182+
</TouchableOpacity>
183+
) : !userInput ? (
184+
<TouchableOpacity
185+
style={
186+
!isRecording ? styles.recordTouchable : styles.recordingInfo
187+
}
188+
onPress={handleRecordPress}
189+
>
190+
{isRecording ? (
191+
<StopIcon height={40} width={40} padding={4} margin={8} />
192+
) : (
193+
<MicIcon height={40} width={40} padding={4} margin={8} />
194+
)}
195+
</TouchableOpacity>
155196
) : (
156-
<View style={styles.helloMessageContainer}>
157-
<Text style={styles.helloText}>Hello! 👋</Text>
158-
<Text style={styles.bottomHelloText}>
159-
What can I help you with?
160-
</Text>
161-
</View>
197+
<TouchableOpacity
198+
style={styles.recordTouchable}
199+
onPress={async () => !llm.isGenerating && (await sendMessage())}
200+
>
201+
<SendIcon height={40} width={40} padding={4} margin={8} />
202+
</TouchableOpacity>
162203
)}
163-
<View style={styles.bottomContainer}>
164-
<TextInput
165-
onFocus={() => setIsTextInputFocused(true)}
166-
onBlur={() => setIsTextInputFocused(false)}
167-
editable={!isRecording && !llm.isGenerating}
168-
style={{
169-
...styles.textInput,
170-
borderColor: isTextInputFocused
171-
? ColorPalette.blueDark
172-
: ColorPalette.blueLight,
173-
display: isRecording ? 'none' : 'flex',
174-
}}
175-
placeholder="Your message"
176-
placeholderTextColor={'#C1C6E5'}
177-
multiline={true}
178-
ref={textInputRef}
179-
onChangeText={(text: string) => setUserInput(text)}
180-
/>
181-
{llm.isGenerating ? (
182-
<TouchableOpacity onPress={llm.interrupt}>
183-
<PauseIcon height={40} width={40} padding={4} margin={8} />
184-
</TouchableOpacity>
185-
) : !userInput ? (
186-
<TouchableOpacity
187-
style={
188-
!isRecording ? styles.recordTouchable : styles.recordingInfo
189-
}
190-
onPress={handleRecordPress}
191-
>
192-
{isRecording ? (
193-
<StopIcon height={40} width={40} padding={4} margin={8} />
194-
) : (
195-
<MicIcon height={40} width={40} padding={4} margin={8} />
196-
)}
197-
</TouchableOpacity>
198-
) : (
199-
<TouchableOpacity
200-
style={styles.recordTouchable}
201-
onPress={async () => !llm.isGenerating && (await sendMessage())}
202-
>
203-
<SendIcon height={40} width={40} padding={4} margin={8} />
204-
</TouchableOpacity>
205-
)}
206-
</View>
207-
</KeyboardAvoidingView>
208-
</TouchableWithoutFeedback>
209-
</SafeAreaView>
204+
</View>
205+
</KeyboardAvoidingView>
206+
</TouchableWithoutFeedback>
210207
);
211208
}
212209

0 commit comments

Comments
 (0)