|
 |
2025.05.27 蘇柔瑋
Gemini Canvas再進化！一鍵生成互動式網頁「秒變自學神器」：實測教學一次看
Google推出Gemini Canvas新功能更新，只要輸入簡單的prompt指令，就能一鍵生成互動式內容，包括網頁、圖表、測驗和語音概要。
＃Google ＃ai人工智慧 ＃AI工具
今年3月，Google推出Gemini Canvas新功能，可用於創作潤飾、程式碼專案等工作任務。近日又有重大更新，不須懂得程式語言，只要輸入簡單的prompt指令，就能一鍵生成互動式內容，包括網頁、圖表、測驗和語音概要。
|
|
下方繼續閱讀
繼續閱讀keyboard_double_arrow_down
|
特別是在互動式網頁方面，能夠將單純的文本內容轉化成學習單，相當適合用在課程教材、作業練習或個人學習等面向，以下教學帶你一次看！
一鍵生成互動網頁！怎麼操作？
首先，在Gemini中選取Canvas功能，並寫出簡單指令生成文本，例如：生成一份「英文文法中的假設語氣」的教學文件，讓AI生成文法基本概念、動詞形式、例句等。
Gemini Canvas網頁生成教學1
|
 |
在Gemini中，選取Canvas功能，並輸入想要生成的指令。 圖／ Gemini Canvas
接著，在右上方處點擊「Create」，下拉選單可選擇製作成網頁（Web Page），或是圖表（Infographic）、測驗（Quiz）、語音概要（Audio Overview）。
Gemini Canvas網頁生成教學2
|
 |
在右上方處點擊「Create」，點選「網頁」功能。 圖／ Gemini Canvas
點選網頁，就會依據文本內容生成單頁互動式網頁應用程式，透過 Tailwind CSS設計模式、JavaScript程式語言，自動設計標籤導覽、互動式範例、練習題等區塊。
|
 |
圖／ Gemini Canvas
生成網頁完成後，可直接看到實際的互動英文文法教學網頁。例如，點選「使用時機」，會出現詳細的文法介紹和例句，也提供題目單供學習練習。
|
 |
圖／ Gemini Canvas
|
 |
圖／ Gemini Canvas
如果想要增加教學內容區塊，可直接下新指令，像是新增對話教學和聽力測驗。不滿意文字
|
 |
圖／ Gemini Canvas
|
 |
圖／ Gemini Canvas
最後，還可以將生成的互動式網頁下載成獨立網址，複製 HTML 程式碼並儲存成.html檔案，就能用瀏覽器開啟。
|
 |
圖／ Gemini Canvas
或是利用分享功能，自動生成網頁網址，也能將網址分享至LinkedIn、Facebook、X
和Reddit等社群平台。
|
 |
圖／ Gemini Canvas
經實際測試過後，目前台灣免費版僅能生成一次網頁功能，Pro版則可無限生成。
除了英文文法教學，《數位時代》也測試語音概要功能，成功生成了一段12分鐘的英文對話語音，語氣相當自然生動，適合用於聽力教學課程。
|
 |
圖／ Gemini Canvas
另外，《數位時代》也在原本的網頁中加入測驗功能，AI機器人自動保留原本的英文文法教學，並新增了「綜合測驗」的標籤分頁，一共生成了7 道選擇題，每回答一題，系統會立即顯示「正確！」或「錯誤。正確答案是：XXX」，以及其他測驗限制條件。
|
 |
圖／ Gemini Canvas
最後則是圖表功能，可依據想要的圖表格式下指令，本次的指令為「在完成測驗後顯示答對和答錯的題目比例」，就能生成視覺化的簡易圖表。
|
 |
圖／ Gemini Canvas
|
本文相關： 智能管家 智能喇叭 智能音箱 Assistant Google語音助理 Google助理 Google 助理 智慧家庭 AI語音助理 語音助理 AI服飾助理 LaMDA Bard Open AI ChatGPT 機器學習 Gemini AI AI Vertex LLM Transformer LaMDA 人工智 語言模型 ML 深度學習 gpt GPT Google Assistant 智能 智慧 谷歌音箱 谷歌助理 LM |
