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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
import {useEffect, useState} from 'react'
import {View} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import lande from 'lande'
import {code3ToCode2Strict, codeToLanguageName} from '#/locale/helpers'
import {
toPostLanguages,
useLanguagePrefs,
useLanguagePrefsApi,
} from '#/state/preferences/languages'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {Earth_Stroke2_Corner2_Rounded as EarthIcon} from '#/components/icons/Globe'
import {Text} from '#/components/Typography'
// fallbacks for safari
const onIdle = globalThis.requestIdleCallback || (cb => setTimeout(cb, 1))
const cancelIdle = globalThis.cancelIdleCallback || clearTimeout
export function SuggestedLanguage({
text,
replyToLanguage,
}: {
text: string
replyToLanguage?: string
}) {
const [suggestedLanguage, setSuggestedLanguage] = useState<
string | undefined
>(text.length === 0 ? replyToLanguage : undefined)
const langPrefs = useLanguagePrefs()
const setLangPrefs = useLanguagePrefsApi()
const t = useTheme()
const {_} = useLingui()
useEffect(() => {
// For replies, suggest the language of the post being replied to if no text
// has been typed yet
if (replyToLanguage && text.length === 0) {
setSuggestedLanguage(replyToLanguage)
return
}
const textTrimmed = text.trim()
// Don't run the language model on small posts, the results are likely
// to be inaccurate anyway.
if (textTrimmed.length < 40) {
setSuggestedLanguage(undefined)
return
}
const idle = onIdle(() => {
setSuggestedLanguage(guessLanguage(textTrimmed))
})
return () => cancelIdle(idle)
}, [text, replyToLanguage])
if (
suggestedLanguage &&
!toPostLanguages(langPrefs.postLanguage).includes(suggestedLanguage)
) {
const suggestedLanguageName = codeToLanguageName(
suggestedLanguage,
langPrefs.appLanguage,
)
return (
<View
style={[
t.atoms.border_contrast_low,
a.gap_sm,
a.border,
a.flex_row,
a.align_center,
a.rounded_sm,
a.px_lg,
a.py_md,
a.mx_md,
a.my_sm,
t.atoms.bg,
]}>
<EarthIcon />
<Text style={[a.flex_1]}>
<Trans>
Are you writing in{' '}
<Text style={[a.font_bold]}>{suggestedLanguageName}</Text>?
</Trans>
</Text>
<Button
color="secondary"
size="small"
variant="solid"
onPress={() => setLangPrefs.setPostLanguage(suggestedLanguage)}
label={_(msg`Change post language to ${suggestedLanguageName}`)}>
<ButtonText>
<Trans>Yes</Trans>
</ButtonText>
</Button>
</View>
)
} else {
return null
}
}
/**
* This function is using the lande language model to attempt to detect the language
* We want to only make suggestions when we feel a high degree of certainty
* The magic numbers are based on debugging sessions against some test strings
*/
function guessLanguage(text: string): string | undefined {
const scores = lande(text).filter(([_lang, value]) => value >= 0.0002)
// if the model has multiple items with a score higher than 0.0002, it isn't certain enough
if (scores.length !== 1) {
return undefined
}
const [lang, value] = scores[0]
// if the model doesn't give a score of 0.97 or above, it isn't certain enough
if (value < 0.97) {
return undefined
}
return code3ToCode2Strict(lang)
}
|
