Membina Sambungan Chrome daripada Scratch dengan API AI/ML, Deepgram Aura dan Integrasi IndexedDB

pengenalan

Membina sambungan Chrome yang memanfaatkan teknologi AI boleh meningkatkan pengalaman pengguna dengan ketara dengan menambahkan ciri berkuasa terus ke dalam penyemak imbas.

Dalam tutorial ini, kami akan merangkumi keseluruhan proses membina sambungan Chrome dari awal dengan AI/ML API, Deepgram Aura dan IndexDB, dari persediaan hingga penggunaan. Kami akan bermula dengan menyediakan persekitaran pembangunan kami, termasuk memasang alat yang diperlukan dan mengkonfigurasi projek kami. Kemudian, kami akan menyelami komponen teras sambungan Chrome kami: manifest.json mengandungi metadata asas tentang sambungan anda, scripts.js yang bertanggungjawab bagaimana sambungan kami akan berfungsi dan styles.css untuk menambah sedikit penggayaan. Kami akan meneroka cara mengintegrasikan teknologi ini dengan Deepgram Aura melalui AI/ML API dan menggunakan IndexDB sebagai storan sementara untuk fail audio yang dijana. Sepanjang perjalanan, kami akan membincangkan amalan terbaik untuk membina sambungan Chrome, mengendalikan pertanyaan pengguna dan menyimpan data dalam pangkalan data. Menjelang akhir tutorial ini, anda akan mempunyai asas yang kukuh dalam membina sambungan Chrome dan dilengkapi dengan baik untuk membina sebarang sambungan Chrome berkuasa AI.

Mari dapatkan gambaran ringkas tentang teknologi yang akan kami gunakan.

API AI/ML

AI/ML API ialah platform mengubah permainan untuk pembangun dan usahawan SaaS yang ingin menyepadukan keupayaan AI termaju ke dalam produk mereka. AI/ML API menawarkan satu titik akses kepada lebih 200 model AI tercanggih, meliputi segala-galanya daripada NLP kepada penglihatan komputer.

Ciri Utama untuk Pembangun:

• Perpustakaan Model Luas: 200 model pra-latihan untuk prototaip dan penggunaan pantas
• Pilihan Penyesuaian: Perhalusi model agar sesuai dengan kes penggunaan khusus anda
• Integrasi Mesra Pembangun: API RESTful dan SDK untuk penyepaduan lancar ke dalam tindanan anda
• Seni Bina Tanpa Pelayan: Fokus pada pengekodan, bukan pengurusan infrastruktur

Selam mendalam ke dalam Dokumentasi API AI/ML; https://docs.aimlapi.com/

Sambungan Chrome

Pelanjutan Chrome ialah program perisian kecil yang mengubah suai atau meningkatkan kefungsian penyemak imbas web Google Chrome. Sambungan ini dibina menggunakan teknologi web seperti HTML, CSS dan JavaScript serta direka bentuk untuk satu tujuan, menjadikannya mudah difahami dan digunakan.

Semak imbas Kedai Web Chrome; https://chromewebstore.google.com/

Aura Deepgram

Deepgram Aura ialah model AI text-to-speech (TTS) pertama yang direka untuk ejen dan aplikasi AI perbualan masa nyata. Ia memberikan kualiti suara seperti manusia dengan kelajuan dan kecekapan yang tiada tandingan, menjadikannya pengubah permainan untuk membina pengalaman AI suara yang responsif dan berkemampuan tinggi.

Ketahui lebih lanjut tentang butiran teknikal; https://aimlapi.com/models/aura

IndexDB

IndexedDB ialah API peringkat rendah untuk penyimpanan sisi klien bagi sejumlah besar data berstruktur, termasuk fail/gumpalan. IndexedDB ialah pangkalan data berorientasikan objek berasaskan JavaScript.

Ketahui lebih lanjut tentang konsep dan penggunaan utama; https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

Bermula dengan Sambungan Chrome

Membina sambungan Chrome melibatkan pemahaman struktur, kebenaran dan cara sambungan Chrome tersebut berinteraksi dengan halaman web. Kami akan bermula dengan menyediakan persekitaran pembangunan kami dan mencipta fail asas yang diperlukan untuk sambungan kami.

Sediakan Persekitaran Pembangunan Anda

Sebelum kami memulakan pengekodan, pastikan anda mempunyai perkara berikut:

• Pelayar Chrome: Penyemak imbas tempat kami akan memuatkan dan menguji sambungan kami.
• Editor Teks atau IDE: Alat seperti Visual Studio Code, Sublime Text atau Atom sesuai untuk mengedit kod. Kami akan menggunakan Kod Visual Studio dalam tutorial ini.
• Pengetahuan Asas HTML, CSS dan JavaScript: Kebiasaan dengan teknologi ini adalah penting untuk membina sambungan Chrome.

Mencipta Struktur Projek

Sambungan Chrome yang minimum memerlukan sekurang-kurangnya tiga fail:

• manifest.json: Mengandungi metadata dan konfigurasi untuk sambungan.
• scripts.js: Memegang kod JavaScript yang mentakrifkan gelagat sambungan.
• styles.css: Termasuk sebarang penggayaan untuk elemen UI sambungan.

Mari buat direktori untuk projek kami dan sediakan fail ini.
Langkah 1: Buat Direktori Baharu
Buka terminal anda dan jalankan arahan berikut untuk mencipta folder baharu untuk sambungan anda:

mkdir my-first-chrome-extension
cd my-first-chrome-extension

Langkah 2: Buat Fail Penting
Dalam direktori baharu, cipta fail yang diperlukan:

touch manifest.json
touch scripts.js
touch styles.css

Memahami manifest.json

Fail manifest.json ialah inti sambungan Chrome anda. Ia memberitahu penyemak imbas tentang sambungan anda, perkara yang dilakukan dan kebenaran yang diperlukannya. Mari kita teliti mengkonfigurasi fail ini dengan betul.

{
  "manifest_version": 3,
  "name": "Read Aloud",
  "version": "1.0",
  "description": "Read Aloud anything in any tab",
  "host_permissions": [
    "*://*.aimlapi.com/*"
],
  "permissions": [
      "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["scripts.js"],
      "css": ["styles.css"]
    }
  ],
  "icons": {
    "16": "icons/icon.png",
    "48": "icons/icon.png",
    "128": "icons/icon.png"
  }
}

Medan Penting dalam manifest.json

Sekurang-kurangnya, manifest.json mesti mengandungi:

• versi_manifest: Menentukan versi format fail manifes. Chrome menggunakan versi 3 pada masa ini.
• nama: Nama sambungan anda, kerana ia akan dipaparkan kepada pengguna.
• versi: Nombor versi sambungan anda, mengikuti versi semantik.

Menambah Metadata dan Kebenaran

Di luar medan penting, kami akan menambah:

• penerangan: Ringkasan ringkas tentang perkara yang dilakukan oleh sambungan anda.
• host_permissions: Menentukan domain mana yang boleh diakses oleh sambungan. Untuk penyepaduan kami dengan API AI/ML, kami memerlukan akses kepada *.aimlapi.com.
• kebenaran: Mengisytiharkan kebenaran khas yang diperlukan, seperti mengakses tab aktif.
• content_scripts: Mentakrifkan skrip dan gaya untuk disuntik ke dalam halaman web.
• ikon: Menyediakan ikon untuk sambungan pada pelbagai saiz.

Penjelasan Bidang Utama

• versi_manifest: Tetapkan kepada 3 untuk menggunakan ciri sambungan Chrome terkini.
• nama: Kami akan menamakan sambungan kami "Read Aloud" yang mencerminkan fungsinya.
• versi: Bermula dengan "1.0" menunjukkan keluaran awal.
• penerangan: "Baca dengan lantang apa-apa dalam mana-mana tab" memberitahu pengguna tentang tujuan sambungan.
• host_permissions: Kad bebas *://*.aimlapi.com/* membenarkan sambungan untuk berkomunikasi dengan mana-mana subdomain aimlapi.com, yang diperlukan untuk panggilan API.
• kebenaran: "activeTab" membenarkan sambungan berinteraksi dengan kandungan tab semasa.
• content_scripts: Menentukan bahawa scripts.js dan styles.css harus disuntik ke dalam semua halaman web ("").
• ikon: Fail ikon rujukan untuk sambungan (pastikan anda mempunyai fail ikon yang sesuai dalam direktori ikon).

Menjana ikon

Buka penyemak imbas anda dan pergi ke chatgpt.com. Sekarang mari kita jana ikon untuk sambungan Chrome kami. Kami akan menggunakan satu ikon untuk saiz yang berbeza (semuanya ok).

Masukkan gesaan berikut:

Jana ikon hitam putih untuk sambungan Chrome "Baca Lancang" saya. Sambungan ini membolehkan pengguna menyerlahkan teks tertentu dalam tapak web dan mendengarnya. Ia adalah sambungan Chrome berkuasa AI. Latar belakang hendaklah berwarna putih dan padat.

Tunggu beberapa saat sehingga ChatGPT menjana ikon (imej). Klik muat turun dan namakan semula kepada icon.png. Kemudian masukkan ke dalam folder ikon.

Memuktamadkan manifest.json

Dengan semua medan ditakrifkan dengan betul, manifes.json anda akan membolehkan penyemak imbas memahami dan memuatkan sambungan anda dengan betul.

---

Membangunkan skrip.js

Fail scripts.js mengandungi logik yang mengawal cara sambungan anda berfungsi. Kami akan menggariskan fungsi utama skrip anda perlu laksanakan.

Pembolehubah dan Permulaan

Mulakan dengan menyediakan pembolehubah yang diperlukan:

• Kunci API: Anda memerlukan kunci API daripada platform API AI/ML untuk mengesahkan permintaan anda.
• Elemen Tindanan: Cipta elemen DOM untuk tindanan dan butang "Baca dengan lantang".
• Pembolehubah Pilihan: Simpan maklumat tentang teks pilihan pengguna dan kedudukannya.

mkdir my-first-chrome-extension
cd my-first-chrome-extension

Mengendalikan Pemilihan Teks

Pelanjutan anda harus mengesan apabila pengguna memilih teks pada halaman web:

• Pendengar Acara: Lampirkan pendengar acara naik tetikus pada dokumen untuk mengesan apabila pengguna selesai memilih teks.

mkdir my-first-chrome-extension
cd my-first-chrome-extension

• Pengesanan Pilihan: Semak sama ada teks yang dipilih tidak kosong dan simpannya.

touch manifest.json
touch scripts.js
touch styles.css

• Kedudukan Tindanan: Kira tempat untuk meletakkan tindanan supaya ia berdekatan dengan teks yang dipilih.

{
  "manifest_version": 3,
  "name": "Read Aloud",
  "version": "1.0",
  "description": "Read Aloud anything in any tab",
  "host_permissions": [
    "*://*.aimlapi.com/*"
],
  "permissions": [
      "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["scripts.js"],
      "css": ["styles.css"]
    }
  ],
  "icons": {
    "16": "icons/icon.png",
    "48": "icons/icon.png",
    "128": "icons/icon.png"
  }
}

• Pengurusan Tindanan: Pastikan tindanan sedia ada dialih keluar sebelum menambah tindanan baharu.

// Set your AIML_API_KEY key
const AIML_API_KEY = ''; // Replace with your AIML_API_KEY key

// Create the overlay
const overlay = document.createElement('div');
overlay.id = 'read-aloud-overlay';

// Create the "Read Aloud" button
const askButton = document.createElement('button');
askButton.id = 'read-aloud-button';
askButton.innerText = 'Read Aloud';

// Append the button to the overlay
overlay.appendChild(askButton);

// Variables to store selected text and range
let selectedText = '';
let selectedRange = null;

Kod Penuh:

document.addEventListener('mouseup', (event) => {
  console.log('mouseup event: ', event);
  //...code
}

Berinteraksi dengan AI/ML API

Apabila pengguna mengklik butang "Baca dengan lantang":

• Pengesahan Input: Semak sama ada teks yang dipilih memenuhi sebarang keperluan panjang.

const selection = window.getSelection();
const text = selection.toString().trim();
if (text !== '') {
  const range = selection.getRangeAt(0);
  const rect = range.getBoundingClientRect();

• Butang Lumpuhkan: Halang berbilang klik dengan melumpuhkan butang semasa pemprosesan.

// Set the position of the overlay
overlay.style.top = `${window.scrollY + rect.top - 50}px`; // Adjust as needed
overlay.style.left = `${window.scrollX + rect.left + rect.width / 2 - 70}px`; // Adjust to center the overlay

selectedText = text;
selectedRange = range;

• Permintaan API: Hantar permintaan POST ke API AI/ML dengan teks yang dipilih untuk penukaran teks ke pertuturan.

// Remove existing overlay if any
const existingOverlay = document.getElementById('read-aloud-overlay');
if (existingOverlay) {
  existingOverlay.remove();
}

// Append the overlay to the document body
document.body.appendChild(overlay);
} else {
  // Remove overlay if no text is selected
  const existingOverlay = document.getElementById('read-aloud-overlay');
  if (existingOverlay) {
    existingOverlay.remove();
  }
}

• Pengendalian Ralat: Kendalikan sebarang ralat yang berlaku semasa permintaan API dengan anggun.

// Function to handle text selection
document.addEventListener('mouseup', (event) => {
  console.log('mouseup event: ', event);
  const selection = window.getSelection();
  const text = selection.toString().trim();
  if (text !== '') {
    const range = selection.getRangeAt(0);
    const rect = range.getBoundingClientRect();

    // Set the position of the overlay
    overlay.style.top = `${window.scrollY + rect.top - 50}px`; // Adjust as needed
    overlay.style.left = `${window.scrollX + rect.left + rect.width / 2 - 70}px`; // Adjust to center the overlay

    selectedText = text;
    selectedRange = range;

    // Remove existing overlay if any
    const existingOverlay = document.getElementById('read-aloud-overlay');
    if (existingOverlay) {
      existingOverlay.remove();
    }

    // Append the overlay to the document body
    document.body.appendChild(overlay);
  } else {
    // Remove overlay if no text is selected
    const existingOverlay = document.getElementById('read-aloud-overlay');
    if (existingOverlay) {
      existingOverlay.remove();
    }
  }
});

• Main Balik Audio: Setelah audio diterima, mainkannya semula kepada pengguna.

if (selectedText.length > 200) {
// ...code
}

Menggunakan IndexedDB untuk Storan

Untuk mengurus fail audio dengan cekap:

• Pangkalan Data Terbuka: Buat atau buka pangkalan data IndexedDB untuk menyimpan gumpalan audio.

// Disable the button
askButton.disabled = true;
askButton.innerText = 'Loading...';

• Simpan Audio: Simpan gumpalan audio dalam IndexedDB selepas menerimanya daripada API.

// Send the selected text to your AI/ML API for TTS
const response = await fetch('https://api.aimlapi.com/tts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${AIML_API_KEY}`, // Replace with your actual API key
  },
  body: JSON.stringify({
    model: '#g1_aura-asteria-en',  // Replace with your specific model if needed
    text: selectedText
  })
});

• Dapatkan Audio: Ambil gumpalan audio daripada IndexedDB untuk main semula.

try {

  // ...code

  if (!response.ok) {
    throw new Error('API request failed');
  }

  // ...code

} catch (error) {
  console.error('Error:', error);
  askButton.disabled = false;
  askButton.innerText = 'Read Aloud';
  alert('An error occurred while fetching the audio.');
}

• Padam Audio: Alih keluar gumpalan audio daripada pangkalan data selepas main balik untuk mengosongkan ruang.

// Play the audio
audio.play();

Pembersihan dan Pengalaman Pengguna

• Alih Keluar Tindanan: Alih keluar tindanan jika pengguna mengklik di tempat lain atau menyahpilih teks.

// Open IndexedDB
const db = await openDatabase();
const audioId = 'audio_' + Date.now(); // Generate a unique ID for the audio

• Butang Dayakan Semula: Pastikan butang "Baca Lantang" didayakan semula selepas pemprosesan selesai.
• Maklum Balas Pengguna: Berikan isyarat visual, seperti menukar teks butang kepada "Memuatkan…", untuk memaklumkan pengguna bahawa pemprosesan sedang dijalankan.

Kod penuh:

// Save audio blob to IndexedDB
await saveAudioToIndexedDB(db, audioId, audioBlob);

---

Melaksanakan Fungsi IndexedDB

IndexedDB ialah sistem storan sebelah pelanggan yang berkuasa yang membolehkan kami menyimpan sejumlah besar data, termasuk fail dan gumpalan.

Kefungsian untuk Dilaksanakan

Anda perlu mencipta empat fungsi utama untuk berinteraksi dengan IndexedDB:

• openDatabase(): Membuka sambungan ke pangkalan data dan mencipta stor objek jika ia tidak wujud.

mkdir my-first-chrome-extension
cd my-first-chrome-extension

• saveAudioToIndexedDB(): Menyimpan gumpalan audio dengan ID unik.

touch manifest.json
touch scripts.js
touch styles.css

• getAudioFromIndexedDB(): Mengambil gumpalan audio menggunakan IDnya.

{
  "manifest_version": 3,
  "name": "Read Aloud",
  "version": "1.0",
  "description": "Read Aloud anything in any tab",
  "host_permissions": [
    "*://*.aimlapi.com/*"
],
  "permissions": [
      "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["scripts.js"],
      "css": ["styles.css"]
    }
  ],
  "icons": {
    "16": "icons/icon.png",
    "48": "icons/icon.png",
    "128": "icons/icon.png"
  }
}

• deleteAudioFromIndexedDB(): Memadam gumpalan audio selepas main balik.

// Set your AIML_API_KEY key
const AIML_API_KEY = ''; // Replace with your AIML_API_KEY key

// Create the overlay
const overlay = document.createElement('div');
overlay.id = 'read-aloud-overlay';

// Create the "Read Aloud" button
const askButton = document.createElement('button');
askButton.id = 'read-aloud-button';
askButton.innerText = 'Read Aloud';

// Append the button to the overlay
overlay.appendChild(askButton);

// Variables to store selected text and range
let selectedText = '';
let selectedRange = null;

Konsep Utama

• Transaksi: Semua interaksi dengan IndexedDB berlaku dalam transaksi. Pastikan anda menentukan mod transaksi yang betul (baca sahaja atau tulis baca).
• Stor Objek: Sama seperti jadual dalam pangkalan data SQL, stor objek menyimpan data. Kami akan menggunakan kedai objek bernama "audios".
• Pengendalian Ralat: Sentiasa kendalikan ralat untuk operasi pangkalan data untuk mengelakkan tingkah laku yang tidak dijangka.

---

Menggayakan dengan gaya.css

Untuk memberikan pengalaman pengguna yang lancar, sambungan anda harus mempunyai antara muka yang bersih dan intuitif.

Menggayakan Tindanan dan Butang

Tentukan gaya untuk:

• Kedudukan Tindanan: Kedudukan mutlak untuk meletakkan tindanan berhampiran teks yang dipilih.

document.addEventListener('mouseup', (event) => {
  console.log('mouseup event: ', event);
  //...code
}

• Kenampakan Butang: Menggayakan butang "Baca Lantang" untuk memadankan tindanan dan boleh diklik dengan mudah.

const selection = window.getSelection();
const text = selection.toString().trim();
if (text !== '') {
  const range = selection.getRangeAt(0);
  const rect = range.getBoundingClientRect();

• Kesan Tuding: Tingkatkan interaksi pengguna dengan kesan tuding pada butang.

// Set the position of the overlay
overlay.style.top = `${window.scrollY + rect.top - 50}px`; // Adjust as needed
overlay.style.left = `${window.scrollX + rect.left + rect.width / 2 - 70}px`; // Adjust to center the overlay

selectedText = text;
selectedRange = range;

• Keadaan Dilumpuhkan: Tunjukkan secara visual apabila butang dilumpuhkan.

// Remove existing overlay if any
const existingOverlay = document.getElementById('read-aloud-overlay');
if (existingOverlay) {
  existingOverlay.remove();
}

// Append the overlay to the document body
document.body.appendChild(overlay);
} else {
  // Remove overlay if no text is selected
  const existingOverlay = document.getElementById('read-aloud-overlay');
  if (existingOverlay) {
    existingOverlay.remove();
  }
}

---

Mendapatkan dan Menetapkan Kunci API Anda

Untuk berinteraksi dengan model API AI/ML dan Deepgram Aura, anda memerlukan kunci API.

Langkah-langkah untuk Mendapatkan Kunci API Anda

• Lawati Platform API AI/ML: Navigasi ke aimlapi.com.

• Log Masuk: Klik "Dapatkan Kunci API" dan log masuk menggunakan akaun Google anda.

• Akses Papan Pemuka: Selepas log masuk, anda akan diubah hala ke papan pemuka anda.

• Buat Kunci API: Pergi ke tab "Pengurusan Kunci" dan klik "Buat Kunci API."

• Salin Kunci API: Setelah dijana, salin kunci API anda.

Menetapkan Kunci API dalam Sambungan Anda

• Nota Keselamatan: Jangan sekali-kali mengeraskan kunci API anda ke dalam skrip anda jika anda bercadang untuk mengedarkan sambungan anda. Pertimbangkan untuk menggunakan pembolehubah persekitaran atau menggesa pengguna memasukkan kunci API mereka.

mkdir my-first-chrome-extension
cd my-first-chrome-extension

Sekarang letakkan Kunci API anda:

touch manifest.json
touch scripts.js
touch styles.css

Tetapi ia tidak akan berfungsi serta-merta. Menggunakan .env dalam sambungan Chrome memerlukan konfigurasi tambahan lain. Kami akan membincangkan perkara ini dalam tutorial akan datang.

• Untuk Pengujian: Dalam scripts.js anda, tetapkan kunci API anda kepada pengesahan pengendalian pembolehubah untuk permintaan API.

{
  "manifest_version": 3,
  "name": "Read Aloud",
  "version": "1.0",
  "description": "Read Aloud anything in any tab",
  "host_permissions": [
    "*://*.aimlapi.com/*"
],
  "permissions": [
      "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["scripts.js"],
      "css": ["styles.css"]
    }
  ],
  "icons": {
    "16": "icons/icon.png",
    "48": "icons/icon.png",
    "128": "icons/icon.png"
  }
}

---

Menjalankan dan Menguji Sambungan

Dengan semua komponen disediakan, tiba masanya untuk memuatkan sambungan anda ke dalam penyemak imbas Chrome dan melihatnya dalam tindakan.

Memuatkan Sambungan

• Buka Halaman Sambungan: Dalam Chrome, navigasi ke chrome://extensions/.

Dayakan Mod Pembangun: Togol suis "Mod Pembangun" di penjuru kanan sebelah atas.

• Muat Sambungan Tidak Dibungkus: Klik "Muat dibongkar" dan pilih folder sambungan krom-saya-pertama anda. (p.s. dalam kes saya ia adalah aimlapi-tutorial-one).

• Sahkan Pemasangan: Sambungan kini sepatutnya muncul dalam senarai dengan nama dan ikonnya.

Kefungsian Pengujian

• Navigasi ke Halaman Web: Buka halaman web dengan kandungan teks, seperti artikel atau catatan blog.
• Pilih Teks: Serlahkan perenggan atau ayat.
• Berinteraksi dengan Tindanan: Tindanan "Memuatkan…" sepatutnya muncul di atas teks yang dipilih. Tunggu beberapa saat sambil memulakan proses teks ke pertuturan.
• Dengar: Selepas tempoh pemprosesan yang singkat, anda sepatutnya mendengar teks dibaca dengan kuat oleh suara AI.

Petua Penyelesaian Masalah

• Tindanan Tidak Muncul: Semak sama ada content_scripts dinyatakan dengan betul dalam manifest.json.
• Tiada Main Balik Audio: Sahkan kunci API anda ditetapkan dengan betul dan permintaan API berjaya.
• Ralat Konsol: Gunakan alatan pembangun penyemak imbas untuk memeriksa sebarang ralat JavaScript atau isu rangkaian.

---

Ringkasan Projek

Dalam tutorial ini, kami telah:

• Sediakan Persekitaran Pembangunan: Mencipta struktur projek dan fail yang diperlukan untuk sambungan Chrome.
• Manifes.json yang dikonfigurasikan: Metadata dan kebenaran penting yang ditentukan, memahami kepentingan setiap medan.
• Skrip.js yang dibangunkan: Menggariskan logik untuk mengendalikan pemilihan teks, berinteraksi dengan AI/ML API dan mengurus main balik audio.
• Pengintegrasian IndexedDB yang Dilaksanakan: Mempelajari cara menggunakan IndexedDB untuk menyimpan dan mendapatkan semula fail audio secara setempat.
• Menggayakan Sambungan dengan styles.css: Menggunakan CSS untuk meningkatkan antara muka pengguna dan meningkatkan pengalaman pengguna.
• Mendapatkan dan Menyediakan Kunci API: Memperoleh kunci API daripada platform API AI/ML dan menyepadukannya dengan selamat ke dalam sambungan kami.
• Memuatkan dan Menguji Sambungan: Menggunakan sambungan dalam Chrome dan mengesahkan fungsinya pada halaman web langsung.
• Amalan Terbaik yang Dibincangkan: Menekankan kepentingan keselamatan, pengalaman pengguna dan pengendalian ralat dalam pembangunan sambungan.

---

Langkah Seterusnya

Dengan asas yang kukuh, anda boleh meningkatkan lanjutan anda:

• Tambah Pilihan Penyesuaian: Benarkan pengguna memilih suara atau bahasa yang berbeza.
• Tingkatkan Pengendalian Ralat: Sediakan mesej mesra pengguna dan pilihan sandaran jika API tidak tersedia.
• Optimumkan Prestasi: Laksanakan strategi caching atau optimumkan permintaan API untuk mengurangkan kependaman.
• Terbitkan Sambungan Anda: Kongsi ciptaan anda dengan orang lain dengan menerbitkannya di Kedai Web Chrome.

---

Kesimpulan

Tahniah kerana membina sambungan Chrome yang menyepadukan keupayaan AI lanjutan! Projek ini mempamerkan cara menggabungkan teknologi web dengan API yang berkuasa boleh mencipta pengalaman pengguna yang menarik dan boleh diakses. Anda kini dilengkapi dengan pengetahuan untuk membangun dan mengembangkan sambungan ini atau mencipta sambungan baharu sepenuhnya yang memanfaatkan API AI/ML.

Pelaksanaan penuh tersedia di Github; https://github.com/TechWithAbee/Building-a-Chrome-Extension-from-Scratch-with-AI-ML-API-Deepgram-Aura-and-IndexDB-Integration

---

Sekiranya anda mempunyai sebarang pertanyaan atau memerlukan bantuan lanjut, jangan teragak-agak untuk menghubungi melalui e-mel di abdibrokhim@gmail.com.

Atas ialah kandungan terperinci Membina Sambungan Chrome daripada Scratch dengan API AI/ML, Deepgram Aura dan Integrasi IndexedDB. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!