réagir natif openai jsx

réagir-native-openai-jsx

⚛️ ? ? Utilisez OpenAI pour générer des composants React Native fonctionnels ! Voyez-le en action ! ?

Il est possible d'utiliser react-native-openai-jsx pour créer de véritables applications React Native fonctionnelles simplement en fournissant des descriptions de haut niveau sur ce que vous aimeriez voir.

Par exemple:

); }">

 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 ( ' ' ) }
    / >
  ) ;
}

Cela peut paraître totalement fou, mais cela fonctionne réellement ! En utilisant la bibliothèque client openai , nous pouvons utiliser leur modèle d'apprentissage automatique sophistiqué pour imaginer des applications React Native fonctionnelles pour nous. Au moment de l'exécution, nous pouvons utiliser @babel/runtime pour transpiler le module généré automatiquement en JavaScript convivial pour l'exécution et le faire exécuter au-dessus d'un react-native-wormhole .

Commencer

Tout d'abord, vous devrez installer react-native-openai-jsx et react-native-url-polyfill :

yarn add react-native-openai-jsx react-native-url-polyfill

Pendant le téléchargement, vous devrez créer une clé API client pour OpenAI si vous n'en avez pas déjà une. Vous pouvez trouver des instructions sur la façon de procéder ici .

Remarque : vous aurez besoin react-native-url-polyfill pour activer la compatibilité avec le SDK openai officiel.

Ensuite, à la racine de votre application importez les polyfills au point d'entrée de votre application, c'est à dire :

 + 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);

Cela devrait être tout !

Pour voir tout cela ensemble, vous êtes libre d’essayer l’ example d’application :

" yarn (ios|android|web)">

 cd example/
OPENAI_API_KEY="" yarn (ios|android|web)

? Configuration

Le composant expose toutes les fonctionnalités de l'interface pour commencer à créer et à personnaliser vos propres invites de modèle de langage.

Nom	Taper	Description	Valeur par défaut
prompt	string?	Chaîne de texte utilisée pour suggérer au modèle d'apprentissage automatique quelle application créer.	Une condition conçue pour être évaluée dans un React.Fragment vide.
completionSettings	CompletionSettings	Un objet CreateCompletionRequest .	Requis
style	StyleProp?		undefined
debug	boolean?	Utilisé pour restituer les erreurs lors de la transpilation et prévisualiser les réponses générées par OpenGPT.	false
extraProps		Un objet personnalisé que vous pouvez utiliser pour passer dans OpenGPT. Par exemple, vous pouvez transmettre une fonction de rappel et indiquer au modèle d'apprentissage automatique qu'elle existe en tant qu'accessoire possible.	{}
Wormhole	React.FC	Un Wormhole . Cela peut être utilisé pour inclure la prise en charge de bibliothèques supplémentaires telles que react-native-svg .	DefaultWormhole

N'oubliez pas que pour réussir avec cette bibliothèque, vous devez informer le modèle d'apprentissage automatique que vous essayez de créer une application React Native dans le cadre de votre invite.

✌️ Licence

MIT