在查詢中附加圖片

在 Android Studio 中查詢 Gemini 時附上圖片,有助於 Gemini 瞭解應用程式架構,加快 UI 開發程序。

如要在提示中附加圖片,請按一下「附加圖片檔案」 「附加圖片檔案」圖示 並上傳圖片。

以下列舉幾個 Gemini 可以幫忙的例子:

  • 如果您有想要的 UI 模擬圖,Gemini 可以提供建立該 UI 的程式碼。舉例來說,如果提供 Now in Android 應用程式的螢幕截圖給 Gemini,它就能提供建立該應用程式的 Compose 程式碼。這個範例顯示應用程式動態消息的螢幕截圖 (左側),以及 Gemini 為該 UI 生成的 Jetpack Compose 程式碼 (右側)。詳情請參閱「使用圖片附件生成 UI」。

    「Now in Android」應用程式,顯示文章動態消息,內含標題、主題和書籤圖示。 Gemini 的程式碼回覆,顯示可重新建立「現在在 Android」螢幕截圖中 UI 的 Jetpack Compose 程式碼。
    Gemini 會根據「Android 開發人員最新消息」應用程式的 UI 螢幕截圖,生成 Jetpack Compose 程式碼。
  • 如要瞭解應用程式的建構方式,Gemini 可以說明 UI 的運作方式,包括其元件。舉例來說,你可以要求 Gemini 說明其他 Android 應用程式「現在」螢幕截圖背後的 Composables 和資料流程。左側圖片顯示含有新聞項目的詳細資料畫面,右側圖片則顯示 Gemini 對該畫面 Compose 結構和資料流程的說明。

    「Now in Android」應用程式中的單一新聞文章詳細資料,顯示標題、作者和說明。 Gemini 對於新聞文章詳細資料畫面的 Jetpack Compose 可組合函式和資料流說明。
    Gemini 會說明特定應用程式畫面的 UI 組合和資料流程。
  • 如果您有應用程式架構圖,Gemini 可以根據該圖建議程式碼來建立應用程式,成為全端開發助理。Gemini 也能協助記錄圖表,並說明應用程式的建構方式,方便您撰寫設計文件,供團隊成員審查。舉例來說,下圖顯示簡化的架構圖,描繪 UI、ViewModel、存放區和資料來源等各種應用程式元件之間的資料流。

    簡化的應用程式架構圖,顯示 UI、ViewModel、存放區和資料來源元件,並以箭頭標示資料流程。
    Gemini 可以根據應用程式架構圖生成程式碼和說明文件。
  • 如果發現 UI 錯誤,請擷取螢幕截圖,然後請 Gemini 腦力激盪解決方案。你可以圈出有錯誤的區域,協助我們找出問題。以下範例顯示行動應用程式的螢幕截圖,其中以紅色圓圈標示 UI 元素未對齊的位置。

    行動應用程式螢幕截圖:以紅圈標示文字元素重疊或對齊錯誤的 UI 錯誤。
    Gemini 可以根據螢幕截圖,協助發想 UI 錯誤的解決方案。