reaccionar openai jsx nativo

reaccionar-nativo-openai-jsx

⚛️ ? ? ¡Utilice OpenAI para generar componentes React Native funcionales! ¡Véalo en acción! ?

Es posible utilizar react-native-openai-jsx para crear aplicaciones React Native reales y funcionales simplemente proporcionando algunas descripciones de alto nivel sobre lo que le gustaría ver.

Por ejemplo:

); }">

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

Puede parecer una locura, ¡pero esto realmente funciona ! Al utilizar la biblioteca cliente openai , podemos utilizar su sofisticado modelo de aprendizaje automático para imaginar aplicaciones React Native funcionales para nosotros. En tiempo de ejecución, podemos usar @babel/runtime para transpilar el módulo generado automáticamente a JavaScript compatible con el tiempo de ejecución y hacer que se ejecute sobre un react-native-wormhole .

Empezando

Primero, necesitarás instalar react-native-openai-jsx y react-native-url-polyfill :

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

Mientras se descarga, deberá crear una clave API de cliente para OpenAI si aún no tiene una. Puede encontrar instrucciones sobre cómo hacer esto aquí .

Nota: Necesitará react-native-url-polyfill para habilitar la compatibilidad con el SDK oficial openai .

A continuación, en la raíz de su aplicación, importe los polyfills al punto de entrada de su aplicación, es decir:

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

¡Eso debería ser todo!

Para ver cómo funciona todo esto, puedes probar la aplicación example :

" yarn (ios|android|web)">

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

? Configuración

El componente expone todas las capacidades de la interfaz para comenzar a crear y personalizar sus propios mensajes de modelo de lenguaje.

Nombre	Tipo	Descripción	Valor predeterminado
prompt	string?	La cadena de texto utilizada para sugerir al modelo de aprendizaje automático qué aplicación crear.	Una condición diseñada para evaluarse en un React.Fragment vacío.
completionSettings	CompletionSettings	Un objeto CreateCompletionRequest .	Requerido
style	StyleProp?		undefined
debug	boolean?	Se utiliza para representar errores durante la transpilación y obtener una vista previa de las respuestas generadas por OpenGPT.	false
extraProps		Un objeto personalizado que puedes usar para pasar a OpenGPT. Por ejemplo, puede pasar una función de devolución de llamada e indicarle al modelo de aprendizaje automático que existe como posible accesorio.	{}
Wormhole	React.FC	Un Wormhole . Esto se puede utilizar para incluir soporte para bibliotecas adicionales como react-native-svg .	DefaultWormhole

No lo olvide, para tener éxito con esta biblioteca, debe informar al modelo de aprendizaje automático que está intentando crear una aplicación React Native como parte de su mensaje.

✌️ Licencia

MIT