API Realtime OpenAI yang baru diperkenalkan membolehkan kami mengintegrasikan pengalaman cepat, rendah latency, multimodal ke dalam aplikasi kami. Dengan API ini, kita boleh membuat interaksi pertuturan-ke-ucapan yang lancar antara pengguna dan model bahasa yang besar (LLMS).
API ini menghapuskan keperluan untuk pelbagai model untuk mencapai pengalaman yang didorong oleh suara kerana ia menawarkan penyelesaian lengkap dalam satu API bersepadu. Bukan sahaja ia bertujuan untuk mengurangkan latensi, tetapi ia juga mengekalkan nuansa emosi dan aliran semula jadi perbualan.
Dalam artikel ini, kami akan belajar bagaimana menggunakan API Realtime OpenAI untuk membina pembantu AI yang dikawal suara. Kami akan membuat sambungan WebSocket yang berterusan menggunakan Node.js dan bagaimana ini boleh digunakan dalam terminal untuk berkomunikasi dengan API. Di samping itu, saya akan membimbing anda untuk menggunakan aplikasi React yang menggunakan keupayaan API ini.
Tidak seperti komponen lain Openai API, API Realtime menggunakan WebSockets. WebSockets adalah protokol komunikasi yang menetapkan saluran komunikasi dua arah antara klien dan pelayan. Berbeza dengan model permintaan permintaan konvensional yang digunakan oleh HTTP, WebSockets menyokong interaksi masa nyata. Ini menjadikan WebSockets sangat sesuai untuk aplikasi masa nyata, seperti sembang suara.
Artikel ini akan meliputi bagaimana web web berfungsi dan memasukkan beberapa contoh berinteraksi dengan API Realtime.
Kami akan menggunakan node.js, jadi kami perlu memastikan ia dipasang pada komputer kami. Jika tidak, kita boleh memuat turun dan memasang Node.js dari laman web rasminya.
untuk mengikuti, kami mengesyorkan membuat folder dengan fail .env yang dibuat di atas. Di dalam folder itu, jalankan arahan berikut untuk memulakan skrip:
npm init -y && touch index.js
Selepas arahan ini selesai, fail ini harus berada di dalam folder:
npm install ws dotenv
// Import the web socket library
const WebSocket = require("ws");
// Load the .env file into memory so the code has access to the key
const dotenv = require("dotenv");
dotenv.config();
function main() {
// Connect to the API
const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
const ws = new WebSocket(url, {
headers: {
"Authorization": "Bearer " + process.env.OPENAI_API_KEY,
"OpenAI-Beta": "realtime=v1",
},
});
}
main();WebSockets membolehkan kami menyediakan tindakan yang akan dilaksanakan apabila beberapa peristiwa berlaku. Kami boleh menggunakan acara Terbuka untuk menentukan beberapa kod yang ingin kami laksanakan sebaik sahaja sambungan ditubuhkan.
sintaks generik untuk menambah pendengar acara adalah seperti berikut:
npm init -y && touch index.js
menggantikan & lt; event & gt; dengan rentetan yang mengandungi nama acara dan & lt; fungsi & gt; dengan fungsi yang akan dilaksanakan apabila peristiwa berlaku.
inilah cara kita boleh memaparkan teks sebaik sahaja sambungan siap:
npm install ws dotenv
Untuk menjalankan kod ini, kami menggunakan arahan:
// Import the web socket library
const WebSocket = require("ws");
// Load the .env file into memory so the code has access to the key
const dotenv = require("dotenv");
dotenv.config();
function main() {
// Connect to the API
const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
const ws = new WebSocket(url, {
headers: {
"Authorization": "Bearer " + process.env.OPENAI_API_KEY,
"OpenAI-Beta": "realtime=v1",
},
});
}
main();Jika kekunci API ditetapkan dengan betul, kami akan melihat mesej "sambungan terbuka" di terminal. Skrip akan terus berjalan kerana sambungan masih terbuka sehingga kita harus menghentikannya secara manual.
Satu lagi peristiwa yang boleh kita balas apabila menggunakan WebSockets adalah acara mesej. Ini dicetuskan setiap kali mesej diterima dari pelayan. Mari tambahkan fungsi yang memaparkan setiap mesej yang diterima:
ws.on(<event>, <function>);
menjalankan skrip sekarang juga harus memaparkan sesi. Acara yang dicipta yang API menghantar apabila sesi dimulakan.
di atas, kami belajar bagaimana untuk menambah pendengar acara ke acara terbuka dan mesej. WebSockets menyokong dua acara tambahan yang tidak akan kami gunakan dalam contoh kami.
Acara Tutup boleh digunakan untuk menambah panggilan balik apabila soket ditutup:
// Add inside the main() function of index.js after creating ws
async function handleOpen() {
console.log("Connection is opened");
}
ws.on("open", handleOpen);Acara ralat digunakan untuk menambah panggilan balik apabila terdapat ralat:
node index.js
Bekerja dengan WebSockets memerlukan kami untuk memprogram dengan cara yang didorong oleh peristiwa. Mesej dihantar ke saluran komunikasi, dan kami tidak dapat mengawal apabila mesej -mesej ini akan dihantar atau diterima.
Kod yang memulakan komunikasi harus ditambah di dalam HandleOpen (). O Jika tidak, ralat akan berlaku kerana kod itu boleh dilaksanakan sebelum saluran komunikasi soket web dibuat.
Begitu juga untuk mesej pengendalian kod. Semua logik harus masuk ke dalam fungsi handlemessage ().
Dalam contoh yang akan datang, kami akan menggunakan kod berikut sebagai titik permulaan. Kebanyakan perubahan melibatkan pengemaskinian handleOpen () dan handlemessage ().
// Add inside the main() function of index.js
async function handleMessage(messageStr) {
const message = JSON.parse(messageStr);
console.log(message);
}
ws.on("message", handleMessage);Komunikasi dengan API Realtime berlaku dengan menggunakan peristiwa. API dokumentasi masa nyata OpenAI menyenaraikan peristiwa yang disokongnya. Kami menggunakan acara perbualan.item.Create untuk memulakan perbualan. Peristiwa diwakili sebagai objek JSON yang bidangnya diterangkan dalam dokumentasi.
Berikut adalah contoh perbualan.item.Create Acara Menghantar Prompt "Jelaskan dalam satu ayat apa soket web":
async function handleClose() {
console.log(“Socket closed”);
}
ws.on(“close”, handleClose);Acara ini memberitahu API bahawa kami ingin memulakan perbualan teks. Ini ditentukan dalam medan Kandungan, menggunakan jenis "input_text" dan memberikan prompt teks.
kami menggunakan kaedah Ws.Send () untuk menghantar mesej. Pakej soket web menjangkakan rentetan sebagai argumen supaya kita perlu menukar acara JSON kami ke rentetan menggunakan fungsi JSON.Stringify (). Meletakkan ini bersama -sama, inilah caranya kita boleh menghantar acara di atas:
npm init -y && touch index.js
Ini akan memulakan perbualan, tetapi ia tidak akan mencetuskan API untuk menghantar respons kepada kami secara automatik. Untuk mencetuskan respons, kami menghantar Acara Response.Create. Berikut adalah contoh:
npm install ws dotenv
Acara ini menggunakan parameter tindak balas modaliti untuk meminta respons teks. Arahan adalah bahagian yang paling penting, menerangkan apa yang kita mahu model lakukan, dalam kes ini, prompt generik meminta untuk membantu pengguna.
Kami menghantar kedua -dua peristiwa ini dalam fungsi handleOpen () supaya perbualan dimulakan sebaik sahaja sambungan ditubuhkan. Inilah pelaksanaan penuh fungsi handleOpen () dari contoh ini:
// Import the web socket library
const WebSocket = require("ws");
// Load the .env file into memory so the code has access to the key
const dotenv = require("dotenv");
dotenv.config();
function main() {
// Connect to the API
const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
const ws = new WebSocket(url, {
headers: {
"Authorization": "Bearer " + process.env.OPENAI_API_KEY,
"OpenAI-Beta": "realtime=v1",
},
});
}
main();Mengenai mesej yang masuk, terdapat tiga jenis peristiwa yang perlu diperhatikan untuk contoh ini: response.text.delta, response.text.done, dan response.done peristiwa:
kita boleh menentukan bagaimana kita mahu skrip kita bertindak balas terhadap peristiwa -peristiwa ini menggunakan pernyataan suis dalam fungsi handlemessage ():
ws.on(<event>, <function>);
Dalam contoh ini, kami menggunakan acara respons.text.delta untuk mencetak ketulan respons kepada konsol ketika kami menerimanya. Apabila respons selesai, acara respons.text.done dicetuskan, dan kami mencetak barisan baru untuk menunjukkan bahawa output selesai. Akhirnya, kami menutup soket web apabila kami menerima respons.done acara.
Untuk menjalankan contoh ini, kami menyisipkan fungsi ini ke dalam kod templat di atas dan menjalankannya dengan arahan:
// Add inside the main() function of index.js after creating ws
async function handleOpen() {
console.log("Connection is opened");
}
ws.on("open", handleOpen);Ini akan menghasilkan respons di terminal ke prompt "jelaskan dalam satu ayat apa soket web", sama seperti ketika kita menggunakan chatgpt.
Kod penuh untuk contoh teks tersedia di sini.
Contoh sebelumnya menunjukkan bagaimana kita mengendalikan data teks. Walau bagaimanapun, minat sebenar dalam API Realtime adalah untuk mewujudkan pembantu suara yang membalas dalam masa nyata.
Mengendalikan data audio sedikit lebih rumit daripada berurusan dengan data teks. Kami akan melangkaui beberapa butiran khusus untuk bagaimana audio berfungsi kerana mereka akan mengalihkan perhatian kita dari subjek utama artikel ini.
Pertama, kami memasang dua pakej:
npm init -y && touch index.js
Kami juga perlu memasang SOX (Sound Exchange), utiliti baris arahan untuk pemprosesan audio yang akan digunakan oleh perpustakaan nod untuk bersambung dengan mikrofon dan rekod audio. Gunakan Brew Install Sox untuk memasangnya pada macOS atau sudo apt Pasang Sox pada Linux.
Dengan pakej -pakej ini dipasang, kami mengimportnya dan menambah fungsi StarTrecording () yang merekodkan audio pengguna. Kami tidak menerangkan fungsi secara terperinci kerana ia akan memandu kami terlalu banyak dari subjek utama kami.
tambahkan kod berikut ke fail index.js setelah memuatkan persekitaran:
npm install ws dotenv
fungsi starTrecording () Audio dari mikrofon dan menunggu "Enter" ditekan.
Seterusnya, kami mengemas kini fungsi utama () dengan memulakan penceramah () yang digunakan untuk memainkan tindak balas AI:
// Import the web socket library
const WebSocket = require("ws");
// Load the .env file into memory so the code has access to the key
const dotenv = require("dotenv");
dotenv.config();
function main() {
// Connect to the API
const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
const ws = new WebSocket(url, {
headers: {
"Authorization": "Bearer " + process.env.OPENAI_API_KEY,
"OpenAI-Beta": "realtime=v1",
},
});
}
main();Dengan cara itu, kita boleh melaksanakan handleOpen () dan handlemessage () untuk memproses audio.
Dalam fungsi HandleOpen (), kita hanya perlu memanggil fungsi StarTrecording () untuk merakam prompt audio pengguna. Kami juga perlu mengemas kini peristiwa sedikit:
Berikut adalah fungsi HandleOpen () yang dikemas kini:
ws.on(<event>, <function>);
Untuk melaksanakan fungsi handlemessage (), kami mengubah suai acara "response.audio.delta" untuk mengemas kini penampan audio dan memainkan delta bunyi baru:
// Add inside the main() function of index.js after creating ws
async function handleOpen() {
console.log("Connection is opened");
}
ws.on("open", handleOpen);kami mengeluarkan acara "response.text.done" dari pernyataan Switch dan mengemas kini acara "respons.done" untuk menghentikan penceramah:
node index.js
pelaksanaan akhir fungsi handlemessage () kelihatan seperti ini:
// Add inside the main() function of index.js
async function handleMessage(messageStr) {
const message = JSON.parse(messageStr);
console.log(message);
}
ws.on("message", handleMessage);Untuk menjalankan contoh ini, gunakan pengubahsuaian ini ke kod templat dan jalankan dengan arahan:
async function handleClose() {
console.log(“Socket closed”);
}
ws.on(“close”, handleClose);Mikrofon akan mula merakam. Kami boleh mengatakan permintaan kami dan tekan "masukkan" untuk menghantarnya. Kemudian, tindak balas AI akan dimainkan pada pembesar suara (pastikan mikrofon tidak diredam dan pembesar suara mempunyai kelantangan).
Kod penuh untuk contoh audio boleh didapati di sini.
Satu ciri bagus API OpenAI adalah keupayaan untuk melakukan panggilan fungsi. Kami boleh menambah fungsi kepada pembantu dan jika ia mengesan bahawa salah satu fungsi tersebut boleh berguna untuk memberikan jawapan, ia akan menghantar acara yang meminta fungsi tertentu dipanggil.
Dokumentasi OpenAI menyediakan gambarajah berikut yang menerangkan kitaran hidup panggilan fungsi:
Dari gambarajah, kita melihat bahawa pelanggan mesti memberikan definisi fungsi yang boleh dipanggil LLM. Juga, pelaksanaan fungsi akan berlaku di sisi klien; AI akan menghantar acara yang meminta fungsi dipanggil dan hujahnya. Kemudian, kami bertanggungjawab untuk menghantar semula hasilnya.
mari kita memperkasakan pembantu kami dengan fungsi yang menambah dua nombor bersama -sama. Kami akan membina contoh ini dengan memperluaskan contoh audio di atas.
Untuk menentukan fungsi yang tersedia, kami mesti menyediakan LLM dengan senarai alat. Setiap alat adalah objek JSON yang menentukan maklumat mengenai fungsi tersebut. Berikut adalah cara kita boleh menentukan alat untuk fungsi jumlah:
mari kita jelaskan struktur objek:
npm init -y && touch index.js
Jenis menentukan bahawa kita menentukan fungsi.
API akan memberikan argumen fungsi sebagai kamus dengan struktur yang sama yang ditakrifkan pada parameter di atas. Dalam kes ini, untuk menambah, katakan 3 dan 5, kamus akan menjadi {"a": 3, "b": 5}.
npm install ws dotenv
pemalar sumtool dan fungsi boleh ditambah ke bahagian atas index.js, selepas import dan sebelum fungsi utama ().
Seterusnya, kami mengemas kini acara respons.Create untuk membiarkan LLM tahu bahawa sumtools tersedia. Ini dilakukan dengan menambahkan medan Alat dan Tool_Choice kepada respons:
Apabila LLM memutuskan ia mahu memanggil fungsi, ia akan memancarkan Acara Response.Function_Call_Arguments.done. Kita perlu bertindak balas dengan:
// Import the web socket library
const WebSocket = require("ws");
// Load the .env file into memory so the code has access to the key
const dotenv = require("dotenv");
dotenv.config();
function main() {
// Connect to the API
const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
const ws = new WebSocket(url, {
headers: {
"Authorization": "Bearer " + process.env.OPENAI_API_KEY,
"OpenAI-Beta": "realtime=v1",
},
});
}
main();Mendapatkan maklumat fungsi dan memanggil fungsi.
Jika kita kini menjalankan skrip dan meminta hasil menambah dua nombor, model harus memanggil fungsi dan memberikan hasilnya.
ws.on(<event>, <function>);
Fungsi ini agak mudah tetapi kerana fungsi dilaksanakan oleh pelanggan, ia boleh menjadi apa -apa. Di bahagian seterusnya, kita akan melihat dua contoh fungsi yang lebih kompleks.
Kod penuh contoh ini boleh didapati di sini.
Persediaan App
Aplikasi mereka dihoskan dalam repositori ini. Untuk menetapkannya, mulakan dengan pengklonan menggunakan arahan git berikut:
npm init -y && touch index.js
Untuk memasang aplikasinya, kami menggunakan perintah npm (node pakej nod) berikut:
npm install ws dotenv
// Import the web socket library
const WebSocket = require("ws");
// Load the .env file into memory so the code has access to the key
const dotenv = require("dotenv");
dotenv.config();
function main() {
// Connect to the API
const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
const ws = new WebSocket(url, {
headers: {
"Authorization": "Bearer " + process.env.OPENAI_API_KEY,
"OpenAI-Beta": "realtime=v1",
},
});
}
main();Permohonan kini perlu bersedia untuk dilaksanakan. Ia terdiri daripada dua bahagian:
Tujuan utama melaksanakan pelayan relay antara frontend dan API OpenAI adalah untuk menyimpan kunci API dengan selamat. Berinteraksi dengan API adalah mustahil tanpa kunci ini.
Untuk melancarkan aplikasi, perlu untuk memulakan kedua -dua pelayan relay dan frontend. Untuk memulakan pelayan relay, gunakan arahan berikut:
untuk memulakan react frontend Gunakan arahan:
ws.on(<event>, <function>);
Setelah selesai memuatkan, tab akan dibuka pada penyemak imbas dengan aplikasi yang berjalan di atasnya.
// Add inside the main() function of index.js after creating ws
async function handleOpen() {
console.log("Connection is opened");
}
ws.on("open", handleOpen);
Sebelum mula menggunakan aplikasinya, pastikan komputer tidak bisu dan biarkan akses mikrofon ke aplikasi.
Aplikasi ini juga mempunyai mod VAD (Pengesanan Aktiviti Suara) di mana kita tidak perlu menekan sebarang butang. Dalam mod ini, aplikasi akan terus mendengar membolehkan kami mempunyai perbualan aktif dengan pembantu. Untuk menggunakannya, hanya tekan butang "VAD" dan bercakap.
Fungsi
Mengalami fungsi ini dengan bertanya soalan seperti "Bagaimana cuaca seperti esok di New York?" dan menyatakan keutamaan seperti "Warna kegemaran saya adalah biru." Pembantu akan memberikan respons lisan kepada pertanyaan ini, dan maklumat itu juga akan dipaparkan di sebelah kanan aplikasi.
Ada kalanya saya meminta laporan cuaca, dan tindak balas menunjukkan ketidakupayaan untuk mengaksesnya pada masa itu. Walau bagaimanapun, maklumat itu secara konsisten dipaparkan di sebelah kanan. Menjadi aplikasi demo, ia tidak bertujuan untuk menjadi produk berfungsi sepenuhnya tetapi berfungsi untuk mempamerkan keupayaan API. 
Bahagian ini memerlukan pemahaman peringkat tinggi tentang React untuk diikuti ketika kita meliputi beberapa butiran pelaksanaan aplikasi.
Integrasi dengan API ditakrifkan dalam panggilan useeffect () ini. Kod dalam useeffect ini () dilaksanakan apabila halaman konsol pada mulanya diberikan. Sama seperti skrip Node.js kami, ia menggariskan bagaimana untuk bertindak balas terhadap peristiwa API. Perbezaan utama ialah penggunaan pembungkus klien Realtimeclient.
npm init -y && touch index.js
Fungsi RealTimeClient.Addtool () digunakan untuk menentukan alat. Ia memerlukan dua parameter:
definisi alat objek json.
Sebagai contoh, untuk menambah alat SUM yang telah ditetapkan, kita boleh melakukan perkara berikut:
npm init -y && touch index.js
Perhatikan bahawa aplikasi menggunakan TypeScript, dengan itu memerlukan spesifikasi jenis dalam definisi fungsi.
Untuk mendengar peristiwa, fungsi RealTimeClient.on () digunakan. Ia menerima dua parameter:
Pendekatan ini serupa dengan fungsi WebSocket.on () yang digunakan sebelum ini, kecuali ia melaksanakan satu set peristiwa yang berbeza. Halaman GitHub mereka menyediakan senarai acara yang disokong.
Dalam contoh ini, peristiwa berikut digunakan:
Dalam tutorial ini, kami meneroka API Realtime Terbuka dan bagaimana ia menggunakan WebSockets untuk komunikasi masa nyata. Kami meliputi persediaan persekitaran node.js untuk berinteraksi dengan API, menghantar dan menerima mesej teks dan audio, dan melaksanakan fungsi yang memanggil fungsi yang dipertingkatkan.
kami juga meneroka aplikasi React Demo Openai, menunjukkan cara menggunakan aplikasi pembantu suara asas.
Untuk mengetahui lebih lanjut mengenai alat pembangunan terbuka terkini, saya cadangkan tutorial ini:
Atas ialah kandungan terperinci API Realtime Terbuka: Panduan dengan Contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk melaksanakan teknologi kontena docker di java
Apakah enjin mysql?
Apakah yang dimaksudkan dengan gerbang pengkomputeran tepi?
Apakah perkhidmatan SAAS
penggunaan fungsi tarikh
Cara menggunakan tag artikel
Penyelesaian kepada kod java tidak berjalan
Apakah pangkalan data dalam memori?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
