系統架構與程式解析

📁 專案結構總覽

📁 RAG知識庫問答平台/
├── app.py              # Flask 後端主程式
├── requirements.txt   # Python 套件清單
├── README.md          # 說明文件
│
├── 📁 templates/
│   └── index.html     # 主頁面模板
│
├── 📁 static/
│   ├── style.css      # 樣式表
│   └── script.js      # 前端邏輯
│
├── 📁 data/
│   ├── knowledge_base.json
│   └── knowledge_base_example.csv
│
└── 📁 gas_scripts/
    └── 知識庫API.gs   # Google Apps Script

🏛️ 系統三層架構

⚙️ 後端：Flask 框架

Flask 是 Python 輕量級網頁框架，負責處理 HTTP 請求。

🔌 主要 API 端點

💬 聊天 API 處理流程

@app.route('/api/chat', methods=['POST'])
def chat():
    # 1. 接收前端資料
    data = request.json
    message = data['message']
    use_rag = data.get('use_rag', False)

    # 2. 若啟用 RAG，進行知識庫搜尋
    if use_rag:
        relevant_docs = search_knowledge_base(message)
        context = build_context(relevant_docs)

    # 3. 呼叫 AI API
    response = call_ai_api(message, context)

    # 4. 回傳結果
    return jsonify({
        'response': response,
        'sources': relevant_docs
    })

🎨 前端：JavaScript 邏輯

前端使用原生 JavaScript（無框架），主要功能：

📡 前端發送請求範例

async function sendMessage(message) {
    // 1. 準備請求資料
    const requestData = {
        message: message,
        api_key: settings.apiKey,
        api_type: settings.apiType,
        use_rag: settings.useRAG
    };

    // 2. 發送 POST 請求
    const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(requestData)
    });

    // 3. 解析回應
    const result = await response.json();

    // 4. 顯示結果
    displayMessage(result.response);
    displaySources(result.sources);
}

🔄 完整資料流程

🔧 技術堆疊總覽

📝 Part 4 總結