Beranda>Terkait pemrograman>Kode Sumber AI
Unduh

Konversikan Dokumentasi ??

Perkenalan

Conversify adalah platform chatbot dukungan pelanggan canggih yang memungkinkan bisnis dengan mudah mengintegrasikan chatbot bertenaga AI ke situs web mereka. Ini menggabungkan teknologi avatar 3D interaktif, antarmuka suara dan teks, serta templat chatbot yang dapat disesuaikan untuk menghadirkan pengalaman pengguna yang mulus dan dinamis. Dibangun di atas tumpukan MERN (MongoDB, Express.js, React.js, Node.js) yang kuat, Conversify memberi klien tautan atau cuplikan kode yang dapat disematkan, memungkinkan integrasi yang cepat dan mudah.

Fitur Utama ?

  • Integrasi Chatbot yang Dapat Disematkan : Klien menerima tautan atau kode langsung untuk menyematkan chatbot Conversify ke situs web mereka.
  • Templat yang Dapat Disesuaikan : Berbagai templat chatbot disediakan untuk memenuhi kebutuhan dukungan pelanggan dan gaya branding yang berbeda. ?
  • Avatar 3D Interaktif : Pengguna dapat berinteraksi dengan avatar 3D yang merespons melalui teks dan suara, menyediakan antarmuka yang menarik dan mirip manusia. ??
  • Interaksi Suara dan Teks : Pertanyaan dapat dilakukan melalui input teks atau suara, dengan respons disampaikan dalam kedua cara tersebut. ⌨️
  • Backend Didukung oleh Mistral dan Llama LLM : Conversify memanfaatkan Mistral dan LLama untuk menangani kueri bahasa alami. ?
  • MongoDB Atlas sebagai Penyimpanan Vektor : Penyimpanan dan pengambilan data percakapan yang efisien dan terukur dikelola oleh MongoDB Atlas. ?️⚡
  • Dukungan Masa Depan untuk Pemilihan Model : Klien akan memiliki opsi untuk memilih dari berbagai model bahasa yang paling sesuai dengan kebutuhan mereka. ??

Ikhtisar Arsitektur

Conversify dibangun pada arsitektur JavaScript full-stack menggunakan tumpukan MERN, memastikan skalabilitas, fleksibilitas, dan efisiensi.

Bagian belakang :

  • Node.js & Express.js : Menangani permintaan API, memproses data percakapan, dan mengelola layanan backend. ?
  • MongoDB Atlas : Menyimpan riwayat percakapan, profil pengguna, dan vektor untuk pencarian dan pengambilan kesamaan yang efisien menggunakan vectorStore.
  • Mistral (LLM) : Menangani pemrosesan bahasa alami dan menghasilkan respons mirip manusia terhadap pertanyaan pelanggan.

Bagian depan ?️:

  • React.js : Menyediakan antarmuka pengguna yang intuitif dan responsif tempat pengguna dapat berinteraksi dengan chatbot. Ini mendukung input teks dan suara. ??‍
  • Three.js (Avatar 3D) : Mesin 3D yang mendukung avatar interaktif, menambahkan lapisan interaksi visual ke interaksi chatbot. ?️?

Proses Integrasi

  1. Dapatkan Tautan atau Kode yang Dapat Disematkan : Setelah mengonfigurasi chatbot Anda melalui aplikasi web Conversify, klien akan menerima tautan atau cuplikan kode khusus yang dapat disematkan. ?
  2. Sematkan di Situs Web : Tempelkan kode yang diberikan ke dalam HTML situs web Anda untuk mengintegrasikan antarmuka chatbot dengan mulus ke halaman mana pun. ?
  3. Kustomisasi : Sesuaikan chatbot dengan memilih template yang sesuai dengan merek dan kebutuhan Anda. Di masa depan, Anda juga dapat memilih model bahasa yang berbeda untuk mendukung chatbot Anda. ??

Fungsi Utama ?

1. Antarmuka Obrolan Interaktif ?

  • Pengguna dapat berinteraksi dengan chatbot menggunakan pertanyaan teks atau suara. ?
  • Chatbot merespons melalui avatar 3D dengan keluaran teks dan suara, sehingga meningkatkan interaksi.

2. Templat ?

  • Pilih dari beragam templat yang disesuaikan dengan skenario dukungan pelanggan yang berbeda. Templat ini akan memandu perilaku, nada, dan tampilan chatbot. ?

3. Integrasi Suara dan Teks ?⌨️

  • Chatbot dapat memproses masukan suara dan teks dari pengguna. ?️
  • Respons suara disintesis menggunakan teknologi text-to-speech yang canggih, memberikan avatar 3D suara yang alami.

4. Kustomisasi Avatar 3D ?‍??

  • Avatar 3D sepenuhnya dapat disesuaikan, memungkinkan penyelarasan branding dan kepribadian. Pilih dari gaya dan perilaku avatar yang berbeda. ??

Peta Jalan Masa Depan ?

  1. Opsi Pemilihan Model : Klien akan dapat memilih di antara model bahasa yang berbeda (seperti GPT, Mistral, dll.) berdasarkan preferensi dan kebutuhan mereka. ??
  2. Analisis Tingkat Lanjut : Dasbor untuk melacak kinerja chatbot, interaksi pengguna, dan umpan balik. ?
  3. Avatar yang Dipersonalisasi : Lebih banyak opsi penyesuaian untuk avatar agar lebih selaras dengan kebutuhan bisnis dan identitas merek yang berbeda. ?️
  4. Putaran Umpan Balik yang Didukung AI : Memungkinkan chatbot belajar dari interaksi sebelumnya untuk meningkatkan respons seiring waktu. ?

Memulai

Menyiapkan Backend BotGenerator

  1. Kloning Repositori :

    • Buka terminal Anda dan jalankan: 
      git clone https://github.com/MrDracs/BotGenerator.git
cd BotGenerator

  2. Instal Dependensi :

    • Di direktori BotGenerator , instal dependensi yang diperlukan: 
      npm install

  3. Buat File .env :

    • Di folder BotGenerator , buat file .env dan sertakan variabel lingkungan berikut: 
      MONGODB_URI= < Your_MongoDB_Connection_URI >
GROQ_API_KEY= < Your_GROQ_API_Key >
COHERE_API_KEY= < Your_Cohere_API_Key >

  4. Jalankan Servernya :

    • Mulai server pengembangan: 
      npm run dev
    • Ini akan membuka halaman web di browser Anda, yang dapat Anda tutup untuk saat ini.

Mengakses dan Menguji Frontend Chatbot ?

  1. Akses Bagian Depan :

    • Arahkan ke folder CodeCubicleConversify dan buka index.html di browser Anda:
      • Opsi 1: Gunakan browser pilihan Anda. ?
      • Opsi 2: Gunakan ekstensi VS Code Live Server untuk hosting lokal. ⚡

  2. Hasilkan dan Uji Chatbot Anda :

    • Di aplikasi web Conversify yang Anda buka, isi formulir, tambahkan basis pengetahuan, dan klik Kirim . Anda akan mendapatkan elemen div yang dapat disematkan yang berisi chatbot Anda. ??

  3. Sematkan Chatbot :

    • Untuk menguji chatbot dengan cepat:
      • Salin seluruh elemen div yang dihasilkan.
      • Buka index.html di folder CodeCubicleConversify .
      • Temukan kelas berikut dalam kode (sekitar baris 357): 
         < div class =" side-bar-fs " >
      • Ganti seluruh div dengan yang baru yang Anda salin, simpan, dan segarkan halaman.

  4. Aktifkan Text-to-Speech (TTS) :

    • Untuk mengaktifkan TTS pada chatbot, tambahkan /tts di akhir URL src di tag iframe yang disediakan di div . ?
      • Misalnya: 
         < iframe src =" your_chatbot_url/tts " ... > </ iframe >

Konversikan Pengaturan Aplikasi Web

  1. Daftar di Aplikasi Web : Kunjungi [Conversify Web App URL] dan buat akun.
  2. Konfigurasikan Chatbot Anda : Gunakan templat yang disediakan untuk mengonfigurasi chatbot Anda.
  3. Hasilkan Kode yang Dapat Disematkan : Setelah konfigurasi selesai, Anda akan menerima kode semat untuk diintegrasikan ke situs web Anda. ?
  4. Pantau & Tingkatkan : Akses dasbor untuk memantau interaksi dan mengoptimalkan kinerja chatbot.

Kontak dan Dukungan ??

Jika Anda memiliki pertanyaan atau mengalami masalah apa pun, jangan ragu untuk menghubungi tim dukungan kami di:

Sekarang Anda siap menghidupkan chatbot Conversify di situs web Anda! ??

Kontributor ?

  • Ayush Sharma
  • Chirag Singh
  • Rohit Kushwaha
Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua