利用 Google Apps Script 建置安全後端 API 與 HTML 前端互動MR-Models 模型生成回應的完整示例應用

日期：

 

利用 Google Apps Script 建置安全後端 API 與 HTML 前端互動應用

在現今網頁應用程式開發中，前後端分離架構已成為主流，而如何快速建立一個簡單、可擴展且具備安全性驗證的 API 服務，成為許多開發者的共同需求。本文將以 Google Apps Script 作為後端，並結合 HTML 與 JavaScript 的前端介面，示範如何實現一個透過 API Key 驗證呼叫 MR-Models 模型生成回應的完整範例。此範例不僅能協助使用者快速驗證 API 使用權限，還能讓前端即時呈現後端生成的結果，適用於教學、原型驗證及小型應用等場景。

一、後端架構 – Google Apps Script 與 API Key 驗證

Google Apps Script（GAS）是一個基於雲端的腳本平台，能夠快速開發和部署 Web 應用程式。利用 GAS 建立後端 API 的優點在於不需要自行搭建伺服器，並且具有良好的 Google 生態系統整合性。以下步驟說明如何使用 GAS 作為後端：

  1. 建立專案與程式碼編寫
    使用者登入 Google Apps Script 後，建立一個新的專案。在專案中，建立一個名為 Code.gs 的檔案，並貼上下列程式碼。程式中先定義了一個固定的 API Key，該 API Key 為系統驗證使用者權限的重要依據。當前端送出請求時，後端會解析 JSON 格式的請求內容，並比對其中的 API Key 是否與預設值相符，若不符則回傳錯誤訊息。

// 設定正確的 API Key，使用者必須在前端輸入相同的 key

const VALID_API_KEY = "YOUR_SECRET_API_KEY"; // 請將此處換成你申請的 API Key


// 處理 POST 請求

function doPost(e) {

  try {

    // 解析前端傳入的 JSON 格式資料

    var params = JSON.parse(e.postData.contents);

    var inputText = params.text;

    var apiKey = params.apiKey;

    

    // 驗證 API Key 是否正確

    if (apiKey !== VALID_API_KEY) {

      return ContentService

              .createTextOutput(JSON.stringify({ error: "無效的 API Key" }))

              .setMimeType(ContentService.MimeType.JSON);

    }

    

    // 模擬呼叫 MR-Models 模型生成回應

    // 實際應用中，可利用 UrlFetchApp.fetch() 呼叫其他外部模型服務

    var generatedText = inputText + " （這是由 Google Apps Script 模擬生成的回應）";

    

    // 將生成結果以 JSON 格式回傳前端

    var result = {

      generatedText: generatedText

    };

    return ContentService

            .createTextOutput(JSON.stringify(result))

            .setMimeType(ContentService.MimeType.JSON);

  } catch (error) {

    return ContentService

            .createTextOutput(JSON.stringify({ error: error.toString() }))

            .setMimeType(ContentService.MimeType.JSON);

  }

}


  1. 程式中對於 API Key 的驗證十分重要，它確保了只有具備合法憑證的使用者才能夠存取後端服務，從而提升整體系統的安全性。使用者可根據需要修改回傳邏輯，甚至整合真實的模型呼叫，例如利用 HuggingFace API 或自建模型服務。

  2. 部署為 Web App
    編寫完後端程式後，點選右上角的「部署」→「新建部署」，並選擇「Web 應用程式」進行部署。部署時需設定執行者為「我」，存取權限選擇「任何人」，這樣外部應用就能夠透過 HTTP 請求來呼叫該 API。部署成功後，系統會提供一個 Web App URL，例如：
    https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXXX/exec
    此 URL 將成為前端呼叫 API 的目標端點。

二、前端設計 – HTML 與 JavaScript 實現即時互動

前端部分則以 HTML 和 JavaScript 來構建一個簡單而直觀的使用者介面。使用者在此介面中輸入 API Key 與問題，點擊送出後，前端會以 fetch API 發送一個 POST 請求到後端 Web App URL，並將回傳的 JSON 結果顯示在頁面上。以下是一個完整的 HTML 範例：

<!DOCTYPE html>

<html lang="zh-Hant">

<head>

  <meta charset="UTF-8">

  <title>MR-Models API - Google Apps Script 後端完整實例</title>

  <style>

    body { font-family: Arial, sans-serif; padding: 20px; }

    input, button { font-size: 1rem; padding: 5px; margin: 5px 0; }

    #result { margin-top: 20px; padding: 10px; border: 1px solid #ccc; }

  </style>

</head>

<body>

  <h1>MR-Models API 呼叫示例</h1>

  

  <label for="apiKey">請輸入 API Key：</label>

  <input type="text" id="apiKey" placeholder="例如：YOUR_SECRET_API_KEY">

  

  <br>

  <label for="inputText">請輸入您的問題：</label>

  <input type="text" id="inputText" placeholder="例如：請簡述 MR-Models 的功能">

  

  <br>

  <button id="sendButton">送出</button>

  

  <h2>生成結果：</h2>

  <div id="result"></div>

  

  <script>

    document.getElementById('sendButton').addEventListener('click', function(){

      var apiKey = document.getElementById('apiKey').value;

      var inputText = document.getElementById('inputText').value;

      

      // 將此 URL 替換為你部署後的 Google Apps Script Web App URL

      var apiUrl = 'https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXXX/exec';

      

      fetch(apiUrl, {

        method: 'POST',

        headers: {

          'Content-Type': 'application/json'

        },

        body: JSON.stringify({ apiKey: apiKey, text: inputText })

      })

      .then(response => response.json())

      .then(data => {

         if(data.error){

           document.getElementById('result').innerText = "錯誤：" + data.error;

         } else {

           document.getElementById('result').innerText = data.generatedText;

         }

      })

      .catch(error => {

         console.error('Error:', error);

         document.getElementById('result').innerText = '發生錯誤，請稍後再試';

      });

    });

  </script>

</body>

</html>




在此範例中，前端頁面設計簡潔明瞭，包含以下功能：

  • API Key 輸入框： 用戶必須在此處輸入正確的 API Key，與後端預設值比對，確保請求授權。
  • 問題輸入框： 用戶可在此輸入希望提交給 MR-Models 處理的問題或指令。
  • 送出按鈕與結果顯示區： 點擊送出後，前端會發送請求並在頁面上即時顯示後端生成的結果，若發生錯誤則顯示相應錯誤訊息。

使用 JavaScript 的 fetch API 發送 POST 請求時，會以 JSON 格式將 API Key 與使用者輸入的文字送往後端，並依據後端回傳的結果動態更新頁面內容。這樣的設計不僅提升了使用者體驗，也確保了前後端的資料傳遞與驗證過程的完整性與安全性。

三、應用場景與擴展性考量

此完整範例展示了如何利用 Google Apps Script 建立一個簡易而安全的後端 API，並與前端 HTML+JavaScript 整合，實現 API Key 驗證及模型生成回應功能。這種架構具有以下優點：

  1. 快速上手與部署：
    利用 GAS 平台不需自行架設伺服器，開發者可以快速建立與部署後端 API。前端部分只需基本的 HTML 與 JavaScript 即可完成簡單的互動介面。

  2. 安全性驗證：
    API Key 驗證機制能夠有效防止未授權存取，確保只有合法用戶能夠呼叫 API，從而保護模型生成服務與資源。

  3. 靈活擴展：
    本範例中後端僅以模擬回應方式展示實現流程，但實際應用中，可依需求整合真正的 MR-Models 模型服務（例如呼叫 HuggingFace API 或自建模型伺服器），甚至擴展成多模態處理、語音合成等複雜應用。

  4. 跨平台整合：
    透過前後端分離架構，前端可以部署在任何支援 HTML 與 JavaScript 的環境中，而後端的 Google Apps Script 亦可輕鬆與 Google 生態系統中其他服務（如 Google Sheets、Drive）整合，提供更豐富的應用功能。

總結來說，此完整範例不僅適用於展示基本技術流程，也能作為後續開發和功能擴展的基礎。開發者只需根據實際需求修改和擴充程式碼，即可打造出具有專業水準且安全穩定的模型呼叫應用。無論是教學演示、原型設計還是商業應用，此架構均具備良好的可維護性與擴展性，能夠有效提升整體開發效率與用戶體驗。


https://github.com/mtkresearch/MR-Models

聯發創新基地（MediaTek Research） 致力於研究基礎模型。我們將研究體現在適合正體中文使用者的模型上，並在使用權許可的情況下，提供模型給學術界研究或產業界使用。

Milestones

[2025.01.24] Breeze 2 系列，包含多模態影像語言模型 模型開源 及 論文發表; 以及語音合成模型 模型開源 及 論文發表

[2024.09.23] Breeze FC 模型開源 及 論文發表

[2024.08.10] BreeXe 模型開源

[2024.07.03] 發布 MR 模型使用套件 mtkresearch 並上架到 PyPi

[2024.05.24] Generative Fusion Decoding (GFD) 技術發表 以及 Breezper 實作程式碼發布

[2024.01.12] Breeze-7B 模型開源 及 論文發表

[2023.10.20] 開放繁體中文評測 TC-Eval (new version: TCEval-v2)

[2023.09.14] Model 7 - C 開放試用 及 論文

[2023.08.15] Model 7 - B 開放試用

[2023.04.10] 開源 Bloom-zh 3B 模型 及 論文

[2023.03.07] 開源 Bloom-zh 1B1 模型 及 論文

Models

Breeze 2

【Paper】【Kaggle Demo】【Collection】

【TTS Paper】【TTS Kaggle Demo】【TTS GitHub】

Breeze 2 是一套先進的多模態模型家族。包含多模態語言模型以及語音合成模型。多模態語言模型提供 3B 和 8B 參數配置，專為加強繁體中文語言表示而設計。在 LLaMA 3.2 的基礎上，Breeze 2 持續在大規模語料庫上進行預訓練，以進一步加強繁體中文的語言與文化內涵。該模型結合了視覺編碼器與橋接模組，實現了視覺感知能力，同時通過提示模板與函數調用數據的後訓練，支持函數調用功能。語音合成模型支援繁體中文、英文以及注音輸入，中文語音輸出，並支援聲音複製(Voice Cloning)。

English Content

BreeXe

【Collection】

Breexe-8x7B 是一個語言模型家族，基於 Mixtral-8x7B 開發，專門針對繁體中文使用。

Breexe-8x7B-Base 是 Breexe-8x7B 系列的基礎模型。Breexe-8x7B-Base 擴展了原始詞彙表，新增了 30,000 個繁體中文詞彙。在詞彙表擴展的情況下，Breexe-8x7B 在繁體中文推理速度上是 Mixtral-8x7B 的兩倍。

Breexe-8x7B-Instruct 是基於 Breexe-8x7B-Base 的衍生模型，使得該模型可以直接用於常見任務，如問答、檔案檢索生成（RAG）、多輪對話和摘要。 Breexe-8x7B-Instruct 在繁體中文和英文基準測試中表現出色，與 OpenAI 的 gpt-3.5-turbo-1106 相媲美。

English Content

Breeze

【Paper】【Collection】

Breeze-7B 是一個語言模型家族，基於 Mistral-7B 開發，專門針對繁體中文使用。 有關此模型的詳細資訊，請參閱我們的論文。

實用性方面：

  • Breeze-7B-Base 擴增了原始詞表，新增了 30,000 個繁體中文詞彙。在詞彙表擴增且其他條件相同的情況下，Breeze-7B 在繁體中文推理速度上是 Mistral-7B 和 Llama 7B 的兩倍。

  • Breeze-7B-Instruct 可直接用於常見任務，如問答、檔案檢索生成 (RAG)、多輪對話和摘要。

性能方面：

  • Breeze-7B-Instruct 在繁體中文和英文基準測試中表現出色，與同類型的開源模型如 Taiwan-LLM-7B/13B-chat、QWen(1.5)-7B-Chat 和 Yi-6B-Chat 相比，具有顯著優勢。






聯發創新基地（MediaTek Research）日前一口氣釋出2款繁中多模態語言模型Llama-Breeze2-3B和Llama-Breeze2-8B，可分別在手機和電腦上執行AI助理任務，不只能處理文字工作，還懂看圖、調用外部工具。他們還開源以3B模型為基礎、可離線工作的Android聊天機器人App，鼓勵開發者延伸開發，甚至也釋出一款可合成臺灣口音的語音生成模型BreezyVoice。

要讓模型更懂繁中文字和圖片知識，還要讓AI生成臺灣口音的語音，需要哪些技術和資料？iThome專訪聯發創新基地開發團隊，來分享這些模型背後的關鍵技術。

關鍵1：採LLaVA架構

聯發創新基地團隊表示，大約去年4、5月，他們就著手打造Llama-Breeze2系列模型。也因為目標是多模態模型，除了懂文字，還要能看圖、知道呼叫函式（Function calling）來調用外部工具。因此，團隊採用熱門的多模態模型LLaVA架構，來開發Breeze2。

進一步來說，LLaVA架構由視覺編碼器（Vision Transformer，簡稱ViT）、多層感知器（MLP）和大型語言模型（LLM）組成。它們互相搭配，由ViT處理圖像，將圖像切分成一塊塊的圖像塊（Patch），再轉換為向量。接著由MLP擔任橋樑，將ViT產出的視覺特徵轉換為LLM可理解的格式，最後交由LLM產出回答。

在這個ViT-MLP-LLM架構下，Llama-Breeze2-3B就由InternViT-300M-448px、MLP、Llama 3.2-3B組成，Llama-Breeze2-8B一樣有InternViT-300M-448px、MLP，只是最後的LLM為Llama 3.1 8B模型。（如下圖）

關鍵2：繁中優化

要讓模型理解繁中知識，就得靠繁中資料加強模型的理解力。

這個加強之處，在於模型的預訓練（Pretraining）和後訓練（Post-training）兩階段。

其中，預訓練又可分為延伸文字預訓練、視覺對齊預訓練，前者主要用收集到的繁中資料，來加強Llama 3.2 3B和Llama 3.1 8B基礎模型的繁中知識理解力，後者則加強ViT模型和MLP對繁中圖文內容的理解力。

再來，後訓練則靠3件事來優化模型繁中能力，包括文字指令調校、視覺指令調校和函式呼叫微調。文字指令調校是要讓模型更理解繁中環境下的文字指令，視覺指令調校則是要模型更理解臺灣相關的圖文任務，比如解讀臺灣街景、招牌或繁體字排版。至於函式呼叫微調，則是要模型學會何時需要呼叫函式、要調用哪些功能，而且要能理解繁中語境。

關鍵3：大量在地化資料

接著是影響模型學習的繁中資料集建置，首先，團隊收集了近1TB的繁中文字資料、共超過9,000億個Token（如下圖）。為確保這些資料可用，他們以開源過濾器加上自建的規則，來清理資料，尤其是身份證字號、電話等個資部分，都準確清除。這是文字資料的準備。

圖片訓練資料部分，團隊以英文的開源資料為主要訓練資料，但為了讓模型看到圖片後、能給出符合臺灣語境的回答，他們自己也翻譯了部分問答資料，並加入臺灣的習慣用語，讓模型回答能更貼近在地文化。

團隊強調，雖然訓練資料量大，但為保留原本Llama 3.1和Llama 3.2模型的優點，他們採取低學習率（Learning rate）方式來訓練模型。就好比要模型讀一本厚書，高學習率要求模型快速背完，低學習率則是按部就班進行。

關鍵4：函式呼叫判斷機制

至於函式呼叫，聯發創新基地團隊也有幾招來強化模型能力。

首先是導入模型的判斷機制，也就是在回答問題前，先判斷該不該呼叫函式，以及該呼叫什麼函式。這個判斷機制叫做Decision Token，是團隊先前提出的概念，它能在模型回答問題前，強迫模型先下決策，要使用工具（呼叫函式），還是不用工具、直接回答。

這個Decision Token機制，還能加強模型對工具使用的判斷力。因為，模型得靠函式呼叫資料和非函式呼叫資料訓練，才能學習使用工具的判斷邏輯，但傳統上，這種非函式呼叫的資料（又稱為反向資料）很難收集。於是，團隊透過Decision Token，在函式資料集中，將原本模型判斷需要呼叫的特定函式拿掉，這樣模型就會生成不呼叫函式的答案，就能快速產出非函式呼叫的訓練資料。

接著，團隊就能在模型訓練過程中加入這些資料，讓模型學習在哪些情境不需要呼叫函式，進一步避免不必要的函式呼叫，加強模型使用工具的判斷力。

不只Decision Token，團隊還特別打造一套翻譯流程，來將工具使用的資料，翻譯為繁體中文，加強模型呼叫函式的繁中能力。這是因為，他們採用開源的函式呼叫資料集來訓練模型，但這些資料9成都是英文，若只用英文資料，就會影響模型後續行為。比如，使用者詢問模型，臺北天氣如何，模型呼叫函式、調用外部工具取得的答案，可能會顯示Taipei，而非臺北。

因此，聯發創新基地團隊自建一套合成資料的翻譯處理流程，就像是一臺翻譯機，能翻譯任何語言（包括繁中），來解決語言在地化問題。

關鍵5：根據上下文準確分辨讀音

不只是文字、圖像，團隊也打造出符合臺灣口音的語音合成模型BreezyVoice，背後有個重要關鍵，也就是讓模型準確分辨破音字的G2PW套件。

簡單來說，BreezyVoice是以既有的CosyVoice語音合成模型改良而成。這套模型的運作原理是，輸入語音樣本，模型將聲音轉換為符元（Token），這些符元帶有能生成原本聲音的資訊，所以有了這些符元，就能根據文字，來將符元轉回音訊，達到文字生成語音的效果。

不過，這個CosyVoice的中文語音帶有中國大陸口音，為能貼近臺灣口音，團隊採用臺灣口音的語音資料來改善模型發音，也以G2PW來讓模型發音更正確。這個G2PW是一款團隊開發的開源套件，是BERT衍生模型，能很好地理解上下文、決定讀音，尤其是破音字。

時下熱門的推理模型也在研究中

開源多款輕量級語言模型之餘，聯發創新基地團隊表示，他們也一直在研究不同層面的AI技術，像是近期廣受討論的測試階段運算擴展（Test-time computing）方法。有別於傳統的擴展法則、在模型訓練階段加入大量運算資源和資料，測試階段運算擴展方法是在模型部署後的推論階段，加強算力，讓模型處理複雜問題時，能多思考幾步，著名的例子有OpenAI的o系列推理模型、DeepSeek R1和Google Gemini 2.0 Flash Thinking等。