찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Fastly에서 AI를 사용하여 \'당신을 위한\' 추천을 구축하세요!

Fastly에서 AI를 사용하여 \'당신을 위한\' 추천을 구축하세요!

王林
王林원래의
2024-08-07 21:54:531021검색

과대광고는 잊어버리세요. AI가 실제 가치를 제공하는 곳은 어디입니까? 엣지 컴퓨팅을 사용하여 AI의 힘을 활용하고 빠르고 안전하며 신뢰할 수 있는 보다 스마트한 사용자 경험을 만들어 봅시다.

추천은 어디에나 있으며, 웹 경험을 더욱 개인화하면 더욱 매력적이고 성공할 수 있다는 사실은 모두가 알고 있습니다. 내 Amazon 홈페이지에서는 내가 가정용 가구, 주방용품, 그리고 현재 여름 의류를 좋아한다는 것을 알고 있습니다.

Build

오늘날 대부분의 플랫폼에서는 속도와 개인화 중 하나를 선택하게 됩니다. Fastly에서는 귀하와 귀하의 사용자가 이 두 가지를 모두 가질 자격이 있다고 생각합니다. 웹 서버가 페이지를 생성할 때마다 페이지가 한 명의 최종 사용자에게만 적합하다면 캐싱의 이점을 누릴 수 없습니다. 이는 Fastly와 같은 에지 네트워크가 잘하는 일입니다.

그렇다면 엣지 캐싱의 이점을 누리면서 콘텐츠를 개인화할 수 있는 방법은 무엇일까요? 복잡한 클라이언트 요청을 캐시 가능한 여러 개의 작은 백엔드 요청으로 나누는 방법에 대해 이전에 많은 글을 작성했으며 개발자 허브의 개인화 주제에서 튜토리얼, 코드 예제 및 데모를 찾을 수 있습니다.

하지만 더 나아가 엣지에서 개인화 데이터를 생성하고 싶다면 어떻게 해야 할까요? 귀하의 웹사이트 트래픽을 처리하는 Fastly 서버인 "에지"는 귀하가 통제할 수 있는 최종 사용자에게 가장 가까운 지점입니다. 한 명의 사용자에게 특화된 콘텐츠를 제작하기에 좋은 곳입니다.

"당신을 위한" 사용 사례

제품 추천은 본질적으로 일시적이고 개별 사용자에게만 국한되며 자주 변경될 수 있습니다. 하지만 지속할 필요도 없습니다. 일반적으로 각 사람에게 무엇을 권장했는지 알 필요는 없으며 특정 알고리즘이 다른 알고리즘보다 더 나은 전환을 달성하는지 여부만 알면 됩니다. 일부 추천 알고리즘은 귀하와 가장 유사한 사용자, 구매 또는 평가 내역 등 대량의 상태 데이터에 액세스해야 하지만 해당 데이터는 대량으로 사전 생성되기 쉬운 경우가 많습니다.

기본적으로 권장 사항을 생성하면 일반적으로 트랜잭션이 생성되지 않고 데이터 저장소에 잠금이 필요하지 않으며 현재 사용자 세션에서 즉시 사용할 수 있거나 오프라인 빌드 프로세스에서 생성된 입력 데이터를 사용합니다.

에지에서 추천을 생성할 수 있을 것 같습니다!

실제 사례

뉴욕 메트로폴리탄 미술관 홈페이지를 살펴보겠습니다.

Build

Met 컬렉션에 있는 500,000여 점의 물건 각각에는 사진과 그에 대한 정보가 포함된 페이지가 있습니다. 또한 다음과 같은 관련 개체 목록도 있습니다.

Build

이러한 관계를 생성하기 위해 상당히 간단한 패시팅 시스템을 사용하는 것 같습니다. 동일한 예술가의 다른 작품이나 박물관의 같은 건물에 있는 다른 개체 또는 종이로 만들어졌거나 같은 건물에서 유래한 다른 개체를 보여줍니다. 기간.

개발자 관점에서 볼 때 이 시스템의 좋은 점은 하나의 입력 개체에만 기반을 두기 때문에 페이지에 미리 생성할 수 있다는 것입니다.

단지 하나의 개체를 기반으로 하는 것이 아니라 Met 웹사이트를 탐색할 때 최종 사용자의 개인 검색 기록을 기반으로 한 추천 항목을 선택하여 이를 강화하려면 어떻게 해야 할까요?

맞춤 추천 추가

이를 수행할 수 있는 방법은 많지만 AI가 현재 발생하고 Met의 기존 관련 예술 작품 메커니즘이 보이는 방식과는 정말 다르기 때문에 언어 모델을 사용해 보고 싶었습니다. 일하다. 계획은 다음과 같습니다.

  1. Met의 오픈 액세스 컬렉션 데이터세트를 다운로드하세요.
  2. 언어 모델을 통해 실행하여 머신러닝 작업에 적합한 숫자 목록인 벡터 임베딩을 생성합니다.
  3. (Met의 예술 작품을 대표하는) 50만 개의 벡터 결과에 대한 고성능 유사성 검색 엔진을 구축하고 Fastly Compute에서 사용할 수 있도록 KV 스토어에 로드합니다.

이 모든 작업을 완료하고 나면 Met 웹사이트를 탐색하실 수 있을 것입니다.

  1. 내가 방문한 작품을 쿠키로 추적하세요.
  2. 해당 작품에 해당하는 벡터를 찾아보세요.
  3. 탐색 관심분야를 나타내는 평균 벡터를 계산합니다.
  4. 가장 유사한 작품을 찾으려면 유사성 검색 엔진에 연결하세요.
  5. Met의 Object API에서 해당 작품에 대한 세부정보를 로드하고 맞춤 추천으로 페이지를 보강하세요.

자, 맞춤 추천:

Build

자, 그럼 분석해 보겠습니다.

데이터세트 만들기

Met의 원시 데이터 세트는 많은 열이 포함된 CSV이며 다음과 같습니다.

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",,,

ID와 문자열이라는 두 개의 열로 변환할 수 있을 정도로 간단합니다.

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"

이제 Hugging Face AI 도구 세트의 변환기 패키지를 사용하고 이러한 각 설명의 임베딩을 생성할 수 있습니다. 문장 변환기/all-MiniLM-L12-v2 모델을 사용하고 주성분 분석(PCA)을 사용하여 결과 벡터를 5차원으로 줄였습니다. 이는 다음과 같은 결과를 제공합니다:

[
  {
    "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 ]
  },
  …
]

이러한 데이터 세트가 50만 개가 있으므로 이 전체 데이터 세트를 엣지 앱의 메모리에 저장할 수 없습니다. 그리고 우리는 이 데이터에 대해 사용자 지정 유형의 유사성 검색을 수행하려고 합니다. 이는 기존 키-값 저장소가 제공하지 않는 기능입니다. 우리는 실시간 경험을 구축하고 있기 때문에 한 번에 50만 개의 벡터를 검색하는 일을 피하고 싶습니다.

그럼 데이터를 분할해 보겠습니다. KMeans 클러스터링을 사용하여 서로 유사한 벡터를 그룹화할 수 있습니다. 우리는 데이터를 다양한 크기의 500개 클러스터로 분할하고 각 클러스터에 대해 "중심 벡터"라는 중심점을 계산했습니다. 이 벡터 공간을 2차원으로 플롯하고 확대하면 다음과 같이 보일 수 있습니다.

Build

빨간색 십자가는 중심이라고 하는 각 벡터 클러스터의 수학적 중심점입니다. 그들은 50만 개의 벡터 공간에 대한 길잡이처럼 작동할 수 있습니다. 예를 들어, 주어진 벡터 A와 가장 유사한 10개의 벡터를 찾으려면 먼저 가장 가까운 중심(500개 중)을 찾은 다음 해당 클러스터 내에서만 검색을 수행할 수 있습니다. 이는 훨씬 더 관리하기 쉬운 영역입니다!

이제 500개의 작은 데이터 세트와 중심점을 관련 데이터 세트에 매핑하는 인덱스가 있습니다. 다음으로, 실시간 성능을 구현하기 위해 검색 그래프를 사전 컴파일하여 런타임 시 초기화 및 구성할 필요가 없고 CPU 시간을 최대한 적게 사용할 수 있도록 하려고 합니다. 매우 빠른 최근접 이웃 알고리즘은 HNSW(Hierarchical Navigable Small Worlds)이며, 이는 엣지 앱을 작성하는 데 사용하는 순수 Rust 구현을 포함합니다. 그래서 우리는 작은 독립형 Rust 앱을 작성하여 각 데이터 세트에 대한 HNSW 그래프 구조체를 구성한 다음, 바이너리 코드를 사용하여 인스턴스화된 구조체의 메모리를 바이너리 blob으로 내보냈습니다.

이제 이러한 바이너리 Blob을 KV 스토어에 로드하고 클러스터 인덱스에 대해 키를 입력할 수 있으며 클러스터 인덱스를 Edge 앱에 포함할 수 있습니다.

이 아키텍처를 사용하면 요청 시 검색 색인의 일부를 메모리에 로드할 수 있습니다. 그리고 한 번에 수천 개 이상의 벡터를 검색할 필요가 없으므로 검색 속도가 항상 저렴하고 빠릅니다.

엣지 앱 구축

에지에서 실행하는 애플리케이션은 여러 유형의 요청을 처리해야 합니다.

  • HTML 페이지: 우리는 metmuseum.org에서 이러한 페이지를 가져와 추가 프런트엔드