AI 第26天：整合 Vue 前端與 AI 模型

今天我們將學習如何整合 Vue 前端與後端的 AI 模型 API，實現一個完整的端到端應用。這將讓我們的 AI 應用擁有更直觀的使用者介面，提供更好的互動體驗。

---

課程目標

1. 瞭解如何設計前後端互動的架構。
2. 使用 Vue 建立一個簡單的前端介面，與 Flask API 通信。
3. 完成整合並測試前後端功能。

---

課程內容

1. 設計前後端架構

1.1 整體架構

• 前端：使用 Vue 3 和 Axios 發送請求，並顯示 API 返回的數據。
• 後端：使用 Flask 部署已訓練的 AI 模型，並提供 API 接口。

1.2 數據流過程

1. 使用者在前端輸入數據。
2. 前端將數據發送到 Flask API。
3. Flask API 處理請求，調用模型進行預測，並返回結果。
4. 前端接收結果並顯示給使用者。

---

2. 建立 Vue 前端

2.1 初始化 Vue 專案

使用以下指令建立 Vue 專案（需安裝 Vue CLI 或 Vite）：

npm create vite@latest vue-ai-integration --template vue
cd vue-ai-integration
npm install

2.2 安裝 Axios

Axios 是一個用於處理 HTTP 請求的庫：

npm install axios

2.3 編輯 App.vue

以下是一個簡單的 Vue 應用，用於與後端 API 交互：

<template>
  <div class="app">
    <h1>AI 預測應用</h1>
    <form @submit.prevent="sendInput">
      <label for="input">輸入數據：</label>
      <input type="number" v-model="inputData" id="input" />
      <button type="submit">提交</button>
    </form>

    <div v-if="result">
      <h2>預測結果：</h2>
      <p></p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      inputData: null, // 使用者輸入數據
      result: null,    // 從後端獲取的預測結果
    };
  },
  methods: {
    async sendInput() {
      try {
        // 發送 POST 請求到 Flask API
        const response = await axios.post('http://127.0.0.1:5000/predict', {
          input: [this.inputData],
        });
        this.result = response.data.prediction[0];
      } catch (error) {
        console.error('發送請求時發生錯誤：', error);
        this.result = '無法獲取結果，請稍後再試。';
      }
    },
  },
};
</script>

<style>
.app {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 50px auto;
  text-align: center;
}
form {
  margin-bottom: 20px;
}
input {
  margin-right: 10px;
}
</style>

---

3. 測試整合

3.1 啟動 Flask 後端

確保 Flask 應用（例如前一天課程的 app.py）正在運行：

python app.py

3.2 啟動 Vue 前端

在 Vue 專案目錄中執行以下指令：

npm run dev

預設情況下，應用會運行在 http://127.0.0.1:5173。

3.3 測試完整功能

1. 打開瀏覽器訪問 Vue 應用。
2. 輸入一個數字，點擊提交按鈕。
3. 預測結果應顯示在網頁上。

---

4. 進階整合與優化

4.1 增加多輸入支援

修改 Vue 前端，允許使用者一次輸入多組數據。

4.2 錯誤處理優化

• 在後端處理並返回錯誤消息，前端顯示友好的提示。
• 例如：輸入數據格式錯誤時，返回 400 錯誤，並在前端顯示提示訊息。

4.3 部署完整應用

將 Flask 後端部署到雲端伺服器（如 AWS 或 Heroku），並使用 Nginx 或其他工具將前端與後端整合到同一域名下。

---

課後作業

1. 修改範例程式碼，讓前端支持多組數據的輸入與顯示結果。
2. 部署完整的前後端應用到網路，並與同學或朋友分享你的作品。
3. 嘗試使用其他前端框架（如 React 或 Angular）重現此應用，進行技術對比。

---