第五章 系統實作與討論

第五章 系統實作與討論

5.1 XAML-V 平台系統架構設計

本節對於XAML-V 平台在觀念層級

(Conceptual Level)

(Implementation Level)的運作方式加以區分，並描述單一使用者與多使用者時的系統架構設計。

觀念層級代表虛擬環境使用者在虛擬世界中與他人互動時所「感覺到」的互動方 式；實作層級代表虛擬環境實際運作時的系統架構。(如圖 5.1)

圖5.1 XAML-V 平台運作示意圖 (單人環境的情況)

在圖5.1 的 Conceptual Level 中，方框代表虛擬環境的邊界。就使用者的角 度來看，該使用者正在虛擬環境中與另一由電腦扮演的 Avatar 互動。使用者感 覺像是二個Avatar 背後各有一個操作者(一個是人類、另一個是電腦)。

XAML-V 實際上運作時，並不是真的有一台電腦在背後操作，而是由 IMNet Client 及其相關 Plug-in 元件負責抓取(fetch)、解譯(interpret)並播放腳本，與使用

者互動後，根據互動的結果再向Document Server 抓取下一份對話腳本(如圖 6.1，

Impelmentation Level)。由電腦扮演的 Avatar，其所有互動的邏輯實際上都儲存在 Document Server 上，透過後端 Application Server 會資料庫的協助，可以依據使 用者的回應，動態地產生不同的對話腳本，並取得外界的資料。

在多個使用者的虛擬環境中，線上的使用者透過單一的IMNet Server 來繞送 訊息。此時由電腦控制的Avatar 也會透過 IMNet Client 與虛擬環境溝通中，並與 其它Avatar 互動。如圖 5.2，使用者透過 IMNet Client 可以向電腦操作的 IMNet Client 要求對話，而其對話腳本則完全透過電腦操作的 IMNet Client 向後端的 Documents Server 抓取。

圖5.2 XAML-V 平台運作示意圖 (多人環境的情況)

這 種 運 作 方 式 最 大 的 好 處 是 無 論 是 人 類 扮 演 的 Avatar 或 電 腦 扮 演 的 Avatar，在虛擬環境中都是一視同仁，在使用上較有彈性。使用者也不需區分他

到底是和人還是在和電腦互動。人和電腦的角色甚至於也可以隨時切換。例如某 使用者目前暫時無法自行操作Avatar 時，他可以將 IMNet Client 切換成電腦控制 模式，若有人在他離開時與他操作的 Avatar 對話，電腦也會自動依據該使用者 之前預先設定好的腳本與其它Avatar 互動。

由本節的論述中，我們發現無論在單人或多人環境下，欲實現XAML-V 主 要功能必須對IMNet Client 做適當的擴充與修改。IMNet Client 是使用者在 Client 端所安裝的一支獨立 Java 應用程式，使用者透過此程式所提供的使用者界面與 場景瀏覽器與虛擬環境中互動。IMNet Client 的主要元件除了使用者界面與場景 瀏覽器外，還包含了處理 XAML 腳本的 XAML Interpreter、管理動畫播放的 Animation Manager 與擴充功能用的相關 Plugin 元件。在 5.2 節中我們將探討如 何藉由加入支援XAML-V 的 VoicePluginObject 與其相關元件，使原有的 XAML 平台成為具有互動式語音界面的虛擬環境。

5.2 XAML-V 平台系統元件設計

5.2.1 XAML-V 主要元件

為驗証XAML-V 的可行性，我們基於既有的 XAML 平台，針對其提供的 Plug-in 擴充機制實作出 VoicePlugin 與相關元件。本系統的重要元件如圖 5.3 所示。其 重要組成元件說明如下:

1. VoicePluginObject 模組– 這個元件提供了 XAML 平台的插入點。它負責 接收來自XAML 平台的腳本語言，並將實際的解譯及執行工作委派(Delegate) 給XAML-V Interpreter。這個模組同時也必須處理多人環境下的對話協議機

制，也就是XAML-V 中的<protocol>元素內容，並管理對話權利(Dialog Lock) 與對話狀態(Dialog State)。

圖5.3 XAML-V 系統架構 (本圖與圖 4.3 相同)

2. XAML-V Interpreter 模組– 是 XAML-V 平台的核心元件，負責解譯將處 理從VoicePluginObject 所傳進來的 XAML-V 腳本語言。XAML-V Interpreter 會跟據這些腳本的內容，協調其它各元件完成所指定的工作。

3. 執行時期環境(ExecutionContext)模組– 用來 XAML-V Interpreter 所需之儲 存執行時期設定檔(runtime configurations)並負責記錄目前對話狀態(Dialog State)等資訊。

4. 對 話 文 件 伺 服 器 (Dialog Document Server) – 透 過 HTTP 協 定 提 供 XAML-V 對話腳本，這些腳本可能是預先寫好，以靜態方式提供或是執行 時期由Server Side Script 動態產生。我們目前計畫使用開放原始碼的 Tomcat

4.1 做為 Dialog Document Server。

5. HTTP 處理器(HttpClient)模組– 透過 HTTP 協定和 Dialog Document Server 溝通，為XAML-V Interpreter 抓取 XAML-V 對話腳本並處理 HTTP 協定之 細節。

5.2.1 語音系統與虛擬環境之整合

本研究所使用的虛擬環境平台IMNet 是採 Client-Server 的模式運作。我們將 本研究中所採用的整合方法和2.4 節中相關研究所使用的方法加以比較列表如下 (如表 5.1)。本研究所採用的整合方式是位於最右方的 XAML-V Platform 部份。

表5.1 : 虛擬環境與語音界面整合之比較

本研究所使用的虛擬環境是以IMNet Client 與 IMNet Server 為基礎，其中 IMNet Client 的場景瀏覽器部份是使用 Java 3D 開發而成，且支援 VRML 格式。

而IMNet Server 運作機制則和 VNet [46]類似，中間以 XML 做為訊息的傳送格 式。IMNet Client 可支援 XAML 的可擴充腳本語言[32]及其相對元件內嵌模型 (Plug-in Object Model)[33]。

由於本研究中實作工具以Java 語言為主，而一般語音引擎只支援 C 語言為 主的API，所以我們採用了 Cloud Garden 的 API [13]來加以整合。Cloud Garden API 提供了多種語音引擎的 Java Speech API Bridge，使用 Cloud Garden API 可以 透過Java 語言和語音引擎直接進行溝通。採用 Cloud Garden 的另一個好處是後 端的語音引擎可以視需要隨時更換，並不影響整個平台的實作。

圖5.4 Protocol Framework

5.2.2 Protocol Framework

XAML/XAML-V 平 台 中 所 有 的 訊 息 都 是 由 XML 組 成 ， 在 記 憶 體 中 以 DOM(Document Object Model)的方式存在，所以整個系統運作牽涉到大量的

DOM 合成與拆解動作，也需要一大堆 DOM 的操作程式碼。我們將這部份抽象 化，把所有XAML/XAML-V 以 Protocol 界面(interface)表示，把整個建構過程包 裝成一個Protocol Framework(如圖 5.4)。

框架(Framework)是一種重用的技術，通常會由一組抽象類別及這群抽象類 別的互動來描述[16]。所有的 XAML/XAML-V 訊息都直接繼承此框架的類別，

並實作裏面的build()方法即可。

例如發出一個「要求對話」的訊息原本需要一連串的文件組合行為才能達成 (如圖 5.5)，非常不方便且程式可讀性低。

Element xamlvProtocol = new Element("xaml-v");

Element dialogRequestProtocol = new Element("dialog-negotiate");

Attribute sourceAttr = new Attribute("source",source);

Attribute statusAttr = new Attribute("context",context);

dialogRequestProtocol.setAttribute(sourceAttr);

dialogRequestProtocol.setAttribute(statusAttr);

xamlvProtocol.addContent(dialogRequestProtocol);

sendMessageTo("avatar1",xamlvProtocol);

圖5.5 傳送訊息:不使用 Protocol Framework

Protocol Framework 實作了[21]的 Template Method Pattern，只要繼承並實作

「要求對話」的DialogRequestProtocol 的 build()方法，在使用端的程式，只要傳 入必要的參數後，呼叫getContent()方法即可達成和原來相同的功能 (如圖 5.6)，

此方式較原來的容易使用且程式碼可讀性也較高。

sendMessageTo("avatar1",new DialogRequestProtocol("avatar2","accept").getContent());

圖5.6 傳送訊息: 使用 Protocol Framework

5.2.3 XAML-V 解譯器(Interpreter)

XAML-V 解譯器的設計如圖 5.7 所示，VoicePlugin 會先將傳入的 XAML-V 腳本 交給Interpreter 類別來處理。XAML-V 腳本由許多 Form 組成，每個 Form 中包 含許多代表不同語意的XML 標籤(Tag)，這些標籤代表不同執行指令。我們利用 [21]中的 Composite Pattern 來表達這種模型。

圖5.7 XAML-V Interpreter

如圖5.7，XamlvForm 代表特定的 Form 元素，ConcreteTagHandler 代表不同 標籤指令的抽象化，這二種元素本質上都屬於XamlvTag 這個類別，而 XamlvForm

可能會包含一到多個 ConcreteTagHandler。每個 XamlvTag 都含有一個 execute() 方法，差異只在於execute()方法的內容透過 Strategy Pattern[21]，不同的 Tag 會 透過多形(Polymorphism)來執行不同的指令。

XamlvTag 的各子類別在處理或執行指令的過程中，時常要向外傳送訊息、

或與使用者界面互動，在不希望彼此藕合性太高的情況下，我們採用了[18]中的 Registry Pattern，使用了中介的 ExecutionContext 來儲存外部元件的參考，如此 一來日後外部元件或內部Interpreter 的更動修改都比較不會影響到對方。

5.2.4 DialogLock 的實作

在3.2.2 中我們探討了 DialogLock 的觀念，實作上我們也為 DialogLock 建立了一 個相對應的 Domain Model 來表達此一概念。如圖 5.8 所示，我們使用一個 DialogLock 類別來表達對話的權利，對話狀態則由 DialogState 來表示。DialogState 中定義並列舉(Enumerate)了所有可能的對話狀態(請參考 3.2.2 節)，而一個 DialogLock 在同一時間只會有一個 DialogState。

圖5.8 Dialog Lock 的實作

5.2.5 使用者輸入機制(Input Device)之實作

原本的 XAML 都是播放用的腳本動畫，在 XAML-V 我們加入了互動對話的機 制，因此在XAML-V 播放的途中，可能必須停下來等待使用者的回應才能使腳 本進行下去。一般等待使用者回應都會使用一個輪詢迴圈(polling loops)，同時去 polling 使用者是否有回應。這種方式可以正常運作，但會造成系統效能的嚴重問 題。我們採用[21]所建議的方法，使用 Observer Pattern[21]加上 Java 語言中 wait() 與notifyAll()等 Thread 管理機制來取代輪詢迴圈(如圖 5.9)。

值 得 注 意 的 是 ， 圖 5.9 中 的 ConcreteInputDevice 可 以 是 文 字 輸 入 (TextInputDevice)或語音輸入(SpeechInputeDevice)，二者之間的切換並不影響到 既有系統的運作。

圖5.9 Input Device 的實作

5.2.6 使用軟體樣式來解決 XAML-V 的設計問題

在本節我們使用一系列的軟體樣式技術(請參閱 2.6)來解決 XAML-V 的設計問 題。軟體樣式技術使得成功的實作經驗得以重複實現，特別適合用在複雜的設計 問題。我們發現使用此技術來實作XAML-V 平台時，針對面臨的問題，找尋已 被驗証可行的樣式來套用，不但加快了開發速度、減少錯誤，也使得平台更容易 擴充與維護。我們將5.2 節所使用的軟體樣式與其所解決的設計問題列表整理如 下:

表5.2 使用軟體樣式來解決 XAML-V 的設計問題

問題 樣式名稱 出處

想動態產生由XML 組成的 Protocol，但又想避免大 量DOM 的拆解與合成動作

Template Method Design Patterns [21]

表達XAML-V 標籤之間的互相包含關係 Composite Design Patterns

依據標籤不同動態觸發不同類別的指令 Strategy Design Patterns

如何有效率地實作「XAML-V 解譯並播放途中如何 停下來並等得使用者回應」的功能

Observer Wait + Notify

Design Patterns、Pratical Java[21]

如何同時支援文字和語音的輸出入界面 Plugin Patterns of Enterprise

Application Architecture [18]

5.3 XAML-V 平台主要元件與佈署方式

XAML-V 平台中各個主要元件的佈署方式如圖 5.10 所示。一個完整的多人 虛擬環境平台具備了Client 與 Server 二個部份。在一般的情況下 Client 與 Server

會位於不同的電腦，而為了支援對話機制我們必須另外架設一台支援Server-side Scripting 的應用程式伺服器來做為 XAML-V 平台的對話文件伺服器(Document Server)。在本研究中是採用 Apache Tomcat 4.1.24，使用 JSP 來做 Server-side Scripting。

圖5.10 XAML-V 各元件的佈署方式

在Server 端佈署的是一個 IMNet Server，負責繞送所有 Client 之間的訊息；

而在Client 端有五個元件，其中 IMNet Client 負責處理與 IMNet Server 的溝通 細節與訊息打包。TTS(如圖 5.11 所示)與 ASR Server 分別負責語音合成和語音辨 識的功能，我們使用Java Speech API 配合 Cloud Garden [13]界面自行實作並和 IBM Via Voice 語音引擎整合，並和 XAML-V Interpreter 元件溝通。VoicePlugin 是整個XAML-V 平台的核心，負責操作 interpreter、協調各元件與使用者互動，

根據收到的訊息，可能會播放一段 Script、發出另一段訊息或是透過 HTTP 向 Document Server 取得腳本。

圖5.11 語音合成伺服器

系統運作時 Client 端的執行情況如圖 5.12 所示。畫面中間顯示了虛擬環境 中的情況與人物的動畫，上方訊息視窗顯示目前系統狀態和抓取對話腳本的情 況。當使用者不想使用語音辨識功能時，左下角有一個對話方格可以提供使用者 以鍵盤輸入訊息或輸入欲播放的腳本。圖 5.12 同時顯示了二個正在進行對話的 IMNet Client，左方代表電腦控制的 IMNet Client，右方代表由人類控制的 IMNet Client。在圖 5.12 左上角訊息視窗可發現電腦控制的 IMNet Client 正向 Document Server 抓取 XAML-V 對話腳本。

圖5.12 Client 端的執行畫面 – 人和系統對話

在5.1 節中我們曾提到人和電腦的角色也可以隨時切換。如圖 5.12 和圖 5.13 是同一個場景，不同的是在圖 5.13 中是切換成人和人之間的對話。使用者可以 透過語音輸入會直接在對話盒中輸入文字與另一個Avatar 進行對話。

圖5.13 Client 端的執行畫面 – 人和人直接對話

為了監控與驗証XAML 與 XAML-V 訊息在多人虛擬環境下訊息傳遞的正確 性，我們發展了一套多人虛擬環境下的訊息監視器(Message Moniter) (如圖 5.14)。此一訊息監視器會攔截所有在 IMNet 上流動的訊息，並將詳細的資訊製 成表單，可供我們開發時追蹤訊息傳送的流程與結果。我們相信除了 XAML-V 平台之外，訊息監視器在未來開發其它 XAML 的擴充模組時也是一項具有價值 的測試與除錯工具。

圖5.14 使用 Message Monitor 監控互動訊息

5.4 XAML-V 平台實作成果

本節使用一個簡單的範例來展示 XAML-V 的實作成果，對話文件伺服器 (Document Server)上的腳本檔主要由 index.jsp 與 helpFormResponse.jsp 二個檔案 構成(如圖 5.15、圖 5.16)，index.jsp 透過內含的 Form，會指示解譯器將使用者的 回應送回，並由系統控制的虛擬人物向對話文件伺服器要求下一份對話腳本 (helpFormResponse.jsp)。我們採用 JSP 做為動態產生腳本的機制，根據使用者的 不同回應，可產生不同腳本；例如在 index.jsp 中，系統在使用者第一次與第二 次觸發此腳本時，所得到的問候語內容就會不同(如圖 5.15)。

從圖 5.15 中可以發現 XAML-V 以 Plugin 的方式內嵌在 XAML 文件中，在 根元素<AnimItem>中，設定 playMode 為 seq，要求 IMClient 循序播放此一腳本。

在XAML-V 文件中，藉由<animation>標籤的使用，也可以內嵌 XAML 所提供的

動畫腳本。<field>籤標會指示解譯器播放動畫或語音，以提示使用者輸入資訊，

待取得使用者的回應後，解譯器會根據<submit>標籤的指示，將資訊以 HTTP 方 式 送 往 下 一 份 文 件 。 在 本 範 例 中 ， 使 用 者 的 回 應 資 訊 會 被 送 往 helpFormResponse.jsp(如圖 5.16)。

圖5.15 index.jsp

使用者的回應資訊會被送往helpFormResponse.jsp 之後，會根據所收到的資 訊，產生不同的腳本。例如在圖5.16 的對話腳本中，使用者回答「IM Lab」時，

系統會播放一段動畫，告訴他IM Lab 在那裏；使用者回答「No Thanks」時，系 統會向他播一段揮手的動畫，並說「Good Bye」。腳本執行完畢後，根據<submit>

標籤中的定義，又會回到index.jsp。

圖5.16 helpFormResponse.jsp

圖 5.17 是利用上面提及的這二段腳本所執行的結果。根據腳本，系統會向 使用者問好(如圖 5.17-a)，並提示使用者可輸入的語句(如圖 5.17-b)。此時使用者 回答「IM Lab」，系統會指出其方向，並回答「IM Lab is this way」(如圖 5.17-c)，

接下來又回到原來的問題，不過這是使用者第二次觸發此腳本，所以根據圖5.15 腳本的設計，系統會播放不同的語音(如圖 5.17-d)，此時使用者回答「no thanks」， 於是系統回答「Good Bye」後結束這段對話。

(a) (b) (c)

(d) (e) (f)

圖5.17 實作成果(參與對話者的角度)

在使用者與系統進行對話的同時，虛擬環境中的其它虛擬人物也應該要能從 旁觀者的角度來觀看剛才這段對話。如圖 5.18 所示，圖 5.18-a~f 的時間點分別 對應到圖5.17 的 a~f。其中畫面右方的男性虛擬人物代表使用者，正在與系統扮 演的虛擬人物(即為圖 5.17 中的所見的虛擬人物)對話。

(a) (b) (c)

(d) (e) (f)

圖5.18 實作成果(旁觀者的角度)

本章節由高階至低階對XAML-V 平台的實作議題做深入的分析與探討。首 先我們區分出觀念層級與實作層級，針對單使用者與多使用者的分別說明其系統 架構設計上的考量與不同的做法。接著介紹了XAML-V 平台主要元件的設計，

包括語音系統如何與虛擬環境整合的考量與我們所選擇的實作方法，並使用了一 系列的軟體樣式來解決設計元件時所遇到的問題。最後我們提供了一個完整的執 行範例來說明XAML-V 的機制在多人虛擬環境中如何達成對話控制與腳本傳播 的機制。我們希望本研究的實作成果除了可以驗証XAML-V 的可行性之外，藉 由軟體樣式的使用與 Framework 的建立，可以使未來的相關研究與應用更加容 易。