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
128
129
130
131
132
133
134
135
136
137
|
import {useEffect, useState} from 'react'
import {View} from 'react-native'
import {parseLanguage} from '@atproto/api'
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: replyToLanguageProp,
}: {
text: string
replyToLanguage?: string
}) {
const replyToLanguage = cleanUpLanguage(replyToLanguageProp)
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)
}
function cleanUpLanguage(text: string | undefined): string | undefined {
if (!text) {
return undefined
}
return parseLanguage(text)?.language
}
|
