이 문서에서는 "JavaScript용 데이터 샘플로 채팅"을 배포하고 실행하는 방법을 보여 줍니다. 이 샘플은 JavaScript, Azure OpenAI 서비스 및 Azure AI Search의 검색 증강 세대(RAG)를 사용하여 임대 속성에 대한 답변을 제공하는 채팅 앱을 구현합니다. 임대 부동산 채팅 앱은 개인 정보 보호 정책, 서비스 약관 및 지원을 포함하여 markdown 파일(*.md)의 데이터로 채워집니다.
- 데모 JavaScript - 풀 스택 비디오
- 데모 JavaScript - Python 백엔드가 있는 프런트엔드 비디오
이 문서의 지침을 따르면 다음을 수행할 수 있습니다.
- Azure에 채팅 앱을 배포합니다.
- 임대 부동산 웹 사이트 정보에 대한 답변을 얻으세요.
- 응답 동작을 변경하려면 설정을 변경합니다.
이 문서를 완료하면 사용자 지정 코드 및 데이터로 새 프로젝트 수정을 시작할 수 있습니다.
이 문서는 Azure OpenAI Service 및 Azure AI Search를 사용하여 채팅 앱을 빌드하는 방법을 보여 주는 문서 모음의 일부입니다. 컬렉션의 다른 문서는 다음과 같습니다.
- .NET
- 자바
- Python
참고
이 문서에서는 예제와 지침의 기반으로 하나 이상의 AI 앱 템플릿을 사용합니다. AI 앱 템플릿은 AI 앱의 고품질 시작 지점을 보장하는 데 도움이 되는 잘 유지 관리되고 배포하기 쉬운 참조 구현을 제공합니다.
아키텍처 개요
다음 다이어그램은 채팅 앱의 간단한 아키텍처를 보여 줍니다.
클라이언트에서 백엔드 애플리케이션까지의 아키텍처를 보여주는 다이어그램.
채팅 샘플 애플리케이션은 Contoso Real Estate라는 가상의 회사를 위해 빌드되었으며, 지능형 채팅 환경을 통해 고객은 제품 사용에 대한 지원 질문을 할 수 있습니다. 샘플 데이터에는 서비스 약관, 개인 정보 보호 정책 및 지원 가이드를 설명하는 문서 집합이 포함되어 있습니다. 문서는 배포 중에 아키텍처에 수집됩니다.
애플리케이션은 다음을 비롯한 여러 구성 요소에서 만들어집니다.
- 검색 서비스: 검색 및 검색 기능을 제공하는 백 엔드 서비스입니다.
- 인덱서 서비스: 데이터를 인덱싱하고 검색 인덱스를 만드는 서비스입니다.
- 웹앱: 사용자 인터페이스를 제공하고 사용자와 백 엔드 서비스 간의 상호 작용을 오케스트레이션하는 프런트 엔드 웹 애플리케이션입니다.
프론트 엔드 앱, 검색 및 문서 수집을 위한 Azure 서비스와 그 통합 흐름을 보여주는 다이어그램
비용
이 아키텍처의 대부분의 리소스는 기본 또는 사용량 가격 책정 계층을 사용합니다. 사용량 가격 책정은 사용량을 기준으로 책정됩니다. 즉, 사용한 만큼만 비용을 지불하면 됩니다. 이 문서를 완료하기 위해 리소스는 요금을 생성하지만 최소입니다. 문서를 완료하면 리소스를 삭제하여 요금 발생을 중지할 수 있습니다.
샘플 리포지토리의 비용에 대해 자세히 알아봅니다.
필수 조건
이 기사를 완료하는 데 필요한 모든 종속성을 갖춘 개발 컨테이너 환경을 사용할 수 있습니다. GitHub Codespaces(브라우저)에서 개발 컨테이너를 실행하거나 Visual Studio Code를 사용하여 로컬로 실행할 수 있습니다.
이 문서를 사용하려면 다음 필수 구성 요소가 필요합니다.
- Codespaces(권장)
- Visual Studio Code
- Azure 구독 - 무료로 생성하기
- Azure 계정 권한 - Azure 계정에는 Microsoft.Authorization/roleAssignments/write 권한이 있어야 하며, 사용자 액세스 관리자 또는 소유자와 같이 지정된 역할을 가지고 있어야 합니다.
- GitHub 계정
개방형 개발 환경
다음 지침을 사용하여 이 문서를 완료하는 데 필요한 모든 종속성을 포함하는 미리 구성된 개발 환경을 배포합니다.
- GitHub Codespaces (권장)
- Visual Studio Code
GitHub Codespaces는 GitHub에서 관리하는 개발 컨테이너를 실행하며, 사용자 인터페이스로 웹용 Visual Studio Code를 사용합니다. 가장 간단한 개발 환경을 위해서는 GitHub Codespaces를 사용하여 이 문서를 완료하는 데 필요한 올바른 개발자 도구와 종속성을 미리 설치합니다.
중요
모든 GitHub 계정은 두 개의 핵심 인스턴스를 사용하여 매월 최대 60시간 동안 Codespaces를 무료로 사용할 수 있습니다. 자세한 내용은 GitHub Codespaces의 월별 포함 스토리지 및 코어 시간을 참조하세요.
GitHub 리포지토리의
main브랜치에서 새 GitHub Codespace를 만드는 프로세스를 시작합니다.다음 단추를 마우스 오른쪽 단추로 클릭하고 개발 환경과 설명서를 동시에 사용할 수 있도록 새 창에서 링크 열기를 선택합니다.
GitHub Codespaces에서 열기
코드스페이스 만들기 페이지에서 코드스페이스 구성 설정을 검토한 다음, 새 코드스페이스 만들기를 선택합니다.
새 코드스페이스를 만들기 전에 확인 화면의 스크린샷
codespace가 생성될 때까지 기다립니다. 이 프로세스에는 몇 분 정도 걸릴 수 있습니다.
화면 하단의 터미널에서 Azure 개발자 CLI를 사용하여 Azure에 로그인합니다.
azd auth login --use-device-code터미널에서 코드를 복사한 다음 브라우저에 붙여넣습니다. 지침에 따라 Azure 계정으로 인증합니다.
이 문서의 나머지 작업은 이 개발 컨테이너의 컨텍스트에서 수행됩니다.
배포 및 실행
샘플 리포지토리에는 Azure에 채팅 앱을 배포하는 데 필요한 모든 코드와 구성 파일이 포함되어 있습니다. 다음 단계에서는 샘플을 Azure에 배포하는 과정을 안내합니다.
Azure에 채팅 앱 배포
중요하다
이 섹션에서 만들어진 Azure 리소스는 주로 Azure AI 검색 리소스에서 즉각적인 비용이 발생합니다. 이러한 리소스는 명령이 완전히 실행되기 전에 중단하더라도 비용이 발생할 수 있습니다.
다음 Azure 개발자 CLI 명령을 실행하여 Azure 리소스를 프로비전하고 소스 코드를 배포합니다.
azd up환경 이름을 입력하라는 메시지가 표시되면 짧고 소문자로 유지합니다. 예를 들어
myenv. 리소스 그룹 이름의 일부로 사용됩니다.메시지가 표시될 때, 리소스를 생성할 구독을 선택하십시오.
처음 위치를 선택하라는 메시지가 표시되면 가까운 위치를 선택합니다. 이 위치는 호스팅을 포함한 대부분의 리소스에 사용됩니다.
OpenAI 모델의 위치를 묻는 메시지가 표시되면 가까운 위치를 선택합니다. 첫 번째 위치와 동일한 위치를 사용할 수 있는 경우 해당 위치를 선택합니다.
앱이 배포될 때까지 기다립니다. 배포를 완료하는 데 5~10분이 걸릴 수 있습니다.
애플리케이션이 성공적으로 배포되면 터미널에 URL이 표시됩니다.
Deploying service web으로 표시된 URL을 선택하여 브라우저에서 채팅 애플리케이션을 엽니다.브라우저에서 채팅 앱의 스크린샷으로, 여러 채팅 입력 제안과 질문을 입력할 수 있는 채팅 텍스트 상자를 보여줍니다.
채팅 앱을 사용하여 markdown 파일에서 답변 가져오기
채팅 앱은 마크다운 파일 카탈로그에서 임대 정보를 미리 로드합니다. 채팅 앱을 사용하여 임대 프로세스에 대한 질문을 할 수 있습니다. 다음 단계에서는 채팅 앱을 사용하는 과정을 안내합니다.
브라우저에서 페이지 아래쪽의 텍스트 상자에 환불 정책이란?을 선택하거나 입력합니다.
채팅 앱의 첫 번째 답변 스크린샷.
답변에서 사고 과정을 표시를 선택합니다.
"채팅 앱의 첫 번째 응답 스크린샷이며, '생각 과정'이 빨간색 상자로 강조되어 있습니다."
오른쪽 창에서 탭을 사용하여 답변이 생성된 방법을 이해합니다.
탭 설명 사고 과정 이는 채팅의 상호 작용에 대한 스크립트입니다. 시스템 프롬프트( content)와 사용자 질문(content)을 볼 수 있습니다.지원 내용 여기에는 사용자의 질문에 답변하기 위한 정보와 원본 재질이 포함됩니다. 원본 자료 인용 수는 개발자 설정나와 있습니다. 기본값은 3입니다. 인용 인용이 포함된 원래 페이지가 표시됩니다. 완료되면 탭 위에 X가 표시된 숨기기 단추를 선택합니다.
채팅 앱 설정을 사용하여 응답 동작 변경
채팅 앱의 인텔리전스는 OpenAI 모델 및 모델과 상호 작용하는 데 사용되는 설정에 따라 결정됩니다.
채팅 개발자 설정의 스크린샷입니다.
| 설정 | 설명 |
|---|---|
| 프롬프트 템플릿 재정의 | 이는 답변을 생성하는 데 사용되는 프롬프트입니다. |
| 이 많은 검색 결과를 검색합니다. | 답변을 생성하는 데 사용되는 검색 결과의 수입니다. 인용의 사고 과정 및 지원 콘텐츠 탭에서 이러한 출처를 확인할 수 있습니다. |
| 범주 제외 | 검색 결과에서 제외되는 문서 범주입니다. |
| 검색을 위해 의미 순위매기기 사용 | 이는 머신 러닝을 사용하여 검색 결과의 관련성을 높이는 Azure AI 검색의 기능입니다. |
| 전체 문서 대신 쿼리 컨텍스트 요약을 사용합니다. |
Use semantic ranker와 Use query-contextual summaries를 모두 선택하면 LLM은 순위가 가장 높은 문서의 모든 구절 대신 주요 구절에서 추출된 캡션을 사용합니다. |
| 후속 질문 제안 | 채팅 앱에서 답변에 따라 후속 질문을 제안하도록 합니다. |
| 검색 모드 | 벡터 + 텍스트는 검색 결과가 문서의 텍스트와 문서의 포함을 기반으로 한다는 의미입니다. 벡터는 검색 결과가 문서의 임베딩을 기반으로 한다는 의미입니다. 텍스트는 검색 결과가 문서의 텍스트를 기반으로 한다는 의미입니다. |
| 채팅 완료 응답 스트리밍 | 전체 응답을 기다리는 대신, 즉시 응답을 스트리밍합니다. |
다음 단계에서는 설정을 변경하는 과정을 안내합니다.
브라우저에서 개발자 설정 탭을 선택합니다.
확인란 대신 쿼리 컨텍스트 요약 사용을 선택하고 동일한 질문을 다시 요청합니다.
What happens if the rental doesn't fit the description?채팅은 다음과 같은 보다 간결한 답변으로 반환되었습니다.
리소스 정리
Azure 리소스 정리
이 문서에서 만들어진 Azure 리소스는 Azure 구독에 요금이 청구됩니다. 앞으로 이러한 리소스가 필요하지 않을 것으로 예상되는 경우 추가 요금이 발생하지 않도록 삭제합니다.
다음 Azure 개발자 CLI 명령을 실행하여 Azure 리소스를 삭제하고 소스 코드를 제거합니다.
azd down --purge
GitHub Codespaces 정리
- GitHub Codespaces
- Visual Studio Code
GitHub Codespaces 환경을 삭제하면 계정에 할당된 코어 시간당 무료 사용 시간을 최대한 활용할 수 있습니다.
중요
GitHub 계정의 권한에 대한 자세한 내용은 GitHub Codespaces 월별 포함된 스토리지 및 코어 시간을 참조하세요.
GitHub Codespaces 대시보드로그인합니다.
현재 실행 중인 Codespaces를 GitHub 리포지토리에서 찾아보세요.
실행 중인 Codespaces의 상태 및 템플릿을 포함한 스크린샷.
codespace에 대한 상황에 맞는 메뉴를 열고 삭제를 선택합니다.
삭제 옵션이 강조된 단일 코드스페이스의 상황 메뉴 스크린샷
도움말 보기
이 기본 저장소는 문제 해결 정보를 제공합니다.
문제가 해결되지 않으면 리포지토리의 Issues에 문제를 기록하세요.
다음 단계
- 이 문서에 사용된 샘플의 소스 코드 가져오기
- Azure OpenAI를 사용하여 채팅 앱을 빌드 솔루션 아키텍처 모범 사례
- Azure AI 검색을 활용한 생성 AI 애플리케이션의 접근 제어
- Azure API Management를 사용하여 엔터프라이즈 준비된 OpenAI 솔루션을 구축하세요.
- 하이브리드 검색 및 순위 지정 기능으로 벡터 검색을 능가하는 성능
- 이 템플릿에서 AZD를 사용하는 방법에 대해 자세히 알아봅니다.