APL視覺多模態回應技術整合與應用

– 5 分鐘閱讀

APL 是一種根據 JSON 的宣告式語言，用於設計和呈現 Alexa 技能的視覺化介面。開發者可以使用 Authoring Tool 提供的圖形介面或直接編寫 JSON 程式碼來建立 APL 檔案。APL 檔案包含各種元件，例如文字、影像、容器等，每個元件都具有一系列屬性，例如寬度、高度、對齊方式等。APL 與程式碼的連線方式可以透過複製 APL JSON 程式碼到程式碼中，或使用連結到 Authoring Tool 中儲存的檔案。渲染 APL 檔案則使用 RenderDocumentDirective 指令，並可透過 Python 或 Node.js 載入和執行 APL 檔案。開發者可以利用 APL 命令控制視覺化元素和多媒體內容，進而打造更豐富的使用者經驗。

5. 連線 APL 和程式碼

APL 可以透過兩種方式與程式碼連線：a) 複製 APL JSON 程式碼到程式碼中，或 b) 使用連結到 Authoring Tool 中儲存的檔案。

6. 渲染檔案

APL 使用 RenderDocumentDirective 來渲染檔案。開發者可以提取單獨的檔案和資料來源。

7. 載入 APL 檔案

開發者可以使用 Python 程式碼來載入 APL 檔案。

aplDocument = _load_apl_document('./apl/videoAPL.json')

8. 渲染 APL 檔案

APL 檔案可以透過 RenderDocumentDirective 來渲染。

內容解密：

  • APL 是一種用於建立視覺化多模態回應的語言。
  • Authoring Tool 提供了一個 GUI 介面，允許開發者建立 APL 專案。
  • APL 允許開發者設計和定義視覺化內容，包括文字、影像、容器和其他元件。
  • 開發者可以使用 GUI 介面來新增和組態元件。
  • 每個元件都有一系列屬性，例如寬度、高度、對齊方式等。
  • APL 可以透過兩種方式與程式碼連線：a) 複製 APL JSON 程式碼到程式碼中，或 b) 使用連結到 Authoring Tool 中儲存的檔案。
  • APL 使用 RenderDocumentDirective 來渲染檔案。
  • 開發者可以使用 Python 程式碼來載入 APL 檔案。

圖表翻譯：

  flowchart TD
    A[APL] --> B[Authoring Tool]
    B --> C[GUI 介面]
    C --> D[新增元件]
    D --> E[組態元件屬性]
    E --> F[連線 APL 和程式碼]
    F --> G[渲染檔案]
    G --> H[載入 APL 檔案]

圖表說明：

  • APL 是一種用於建立視覺化多模態回應的語言。
  • Authoring Tool 提供了一個 GUI 介面，允許開發者建立 APL 專案。
  • GUI 介面允許開發者新增和組態元件。
  • 每個元件都有一系列屬性，例如寬度、高度、對齊方式等。
  • APL 可以透過兩種方式與程式碼連線：a) 複製 APL JSON 程式碼到程式碼中，或 b) 使用連結到 Authoring Tool 中儲存的檔案。
  • APL 使用 RenderDocumentDirective 來渲染檔案。
  • 開發者可以使用 Python 程式碼來載入 APL 檔案。

使用 APL 建立視覺多模態回應

在本章中，我們將探討如何使用 Alexa Presentation Language (APL) 建立視覺多模態回應。APL 是一種強大的工具，允許您建立複雜的視覺介面和多模態回應。

什麼是 APL？

APL 是一種根據 JSON 的語言，允許您定義視覺介面和多模態回應。它提供了一組豐富的功能，包括支援圖片、影片、音訊和其他多媒體元素。

如何使用 APL

要使用 APL，您需要建立一個 APL 檔案，並將其載入您的 Alexa 技能中。以下是建立 APL 檔案的步驟：

  1. 建立一個新的 JSON 檔案，並將其命名為 videoAPL.json。
  2. 將以下程式碼複製到檔案中：
{
  "type": "Link",
  "src": "doc://alexa/apl/documents/videoAPL"
}
  1. 儲存檔案並將其放在您的 lambda 函式目錄中。

載入 APL 檔案

要載入 APL 檔案，您需要使用 RenderDocumentDirective 類別。以下是如何做到的：

from ask_sdk_model.interfaces.alexa.presentation.apl import RenderDocumentDirective
import json

def _load_apl_document(file_path):
    with open(file_path) as f:
        return json.load(f)

# 載入 APL 檔案
apl_document = _load_apl_document('apl/videoAPL.json')

# 建立 RenderDocumentDirective 物件
directive = RenderDocumentDirective(
    token="imageToken",
    document=apl_document,
    datasources={}
)

# 將指令新增到您的 Alexa 技能中
response = {
    'directives': [directive]
}

執行 APL 檔案

要執行 APL 檔案，您需要使用 ExecuteCommandsDirective 類別。以下是如何做到的：

from ask_sdk_model.interfaces.alexa.presentation.apl import ExecuteCommandsDirective

# 建立 ExecuteCommandsDirective 物件
directive = ExecuteCommandsDirective(
    token="imageToken",
    commands=[
        {
            "type": "SendEvent",
            "arguments": [
                {
                    "name": "event",
                    "value": "playVideo"
                }
            ]
        }
    ]
)

# 將指令新增到您的 Alexa 技能中
response = {
    'directives': [directive]
}

檢查螢幕支援

首先，我們將在程式碼中新增一個檢查，以確定使用者的裝置是否具有螢幕。當使用者的裝置具有支援 APL 的螢幕時，請求封套中包含 alexa_presentation_apl。

在 Python 中，您可以使用：

if presentation_apl is not None:

或者，更乾淨的方法是匯入函式庫：

from ask_sdk_core.utils import get_supported_interfaces

然後使用：

if get_supported_interfaces(handler_input).alexa_presentation_apl is not None:
    # OK，裝置具有螢幕

Node.js 程式碼是：

const Alexa = require('ask-sdk-core');
if (Alexa.getSupportedInterfaces(handlerInput.requestEnvelope)['Alexa.Presentation.APL']) {
    // OK，裝置具有螢幕
}

將 RenderDocumentDirective 新增到回應中。

現在，HelloWorldIntent 處理程式的全部程式碼是：

class HelloWorldIntentHandler(AbstractRequestHandler):
    """Handler for Hello World Intent."""
    def can_handle(self, handler_input):
        # type: (HandlerInput) -> bool
        return ask_utils.is_intent_name("HelloWorldIntent")(handler_input)

    def handle(self, handler_input):
        # type: (HandlerInput) -> Response
        speak_output = "Here's your A. P. L."
        aplDocument = _load_apl_document('./apl/videoAPL.json')
        if get_supported_interfaces(handler_input).alexa_presentation_apl is not None:
            return (
                handler_input.response_builder
               .add_directive(
                    RenderDocumentDirective(
                        token="token",
                        document=aplDocument
                    )
                )
               .speak(speak_output)
               .response
            )

內容解密：

在這個範例中，我們使用 get_supported_interfaces 函式來檢查裝置是否支援 APL。如果裝置支援 APL，我們將 RenderDocumentDirective 新增到回應中，以呈現 APL 檔案。 RenderDocumentDirective 需要一個 token 和一個 document 引數。 token 是一個唯一的識別符號，而 document 是 APL 檔案本身。

圖表翻譯：

  flowchart TD
    A[開始] --> B[檢查裝置是否支援 APL]
    B --> C[如果支援，新增 RenderDocumentDirective]
    C --> D[呈現 APL 檔案]
    D --> E[結束]

在這個流程圖中，我們首先檢查裝置是否支援 APL。如果支援，我們新增 RenderDocumentDirective 到回應中，以呈現 APL 檔案。最後，我們結束程式。

APL 命令和回應式元件

APL（Alexa Presentation Language）是一種用於建立 Alexa 技能的視覺化語言。它允許開發者建立豐富的多模態回應，包括文字、影像和音訊。

APL 命令

APL 命令是用於控制 Alexa 技能的視覺化元素的指令。它們可以用於執行各種動作，例如導航、滾動、更改顯示頁面、更改元件以及控制媒體。

APL 命令分為三類別：

  • 標準命令：這些命令用於執行常見的動作，例如動畫、開啟 URL、平行和順序執行命令、重建檔案、滾動和傳送事件。
  • 媒體命令：這些命令用於控制媒體，例如播放、暫停、下一首、上一首和倒帶。
  • 使用者定義命令：這些命令允許開發者定義自己的自定義命令。

執行命令指令

APL.ExecuteCommands 指令用於向連線的檔案傳送一個或多個命令。這些命令可以用於執行各種動作，例如導航、滾動、更改顯示頁面、更改元件以及控制媒體。

從技術架構視角來看，Alexa Presentation Language (APL) 提供了強大的工具，讓開發者能以宣告式 JSON 建構豐富的視覺化體驗。本文深入探討了 APL 的核心概念，包含使用 Authoring Tool 進行視覺化設計、透過 RenderDocumentDirective 渲染 APL 檔案，以及利用 Python 或 Node.js 進行程式化控制。其中，特別值得關注的是條件式渲染 APL 檔案，透過 get_supported_interfaces 函式，開發者可以確保只在支援 APL 的裝置上呈現視覺內容，提升使用者經驗。然而，APL 的彈性也帶來了複雜性，開發者需要深入理解 APL 命令和回應式元件才能充分發揮其潛力。展望未來，隨著更多裝置支援 APL，以及更多進階功能的推出，預期 APL 將成為建構多模態 Alexa 技能不可或缺的技術。對於有意提升技能互動性的開發者而言，投入學習 APL 並掌握其核心概念將是至關重要的策略。

玄貓

玄貓

技術愛好者，專注於分享程式開發、雲端技術與 AI 應用的心得體會。