feat: improve posts translation logic (#1211)

This commit is contained in:
Alex 2023-01-16 17:55:00 +08:00 committed by GitHub
parent 3b73d11fd3
commit d745bd0583
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 78 additions and 23 deletions

View file

@ -206,14 +206,6 @@ const showFavoritedAndBoostedBy = () => {
/> />
</NuxtLink> </NuxtLink>
<CommonDropdownItem
v-if="isTranslationEnabled && status.language !== languageCode"
:text="translation.visible ? $t('menu.show_untranslated') : $t('menu.translate_post')"
icon="i-ri:translate"
:command="command"
@click="toggleTranslation"
/>
<template v-if="isHydrated && currentUser"> <template v-if="isHydrated && currentUser">
<template v-if="isAuthor"> <template v-if="isAuthor">
<CommonDropdownItem <CommonDropdownItem

View file

@ -37,7 +37,10 @@ const vnode = $computed(() => {
<div v-else /> <div v-else />
<template v-if="translation.visible"> <template v-if="translation.visible">
<div my2 h-px border="b base" bg-base /> <div my2 h-px border="b base" bg-base />
<ContentRich class="line-compact" :content="translation.text" :emojis="status.emojis" /> <ContentRich v-if="translation.success" class="line-compact" :content="translation.text" :emojis="status.emojis" />
<div v-else text-red-4>
Error: {{ translation.error }}
</div>
</template> </template>
</div> </div>
</template> </template>

View file

@ -34,6 +34,7 @@ const isFiltered = $computed(() => filterPhrase && (context && context !== 'deta
<p>{{ status.spoilerText }}</p> <p>{{ status.spoilerText }}</p>
</template> </template>
<StatusBody v-if="!status.sensitive || status.spoilerText" :status="status" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" /> <StatusBody v-if="!status.sensitive || status.spoilerText" :status="status" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
<StatusTranslation :status="status" />
<StatusPoll v-if="status.poll" :status="status" /> <StatusPoll v-if="status.poll" :status="status" />
<StatusMedia <StatusMedia
v-if="status.mediaAttachments?.length" v-if="status.mediaAttachments?.length"

View file

@ -0,0 +1,41 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
const { status } = defineProps<{
status: mastodon.v1.Status
}>()
const {
toggle: _toggleTranslation,
translation,
enabled: isTranslationEnabled,
} = useTranslation(status)
let translating = $ref(false)
const toggleTranslation = async () => {
translating = true
try {
await _toggleTranslation()
}
finally {
translating = false
}
}
</script>
<template>
<div>
<button
v-if="isTranslationEnabled && status.language !== languageCode" pl-0 flex="~ center" gap-2
:disabled="translating" disabled-bg-transparent btn-text @click="toggleTranslation"
>
<span v-if="translating" block animate-spin preserve-3d>
<span block i-ri:loader-2-fill />
</span>
<div v-else i-ri:translate />
{{ translation.visible ? $t('menu.show_untranslated') : $t('menu.translate_post') }}
</button>
</div>
</template>
<style scoped></style>

View file

@ -11,7 +11,13 @@ export interface TranslationResponse {
export const languageCode = process.server ? 'en' : navigator.language.replace(/-.*$/, '') export const languageCode = process.server ? 'en' : navigator.language.replace(/-.*$/, '')
export async function translateText(text: string, from?: string | null, to?: string) { export async function translateText(text: string, from?: string | null, to?: string) {
const config = useRuntimeConfig() const config = useRuntimeConfig()
const { translatedText } = await $fetch<TranslationResponse>(config.public.translateApi, { const status = $ref({
success: false,
error: '',
text: '',
})
try {
const response = await $fetch<TranslationResponse>(config.public.translateApi, {
method: 'POST', method: 'POST',
body: { body: {
q: text, q: text,
@ -21,14 +27,21 @@ export async function translateText(text: string, from?: string | null, to?: str
api_key: '', api_key: '',
}, },
}) })
return translatedText status.success = true
status.text = response.translatedText
}
catch (err) {
// TODO: improve type
status.error = (err as { data: { error: string } }).data.error
}
return status
} }
const translations = new WeakMap<mastodon.v1.Status | mastodon.v1.StatusEdit, { visible: boolean; text: string }>() const translations = new WeakMap<mastodon.v1.Status | mastodon.v1.StatusEdit, { visible: boolean; text: string; success: boolean; error: string }>()
export function useTranslation(status: mastodon.v1.Status | mastodon.v1.StatusEdit) { export function useTranslation(status: mastodon.v1.Status | mastodon.v1.StatusEdit) {
if (!translations.has(status)) if (!translations.has(status))
translations.set(status, reactive({ visible: false, text: '' })) translations.set(status, reactive({ visible: false, text: '', success: false, error: '' }))
const translation = translations.get(status)! const translation = translations.get(status)!
@ -36,8 +49,12 @@ export function useTranslation(status: mastodon.v1.Status | mastodon.v1.StatusEd
if (!('language' in status)) if (!('language' in status))
return return
if (!translation.text) if (!translation.text) {
translation.text = await translateText(status.content, status.language) const { success, text, error } = await translateText(status.content, status.language)
translation.error = error
translation.text = text
translation.success = success
}
translation.visible = !translation.visible translation.visible = !translation.visible
} }

View file

@ -92,6 +92,7 @@ export default defineNuxtConfig({
env: '', // set in build-env module env: '', // set in build-env module
buildInfo: {} as BuildInfo, // set in build-env module buildInfo: {} as BuildInfo, // set in build-env module
pwaEnabled: !isDevelopment || process.env.VITE_DEV_PWA === 'true', pwaEnabled: !isDevelopment || process.env.VITE_DEV_PWA === 'true',
// We use LibreTranslate(https://github.com/LibreTranslate/LibreTranslate) as our default translation server #76
translateApi: '', translateApi: '',
defaultServer: 'mas.to', defaultServer: 'mas.to',
}, },