File size: 2,953 Bytes
f723129 a3e21c6 f723129 a3e21c6 4d13673 a3e21c6 f723129 a3e21c6 f723129 a3e21c6 33469f2 a3e21c6 f723129 a3e21c6 51cb38c f723129 a3e21c6 f723129 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
import { AutoComplete as PrimeAutoComplete } from 'primereact/autocomplete'
import { useState } from 'react'
const AutoComplete = ({ languages, onComplete }) => {
const [autoComplete, setAutoComplete] = useState('')
const [suggestions, setSuggestions] = useState([])
const exampleCodes = ['de', 'fr', 'ar', 'hi', 'sw', 'fa']
const exampleLanguages = exampleCodes.map(code =>
languages?.find(item => item.bcp_47 === code)
)
const search = e => {
const matches = languages.filter(language => {
const query = e.query.toLowerCase()
return (
language.language_name.toLowerCase().includes(query) ||
language.autonym.toLowerCase().includes(query) ||
language.bcp_47.toLowerCase().includes(query)
)
})
setSuggestions(matches)
}
const itemTemplate = item => (
<div
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between'
}}
>
<span>
{item.autonym}
<span style={{ color: 'gray', marginLeft: '1rem' }}>
{item.language_name}
</span>
</span>
<span style={{ color: 'gray' }}>{item.bcp_47}</span>
</div>
)
return (
<>
<PrimeAutoComplete
placeholder='Search for language-specific leaderboards...'
value={autoComplete}
onChange={e => setAutoComplete(e.value)}
onClick={() => {
setAutoComplete('')
setSuggestions(languages)
}}
onSelect={e => {
setAutoComplete(e.value.language_name)
onComplete([e.value])
}}
suggestions={suggestions}
completeMethod={search}
virtualScrollerOptions={{ itemSize: 50 }} // smaller values give layout problems
delay={500}
autoHighlight
autoFocus
itemTemplate={itemTemplate}
field='language_name'
minLength={0}
/>
<span
style={{
display: 'flex',
flexWrap: 'wrap',
gap: '1rem',
rowGap: '0.3rem',
marginTop: '1rem',
maxWidth: '600px',
justifyContent: 'center',
color: '#555',
fontSize: '0.8rem'
}}
>
<span>Examples:</span>
{exampleLanguages?.map(language => (
<a
onClick={() => {
onComplete([language])
setAutoComplete(language.language_name)
}}
style={{ textDecoration: 'underline', cursor: 'pointer' }}
>
{language.language_name} Leaderboard
</a>
))}
{/* <li>African Leaderboard</li>
<li>Indic Leaderboard</li>
<li>Transcription Leaderboard</li>
<li>Dataset Availability for African Languages</li>
<li>GPT 4.5 Evaluation</li>
<li>MMLU Evaluation of Open Models</li> */}
</span>
</>
)
}
export default AutoComplete
|