Slide 1
Slide 1 text
#love_swift
©2024 RAKUS Co., Ltd.
Translating text within your app
集まれSwift好き！Swift愛好会スピンオフ
WWDC24セッション要約会 @ DeNA
2024/06/26
@akkiee76
Slide 2
Slide 2 text
#love_swift
● Akihiko Sato
● DeNA Co., Ltd.
● 𝕏 : @akkiee76
● Speaker Deck : @akkie76
Profile
2
Slide 3
Slide 3 text
#love_swift
WWDC24 🎉
3
Slide 4
Slide 4 text
#love_swift
Theme
Ovierview
“Meet the Translation API” 🚀
4
Slide 5
Slide 5 text
#love_swift
Overview
● Adopt “.translationPresentation()” to quickly add
translation to your app.
● User TranslateSession for your deeper integration
with your app’s UI.
● Best Practices
5
Slide 6
Slide 6 text
#love_swift
Translate Framework
You can offer in-app translations
from one language to another.
To display simple system translations in your app. 🚀
6
Slide 7
Slide 7 text
#love_swift
Translate Framework
● Simple overlay
● Flexible translation
7
Slide 8
Slide 8 text
#love_swift
Simple translation overlay
● .translationPresentation API
○ Presents a translation popover when a given condition is true.
8
var body: some View {
VStack {
Text(verbatim: originalText)
Button("Translate") {
showTranslation.toggle()
}
}
// Offer a system UI translation.
.translationPresentation(isPresented: $showTranslation, text: originalText)
SwiftUI | iOS 17.4+ | iPadOS 17.4+ | macOS 14.4+
Slide 9
Slide 9 text
#love_swift
Simple translation overlay
● .translationPresentation API
9
Slide 10
Slide 10 text
#love_swift
Flexible translation API
● TranslationSession
10
OS 18.0+ Beta | iPadOS 18.0+ Beta | macOS 15.0+ Beta
VStack {
TextField("Enter text to translate", text: $sourceText)
}
// Pass the configuration to the task.
.translationTask { session in
do {
// Use the session the task provides to translate the text.
let response = try await session.translate(sourceText)
// Update the view with the translated result.
targetText = response.targetText
} catch {
// Handle any errors.
}
}
Slide 11
Slide 11 text
#love_swift
Flexible translation API
11
@State private var configuration: TranslationSession.Configuration?
var body: some View {
VStack {
TextField("Enter text to translate", text: $sourceText)
Button("Translate") {
configuration = .init()
}
Text(verbatim: targetText)
}
// Pass the configuration to the task.
.translationTask(configuration) { session in
do {
// Use the session the task provides to translate the text.
let response = try await session.translate(sourceText)
// Update the view with the translated result.
targetText = response.targetText
} catch {
}
Slide 12
Slide 12 text
#love_swift
Flexible translation API
12
@State private var configuration: TranslationSession.Configuration?
var body: some View {
VStack {
TextField("Enter text to translate", text: $sourceText)
Button("Translate") {
triggerTranslation()
}
Text(verbatim: targetText)
}
// Pass the configuration to the task.
.translationTask(configuration) { session in
do {
// Use the session the task provides to translate the text.
let response = try await session.translate(sourceText)
// Update the view with the translated result.
targetText = response.targetText
} catch {
}
func triggerTranslation() {
guard configuration == nil else {
configuration?.invalidate()
return
}
// Let the framework automatically determine the
language pairing.
configuration = .init()
}
Slide 13
Slide 13 text
#love_swift
On-device translation
● On-device ML models
● Shared with all apps, including Translate
● API take care of :
○ Download permission
○ Download progress
○ Continuing in background
13
Slide 14
Slide 14 text
#love_swift
Translating multiple languages
● Badge translation API
○ Translates multiple strings of text of the same language,
returning the results all at once when complete.
14
public func translate(batch: [TranslationSession.Request]) -> TranslationSession.BatchResponse
iOS 18.0+ | iPadOS 18.0+ | macOS 15.0+
public func translations(from batch: [TranslationSession.Request]) async throws -> [TranslationSession.Response]
Slide 15
Slide 15 text
#love_swift
Translating multiple languages
15
var foodItems = ["Salat 🥗", "Fritten 🍟", "Suppe 🍜"]
func translateAllAtOnce(using session: TranslationSession) async {
Task { @MainActor in
let requests: [TranslationSession.Request] = foodItems.map {
// Map each item into a request.
TranslationSession.Request(sourceText: $0)
}
do {
let responses = try await session.translations(from: requests)
foodItems = responses.map {
// Update each item with the translated result.
$0.targetText
}
} catch {
// Handle any errors.
}
}
}
Slide 16
Slide 16 text
#love_swift
Translating multiple languages
16
func translate(using session: TranslationSession) async {
do {
var requesets: [TranslationSession.Request] = []
requesets.append(contentsOf: self.germanRequests)
equesets.append(contentsOf: self.spanishRequests)
for try await response in session.translate(batch: requesets) {
handle(response: response)
}
} catch {
// Handle any errors.
}
}
Do not merge
sessions of different languages
Slide 17
Slide 17 text
#love_swift
Translating multiple languages
17
func translate(using session: TranslationSession) async {
do {
for try await response in session.translate(batch: self.germanRequests) {
handle(response: response)
}
for try await response in session.translate(batch: self.spanishRequests) {
handle(response: response)
}
} catch {
// Handle any errors.
}
}
✅
Slide 18
Slide 18 text
#love_swift
Others
● Language Support
○ Hindi
● Best Practice
○ Not Simulator
○ SF Symbols translate
18
Slide 19
Slide 19 text
#love_swift
Preferences
● Meet the Translation API
○ https://developer.apple.com/videos/play/wwdc2024/10117
● Translating text within your app
○ https://developer.apple.com/documentation/translation/transl
ating-text-within-your-app
19
Slide 20
Slide 20 text
#love_swift
Thank you 🙏
20