Soneur Meeting Room adalah sebuah implementasi antarmuka berbasis React yang mengintegrasikan berbagai komponen interaktif untuk menunjang kolaborasi daring berbasis kecerdasan buatan. Sistem ini memanfaatkan hooks seperti useState dan useEffect untuk pengelolaan state, serta memanggil layanan eksternal seperti Azure OpenAI, ElevenLabs, dan Tavus untuk fungsi-fungsi analisis, sintesis suara, hingga percakapan video cerdas. Aplikasi ini dirancang dalam konteks pertemuan daring yang kaya fitur, dengan dukungan presentasi, kuis, mindmap, roadmap, dan kartu belajar interaktif.
Demo Aplikasi
Integrasi Layanan AI
Salah satu aspek penting dari Soneur Meeting Room adalah kemampuannya mengintegrasikan layanan pemrosesan bahasa alami dan sintesis suara untuk interaksi yang lebih imersif. Layanan Azure OpenAI digunakan untuk menghasilkan konten seperti presentasi, kuis, dan analisis gambar atau tangkapan layar. ElevenLabs bertanggung jawab untuk sintesis suara yang menyerupai manusia, sedangkan Tavus memungkinkan percakapan video interaktif dengan agen AI. Ketiga layanan ini diorkestrasi untuk bekerja sinkron, sehingga pengguna mendapatkan pengalaman kolaborasi yang menyeluruh.
Manajemen State dan Event
Pengelolaan state dilakukan melalui React Hooks, mencakup variabel untuk tujuan rapat, bahasa yang dipilih, daftar anggota tim AI, status audio dan video, serta urutan fokus jendela draggable. Event listener ditambahkan untuk mengatur notifikasi, mendeteksi perangkat, dan merespons perubahan status audio. Pendekatan ini memastikan UI merespons secara real-time terhadap perubahan kondisi pertemuan.
Komponen Interaktif
Aplikasi ini memanfaatkan berbagai komponen modular seperti ParticipantsPanel, VideoTile, ChatPanel, MeetingControls, serta berbagai jendela DraggableWindow untuk konten spesifik. Setiap komponen memiliki fungsi tertentu: ParticipantsPanel mengatur daftar peserta, VideoTile menampilkan video setiap anggota, sedangkan ChatPanel mengelola percakapan teks. MeetingControls menyediakan kontrol pusat untuk audio, video, rekaman, berbagi layar, dan pemanggilan konten AI.
Fitur Konten Dinamis
Konten dinamis dihasilkan melalui integrasi layanan AI, mencakup presentasi, kuis, mindmap, roadmap, dan kartu pengingat (flashcard). Mekanisme manual-only dan voice-and-chat memberikan kontrol kepada pengguna apakah konten dihasilkan melalui perintah suara/chat atau hanya melalui antarmuka grafis. Setiap jenis konten memiliki struktur data tersendiri yang disimpan dalam state dan dapat ditampilkan dalam jendela yang dapat dipindahkan serta diubah ukurannya.
Daftar Komponen Penting
- React dan hooks seperti useState, useEffect
- Komponen visual: VideoTile, ParticipantsPanel, ChatPanel
- Kontrol rapat: MeetingControls
- Konten AI: PresentationWindow, QuizWindow, MindmapWindow, RoadmapWindow, FlashcardWindow
- Layanan eksternal: Azure OpenAI, ElevenLabs, Tavus
- Manajer percakapan: conversationManager
- Modul autentikasi: AuthProvider, AuthModal, ProtectedRoute
- Komponen utilitas: DraggableWindow, ScreenShare
Pengelolaan Audio dan Video
Sistem ini memiliki mekanisme untuk mengatur audio dan video, termasuk mematikan semua peserta, menetapkan mikrofon eksklusif, dan memulihkan status audio sebelumnya. Saat percakapan video Tavus aktif, sistem secara otomatis mematikan audio semua peserta AI untuk menghindari gangguan, kemudian memulihkannya setelah sesi berakhir. Hal ini juga mencakup penghentian audio TTS jika status mikrofon berubah dari aktif menjadi nonaktif.
Bahasa dan Lokalisasi
Terdapat daftar pilihan bahasa yang mencakup berbagai bahasa dunia seperti English, French, German, Spanish, Indonesian, dan lainnya. Pilihan bahasa ini mempengaruhi input dan output layanan AI, termasuk teks dan sintesis suara. Dengan demikian, sistem mampu beroperasi secara multibahasa, mendukung kebutuhan pengguna internasional.
Analisis Gambar dan Tangkapan Layar
Fitur berbagi layar dan tangkapan layar memungkinkan anggota tim AI menganalisis konten visual secara langsung. Proses ini melibatkan pengiriman data gambar ke Azure OpenAI untuk dianalisis, kemudian hasilnya disampaikan melalui teks atau audio. Analisis dapat dilokalkan sesuai bahasa pilihan, sehingga relevan untuk pengguna dari berbagai latar belakang.
Mekanisme Percakapan AI
Pemilihan anggota tim AI yang merespons dilakukan melalui fungsi seleksi yang mempertimbangkan penyebutan langsung nama anggota atau kecocokan kata kunci bidang keahlian. Jika tidak ada kecocokan eksplisit, sistem memilih anggota yang belum aktif berbicara dalam sejarah percakapan terkini. Strategi ini memastikan distribusi interaksi yang merata dan relevan terhadap konteks pertemuan.
Projek lainnya
- E-Learning : Sekolahkan.com
- Undangan Digital : Walimah.web.id
- Diklat Online : TesPPPK.com
- Rebrand Produk Digital : RebrandWebID
- Perpustakaan Digital : Pustaka Berbudi
- AI Pembuat Buku : BookCraft
- Aplikasi Angklung Kodaly : Kodaly