crane search

크레인?

내 블로그 게시물: 정적 사이트용 WebAssembly 검색 도구

Crane은 Stork에서 영감을 얻은 기술 데모이며 거의 동일한 구성 파일 설정을 사용합니다. 그래서 이름도 새의 이름을 따서 명명해야 했습니다.

WebAssembly 검색 도구의 작동 방식을 이해하는 데 도움을 주기 위해 이 글을 썼습니다. 대신 황새를 사용해 주세요.

크레인은 두 가지 프로그램입니다. 첫 번째 프로그램은 문서 그룹을 스캔하고 효율적인 색인을 작성합니다. 1MB의 텍스트와 메타데이터가 25KB 인덱스(14KB gzip)로 변환됩니다. 두 번째 프로그램은 약간의 JavaScript 글루 코드 및 색인과 함께 브라우저로 전송되는 Wasm 모듈입니다. 그 결과 사용자가 입력하는 동안 웹페이지를 찾는 데 도움이 되는 인스턴트 검색 엔진이 탄생했습니다.

데모 방문

전체 텍스트 검색 엔진은 부분적으로 Artem Krylysov의 블로그 게시물 전체 텍스트 검색 엔진을 구축해 보겠습니다.의 코드로 구동됩니다.

Wasm 바이너리를 축소하려는 노력은 이루어지지 않았습니다. Wasm 파일 크기 줄이기를 참조하세요.

그것을 사용

문서 파일과 해당 메타데이터를 설명하세요.

[ input ]
files = [
    {
        path = " docs/essays/essay01.txt " ,
        url = " essays/essay01.txt " ,
        title = " Introduction "
    },
    # etc.
]

[ output ]
filename = " dist/federalist.crane "

구성 파일을 빌드 스크립트에 전달합니다. 문서가 변경될 때마다 새로운 색인이 필요하지만 Wasm 모듈은 한 번만 빌드하면 됩니다.

./build-index.sh federalist.toml
./build-search.sh

웹사이트(예: wasm_exec.js , crane.js , crane.wasm , federalist.crane )의 /dist 에 있는 파일을 호스팅하세요. 그리고 떠나세요!

 const crane = new Crane ( "crane.wasm" , "federalist.crane" ) ;
await crane . load ( ) ;

const results = crane . query ( 'some keywords' ) ;
console . log ( results ) ;

기본 UI에 대해서는 /docs 내부의 데모를 참조하세요.

데모 페이지 구축

./gh-pages.sh