التنزيل ng generative ai demo - تنزيل رمز المصدر ng generative ai demo

ng generative ai demo

شفرة المصدر الأخرى

1.0.0

تنزيل

؟ تولي الذكاء الاصطناعي الزاوي

Demo.webm

؟ لماذا هذا مهم؟

AI التوليدي يغير الطريقة التي نتفاعل بها مع التكنولوجيا. عندما تصبح AI chatbots أكثر شيوعًا ، يتوقع المستخدمون سلوكيات معينة من تطبيقاتنا ، مثل تحديثات النص في الوقت الفعلي. باستخدام واجهات برمجة التطبيقات LLM ، والإشارات ، وبعض Magic RXJS ، يمكننا إنشاء تجارب مستخدم حديثة يحركها AI.

؟ ابدء

ملحوظة

واجهة برمجة تطبيقات Gemini مجانية ، طالما أنك على استعداد لمشاركة جميع بيانات الاستخدام الخاصة بك مع Google.

قم بتشغيل git clone https://github.com/colin/ng-generative-ai-demo.git لاستنساخ هذا الريبو.
تفضل بزيارة استوديو Google AI لإنشاء مفتاح API.
قم بإنشاء ملف .env في جذر المشروع باستخدام مفتاح API الخاص بك:
```
 GOOGLE_AI_STUDIO_API_KEY=paste-api-key-here
```
تشغيل npm install لتثبيت التبعيات.
قم بتشغيل npm run server لبدء تشغيل الخادم الخلفي ( server.ts ) على المنفذ 3000.
في محطة أخرى ، قم بتشغيل npm start تشغيل خادم Dev Angular على المنفذ 4200.
انتقل إلى http://localhost:4200/

؟ الوجبات الرئيسية

إدارة الحالة مع الإشارات: تتبع حالة الدردشة (قائمة الرسائل وما إذا كانت LLM تولد رسالة جديدة) مع إشارات Angular.
تدفق النص في الوقت الفعلي مع RXJS Osciples: استخدم RXJs للرد على تحديثات الوقت الحقيقي من API LLM.
تكوين عميل HTTP: قم بتكوين عميل HTTP الزاوي للتعامل مع تدفقات النص الحقيقي:
1. قدم عميل HTTP "مع جلب" في app.config.ts :
```
 provideHttpClient ( withFetch ( ) ) ;
```
1. أخبر عميل HTTP بمراقبة أحداث النص والإبلاغ عن التقدم:
```
 this . http . post ( 'http://localhost:3000/message' , prompt , {
  responseType : 'text' ,
  observe : 'events' ,
  reportProgress : true ,
} ) ;
```

المؤشر الوامض: قم بإنشاء تأثير مؤشر وميض باستخدام CSS ::after العنصر الزائف و @keyframes :

 .message {
  & .generating {
    & ::after {
      content : ' ▋ ' ;
      animation : fade - cursor ease-in-out 500 ms infinite alternate ;
    }
  }
}

@keyframes fade-cursor {
  from {
    opacity : 25 % ;
  }
  to {
    opacity : 100 % ;
  }
}