프롬프트를 사용해 영수증 읽기 2 - Home 화면

MS Learn에서 제공하는 샘플 솔루션 파일을 예로 알아봅니다.

 

샘플 솔루션 파일의 앱은

캔버스 앱를 사용해 프롬프트와 Dataverse 테이블을 사용하여 영수증에서 정보를 추출하는 앱으로 

단순히 “영수증 OCR 앱”을 만드는 예제가 아니라, Power Apps + AI Builder Prompt + Dataverse를 연결해서 사진 속 영수증을 AI가 이해하고, 정해진 구조의 데이터로 바꾼 다음 저장하는 앱을 보여주는 예제입니다.

 

이 앱이 어떻게 제작되었고 동작하는지 소스(Power fx)를 리뷰해 봅니다.

---

앱의 스크린 구성

Receipt Reader 앱은 일반적인 Canvas 앱 구조를 따르면서, 

다음과 같이 3개의 스크린(Screen)으로 구성되어 있습니다.

 

• Home
• Update Table
• Table

---

Home 스크린 소스 리뷰

Home 스크린의 기능은 Home은 AI에게 영수증을 전달하는 시작점으로

카메라를 선택하고 → 영수증 이미지를 AI Prompt에 전달하고 → AI 결과를 변수에 저장한 후 → 다음 화면으로 이동

* Home 화면에서는 아직 Dataverse에 저장하지 않습니다. 

스크린 이미지

Home 스크린의 소스

*카메라 아이콘 버튼 기능에 대해 (화면 가운데) Set(     image_receipt,     'Receipt reader'.Predict(Camera1.Stream) ); Navigate(     'Update Table',     ScreenTransition.UnCoverRight ) 위 코드에서  Camera1.Photo가 아니라 **Camera1.Stream**을 사용하고 있다는 것이며, Camera 컨트롤은 현재 카메라 영상을 Stream으로 제공합니다. 사용자가 화면에서 보는 카메라 영상이 바로 이 Stream이며, 현재 Camera Stream을 바로 AI Prompt에 전달하는 구조입니다. 사용자가 카메라 이미지 버튼을 클릭하면, 'Receipt reader'.Predict(Camera1.Stream) 'Receipt reader라는 Prompt를 실행하고, Camera1.Stream을 입력 이미지로 전달해라' 입니다. (= AI에게 영수증 이미지를 보내고, 영수증을 분석해 달라고 요청한다.) 여기서 'Receipt reader'는 일반적인 Power Apps 컨트롤이 아닌 AI Builder에서 만들어진 Prompt입니다. Predict()가 그 Prompt를 실행하는 역할을 합니다. * Predict()의 결과는 어디로 가나? Set(     image_receipt,     'Receipt reader'.Predict(Camera1.Stream) ) Set()은 전역 변수(Global Variable)를 만드는 함수로 'Receipt reader'.Predict(Camera1.Stream)                     │                     │ AI 분석 결과                     ▼              image_receipt는 AI가 영수증을 분석한 결과를 담아놓는 변수입니다. 수식만 보면 "영수증 이미지"를 저장한 것처럼 보이지만, 실제론 Camera 이미지 자체가 아니라 Predict()의 반환 결과입니다. 현재 카메라 화면을 AI에게 보내서 영수증을 분석하는 버튼으로 기능적으로는 SCAN / ANALYZE RECEIPT버튼에 가깝습니다. 데이터의 흐름은 다음과 같습니다. Camera1.Stream       │       ▼ Receipt reader       │       ▼ AI 분석 결과       │       ▼ image_receipt AI 호출 바로 다음에는 Update Table 화면(Screen)으로 이동(Navigate)합니다. Navigate(     'Update Table',     ScreenTransition.UnCoverRight ) ScreenTransition.UnCoverRight는 화면 전환 애니메이션(오른쪽에서 새로운 화면이 펼쳐지면서)입니다. 다시 정리하면 카메라 이미지 버튼을 클릭하면, 다음과 같은 프로세스가 진행됩니다.           Circle1              │           OnSelect              │              ▼    Camera1.Stream 가져오기              │              ▼    Receipt reader.Predict()              │              ▼        AI가 영수증 분석              │              ▼     image_receipt 변수에 저장              │              ▼       Update Table 이동 * 카메라  Select Box  기능에 대해 (헤더 아래) Items = Camera1.AvailableDevices 는 Power Apss에게 "현재 사용할 수 있는 카메라 장치를 가져와라"고 합니다. Items.Value = Name Name에 사용자의 카메라 이름을 가져옵니다. Camera = Dropdown1.Selected.Id Dropdown에서 사용자가 선택한 카메라의 ID를 Camera1의 Camera 속성으로 설정합니다. 카메라 선택부터  AI 분석까지 정리하면 다음과 같은 프로세스로 진행됩니다. ① Camera 장치 목록         │         ▼ Camera1.AvailableDevices         │         ▼ ② Dropdown1         │         │ 사용자 선택         ▼ Dropdown1.Selected.Id         │         ▼ ③ Camera1.Camera         │         ▼ ④ Camera1.Stream         │         ▼ ⑤ Receipt reader.Predict()         │         ▼ ⑥ image_receipt * 목록 이미지 버튼 기능에 대해 (헤더 왼쪽 위치) Icon3 Icon = Icon.DetailList OnSelect = Navigate(Table) 이건 영수증 목록/데이터를 보는 화면으로 이동하는 버튼으로 버튼을 클릭하면 다음과 같은 프로세스로 진행됩니다. Icon3   │   ▼ Navigate(Table)   │   ▼ Table 화면