หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

UI แชทบอท

แอปแชท AI โอเพ่นซอร์สสำหรับทุกคน

UI แชทบอท

สาธิต

ดูการสาธิตล่าสุดได้ที่นี่

อัพเดท

เฮ้ทุกคน! ฉันได้ยินความคิดเห็นของคุณและกำลังทำงานอย่างหนักเพื่ออัปเดตครั้งใหญ่

สิ่งต่างๆ เช่น การใช้งานที่ง่ายขึ้น ความเข้ากันได้ของแบ็กเอนด์ที่ดีขึ้น และเลย์เอาต์มือถือที่ได้รับการปรับปรุงกำลังมาถึงแล้ว

กลับมาเร็วๆ นี้

-- แมคเคย์

เวอร์ชันโฮสต์อย่างเป็นทางการ

ใช้ Chatbot UI โดยไม่ต้องโฮสต์เอง!

ค้นหา Chatbot UI เวอร์ชันโฮสต์อย่างเป็นทางการได้ที่นี่

สปอนเซอร์

หากคุณพบว่า Chatbot UI มีประโยชน์ โปรดพิจารณาสนับสนุนฉันเพื่อสนับสนุนงานโอเพ่นซอร์สของฉัน :)

ปัญหา

เราจำกัด "ปัญหา" ไว้เฉพาะปัญหาจริงที่เกี่ยวข้องกับโค้ดเบส

เราได้รับปัญหาจำนวนมากเกินไป เช่น คำขอคุณลักษณะ ปัญหาของผู้ให้บริการคลาวด์ ฯลฯ

หากคุณประสบปัญหากับสิ่งต่างๆ เช่น การตั้งค่า โปรดดูส่วน "ความช่วยเหลือ" ในแท็บ "การสนทนา" ด้านบน

ปัญหาที่ไม่เกี่ยวข้องกับ codebase อาจถูกปิดทันที

การอภิปราย

เราขอแนะนำให้คุณเข้าร่วมในแท็บ "การสนทนา" ด้านบน!

การสนทนาเป็นสถานที่ที่ดีเยี่ยมในการถามคำถาม แบ่งปันแนวคิด และขอความช่วยเหลือ

เป็นไปได้ว่าหากคุณมีคำถาม แต่คนอื่นก็มีคำถามเดียวกัน

รหัสเดิม

Chatbot UI เพิ่งอัปเดตเป็นเวอร์ชัน 2.0

รหัสสำหรับ 1.0 สามารถพบได้ในสาขา legacy

กำลังอัปเดต

ในเทอร์มินัลของคุณที่รูทของที่เก็บ Chatbot UI ในเครื่องของคุณ ให้รัน: 

npm run update

หากคุณเรียกใช้อินสแตนซ์ที่โฮสต์ คุณจะต้องเรียกใช้: 

npm run db-push

เพื่อใช้การย้ายข้อมูลล่าสุดกับฐานข้อมูลสดของคุณ

การเริ่มต้นอย่างรวดเร็วในท้องถิ่น

ทำตามขั้นตอนเหล่านี้เพื่อให้อินสแตนซ์ Chatbot UI ของคุณเองทำงานภายในเครื่อง

คุณสามารถชมวิดีโอสอนแบบเต็มได้ที่นี่

1. โคลน Repo 

git clone https://github.com/mckaywrigley/chatbot-ui.git

2. ติดตั้งการพึ่งพา

เปิดเทอร์มินัลในไดเร็กทอรีรากของที่เก็บ Chatbot UI ในเครื่องของคุณแล้วรัน: 

npm install

3. ติดตั้ง Supabase & เรียกใช้ในเครื่อง

ทำไมต้องซูปาเบส?

ก่อนหน้านี้ เราใช้พื้นที่เก็บข้อมูลเบราว์เซอร์ในเครื่องเพื่อจัดเก็บข้อมูล อย่างไรก็ตาม นี่ไม่ใช่วิธีแก้ปัญหาที่ดีด้วยเหตุผลบางประการ:

  • ปัญหาด้านความปลอดภัย
  • พื้นที่เก็บข้อมูลมีจำกัด
  • จำกัดกรณีการใช้งานหลายรูปแบบ

ตอนนี้เราใช้ Supabase เนื่องจากใช้งานง่าย เป็นโอเพ่นซอร์ส เป็น Postgres และมี Free Tier สำหรับอินสแตนซ์ที่โฮสต์

เราจะสนับสนุนผู้ให้บริการรายอื่นในอนาคตเพื่อให้คุณมีทางเลือกมากขึ้น

1. ติดตั้งนักเทียบท่า

คุณจะต้องติดตั้ง Docker เพื่อเรียกใช้ Supabase ในเครื่อง คุณสามารถดาวน์โหลดได้ฟรีที่นี่

2. ติดตั้ง Supabase CLI

แมคโอเอส/ลินุกซ์ 

brew install supabase/tap/supabase

หน้าต่าง 

scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

3. เริ่ม Supabase

ในเทอร์มินัลของคุณที่รูทของที่เก็บ Chatbot UI ในเครื่องของคุณ ให้รัน: 

supabase start

4. กรอกความลับ

1. ตัวแปรสภาพแวดล้อม

ในเทอร์มินัลของคุณที่รูทของที่เก็บ Chatbot UI ในเครื่องของคุณ ให้รัน: 

cp .env.local.example .env.local

รับค่าที่ต้องการโดยการรัน: 

supabase status

หมายเหตุ: ใช้ API URL จาก supabase status สำหรับ NEXT_PUBLIC_SUPABASE_URL

ตอนนี้ไปที่ไฟล์ .env.local ของคุณแล้วกรอกค่าต่างๆ

หากมีการตั้งค่าตัวแปรสภาพแวดล้อม มันจะปิดการใช้งานอินพุตในการตั้งค่าผู้ใช้

2. การตั้งค่า SQL

ในไฟล์การโยกย้ายครั้งที่ 1 supabase/migrations/20240108234540_setup.sql คุณจะต้องแทนที่ 2 ค่าด้วยค่าที่คุณได้รับด้านบน:

  • project_url (บรรทัด 53): http://supabase_kong_chatbotui:8000 (ค่าเริ่มต้น) ยังคงไม่เปลี่ยนแปลงหากคุณไม่เปลี่ยน project_id ของคุณในไฟล์ config.toml
  • service_role_key (บรรทัด 54): คุณได้รับค่านี้จากการรัน supabase status

วิธีนี้ช่วยป้องกันปัญหาเกี่ยวกับไฟล์จัดเก็บข้อมูลที่ไม่ถูกลบอย่างถูกต้อง

5. ติดตั้ง Ollama (เป็นทางเลือกสำหรับรุ่นท้องถิ่น)

ทำตามคำแนะนำที่นี่

6. เรียกใช้แอปในเครื่อง

ในเทอร์มินัลของคุณที่รูทของที่เก็บ Chatbot UI ในเครื่องของคุณ ให้รัน: 

npm run chat

ขณะนี้อินสแตนซ์ Chatbot UI ภายในเครื่องของคุณควรทำงานที่ http://localhost:3000 ตรวจสอบให้แน่ใจว่าใช้เวอร์ชันโหนดที่เข้ากันได้ (เช่น v18)

คุณสามารถดู GUI แบ็กเอนด์ของคุณได้ที่ http://localhost:54323/project/default/editor

โฮสต์การเริ่มต้นอย่างรวดเร็ว

ทำตามขั้นตอนเหล่านี้เพื่อให้อินสแตนซ์ Chatbot UI ของคุณทำงานในระบบคลาวด์

วิดีโอสอนจะมาเร็ว ๆ นี้

1. ปฏิบัติตามการเริ่มต้นอย่างรวดเร็วในเครื่อง

ทำซ้ำขั้นตอนที่ 1-4 ใน "Local Quickstart" ด้านบน

คุณจะต้องการพื้นที่เก็บข้อมูลแยกต่างหากสำหรับอินสแตนซ์ภายในเครื่องและอินสแตนซ์ที่โฮสต์ของคุณ

สร้างพื้นที่เก็บข้อมูลใหม่สำหรับอินสแตนซ์ Chatbot UI ที่โฮสต์บน GitHub แล้วส่งโค้ดของคุณไปที่นั่น

2. ตั้งค่าแบ็กเอนด์ด้วย Supabase

1. สร้างโครงการใหม่

ไปที่ Supabase และสร้างโปรเจ็กต์ใหม่

2. รับมูลค่าโครงการ

เมื่อคุณอยู่ในแดชบอร์ดโครงการแล้ว ให้คลิกที่แท็บไอคอน "การตั้งค่าโครงการ" ที่ด้านซ้ายล่างสุด

ที่นี่คุณจะได้รับค่าสำหรับตัวแปรสภาพแวดล้อมต่อไปนี้:

  • Project Ref : พบใน "การตั้งค่าทั่วไป" เป็น "รหัสอ้างอิง"

  • Project ID : พบได้ใน URL ของแดชบอร์ดโครงการของคุณ (เช่น: https://supabase.com/dashboard/project/<YOUR_PROJECT_ID>/settings/general)

ขณะที่ยังอยู่ใน "การตั้งค่า" ให้คลิกที่แท็บข้อความ "API" ทางด้านซ้าย

ที่นี่คุณจะได้รับค่าสำหรับตัวแปรสภาพแวดล้อมต่อไปนี้:

  • Project URL : พบใน "การตั้งค่า API" เป็น "URL โครงการ"

  • Anon key : พบใน "คีย์โครงการ API" เป็น "อานนท์สาธารณะ"

  • Service role key : พบใน "คีย์ Project API" เป็น "service_role" (คำเตือน: ถือว่าสิ่งนี้เหมือนกับรหัสผ่าน!)

3. กำหนดค่าการตรวจสอบสิทธิ์

จากนั้นคลิกที่แท็บไอคอน "การรับรองความถูกต้อง" ทางด้านซ้ายสุด

ในแท็บข้อความ คลิกที่ "ผู้ให้บริการ" และตรวจสอบให้แน่ใจว่าได้เปิดใช้งาน "อีเมล" แล้ว

เราขอแนะนำให้ปิด "ยืนยันอีเมล" สำหรับอินสแตนซ์ส่วนตัวของคุณเอง

4. เชื่อมต่อกับ Hosted DB

เปิดพื้นที่เก็บข้อมูลของคุณสำหรับอินสแตนซ์ที่โฮสต์ของ Chatbot UI

ในไฟล์การโยกย้ายครั้งที่ 1 supabase/migrations/20240108234540_setup.sql คุณจะต้องแทนที่ 2 ค่าด้วยค่าที่คุณได้รับด้านบน:

  • project_url (บรรทัดที่ 53): ใช้ค่า Project URL จากด้านบน
  • service_role_key (บรรทัด 54): ใช้ค่า Service role key จากด้านบน

ตอนนี้ ให้เปิดเทอร์มินัลในไดเร็กทอรีรากของที่เก็บ Chatbot UI ในเครื่องของคุณ เราจะดำเนินการคำสั่งบางอย่างที่นี่

เข้าสู่ระบบ Supabase โดยเรียกใช้: 

supabase login

จากนั้น เชื่อมโยงโปรเจ็กต์ของคุณโดยรันคำสั่งต่อไปนี้กับ "รหัสโปรเจ็กต์" ที่คุณได้รับด้านบน: 

supabase link --project-ref < project-id >

ตอนนี้โครงการของคุณควรเชื่อมโยงแล้ว

สุดท้าย พุชฐานข้อมูลของคุณไปที่ Supabase โดยเรียกใช้: 

supabase db push

ฐานข้อมูลที่โฮสต์ของคุณควรได้รับการตั้งค่าแล้ว!

3. ตั้งค่าส่วนหน้าด้วย Vercel

ไปที่ Vercel และสร้างโครงการใหม่

ในหน้าการตั้งค่า ให้นำเข้าพื้นที่เก็บข้อมูล GitHub ของคุณสำหรับอินสแตนซ์ที่โฮสต์ของ Chatbot UI ภายในการตั้งค่าโครงการ ในส่วน "การตั้งค่าการสร้างและการพัฒนา" ให้สลับ Framework Preset เป็น "Next.js"

ในตัวแปรสภาพแวดล้อม ให้เพิ่มสิ่งต่อไปนี้จากค่าที่คุณได้รับด้านบน:

  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • SUPABASE_SERVICE_ROLE_KEY
  • NEXT_PUBLIC_OLLAMA_URL (จำเป็นเฉพาะเมื่อใช้โมเดล Ollama ในเครื่องเท่านั้น ค่าเริ่มต้น: http://localhost:11434 )

คุณยังสามารถเพิ่มคีย์ API เป็นตัวแปรสภาพแวดล้อมได้

  • OPENAI_API_KEY
  • AZURE_OPENAI_API_KEY
  • AZURE_OPENAI_ENDPOINT
  • AZURE_GPT_45_VISION_NAME

สำหรับรายการตัวแปรสภาพแวดล้อมทั้งหมด โปรดดูที่ไฟล์ '.env.local.example' หากมีการตั้งค่าตัวแปรสภาพแวดล้อมสำหรับคีย์ API มันจะปิดการใช้งานอินพุตในการตั้งค่าผู้ใช้

คลิก "ปรับใช้" และรอให้ส่วนหน้าของคุณปรับใช้

เมื่อปรับใช้แล้ว คุณควรจะสามารถใช้อินสแตนซ์ Chatbot UI ที่โฮสต์ผ่าน URL ที่ Vercel มอบให้คุณได้

มีส่วนร่วม

เรากำลังจัดทำคู่มือสำหรับการมีส่วนร่วม

ติดต่อ

ส่งข้อความถึงแม็คเคย์บน Twitter/X

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด