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

NanoGem 美甲工作室💅🏻

我建造了什麼

推出NanoGem Studio ，這是一種利用 NanoBanana 和 Google AI Studio 的強大功能建置的令人愉悅且引人入勝的美甲體驗。

這個小程式可讓您從調色板虛擬嘗試不同的美甲設計，嘗試進一步增強指甲美感的自訂工作室視圖，還可以使用自然語言提示建立您自己的美甲外觀。它還提供一個畫廊部分來保存您最喜歡的設計以供將來使用。

因此，下次當您坐在家裡拿著美甲工具或去某個工作室時，您將擁有自己個性化的美甲設計系列，讓您的指甲呈現出完美夢幻的外觀。

小程式連結：直播APP

小程式演示

小程式截圖

主螢幕

生成的圖像

工作室景觀

建立設計螢幕

構思與提示：最初，我寫了一個簡單的提示，讓我可以輕鬆地佈局我的想法並建立核心 MVP，沒有任何錯誤。
不斷加入功能並進行測試：隨著應用程式的不斷建置，我不斷向程式碼助手提示一些小功能和 UI 修復。我個人非常喜歡自動修復功能，每當程式碼執行出現錯誤時，它就會自動顯示。
gemini 2.5 flash-image-preview 的自訂提示：我編寫了許多提示，用於設計和測試調色板和自訂工作室視圖，這些提示被傳遞給圖像生成和編輯模型 API。
程式碼混合：程式碼助理產生的小程式的某些 UI 元素看起來不太好，所以我在不同的元件檔案中編寫了一些程式碼來獲得所需的 UI。
小程式部署：使用 Cloud Run 功能，我直接從 AI Studio 部署了該應用程式。在 Google Cloud 控制台網站中，我在 Cloud Run 的“服務”標籤中將服務擴充設定為“自動”，以確保小程式順利運作。

文字轉圖像：對於小程式中的調色板螢幕，我設計了 5 個描述性文字提示，用於定義各種美甲設計。我利用gemini 2.5 flash-image-preview API 從這些提示中取得最佳產生的圖像。小程式中的「建立您自己的設計」功能也使用此 API 來產生使用者定義的自訂美甲設計。
圖像 + 文字轉圖像（編輯） ：以下自訂工作室檢視利用了gemini 2.5 flash-image-preview API 提供的此多模式功能：
陽光親吻的視野：在生成的美甲設計中，我傳遞了一個文字提示，為圖像加入陽光親吻的外觀，讓使用者看到某種設計在明亮的陽光照射下如何發光。
配件附加視圖：此視圖選項在使用者的手腕上加入一個手鐲，與生成的美甲設計相協調，呈現出更完整、更風格化的外觀。