小編精選 - 技術文章翻譯 · 09月21日

AI圖表動畫師

我建造了什麼

我開發了AI Chart Animator ，這是一款為靜態資料視覺化注入活力的 Web 應用程式。它解決了簡報者、行銷人員和資料分析師面臨的一個常見問題：靜態圖表資訊豐富，但往往缺乏視覺吸引力。傳統上，建立動畫版本需要專門的軟體和大量的手動工作。

AI Chart Animator 簡化了整個流程。使用者可以上傳標準條形圖或折線圖的圖像，透過複雜的多模態 AI 流程，該應用程式會自動產生該圖表的驚艷未來感動畫。最終呈現的動態影片，讓資料更具影響力，更令人難忘。

核心工作流程是由人工智慧驅動的三步驟流程：

風格化： Google Gemini 模型將原始圖表轉換為高科技、未來主義的版本，作為動畫的結束畫面。
解構：然後，相同的模型會聰明地從未來圖表中刪除資料元素（條形或線條），以建立一個乾淨的空框架，作為動畫的起始框架。
Animate：採用第三方影片生成模型（海螺AI），製作出起始影格與結束影格之間轉場的流暢動畫，展現資料動態呈現。

示範

我無法將此應用程式部署到 Cloud Run，因為我的 Minimax API 積分已用完，而且我沒有信用卡支付 Cloud Run 部署費用。不過，這裡有 aistudio 應用的連結，您可以透過它查看該應用程式及其程式碼： https://ai.studio/apps/drive/18mGw-J40Vjon-elGWBWBYyla-J5fMOIY 。任何擁有此公開連結的人都可以存取該應用程式。

您可以在此完整的示範影片中看到 AI Chart Animator 的實際運作：

{% 嵌入 https://youtu.be/bxhOoRsYFek %}

以下是該應用程式三步驟生成過程的直觀表示：

| 原始圖表 | 步驟 1：未來結束影格 | 步驟 2：空白起始影格 |

| :---: | :---: | :---: |

| （您上傳的圖表圖像） | （AI 生成的未來風格） | （AI 生成的空框） |

我該如何使用 Google AI Studio

我利用 Google AI Studio 強大的多模態功能作為影像處理流程的核心引擎。整個影像轉換過程由gemini-2.5-flash-image-preview模型驅動。我的實作採用了鍊式、多步驟的方法，其中一個多模態提示的輸出將成為下一個多模態提示的輸入。

步驟 1：初始轉換（圖像 + 文字 -> 圖像）

我將使用者上傳的圖表圖像連同詳細的文字提示一起發送給 Gemini。這個提示指示模型以未來主義的美學重新構想圖表，同時嚴格保留原始資料。

提示長條圖：

將這張長條圖改造成充滿未來感的 3D 傑作。賦予它時尚的深色主題，搭配鮮豔的霓虹燈高光和高科技感。條形圖應具有深度和透視感。保持整體結構、資料和標籤的完整性，但要以匹配的 3D 風格進行渲染。

步驟 2：內容刪除（圖像 + 文字 -> 圖像）

步驟 1 中新產生的未來圖表隨後被送回Gemini 模型。這次，它附帶了不同的文字提示，作為解構圖像的精確手術指令。

提示從未來圖表中刪除長條圖：

從這張 3D 未來主義長條圖中，完美移除彩色長條。務必保留 3D 軸、軸標籤、網格線、標題和背景，並保留其透視和樣式。輸出應為空的 3D 圖錶框架。

這兩個步驟完全由 Gemini 根據文字命令理解和操作圖像內容的能力驅動，為最終動畫建立必要的開始和結束幀。

多模態特徵

這個專案的核心在於巧妙地運用「圖像 + 文字 -> 圖像生成」的機制，對動畫資料視覺化進行解構和重建。這遠遠超出了簡單的圖像生成，並充分利用了 Gemini 的深度語境理解能力。

情境感知風格化：第一個多模態功能是能夠將複雜的藝術風格（未來主義、霓虹燈）應用於結構化圖像（圖表），而不會破壞底層資訊。此模型成功了解提示「保持資料完整」的意圖，展現了對視覺輸入和文字限制的關鍵理解。這透過將平凡的圖表轉化為視覺上令人興奮且專業的圖表，提升了使用者體驗。
智慧型物件移除：第二個更先進的多模態功能是能夠根據自然語言命令選擇性地從影像中移除特定元素。要求模型“完美地移除彩色條”或“移除折線圖中的線條”需要它辨識圖表上下文中的“條”或“線條”，將其與背景和坐標軸分離，並智能地填充其後的空間。這項強大的功能可以自動執行影像編輯器中原本繁瑣的手動任務，讓最終使用者能夠快速且方便地完成整個動畫工作流程。

原文出處：https://dev.to/prakash_verma_e6f7ea047c0/ai-chart-animator-2mgm