serverless genai food analyzer app
1.0.0
แอปวิเคราะห์อาหาร เป็นเว็บแอปโภชนาการ GenAI ส่วนตัวสำหรับการช็อปปิ้งและทำอาหารตามสูตรของคุณ ที่สร้างด้วยสถาปัตยกรรมแบบไร้เซิร์ฟเวอร์และความสามารถด้าน AI เชิงสร้างสรรค์ สร้างขึ้นครั้งแรกในฐานะผู้ชนะ AWS Hackathon France 2024 จากนั้นเปิดตัวเป็นนิทรรศการบูธที่ AWS Summit Paris 2024
แบ็กเอนด์ของแอปสร้างขึ้นโดยใช้บริการของ AWS เช่น:
แอปได้รับการออกแบบให้มีโค้ดน้อยที่สุด สามารถขยายได้ ปรับขนาดได้ และคุ้มต้นทุน ใช้ Lazy Loading เพื่อลดต้นทุนและรับประกันประสบการณ์ผู้ใช้ที่ดีที่สุด
เราได้พัฒนานิทรรศการนี้เพื่อสร้างแอปพลิเคชันแบบไร้เซิร์ฟเวอร์เชิงโต้ตอบโดยใช้บริการ AI เชิงสร้างสรรค์
ข้อมูลผลิตภัณฑ์ส่วนบุคคล : อยากรู้ว่ามีอะไรอยู่ในผลิตภัณฑ์และเหมาะกับคุณหรือไม่? เพียงสแกนบาร์โค้ดด้วยแอปเพื่อดูรายการส่วนผสม/สารก่อภูมิแพ้ที่อธิบายไว้ และสรุปเฉพาะบุคคลตามความต้องการของคุณ
เครื่องสร้างสูตรอาหารเฉพาะบุคคล : ถ่ายภาพส่วนผสมในตู้เย็นของคุณ แล้วแอปจะสร้างสูตรอาหารตามความต้องการของคุณโดยใช้ส่วนผสมเหล่านั้น
สถาปัตยกรรมของแอปพลิเคชันสามารถแบ่งออกเป็น 4 ช่วงตึก:
การนำไปปฏิบัติ : การใช้ AWS Lambda สำหรับตรรกะฝั่งเซิร์ฟเวอร์ Amazon Bedrock เป็นแพลตฟอร์มการสร้างปัญญาประดิษฐ์แบบเจนเนอเรชั่น (GenAI) Anthropic Claude เป็นโมเดลภาษาขนาดใหญ่ (LLM) และ Stable Diffusion XL จาก StabilityAI เป็นโมเดลการแพร่กระจายสำหรับการสร้างภาพ
การพัฒนาโมเดล AI : การเลือกโมเดล LLM มีผลกระทบต่อคุณภาพการตอบสนองและเวลาแฝง ท้ายที่สุดแล้ว เราเลือก Anthropic Claude 3 Haiku เป็นอัตราส่วนที่ดีระหว่างเวลาแฝงและคุณภาพ
รูปภาพที่สร้างโดย AI : การแจ้งรูปภาพนั้นละเอียดอ่อนมาก และเป็นความท้าทายในการสร้างภาพที่เน้นคุณสมบัติทางโภชนาการของผลิตภัณฑ์อย่างแท้จริง ในการสร้างพรอมต์ เราใช้ LLM แรกเพื่อสร้างพรอมต์ตามคุณสมบัติทางโภชนาการของผลิตภัณฑ์ เทคนิคนี้คล้ายกับการสืบค้นฐานข้อมูลเวกเตอร์ด้วยตนเอง การใช้วิศวกรรมพร้อมท์แบบหลายช็อตยังช่วยได้มากในการปรับปรุงคุณภาพของพร้อมต์
กลยุทธ์ : “อย่าสร้างกงล้อใหม่”
การดำเนินการ : เครื่องสแกนบาร์โค้ดมีมานานแล้ว เราเลือกไลบรารีโอเพ่นซอร์สที่เข้ากันได้กับสแต็กของเรา ด้วยข้อจำกัดด้านเวลา เราจึงไม่ได้ใช้เวลามากนักในการเปรียบเทียบห้องสมุด โดยมุ่งเน้นไปที่การมีต้นแบบที่ใช้งานได้แทนที่จะค้นหาต้นแบบที่สมบูรณ์แบบ "ความสมบูรณ์แบบเป็นศัตรูของความดี"
กลยุทธ์ : รับทราบถึงความหลากหลายของความชอบของผู้ใช้และความต้องการด้านอาหาร แอปของเราได้รวมเอาคุณลักษณะส่วนบุคคลที่แข็งแกร่งไว้ด้วย นอกเหนือจากการให้ข้อมูลดิบแล้ว แอปนี้ยังมีจุดมุ่งหมายเพื่อให้ความรู้แก่ผู้ใช้เกี่ยวกับผลกระทบทางโภชนาการที่พวกเขาเลือก
การนำไปปฏิบัติ : ผู้ใช้รู้สึกถึงความเป็นเจ้าของและการเชื่อมต่อ เนื่องจากแอปปรับแต่งข้อมูลเชิงลึกให้สอดคล้องกับเป้าหมายด้านสุขภาพและข้อจำกัดด้านอาหารของแต่ละบุคคล การผสมผสานเนื้อหาที่กระชับและให้ข้อมูลภายในแอปทำให้ผู้ใช้เข้าใจถึงความสำคัญของส่วนประกอบทางโภชนาการต่างๆ ด้านการศึกษานี้เปลี่ยนแอปให้เป็นเครื่องมือการเรียนรู้ ซึ่งส่งเสริมความสัมพันธ์ที่ลึกซึ้งยิ่งขึ้นกับผู้ใช้ที่ต้องการเพิ่มพูนความรู้ด้านโภชนาการ
กลยุทธ์ : เพื่อดึงดูดความสนใจของผู้ใช้และสื่อสารข้อมูลโภชนาการที่สำคัญอย่างมีประสิทธิภาพ แอปของเราใช้รูปภาพที่สร้างโดย AI
การนำไปปฏิบัติ : Amazon Bedrock มอบประสบการณ์นักพัฒนาที่พร้อมใช้งานทันทีในการสร้างการนำเสนอผลิตภัณฑ์ที่สแกนให้สะดุดตาสะดุดตา ตัวอย่างเช่น หากผลิตภัณฑ์มีน้ำตาลมากเกินไป รูปภาพ AI จะล้อมรอบผลิตภัณฑ์ด้วยการแสดงภาพน้ำตาล ซึ่งทำหน้าที่เป็นสัญญาณภาพที่น่าสนใจและน่าจดจำ
กลยุทธ์ : แยกส่วนผสมออกจากภาพ ใช้ได้ผลดีกับผักและผลไม้
การนำไปปฏิบัติ : เราใช้ Anthropic Claude 3 Sonnet บน Amazon Bedrock ที่มีความสามารถในการมองเห็นเพื่อแยกเฉพาะองค์ประกอบอาหารออกจากภาพ ซึ่งช่วยให้เราสามารถมุ่งความสนใจไปที่องค์ประกอบอาหารโดยไม่สนใจพื้นหลังหรือองค์ประกอบอื่นๆ ในภาพได้ Claude 3 เป็นโมเดลหลายรูปแบบที่สามารถรองรับทั้งข้อความและรูปภาพ ผลลัพธ์คือรายการส่วนผสมที่มีอยู่ในภาพ
วิศวกรรมพร้อมท์ : เพื่อใช้ประโยชน์จากศักยภาพสูงสุดของแบบจำลอง เราใช้พร้อมท์ของระบบ ข้อความแจ้งของระบบเป็นวิธีการให้บริบท คำแนะนำ และแนวทางแก่ Claude ก่อนที่จะนำเสนอด้วยคำถามหรืองาน ด้วยการใช้พรอมต์ของระบบ คุณสามารถกำหนดขั้นตอนสำหรับการสนทนา โดยระบุบทบาทของ Claude บุคลิกภาพ น้ำเสียง หรือข้อมูลที่เกี่ยวข้องอื่น ๆ ที่จะช่วยให้เข้าใจและตอบสนองต่อความคิดเห็นของผู้ใช้ได้ดียิ่งขึ้น
system_prompt = "You have perfect vision and pay great attention to ingredients in each picture, you are very good at detecting food ingredients on images" 
กลยุทธ์ : สร้าง 3 สูตรจากส่วนผสมที่ตรงกันในภาพ:
การนำไปปฏิบัติ : เราใช้ Claude 3 Sonnet เพื่อสร้างสูตรทั้ง 3 สูตร แต่ละสูตรมีข้อมูล JSON ต่อไปนี้
{
"recipe_title" : " Succulent Grilled Cheese Sandwich " ,
"description" : " A classic comforting and flavorful dish, perfect for a quick meal " ,
"difficulty" : " easy " ,
"ingredients" : [ " bread " , " cheese " , " butter " ],
"additional_ingredients" : [ " ham " , " tomato " ],
"preparation_time" : 5 ,
"cooking_time" : 6
}
กลยุทธ์ : สร้างสูตรทีละขั้นตอนเพื่อให้ผู้ใช้ปฏิบัติตาม
การนำไปปฏิบัติ : เราใช้ Anthropic Claude 3 Haiku บน Amazon Bedrock เพื่อสร้างสูตรทีละขั้นตอน ขั้นตอนต่างๆ จะถูกสตรีมไปยังผู้ใช้เพื่อลดเวลาในการตอบสนอง เราใช้ประโยชน์จากการสตรีม lambda URL วิธีการนี้ช่วยให้เข้าถึงเนื้อหาข้อความได้ราบรื่นยิ่งขึ้น ปรับปรุงประสบการณ์ผู้ใช้และการโต้ตอบ
รูปแบบผลลัพธ์เป็นไฟล์ Markdown เพื่อความสะดวกในการแสดงสูตรอาหารบนเว็บไซต์ นอกจากนี้ยังช่วยลดความยุ่งยากในการแยกวิเคราะห์สูตรโดยส่วนหน้าเมื่อใช้โหมดสตรีมมิ่ง
การเลือกโมเดล AI ที่เหมาะสม
ความท้าทาย : การเลือกโมเดลภาษา (LM) มีอิทธิพลอย่างมากต่อทั้งเวลาแฝงในการตอบสนองและคุณภาพ ซึ่งถือเป็นจุดตัดสินใจที่สำคัญ
วิธีแก้ไข : หลังจากการประเมินโมเดลต่างๆ อย่างครอบคลุม เราได้เลือกโมเดล Anthropic Claude ต่อไปนี้สำหรับส่วนประกอบต่างๆ ภายในแอป:
ใช้ Lazy Loading เพื่อลดต้นทุน/แบนด์วิธ
ความท้าทาย : Generative AI มีราคาแพงทั้งในด้านราคาและแบนด์วิธ เราต้องการที่จะประหยัดและมีประสิทธิภาพเมื่อจัดงานในกิจกรรมที่อัดแน่น
วิธีแก้ไข : การใช้ Lazy Loading โดยที่คีย์เป็นแฮชของพรอมต์ช่วยให้เราลดต้นทุนและให้การตอบสนองเร็วขึ้น
วิศวกรรมพร้อมท์สำหรับการสร้างภาพ AI
ความท้าทาย : การสร้างพรอมต์สำหรับการสร้างภาพ AI ที่เน้นคุณสมบัติทางโภชนาการอย่างมีประสิทธิภาพถือเป็นความท้าทายที่ละเอียดอ่อน
วิธีแก้ไข : ด้วยการใช้ประโยชน์จากแนวทางสองขั้นตอน เราใช้ LLM แรกเพื่อสร้างการแจ้งเตือนตามคุณสมบัติทางโภชนาการของผลิตภัณฑ์ เทคนิคการสืบค้นด้วยตนเองนี้ (คล้ายกับกระบวนการสืบค้นด้วยตนเองสำหรับฐานข้อมูลเวกเตอร์) ได้รับการเสริมด้วยการผสมผสานการแจ้งแบบหลายช็อต วิธีการนี้ช่วยปรับปรุงคุณภาพและความเกี่ยวข้องของรูปภาพที่สร้างขึ้นได้อย่างมาก ทำให้มั่นใจได้ว่าผู้ใช้จะได้รับการนำเสนอคุณลักษณะของผลิตภัณฑ์ที่ดึงดูดสายตา
ความซับซ้อนในการปรับแต่งส่วนบุคคลของผู้ใช้
ความท้าทาย : การบูรณาการความต้องการและข้อจำกัดด้านอาหารส่วนบุคคลเข้ากับแบบจำลองทำให้เกิดความซับซ้อน
วิธีแก้ไข : เพื่อเพิ่มความเข้าใจของ LLM เราได้รวมส่วนหัวแบบไดนามิกไว้ในข้อความแจ้งของเราซึ่งมีข้อมูลโรคภูมิแพ้และอาหารเฉพาะบุคคล วิธีการนี้ช่วยปรับปรุงความแม่นยำและความเกี่ยวข้องของการตอบสนองของ LLM ได้อย่างมาก ทำให้มั่นใจได้ถึงประสบการณ์ที่ปรับให้เหมาะกับผู้ใช้ ข้อความแจ้งเฉพาะบุคคลกลายเป็นรากฐานสำคัญในการส่งข้อมูลที่แม่นยำและเกี่ยวข้องตามความต้องการส่วนบุคคล
รองรับหลายภาษา
ความท้าทาย : นำเสนอใบสมัครเป็นหลายภาษา
วิธีแก้ไข : ใช้พร้อมท์เดียวกัน แต่ LLM ได้รับคำสั่งให้สร้างเอาต์พุตในภาษาเฉพาะ เพื่อรองรับการตั้งค่าภาษาของผู้ใช้ (อังกฤษ/ฝรั่งเศส)
URL ของ AWS Lambda และ Amazon CloudFront
ความท้าทาย : การเรียก LLM เพื่อดำเนินงานบางอย่างในโหมดตอบกลับคำขออาจทำได้ช้า
วิธีแก้ไข : เพื่อจัดการกับการหมดเวลา 30 วินาทีของตำแหน่งข้อมูล API Gateway แนวทางที่เลือกเกี่ยวข้องกับการใช้ AWS Lambda URL ผ่าน Amazon CloudFront ภายใน Amazon CloudFront ฟังก์ชัน Lambda@Edge จะถูกทริกเกอร์สำหรับแต่ละคำขอ ซึ่งรับผิดชอบในการตรวจสอบการตรวจสอบสิทธิ์ผู้ใช้กับ Amazon Cognito หากการรับรองความถูกต้องสำเร็จ ฟังก์ชัน Lambda@Edge จะลงนามคำขอไปยัง Lambda URL (ซึ่งใช้ AWS_IAM เป็นวิธีการรับรองความถูกต้อง) แม้ว่าการใช้ Lambda URL จะมอบโซลูชันที่เป็นไปได้ แต่สิ่งสำคัญคือต้องรับทราบว่าการเลือก AWS AppSync นำเสนอทางเลือกอื่นที่มอบสิทธิประโยชน์เพิ่มเติม AWS AppSync นำเสนอโซลูชันทางเลือกที่มีกลไกการตรวจสอบสิทธิ์และการอนุญาตในตัวที่ตอบสนองความต้องการเหล่านี้ได้อย่างราบรื่น อย่างไรก็ตาม สำหรับแอปสาธิตนี้ เราเลือกใช้ Lambda URL แทน
การตอบสนองแบบซิงโครนัส/อะซิงโครนัสของ Amazon Bedrock
ความท้าทาย : การได้รับการตอบสนองจาก Amazon Bedrock สามารถเกิดขึ้นได้ทั้งในโหมดคำขอ/ตอบกลับ หรือในโหมดสตรีมมิ่ง โดยที่ Lambda เริ่มต้นการสตรีมการตอบสนอง แทนที่จะรอการตอบสนองทั้งหมดที่จะสร้าง
วิธีแก้ไข : บางส่วนของแอปพลิเคชันทำงานในโหมดคำขอ/ตอบกลับ (เช่น Product ingredients description หรือการดึงข้อเสนอสูตรอาหารทั้งสามรายการ) ในขณะที่อีกส่วนหนึ่ง ( Product summary Getting the Step-by-Step Recipe ) ใช้โหมดสตรีมมิ่งเพื่อสาธิตการใช้งานทั้งสองอย่าง วิธีการ
กรณีการใช้งานภาพประกอบของแอปพลิเคชัน GenAi
npm installus-east-1 cdk deploy ก่อนที่จะเข้าถึงแอปพลิเคชัน ตรวจสอบให้แน่ใจว่าคุณได้สร้างบัญชีผู้ใช้ใน Amazon Cognito แล้ว เพื่อให้บรรลุเป้าหมายนี้ ให้ไปที่ AWS Console จากนั้นไปที่ Amazon Cognito และค้นหาพูลผู้ใช้ที่ชื่อคล้ายกับ AuthenticationFoodAnalyzerUserPoolXXX
ตรวจสอบเอาต์พุตสแต็กเพื่อหา URL ที่คล้ายกับ Food analyzer app.domainName วาง URL นี้ลงในเบราว์เซอร์ของคุณ เข้าสู่ระบบด้วยผู้ใช้ที่สร้างไว้ก่อนหน้านี้ และเริ่มเพลิดเพลินกับแอป
คุณสามารถเรียกใช้แอป vite react ได้ในเครื่องโดยทำตามขั้นตอนเหล่านี้
ทำตามคำแนะนำด้านบนเพื่อปรับใช้แอป cdk
หยิบ aws-exports.json จากจุดสิ้นสุดการกระจาย Amazon CloudFront ที่คุณได้รับจากเอาต์พุต CDK แล้วบันทึกลงในโฟลเดอร์ . ./resources/ui/public/ /
URL มีลักษณะดังนี้:
https://dxxxxxxxxxxxx.cloudfront.net/aws-exports.json
cd resources/ui
npm run devต้องติดตั้งโหนด JS 18+ บนเครื่องปรับใช้ (คำแนะนำ)
ต้องติดตั้ง AWS CLI 2+ บนเครื่องปรับใช้ (คำแนะนำ)
ขอสิทธิ์เข้าถึงโมเดล Anthropic Claude และ Stable Diffusion XL บน Amazon Bedrock
โครงการนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT-0 ดูไฟล์ใบอนุญาต
