nextjs openai doc search

next.js openai doc search starter

สตาร์ทเตอร์นี้ใช้ไฟล์ .mdx ทั้งหมดในไดเรกทอรี pages และประมวลผลเพื่อใช้เป็นบริบทที่กำหนดเองภายในพรอมต์การทำข้อความ OpenAI

ปรับใช้

ปรับใช้สตาร์ทเตอร์นี้กับ Vercel การรวม Supabase จะตั้งค่าตัวแปรสภาพแวดล้อมที่ต้องการโดยอัตโนมัติและกำหนดค่าสคีมาฐานข้อมูลของคุณ สิ่งที่คุณต้องทำคือตั้ง OPENAI_KEY ของคุณและคุณพร้อมที่จะไป!

-

รายละเอียดทางเทคนิค

การสร้าง CHATGPT แบบกำหนดเองของคุณเองเกี่ยวข้องกับสี่ขั้นตอน:

1. - สร้างเวลา] ล่วงหน้าประมวลผลฐานความรู้ (ไฟล์ .mdx ของคุณในโฟลเดอร์ pages ของคุณ)
2. - สร้างเวลา] จัดเก็บการฝังใน postgres ด้วย pgvector
3. - รันไทม์] ทำการค้นหาความคล้ายคลึงกันของเวกเตอร์เพื่อค้นหาเนื้อหาที่เกี่ยวข้องกับคำถาม
4. - รันไทม์] ฉีดเนื้อหาลงในพรอมต์การทำข้อความ OpenAI GPT-3 และการตอบกลับสตรีมไปยังไคลเอนต์

- สร้างเวลา

ขั้นตอนที่ 1. และ 2. เกิดขึ้นในเวลาที่สร้างเช่นเมื่อ Vercel สร้างแอป Next.js ของคุณ ในช่วงเวลานี้สคริปต์ generate-embeddings กำลังถูกดำเนินการซึ่งดำเนินการต่อไปนี้:

 ลำดับ
    vercel ผู้เข้าร่วม
    DB ผู้เข้าร่วม (PGVECTOR)
    ผู้เข้าร่วม OpenAI (API)
    ลูป 1. ประมวลผลฐานความรู้ล่วงหน้า
        vercel->> vercel: chunk. mdx หน้าลงในส่วนต่างๆ
        ลูป 2. สร้างและจัดเก็บการฝังตัว
            vercel->> openai (API): สร้างการฝังส่วนหน้าสำหรับส่วนหน้า
            openai (api)->> vercel: ฝังเวกเตอร์ (1536)
            vercel->> db (pgvector): จัดเก็บการฝังสำหรับส่วนหน้า
        จบ
    จบ

นอกเหนือจากการจัดเก็บ embeddings สคริปต์นี้จะสร้างการตรวจสอบสำหรับไฟล์ .mdx แต่ละไฟล์ของคุณและจัดเก็บสิ่งนี้ในตารางฐานข้อมูลอื่นเพื่อให้แน่ใจว่า embeddings จะถูกสร้างขึ้นใหม่เมื่อไฟล์เปลี่ยนไปเท่านั้น

- รันไทม์

ขั้นตอนที่ 3. และ 4. เกิดขึ้นที่รันไทม์ทุกครั้งที่ผู้ใช้ส่งคำถาม เมื่อสิ่งนี้เกิดขึ้นลำดับงานต่อไปนี้จะดำเนินการ:

 ลำดับ
    ลูกค้าผู้เข้าร่วม
    ฟังก์ชั่น Edge ผู้เข้าร่วม
    DB ผู้เข้าร่วม (PGVECTOR)
    ผู้เข้าร่วม OpenAI (API)
    ไคลเอนต์->> ฟังก์ชั่นขอบ: {Query: Lorem ispum}
    วิกฤต 3. ดำเนินการค้นหาความคล้ายคลึงกันของเวกเตอร์
        ฟังก์ชั่นขอบ->> openai (API): สร้างการฝังสำหรับการสืบค้น
        openai (api)->> ฟังก์ชั่นขอบ: เวกเตอร์ฝัง (1536)
        ฟังก์ชั่นขอบ->> db (pgvector): การค้นหาความคล้ายคลึงกันของเวกเตอร์
        db (pgvector)->> ฟังก์ชั่นขอบ: เอกสารที่เกี่ยวข้อง
    จบ
    วิกฤต 4. การฉีดเนื้อหาลงในพรอมต์
        ฟังก์ชั่นขอบ->> openai (API): การขอเสร็จสมบูรณ์ตามคำขอ: แบบสอบถาม + เนื้อหาเอกสารที่เกี่ยวข้อง
        openai (API)->> ไคลเอนต์: ข้อความ/เหตุการณ์สตรีม: การตอบสนองเสร็จสมบูรณ์
    จบ

ไฟล์ที่เกี่ยวข้องสำหรับสิ่งนี้คือส่วนประกอบ SearchDialog (ไคลเอนต์) และ vector-search (ฟังก์ชั่นขอบ)

การเริ่มต้นของฐานข้อมูลรวมถึงการตั้งค่าส่วนขยาย pgvector จะถูกเก็บไว้ในโฟลเดอร์ supabase/migrations ซึ่งจะถูกนำไปใช้กับอินสแตนซ์ Postgres ในพื้นที่ของคุณโดยอัตโนมัติเมื่อเรียกใช้ supabase start

การพัฒนาท้องถิ่น

การกำหนดค่า

• cp .env.example .env
• ตั้ง OPENAI_KEY ของคุณในไฟล์ .env ที่สร้างขึ้นใหม่
• ตั้งค่า NEXT_PUBLIC_SUPABASE_ANON_KEY และ SUPABASE_SERVICE_ROLE_KEY run:

  หมายเหตุ: คุณต้องเรียกใช้ supabase เพื่อดึงกุญแจ

เริ่ม supabase

ตรวจสอบให้แน่ใจว่าคุณติดตั้ง Docker และทำงานในเครื่อง จากนั้นวิ่ง

supabase start

เพื่อดึงข้อมูล NEXT_PUBLIC_SUPABASE_ANON_KEY และ SUPABASE_SERVICE_ROLE_KEY run:

supabase status

เริ่มต้นแอป Next.js

ในหน้าต่างเทอร์มินัลใหม่เรียกใช้

pnpm dev

ใช้เอกสาร. mdx ที่กำหนดเองของคุณ

1. โดยค่าเริ่มต้นเอกสารของคุณจะต้องอยู่ในรูปแบบ .mdx ซึ่งสามารถทำได้โดยการเปลี่ยนชื่อไฟล์ .md (หรือเข้ากันได้) ที่มีอยู่
2. เรียกใช้ pnpm run embeddings เพื่อสร้าง embeddings ใหม่

   หมายเหตุ: ตรวจสอบให้แน่ใจว่า Supabase กำลังทำงานอยู่ หากต้องการตรวจสอบให้เรียกใช้ supabase status หากไม่ได้เรียกใช้ Run supabase start

3. เรียกใช้ pnpm dev อีกครั้งเพื่อรีเฟรช nextjs localhost: 3000 หน้าแสดงผล

เรียนรู้เพิ่มเติม

• อ่าน BlogPost เกี่ยวกับวิธีที่เราสร้าง CHATGPT สำหรับเอกสาร Supabase
• [เอกสาร] PGVECTOR: EMBEDDINGS และ VECTOR ความคล้ายคลึงกัน
• ดูวิดีโอ "How I Built This" ของ Greg บนช่องทาง Rabbit Hole Syndrome YouTube:

ใบอนุญาต

Apache 2.0