⚛️ ? ? Используйте OpenAI для создания функционирующих компонентов React Native ! Посмотрите это в действии! ?
Можно использовать react-native-openai-jsx
для создания реальных, работающих приложений React Native, просто предоставив некоторые высокоуровневые описания того, что вы хотели бы видеть.
Например:
); }">import { Alert } from 'react-native' ; import { Prompt } from 'react-native-openai-jsx' ; export default function App ( ) : JSX . Element { return ( < Prompt extraProps = { React . useMemo ( ( ) => ( { onPress : ( message : string ) => Alert . alert ( message ) , } ) , [ ] ) } prompt = { [ 'Provide a complete example of a React Native View component which contains a big Button in the center with the text "Press Me".' , 'When the Button is pressed, it must call a function prop passed into the component called onPress with the parameter "Hello from OpenAI!".' , ] . join ( ' ' ) } / > ) ; }
Это может показаться полным безумием, но это действительно работает ! Используя клиентскую библиотеку openai
, мы можем использовать их сложную модель машинного обучения , чтобы представить себе функциональные приложения React Native. Во время выполнения мы можем использовать @babel/runtime
для транспиляции автоматически сгенерированного модуля в удобный для выполнения JavaScript и его выполнения поверх react-native-wormhole
.
Во-первых, вам нужно установить react-native-openai-jsx
и react-native-url-polyfill
:
yarn add react-native-openai-jsx react-native-url-polyfill
Пока идет загрузка, вам нужно будет создать ключ клиентского API для OpenAI, если у вас его еще нет. Инструкции о том, как это сделать, вы можете найти здесь .
Примечание. Вам понадобится
react-native-url-polyfill
, чтобы обеспечить совместимость с официальным SDKopenai
.
Затем в корне вашего приложения импортируйте полифилы в точку входа вашего приложения, то есть:
+ import 'react-native-url-polyfill/auto';
import { AppRegistry } from 'react-native';
import App from './src/App';
import { name as appName } from './app.json';
AppRegistry.registerComponent(appName, () => App);
Это должно быть все!
Чтобы увидеть все это воедино, вы можете опробовать example
приложения:
cd example/
OPENAI_API_KEY="" yarn (ios|android|web)
Компонент
предоставляет все возможности интерфейса, позволяющие создавать и настраивать подсказки вашей собственной языковой модели.
Имя | Тип | Описание | Значение по умолчанию |
---|---|---|---|
prompt | string? | Текстовая строка, используемая для предложения модели машинного обучения, какое приложение создать. | Условие, предназначенное для вычисления пустого React.Fragment . |
completionSettings | CompletionSettings | Объект CreateCompletionRequest . | Необходимый |
style | StyleProp | undefined | |
debug | boolean? | Используется для отображения ошибок во время транспиляции и предварительного просмотра ответов, сгенерированных OpenGPT. | false |
extraProps |
| Пользовательский объект, который можно использовать для передачи в OpenGPT. Например, вы можете передать функцию обратного вызова и сообщить модели машинного обучения, что она существует в качестве возможного реквизита. | {} |
Wormhole | React.FC | Wormhole . Это можно использовать для включения поддержки дополнительных библиотек, таких как react-native-svg . | DefaultWormhole |
Пожалуйста, не забывайте: чтобы добиться успеха в работе с этой библиотекой, вы должны сообщить модели машинного обучения, что вы пытаетесь создать приложение React Native, в рамках вашего приглашения.
Массачусетский технологический институт