Planning and Implementing a Chatbot Application with OpenAI API

สำหรับบทความนี้ก็จะอิงพื้นฐานมาจาก Demo ที่ทาง Vulture Prime ได้ทำขึ้นเช่นเคยค่ะ ซึ่ง Demo รอบนี้เป็นเว็บไซต์ Generate API Key ให้ user ที่ต้องการเชื่อมต่อ OpenAI ของทาง Vulture Prime สามารถ Generate API Key ผ่านเว็บไซต์ได้โดยอัตโนมัติโดยไม่ต้องผ่าน Admin และ user สามารถเลือก Rate Limit ที่ต้องการใช้ต่อวันได้

หมายเหตุ : ในกรณีที่มี Dashboard user ต้อง login เพื่อเข้าสู่ระบบก่อนใช้งาน

เราสามารถใช้ API Key ที่ถูก Generate ขึ้นจากเว็บไซต์นี้ ไปใส่ตรงจุดใส่ Endpoint ของ Q&A Chatbot ได้

Frontend for calling OpenAI API

เพื่อให้ง่ายต่อการจัดการ เราได้จัดทำหน้า UI ให้ user สามารถเข้าถึง API Key ได้โดยง่ายและไม่ต้องติดต่อขอจากทาง Admin ทำให้ user ง่ายต่อการเข้าถึง ไม่ต้องเสียเวลาติดต่อคุย เพราะเพียงแค่กดไม่กี่ครั้งบนหน้าเว็บไซต์ก็พร้อมได้ OpenAI API Key ไปใช้งานต่อได้เลย (เลือกแพ็คเกจ Rate Limit → กรอก Email → ได้ API Key หรือกรณีที่มี Login ก็เพียงแค่ Login → เลือกแพ็คเกจ Rate Limit → ได้ API Key)

ตัวอย่าง User flow ของ Demo ค่ะ

User generation of API key on website

บางคนอาจจะสงสัยว่าทำไมเราต้องมี API Key ให้แต่ละคน ทำไมใช้รวมกันไม่ได้? ทำไมต้องมี Rate Limit? เราจะมาอธิบายให้เข้าใจง่าย ๆ ดังนี้ค่ะ

ทุกคนน่าจะเคยไปเที่ยวสวนสนุก และเวลาเราไปสวนสนุกเราก็ต้องซื้อตั๋วเพื่อเข้าสวนสนุกหรือเล่นเครื่องเล่น ซึ่งสวนสนุกก็มีตั๋วหลากหลายประเภททั้งตั๋วเฉพาะเข้าไม่รวมเครื่องเล่น ตั๋วรวมเครื่องเล่นแบบจำกัดรอบ ตั๋วรวมเครื่องเล่นไม่จำกัด หรือตั๋วเฉพาะเครื่องเล่น แต่ละคนก็สามารถเลือกซื้อตั๋วประเภทที่เราต้องการเพื่อเข้าไปยังสวนสนุกได้ ถ้าไม่ซื้อตั๋วก็เข้าสวนสนุกไม่ได้

สมมติเราไปกับเพื่อน เราอาจจะซื้อตั๋วรถไฟเหาะ 20 ใบ ในขณะที่เพื่อนซื้อตั๋วรวมเครื่องเล่นแบบจำกัดรอบเครื่องเล่นละ 1 ครั้ง เพื่อนก็จะเล่นรถไฟเหาะได้ครั้งเดียว ในขณะที่เราเล่นได้ 20 รอบ แต่เพื่อนก็สามารถไปเล่นเครื่องเล่นอื่น ๆ ได้ด้วย ในขณะที่เราเล่นได้แค่เครื่องเดียว

ก็เหมือนกับ API Key และ Rate Limit ค่ะ ให้คิดว่า AI เราคือสวนสนุก API Key คือตั๋ว และ Rate Limit คือจำนวนรอบที่เล่นได้ user แต่ละคนสามารถมีสิทธิ์เข้าถึง feature ได้แตกต่างกัน รวมถึงจำนวนครั้งที่สามารถเข้าใช้งานแต่ละ feature ได้ จึงทำให้เราต้องกำหนด API Key ให้แต่ละคน ซึ่งการแยก API Key ก็ยังมีประโยชน์ในการตรวจสอบ การ Tracking และการ Log ประวัติการเข้าถึงและใช้งานต่าง ๆ ในกรณีที่เกิดปัญหา เช่น ถูกโจมตี ก็ยังจะสามารถสืบย้อนกลับไปยังต้นทางได้ว่าเกิดจาก API Key ตัวไหนหรือ user คนใดถือครองอยู่ เพราะ API Key ก็เปรียบเสมือนตั๋วสำหรับเข้าถึง Service ของเรา ถ้ามีตั๋วก็สามารถใช้งาน Service ของเราได้

และนี่ก็คือเหตุผลว่าทำไมมี API Key อย่างเดียวไม่ได้ ต้องมี Rate Limit ด้วย เพราะถ้าเราให้ตั๋วแบบเข้าใช้งานได้ไม่จำกัด user ก็จะสามารถใช้งานได้เรื่อย ๆ โดยที่เราต้องมีค่าใช้จ่ายในการใช้งาน LLMs เพิ่มตามการใช้งานไปเรื่อย ๆ จนอาจจะถึงจุดที่ทำให้เรากระเป๋าแบนกันเลยทีเดียว การมีตั๋วแบบจำกัดจำนวนเข้าใช้งานก็จะช่วยป้องกันให้ user ยังใช้งานอยู่ในจุดที่งบประมาณของเรายังรับไหว และเป็นการเพิ่มประสิทธิภาพความปลอดภัยของ Service ช่วยป้องกันการ DDos ได้อีกด้วย

ทุกคนน่าจะเข้าใจเรื่อง OpenAI API Key และ Rate Limit กันมากขึ้นแล้ว แต่บทความยังไม่จบนะคะ 😆 มาดูเทคนิคต่าง ๆ ที่เราได้เลือกใช้(หรือที่ควรจะทำ)ในการพัฒนาเว็บไซต์นี้กันค่ะ

Display of rate limit

ให้แสดงจำนวน Rate Limit ที่คุณกำหนดให้ user ใช้ โดยในที่นี้เราได้แบ่งเป็นหลาย ๆ แพ็คเกจ ให้ user ได้เลือก เช่น 10 Requests/Day 20 Requests/Day 30 Requests/Day เพื่อให้ user ได้รู้ว่าเรากำหนด Rate Limit ไว้ที่เท่าไหร่หรือมีแบบไหนให้เขาเลือกใช้ได้บ้าง เพื่อให้ user สามารถนำไปวางแผนการใช้งานของเขาได้ เพื่อให้ไม่ติดขัดเวลาใช้งาน

Display of remaining usage

นอกจากบอกว่า Limit อยู่ที่เท่าไหร่ ตาม UX ที่ดี เราก็ควรที่จะบอก user ด้วยว่าตอนนี้ยังเหลือจำนวนการใช้งานอีกกี่ครั้ง เพื่อให้ user สามารถคำนวณและวางแผนได้ว่าควรจะจัดการการใช้งานของเขาอย่างไรให้มีประสิทธิภาพสูงสุด

API key hide/show toggle

ด้วยเหตุผลด้านความปลอดภัย เพื่อป้องกันให้บุคคลอื่นเห็น API Key เราควรปิดซ่อน API Key ของ user แต่ก็ยังต้องให้ user สามารถกดดูได้ง่ายเมื่อต้องการกลับมาดู ดังนั้นควรเพิ่ม feature toggle เปิด/ซ่อน API Key ในเว็บไซต์เพื่อความสะดวกในการใช้งาน

Notifier for user when rate limit is reached

ควรมีการแจ้งเตือน user เมื่อใช้งานถึง Rate Limit ที่กำหนดไว้ เพื่อป้องกันความสับสนเมื่อ user ไม่สามารถใช้งานได้ user ก็จะสามารถรู้ได้ทันทีว่าเกิดจาก Rate Limit ทำให้สามารถวางแผนแก้ไขปัญหาและจัดการวางแผนการใช้งานต่อไปได้

LLMs service and Backend

Demo รอบนี้ เราได้ตัดสินใจที่จะใช้ OpenAI เป็น LLMs เช่นเคย รวมถึง FastAPI เป็น Service ในการทำ Backend เนื่องจาก เนื่องจาก FastAPI มีประสิทธิภาพสูง สามารถใช้งานได้ง่ายและง่ายต่อการบำรุงรักษา อีกทั้งยังช่วยเพิ่มประสิทธิภาพโดยรวมของ Project อีกด้วย ในขณะที่ OpenAI เป็น LLMs ที่มีประสิทธิภาพการเรียนรู้สูงเหมาะแก่การนำมาใช้ในการทำ Generative AI ซึ่งเป็น Core หลักของ Project “The AI Novice” ของเราด้วย

Use of python boto3 to generate API Key

ใน Demo นี้ เราได้เลือกใช้ python boto3 เป็น service ในการ generate API Key เนื่องจาก service นี้มีความปลอดภัยและมีประสิทธิภาพในการทำงานได้เป็นอย่างดี เราจึงเลือกใช้ python boto3 เพื่อให้เว็บไซต์ของเราปลอดภัยและมีเสถียรภาพมากขึ้น

Use of API Gateway service to set rate limit of each API Key

เราใช้ API Gateway ซึ่งเป็น Service ของ AWS มาเป็นตัวจัดการ Rate Limit ของแต่ละ API Key โดยข้อดีของการใช้งาน API Gateway คือจะทำให้การสื่อสารระหว่างหน้าเว็บไซต์และ Backend เป็นไปอย่างราบรื่น เพราะ API Gateway จะมาช่วยจัดการ Traffic ของ API รวมถึงจัดการการกำหนดสิทธิการเข้าถึงและ Rate Limit ได้อย่างมีประสิทธิภาพอีกด้วย

ขายของ → ใครที่อยากศึกษาทำความเข้าใจเกี่ยวกับ API Gateway เพิ่มเติม สามารถอ่านต่อได้ใน API Gateway

API to show total API was generate

เมื่อเราทำเว็บไซต์ แน่นอนว่าเราต้องการข้อมูลสถิติ เราจึงสร้าง API สำหรับเรียกดูจำนวน API Key ที่ถูกสร้างทั้งหมด เพื่อดูสถิติการใช้งานเว็บไซต์ ช่วยให้เราสามารถเข้าใจ user ได้ดียิ่งขึ้นและสามารถนำไปปรับปรุงและพัฒนา service ของเราต่อไปได้

API to show total usage of each API key

นอกจากดูจำนวน API Key ทั้งหมดที่ถูกสร้าง เรายังมี API สำหรับดูข้อมูลการใช้งานในแต่ละวันของแต่ละ API Key เพื่อช่วยให้ user สามารถเข้าใจการใช้งานของตัวเองได้ดีขึ้นและสามารถนำไปวางแผนจัดการเรียกใช้งานในแต่ละช่วงเวลาได้มีประสิทธิภาพดีขึ้น

Backend deployment into EC2

เราได้เลือก Deploy Backend บน Cloud ของ AWS และเลือกใช้ Service Amazon EC2 ซึ่งเป็น Infrastructure as a Service ให้คุณสามารถจัดการ Server ของคุณได้เอง ซึ่ง Cloud นั้นมีข้อดีคือสามารถ Scale เข้าออกได้ไม่จำกัด ทำให้สามารถรองรับ Load ที่อาจจะเพิ่มขึ้นได้ดีกว่า มีความปลอดภัย เสถียรและยังมีค่าใช้จ่ายที่ถูกกว่าการเช่า Server แบบ Static

ปล. จริง ๆ แล้วก็ยังมี Cloud เจ้าอื่นให้คุณสามารถเลือกใช้ได้ตามความถนัด ซึ่งการที่เราเลือกใช้ AWS เนื่องจากเราเชี่ยวชาญ AWS เป็นพิเศษจึงเลือกใช้ Cloud เจ้านี้เป็นหลักค่ะ

ขายของ → บริษัทเราเชี่ยวชาญด้าน Cloud และพร้อมเป็นที่ปรึกษาให้กับคุณ หากสนใจสามารถ ติดต่อเรา หรือสำหรับใครที่ต้องการตรวจสอบ AWS Cloud Cost ตอนนี้เรามี Cloud Cost Check ให้คุณฟรี! หรือสำหรับใครลองเล่นหรือกำลังศึกษา Cloud อยู่แล้วต้องการคำปรึกษาในการใช้งาน Cloud ก็สามารถทักมาสอบถามคุยเล่นกับเราได้เช่นกันค่ะ 😆

และทั้งหมดนี้ก็คือ Guideline เมื่อต้องเจอกับ OpenAI API และ Rate Limit ซึ่งเราก็หวังว่าบทความนี้จะเป็นประโยชน์ไม่มากก็น้อย สำหรับใครที่ยังมีข้อสงสัยหรือต้องการสอบถามเพิ่มเติมสามารถติดต่อที่ Facebook Page : Vulture Prime ไว้พบกันบทความหน้าค่ะ 👋

‍

ทิ้งท้ายบทความสำหรับ OpenAI with ratelimit

OpenAI with ratelimit frontend

OpenAI with ratelimit backend

Github Frontend

Github Backend

FAQ Facebook Group