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.
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:
Selam mendalam ke dalam Dokumentasi API AI/ML; https://docs.aimlapi.com/
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/
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
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
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.
Sebelum kami memulakan pengekodan, pastikan anda mempunyai perkara berikut:
Sambungan Chrome yang minimum memerlukan sekurang-kurangnya tiga fail:
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
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"
}
}
Sekurang-kurangnya, manifest.json mesti mengandungi:
Di luar medan penting, kami akan menambah:
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.
Dengan semua medan ditakrifkan dengan betul, manifes.json anda akan membolehkan penyemak imbas memahami dan memuatkan sambungan anda dengan betul.
Fail scripts.js mengandungi logik yang mengawal cara sambungan anda berfungsi. Kami akan menggariskan fungsi utama skrip anda perlu laksanakan.
Mulakan dengan menyediakan pembolehubah yang diperlukan:
mkdir my-first-chrome-extension cd my-first-chrome-extension
Pelanjutan anda harus mengesan apabila pengguna memilih teks pada halaman web:
mkdir my-first-chrome-extension cd my-first-chrome-extension
touch manifest.json touch scripts.js touch styles.css
{
"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"
}
}
// 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;
document.addEventListener('mouseup', (event) => {
console.log('mouseup event: ', event);
//...code
}
Apabila pengguna mengklik butang "Baca dengan lantang":
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();
}
}
// 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();
}
}
});
if (selectedText.length > 200) {
// ...code
}
Untuk mengurus fail audio dengan cekap:
// Disable the button askButton.disabled = true; askButton.innerText = 'Loading...';
// 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
})
});
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.');
}
// Play the audio audio.play();
// Open IndexedDB const db = await openDatabase(); const audioId = 'audio_' + Date.now(); // Generate a unique ID for the audio
// Save audio blob to IndexedDB await saveAudioToIndexedDB(db, audioId, audioBlob);
IndexedDB ialah sistem storan sebelah pelanggan yang berkuasa yang membolehkan kami menyimpan sejumlah besar data, termasuk fail dan gumpalan.
Anda perlu mencipta empat fungsi utama untuk berinteraksi dengan IndexedDB:
mkdir my-first-chrome-extension cd my-first-chrome-extension
touch manifest.json touch scripts.js touch styles.css
{
"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"
}
}
// 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;
Untuk memberikan pengalaman pengguna yang lancar, sambungan anda harus mempunyai antara muka yang bersih dan intuitif.
Tentukan gaya untuk:
document.addEventListener('mouseup', (event) => {
console.log('mouseup event: ', event);
//...code
}
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();
}
}
Untuk berinteraksi dengan model API AI/ML dan Deepgram Aura, anda memerlukan kunci API.
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.
{
"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"
}
}
Dengan semua komponen disediakan, tiba masanya untuk memuatkan sambungan anda ke dalam penyemak imbas Chrome dan melihatnya dalam tindakan.
Dayakan Mod Pembangun: Togol suis "Mod Pembangun" di penjuru kanan sebelah atas.
Dalam tutorial ini, kami telah:
Dengan asas yang kukuh, anda boleh meningkatkan lanjutan anda:
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!
Pengenalan kepada rangka kerja yang digunakan oleh vscode
Apakah itu Bitcoin? Adakah ia satu penipuan?
Bagaimana untuk mengimport easygui dalam vscode
Apakah itu Bitcoin ETF?
Bagaimana untuk memadam emotikon WeChat
Bagaimana untuk menetapkan textarea baca sahaja
Perbezaan antara wlan dan wifi
Adakah sah untuk membeli dan menjual Bitcoin di Huobi.com?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
