2017 年，谷歌在論文《Attention is all you need》中提出了 Transformer，成為了深度學習領域的重大突破。該論文的引用數已經將近 13 萬，后來的 GPT 家族所有模型也都是基于 Transformer 架構，可見其影響之廣。

作為一種神經網絡架構，Transformer 在從文本到視覺的多樣任務中廣受歡迎，尤其是在當前火熱的 AI 聊天機器人領域。

不過，對于很多非專業人士來說，Transformer 的內部工作原理仍然不透明，阻礙了他們的理解和參與進來。因此，揭開這一架構的神秘面紗尤其必要。但很多博客、視頻教程和 3D 可視化往往強調數學的復雜性和模型實現，可能會讓初學者無所適從。同時為 AI 從業者設計的可視化工作側重于神經元和層級可解釋性，對于非專業人士來說具有挑戰性。

因此，佐治亞理工學院和 IBM 研究院的幾位研究者開發了一款基于 web 的開源交互式可視化工具「Transformer Explainer」，幫助非專業人士了解 Transformer 的高級模型結構和低級數學運算。如下圖 1 所示。

Transformer Explainer 通過文本生成來解釋 Transformer 內部工作原理，采用了桑基圖可視化設計，靈感來自最近將 Transformer 視為動態系統的工作，強調了輸入數據如何流經模型組件。從結果來看，桑基圖有效地說明了信息如何在模型中傳遞，并展示了輸入如何通過 Transformer 操作進行處理和變換。

在內容上，Transformer Explainer 緊密集成了對 Transformer 結構進行總結的模型概述，并允許用戶在多個抽象層級之間平滑過渡，以可視化低級數學運算和高級模型結構之間的相互作用，幫助他們全面理解 Transformer 中的復雜概念。

在功能上，Transformer Explainer 在提供基于 web 的實現之外，還具有實時推理的功能。與現有很多需要自定義軟件安裝或缺乏推理功能的工具不同，它集成了一個實時 GPT-2 模型，使用現代前端框架在瀏覽器本地運行。用戶可以交互式地試驗自己的輸入文本，并實時觀察 Transformer 內部組件和參數如何協同工作以預測下一個 token。

在意義上，Transformer Explainer 拓展了對現代生成式 AI 技術的訪問，且不需要高級計算資源、安裝或編程技能。而之所以選擇 GPT-2，是因為該模型知名度高、推理速度快，并且與 GPT-3、GPT-4 等更高級的模型在架構上相似。

• 論文地址：https://arxiv.org/pdf/2408.04619
• GitHub 地址：http://poloclub.github.io/transformer-explainer/
• 在線體驗地址：https://t.co/jyBlJTMa7m

既然支持自己輸入，機器之心也試用了一下「what a beautiful day」，運行結果如下圖所示。

對于 Transformer Explainer，一眾網友給出了很高的評價。有人表示，這是非常酷的交互式工具。

有人稱自己一直在等待一個直觀的工具來解釋自注意力和位置編碼，就是 Transformer Explainer 了。它會是一個改變游戲規則的工具。

還有人做出了中譯版。

展示地址：http://llm-viz-cn.iiiai.com/llm

這里不禁想到了另一位科普界的大牛 Karpathy，它之前寫了很多關于復現 GPT-2 的教程，包括「純 C 語言手搓 GPT-2，前 OpenAI、特斯拉高管新項目火了」、「Karpathy 最新四小時視頻教程：從零復現 GPT-2，通宵運行即搞定」等。如今有了 Transformer 內部原理可視化工具，看起來兩者搭配使用，學習效果會更佳。

Transformer Explainer 系統設計與實現

Transformer Explainer 可視化展示了基于 Transformer 的 GPT-2 模型經過訓練是如何處理文本輸入并預測下一個 token 的。前端使用了 Svelte 和 D3 實現交互式可視化，后端則利用 ONNX runtime 和 HuggingFace 的 Transformers 庫在瀏覽器中運行 GPT-2 模型。

設計 Transformer Explainer 的過程中，一個主要的挑戰是如何管理底層架構的復雜性，因為同時展示所有細節會讓人抓不住重點。為了解決這個問題，研究者十分注意兩個關鍵的設計原則。 

首先，研究者通過多級抽象來降低復雜性。他們將工具進行結構化設計，以不同的抽象層次呈現信息。這讓用戶能夠從高層概覽開始，并根據需要逐步深入了解細節，從而避免信息過載。在最高層，工具展示了完整的處理流程：從接收用戶提供的文本作為輸入（圖 1A），將其嵌入，經過多個 Transformer 塊處理，再到使用處理后的數據來對最有可能的下一個 token 預測進行排序。

中間操作，如注意力矩陣的計算（圖 1C），這在默認情況下被折疊起來，以便直觀地顯示計算結果的重要性，用戶可以選擇展開，通過動畫序列查看其推導過程。研究者采用了一致的視覺語言，比如堆疊注意力頭和折疊重復的 Transformer 塊，以幫助用戶識別架構中的重復模式，同時保持數據的端到端流程。 

其次，研究者通過交互性增強理解和參與。 溫度參數在控制 Transformer 的輸出概率分布中至關重要，它會影響下一個 token 預測的確定性（低溫時）或隨機性（高溫時）。但是現有關于 Transformers 的教育資源往往忽視了這一方面。用戶現在能夠使用這個新工具實時調整溫度參數（圖 1B），并可視化其在控制預測確定性中的關鍵作用（圖 2）。

此外，用戶可以從提供的示例中選擇或輸入自己的文本（圖 1A）。支持自定義輸入文本可以讓用戶更深入參與，通過分析模型在不同條件下的行為，并根據不同的文本輸入對自己的假設進行交互式測試，增強了用戶的參與感。 

那在實際中有哪些應用場景呢？

Rousseau 教授正在對自然語言處理課程的課程內容進行現代化改造，以突出生成式 AI 的最新進展。她注意到，一些學生將基于 Transformer 的模型視為捉摸不透的「魔法」，而另一些學生則希望了解這些模型的工作原理，但不確定從何入手。

為了解決這一問題，她引導學生使用 Transformer Explainer，該工具提供了 Transformer 的互動概覽（圖 1），鼓勵學生積極進行實驗和學習。她的班級有 300 多名學生，而 Transformer Explainer 能夠完全在學生的瀏覽器中運行，無需安裝軟件或特殊硬件，這是一個顯著的優勢，消除了學生對管理軟件或硬件設置的擔憂。

該工具通過動畫和互動的可逆抽象（圖 1C），向學生介紹了復雜的數學運算，如注意力計算。這種方法幫助學生既獲得了對操作的高層次理解，又能深入了解產生這些結果的底層細節。

Rousseau 教授還意識到，Transformer 的技術能力和局限性有時會被擬人化（例如，將溫度參數視為「創造力」控制）。通過鼓勵學生實驗溫度滑塊（圖 1B），她向學生展示了溫度實際上是如何修改下一個詞元的概率分布（圖 2），從而控制預測的隨機性，在確定性和更具創造性的輸出之間取得平衡。

此外，當系統可視化 token 處理流程時，學生們可以看到這里并沒有任何所謂的「魔法」—— 無論輸入文本是什么（圖 1A），模型都遵循一個定義明確的操作順序，使用 Transformer 架構，一次只采樣一個 token，然后重復這一過程。

未來工作

研究者們正在增強工具的交互式解釋來改善學習體驗。同時，他們還在通過 WebGPU 提升推理速度，并通過壓縮技術來減小模型的大小。他們還計劃進行用戶研究，來評估 Transformer Explainer 的效能和可用性，觀察 AI 新手、學生、教育者和從業者如何使用該工具，并收集他們希望支持的額外功能的反饋意見。 

還在等什么，你也上手體驗一下，打破對 Transformer 的「魔法」幻想，真正了解這背后的原理吧。