1- import { useRef , useState } from 'react' ;
1+ import { useEffect , useRef , useState } from 'react' ;
22import {
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' ;
1413import SWMIcon from '../assets/icons/swm_icon.svg' ;
1514import Spinner from 'react-native-loading-spinner-overlay' ;
1615import {
@@ -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 } > Qwen 3 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