Переводим текст в SwiftUI-приложении с помощью фреймворка Translation

Translation API — один из новых инструментов, представленных на WWDC24. С его помощью разработчики могут переводить контент в своих приложениях с помощью моделей машинного обучения, которые работают локально на устройстве, не требуя подключения к интернету. До сих пор эта возможность была доступна только в Safari и некоторых нативных приложениях, таких как Messages.

Опция перевода в приложении Messages на iPhone

В этой статье мы рассмотрим, как интегрировать оверлей с переводом в простое представление SwiftUI.

Показ перевода

При интеграции компонента оверлея перевода нам необходимо сначала импортировать Translation Framework, а затем прикрепить модификатор translationPresentation(isPresented:text:attachmentAnchor:arrowEdge:replacementAction:) к представлению. Этот модификатор требует двух параметров:

• булево значение для запуска представления
• входной текст для перевода.

import SwiftUI
import Translation

struct ContentView: View {
    @State var text = "We can’t wait to see what you will Create with Swift."
    @State var showTranslation = false
    
    var body: some View {
        NavigationStack {
            VStack {
                Text(text)
                    .font(.title3)
                    .multilineTextAlignment(.center)
            }
            
            .translationPresentation(isPresented: $showTranslation, text: text)
            
            .toolbar {
                Button {
                    showTranslation.toggle()
                } label: {
                    Image(systemName: "translate")
                }
            }
        }
    }
}

import SwiftUI

import Translation

​

struct ContentView: View {

    @State var text = "We can’t wait to see what you will Create with Swift."

    @State var showTranslation = false

    var body: some View {

        NavigationStack {

            VStack {

                Text(text)

                    .font(.title3)

                    .multilineTextAlignment(.center)

            }

            .translationPresentation(isPresented: $showTranslation, text: text)

            .toolbar {

                Button {

                    showTranslation.toggle()

                } label: {

                    Image(systemName: "translate")

                }

            }

        }

    }

}

Чтобы протестировать функциональность перевода, необходимо запустить приложение на устройстве. В настоящее время предварительный просмотр и симулятор не могут выполнять задачи перевода.

В приведенном выше примере при нажатии на кнопку, расположенную на панели инструментов, будет показан оверлей перевода.

Оверлей перевода с действиями перевода по умолчанию.

Замена текста в представлении

Еще одна доступная опция — возможность замены текста в представлении, где происходит перевод. Параметр replacementAction модификатора предоставляет вам переведенный текст, чтобы вы могли использовать его для обновления элементов пользовательского интерфейса.

.translationPresentation(isPresented: $showTranslation, text: text) { translatedText in
    text = translatedText
}

xxxxxxxxxx

.translationPresentation(isPresented: $showTranslation, text: text) { translatedText in

    text = translatedText

}

В нашем примере замыкание присваивает значение translatedText ранее объявленной переменной text. Если вы предоставите действие замены, окно перевода предоставит пользователю опцию «Заменить переводом», которая вызовет замыкание и выполнит замену текста по вашему желанию.

Оверлей перевода со стандартными действиями перевода плюс опция «Заменить переводом».

Обязательно прикрепите модификатор представления перевода к содержимому, требующему перевода. На iPadOS и macOS наложение перевода отображается в виде всплывающего окна над переводимым содержимым, поэтому привяжите модификатор перевода к элементу интерфейса, который будет переведен.

Кроме того, вы можете определить представление поповера, включив параметр arrowEdge в модификатор представления перевода.

Источник