다음을 통해 공유

JavaScript용 사용자 고유의 데이터 샘플을 사용하여 채팅 시작

  • 아티클

이 문서에서는 JavaScript용 데이터 샘플로 채팅을 배포하고 실행하는 방법을 보여 줍니다. 이 샘플에서는 Azure AI Search에서 JavaScript, Azure OpenAI Service 및 RAG(검색 증강 세대) 를 사용하여 채팅 앱을 구현하여 임대 속성에 대한 답변을 얻습니다. 임대 속성 채팅 앱은 개인 정보 보호 정책, 서비스 약관 및 지원을 포함하여 markdown 파일(*.md)의 데이터로 시드됩니다.

이 문서의 지침을 따르면 다음을 수행할 수 있습니다.

  • Azure에 채팅 앱을 배포합니다.
  • 임대 속성 웹 사이트 정보에 대한 답변을 가져옵니다.
  • 응답 동작을 변경하려면 설정을 변경합니다.

이 문서를 완료하면 사용자 지정 코드 및 데이터로 새 프로젝트 수정을 시작할 수 있습니다.

이 문서는 Azure OpenAI Service 및 Azure AI Search를 사용하여 채팅 앱을 빌드하는 방법을 보여 주는 문서 모음의 일부입니다. 컬렉션의 다른 문서는 다음과 같습니다.

참고 항목

이 문서에서는 문서의 예제 및 지침에 대한 기준으로 하나 이상의 AI 앱 템플릿을 사용합니다. AI 앱 템플릿은 AI 앱의 고품질 시작 지점을 보장하는 데 도움이 되는 잘 유지 관리되고 배포하기 쉬운 참조 구현을 제공합니다.

아키텍처 개요

다음 다이어그램은 채팅 앱의 간단한 아키텍처를 보여 줍니다.

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

채팅 샘플 애플리케이션은 Contoso Real Estate라는 가상의 회사를 위해 빌드되었으며, 지능형 채팅 환경을 통해 고객은 제품 사용에 대한 지원 질문을 할 수 있습니다. 샘플 데이터에는 서비스 약관, 개인 정보 보호 정책 및 지원 가이드를 설명하는 문서 집합이 포함되어 있습니다. 문서는 배포 중에 아키텍처에 수집됩니다.

애플리케이션은 다음을 비롯한 여러 구성 요소에서 만들어집니다.

  • 검색 서비스: 검색 및 검색 기능을 제공하는 백 엔드 서비스입니다.
  • 인덱서 서비스: 데이터를 인덱싱하고 검색 인덱스를 만드는 서비스입니다.
  • 웹앱: 사용자 인터페이스를 제공하고 사용자와 백 엔드 서비스 간의 상호 작용을 오케스트레이션하는 프런트 엔드 웹 애플리케이션입니다.

Diagram showing Azure services and their integration flow for the front-end app, the search, and the document ingestion.프런트 엔드 앱, 검색 및 문서 수집에 대한 Azure 서비스 및 통합 흐름을 보여 주는 다이어그램

비용

이 아키텍처의 대부분의 리소스는 기본 또는 사용량 가격 책정 계층을 사용합니다. 사용량 가격 책정은 사용량을 기준으로 책정됩니다. 즉, 사용한 만큼만 비용을 지불하면 됩니다. 이 문서를 완료하려면 요금이 발생하지만 요금은 최소화됩니다. 문서를 완료하면 리소스를 삭제하여 요금 발생을 중지할 수 있습니다.

샘플 리포지토리의 비용에 대해 자세히 알아봅니다.

필수 조건

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

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

개방형 개발 환경

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

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

Important

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

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

  2. 다음 단추를 마우스 오른쪽 단추로 클릭하고 개발 환경과 설명서를 동시에 사용할 수 있도록 새 창에서 링크 열기를 선택합니다.

    Open in GitHub CodespacesGitHub Codespaces에서 열기

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

    Screenshot of the confirmation screen before creating a new 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. 브라우저에서 채팅 애플리케이션을 열려면 Deploying service web이라고 표시된 URL을 선택합니다.

    Screenshot of chat app in browser showing several suggestions for chat input and the chat text box to enter a question.채팅 입력에 대한 몇 가지 제안과 질문을 입력할 수 있는 채팅 텍스트 상자를 보여 주는 브라우저의 채팅 앱 스크린샷.

채팅 앱을 사용하여 markdown 파일에서 답변 가져오기

채팅 앱은 markdown 파일 카탈로그의 임대 정보로 미리 로드됩니다. 채팅 앱을 사용하여 임대 프로세스에 대한 질문을 할 수 있습니다. 다음 단계에서는 채팅 앱을 사용하는 과정을 안내합니다.

  1. 브라우저에서 페이지 아래쪽의 텍스트 상자에 환불 정책이란?을 선택하거나 입력합니다.

    Screenshot of chat app's first answer.채팅 앱의 첫 번째 답변 스크린샷.

  2. 답변에서 생각 프로세스 표시를 선택합니다.

    Screenshot of chat app's first answer with Show thought process highlighted in a red box.빨간색 상자에 생각 프로세스 표시가 강조 표시된 채팅 앱의 첫 번째 대답 스크린샷

  3. 오른쪽 창에서 탭을 사용하여 답변이 생성된 방법을 이해합니다.

    탭 설명
    사고 과정 이는 채팅의 상호 작용에 대한 스크립트입니다. 시스템 프롬프트(content)와 사용자 질문(content)을 볼 수 있습니다.
    지원 내용 여기에는 사용자의 질문에 답변하기 위한 정보와 원본 재질이 포함됩니다. 원본 자료 인용 수는 개발자 설정나와 있습니다. 기본값은 3입니다.
    인용 인용이 포함된 원래 페이지가 표시됩니다.

  4. 완료되면 탭 위에 X가 표시된 숨기기 단추를 선택합니다.

채팅 앱 설정을 사용하여 응답 동작 변경

채팅 앱의 인텔리전스는 OpenAI 모델 및 모델과 상호 작용하는 데 사용되는 설정에 따라 결정됩니다.

Screenshot of chat developer settings.채팅 개발자 설정 스크린샷.

설정 설명
프롬프트 템플릿 재정의 이는 답변을 생성하는 데 사용되는 프롬프트입니다.
이 많은 검색 결과를 검색합니다. 답변을 생성하는 데 사용되는 검색 결과의 수입니다. 인용의 사고 과정 및 지원 콘텐츠 탭에서 반환된 이러한 원본을 확인할 수 있습니다.
범주 제외 검색 결과에서 제외되는 문서 범주입니다.
검색을 위해 의미 순위매기기 사용 이는 기계 학습을 사용하여 검색 결과의 관련성을 높이는 Azure AI 검색의 기능입니다.
전체 문서 대신 쿼리 컨텍스트 요약을 사용합니다. Use semantic ranker와 Use query-contextual summaries를 모두 선택하면 LLM은 순위가 가장 높은 문서의 모든 구절 대신 주요 구절에서 추출된 캡션을 사용합니다.
후속 질문 제안 채팅 앱에서 답변에 따라 후속 질문을 제안하도록 합니다.
검색 모드 벡터 + 텍스트는 검색 결과가 문서의 텍스트와 문서의 포함을 기반으로 한다는 의미입니다. 벡터는 검색 결과가 문서의 포함을 기반으로 한다는 의미입니다. 텍스트는 검색 결과가 문서의 텍스트를 기반으로 한다는 의미입니다.
채팅 완료 응답 스트리밍 응답에 대한 전체 답변을 사용할 수 있게 될 때까지 기다리는 대신 응답을 스트리밍합니다.

다음 단계에서는 설정을 변경하는 과정을 안내합니다.

  1. 브라우저에서 개발자 설정 탭을 선택합니다.

  2. 확인란 대신 쿼리 컨텍스트 요약 사용을 선택하고 동일한 질문을 다시 요청합니다.

    What happens if the rental doesn't fit the description?

    채팅은 다음과 같은 보다 간결한 답변으로 반환되었습니다.

리소스 정리

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-search-openai-javascript GitHub 리포지토리에서 제공된 현재 실행 중인 Codespaces를 찾습니다.

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

  3. codespace에 대한 상황에 맞는 메뉴를 열고 삭제를 선택합니다.

    Screenshot of the context menu for a single codespace with the delete option highlighted.삭제 옵션이 강조 표시된 단일 codespace에 대한 상황에 맞는 메뉴의 스크린샷

도움말 보기

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

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

다음 단계