AI - 故事與圖片產生器

用途

📦? HTML、CSS、JavaScript 和 GEMINI API：建立互動式故事和圖片產生器。

📝? 故事產生：使用 Google 的生成式 AI，根據使用者輸入內容產生故事。

🖼?️ 圖片產生：從 Unsplash API 擷取相符的圖片。

🖊?️ 使用者互動：輸入故事文字，並透過按鈕產生相片。

⏳ 載入指標：在產生故事和擷取相片時顯示旋轉圖示。

⚠️ 錯誤處理：顯示錯誤訊息和記錄錯誤，以利偵錯。

🖥?️ 內容顯示：以簡潔的版面配置算繪產生的內容和相片。

📱? 響應式設計：將 UI 元素調整為各種螢幕尺寸。

🎨? 動態樣式變更：在聚焦/模糊時調整文字區域的邊框和高度。

✨ 現代 JavaScript：使用 async/await，以便編寫簡潔、可維護且模組化的程式碼。