ng generative ai demo

? 각도 생성 AI 데모

Demo.webm

? 이것이 왜 중요합니까?

생성 AI는 기술과 상호 작용하는 방식을 바꾸고 있습니다. AI 챗봇이 더욱 평범 해짐에 따라 사용자는 실시간 텍스트 업데이트와 같은 앱의 특정 동작을 기대합니다. LLM API, 신호 및 일부 RXJ Magic을 사용하여 최신 AI 중심 사용자 경험을 만들 수 있습니다.

? 시작하기

메모

Gemini API는 모든 사용 데이터를 Google과 공유하려는 한 무료입니다.

1. git clone https://github.com/colin/ng-generative-ai-demo.git 실행 하여이 repo를 복제하십시오.

2. Google AI 스튜디오를 방문하여 API 키를 생성하십시오.

3. API 키를 사용하여 프로젝트 루트에서 .env 파일을 만듭니다.

    GOOGLE_AI_STUDIO_API_KEY=paste-api-key-here
   

4. npm install 실행하여 종속성을 설치하십시오.

5. npm run server 실행하여 포트 3000에서 백엔드 서버 ( server.ts )를 시작하십시오.

6. 다른 터미널에서는 npm start 실행하여 포트 4200에서 Angular Dev 서버를 시작합니다.

7. http://localhost:4200/ 로 이동하십시오.

? 주요 테이크 아웃

• 신호로 상태 관리 : 각도 신호와 함께 채팅 상태 (메시지 목록과 LLM이 새 메시지를 생성하는지 여부)를 추적하십시오.

• RXJS 관측 가능성을 사용한 실시간 텍스트 스트리밍 : RXJ를 사용하여 LLM API의 실시간 업데이트에 반응합니다.

• HTTP 클라이언트 구성 : 실시간 텍스트 스트림을 처리하도록 각도 HTTP 클라이언트를 구성합니다.

  1. app.config.ts 에서 http 클라이언트 "Fetch"를 제공하십시오.

   provideHttpClient ( withFetch ( ) ) ;

  2. HTTP 클라이언트에게 텍스트 이벤트를 관찰하고 진행 상황을보고하도록 지시하십시오.

   this . http . post ( 'http://localhost:3000/message' , prompt , {
    responseType : 'text' ,
    observe : 'events' ,
    reportProgress : true ,
  } ) ;

• 깜박임 커서 : pseudo element 및 css @keyframes ::after

   .message {
    & .generating {
      & ::after {
        content : ' ▋ ' ;
        animation : fade - cursor ease-in-out 500 ms infinite alternate ;
      }
    }
  }
  
  @keyframes fade-cursor {
    from {
      opacity : 25 % ;
    }
    to {
      opacity : 100 % ;
    }
  }

? 탐색 할 파일

• message.service.ts
• app.config.ts
• server.ts