Duet AI를 사용하여 기존 애플리케이션을 탐색하고 개선하는 방법

1. 개요

이 Codelab에서는 기존 API 백엔드를 기반으로 Duet AI를 사용하여 클라이언트 애플리케이션을 빌드하는 방법을 알아봅니다.

학습할 내용

이 실습에서는 기존 애플리케이션에서 Duet AI를 사용하는 방법을 설명합니다. 이 실습에서는 다음 작업을 진행하는 방법을 학습합니다.

• AI/ML 이미지 처리 점프 스타트 솔루션 배포하기
• Duet AI를 사용하여 API 애플리케이션 살펴보기
• Duet AI를 사용하여 API 애플리케이션용 클라이언트 만들기

설정 - 새 프로젝트 만들기

조직 정책에 따라 이 솔루션을 올바르게 배포하지 못할 수도 있습니다.

권장사항: 회사 또는 학교 계정이 아닌 모든 권한이 있는 계정(예: 개인 계정)을 사용하세요.

참고: 모든 권한이 있는 프로젝트를 최근에 만들었고 해당 프로젝트에서 이미 Duet AI API를 사용 설정한 경우 해당 프로젝트를 계속 사용하고 이 단계를 건너뛰어도 됩니다. 예를 들어 최근에 다른 Duet AI Codelab을 완료했다면 이 단계를 건너뛰어도 됩니다.

1. Google Cloud 콘솔로 이동합니다.
2. 현재 프로젝트 드롭다운을 클릭합니다.
3. 새 프로젝트를 클릭합니다.
4. 프로젝트 이름을 추가하고 만들기를 클릭합니다.
   • 권장사항: Project name과 Project ID가 동일하도록 고유한 프로젝트 이름을 사용하세요.

2. 점프 스타트 솔루션 배포

점프 스타트 솔루션은 Google Cloud에서 사전 빌드된 솔루션 템플릿입니다. 이 실습에서는 점프 스타트 솔루션을 사용하여 Duet AI가 기존 애플리케이션을 개선하는 데 어떤 도움이 될 수 있는지 보여줍니다.

1. AI/ML 이미지 처리 점프 스타트 솔루션 세부정보 페이지로 이동합니다.
   • 햄버거 메뉴를 클릭합니다.
   • 제품 및 솔루션 하위 메뉴에서 점프 스타트 솔루션을 클릭합니다.
   • Cloud Functions의 AI/ML 이미지 처리를 클릭합니다.
2. 배포를 클릭합니다.
   • 프로젝트에 결제가 사용 설정되어 있지 않으면 결제를 사용 설정합니다.
   • 프로젝트 이름을 확인하고 계속을 클릭합니다.
   • 리전으로 us-central1 (Iowa)를 선택합니다.
   • 다른 값을 입력하라는 메시지가 표시되면 기본값을 수락합니다.
   • 배포를 클릭합니다.
   • 최대 15분 정도 걸릴 수 있습니다.
   • 변경할 필요는 없지만 점프 스타트 솔루션 배포는 자유롭게 살펴볼 수 있습니다.

문제 해결

1. 문제: Partial deployment.라는 오류가 표시되나요?
   • 해결 방법: 안타깝게도 배포를 삭제하고 다시 시작해야 할 수 있습니다. 배포 삭제라는 버튼이 있습니다. 해당 버튼을 클릭한 다음 점프 스타트 솔루션을 다시 배포합니다.

3. Duet AI 사용 설정

코드 편집 환경을 설정하고 Duet AI를 사용 설정합니다.

1. Cloud Shell 편집기로 이동합니다.
   • Google Cloud 콘솔로 돌아갑니다.
   • 검색창에 Cloud Shell Editor를 입력하고 드롭다운에서 Cloud Shell 편집기를 클릭합니다.
   • 기존 편집기를 사용하는 경우 새 편집기 사용해 보기를 클릭합니다.
     • 참고: 새 편집기 사용해 보기 버튼이 표시되지 않으면 이미 새 편집기를 사용 중일 수 있습니다. 기존 편집기는 작동하지만 보기가 약간 다르게 표시됩니다.
   • 새 창에서 열기 아이콘 을 클릭합니다.
2. 메시지가 나타나면 로그인하거나 계정을 승인합니다.
   • 설정에 따라 이 실습 중에 계정을 승인하라는 메시지가 여러 번 표시될 수 있습니다. 메시지가 표시되면 매번 승인을 선택합니다.
3. 그림과 같이 하단 상태 표시줄에서 Cloud Code - 로그인 버튼을 클릭합니다. 안내에 따라 플러그인을 승인합니다.
4. 메시지가 표시되면 Google Cloud 프로젝트 선택을 클릭한 후 사용 중인 프로젝트를 선택합니다.
5. Duet AI 사용 설정
   • Cloud Code 를 클릭합니다.
     • 참고: 화면 크기에 따라 한 단계 또는 두 단계를 거쳐야 할 수 있습니다.
   • 고객센터 섹션에서 설정 변경을 클릭합니다.
   • Duet AI: Enable을 입력합니다.
   • 체크박스를 선택합니다(아직 선택하지 않은 경우).
   • IDE를 새로고침합니다.
   • 이렇게 하면 Cloud Code에서 Duet AI가 사용 설정되고 IDE에 Duet AI 상태 표시줄이 나타납니다.
6. 오른쪽 하단에 있는 Duet AI 버튼을 클릭하고 올바른 Google Cloud 프로젝트를 선택합니다.
   • Duet AI has not been enabled for your selected project 오류가 표시되면 Duet AI API 사용 설정을 클릭합니다.
7. 아래 표시된 것처럼 왼쪽(프로젝트 이름이 표시됨)에 올바른 Google Cloud 프로젝트가 표시되고 오른쪽의 상태 표시줄에서 Duet AI가 사용 설정되어 있는지 확인합니다.

4. Cloud 함수 코드 다운로드

코드를 다운로드하고 Duet AI를 사용하여 점프 스타트 솔루션과 배포한 코드에 대해 자세히 알아보세요.

1. 다른 페이지로 이동한 경우 Cloud Code 를 클릭합니다.
2. Cloud Functions를 클릭합니다.
   • 프로젝트 선택 버튼이 표시되면 클릭하고 작업 중인 프로젝트를 선택합니다.
   • annotate-http 함수를 클릭합니다.
   • 새 작업공간에 다운로드 아이콘 을 클릭합니다.
3. 작업공간 이름으로 annotate-http-1을 사용하고 확인을 클릭합니다.
4. main.py 파일을 엽니다.
   • 탐색기 아이콘 을 클릭합니다.
   • main.py 파일을 클릭하여 엽니다.
5. Duet AI Chat 아이콘 을 클릭합니다.
   • 참고: 화면 크기에 따라 한 단계 또는 두 단계를 거쳐야 할 수 있습니다.
6. Duet AI에 질문해 보세요. 다음과 같은 프롬프트를 입력합니다.
   • What is a Jump Start Solution in Google Cloud?
   • Explain this code.

Duet AI Chat 재설정

프롬프트는 향후 프롬프트에 영향을 미칩니다. 예를 들어 프로젝트 ID 또는 리전에 오타를 입력하면 향후 프롬프트 및 대답에서도 해당 내용이 이어져 환경에 부정적인 영향을 미칠 수 있습니다. 오타를 입력했거나 다른 이유로 기록을 지우려면 휴지통 아이콘을 사용하여 채팅을 재설정할 수 있습니다.

5. 기존 Cloud 함수 엔드포인트 호출

코드를 살펴보고 점프 스타트 솔루션에서 배포한 엔드포인트를 호출합니다.

1. 프롬프트를 입력합니다.
   • 중요 다음 프롬프트의 my-project-with-duet을 프로젝트 ID로 바꿉니다.
   • The region is us-central1 and the project id is my-project-with-duet. Write a curl post for the /annotate-http/annotate Cloud Function endpoint that performs label detection on the default eiffel tower image.
   • 다음과 같은 curl 명령어가 포함된 대답이 표시됩니다.

     curl -X POST \
         -H "Authorization: Bearer $(gcloud auth print-access-token)" \
     ...
     

   • 다음 단계에서 사용하기 위해 이 curl 명령어를 복사합니다.
2. 새 터미널에서 명령어를 테스트합니다.
   • 햄버거 메뉴를 클릭합니다.
   • 터미널을 클릭합니다.
   • 새 터미널을 클릭합니다.
   • 이전 단계의 curl 명령어를 터미널에 붙여넣고 Enter 키를 눌러 명령어를 실행합니다.
   • 다음과 같이 시작하는 대답이 표시됩니다.

     {
         "labelAnnotations": [
         {
         "mid": "/m/0csby",
         "description": "Cloud",
         "score": 0.97885925,
         "topicality": 0.97885925,
     ...
     

3. (선택사항) 다음과 같이 Duet에 프롬프트를 입력하여 공개 인터넷의 다른 이미지로 이 작업을 수행합니다.
   • Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

문제 해결

비결정성 관련 참고사항: Duet AI 및 대규모 언어 모델(LLM)에 의해 구동되는 기타 제품은 비결정적입니다. 즉, 동일한 입력이 주어져도 출력이 달라질 수 있습니다. 단계를 완벽하게 따랐더라도 작동하는 명령어를 받지 못할 수 있습니다. 이 문제 해결 단계를 통해 그러한 문제를 해결할 수 있습니다.

생성된 curl 명령어는 다음과 같이 표시됩니다.

curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    -d '{
  "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg",
  "features": "LABEL_DETECTION"
}' \
    "https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate"

Duet AI는 에펠탑 이미지인 main.py 파일의 TEST_IMAGE를 사용합니다.

curl 명령어가 작동하지 않으면 다음 사항을 확인하세요.

1. 문제: URL 엔드포인트에 .a.run.app이 포함되어 있나요?
   • 해결 방법: Duet에서 Cloud Run에 배포한다고 판단할 수 있습니다. https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate에서 my-project-with-duet을 프로젝트 ID로 바꿔 올바른 Cloud Functions 엔드포인트를 가져오고 이를 curl 명령어에 사용합니다.
2. 문제: URL 엔드포인트에 my-project-with-duet이 포함되어 있나요?
   • 해결 방법: my-project-with-duet을 프로젝트 ID로 바꿉니다.
3. 문제: URL 엔드포인트에 us-central1이 누락되었나요?
   • 해결 방법: URL이 us-central1로 시작하는지 확인합니다(예: 프로젝트 ID가 포함된 https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate).
4. 문제: 사용된 프롬프트에 따라 생성된 엔드포인트가 cloudfunctions.net/annotate-http 또는 cloudfunctions.net/annotate처럼 표시되는 경우가 있습니다. URL 엔드포인트의 끝부분에 /annotate-http/annotate가 누락되었나요?
   • 해결 방법: URL 엔드포인트가 전체 API 애플리케이션 경로(cloudfunctions.net/annotate-http/annotate)로 끝나는지 확인합니다.
5. 문제: cURL 요청은 작동하지만 정보가 많지 않습니다. 요청에 기능이 포함되어 있나요?
   • 해결 방법: 이는 큰 문제가 아닙니다. 아무것도 변경하지 않고 계속 진행하면 나머지 실습이 계속 작동합니다. 더 많은 정보를 다시 얻고 싶다면 Duet에 cURL 요청에 기능을 추가해 달라고 요청하세요.
6. 문제: 답변이 잘못되었거나 코드별 컨텍스트가 부족한 것 같습니다. Cloud Shell 편집기 내에서 Duet AI Chat을 사용하고 있나요?
   • 해결 방법: Cloud Shell 편집기 내에서 Duet AI Chat을 사용하는 동안 main.py 파일을 열고 프롬프트와 관련된 코드를 강조 표시해 봅니다. Google Cloud 전반의 Duet AI 어시스턴트는 컨텍스트가 다르기 때문에 그에 따른 답변이 다릅니다.
7. 문제: 아직 대답이 적절하지 않습니다.
   • 해결 방법: Duet AI가 생성할 내용을 보다 구체적으로 지시하는 다른 프롬프트를 사용해 봅니다. my-project-with-duet을 프로젝트 ID로 바꿔야 합니다. 예를 들면 다음과 같습니다.

     Give me the curl command for:
     
     1- Cloud Function running in us-central1 and project my-project-with-duet
     2- HTTP POST to the following endpoint: /annotate-http/annotate endpoint
     3- JSON in the body: { "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg", "features": "LABEL_DETECTION" }
     

8. 문제: 모든 문제 해결 단계를 시도한 후에도 문제가 해결되지 않습니다.
   • 해결 방법: LLM의 비결정적인 특성으로 인해 Duet에서 작동하지 않는 대답을 생성했을 수 있습니다. 이 경우 위의 curl 명령어 예를 복사하고 터미널에서 실행해 보세요. my-project-with-duet을 프로젝트 ID로 바꿔야 합니다.

6. API용 웹 애플리케이션 클라이언트 만들기

Duet AI를 사용하여 점프 스타트 솔루션 Cloud 함수 엔드포인트를 호출하는 index.html 파일을 생성합니다. 그런 다음 index.html 파일을 Firebase 호스팅에 배포하여 실행 중인 코드를 확인합니다.

1. 클라이언트 측 코드를 생성합니다.
   • Duet AI 채팅 상자로 돌아가서 프롬프트를 입력합니다.
     • Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use the full url beginning with https. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
   • 대답에서 생성된 index.html 파일을 복사합니다.
     • 참고: 이 코드는 나중에 필요하므로 잃어버릴까 걱정될 경우 적당한 곳에 저장해 두세요.
   • main.py를 닫습니다.
2. 새 frontend 디렉터리를 만듭니다.
   • Duet AI에게 다음과 같이 질문할 수 있습니다.
     • What are the console commands to create and navigate to a new frontend directory?
   • mkdir frontend, cd frontend와 같은 결과가 표시됩니다.
   • Cloud Shell 터미널을 사용하여 아직 annotate-http-1 디렉터리에 있는지 확인하고 해당 명령어를 실행합니다.
     • cd ~/annotate-http-1
     • mkdir frontend
     • cd frontend
3. Cloud Shell 터미널에서 올바른 프로젝트에 로그인했는지 확인합니다.
   • Duet AI에게 다음과 같이 질문할 수 있습니다.
     • What is the gcloud command to set my project?
   • 다음과 같은 결과가 표시됩니다. gcloud config set project my-project-with-duet
     • 프로젝트 ID가 올바른지 확인한 후 Cloud Shell 터미널에서 명령어를 실행합니다.
4. Firebase를 사용 설정합니다.
   • 새 탭에서(현재 Cloud Shell 편집기는 열어두고) https://console.firebase.google.com/으로 이동합니다.
   • 프로젝트 추가를 클릭합니다.
   • 프로젝트 ID를 입력하고 드롭다운에 표시될 때까지 기다립니다.
   • 프로젝트 ID를 클릭합니다.
   • 계속을 클릭합니다.
   • 계획 확인을 클릭합니다.
   • 계속을 클릭합니다.
   • 이 프로젝트에 Google 애널리틱스 사용 설정을 선택 해제합니다.
     • Firebase는 Google 애널리틱스 사용을 권장하지만 이 애플리케이션에서는 사용하지 않습니다.
   • 계속을 클릭합니다.
   • 이 탭을 닫고 Cloud Shell 편집기로 돌아갑니다.
   • 참고: 이 단계는 이전에 Firebase를 사용한 적이 없는 사용자에게만 필요하지만, 모두가 동일한 경로를 따를 수 있습니다. 나중에 이 작업을 다시 수행하는 경우 이 단계를 건너뛰어도 됩니다.
5. Cloud Shell에서 Firebase에 로그인합니다.
   • Cloud Shell 편집기 터미널에서 firebase login --no-localhost 명령어를 실행합니다.
   • 제공된 URL로 이동합니다.
     • 예, 방금 이 명령어를 실행했습니다를 클릭합니다.
     • 예, 세션 ID입니다를 클릭합니다.
     • 복사를 클릭합니다.
   • Cloud Shell 편집기 터미널로 돌아갑니다.
   • 복사한 값을 터미널의 Enter authorization code: 위치에 붙여넣습니다.
   • Enter 키를 누릅니다.
6. Firebase 호스팅에 새 웹사이트를 배포합니다.
   • 새 Firebase 프로젝트를 초기화합니다.
     • Duet AI에게 다음과 같이 질문할 수 있습니다.
       • What are the commands to initialize and deploy a new firebase application?
     • 안내가 포함된 firebase init 및 firebase deploy 같은 결과가 표시됩니다.
     • 사용자의 선호에 따라 Duet AI가 추천하는 방법은 다양합니다. 다음은 구체적인 권장사항입니다.
       • firebase init
         • 아래쪽 화살표로 다음을 찾습니다. Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
           • Space 바를 누릅니다.
           • Enter 키를 누릅니다.
         • 아래쪽 화살표로 다음을 찾습니다. Use an existing project
           • Enter 키를 누릅니다.
         • 프로젝트 목록이 표시되면 아래쪽 화살표로 현재 사용 중인 프로젝트를 찾습니다.
           • Enter 키를 누릅니다.
         • 다음과 같은 요청이 표시되면 아래 단계를 따릅니다. Please input the ID of the Google Cloud Project you would like to add Firebase:
           • 프로젝트의 프로젝트 ID를 입력합니다.
           • Enter 키를 누릅니다.
         • 나머지 프롬프트의 경우 Enter 키를 누릅니다.
       • firebase deploy
7. Cloud Functions API 엔드포인트를 호출하여 애플리케이션을 다시 배포합니다.
   • 이전 명령어는 앞서 만든 frontend 디렉터리 내에 index.html 파일이 있는 public 디렉터리를 만듭니다. ~/annotate-http-1/frontend/public/index.html 파일에서 다음 몇 가지 사항을 변경해야 합니다.
   • index.html 파일을 엽니다.
     • 탐색기 아이콘 을 클릭합니다.
     • frontend 폴더를 클릭합니다.
     • public 폴더를 클릭합니다.
     • index.html 파일을 클릭합니다.
   • 기존 index.html 파일을 비웁니다.
   • 앞서 복사한 코드를 index.html 파일에 붙여넣습니다.
   • firebase deploy를 실행하여 새 애플리케이션을 배포합니다.
   • Firebase 호스팅 URL로 이동하여 작동하는지 확인합니다.
     • 참고: 업데이트를 확인하려면 웹사이트를 강제로 새로고침해야 할 수 있습니다.

문제 해결

index.html 파일은 다음과 같이 표시됩니다.

<!DOCTYPE html>
<html>
<head>
<title>Vision API Annotate Image</title>
</head>
<body>
<h1>Vision API Annotate Image</h1>
<form id="annotate-form" action="https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate" method="POST">
    <label for="image-uri">Image URI:</label>
    <input type="text" id="image-uri" name="image_uri" value="gs://cloud-samples-data/vision/eiffel_tower.jpg">
    <br>
    <label for="features">Features:</label>
    <select id="features" name="features">
    <option value="LABEL_DETECTION">LABEL_DETECTION</option>
    <option value="TEXT_DETECTION">TEXT_DETECTION</option>
    <option value="IMAGE_PROPERTIES">IMAGE_PROPERTIES</option>
    </select>
    <br>
    <input type="submit" value="Annotate">
</form>

<div id="result"></div>

<script>
    const form = document.getElementById('annotate-form');

    form.addEventListener('submit', (event) => {
    event.preventDefault();

    const imageUri = document.getElementById('image-uri').value;
    const features = document.getElementById('features').value;

    const data = {
        image_uri: imageUri,
        features: features,
    };

    fetch('https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
        .then((response) => response.json())
        .then((result) => {
        const resultElement = document.getElementById('result');
        resultElement.innerHTML = JSON.stringify(result, null, 2);
        });
    });
</script>
</body>
</html>

웹사이트가 작동하지 않으면 다음 사항을 확인하세요.

1. 문제: 404 (Not Found) fetch 메서드에 사용되는 URL에 my-project-with-duet이 포함되어 있나요?
   • 해결 방법: my-project-with-duet을 프로젝트 ID로 바꿉니다.
2. 문제: 404 (Not Found) fetch 메서드에 사용된 URL에 전체 URL이 누락되어 있나요?
   • 해결 방법: fetch 메서드에 전체 URL을 포함합니다. 예를 들면 다음과 같이 표시됩니다. https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
3. 문제: 아직 대답이 적절하지 않습니다.
   • 해결 방법: Duet AI가 생성할 내용을 보다 구체적으로 지시하는 다른 프롬프트를 사용해 봅니다. my-project-with-duet을 프로젝트 ID로 바꿔야 합니다. 예를 들면 다음과 같습니다.
     • Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
4. 문제: 사이트가 배포되었는데 작동하지 않나요?
   • 해결 방법: LLM의 비결정적인 특성으로 인해 Duet에서 작동하지 않는 대답을 생성했을 수 있습니다. 이 경우 위의 index.html 예시를 복사하고 firebase deploy를 사용하여 다시 배포해 보세요. my-project-with-duet을 프로젝트 ID로 바꿔야 합니다.

7. (선택사항) 탐색 분석 열기

1. Duet AI와 편집기 내 어시스턴트를 사용하여 애플리케이션에 CSS 스타일을 추가하고 완료되면 애플리케이션을 다시 배포하세요. 아이디어를 얻고 싶다면 다음 예시 프롬프트를 사용해 보세요.
   • Make this index.html file use material design.
2. 기타 제안사항은 다음과 같습니다.
   • 생성된 웹사이트는 모든 공개 http 이미지와 호환되어야 합니다. Duet을 사용하여 페이지에 이미지를 표시합니다.

8. (선택사항) 프로젝트 삭제

오늘 만든 리소스에 요금이 청구되지 않도록 하려면 Duet에 문의합니다.

1. 프롬프트를 입력합니다.
   • How can I delete my project?
   • 다음과 같은 결과가 표시됩니다. gcloud projects delete my-project-with-duet
   • 중요 이전 명령어의 my-project-with-duet을 프로젝트 ID로 바꿉니다.
2. gcloud projects delete 명령어를 실행하여 오늘 만든 모든 리소스를 삭제합니다.