Rumah > hujung hadapan web > tutorial js > Bina syor \'Untuk anda\' menggunakan AI pada Fastly!

Bina syor \'Untuk anda\' menggunakan AI pada Fastly!

王林
Lepaskan: 2024-08-07 21:54:53
asal
1020 orang telah melayarinya

Lupakan gembar-gembur; di manakah AI menyampaikan nilai sebenar? Mari gunakan pengkomputeran tepi untuk memanfaatkan kuasa AI dan menjadikan pengalaman pengguna yang lebih bijak yang juga pantas, selamat dan boleh dipercayai.

Pengesyoran ada di mana-mana dan semua orang tahu bahawa menjadikan pengalaman web lebih diperibadikan menjadikannya lebih menarik dan berjaya. Halaman utama Amazon saya tahu bahawa saya suka kelengkapan rumah, peralatan dapur dan sekarang, pakaian musim panas:

Build

Hari ini, kebanyakan platform membuatkan anda memilih sama ada menjadi pantas atau diperibadikan. Di Fastly, kami fikir anda — dan pengguna anda — layak untuk memiliki kedua-duanya. Jika setiap kali pelayan web anda menjana halaman, ia hanya sesuai untuk satu pengguna akhir, anda tidak akan mendapat manfaat daripada menyimpannya, yang mana rangkaian tepi seperti Fastly berfungsi dengan baik.

Jadi, bagaimanakah anda boleh mendapat manfaat daripada caching tepi, namun menjadikan kandungan diperibadikan? Kami telah menulis banyak perkara sebelum ini tentang cara memecahkan permintaan pelanggan yang kompleks kepada berbilang permintaan bahagian belakang yang lebih kecil dan boleh disimpan dalam cache dan anda akan menemui tutorial, contoh kod dan tunjuk cara dalam topik pemperibadian di hab pembangun kami.

Tetapi bagaimana jika anda ingin pergi lebih jauh dan menjana data pemperibadian di tepi? "Tepi" - pelayan Fastly yang mengendalikan trafik tapak web anda, adalah titik paling dekat dengan pengguna akhir yang masih dalam kawalan anda. Tempat yang bagus untuk menghasilkan kandungan yang khusus untuk seorang pengguna.

Kes penggunaan "Untuk anda".

Pengesyoran produk sememangnya bersifat sementara, khusus untuk pengguna individu dan berkemungkinan kerap berubah. Tetapi mereka juga tidak perlu berterusan - kami biasanya tidak perlu mengetahui perkara yang kami cadangkan kepada setiap orang, hanya sama ada algoritma tertentu mencapai penukaran yang lebih baik daripada yang lain. Sesetengah algoritma pengesyoran memerlukan akses kepada sejumlah besar data keadaan, seperti perkara yang paling serupa dengan anda dan sejarah pembelian atau penilaian mereka, tetapi selalunya data tersebut mudah dijana secara pukal.

Pada asasnya, menjana pengesyoran biasanya tidak membuat transaksi, tidak memerlukan sebarang kunci dalam stor data anda dan menggunakan data input yang sama ada tersedia serta-merta daripada sesi pengguna semasa atau dibuat dalam proses binaan luar talian.

Nampaknya kami boleh menjana cadangan di tepi!

Contoh dunia sebenar

Mari kita lihat laman web Muzium Seni Metropolitan New York:

Build

Setiap daripada 500,000 atau lebih objek dalam koleksi Met mempunyai halaman dengan gambar dan maklumat mengenainya. Ia juga mempunyai senarai objek berkaitan ini:

Build

Ini nampaknya menggunakan sistem faceting yang agak mudah untuk menjana hubungan ini, menunjukkan kepada saya karya seni lain oleh artis yang sama, atau objek lain dalam sayap muzium yang sama, atau yang juga diperbuat daripada kertas atau berasal dari yang sama tempoh masa.

Perkara yang menarik tentang sistem ini (dari perspektif pembangun!) ialah memandangkan ia hanya berdasarkan satu objek input, ia boleh dijana terlebih dahulu ke dalam halaman.

Bagaimana jika kami ingin menambah ini dengan pilihan pengesyoran yang berdasarkan sejarah penyemakan imbas peribadi pengguna akhir semasa mereka menavigasi di sekitar tapak web Met, bukan hanya berdasarkan satu objek ini?

Menambah syor diperibadikan

Terdapat banyak cara yang boleh kita lakukan, tetapi saya ingin mencuba menggunakan model bahasa, memandangkan AI berlaku sekarang, dan ia benar-benar berbeza daripada cara mekanisme kerja seni berkaitan Met yang sedia ada kelihatan. kerja. Inilah rancangannya:

  1. Muat turun set data koleksi akses terbuka Met.
  2. Jalankannya melalui model bahasa untuk mencipta pembenaman vektor – senarai nombor yang sesuai untuk tugasan pembelajaran mesin.
  3. Bina enjin carian persamaan yang berprestasi untuk setengah juta vektor yang terhasil (mewakili karya seni Met) dan muatkannya ke kedai KV supaya kami boleh menggunakannya daripada Fastly Compute.

Setelah kami melakukan semua itu, kami sepatutnya dapat, sambil anda menyemak imbas tapak web Met:

  1. Jejak karya seni yang anda lawati dalam kuki.
  2. Cari vektor yang sepadan dengan karya seni tersebut.
  3. Kira vektor purata yang mewakili minat menyemak imbas anda.
  4. Palamkan itu ke dalam enjin carian persamaan kami untuk mencari karya seni yang paling serupa.
  5. Muat butiran tentang karya seni tersebut daripada API Met's Object dan tambahkan halaman dengan pengesyoran yang diperibadikan.

Et voilà, syor diperibadikan:

Build

OK, jadi mari kita pecahkan perkara itu.

Mencipta set data

Data data mentah Met ialah CSV dengan banyak lajur dan kelihatan seperti ini:

Object Number,Is Highlight,Is Timeline Work,Is Public Domain,Object ID,Gallery Number,Department,AccessionYear,Object Name,Title,Culture,Period,Dynasty,Reign,Portfolio,Constituent ID,Artist Role,Artist Prefix,Artist Display Name,Artist Display Bio,Artist Suffix,Artist Alpha Sort,Artist Nationality,Artist Begin Date,Artist End Date,Artist Gender,Artist ULAN URL,Artist Wikidata URL,Object Date,Object Begin Date,Object End Date,Medium,Dimensions,Credit Line,Geography Type,City,State,County,Country,Region,Subregion,Locale,Locus,Excavation,River,Classification,Rights and Reproduction,Link Resource,Object Wikidata URL,Metadata Date,Repository,Tags,Tags AAT URL,Tags Wikidata URL
1979.486.1,False,False,False,1,,The American Wing,1979,Coin,One-dollar Liberty Head Coin,,,,,,16429,Maker," ",James Barton Longacre,"American, Delaware County, Pennsylvania 1794–1869 Philadelphia, Pennsylvania"," ","Longacre, James Barton",American,1794      ,1869      ,,http://vocab.getty.edu/page/ulan/500011409,https://www.wikidata.org/wiki/Q3806459,1853,1853,1853,Gold,Dimensions unavailable,"Gift of Heinz L. Stoppelmann, 1979",,,,,,,,,,,,,,http://www.metmuseum.org/art/collection/search/1,,,"Metropolitan Museum of Art, New York, NY",,,
1980.264.5,False,False,False,2,,The American Wing,1980,Coin,Ten-dollar Liberty Head Coin,,,,,,107,Maker," ",Christian Gobrecht,1785–1844," ","Gobrecht, Christian",American,1785      ,1844      ,,http://vocab.getty.edu/page/ulan/500077295,https://www.wikidata.org/wiki/Q5109648,1901,1901,1901,Gold,Dimensions unavailable,"Gift of Heinz L. Stoppelmann, 1980",,,,,,,,,,,,,,http://www.metmuseum.org/art/collection/search/2,,,"Metropolitan Museum of Art, New York, NY",,,
Salin selepas log masuk

Cukup mudah untuk mengubahnya menjadi dua lajur, ID dan rentetan:

id,description
1,"One-dollar Liberty Head Coin; Type: Coin; Artist: James Barton Longacre; Medium: Gold; Date: 1853; Credit: Gift of Heinz L. Stoppelmann, 1979"
2,"Ten-dollar Liberty Head Coin; Type: Coin; Artist: Christian Gobrecht; Medium: Gold; Date: 1901; Credit: Gift of Heinz L. Stoppelmann, 1980"
3,"Two-and-a-Half Dollar Coin; Type: Coin; Medium: Gold; Date: 1927; Credit: Gift of C. Ruxton Love Jr., 1967"
Salin selepas log masuk

Kini kita boleh menggunakan pakej transformer daripada set alat Hugging Face AI, dan menjana pembenaman setiap huraian ini. Kami menggunakan model pengubah ayat/semua-MiniLM-L12-v2 dan menggunakan analisis komponen utama (PCA) untuk mengurangkan vektor yang terhasil kepada 5 dimensi. Itu memberi anda sesuatu seperti:

[
  {
    "id": 1,
    "vector": [ -0.005544120445847511, -0.030924081802368164, 0.008597176522016525, 0.20186401903629303, 0.0578165128827095 ]
  },
  {
    "id": 2,
    "vector": [ -0.005544120445847511, -0.030924081802368164, 0.008597176522016525, 0.20186401903629303, 0.0578165128827095 ]
  },
  …
]
Salin selepas log masuk

Kami mempunyai setengah juta daripada ini, jadi tidak mungkin untuk menyimpan keseluruhan set data ini dalam memori apl tepi. Dan kami ingin melakukan jenis carian persamaan tersuai ke atas data ini, yang merupakan sesuatu yang tidak ditawarkan oleh kedai nilai kunci tradisional. Memandangkan kami sedang membina pengalaman masa nyata, kami juga benar-benar ingin mengelak daripada mencari setengah juta vektor pada satu masa.

Jadi, mari bahagikan data. Kita boleh menggunakan pengelompokan KMeans untuk mengumpulkan vektor yang serupa antara satu sama lain. Kami menghiris data kepada 500 kelompok dengan saiz yang berbeza-beza dan mengira titik tengah yang dipanggil "vektor centroid" untuk setiap kelompok tersebut. Jika anda memplot ruang vektor ini dalam dua dimensi dan mengezum masuk, ia mungkin kelihatan seperti ini:

Build

Palang merah ialah titik pusat matematik bagi setiap kelompok vektor, dipanggil centroid. Mereka boleh berfungsi seperti pencari jalan untuk ruang setengah juta vektor kami. Sebagai contoh, jika kita ingin mencari 10 vektor yang paling serupa dengan vektor A tertentu, kita boleh mencari centroid terdekat (daripada 500) dahulu, kemudian lakukan carian kita hanya dalam kelompok yang sepadan–kawasan yang lebih mudah diurus!

Kini kami mempunyai 500 set data kecil dan indeks yang memetakan titik centroid kepada set data yang berkaitan. Seterusnya, untuk mendayakan prestasi masa nyata, kami ingin menyusun semula graf carian supaya kami tidak perlu memulakan dan membinanya pada masa jalan dan boleh menggunakan masa CPU sesedikit mungkin. Algoritma jiran terdekat yang sangat pantas ialah Hierarchical Navigable Small Worlds (HNSW), dan ia mempunyai pelaksanaan Rust tulen, yang kami gunakan untuk menulis apl kelebihan kami. Oleh itu, kami menulis apl Rust kendiri yang kecil untuk membina struktur graf HNSW bagi setiap set data, dan kemudian menggunakan kod bin untuk mengeksport memori struct yang di instantiated ke dalam gumpalan binari.

Kini, gumpalan binari tersebut boleh dimuatkan ke dalam stor KV, dikunci pada indeks kelompok dan indeks kelompok boleh disertakan dalam apl tepi kami.

Seni bina ini membolehkan kami memuatkan bahagian indeks carian ke dalam memori atas permintaan. Dan kerana kami tidak perlu mencari lebih daripada beberapa ribu vektor pada satu masa, carian kami akan sentiasa murah dan pantas.

Membina apl edge

Aplikasi yang kami jalankan di tepi perlu mengendalikan beberapa jenis permintaan:

  • Halaman HTML: Kami mengambilnya daripada metmuseum.org dan mengubah respons untuk menambah dan tag, supaya kami boleh menyuntik sedikit pemprosesan dan kandungan bahagian hadapan kami sendiri
  • Sumber skrip dan gaya Fastly dirujuk oleh teg tambahan tersebut, yang boleh kami sediakan terus daripada perduaan apl edge.
  • Titik akhir pengesyorkan, yang menjana dan mengembalikan pengesyoran ** Semua permintaan lain (bukan HTML): Imej, dan skrip serta helaian gaya Met sendiri, yang kami proksi terus dari domain mereka tanpa perubahan.

Kami pada mulanya membina apl ini dalam JavaScript, tetapi akhirnya mengalihkan bahagian pengesyor kepada Rust kerana kami menyukai pelaksanaan HNSW dalam jarak segera.

JavaScript pihak pelanggan melakukan beberapa perkara menarik:

  1. Menggunakan IntersectionObserver, kami mencetuskan peristiwa apabila pengguna menatal ke bawah halaman ke bahagian objek yang berkaitan. Ini ialah API super cekap yang jauh lebih baik daripada menggunakan kaedah lama seperti onscroll.
  2. Buat pengambilan titik akhir API pengesyoran khas kami (yang kemudiannya boleh kami kendalikan di tepi dan kembalikan maklumat objek)
  3. Karang beberapa HTML menggunakan templat terbina dalam fungsi sisi klien
  4. Tambahkan HTML itu pada halaman dan alihkan pemerhati persimpangan ke elemen baharu supaya sambil anda menatal melalui pengesyoran, kami terus memuatkan lebih banyak lagi.

Dengan cara ini, kami boleh menghantar muatan HTML utama tanpa menggunakan algoritma pengesyoran kami, tetapi pengesyoran dihantar dengan cukup pantas sehingga kami boleh memuatkannya semasa anda menatal dan hampir pasti ia akan berada di sana apabila anda sampai kepadanya.

Saya suka melakukan perkara dengan cara ini kerana memberikan paparan pertama di bahagian atas kepada pengguna secepat mungkin adalah sangat penting. Apa-apa sahaja yang anda tidak dapat lihat melainkan anda menatal boleh dimuatkan kemudian, dan terutamanya jika ia merupakan kandungan yang diperibadikan yang kompleks - tiada gunanya menjananya jika pengguna tidak merancang untuk menatal.

Menutup pemikiran

Jadi kini anda mempunyai yang terbaik dari kedua-dua dunia: keupayaan untuk menyampaikan kandungan yang sangat diperibadikan, hampir tidak memerlukan sebarang pengambilan sekatan ke asal, dan muatan HTML yang dioptimumkan yang menghasilkan sangat pantas, membolehkan aplikasi anda menikmati skalabiliti tanpa had dengan berkesan dan hampir daya tahan yang sempurna.

Ia bukan penyelesaian yang sempurna. Alangkah baiknya jika Fastly menawarkan lebih banyak ciri tahap lebih tinggi untuk mendedahkan data tepi melalui mekanisme pertanyaan selain daripada carian kunci mudah (beritahu kami jika itu akan membantu anda!) dan mekanisme khusus ini mempunyai kelemahan yang jelas - jika saya mempunyai minat yang berasingan dalam dua atau lebih perkara yang sangat berbeza (katakan lukisan minyak abad ke-19 dan amphora Rom purba) Saya akan mendapat pengesyoran yang akan menjadi "titik tengah" semantik teori di antaranya, bukan hasil yang sangat berguna.

Namun, mudah-mudahan ini menunjukkan prinsip bahawa memikirkan cara melakukan kerja di pinggir selalunya menghasilkan faedah yang terlalu besar dari segi skalabilitas, prestasi dan daya tahan.

Beri tahu kami perkara yang anda bina di community.fastly.com!

Atas ialah kandungan terperinci Bina syor \'Untuk anda\' menggunakan AI pada Fastly!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan