Integracja ChatGPT z aplikacją Angular

W dzisiejszych czasach integracja sztucznej inteligencji z aplikacjami webowymi staje się coraz bardziej popularna. Jednym z przykładów jest wykorzystanie modeli językowych, takich jak GPT od OpenAI, do tworzenia interaktywnych chatbotów. Poniżej dowiesz się, jak zaimplementować obsługę ChatGPT w aplikacji Angular, krok po kroku.

Pozyskiwanie klucza API

Przed rozpoczęciem pracy z API ChatGPT, kluczowe jest pozyskanie klucza API od OpenAI. Klucz ten jest niezbędny do autoryzacji i wykonania zapytań do API. Aby uzyskać klucz API postępuj zgodnie ze wskazówkami zawartymi w Jak uzyskać klucz API do OpenAI – przewodnik.

Dodawanie serwisu do obsługi API ChatGPT

Aby umożliwić komunikację z API ChatGPT, pierwszym krokiem jest utworzenie serwisu w Angularze. Poniżej znajdziesz przykładowy kod serwisu ApiService, który służy do wysyłania zapytań do API OpenAI.


import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class ApiService {
constructor() { }
async SendPrompt(prompt: string) {
const url = 'https://api.openai.com/v1/chat/completions';
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_OPENAI_API_KEY'
},
body: JSON.stringify({
model: "gpt-3.5-turbo",
messages: [{
role: "user",
content: prompt
}],
max_tokens: 100,
temperature: 0.5
})
});
const data = await response.json();
return data;
}
}

Implementacja w komponencie

Następnym krokiem jest wykorzystanie serwisu ApiService w komponencie Angulara, aby umożliwić użytkownikowi wysyłanie zapytań i otrzymywanie odpowiedzi. Przykładowa implementacja komponentu OpenAIComponent może wyglądać następująco:


import { Component, OnInit } from '@angular/core';
import { ApiService } from 'src/api/api.service';
@Component({
selector: 'open-ai',
templateUrl: './open-ai.component.html'
})
export class OpenAIComponent implements OnInit {
public prompt: string = '';
public promptAnswer: any = '';
constructor(private apiService: ApiService) { }
ngOnInit(): void {
this.prompt = 'TUTAJ WPISZ SWOJE ZAPYTANIE';
}
async OnSendPromptClick() {
const gptResponse: any = await this.apiService.SendPrompt(this.prompt);
this.promptAnswer = gptResponse.choices[0].message.content;
console.log('this.promptAnswer:', this.promptAnswer, gptResponse);
}
}

Template komponentu

W template komponentu dodajemy elementy interfejsu użytkownika umożliwiające wprowadzanie zapytania przez użytkownika oraz wyświetlanie odpowiedzi. Elementy te mogą obejmować pole tekstowe (textarea) dla zapytania oraz obszar do prezentacji odpowiedzi. Przykład template może zawierać:

• Przycisk do wysyłania zapytania (Send prompt), który wywołuje metodę OnSendPromptClick().
• Pole tekstowe do wpisywania zapytania przez użytkownika, związane z modelem danych za pomocą dyrektywy [(ngModel)].
• Obszar do wyświetlania odpowiedzi, gdzie prezentowana jest treść odpowiedzi (promptAnswer).

Integracja ChatGPT z aplikacją Angular pozwala na tworzenie zaawansowanych, interaktywnych interfejsów użytkownika wykorzystujących możliwości sztucznej inteligencji.

Poprzez zaimplementowanie serwisu do komunikacji z API oraz stworzenie odpowiedniego komponentu, deweloperzy mogą w łatwy sposób integrować funkcjonalności oparte na modelach językowych OpenAI, oferując użytkownikom unikalne doświadczenia.

Przedstawione kroki i przykładowe implementacje są świetnym punktem wyjścia do dalszej eksploracji i personalizacji interakcji z AI w Twoich aplikacjach webowych.