如何2小时做一个chatGPT的手机聊天机器人？

const Stack = createNativeStackNavigator<RootStackParamList>()

const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name=“Login” component={LoginScreen} />
<Stack.Screen name=“Chat” component={ChatScreen} />
</Stack.Navigator>
<Toast />
</NavigationContainer>
)
}

export default App

type LoginScreenPropsType = NativeStackScreenProps<RootStackParamList, Login>

export const LoginScreen: React.FC<LoginScreenPropsType> = ({navigation}) => {
const [userInput, setUserInput] = useState<string>()

const continues = () => {
if (userInput.length > 0) {
navigation.navigate(Chat)
setUser({_id: `00${Date.now()}`, name: userInput})
setMessages([])
}
}

return (
<View style={styles.container}>
<View style={styles.circle} />
<View style={{marginHorizontal: 32, marginTop: 160}}>
<Text style={styles.title}>请输入用户名</Text>
<Text style={styles.subTitle}>UserName</Text>
<TextInput
style={styles.input}
value={userInput}
onChangeText={userName => {
setUserInput(userName)
}}
/>
</View>
<View style={{alignItems: flex-end, marginTop: 100, marginRight: 32}}>
<TouchableOpacity style={styles.continue} onPress={() => continues()}>
<Image style={{height: 30, width: 30}} source={require(../Images/arrowRight.png)} />
</TouchableOpacity>
</View>
</View>
)
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: #F4F5F7,
},
input: {
marginTop: 32,
height: 50,
borderWidth: 1,
borderColor: #22223B,
borderRadius: 30,
paddingHorizontal: 16,
color: #22223B,
fontWeight: 600,
},
circle: {
width: 510,
height: 510,
borderRadius: 255,
backgroundColor: #FFFFFF,
position: absolute,
left: –120,
top: –60,
},
title: {
marginTop: 32,
fontSize: 30,
fontWeight: 800,
color: #4A4E69,
},
subTitle: {
fontSize: 15,
fontWeight: 400,
color: #4A4E69,
},
continue: {
width: 70,
height: 70,
borderRadius: 70 / 2,
backgroundColor: #8D99AE,
alignItems: center,
justifyContent: center,
},
})

type ChatScreenPropsType = NativeStackScreenProps<RootStackParamList, Chat>

export const ChatScreen: React.FC<ChatScreenPropsType> = () => {
const user = useUser()
const messages = useMessages()

return (
<SafeAreaView style={{flex: 1}}>
<GiftedChat
messages={messages}
user={user}
onSend={(message: IMessage[]) => {
sendChatFunc(message).catch(err => showToast(err))
}}
renderAvatar={() => null}
renderBubble={props => {
return (
<Bubble
{…props}
wrapperStyle={{
left: {
backgroundColor: #D8E2DC,
},
}}
/>
);}}
/>
</SafeAreaView>
)
}

export type replyMessage={
response:string
}

export function sendMessage(body: sendMessageBody) {
return new Promise((resolve, reject) => {
// 请将url换成你自己的API地址 fetch(http://192.168.1.4:5000/chat, {
method: POST,
headers: {
Content-Type: application/json,
},
body: JSON.stringify(body),
})
.then(response => {
if (response.ok) {
const res:Promise<replyMessage> = response.json()
resolve(res)
} else {
return reject(response.status)
}
})
.catch(error => reject(error))
})
}

const commonStore = create(() => ({
user: {_id: 0, name: defaultUser} as User,
messages: [] as IMessage[],
}))

export const useUser = () => commonStore(s => s.user);

export const setUser = (payload: User) => commonStore.setState({ user: payload });

export const getUserSnap = () => commonStore.getState().user;

export const useMessages = () => commonStore(s => s.messages)

export const setMessages = (payload: IMessage[]) => commonStore.setState({messages: payload})

export const getMessagesSnap = () => commonStore.getState().messages

function parseBOTMessage(response: replyMessage): IMessage {
return {
_id: `${Math.floor(Math.random() * 1000)}${Date.now()}`,
text: response.response,
createdAt: Date.now(),
user: {
_id: 0,
name: ChatGPT,
},
}
}

export const sendChatFunc = async (chatMessage: IMessage[]) => {
setMessages(GiftedChat.append(getMessagesSnap(), chatMessage))
const userChatMessage = chatMessage[chatMessage.length – 1]

if (!userChatMessage) {
return
}

const userSendMessage = new sendMessageBody(userChatMessage.text, getUserSnap().name as string)

try {
const reply = (await sendMessage(userSendMessage)) as replyMessage
const messages = GiftedChat.append(getMessagesSnap(), [parseBOTMessage(reply)])
setMessages(messages)
} catch (err) {
showToast(String(err))
}
}

export const showToast = (text:string) => {
Toast.show({
type: error,
text1: 出错了,
text2: text,
});
}