Mesh 201 자습서 6장: Azure OpenAI를 사용하여 질문에 대한 답변 가져오기

아티클
09/25/2024

이 장에서는 다섯 번째이자 마지막 스테이션으로 이동하여 Azure OpenAI 기반 가상 도우미 또는 "챗봇"을 구현하는 방법을 알아봅니다. 여기에서 원하는 모든 AI 서비스(예: Copilot Studio)를 사용할 수 있습니다. 풍력 발전 단지의 위치를 검색하는 테마에 따라 AI 도우미는 풍력 발전 단지 관련 질문에 답변하도록 사용자 지정됩니다.

중요 정보:

OpenAI는 승인된 엔터프라이즈 고객 및 파트너만 사용할 수 있습니다. 이 그룹에 아직 없는 경우 등록 양식을 제출해야 합니다. 등록 프로세스에 대해 자세히 알아봅니다.
구독 및 OpenAI에 문제가 발생하는 경우 Mesh Creator 포럼에 게시하여 답변을 찾을 수 있습니다.

이 스테이션에 대한 설정

이 스테이션을 완료하려면 Azure Portal을 방문한 다음 URI("엔드포인트"라고도 함)와 테넌트의 키를 가져와야 합니다. 나중에 Azure OpenAI를 호출할 수 있는 일부 코드에 키를 삽입합니다. 나중에 워크플로를 중단할 필요가 없도록 지금 이 단계를 수행해 보겠습니다.

Azure OpenAI 리소스 만들기 및 배포

브라우저에서 Azure Portal로 이동한 다음 로그인합니다.
창 맨 위에 있는 검색 상자에 "azure openai"를 입력한 다음 Enter 키를 누릅니다. Azure AI 서비스로 이동합니다 . | Azure OpenAI 페이지.
만들기 버튼을 클릭합니다.

중요: 아래에 자세히 설명된 많은 설정의 경우 특정 권장 사항을 만들지 않습니다. 사용자와 조직에 가장 적합한 옵션을 선택해야 합니다.
기본 사항 페이지에서 요청된 이름을 만들고 구독, 지역 및 가격 책정 계층에 원하는 옵션을 선택합니다.
네트워크 페이지에서 원하는 옵션을 선택합니다.
태그 페이지에서 태그를 추가하거나 이러한 옵션을 건너뛸 수 있습니다.
검토 및 제출 페이지에서 정보를 검토한 다음 만들기 단추를 클릭합니다.

리소스가 배포되고 배포가 진행 중이라는 메시지가 표시됩니다. 결국 배포가 완료된 페이지가 표시됩니다.

__________________________________

Azure OpenAI Studio에서 모델 배포

리소스로 이동 단추를 클릭합니다.
리소스 페이지에서 Azure OpenAI Studio로 이동을 클릭합니다.
관리 아래의 왼쪽 메뉴에서 배포를 선택합니다.
새 배포 만들기를 선택합니다.
모델 배포 드롭다운을 클릭한 다음 기본 모델 배포를 선택합니다.
모델 선택 대화 상자에서 "gpt-35-turbo"를 선택합니다.
원하는 경우 잠시 설명을 확인하세요. 완료되면 [확인] 단추를 클릭합니다.

참고: 다른 모델을 선택할 수 있지만 코드를 일부 변경해야 합니다.

배포 이름 필드에 "gpt-35-turbo"를 입력합니다.
다른 설정의 경우 사용자와 조직에 가장 적합한 이름과 옵션을 선택합니다. 완료되면 배포 단추를 클릭합니다.

URI 및 키 복사

Azure 기본 페이지로 다시 이동한 다음 리소스 아래에서 만든 리소스를 선택합니다.
왼쪽 메뉴의 리소스 페이지에서 키 및 엔드포인트를 선택합니다.
키 및 엔드포인트 페이지에서 KEY 1 또는 KEY 2의 "클립보드에 복사" 단추를 클릭한 다음 Windows 메모장 또는 다른 텍스트 편집기를 사용하여 텍스트 파일에 붙여넣습니다.
엔드포인트의 "클립보드에 복사" 단추를 클릭하고 동일한 텍스트 파일에 붙여넣습니다.
텍스트 파일을 저장합니다. 자습서의 뒷부분에서 이러한 두 가지 정보가 필요합니다.

스테이션 5에 대한 프리팹 추가

프로젝트 폴더에서 Assets>MeshCloudScripting으로 이동한 다음 5 - AIAssistant 프리팹을 계층 구조로 끌어서 메시 클라우드 스크립팅에 자식 개체로 배치하고 4 - GlobeWithCloudScripting 바로 아래에 배치합니다.

Azure OpenAI에 대한 URI 및 API 정보 삽입

계층 구조에서 Mesh Cloud Scripting GameObject를 선택합니다.
검사기에서 메시 클라우드 스크립팅 구성 요소로 이동한 다음 애플리케이션 폴더 열기를 클릭합니다. 그러면 Windows 파일 탐색기 Mesh Cloud Scripting에 대한 파일이 포함된 프로젝트 폴더가 열립니다.
appsettings라는 파일을 엽니다. 코드 편집기에서 UnityLocalDev.json . 마지막 두 줄의 코드에는 Azure OpenAI 구성 설정에 대한 자리 표시자 주석이 포함되어 있습니다.
이전에 Azure Portal에서 복사한 URI와 키를 다음 두 줄에 붙여넣고 자리 표시자 주석을 바꿉니다.
파일을 저장 후 닫습니다.

Directory.packages.props 파일 업데이트

Mesh Cloud Scripting 파일을 표시하는 파일 탐색기 창에서 코드 편집기에서 Directory.Packages.props라는 파일을 엽니다. 패키지 참조를 추가하는 방법에 대한 설명을 확인합니다.

주석을 아래 줄로 바꿉다.

<PackageVersion Include="Azure.AI.OpenAI" Version="1.0.0-beta.15"/>

파일을 저장 후 닫습니다.

csproj 파일 업데이트

Mesh Cloud Scripting 파일을 표시하는 파일 탐색기 창에서 코드 편집기에서 StartingPoint.csproj라는 파일을 엽니다.
파일 맨 아래에 WeatherAPI 정보가 있는 ItemGroup 요소 바로 위에 패키지 참조에 대한 자리 표시자가 있는 주석이 있습니다.

주석을 삭제하고 아래 줄로 바꿉다.

<PackageReference Include="Azure.AI.OpenAI" />

__________________________________

파일을 저장 후 닫습니다.

OpenAI를 사용하도록 설정하는 코드 추가

Mesh Cloud Scripting 파일을 표시하는 파일 탐색기 창에서 StartingPoint 폴더로 이동한 다음 코드 편집기에서 App.cs 파일을 엽니다.
App.cs 파일의 지시문 목록 using 맨 위에 있는 "여기에 코드 붙여넣기" 주석을 찾습니다.
아래 코드를 복사합니다.
```
using Azure;
using Azure.AI.OpenAI;
```
방금 찾은 "여기에 코드 붙여넣기" 주석을 복사한 코드로 바꿉니다.
필드 아래에 있는 "여기에 코드 붙여넣기" 주석을 _weatherAPIKey_ 찾습니다.
아래 코드를 복사합니다.
```
private OpenAIClient _openAIClient;
```
방금 찾은 "여기에 코드 붙여넣기" 주석을 복사한 코드로 바꿉니다.
생성자 본문에 있는 "여기에 코드 붙여넣기" 주석을 찾습니다.

아래 코드를 복사합니다.

Uri azureOpenAIResourceUri = new(configuration.GetValue<string>("AZURE_OPENAI_API_URI"));
AzureKeyCredential azureOpenAIApiKey = new(configuration.GetValue<string>("AZURE_OPENAI_API_KEY"));
_openAIClient = new(azureOpenAIResourceUri, azureOpenAIApiKey);

방금 찾은 "여기에 코드 붙여넣기" 주석을 복사한 코드로 바꿉니다.
메서드 내의 if 문 뒤에 refreshButtonNode 있는 "여기에 코드 붙여넣기" 주석을 StartAsync() 찾습니다.

아래 코드를 복사합니다.

var aiParentNode = _app.Scene.FindFirstChild("5 - AIAssistant", true) as TransformNode;
var infoButton = aiParentNode?.FindFirstChild<InteractableNode>(true);

if (infoButton != null)
{
    infoButton.Selected += async (sender, args) =>
    {
        // Ensure we have weather data before beginning the conversation
        await GetCurrentWeather(_latlong);

        // Display an input dialog for the user to send a message to the large language model (LLM)
        // Paste code here
    };
}

방금 찾은 "여기에 코드 붙여넣기" 주석을 복사한 코드로 바꿉니다.

OpenAI 입력 대화 상자를 표시하는 코드 추가

if 문의 메서드 바로 다음에 GetCurrentWeather() 있는 "여기에 코드 붙여넣기" 주석을 infoButton 찾습니다.

아래 코드를 복사합니다.

await _app.ShowInputDialogToParticipantAsync("Ask Azure OpenAI", args.Participant).ContinueWith(async (response) =>
{
    try
    {
        if (response.Exception != null)
        {
            throw response.Exception.InnerException ?? response.Exception;
        }

        string participantInput = response.Result;

        // Paste code here

        // Wait for a response from OpenAI based on the user's message
        // Paste code here
    }
    catch (Exception ex)
    {
        var log = $"Exception during OpenAI request: {ex.Message}";
        _logger.LogCritical(log);

        if (!response.IsCanceled)
        {
            _app.ShowMessageToParticipant(log, args.Participant);
        }
    }
}, TaskScheduler.Default);

방금 찾은 "여기에 코드 붙여넣기" 주석을 복사한 코드로 바꿉니다.

코드는 다음을 수행합니다.
- ShowInputDialogToParticipantAsync()라는 메서드를 통해 Mesh Cloud Scripting을 호출합니다. 인수는 사용자에게 메시지를 표시하려는 메시지("Azure OpenAI 요청")와 입력 대화 상자를 표시할 사람(인수)입니다. 참가자).
- 입력 대화 상자가 나타나면 오류를 확인합니다.
- 참가자가 입력한 모든 항목(결과)을 participantInput에 문자열로 저장합니다.

입력 대화 상자의 결과로 GPT-3.5 Turbo 보내기

아래 코드는 현재 날씨 데이터로 응답하는 방법에 대한 지침과 함께 입력 대화 상자의 결과를 GPT-3.5 Turbo 모델에 보냅니다.

시도에서 첫 번째 "여기에 코드 붙여넣기" 주석을 찾습니다. 방금 붙여넣은 catch 블록입니다.

아래 코드를 복사합니다.

    var chatCompletionsOptions = new ChatCompletionsOptions()
    {
        DeploymentName = "gpt-35-turbo", // Use DeploymentName for "model" with non-Azure clients
        Messages =
        {
            // The system message represents instructions or other guidance about how the assistant should behave
            new ChatRequestSystemMessage(
                "You are a helpful assistant." +
                "You're part of a developer sample for the Mesh Toolkit." +
                "Use brief answers, less than 1 paragraph." +
                "You can suggest a good location for a wind farm based on current and historical weather data." +
                "We're looking at globe with the current weather data displayed for each of these locations:  Lagos Nigeria, Redmond WA USA, Dublin Ireland" +
                "Current weather conditions for these locations:" + _currentWeatherText
                ),
            new ChatRequestUserMessage(participantInput),
        }
    };

방금 찾은 "여기에 코드 붙여넣기" 주석을 복사한 코드로 바꿉니다.

코드는 다음을 수행합니다.
- chatCompletionOptions라는 ChatCompletionOptions 클래스의 인스턴스를 만듭니다.
- 이전에 만든 배포 이름("gpt-35-turbo")으로 DeploymentName이라는 변수를 초기화합니다.
- 도우미가 질문에 답변하는 방법에 대한 지침을 사용하여 ChatRequestSystemMessage의 새 인스턴스를 초기화합니다. 여기에는 관심 있는 날씨 데이터가 있는 위치와 해당 위치의 현재 조건(_currentWeatherText)이 포함됩니다. 5장에서 weatherapi.com 호출할 때 _currentWeatherText 값이 수신되었습니다.
- 참가자가 묻는 질문을 사용하여 ChatRequestUserMessage의 새 인스턴스를 초기화합니다.
- 요청에 대한 정보를 LLM(큰 언어 모델)으로 보냅니다.

LLM의 응답을 표시하는 코드 추가

시도에서 나머지 "여기에 코드 붙여넣기" 주석을 찾습니다. 방금 붙여넣은 catch 블록입니다.

아래 코드를 복사합니다.

        var aiResponse = await _openAIClient.GetChatCompletionsAsync(chatCompletionsOptions);

        // Display the first response from the LLM
        var responseMessage = aiResponse.Value.Choices[0].Message;
        _app.ShowMessageToParticipant($"<i>You asked: {participantInput}</i>\n\nResponse: {responseMessage.Content}", args.Participant);

방금 찾은 "여기에 코드 붙여넣기" 주석을 복사한 코드로 바꿉니다.

코드는 다음을 수행합니다.
- LLM의 응답을 기다립니다.
- LLM은 배열(responseMessage)에서 여러 응답을 다시 보냅니다. 표시할 항목을 선택할 수 있습니다.
- Mesh Cloud Scripting API에서 ShowMessageToParticipant()를 호출하여 응답을 표시합니다.
파일을 저장 후 닫습니다.

작업 테스트

Unity 편집기에서 프로젝트를 저장한 다음 재생 단추를 누릅니다.
아바타는 처음 세 개의 스테이션을 포함하는 구 테라스의 측면에 생성됩니다. 구 테라스의 반대편으로 이동한 다음 스테이션 5 앞에 배치합니다.
스테이션 5의 정보 텍스트 상자에 있는 정보 단추를 클릭합니다.
Azure OpenAI 질문 대화 상자가 나타나면 질문을 입력합니다.
대화 상자에 응답이 나타납니다. 작업을 마친 후 확인을 클릭합니다.

결론

축하합니다! 이 Mesh 201 자습서에서는 다음에 대해 알아보았습니다.

로컬 공유 및 비공유 HTML 파일을 WebSlate에 로드합니다.
3D 자산을 사용하여 Web API를 호출하고 WebSlate에 데이터를 다운로드합니다.
내부 또는 공용 원본의 데이터를 장면으로 끌어와 3D로 표시합니다.
Azure OpenAI 기반 가상 도우미 또는 "챗봇"을 사용하여 AI 기반 상호 작용을 설정합니다.

이제 새로운 Mesh 기술을 사용하여 더욱 유용하고 흥미로운 공동 작업 환경을 구축할 수 있습니다.

다음 단계

빌드 및 게시

이 자습서 프로젝트를 빌드하고 게시하려면 다음을 수행합니다.

Mesh Cloud Scripting 프로젝트 준비에 대한 문서로 이동한 다음 지침에 따라 리소스 그룹 및 구독 ID를 기록합니다.
환경을 빌드하고 게시하는 방법에 대한 문서로 이동한 다음 해당 지침에 따릅니다. 특정 시점에서 Mesh Cloud Scripting을 사용하여 프로젝트를 빌드하기 위한 특수 지침이 포함된 추가 문서로 이동한 다음 기본 빌드 및 게시 문서로 돌아가야 합니다. 이 흐름은 모두 문서에서 설명합니다.
원하는 경우 Mesh 앱에서 환경을 테스트할 수 있습니다.

WebSlates에 대해 자세히 알아보기

Mesh 도움말 사이트의 WebSlates 문서를 방문하세요.

WebSlates 제품 관리자가 작성한 블로그 게시물을 읽습니다.

과제

WebSlate 및 HTML 파일을 로드하는 단추를 사용하여 고유한 스테이션을 만들어 보세요. 메시 개발자 포럼에서 여러분의 노력을 공유하세요!

다음을 통해 공유

Mesh 201 자습서 6장: Azure OpenAI를 사용하여 질문에 대한 답변 가져오기

이 스테이션에 대한 설정

Azure OpenAI 리소스 만들기 및 배포

Azure OpenAI Studio에서 모델 배포

URI 및 키 복사

스테이션 5에 대한 프리팹 추가

Azure OpenAI에 대한 URI 및 API 정보 삽입

Directory.packages.props 파일 업데이트

csproj 파일 업데이트

OpenAI를 사용하도록 설정하는 코드 추가

OpenAI 입력 대화 상자를 표시하는 코드 추가

입력 대화 상자의 결과로 GPT-3.5 Turbo 보내기

LLM의 응답을 표시하는 코드 추가

작업 테스트

결론

다음 단계

피드백

추가 리소스