Fastly에서 AI를 사용하여 \'당신을 위한\' 추천을 구축하세요!
과대광고는 잊어버리세요. AI가 실제 가치를 제공하는 곳은 어디입니까? 엣지 컴퓨팅을 사용하여 AI의 힘을 활용하고 빠르고 안전하며 신뢰할 수 있는 보다 스마트한 사용자 경험을 만들어 봅시다.
추천은 어디에나 있으며, 웹 경험을 더욱 개인화하면 더욱 매력적이고 성공할 수 있다는 사실은 모두가 알고 있습니다. 내 Amazon 홈페이지에서는 내가 가정용 가구, 주방용품, 그리고 현재 여름 의류를 좋아한다는 것을 알고 있습니다.
오늘날 대부분의 플랫폼에서는 속도와 개인화 중 하나를 선택하게 됩니다. Fastly에서는 귀하와 귀하의 사용자가 이 두 가지를 모두 가질 자격이 있다고 생각합니다. 웹 서버가 페이지를 생성할 때마다 페이지가 한 명의 최종 사용자에게만 적합하다면 캐싱의 이점을 누릴 수 없습니다. 이는 Fastly와 같은 에지 네트워크가 잘하는 일입니다.
그렇다면 엣지 캐싱의 이점을 누리면서 콘텐츠를 개인화할 수 있는 방법은 무엇일까요? 복잡한 클라이언트 요청을 캐시 가능한 여러 개의 작은 백엔드 요청으로 나누는 방법에 대해 이전에 많은 글을 작성했으며 개발자 허브의 개인화 주제에서 튜토리얼, 코드 예제 및 데모를 찾을 수 있습니다.
하지만 더 나아가 엣지에서 개인화 데이터를 생성하고 싶다면 어떻게 해야 할까요? 귀하의 웹사이트 트래픽을 처리하는 Fastly 서버인 "에지"는 귀하가 통제할 수 있는 최종 사용자에게 가장 가까운 지점입니다. 한 명의 사용자에게 특화된 콘텐츠를 제작하기에 좋은 곳입니다.
"당신을 위한" 사용 사례
제품 추천은 본질적으로 일시적이고 개별 사용자에게만 국한되며 자주 변경될 수 있습니다. 하지만 지속할 필요도 없습니다. 일반적으로 각 사람에게 무엇을 권장했는지 알 필요는 없으며 특정 알고리즘이 다른 알고리즘보다 더 나은 전환을 달성하는지 여부만 알면 됩니다. 일부 추천 알고리즘은 귀하와 가장 유사한 사용자, 구매 또는 평가 내역 등 대량의 상태 데이터에 액세스해야 하지만 해당 데이터는 대량으로 사전 생성되기 쉬운 경우가 많습니다.
기본적으로 권장 사항을 생성하면 일반적으로 트랜잭션이 생성되지 않고 데이터 저장소에 잠금이 필요하지 않으며 현재 사용자 세션에서 즉시 사용할 수 있거나 오프라인 빌드 프로세스에서 생성된 입력 데이터를 사용합니다.
에지에서 추천을 생성할 수 있을 것 같습니다!
실제 사례
뉴욕 메트로폴리탄 미술관 홈페이지를 살펴보겠습니다.
Met 컬렉션에 있는 500,000여 점의 물건 각각에는 사진과 그에 대한 정보가 포함된 페이지가 있습니다. 또한 다음과 같은 관련 개체 목록도 있습니다.
이러한 관계를 생성하기 위해 상당히 간단한 패시팅 시스템을 사용하는 것 같습니다. 동일한 예술가의 다른 작품이나 박물관의 같은 건물에 있는 다른 개체 또는 종이로 만들어졌거나 같은 건물에서 유래한 다른 개체를 보여줍니다. 기간.
개발자 관점에서 볼 때 이 시스템의 좋은 점은 하나의 입력 개체에만 기반을 두기 때문에 페이지에 미리 생성할 수 있다는 것입니다.
단지 하나의 개체를 기반으로 하는 것이 아니라 Met 웹사이트를 탐색할 때 최종 사용자의 개인 검색 기록을 기반으로 한 추천 항목을 선택하여 이를 강화하려면 어떻게 해야 할까요?
맞춤 추천 추가
이를 수행할 수 있는 방법은 많지만 AI가 현재 발생하고 Met의 기존 관련 예술 작품 메커니즘이 보이는 방식과는 정말 다르기 때문에 언어 모델을 사용해 보고 싶었습니다. 일하다. 계획은 다음과 같습니다.
- Met의 오픈 액세스 컬렉션 데이터세트를 다운로드하세요.
- 언어 모델을 통해 실행하여 머신러닝 작업에 적합한 숫자 목록인 벡터 임베딩을 생성합니다.
- (Met의 예술 작품을 대표하는) 50만 개의 벡터 결과에 대한 고성능 유사성 검색 엔진을 구축하고 Fastly Compute에서 사용할 수 있도록 KV 스토어에 로드합니다.
이 모든 작업을 완료하고 나면 Met 웹사이트를 탐색하실 수 있을 것입니다.
- 내가 방문한 작품을 쿠키로 추적하세요.
- 해당 작품에 해당하는 벡터를 찾아보세요.
- 탐색 관심분야를 나타내는 평균 벡터를 계산합니다.
- 가장 유사한 작품을 찾으려면 유사성 검색 엔진에 연결하세요.
- Met의 Object API에서 해당 작품에 대한 세부정보를 로드하고 맞춤 추천으로 페이지를 보강하세요.
자, 맞춤 추천:
자, 그럼 분석해 보겠습니다.
데이터세트 만들기
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차원으로 플롯하고 확대하면 다음과 같이 보일 수 있습니다.
빨간색 십자가는 중심이라고 하는 각 벡터 클러스터의 수학적 중심점입니다. 그들은 50만 개의 벡터 공간에 대한 길잡이처럼 작동할 수 있습니다. 예를 들어, 주어진 벡터 A와 가장 유사한 10개의 벡터를 찾으려면 먼저 가장 가까운 중심(500개 중)을 찾은 다음 해당 클러스터 내에서만 검색을 수행할 수 있습니다. 이는 훨씬 더 관리하기 쉬운 영역입니다!
이제 500개의 작은 데이터 세트와 중심점을 관련 데이터 세트에 매핑하는 인덱스가 있습니다. 다음으로, 실시간 성능을 구현하기 위해 검색 그래프를 사전 컴파일하여 런타임 시 초기화 및 구성할 필요가 없고 CPU 시간을 최대한 적게 사용할 수 있도록 하려고 합니다. 매우 빠른 최근접 이웃 알고리즘은 HNSW(Hierarchical Navigable Small Worlds)이며, 이는 엣지 앱을 작성하는 데 사용하는 순수 Rust 구현을 포함합니다. 그래서 우리는 작은 독립형 Rust 앱을 작성하여 각 데이터 세트에 대한 HNSW 그래프 구조체를 구성한 다음, 바이너리 코드를 사용하여 인스턴스화된 구조체의 메모리를 바이너리 blob으로 내보냈습니다.
이제 이러한 바이너리 Blob을 KV 스토어에 로드하고 클러스터 인덱스에 대해 키를 입력할 수 있으며 클러스터 인덱스를 Edge 앱에 포함할 수 있습니다.
이 아키텍처를 사용하면 요청 시 검색 색인의 일부를 메모리에 로드할 수 있습니다. 그리고 한 번에 수천 개 이상의 벡터를 검색할 필요가 없으므로 검색 속도가 항상 저렴하고 빠릅니다.
엣지 앱 구축
에지에서 실행하는 애플리케이션은 여러 유형의 요청을 처리해야 합니다.
-
HTML 페이지: 우리는 metmuseum.org에서 이러한 페이지를 가져와 추가 프런트엔드
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
<gum> : Bubble Gum Simulator Infinity- 로얄 키를 얻고 사용하는 방법4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌<garden> : 정원 재배 - 완전한 돌연변이 가이드4 몇 주 전 By DDDNordhold : Fusion System, 설명4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌Mandragora : 마녀 트리의 속삭임 - Grappling Hook 잠금 해제 방법4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌<exp exp> 모호한 : 원정 33- 완벽한 크로마 촉매를 얻는 방법2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
Python vs. JavaScript : 학습 곡선 및 사용 편의성
Apr 16, 2025 am 12:12 AM
Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.
JavaScript 및 웹 : 핵심 기능 및 사용 사례
Apr 18, 2025 am 12:19 AM
웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.
자바 스크립트 행동 : 실제 예제 및 프로젝트
Apr 19, 2025 am 12:13 AM
실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.
JavaScript 엔진 이해 : 구현 세부 사항
Apr 17, 2025 am 12:05 AM
보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.
Python vs. JavaScript : 개발 환경 및 도구
Apr 26, 2025 am 12:09 AM
개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.
JavaScript 통역사 및 컴파일러에서 C/C의 역할
Apr 20, 2025 am 12:01 AM
C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.
Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교
Apr 21, 2025 am 12:01 AM
Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.
웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션
Apr 22, 2025 am 12:02 AM
JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.
