Reagiere nativ auf OpenAI JSX

React-native-openai-jsx

⚛️ ? ? Nutzen Sie OpenAI, um funktionierende React Native- Komponenten zu generieren! Sehen Sie es in Aktion! ?

Es ist möglich react-native-openai-jsx zu verwenden, um echte, funktionierende React Native-Anwendungen zu erstellen, indem Sie einfach einige allgemeine Beschreibungen dessen bereitstellen, was Sie sehen möchten.

Zum Beispiel:

); }">

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

Es mag völlig verrückt erscheinen, aber das funktioniert tatsächlich! Durch die Verwendung der openai -Client-Bibliothek können wir ihr hochentwickeltes Modell für maschinelles Lernen nutzen, um uns funktionale React Native-Anwendungen vorzustellen. Zur Laufzeit können wir @babel/runtime verwenden, um das automatisch generierte Modul in laufzeitfreundliches JavaScript zu transpilieren und dieses auf einem react-native-wormhole ausführen zu lassen.

Erste Schritte

Zuerst müssen Sie react-native-openai-jsx und react-native-url-polyfill installieren:

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

Während dies heruntergeladen wird, müssen Sie einen Client-API-Schlüssel für OpenAI erstellen, falls Sie noch keinen haben. Eine Anleitung dazu finden Sie hier .

Hinweis: Sie benötigen react-native-url-polyfill um die Kompatibilität mit dem offiziellen openai SDK zu ermöglichen.

Als nächstes importieren Sie im Stammverzeichnis Ihrer Anwendung die Polyfills in den Einstiegspunkt Ihrer Anwendung, d. h.:

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

Das sollte alles sein!

Um zu sehen, wie das alles zusammenpasst, können Sie die example App ausprobieren:

" yarn (ios|android|web)">

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

? Konfiguration

Die Komponente stellt alle Schnittstellenfunktionen zur Verfügung, um mit der Erstellung und Anpassung Ihrer eigenen Sprachmodell- Prompts zu beginnen.

Name	Typ	Beschreibung	Standardwert
prompt	string?	Die Textzeichenfolge, die verwendet wird, um dem Modell für maschinelles Lernen vorzuschlagen, welche Anwendung erstellt werden soll.	Eine Bedingung, die als leeres React.Fragment ausgewertet werden soll.
completionSettings	CompletionSettings	Ein CreateCompletionRequest Objekt.	Erforderlich
style	StyleProp?		undefined
debug	boolean?	Wird verwendet, um Fehler während der Transpilierung darzustellen und eine Vorschau der von OpenGPT generierten Antworten anzuzeigen.	false
extraProps		Ein benutzerdefiniertes Objekt, das Sie zur Übergabe an OpenGPT verwenden können. Sie können beispielsweise eine Rückruffunktion übergeben und dem Modell für maschinelles Lernen mitteilen, dass sie als mögliche Requisite vorhanden ist.	{}
Wormhole	React.FC	Ein Wormhole . Dies kann verwendet werden, um Unterstützung für zusätzliche Bibliotheken wie react-native-svg einzuschließen.	DefaultWormhole

Bitte vergessen Sie nicht, dass Sie, um mit dieser Bibliothek überhaupt Erfolg zu haben, dem Modell für maschinelles Lernen im Rahmen Ihrer Eingabeaufforderung mitteilen müssen , dass Sie versuchen, eine React Native-Anwendung zu erstellen.

✌️ Lizenz

MIT