react native openai jsx

رد الفعل الأصلي-openai-jsx

⚛️ ؟ ؟ استخدم 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 لتمكين التوافق مع openai SDK الرسمي.

بعد ذلك، في جذر التطبيق الخاص بك، قم باستيراد polyfills إلى نقطة دخول التطبيق الخاص بك، على سبيل المثال:

 + 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="<your-api-key>" yarn (ios|android|web)

؟ إعدادات

يعرض المكون <Prompt /> كافة إمكانيات الواجهة لبدء إنشاء وتخصيص مطالبات نموذج اللغة الخاصة بك.

اسم	يكتب	وصف	القيمة الافتراضية
prompt	string?	السلسلة النصية المستخدمة لاقتراح نموذج التعلم الآلي على التطبيق الذي سيتم إنشاؤه.	شرط مصمم للتقييم في React.Fragment فارغ.
completionSettings	CompletionSettings	كائن CreateCompletionRequest .	مطلوب
style	StyleProp<ViewStyle>?		undefined
debug	boolean?	يستخدم لعرض الأخطاء أثناء النقل ومعاينة الاستجابات الناتجة عن OpenGPT.	false
extraProps	<T>	كائن مخصص يمكنك استخدامه للمرور إلى OpenGPT. على سبيل المثال، يمكنك تمرير وظيفة رد الاتصال وإرشاد نموذج التعلم الآلي إلى وجوده كدعم محتمل.	{}
Wormhole	React.FC	Wormhole . يمكن استخدام هذا لتضمين الدعم لمكتبات إضافية مثل react-native-svg .	DefaultWormhole

من فضلك لا تنسى، لكي تحقق أي نجاح مع هذه المكتبة على الإطلاق، يجب عليك إبلاغ نموذج التعلم الآلي بأنك تحاول إنشاء تطبيق React Native كجزء من مطالبتك.

✌️ الترخيص

معهد ماساتشوستس للتكنولوجيا