在 Alexa 技能開發中，若要打造更具互動性的使用者經驗，視覺介面扮演著至關重要的角色。APL (Alexa Presentation Language) 正是實作此目標的利器，它讓開發者能結合語音、視覺和觸控輸入，創造更豐富的互動場景。本文將深入探討如何運用 APL 建構多模態視覺化回應，涵蓋回應式元件的應用、文字轉語音的機制、APL 範本的設計、資料的動態載入與渲染，以及 LaunchRequest 的處理流程，並佐以程式碼範例，讓讀者能快速上手。透過本文的引導，開發者將能更有效地運用 APL，為使用者帶來更直覺、更具吸引力的 Alexa 技能體驗。
回應式元件和 Alexa 佈局
APL 提供了一系列的回應式元件和範本，允許開發者建立適應不同螢幕尺寸和裝置的視覺化元素。這些元件包括按鈕、影像、進度條、文字列表項等。
要使用回應式元件和範本，開發者需要將 alexa-layouts 包新增到 import 中。
轉換文字為語音
APL 提供了一種稱為轉換器（Transformers）的機制，允許開發者將資料從一個格式轉換為另一個格式。例如，開發者可以使用 textToSpeech 轉換器將純文字轉換為語音。
轉換器可以在 APL 檔案中定義，並使用 Execute Command 指令執行。
以下是一個簡單的 APL 設計範例，展示瞭如何使用轉換器將文字轉換為語音：
{
"transformers": [
{
"inputPath": "oddFactText",
"outputName": "outputSpeech",
"transformer": "textToSpeech"
}
]
}
這個範例定義了一個轉換器，將名為 oddFactText 的輸入路徑轉換為名為 outputSpeech 的輸出名稱，並使用 textToSpeech 轉換器將純文字轉換為語音。
APL視覺多模態回應
在Alexa技能開發中，APL（Alexa Presentation Language）是一種強大的工具，允許開發者建立視覺化和多模態的回應。以下是如何使用APL建立一個簡單的視覺多模態回應的步驟。
步驟1：定義APL範本
首先，需要定義一個APL範本，該範本包含了視覺化的佈局和內容。以下是範例APL範本：
{
"type": "APL",
"version": "1.6",
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "Container",
"items": [
{
"type": "Text",
"text": "${payload.data.properties.oddFactText}",
"speech": "${payload.data.properties.outputSpeech}",
"id": "oddFactText",
"onMount": [
{
"type": "SpeakItem",
"componentId": "oddFactText"
}
],
"width": "100vw",
"height": "10vh"
}
]
}
]
}
}
這個APL範本定義了一個包含一個Text元件的Container元件。Text元件的內容來自於payload.data.properties.oddFactText，而語音內容來自於payload.data.properties.outputSpeech。
步驟2：定義語音轉文字轉換器
接下來，需要定義一個語音轉文字轉換器，以便將語音內容轉換為文字。以下是範例轉換器：
{
"transformers": [
{
"inputPath": "oddFactText",
"outputName": "outputSpeech",
"transformer": "textToSpeech"
}
]
}
這個轉換器將oddFactText的內容轉換為語音，並輸出到outputSpeech中。
步驟3：載入APL範本和資料
在Alexa技能程式碼中，需要載入APL範本和資料。以下是範例程式碼：
import json
from ask_sdk_model.interfaces.alexa.presentation.apl import RenderDocumentDirective
def _load_apl_document(file_path):
with open(file_path, 'r') as f:
return json.load(f)
def load_apl_template():
apl_template = _load_apl_document('main.json')
return apl_template
def load_data():
data = _load_apl_document('data.json')
return data
這個程式碼載入了APL範本和資料，並傳回載入的結果。
步驟4：渲染APL範本
最後，需要渲染APL範本，以便產生視覺化和多模態的回應。以下是範例程式碼：
def render_apl_template(apl_template, data):
render_directive = RenderDocumentDirective(
token='token',
document=apl_template,
datasources=data
)
return render_directive
這個程式碼渲染了APL範本，並傳回渲染的結果。
啟動請求處理器
class LaunchRequestHandler(AbstractRequestHandler):
"""啟動請求處理器"""
def can_handle(self, handler_input):
# type: (HandlerInput) -> bool
return ask_utils.is_request_type("LaunchRequest")(handler_input)
def handle(self, handler_input):
# type: (HandlerInput) -> Response
payload = {
"data": {
"properties": {
"oddFactText": "火烈鳥...",
"outputSpeech": "火烈鳥..."
}
}
}
return (
handler_input.response_builder
.add_directive(
ExecuteCommandsDirective(
token="pagerToken",
commands=[
{
"type": "SetPage",
"componentId": "main",
"arguments": payload
}
]
)
)
.response
)
APL 檔案載入
def _load_apl_document(file_path):
# type: (str) -> Dict[str, Any]
"""載入 APL 檔案"""
with open(file_path) as f:
return json.load(f)
測試程式碼
啟動請求處理器現在會在啟動時說出「火烈鳥…」。我們也可以執行程式碼來實作這一點。編輯 main.json 檔案，移除 OnMount，使其變為：
{
"type": "APL",
"version": "1.6",
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "Container",
"items": [
{
"text": "${payload.data.properties.oddFactText}",
"type": "Text",
"width": "100vw",
"height": "10vh",
"speech": "${payload.data.properties.outputSpeech}",
"id": "oddFactText"
}
]
}
]
}
}
現在，啟動請求處理器包含 ExecuteCommandsDirective，它會在啟動時設定頁面並顯示「火烈鳥…」。
APL 多模態視覺化回應
在 Alexa Presentation Language (APL) 中，多模態視覺化回應是一種強大的功能，允許開發者建立豐富且互動的使用者經驗。這種回應型別結合了語音、視覺和觸控輸入，提供了一種更自然和直觀的與 Alexa 裝置互動方式。
啟動請求
當使用者啟動技能時，Alexa 會向技能傳送 LaunchRequest。這個請求是啟動技能的入口點，開發者可以在這裡定義初始的回應和視覺化內容。
def handle(self, handler_input):
# type: (HandlerInput) -> Response
return (
handler_input.response_builder
.speak(speak_output)
.ask("Keep the session open")
.add_directive(
RenderDocumentDirective(
token="pagerToken",
document=_load_apl_document("main.json"),
datasources=_load_apl_document("data.json")
)
)
.add_directive(
ExecuteCommandsDirective(
token="pagerToken",
commands=[{
"type": "SpeakItem",
"componentId": "oddFactText"
}]
)
)
)
在上面的程式碼中，handle 函式處理 LaunchRequest 並傳回一個 Response 物件。這個物件包含了語音回應、視覺化內容和指令。
RenderDocumentDirective
RenderDocumentDirective 用於渲染 APL 檔案。它需要一個 token、document 和 datasources 作為引數。
token: 一個唯一的識別符號，用於識別指令。document: APL 檔案的路徑或內容。datasources: 資料來源的路徑或內容。
在這個例子中，main.json 是 APL 檔案，data.json 是資料來源。
從使用者經驗視角出發，整合Alexa Presentation Language (APL)打造多模態回應，能顯著提升Alexa技能的互動性和吸引力。本文深入探討了APL的回應式元件、轉換器以及如何建構視覺化介面和多模態回應，並提供了實務程式碼範例。
分析顯示，APL的多模態設計能更有效地傳達資訊，例如結合文字顯示與語音合成，讓使用者更容易理解複雜內容。然而，開發者仍需注意效能調校，例如避免過度使用動畫或複雜佈局，以確保流暢的使用者經驗。同時，APL的跨裝置相容性仍有待提升，需仔細測試不同螢幕尺寸和裝置的顯示效果。
展望未來，APL與其他Alexa技術的整合將更加緊密，例如更深度地結合語音辨識和自然語言理解，創造更智慧、更個人化的互動體驗。預期將出現更多創新的應用場景，例如互動式遊戲、個人化資訊面板等。
對於想要提升Alexa技能使用者經驗的開發者，建議深入學習APL，並關注其最新發展趨勢。優先將APL應用於資訊呈現和互動引導等核心環節，將能最大化其價值。
