본문 바로가기
Skills/Asp.net

[Asp.net] C# .NET 프로젝트에서 ChatGPT API 연동하기

by Hoseok 2023. 11. 30.
728x90
반응형

 

1. SDK 설치하기

 

마켓에 검색해보니, 여러 SDK나 라이브러리가 나옵니다. 

 

그 중 마음에 드시는 걸 고르면 됩니다.

 

저는 Betalgo.OpenAI를 설치하였는데, 다른 라이브러리를 쓰셔도 무방할 듯 합니다.

 

가장 첫 상단에 나오는 OpenAI 라이브러리가 다운로드 수는 더 높네요.

 

 

 

 

2. 프로젝트 아키텍처

 

아키텍처는 아래 그림과 같이 구성해 보겠습니다.

 

클라이언트 단에서 텍스트를 입력하고, 버튼을 누르면 콜백 함수를 실행시킬 것이고,

 

실행시킨 콜백 함수에서 텍스트를 받아서, OpenAI 서버로 전달하는 프로세스입니다.

직접 제작한 아키텍처

 

 

3. API KEY 생성하기

 

https://openai.com/

 

OpenAI

Creating safe AGI that benefits all of humanity

openai.com

 

에 접속 후, 로그인합니다.

 

 

 

API로 들어갑니다.

 

 

왼쪽 탭에서 API Keys에 들어간 뒤, 키가 없다면

 

 

Create new secret key를 눌러서

 

키를 만듭니다.

 

그리고 키가 생성되는데,

 

이때 키는 딱 한번만 보여지므로, 꼭 붙여넣기해서 보관합니다.

 

 

 

 

4. C# 코드

 

c# 코드는 아래와 같습니다.

 

응답받은 Content는 JSProperties에 담아서 Client에서도 접근 가능하게 합니다.

 

protected async void chatGPT_Callback(object source, CallbackEventArgs e)
{
    string apiKey = "본인의 OpenAI API키를 입력해줍니다.";
    
    var openAiService = new OpenAIService(new OpenAiOptions()
    {
        ApiKey = apiKey
    });

    var completionResult = await openAiService.ChatCompletion.CreateCompletion(new ChatCompletionCreateRequest
    {
        Messages = new List<ChatMessage>
        {
            ChatMessage.FromUser(chatGptText.Text)
        },
        Model = Models.ChatGpt3_5Turbo,
        MaxTokens = 500
    });
    if (completionResult.Successful)
    {
        if (completionResult.Choices.Any())
        {
            chatGPTCallback.JSProperties["cpMsg"] = completionResult.Choices.First().Message.Content;
        }
        else
        {
            chatGPTCallback.JSProperties["cpMsg"] = "응답을 반환받지 못했습니다.";
        }
    }
    else
    {
        if (completionResult.Error == null)
        {
            throw new Exception("내부 서버 에러");
        }

        chatGPTCallback.JSProperties["cpMsg"] = $"{completionResult.Error.Code}: {completionResult.Error.Message}";
    }
}

 

 

 

5. Javascript 코드

 

콜백이 끝나면, EndCallback으로 아래 자바스크립트 함수를 실행시킵니다.

 

function EndchatGPT_Callback(s, e) {
    if (s.cpMsg != "") {
        alert(s.cpMsg);
    }
}

 

 

 

6. 결과

 

아래처럼 매우 간단한 화면입니다.

 

 

 

"김치찌개 레시피에 대해서 알려줘" 라고 입력하고 검색 버튼을 누르면,

 

 

 

 

정상적으로, 결과를 받아올 수 있었습니다.

 

결과를 alert로 띄우는 것도 가능합니다. ('사과' 라고 검색한 결과)

 

 

 

단점으로는 응답시간이 40초 정도로 매우 오래 걸립니다.

 

지금은 테스트 용도로 API 연동만 시도해보았지만,

 

실제 서비스에 사용하기 위해서는, 속도 개선이 필수적일 것 같습니다.

 

 

7. 결론

 

빌게이츠가 말하길, AI는 Gui 다음으로 사용자 경험을 완전히 바꿀 기술이라고 합니다.

 

앞으로는 자연어 명령만 하면 AI가 모든 것을 처리되는 세상이 찾아올 것이라고 생각합니다.

 

그렇기에 AI 기술은 결국 찾아올 시대의 흐름이고, 그 파도를 탈 방법을 찾는 사람이

 

미래를 선도할 것이라고 결론지으며 글을 마치겠습니다.

 

 

 

8. 참고할만한 글

 

2023.11.10 - [Skills/ChatGPT] - [GPTs] 나만의 GPT를 커스텀할 수 있는 Create a GPT 베타 버전 튜토리얼

2023.11.09 - [Skills/ChatGPT] - [GPTs] 나만의 GPT를 커스텀할 수 있는 Create a GPT 베타 버전 공개 * 사용 후기

 

 

 

 

 

728x90
반응형