AI 輔助虛擬導師

用途

功能

在這個專案中體驗下列功能：

📦 HTML、CSS、JAVASCRIPT 和 GEMINI API：利用這些技術建立強大且互動式的指導工具。

🧠 AI 輔助指導：利用 Google 的生成式 AI，根據使用者輸入內容提供智慧且相關的建議。

💬 使用者互動：允許使用者透過文字區域輸入問題或挑戰，並獲得個人化建議。

⏳ 載入指標：在處理使用者查詢時顯示旋轉圖示，以表示進度。

⚠️ 錯誤處理：在產生建議失敗時顯示錯誤訊息，並將錯誤記錄到主控台進行偵錯。

🖥️ 內容顯示：以適當格式在網頁上算繪產生的建議。

📱 響應式設計：確保使用者介面元素能以響應式方式適應各種螢幕大小。

🎨 動態樣式變更：在聚焦和模糊事件中變更輸入元素的外觀。

🔄 使用的 API：整合 Google Gemini API 以產生建議。

📁 程式碼結構：針對產生建議、顯示內容和處理錯誤等不同功能，整理出有條理的函式。

✨ 現代 JavaScript 做法：利用現代 JavaScript 功能 (例如 async/await) 處理非同步作業。確保程式碼簡潔易讀，並加上註解以利瞭解。

📦 模組化設計：函式會以邏輯方式分開，以便處理特定工作，讓程式碼可模組化及維護。