Q&A Document frontend

ในปัจจุบันนี้มีการนำ AI มาใช้ในหลายๆอย่าง ซึ่ง Q&A Document ถ้าเราจินตนาการว่าโปรเจ็คเป็นยังไง สิ่งแรกที่เรานึกก็คงนึก OpenAI กัน หรือ บางคนอาจจะนึง Chat Bot เจ้าต่างๆ ที่เราถามคำถามไปเเล้วเจ้า Chat bot ก็จะตอบคำถามกลับมา ซึ่งตัวQ&A Document นี้ เราจะโยนตัว Document ไป ให้ Chat bot ของเราเเล้วหลังจากนั้นเราก็ถาม เจ้า Chat bot ก็จะตอบกลับ

หลายคนอาจจะสงสัยว่า Q&A Document มีประโยชน์นำมาใช้ทำอะไร เรามาจินตนาการกัน ว่าเรามีห้องสมุดขนาดใหญ่เต็มไปด้วยหนังสือและเอกสารมากมาย และเราต้องการหาคำตอบสำหรับคำถามที่เรามี แต่ใครๆ ก็ไม่อยากเสียเวลาในการค้นหาข้อมูลจากหนังสือเป็นกองๆ ใช่ไหม?

ตัว Q&A Document นี้ก็เหมือนกับเรามีเจ้าหน้าที่สุดฉลาดที่จำข้อมูลในหนังสือทุกเล่มในห้องสมุดได้ทุกหน้าเลย! เราแค่โยนคำถามไปที่ AI นี้ แล้วมันก็จะอ่านหาคำตอบให้เราได้อย่างรวดเร็ว ไม่ว่าจะเป็นข้อมูลที่ซับซ้อน, สถิติ, หรือแม้แต่case study ที่เกี่ยวข้องกับคำถามของเราเลย!

Understand the project requirements

เข้าใจความต้องการของโปรเจกต์ Q&A Document คือ ขั้นตอนสำคัญที่จะทำให้เราสามารถพัฒนาโซลูชันที่ตอบโจทย์ผู้ใช้งานได้ตรงจุด โดยเฉพาะในการสร้างระบบที่ใช้งานง่ายและเข้าถึงได้จากกลุ่มเป้าหมายของเรา มาเราดูรายละเอียดกันดีกว่าว่ามีอะไรบ้าง:

1.Concept :

ความเข้าใจในเรื่องของ RAG, LlamaIndex, Chroma, OpenAI โดยเฉพาะเรื่องของ RAG concept

2.UI Interface:

ระบบควรมี UI (User Interface) ที่เรียบง่ายและใช้งานได้สะดวก เพื่อให้ผู้ที่ทดลองเขียน RAG สามารถใช้งานได้โดยไม่เจอความยุ่งยากในการใช้งาน‍

3.การอัพโหลดไฟล์ :

ระบบควรรองรับการอัพโหลดไฟล์ และสามารถทำการค้นหาข้อมูลจากไฟล์เหล่านั้นเพื่อตอบคำถามของผู้ใช้งาน

Design the user interface

การออกแบบ UI สำหรับ Q&A Document System ควรจะมีความชัดเจน ใช้งานง่าย และมีการนำเสนอข้อมูลที่ไม่ทำให้ผู้ใช้รู้สึกสับสน

1. การอธิบาย Concept ของ RAG:

• Documentation Section: สร้างส่วนของเอกสารหรือคำแนะนำที่ช่วยให้ผู้ใช้ใหม่สามารถทำความเข้าใจได้ว่า RAG คืออะไรและทำงานอย่างไร
• Tutorial or Walkthrough: ขั้นตอนการใช้งานทีละขั้นตอนหรือวิดีโอสอนการใช้งานสำหรับผู้ที่เริ่มต้นใช้งาน

2. การออกแบบ UI ที่ใช้งานง่าย:

• Intuitive Layout: ออกแบบหน้าตาเว็บไซต์ให้มี layout ที่เข้าใจง่าย แบ่งส่วนชัดเจนระหว่างอัพโหลด PDF, การถามคำถาม และการแสดงคำตอบ
• Minimalist Design: ใช้หลักการ minimalism ในการออกแบบ เพื่อความสะดวกสบายตา และไม่รบกวนสมาธิผู้ใช้
• Accessible Color Scheme: ใช้สีที่ไม่รุนแรงต่อสายตาและสามารถใช้งานได้โดยผู้ใช้ที่มีปัญหาสายตา

3. การทำให้มี Endpoint ส่วนตัว:

• API Integration: ให้ผู้ใช้สามารถเชื่อมต่อกับ endpoint ของตัวเองได้

4. การออกแบบ Chatbot:

• Chat Interface: ออกแบบส่วนของการสนทนาให้คล้ายกับการสนทนาจริงๆ
• Clipboard Interaction: ให้มีฟังก์ชั่นสำหรับการคัดลอกคำตอบไป

ส่วนในเรื่องของตัว Chat bot เรามี ดีไซน์ก่อนหน้านี้เเล้ว เราก็จะนำในส่วนนี้มา reuse ใช้งาน 😆

ซึ่งขอเกริ่นก่อนเลยว่า ตัว Chatbot นั้น เราก็ไปดูในส่วนของ OpenAI ChatGPT นำมาใช้ในการเป็นแบบในการออกแบบ แต่ตัดฟังก์ชั้นหลายๆอย่าง ไป ให้เหมาะสมกับ Feature ที่เรามี

ซึ่ง Chat bot ก็จะมี  ดังต่อไปนี้

1. Input Area: สำหรับการถามคำถาม
2. Chat Interface: ใช้งานการออกแบบที่ใกล้เคียงกับ ChatGPT
3. Copy Function: สร้างปุ่มที่ใช้สำหรับคัดลอกข้อความจาก Chatbot เพื่อให้ผู้ใช้งานสามารถนำข้อความไปใช้งานต่อได้อย่างรวดเร็ว

Implement the user interface

ขั้นตอนในการสร้าง Q&A app เราก็ได้เลือก Lib หรือ Framwork มาใช้งานดังต่อไปนี้

1. Next.js: โดนใช้คำสั่ง create-next-app สำหรับการติดตั้งโปรเจ็ค Next.js
2. Tailwind CSS
3. react-hook-form: นำ react-hook-form มาใช้สำหรับการจัดการ forms ในการป้อนคำถาม และ validate ข้อมูล ตัว react-hook-form จะช่วยลดความซับซ้อนในการจัดการกับ form states และ re-renders 😎
4. zod  เรานำตัว zod มาใช้ร่วมกับ react-hook-form ในการทำ validate input  แบบ typesafe ละ

เมื่อเรา Implenet เสร็จเเล้ว เราก็จะได้ หน้าตา UI แบบนี้

Connect the frontend with the backend

หลังจากที่เราสร้าง UI interface ขึ้นมาเเล้วเราก็ต้องทำการ connect กับ ฝั่งของ backed เราต้องเข้าใจก่อนว่า ตัว api เขาให้มามีเส้น อะไรบ้าง มีรูปแบบการรับส่ง params หรือ body เป็นยังไง เเล้วมี ลำดับขั้นตอนเป็นอย่างไร

1. ทำความเข้าใจ API ที่ Backend ให้มา: ควรเข้าใจว่ามี endpoints อะไรบ้าง, รูปแบบของข้อมูลที่ส่งไป (parameters หรือ body), และการทำงานของแต่ละ endpoints
2. การจัดการ CORS: ปัญหา CORS เกิดขึ้นเมื่อ Frontend และ Backend ไม่อยู่บน domain เดียวกัน และ Backend ไม่ได้ตั้งค่าให้สามารถรับ requests จาก origin อื่นได้ การแก้ปัญหานี้ต้องตั้งค่าที่ Backend ให้รองรับ Cross-Origin Resource Sharing (CORS)

ซึ่งตัว API Interface ที่เราได้มาก็มีดังต่อไปนี้

API LoadAndStore Interface

GET {endpoint}/loadAndStore

Response 200 (OK)

{
  url:string //default = https://lilianweng.github.io/posts/2023-06-23-agent
  chunk_size:number //default = 1024
  chunk_overlap:number //default = 0
  collection_name:string //default = temp1
}

API Query

POST {endpoint}/queryWithOutRetrieval
or
POST {endpoint}/queryWithRetrieval

Body

{
  query: string
  collection_name:string
}

นอกจากนี้ เเล้ว ใครอยากสร้าง Backned  Q&A เป็นของตัวเอง ก็เข้าไปดูหรือลองทำตามใน Link นี้ได้เลย

วิธีการสร้าง RAG ด้วย Langchain + Deployment

Implement the URL input validation

หลังจากที่เราสามารถเชื่อมกับ backend ได้เเล้ว เราก็มาจัดการให้เรียบร้อย เช่น การ validate ข้อมูลที่ส่งไปให้ backend ในเรื่องของการส่ง เเค่ pdf เท่านั้นเป็นต้น หรือการใส่ endpoint

Display the bot's

ในขั้นตอนนี้ เราจะมาลองเล่นกับ bot ว่าทำงานได้อย่างถูกต้องไหม ดูผลของการที่บอทนั้นตอบกลับมา

การตรวจสอบ URL (URL validation) เป็นส่วนสำคัญในการป้องกันการส่งข้อมูลที่ไม่ถูกต้องไปยัง backend ในส่วนนี้เราจะพูดถึงการ validate ที่ frontend โดยใช้  react-hook-form และ zod ในการทำ validate กัน

1. การสร้าง schemaโดยใช้ zod

export const endpointScheme = z.object({
  endpoint: z.string().url().optional().or(z.literal('')),
})

export const collectionScheme = z.object({
  url: z.string({
    required_error: 'Invalid url',
    invalid_type_error: 'Invalid url',
  }),
  chunk_size: z.number({
    required_error: 'Invalid Chunk Size',
    invalid_type_error: 'Invalid Chunk Size',
  }),
  chunk_overlap: z.number({
    required_error: 'Invalid Chunk Overlap',
    invalid_type_error: 'Invalid Chunk Overlap',
  }),
  collection_name: z.string({
    required_error: 'Invalid Collection Name',
    invalid_type_error: 'Invalid Collection Name',
  }),
})
export const askScheme = z.object({
  query: z.string({
    required_error: '',
    invalid_type_error: '',
  }),
  bot: z.string({}).optional(),
})

2. การนำ schema มาต่อกับ react-hook-form

const validate = [endpointScheme, collectionScheme, askScheme]

  const methods = useForm<IOpenAIForm>({
    resolver: zodResolver(validate[step]),
    defaultValues: defaultValues,
    shouldFocusError: true,
  })

  const {
    handleSubmit,
    setError,
    setValue,
    formState: { isSubmitting },
  } = methods

Implement error handling

หลังจากที่ลองเล่นกับ bot เเล้ว เราก็จะมาเก็บ error handling ของ API ที่ เรา call เพื่อโชวเป็น message ต่างบนเว็บไซต์ ซึ่งในบางที่เราลองเล่นก็จะเห็นว่า บอทไม่ได้ตอบกลับมา เเล้วทาง API ส่ง error status code 500 มาเราก็ไม่รู้ว่าเกิดอะไรขึ้น ซึ่งในการที่เรามานั่งเก็บ error handling ช่วยให้ user สามารถเข้าถึง หรือเข้าว่าเกิดอะไรขึ้นได้ง่าย

Test the frontend

หลังจากที่เราเก็บ error handling เเล้ว เรามาดูกันดีกว่าว่า ผลลัพธ์ได้ตามที่เราต้องการหรือไม่ การแสดงทุกอย่างถูกต้องตาม requirment ที่เราได้รับมาหรือเปล่า

Optimize the frontend

ในส่วนนี้เราก็จะมา แก้ไข code กัน ดูว่าส่วนไหนเราควรจะต้องปรับแก้ ให้สามารถ optimize ได้ง่ายขึ้น อ่านโค้ดได้ง่าย หรือ การจัด code ให้ user ที่เข้ามาใช้งาน สามารถปรับแก้ไข code ได้ง่าย ซึ่งขั้นตอนนี้เราก็จะมาจัดการ code ที่รก ทีเราเขียนขึ้นมา เเล้วก็ดูว่ามีส่วนไหนไหมที่เราปรับเเล้วทำให้ใช้งานได้ไวขึ้น โหลดไว ใช้งานง่ายขึ้น

Deploy the frontend

เราก็มาถึง ขั้นตอนสุดท้านของการที่เราจะ deploy เราก็มาทดลอง เลยอย่างแรกคือการ build ว่า มี error ในจุดไหนไหม ที่ต้องแก้ไข และต้องปรับ config รวมถึง env  สำหรับการ deploy เช่น config เกี่ยวกับ next optimize image เป็นต้น จากนั้นเเล้ว เราก็ส่งต่อไปทางพี่ devOps จัดการ deploy 😆

นี้ก็คือภาพรวมที่แยกในแต่ละส่วนเพื่อให้เห็นภาพที่ชัดเจนสำหรับการพัฒนาโปรเจ็กต์นี้

‍

สามารถลองมาเล่น หรือใช้งานได้เลยใน repo นี้

https://github.com/vultureprime/ai-web-interface/tree/main/next-rag-faqs‍

‍

ทิ้งท้ายบทความสำหรับ Q&A bot

Q&A Document frontend

Q&A Document backend

Github Frontend

Github Backend

FAQ Facebook Group