react search
Release 1.2.0
React-Search는 몇 줄의 코드로 Vectara 기반 의미 체계 검색을 React 앱에 추가하기 위한 UI 위젯입니다.
팁
다른 것을 찾고 계십니까? 다른 오픈 소스 프로젝트를 시도해 보세요.
데모를 사용해 보세요!
검색 입력은 다음과 같습니다.
사용자가 검색 입력을 클릭하면 다음과 같은 검색 프롬프트가 표시됩니다.
검색 결과는 다음과 같습니다.
반응 검색을 설치합니다:
npm install --save @vectara/react-search그런 다음 애플리케이션에서 다음과 같이 사용하십시오.
import { ReactSearch } from "@vectara/react-search" ;
/* snip */
< ReactSearch
customerId = "CUSTOMER_ID"
corpusId = "CORPUS_ID"
apiKey = "API_KEY"
placeholder = "Search" // Optional search input placeholder
isDeepLinkable = { true } // Optional boolean determining if search results will be deep-linked
openResultsInNewTab = { true } // Optional boolean determining if links will open in a new tab
zIndex = { 1000 } // Optional number assigned to the z-index of the search modal
isSummaryToggleVisible = { true } // Optional boolean determining if users can summarize search results
rerankingConfiguration = { {
rerankerId : 272725718
} }
/ > ; customerId (필수)모든 Vectara 계정은 고객 ID와 연결되어 있습니다. Vectara 콘솔에 로그인하고 오른쪽 상단에 있는 계정 드롭다운을 열어 고객 ID를 찾을 수 있습니다.
corpusId (필수)말뭉치를 생성한 후 말뭉치로 이동하여 말뭉치 이름 옆의 왼쪽 상단에서 해당 ID를 찾을 수 있습니다.
apiKey (필수)API 키를 사용하면 애플리케이션이 말뭉치 내부의 데이터에 액세스할 수 있습니다. QueryService API 키를 만드는 방법을 알아보세요.
apiUrl (선택사항)기본적으로 React-Search는 Vectara 서버에 쿼리 요청을 보냅니다. 프록시 서버를 사용하려는 경우 프록시의 URL로 이 옵션을 구성할 수 있습니다.
placeholder (선택사항)검색 모달 입력에서 자리 표시자 텍스트를 구성합니다.
isDeepLinkable (선택사항) 기본값은 false 입니다. URL 매개변수에 대한 검색 쿼리를 유지하려면 이 옵션을 설정하십시오. 이를 통해 사용자는 URL을 공유하거나 북마크에 추가할 수 있습니다. URL을 로드하면 자동으로 검색 모달이 열리고 URL에 저장된 쿼리를 검색합니다.
openResultsInNewTab (선택사항) 기본값은 false 입니다. 검색결과를 새 탭에서 열려면 이 옵션을 설정하세요.
zIndex (선택사항)검색 모달의 Z-색인을 정의합니다.
onToggleSummary (선택사항)'검색 결과 요약' 토글이 활성화되어 있는지 여부를 나타내는 부울 인수를 수신하는 콜백을 허용합니다.
isSummaryToggleVisible (선택사항)사용자가 검색 결과를 요약할 수 있는지 여부입니다.
isSummaryToggleInitiallyEnabled (선택 사항)사용자가 요약을 전환할 수 있는 경우 해당 전환이 기본적으로 활성화되어야 하는지 여부입니다.
rerankingConfiguration (선택사항)해당 구성과 함께 사용할 검색 결과 재순위 지정기를 지정합니다. 자세한 내용은 순위 재지정에 대한 문서를 참조하세요.
반응 검색을 설치합니다:
npm install --save @vectara/react-search 그런 다음 애플리케이션에서 다음과 같이 useSearch 후크를 사용하십시오.
import { useSearch } from "@vectara/react-search/lib/useSearch" ;
/* snip */
const { fetchSearchResults , isLoading } = useSearch (
"CUSTOMER_ID" ,
"CORPUS_ID" ,
"API_KEY" ,
"API_URL" , // optional
{ rerankerId : 12345 } // optional
) ;후크에서 반환된 값은 사용자 정의 구성 요소에 소품으로 전달되거나 원하는 방식으로 사용될 수 있습니다.
async (query: string, summarize: boolean) => Promise<{ searchResults: DeserializedSearchResult[]; summary?: string }> 이는 검색 API에 메시지를 보내는 데 사용됩니다. 검색이 성공하면 검색 결과 배열과 선택적 요약으로 구성된 개체가 반환됩니다. 각 검색 결과는 DeserializedSearchResult 개체입니다. 유형에 대한 자세한 내용은 여기에서 확인할 수 있습니다.
boolean검색 요청이 아직 보류 중인지 여부를 나타내는 부울 값
SSR 프레임워크와 함께 React-Search를 사용하려면 추가 인프라가 필요할 수 있습니다. 다음은 몇 가지 일반적인 문제입니다.
React-Search는 Next.js와 호환되는 ReactSearchNext 변형을 제공합니다. ReactSearch 와 동일한 props를 허용합니다.
다음과 같이 가져올 수 있습니다.
import { ReactSearchNext } from "@vectara/react-search/lib/ReactSearchNext" ; 이 Next.js 호환 구성 요소를 사용하는 것 외에도 ReactSearchNext 가져오는 파일에서 "use client" 지시문을 사용해야 합니다.
React-Search는 Vectara 코퍼스에서 데이터를 가져옵니다. 이를 설정하려면:
전문가 팁: API 키를 생성한 후 코퍼스로 이동하여 "액세스 제어" 탭을 클릭하세요. 하단에서 API 키를 찾아 '모두 복사' 옵션을 선택하여 고객 ID, 코퍼스 ID, API 키를 복사하세요. 이는 <ReactSearch /> 인스턴스를 구성하는 데 필요한 모든 데이터를 제공합니다.
Vectara를 사용하면 문서에 메타데이터를 정의할 수 있습니다. React-Search는 특정 메타데이터 필드의 존재 여부에 따라 다르게 작동합니다.
title : 이 필드를 정의하면 검색 결과의 제목으로 렌더링됩니다. 일반적으로 이는 문서나 웹페이지의 제목과 같습니다.url : 이 필드가 정의되면 React-Search는 검색 결과를 정의된 URL에 대한 링크로 렌더링합니다. 이 코드베이스는 개선 및 버그 수정을 용이하게 하는 개발 환경과 함께 제공됩니다. 이를 통해 유지관리자는 코드를 빠르게 반복하고 변경 사항을 즉시 확인할 수 있습니다.
루트 디렉터리에서 다음을 실행합니다.
npm install
이렇게 하면 구성 요소를 빌드하고 개발 환경을 실행하는 데 필요한 모든 종속성이 설치됩니다. 이 작업이 완료되면 다음을 실행합니다.
npm run docs
그러면 http://localhost:8080/ 에서 실행되는 애플리케이션이 실행됩니다. 최신 변경사항이 여기에 반영됩니다.
개발 환경이 실행되면 /src 디렉터리의 .ts 및 .tsx 파일이 변경되면 구성 요소가 다시 빌드되고 웹 페이지가 다시 로드됩니다.
또한 /docs/index.tsx 에서 개발 앱 소스 코드를 변경하면 다시 빌드 + 다시 로드도 트리거됩니다.
Vectara React-Search는 Apache 2.0 라이선스에 따라 라이선스가 부여된 오픈 소스 소프트웨어입니다.
이 리포지토리에는 Vectara로 구동되는 UI를 구축하는 데 도움이 되는 샘플 코드가 포함되어 있으며 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 해당 법률에서 요구하거나 서면으로 동의하지 않는 한, 라이선스에 따라 배포되는 소프트웨어는 명시적이든 묵시적이든 어떠한 종류의 보증이나 조건 없이 "있는 그대로" 배포됩니다. 라이선스에 따른 허가 및 제한 사항을 관리하는 특정 언어는 라이선스를 참조하세요.
