Vibe Coding - 社群貼文產生器

📦 提示詞（可丟 Cursor 生成整個專案）

我想用 Node.js + Express 建立一個網頁應用，功能如下：

🛠️ 技術棧

• 後端：Node.js + Express
• 前端：Bootstrap + 原生 JavaScript
• 圖片處理：Multer（上傳圖片至本地 /uploads 資料夾）
• AI：OpenAI GPT-4o 多模態 API
• 伺服器啟動與部署：PM2
• 外網穿透測試：Ngrok

🎯 功能需求

1. 使用者可上傳一張圖片（JPG/PNG）
2. 使用者可輸入一段「貼文風格」描述（如：幽默、文青、勵志、專業…）
3. 前端將圖片與貼文風格送至後端 /generate-post API
4. 後端將圖片轉為 base64 並呼叫 GPT-4o API，多模態處理圖片 + 風格描述
5. 接收回傳的社群貼文文字（要求：有趣、吸睛、簡短）
6. 將圖片與文字在前端呈現，並提供「一鍵複製貼文」功能
7. 成功產生貼文後，自動刪除暫存圖片檔案（節省硬碟空間）

📂 專案結構與檔案需求

請幫我產生以下檔案：

✅ 前端：

• index.html：使用 Bootstrap 排版，包含：

  • 圖片上傳欄位
  • 貼文風格輸入欄位
  • 送出按鈕
  • 顯示回傳圖片與貼文

  • 複製貼文按鈕

    ✅ 後端：

• server.js：

  • Express server 基礎設定
  • Multer 處理圖片上傳
  • 使用 OpenAI GPT-4o API（支援多模態）
  • 產生貼文後，自動刪除上傳圖片

  • 使用 dotenv 載入環境變數

    ✅ 其他設定檔：

• .env：儲存 API 金鑰與設定，例如：
• package.json：包含以下套件：
• express
• multer
• axios
• dotenv
• pm2
• pm2.config.js：PM2 啟動設定檔

• uploads/：圖片暫存資料夾（注意設定自動刪除）

⚙️ 加值功能請一併實作

🔁 自動清除圖片檔案

• 圖片送出給 GPT-4o 並取得回應後，立即刪除對應檔案
• 可使用 fs.unlink() 進行刪除操作，處理錯誤與例外

🌐 Ngrok 穿透功能（選配說明）

• 提供如何使用 ngrok 將本地 Express server 暴露給外部

• 建議指令：

  ngrok config add-authtoken your-ngrok-token
  ngrok http 3000

• PM2常用指令：

  pm2 start server.js --name ai-social-post
  pm2 list
  pm2 logs ai-social-post
  pm2 restart ai-social-post
  pm2 stop ai-social-post