voice assistant
1.0.0
จัดเตรียมอินเทอร์เฟซแชท AI ที่ควบคุมด้วยเสียงในเบราว์เซอร์ของคุณ ผู้ช่วย AI สามารถใช้ เครื่องมือ ที่รวมเข้ากับบริการต่าง ๆ เช่น Spotify, Google ปฏิทินและ Google Maps
แนวคิดคร่าวๆสำหรับโครงการนี้คือการมีผู้ช่วยที่เปิดใช้งานด้วยเสียงคล้ายกับ Amazon Alexa หรือ Siri แต่ได้รับการสนับสนุนจากรูปแบบภาษาขนาดใหญ่ ปัจจุบันมีการใช้งานเป็นเว็บไซต์ที่ทำงานอย่างหมดจดในเบราว์เซอร์ของคุณ เป็นค่าเริ่มต้นในการใช้โมเดล GPT-4O ของ OpenAI ที่กำหนดค่าด้วยเครื่องมือหลายอย่าง (AKA "ฟังก์ชั่น") ที่อนุญาตให้รวมเข้ากับช่วงของ API ในการใช้ API เหล่านี้ต้องให้ความลับดูด้านล่าง การบูรณาการ "ซับซ้อน" มากที่สุดสำหรับ Google และ Spotify
โดยทั่วไปคุณสามารถถามผู้ช่วยว่ามันสามารถทำอะไรให้คุณได้บ้าง -
สร้างไฟล์ชื่อ config.ts ในไดเรกทอรี packages/frontend/src คุณสามารถคัดลอก packages/frontend/src/config.ts.example และปรับตามความต้องการของคุณ
// The following configuration is required:
// By configuring the endpoints below, you can use a server with OpenAI compatible REST API:
export const completionsApiKey = "<The API Key used for /completions endpoint>" ;
export const completionsApiUrl = "https://api.openai.com/v1" ;
export const modelName = "gpt-4o" ;
export const useTools = true ;
export const speechApiKey = "<The API Key used for the TTS endpoint>" ;
export const speechApiUrl = "https://api.openai.com/v1" ;
export const transcriptionApiKey = "<The API Key used for the SST endpoint>" ;
export const transcriptionApiUrl = "https://api.openai.com/v1" ;
export const transcriptionModel = "whisper-1" ;
// All the following API keys are optional, and are only required if you want to use the corresponding features.
// Your picovoice.ai Access Key (wake word detection):
export const PicoVoiceAccessKey = "" ;
// Your openweathermap.org API Key (used for weather tools):
export const OpenWeatherMapApiKey = "" ;
// Your newsapi.org API key (used for some news tools):
export const NewsApiOrgKey = "" ;
export const GoogleApiKey = "<Your googleapis.com API key>" ;
export const GoogleClientId = "XXX.apps.googleusercontent.com" ;
export const GoogleClientSecret = "<Your OAuth2 Client Secret/Key>" ;
export const GoogleCustomSearchEngineId = "<ID of your custom google search engine configured for global search>" ;
// export const GoogleProjectId = "<Your Google Cloud Console project ID>"; // Needed for Google Vertex AI API (Gemini Pro)
export const SpotifyClientId = "<Your Spotify Client ID>" ;
export const MicrosoftClientId = "<Your Azure App Client ID>" ;ไฟล์นี้ถูกละเว้นโดย Git
หมายเหตุ: การกำหนดค่าข้างต้นจะต้องมีให้ในขณะนี้เนื่องจากนำเข้าในรหัสและใช้เป็นทางเลือก อย่างไรก็ตามจากการตั้งค่าผู้ช่วย UI เป็นไปได้ที่จะกำหนดค่าโมเดลและผู้ให้บริการ LLM จำนวนเท่าใดก็ได้และสลับระหว่างพวกเขา
ในการใช้โมเดล GPT-4 ใด ๆ บัญชี platform.openai.com ของคุณจะต้องมีข้อมูลการเรียกเก็บเงินและการชำระเงินที่ประสบความสำเร็จหนึ่งครั้ง หากบัญชีของคุณไม่ถูกเรียกเก็บเงินคุณสามารถเริ่มต้นการชำระเงินผ่าน "ซื้อเครดิต" ด้วยตนเองในหน้าภาพรวมการเรียกเก็บเงิน สิ่งนี้จะ "ปลดล็อก" รุ่น GPT-4
คีย์ API สำหรับ openweathermap.org สามารถใช้สำหรับระดับฟรี
ในทำนองเดียวกันคีย์ API สำหรับ picovoice.ai มีอิสระที่จะได้รับสำหรับการใช้งานส่วนตัว มันมาพร้อมกับขีด จำกัด อัตรา การไม่ให้ picovoiceaccesskey ส่วนใหญ่จะทำลายการตรวจจับ Wake-word ในทางทฤษฎี API การจดจำคำพูดของเบราว์เซอร์ใช้เป็นทางเลือก แต่ก็ไม่ได้รับการทดสอบในขณะที่
ในการรับคีย์ API สำหรับ Google APIs คุณต้องสร้าง "โครงการ" ในคอนโซลนักพัฒนาของ Google และเปิดใช้งาน APIs ต่อไปนี้:
สำหรับการรวม Google ปฏิทินและผู้ติดต่อที่เป็นตัวเลือก (เปิดใช้งานในการตั้งค่าผู้ช่วยผ่านการ Google Integration ) คุณต้องจัดเตรียม GoogleClientId นอกเหนือจาก GoogleApiKey เหตุผลก็คือคุณต้องลงชื่อเข้าใช้บัญชี Google ของคุณและสิ่งนี้ต้องมีการตั้งค่าไคลเอนต์ OAuth2 ของ Web Application ประเภทบนคอนโซล Google Cloud สำหรับโครงการของคุณ
ต้องมีการกำหนดค่าหลายสิ่งในโครงการคลาวด์ของคุณ:
OAuth 2.0-Client-ID :http://localhost:5173 และ http://localhost ไปยังต้นกำเนิด JavaScript ที่ได้รับอนุญาตhttp://localhost:5173/google-callback ไปยัง URIs การเปลี่ยนเส้นทางที่ได้รับอนุญาตOAuth Consent Screen :http://localhost:5173 (ไม่แน่ใจว่าจำเป็นจริง ๆ หรือไม่)https://www.googleapis.com/auth/calendarhttps://www.googleapis.com/auth/contacts.readonlyhttps://www.googleapis.com/auth/photoslibrary.readonly สำหรับการรวม Spotify ที่เป็นตัวเลือก (เปิดใช้งานในการตั้งค่าผู้ช่วยผ่าน Spotify Integration ) คุณต้องจัดเตรียม SpotifyClientId ในการรับรหัสลูกค้าคุณต้องลงทะเบียนแอปพลิเคชันบนแผงควบคุม Spotify Developer
เป็นเว็บไซต์ระบุ http://localhost:5173 เป็น URL เปลี่ยนเส้นทางให้ระบุ http://localhost:5173/spotify-callback
เมื่อเปิดใช้งานการรวม Spotify คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบ Spotify ซึ่งคุณต้องให้ผู้ช่วยเสียง (หรือคุณตั้งชื่อแอปของคุณในแผงควบคุม Spotify Developer) สิทธิ์ที่ร้องขอ นอกจากนี้ความสามารถในการสตรีมการเล่นแบบฝังตัวนั้นทำงานได้เฉพาะสำหรับผู้ใช้ Spotify Premium เนื่องจากการเล่นเว็บ SDK ต้องใช้บัญชีพรีเมี่ยม
สำหรับการรวม Microsoft ที่เป็นตัวเลือก (เปิดใช้งานในการตั้งค่าผู้ช่วยผ่าน Microsoft Integration ) คุณต้องจัดเตรียม MicrosoftClientId ในการรับรหัสลูกค้าคุณต้องลงทะเบียนแอปพลิเคชันบนพอร์ทัล Azure ต้องมีการตั้งค่าต่อไปนี้:
Single Page Applicationhttp://localhost:5173/microsoft-callbackUser.Read และ Calendars.ReadWriteมีบริการมากมายที่ให้จุดสิ้นสุดที่เข้ากันได้ของ OpenAI ตัวอย่างเช่นมี Localai โครงการที่ให้คุณเรียกใช้ LLM ต่างๆในพื้นที่ แต่มีคนอื่น ๆ เช่น LM Studio, VLLM และอื่น ๆ
โครงการเหล่านี้ให้ API ที่สามารถใช้ (ส่วนใหญ่) แทนการแทนที่สำหรับ OpenAI
ด้วยเหตุผลนี้ไฟล์ config.ts จะส่งออก completionsApiUrl และการตั้งค่าที่เกี่ยวข้องเช่นคีย์ API และชื่อรุ่น สิ่งนี้ช่วยให้สามารถกำหนดค่าเซิร์ฟเวอร์ที่เข้ากันได้ของ OpenAI อื่นได้ ฉันได้ทดสอบ Mistral, Groq และคนอื่น ๆ อย่างไรก็ตามการสนับสนุนเครื่องมือมี จำกัด มากเมื่อเทียบกับสิ่งที่ GPT-4-Turbo สามารถทำได้ บ่อยครั้งที่คุณไม่สามารถใช้สตรีมมิ่งและเครื่องมือพร้อมกันได้ และ LLM มักจะมีมากเกินไปและไม่เข้าใจอย่างน่าเชื่อถือเมื่อใดที่จะใช้เครื่องมือและวิธีการเรียกใช้พวกเขา ด้วย GPT-4-turbo ของ OpenAI เราสามารถใช้ 30 และมากกว่าด้วยความน่าเชื่อถือที่สมบูรณ์แบบ
หลังจากเตรียม packages/frontend/src/config.ts แล้วคุณสามารถเรียกใช้:
yarn install
yarn workspace voice-assistant-frontend devconfig.ts !
