技術與實作

🎯 本單元學習目標

實際動手建立一個可以運作的 AI 聊天應用程式！

📥 從 GitHub 下載專案

專案已上傳至 GitHub，你可以直接下載使用：

# 開啟命令提示字元，切換到目標資料夾
cd D:\你的資料夾

# 複製專案
git clone https://github.com/ChatGPT3a01/my_first_ai_app.git

# 進入專案資料夾
cd my_first_ai_app

📁 專案結構

🔐 環境變數設定

API Key 不應該直接寫在程式碼中，而是透過 .env 檔案管理

# AI Provider 選擇
# 設定為 openai 或 google
AI_PROVIDER=openai

# OpenAI API Key
OPENAI_API_KEY=sk-your-key-here

# Google Gemini API Key
GOOGLE_API_KEY=your-key-here

🔑 如何取得 API Key

🐍 Flask 後端核心程式碼

from flask import Flask, request, jsonify, render_template
from dotenv import load_dotenv
import os

load_dotenv()  # 載入環境變數

app = Flask(__name__)

# 讀取 AI 提供者設定
AI_PROVIDER = os.getenv('AI_PROVIDER', 'openai')

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/chat', methods=['POST'])
def chat():
    user_message = request.json.get('message')

    if AI_PROVIDER == 'openai':
        response = call_openai(user_message)
    else:
        response = call_google(user_message)

    return jsonify({'response': response})

🤖 OpenAI API 呼叫

from openai import OpenAI

client = OpenAI(api_key=os.getenv('OPENAI_API_KEY'))

def call_openai(message):
    """呼叫 OpenAI API"""
    response = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=[
            {"role": "system", "content": "你是一個友善的 AI 助手"},
            {"role": "user", "content": message}
        ],
        max_tokens=1000
    )
    return response.choices[0].message.content

🌐 Google Gemini API 呼叫

import google.generativeai as genai

genai.configure(api_key=os.getenv('GOOGLE_API_KEY'))
model = genai.GenerativeModel('gemini-1.5-flash')

def call_google(message):
    """呼叫 Google Gemini API"""
    response = model.generate_content(message)
    return response.text

💬 前端聊天介面

<script>
async function sendMessage() {
  const response = await fetch('/chat', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      message: userInput
    })
  });
  const data = await response.json();
  displayMessage(data.response);
}
</script>

🚀 啟動應用程式

# 建立虛擬環境
python -m venv venv

# 啟動虛擬環境
venv\Scripts\activate

# 安裝套件
pip install -r requirements.txt

# 啟動應用
python app.py

✨ 完成效果

Part 4 重點回顧