這是Google AI Studio 多模態挑戰賽的參賽作品

RapidRelief 的目標 - 災難復原緊急援助

圖片描述

作為一個熱衷於使用實用軟體解決實際問題的人,我提交此作品的目的是探索各種可能性,並展示Google AI Studio (及其多模式 Gemini/Imagen 功能)如何加速開發一種可存取、高影響力的應急工具——特別是RapidRelief 災難響應助手,這是一種多模式災難響應助手,它結合了人們在對話中做出更多理解、AI 圖像和危機、危機和危機期間做出更安全、更理解了圖像 + 對話和安全決策的圖像。

災難混亂且時間緊迫:人們需要的是清晰可靠的即時指導,而不是冗長的技術報告。我希望建立一個不僅智能,而且易於使用的助手——一個輕量級的移動優先助手,讓用戶能夠拍攝照片和簡短描述,立即獲得嚴重程度評估,並獲得優先且可操作的安全計劃,即使在壓力之下也能遵循。

在探索Google AI Studio和多模式模型時,我發現它們可以顯著減少以下所需的工作量:

  • 📷 從使用者照片中自動分析視覺損壞(例如,偵測結構裂縫、洪水區域、火災/煙霧指標),並產生簡潔的標籤和置信度分數。

  • 🧠產生優先的、情境感知的行動步驟,將技術風險轉化為簡單易懂的語言(先做什麼、打電話給誰、避免什麼)。

  • 🖼️ 為受害者、回應者和保險公司建立快速的「前/後」視覺化和帶註釋的報告

  • 💬 使用 Gemini Chat API實現對話式使用者體驗,引導非專家完成分類、跟進和簡單的清單。

  • 🌍 自動在地化建議和緊急聯絡人(地區、語言和常用回應電話號碼)。

  • 📤產生可分享的輸出(簡短報告、SMS/WhatsApp 訊息、PDF),以便用戶可以立即通知家人或急救人員。

  • 🎨 透過人工智慧驅動的副本、微副本和流程建議加速前端和互動設計,以便應用程式在壓力下保持平靜和易於使用。

  • 🏗️產生訓練和合成資料集,以實現更安全、更強大的模型行為,而無需長時間的手動標記週期。

此次提交的目的是表明Google AI Studio不僅僅是一個研究實驗室的工具包,而且是一個實用的加速器,可以幫助自然災害受害者、建築商、非政府組織和急救隊快速從創意轉變為可部署的有用軟體。

透過清晰、循序漸進的演示,我希望鼓勵開發人員(尤其是個人建築師、學生和人道主義技術專家)嘗試使用多模式人工智慧來建立真正提高安全性並在分秒必爭時減少恐慌的工具。


目錄


<a id="whatibuilt"></a>

1️⃣ 我建造了什麼

災難應變助理是一款網頁應用,旨在為受災地區的個人提供即時的人工智慧支援。在地震、洪水或火災的混亂後果中,獲取清晰、可操作的資訊對於安全至關重要。這款小程式能夠滿足這一需求,它允許用戶快速捕捉並發送周圍環境受損的圖像和文字描述。

它解決了快速評估情況的關鍵問題。使用者無需等待可能不堪負荷的緊急服務,而是可以立即獲得自身情況的分析,包括:

  • 對結構損壞的明確評估。

  • 情況的嚴重程度(從低到嚴重)。

  • 立即可操作的安全步驟的優先順序清單。

它創造的體驗是在高度緊張的時刻賦予使用者力量和安心。透過將用戶的手機轉變為強大的診斷工具,它有助於減少恐慌,提供清晰的前進方向,並使用戶能夠掌控局面並確保自身安全。


<a id="demo"></a>

2️⃣ 演示

直播小程式:災難應變助手

影片示範:

{% 嵌入 https://youtu.be/\_RI7f11sIF0?feature=shared %}

儲存庫: {% embed https://github.com/amfshan/disasterresponseassistant %}

截圖

1. 損壞報告介面:簡潔、直覺的使用者介面,可上傳多張圖片並加入語音或文字描述。

圖片描述

2. 綜合分析結果:主結果畫面顯示嚴重程度、損害評估和可操作的指導。

圖片描述

3. 前後對比:強大的視覺對比,將使用者的照片與人工智慧產生的災難發生前地點的影像進行對比。

圖片描述

4. 互動式後續聊天:對話式 AI 聊天機器人可協助使用者解決具體的後續問題。

圖片描述


<a id="studio"></a>

3️⃣ 我如何使用 Google AI Studio

腦力激盪和初步提示

# 🌍 RapidRelief — Concept & Key Features

## 💡 Concept
**RapidRelief** is a multimodal applet designed to assist residents in **disaster-affected areas** — including earthquakes, floods, fires, and storms.  
By combining **image + audio understanding** with AI-generated guidance, the app helps people quickly **assess damage** and **take safe, informed action** during emergencies.

## 🔑 Key Features

- 📸 **Upload Photos or Videos**  
  Residents can capture and upload **damage images or videos** (houses, roads, infrastructure).  
  - Uses **Gemini 2.5 Pro / Flash** to detect **structural damage, flooding, fires, and blocked roads**.  
  - Identifies severity and flags areas that may be unsafe to enter.

- 🎤 **Voice & Audio Support**  
  Users can send **audio descriptions** or voice messages —  
  > “I see cracks in the wall, water rising up to knee height.”  
  The app automatically **transcribes** the message and **combines** it with visual analysis for a more accurate situation report.

- 🧭 **AI-Generated Actionable Guidance**  
  The app suggests **clear next steps**, such as:  
  - Identifying **safe exit routes** (based on images/videos)  
  - **Immediate actions** (covering broken glass, shutting off electricity, avoiding flooded areas)  
  - **Prioritized steps** when multiple hazards are detected

- 🗺️ **Before/After Map Comparisons**  
  Integrates with **map and satellite imagery** to:  
  - Detect **terrain changes** or **flooded areas**  
  - Show **before/after comparisons** to locate blocked roads, collapsed structures, or safe zones  

This concept turns a user’s **smartphone into a powerful emergency assistant** — helping them stay calm, act quickly, and communicate vital information to first responders when it matters most.

📹 Google AI Studio 演示

{% 嵌入 https://youtu.be/3aDXlSfAoRI %}

部署基礎設施

  • 平台: Google Cloud Run(容器化部署)

  • 擴展:基於 0 到 N 個實例的流量自動擴展

  • 執行時期:帶有 Express.js 後端的 Node.js

  • 前端:使用 TypeScript 的 React,作為靜態資產

  • 建置流程: Docker 容器化多階段建置

Google AI API 集成

整個應用程式都圍繞著 Gemini API 強大的多模態功能進行編排。我並非僅僅將它用於單一任務,而是建立了一系列由 AI 驅動的操作,以提供全面的用戶體驗。

  1. 多模態分析 ( gemini-2.5-flash ):此應用的核心使用gemini-2.5-flash來處理複雜的多模態輸入:多張使用者上傳的圖片和一段文字描述。我將模型配置為使用JSON 模式,並嚴格遵循responseSchema 。這是一項至關重要的最佳實踐,可確保 AI 的輸出始終結構化、可靠,並且可以直接用於填充 UI,而無需進行有風險的自然語言解析。 systemInstruction使模型能夠充當災難應變專家,確保語氣和內容恰當。

  2. 文字轉影像產生 ( imagen-4.0-generate-001 ):為了提供災害現場的強大視覺背景,Gemini 的結構化 JSON 回應中包含一個beforeImagePrompt欄位。此提示由分析模型建立,隨後直接輸入到imagen-4.0-generate-001模型中,產生災害發生前現場的真實照片。這建立了從分析到視覺化的無縫 AI 工作流程。

  3. 對話式 AI(Gemini Chat API):為了提供個人化支持,我使用了 Gemini Chat API ( ai.chats.create )。聊天會話會根據初始損失評估的上下文進行初始化。這使得聊天機器人能夠立即感知使用者的狀況。聊天機器人的所有回應都會串流到使用者介面,從而創造動態的即時對話體驗,並在資訊可用時立即顯示給使用者。


<a id="features"></a>

4️⃣ 多模態功能

該應用程式建立在多模式的基礎上,大大增強了其在危機情況下的實用性和用戶體驗。

  • 圖像與文字融合,提升理解力:此應用程式的主要輸入是多模態的。透過同時分析圖像和文本,人工智慧能夠獲得比單一模態更深入、更貼近情境的理解。例如,人工智慧可以將使用者的文字(「我聽到了破裂的聲音」)與牆壁細微裂縫的視覺圖像關聯起來,從而更準確地評估嚴重程度。這種融合是該應用程式高效執行的關鍵。

  • 從分析到視覺化的工作流程:此應用程式不僅能理解多模態輸入,還能產生多模態輸出。 「災前」視覺化就是一個很好的例子。人工智慧首先查看讀取受損場景的訊息,然後想像建立未受損場景的圖像。這項強大的功能讓使用者能夠立即直觀地了解受損程度。

  • 基於視覺的對話:後續聊天機器人不僅僅是一個簡單的問答機器人。由於其情境源自於初始視覺分析,因此其答案是基於使用者的實際環境。如果用戶問:“那種毒品危險嗎?”,AI 會根據用戶提供的毒品圖片進行回复,從而提供高度相關且個性化的指導。


<a id="problem"></a>

5️⃣ 解決現實世界的問題

這款小程式超越了基礎的 AI 演示,解決了現實世界中一個關鍵的挑戰:即時災難應變評估。在緊急情況下,傳統的回應系統往往不堪重負,導致個人無法獲得關鍵的安全資訊。災難應變助手透過以下方式填補了這一空白:

  • 專家評估民主化:將任何智慧型手機轉變為結構損傷評估工具

  • 減少反應時間:提供即時分析,無需等待數小時進行專業評估

  • 支持明智的決策:根據使用者的具體情況,為他們提供具體的、優先的行動

  • 支援緊急服務:產生可與急救人員共享的結構化損壞報告

創意多模式應用

  1. 跨模態分析:將視覺損傷評估與文字背景(聲音、氣味、環境因素)結合,以實現全面理解

  2. 時間視覺化:利用人工智慧重建「災難前」場景,幫助使用者了解損失程度

  3. 情境感知對話:聊天機器人的回應是基於使用者的實際視覺環境

  4. 漸進式揭露:資訊分階段揭露(評估→視覺化→對話),以防止危機期間認知超負荷


<a id="best"></a>

6️⃣ 應用程式功能和最佳實踐

主要功能清單

  • 大量圖片上傳:用戶可以上傳多張照片進行全面審核。

  • 文字上下文:文字區域允許使用者在視覺資料中加入關鍵上下文。

  • AI 損害評估:結構化 JSON 輸出提供詳細的評估。

  • 嚴重程度分類:損害分為低、中、高或嚴重。

  • 可操作的安全指南:一份清晰、優先的後續使用者安全步驟清單。

  • AI「災前」視覺化:產生的影像展示了災前的場景。

  • 互動式聊天機器人:用於後續問題的串流、上下文感知的聊天。

  • 可下載的報告:使用者可以儲存分析和「之前」的圖像以供離線使用。

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

工程最佳實踐

  • 結構化 AI 輸出:使用responseSchema (JSON 模式)實現 AI 和前端之間穩健、可預測且無錯誤的通訊。

  • 清晰的狀態管理:利用 React 的狀態管理來處理載入、錯誤、進度和結果狀態,提供即時、清晰的 UI 回饋。

  • 基於元件的架構: UI 採用模組化、可重複使用的 React 元件建置,從而促進程式碼清潔和可維護性。

  • 非同步流控制:所有 API 呼叫均使用async/await處理,並包含在try...catch區塊中,以便優雅地處理錯誤。

  • 以使用者為中心的載入:在 API 呼叫期間顯示載入旋轉器和動態進度訊息,以管理使用者期望。

  • 使用者體驗流:聊天機器人的回應會傳輸到使用者介面 (UI),以提供響應式、即時的感覺。

  • 可存取性:關鍵互動元素包括aria-label屬性,以確保使用螢幕閱讀器的使用者的可用性。

  • 響應式設計:使用 Tailwind CSS,UI 完全回應並可在從手機到桌上型電腦的各種裝置之間存取。

  • 程式碼組織:邏輯分為服務( geminiService )、實用程式( fileUtilsdownloadUtils )、元件和類型,以實現乾淨且可擴展的程式碼庫。


<a id="details"></a>

7️⃣ 開發與部署細節

技術堆疊

  • 前端: React 18 + TypeScript + Tailwind CSS

  • 後端: Node.js + Express.js

  • 人工智慧服務: Google AI Studio API(Gemini 2.5 Flash、Image 4.0、聊天 API)

  • 部署: Google Cloud Run 與 Docker 容器化

  • 建置工具: Vite 用於前端捆綁,Docker 用於容器化

API整合模式

// Multimodal analysis with structured output
const analysis = await gemini.generateContent({
  model: 'gemini-2.5-flash',
  contents: [{ parts: [imageData, textPrompt] }],
  generationConfig: {
    responseMimeType: 'application/json',
    responseSchema: damageAssessmentSchema
  }
});

// Streaming chat responses
const chatStream = await gemini.streamGenerateContent({
  model: 'gemini-2.5-flash',
  contents: conversationHistory
});

Cloud Run 配置

  • 記憶體: 2GB 用於處理影像

  • CPU: 2 個 vCPU 用於處理並發請求

  • 並發:每個實例 100 個請求

  • 逾時:複雜 AI 操作 300 秒

  • 環境變數:安全 API 金鑰管理

效能最佳化

  • 圖像壓縮:上傳前客戶端圖像優化

  • 延遲加載:漸進式元件加載,實現更快的初始渲染

  • 快取:重複分析請求的回應緩存

  • 錯誤邊界: API 故障時的優雅降級


<a id="challenge"></a>

8️⃣ 挑戰合規性

該小程式完全滿足「建置和部署多模式小程式」挑戰的所有要求:

基於 Google AI Studio 建置- 使用 Google AI Studio 的開發環境和 API 進行開發

使用 Cloud Run 進行部署- 在 Google Cloud Run 上進行生產部署,以實現可擴展性和可靠性

多模式功能- 實現多種 Gemini 功能:

  • Gemini 2.5 Flash用於多模態影像與文字理解

  • Imagen 4.0用於 AI 產生的「災難前」視覺化

  • Gemini Chat API用於上下文感知對話支持


<a id="future"></a>

9️⃣ 未來的增強功能

  • 音訊分析:與 Gemini 的音訊理解集成,進行基於聲音的損害評估

  • 視訊處理:即時視訊分析,用於動態損傷評估

  • 離線功能:適用於網路連線受限地區的漸進式 Web 應用功能

  • 多語言支援:全球災難應變的在地化

  • 整合 API:緊急服務和保險公司的 Webhook


<a id="lessons"></a>

🔟 📚 經驗教訓

建構RapidRelief 災難應變助理-智慧緊急應變助理是非常有效的學習體驗,它融合了技術探索、使用者體驗思維和實際問題解決能力。以下是該專案的要點:

  • 🤖 多模式人工智慧的力量:透過 Google AI Studio 結合文字 + 影像理解,可以實現更豐富的情境感知反應,證明了多模式輸入如何為高壓力情況下的使用者提供更有用、更可操作的見解。

  • ⚡ 快速原型設計很重要:使用 AI 輔助開發大大縮短了建置時間——從生成前端副本到建議 API 工作流程——讓我能夠快速迭代並專注於使用者體驗而不是樣板程式碼。

  • 🎨 設計要以平靜為中心,而非僅僅注重功能:緊急應用必須給人清晰、平靜、安心的感覺。顏色選擇、微文案和逐步說明等小細節,都能在危機時刻降低使用者的焦慮感。

  • 🌍 在地化至關重要:災難是全球性的——確保應用程式能夠根據用戶所在地區調整語言、緊急聯絡人和建議對於實際可用性至關重要。

  • 📊 原始資料的結構化指導:使用者不需要技術報告-他們需要的是可操作的後續步驟。最大的洞見是將複雜的AI輸出轉換為使用者在壓力下也能遵循的優先清單。

  • 🔄 迭代提高安全性:測試多個提示、改進風險類別和驗證 AI 回應讓我明白,迭代改進對於建立信任和可靠性至關重要。

  • 🤝 人工智慧是伴侶,而不是替代方案:該計畫強調,人工智慧最好是用作支援指南,而不是決策者,賦予使用者權力,同時鼓勵他們在需要時尋求專業協助。


<a id="disclaimer"></a>

⚠️ 免責聲明

RapidRelief 災難應變助理 AI是一種資訊和支援工具,旨在透過提供 AI 產生的建議和一般安全指導來協助使用者應對緊急情況。

  • 🚨 不能取代緊急服務:此應用程式不能取代專業醫療建議、官方災害管理協議或緊急服務。

  • 📉 準確性限制:雖然人工智慧努力提供相關且有用的見解,但它可能無法始終準確評估情況的嚴重性或建議最合適的行動。

  • 👤 使用者責任:使用者有責任做出自己的安全決定,並鼓勵使用者在遇到危險時聯繫地方政府、緊急救援人員(如 911)或合格的專業人員。

  • ❌ 不承擔責任:本應用程式的開發者、貢獻者和提供者對因使用或誤用所提供的資訊而造成的任何傷害、損失或損害不承擔責任


<a id="conclusion"></a>

結論

建構RapidRelief 災難應變助理-智慧緊急應變助理不僅是一項技術挑戰,更是一次探索AI 如何透過在混亂中提供清晰資訊來拯救生命的機會。該專案展示了Google AI Studio在多模態智慧方面的強大功能——它能夠捕捉圖像、文字和上下文,產生任何人都可以遵循的可行指導,即使在高壓情況下也是如此。

透過注重速度、清晰度和可存取性,RapidRelief 使個人能夠做出更安全的選擇,與急救人員分享關鍵訊息,並在分秒必爭時減少恐慌。

這個計畫證明了人工智慧並非僅限於未來主義或實驗性——它可以實用、易於理解、以人為本。我希望這項工作能激勵其他開發者、學生和人道主義技術專家探索多模態人工智慧對現實世界的影響,建構真正在需要時保護和賦能社群的解決方案。


參考文獻

  1. 使用 Google AI Studio 建立應用程式

  2. 從提示到部署應用程式不到 2 分鐘

  3. Google AI Studio 快速入門

  4. 📹 Google AI Studio 初學者指南

  5. 📹 26 分鐘搞定 Google AI Studio


🚀 立即試用 RapidRelief AI!

災難發生時,保持安全、保持知情並掌控局面。

👉 啟動由Google AI Studio提供支援的應用程式


我感謝我的同事和導師為示範影片配音。

用❤️為Dev.to打造 — 由Google AI Studio提供支持


原文出處:https://dev.to/sharafon/rapidrelief-ai-2025-5x-faster-damage-assessment-rescue-guide-2lf9


精選技術文章翻譯,幫助開發者持續吸收新知。

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
🏆 本月排行榜
🥇
站長阿川
📝10   💬6   ❤️6
455
🥈
我愛JS
📝1   💬5   ❤️4
95
🥉
AppleLily
📝1   💬4   ❤️1
55
#4
💬1  
5
#5
xxuan
💬1  
3
評分標準:發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次