@@ -6,21 +6,27 @@ import Card from '@leafygreen-ui/card';
66import { PageLoader , Spinner } from "@leafygreen-ui/loading-indicator" ;
77import './search.css' ;
88import { H1 , H2 } from '@leafygreen-ui/typography' ;
9+ import { NumberInput } from '@leafygreen-ui/number-input' ;
910
10- function Search ( ) {
11+ function Search ( { hybrid } ) {
12+ const isHybridSearch = hybrid
1113 const [ searchValue , setSearchValue ] = useState ( '' ) ;
14+ const [ vectorWeight , setVectorWeight ] = useState ( 0.5 ) ;
15+ const [ textWeight , setTextWeight ] = useState ( 0.5 ) ;
1216 const [ response , setResponse ] = useState ( [ ] ) ;
1317 const [ loading , setLoading ] = useState ( false ) ;
1418
1519 const handleInputChange = ( event ) => {
1620 setSearchValue ( event . target . value ) ;
1721 } ;
1822
23+ const searchEndpoint = `http://localhost:9001/${ isHybridSearch ? 'hybrid-search' : 'semantic-search' } ` ;
24+
1925 const searchResults = ( ) => {
2026 console . log ( searchValue ) ;
2127 setLoading ( true ) ;
2228 const query = encodeURIComponent ( searchValue ) ;
23- fetch ( `http://localhost:9001/semantic-search ?query=${ query } ` , {
29+ fetch ( `${ searchEndpoint } ?query=${ query } &vectorWeight= ${ vectorWeight } &fullTextWeight= ${ textWeight } ` , {
2430 method : 'GET' ,
2531 headers : {
2632 'Content-Type' : 'application/json'
@@ -38,20 +44,37 @@ function Search() {
3844
3945 return (
4046 < div className = "search-bar" >
41- < H1 > Vector Search</ H1 >
47+ < H1 > { isHybridSearch ? "Hybrid Search" : " Vector Search" } </ H1 >
4248 < header className = "search-header" >
4349 < SearchInput
4450 value = { searchValue }
4551 onChange = { handleInputChange }
4652 onSubmit = { searchResults }
4753 />
54+ { isHybridSearch && < >
55+ < NumberInput
56+ label = 'Vector Weight'
57+ description = 'Affects the weighted reciprocal rank'
58+ darkMode = "true"
59+ value = { vectorWeight }
60+ onChange = { ( e ) => setVectorWeight ( e . target . value ) }
61+ />
62+ < NumberInput
63+ label = 'Text Weight'
64+ description = 'Affects the weighted reciprocal rank'
65+ darkMode = "true"
66+ value = { textWeight }
67+ onChange = { ( e ) => setTextWeight ( e . target . value ) }
68+ />
69+ </ > }
4870 </ header >
4971 < div className = 'results' >
5072 < >
5173 { loading ? < PageLoader /> : < div >
5274 { response . map ( ( item , index ) => (
5375 < Card key = { index } className = "card-styles" as = "article" >
5476 < h3 > Score: { item . score } </ h3 >
77+ { isHybridSearch && < pre > Text Score: { item . fts_score } , Vector Score: { item . vs_score } </ pre > }
5578 < p > < strong > Content:</ strong > { item . pageContent } </ p >
5679 < div >
5780 < h4 > Metadata:</ h4 >
@@ -66,4 +89,4 @@ function Search() {
6689 ) ;
6790}
6891
69- export default Search ;
92+ export default Search ;
0 commit comments