coffee
1.0.0
- COF رام و رونت ه اختصار الثاني ه نجينير
قم ببناء وتكرار على واجهة المستخدم 10x بشكل أسرع مع الذكاء الاصطناعي - من IDE الخاص بك!
القهوة caffeinshed سير عمل تطوير الواجهة الأمامية مع الذكاء الاصطناعى. يهدف هذا المشروع إلى أن يكون أكثر من مجرد عرض تجريبي لطيف ، بل يكون أداة مريحة يمكنها الكتابة والتفاعل مع كود جودة الإنتاج.
لا تبعيات ، لا إعداد.
فقط React WebApp بشكل طبيعي ، ثم افتح قذيفة أخرى في نفس الدليل وتشغيله:
docker run --pull=always -it -e OPENAI_API_KEY= ${OPENAI_API_KEY} -v $( pwd ) :/mount coframe/coffee:latestيمكنك أيضًا بناء الصورة بنفسك من دليل /رد الفعل:
./dev.sh build
OPENAI_API_KEY=your_api_key ./dev.sh ../path/to/any/frontend/repo/on/machineيمكنك مراقبة المحطة التي تعمل على تشغيل حاوية Docker لمعرفة ما هي القهوة. إنه لأمر ممتع أن نرى الرمز يتم إنشاؤه!
يستخدم القهوة Docker للتأكد من أن أي رمز وكيل يتم تشغيله معزول بالكامل. يتم تنفيذ القهوة حاليًا في بيثون (لكنك لست بحاجة إلى لمس بيثون لاستخدام القهوة) ، ووكيل الجيل الرمز بسيط نسبيًا.
عند تشغيل القهوة ، ستستمع إلى تغييرات على ملفات js/jsx/ts/tsx في دليل المصدر الخاص بك ، وإذا اكتشف مكون <Coffee> JSX ، فسوف يبدأ سحره!
< Coffee parameter = { parameter } >
Here is where you put your prompt that Coffee will use to generate the first
version of your desired component. This is the same type of prompt that you'd
use with any LLM like ChatGPT, so feel free to get creative and apply your
favorite prompt engineering tricks. Finally, you can also pass in any
parameters you want from your parent component by simply adding them as
demonstrated above.
< / Coffee > في كل مرة تقوم فيها بحفظ ملف المصدر الخاص بك ، ستبحث القهوة لمعرفة ما إذا كان هناك أي مكونات <Coffee> التي تحتاج إلى تخمير (إذا كانت جديدة أو إذا تم تحديث الدعائم أو المطالبة). لكل مكون <Coffee> الذي يكتشفه الوكيل ، سيقوم Coffee بتمرير رمز مكون الأصل ، وأي رمز مكون طفل موجود ، ومطالبك ، وأي تكوين مخصص إلى API Openai Chat API من أجل إنشاء إصدار جديد من المكون المستهدف.
قد يعرض تطبيقك خطأ فورًا بعد حفظه في المرة الأولى حيث لم يتم كتابة مكون القهوة إليه بواسطة وكيل القهوة حتى الآن. هذا أمر طبيعي وسيختفي بعد أن كان لدى وكيل القهوة الوقت لشراء المكون.
التكرار على مكون بعد تخميره أمر سهل بنفس القدر:
< Coffee parameter = { parameter } >
To edit and update the brewed component, all you need to do is replace the
prompt with your desired changes. For instance, "make the button background
darker".
< / Coffee >تكون عملية التخمير بطيئة بعض الشيء ، لكننا نعمل على عدة طرق لجعلها أسرع بكثير.
أخيرًا ، بمجرد أن تكون راضيًا عن مكونك المخمر ، يمكنك إضافة POBR pour="ComponentName.tsx" إلى مكون <Coffee> الخاص بك وحفظ الملف ، والذي سيحل تلقائيًا محل المكون <Coffee> بالمكون الذي تم إنشاؤه.
export function Example ( ) {
return (
< Coffee
title = "Click Me"
onClick = { ( ) => console . log ( "clicked" ) }
pour = "MyButton.tsx"
>
Whatever you prompted Coffee to generate
< / Coffee >
) ;
} في هذا المثال ، أضفنا دعامة pour خاصة. عند حفظ هذا الملف ، ستحل القهوة محل هذا الرمز بما يلي:
import MyButton from "./MyButton" ;
export function Example ( ) {
return < MyButton title = "Click Me" onClick = { ( ) => console . log ( "clicked" ) } / > ;
}الآن لديك مكون رد فعل يعمل بكامل طاقته وقابل لإعادة الاستخدام جاهز للاستخدام في الإنتاج.
ومع ذلك ، فإن أروع جزء من القهوة هو أنه يمكنك تحرير مكونات React الحالية بنفس السهولة مثل إنشاء مكونات جديدة من نقطة الصفر.
دعنا نقول أنك تريد تحرير مكون MyButton (أو أي آخر). كل ما عليك فعله هو إضافة coffee="description of change to make" الدعامة:
export function Example ( ) {
return (
< MyButton
title = "Click Me"
onClick = { ( ) => console . log ( "clicked" ) }
coffee = "make the button color blue"
/ >
) ;
}بمجرد حفظ هذا الملف ، ستكتشف Coffee هذا المكون "المرق" وتحديثه لك بعد أن حان الوقت للتفكير وتوليده.
يمكنك الاستمرار في التكرار مثل هذا إلى الأبد - لا يمكنك أبدًا نفاد القهوة! ؟ بمجرد أن تكون راضيًا ، ما عليك سوى إزالة دعامة coffee وأنت على ما يرام.
prettier على رمز تم إنشاؤه coffee.config.json config انضم إلينا على Discord للحصول على الدعم ، لإظهار ما تخمره ، ومشاعر جيدة بشكل عام.
تابعنا على Twitter لإصدارات الميزات الجديدة وتحديثات المنتجات والأخبار الأخرى المثيرة!
إذا كنت ترغب في أن تكون مساهمًا ، فما عليك سوى إرسال طلب سحب!
⚡ نحن أيضًا نتعاون للمهندسين العامين ومهندسي الذكاء الاصطناعى الذين هم متحمسون لمستقبل UX/AI. القهوة هي مجرد واحدة من العديد من الأشياء المثيرة التي لدينا تخمير. إذا كنت ترغب في بناء هذا المستقبل معنا ، فيرجى إطلاق النار علينا DM على Twitter!
cd react
pip3 install -r dev_requirements.txt
pytestApache 2.0 © coframe
