다음을 통해 공유

JavaScript에서 도우미 및 함수 호출을 사용하여 Azure OpenAI 시작

  • 아티클

이 문서에서는 서버리스 Azure OpenAI Assistant 빠른 시작을 배포하고 실행하는 방법을 보여줍니다. 이 샘플에서는 JavaScript, 함수 호출이 있는 Azure OpenAI 서비스 도우미 및 Azure Functions를 사용하여 도우미 앱을 구현합니다.

아키텍처 개요

Azure OpenAI Assistants를 사용하면 사용자 지정 지침을 통해 요구 사항에 맞게 조정되고 코드 인터프리터 및 사용자 지정 함수와 같은 고급 도구로 보강된 AI 도우미를 만들 수 있습니다. 이 문서에서는 도우미 API를 시작하는 방법을 자세히 설명합니다.

Diagram showing architecture from client to backend app.클라이언트에서 백 엔드 앱까지의 아키텍처를 보여 주는 다이어그램.

이 애플리케이션은 다음 두 가지 주요 구성 요소를 중심으로 빌드됩니다.

  • 바닐라 CSS 및 JavaScript 파일이 있고 Azure Static Web Apps에서 호스트되는 간단한 HTML 페이지입니다.

  • Azure Functions 및 OpenAI JavaScript SDK를 사용하여 빌드된 서버리스 API입니다. 서버리스 앱은 함수 호출을 포함한 도우미 정의를 OpenAI 엔드포인트로 보냅니다. 엔드포인트는 후속 함수 호출 및 해당 호출을 완료하는 데 필요한 매개 변수로 응답합니다.

    • 샘플의 함수 호출은 Azure Function으로 전송된 주식 기호를 기반으로 임의 주식 시세 값을 생성하여 API 호출을 시뮬레이션합니다. 이 시뮬레이션은 솔루션의 원격 API로 대체할 수 있습니다.

    Diagram showing Azure Functions integration with Azure OpenAI where Azure OpenAI can return follow-up function names which Azure Functions should call.Azure OpenAI가 Azure Functions에서 호출해야 하는 후속 함수 이름을 반환할 수 있는 Azure OpenAI와 Azure Functions 통합을 보여 주는 다이어그램

필수 조건

이 문서를 완료하는 데 필요한 모든 종속성을 갖춘 개발 컨테이너 환경을 사용할 수 있습니다. GitHub Codespaces(브라우저)에서 개발 컨테이너를 실행하거나 Visual Studio Code를 사용하여 로컬로 실행할 수 있습니다.

이 문서를 사용하려면 다음 필수 구성 요소가 필요합니다.

  1. Azure 구독 - 체험 구독 만들기
  2. Azure 계정 권한 - Azure 계정에는 사용자 액세스 관리자 또는 소유자와 같은 Microsoft.Authorization/roleAssignments/write 권한이 있어야 합니다.
  3. GitHub 계정.

개방형 개발 환경

다음 지침을 사용하여 이 문서를 완료하는 데 필요한 모든 종속성을 포함하는 미리 구성된 개발 환경을 배포합니다.

GitHub Codespaces는 사용자 인터페이스로 웹용 Visual Studio Code를 사용하여 GitHub에서 관리하는 개발 컨테이너를 실행합니다. 가장 간단한 개발 환경을 위해서는 GitHub Codespaces를 사용하여 이 문서를 완료하는 데 필요한 올바른 개발자 도구와 종속성을 미리 설치합니다.

Important

모든 GitHub 계정은 2개의 코어 인스턴스를 사용하여 매월 최대 60시간 동안 Codespaces를 무료로 사용할 수 있습니다. 자세한 내용은 GitHub Codespaces 월별 포함 스토리지 및 코어 시간을 참조하세요.

  1. Azure-Samples/azure-openai-assistant-javascript GitHub 리포지토리의 main 분기에 새 GitHub Codespace를 만드는 프로세스를 시작합니다.

  2. 다음 버튼을 오른쪽 클릭하고 새 창에서 링크 열기를 선택하여 개발 환경과 문서를 동시에 사용할 수 있도록 합니다.

    Open in GitHub CodespacesGitHub Codespaces에서 열기

  3. codespace 만들기 페이지에서 codespace 구성 설정을 검토한 다음, 새 codespace 만들기를 선택합니다.

  4. codespace가 생성될 때까지 기다립니다. 이 프로세스에는 몇 분 정도 걸릴 수 있습니다.

  5. 화면 하단의 터미널에서 Azure 개발자 CLI를 사용하여 Azure에 로그인합니다.

    azd auth login

  6. 터미널에서 코드를 복사한 다음 브라우저에 붙여넣습니다. 지침에 따라 Azure 계정으로 인증합니다.

  7. 이 문서의 나머지 작업은 이 개발 컨테이너의 컨텍스트에서 수행됩니다.

배포 및 실행

샘플 리포지토리에는 함수 앱을 Azure에 배포하는 데 필요한 모든 코드 및 구성 파일이 포함되어 있습니다. 다음 단계에서는 샘플을 Azure에 배포하는 과정을 안내합니다.

Azure에 도우미 앱 배포

Important

이 섹션에서 만들어진 Azure 리소스는 주로 Azure AI 검색 리소스에서 즉각적인 비용이 발생합니다. 이러한 리소스는 명령이 완전히 실행되기 전에 중단하더라도 비용이 발생할 수 있습니다.

  1. 다음 Azure 개발자 CLI 명령을 실행하여 Azure 리소스를 프로비전하고 소스 코드를 배포합니다.

    azd up

  2. 환경 이름을 입력하라는 메시지가 표시되면 짧고 소문자로 유지합니다. 예들 들어 myenv입니다. 리소스 그룹 이름의 일부로 사용됩니다.

  3. 메시지가 표시되면 리소스를 만들 구독을 선택합니다.

  4. 처음 위치를 선택하라는 메시지가 표시되면 가까운 위치를 선택합니다. 이 위치는 호스팅을 포함한 대부분의 리소스에 사용됩니다.

  5. OpenAI 모델의 위치를 묻는 메시지가 표시되면 가까운 위치를 선택합니다. 첫 번째 위치와 동일한 위치를 사용할 수 있는 경우 해당 위치를 선택합니다.

  6. 앱이 배포될 때까지 기다립니다. 배포를 완료하는 데 5~10분이 걸릴 수 있습니다.

  7. 애플리케이션을 성공적으로 배포한 후 터미널에 URL이 표시됩니다.

  8. 레이블이 지정된 URL을 Deploying service web 선택하여 브라우저에서 도우미 애플리케이션을 엽니다.

도우미 앱 사용

도우미 앱을 사용하여 주식 시장 가격을 MSFT가져올 수 있습니다. 다음 단계에서는 도우미 앱을 사용하는 프로세스를 안내합니다. 도우미는 전자 메일로 답변을 보낼 수 있습니다. 전자 메일 보내기 기능이 구성되지 않았으므로 해당 명령을 사용하지 않도록 프롬프트를 수정합니다.

  1. 브라우저에서 다음 프롬프트를 복사하여 붙여넣습니다.

    Based on the latest financial data and current stock market trends, can you provide a detailed analysis of Microsoft's current state? Please include insights into their recent performance, market position, and future outlook. Additionally, retrieve and include the latest closing price of Microsoft's stock using its ticker symbol (MSFT).

  2. 실행 단추를 선택합니다. 결과는 다음 응답과 유사하게 표시됩니다.

    Screenshot of assistant app's first answer.도우미 앱의 첫 번째 대답 스크린샷

리소스 정리

Azure 리소스 정리

이 문서에서 만들어진 Azure 리소스는 Azure 구독에 요금이 청구됩니다. 앞으로 이러한 리소스가 필요하지 않을 것으로 예상되는 경우 추가 요금이 발생하지 않도록 삭제합니다.

다음 Azure 개발자 CLI 명령을 실행하여 Azure 리소스를 삭제하고 소스 코드를 제거합니다.

azd down --purge

GitHub Codespaces 정리

GitHub Codespaces 환경을 삭제하면 계정에 대해 얻을 수 있는 코어당 무료 사용 권한을 최대화할 수 있습니다.

Important

GitHub 계정의 자격에 대한 자세한 내용은 GitHub Codespaces 월별 포함된 스토리지 및 코어 시간을 참조하세요.

  1. GitHub Codespaces 대시보드(https://github.com/codespaces)에 로그인합니다.

  2. Azure-Samples/azure-openai-assistant-javascript GitHub 리포지토리에서 제공된 현재 실행 중인 Codespaces를 찾습니다.

    Screenshot of all the running Codespaces including their status and templates.상태 및 템플릿을 포함하여 실행 중인 모든 Codespaces의 스크린샷.

  3. 상황에 맞는 메뉴를 ...열고, 코드스페이스에 대해 삭제를 선택합니다.

도움말 보기

이 샘플 리포지토리는 문제 해결 정보를 제공합니다.

발급된 문제가 해결되지 않으면 리포지토리의 문제에 문제를 기록합니다.

관련 콘텐츠