切換語言為:簡體
使用 Vue 實現一個簡單的 AI 頁面

使用 Vue 實現一個簡單的 AI 頁面

  • 爱糖宝
  • 2024-07-10
  • 2101
  • 0
  • 0

在當今數字化時代,AI 技術正逐漸融入我們的生活。本專案將帶領您使用 Vue 框架,以簡潔高效的方式實現一個令人驚歎的 AI 頁面。透過深入淺出的步驟和清晰的程式碼示例,即使您是 Vue 的初學者,也能輕鬆掌握其中的奧秘,為您開啟通往 AI 與前端互動的精彩之旅。

開始前的準備:node環境,vue3(包含路由),tailwindcss css,chatgpt的網站以及api。 node環境可以參考這個教程:(blog.csdn.net/Nicolecocol…)

vue3的npm的安裝命令:

初始化專案 npm init -y

安裝 Vite npm init vite

在後續的選擇中選擇vue -> JavaScript

tailwindcss css的npm安裝

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

chatgpt網站: api.302.ai/v1/chat/com…

開幹

所需檔案及位置 使用 Vue 實現一個簡單的 AI 頁面

**tailwind.css檔案的內容

**

@tailwind base; 
//匯入 Tailwind CSS 的基礎樣式,這些通常是一些重置和預設
//的樣式設定,用於確保在不同瀏覽器中的一致性和基本的樣式表現。

@tailwind components;
//匯入可能自定義的元件相關的樣式。這部分通常用於覆蓋或擴充套件
//Tailwind 提供的預設元件樣式,或者引入您自己定義的基於 Tailwind 類的元件樣式。

@tailwind utilities;
//匯入 Tailwind 的實用工具類,這包含了各種常見的樣式類,如
//間距、字型大小、顏色、陰影等,可以直接應用於 HTML 元素來快速實現各種樣式效果。


當然您也可以用原生css,這些都是指提供頁面的樣式

gpt.js裡面的的內容

export const chat = async (messages, apiKey) => { 
  // 定義一個名為 chat 的非同步函式,接收訊息陣列 messages 和 API 金鑰 apiKey 作為引數
  try { 
    // 嘗試執行以下程式碼
    const result = await fetch("https://api.302.ai/v1/chat/completions", { 
      // 傳送一個 fetch 請求
      method: "POST", 
      // 請求方法為 POST
      headers: { 
        // 設定請求頭
        "Content-Type": "application/json", 
        // 設定授權資訊
        Authorization: `Bearer ${apiKey}`,
      },
      body: JSON.stringify({ 
        // 將請求體轉換為 JSON 字串
        model: "gpt-3.5-turbo",
        messages: messages,
      }),
    });

    const data = await result.json(); 
    // 等待將響應解析為 JSON 格式
    console.log(data); 
    // 列印響應資料
    return data.choices[0].message.content; 
    // 返回響應資料中 choices 陣列的第一個元素的 message 物件的 content 屬性值
  } catch (err) { 
    // 如果上述操作過程中發生錯誤
    throw err; 
    // 丟擲錯誤
  }
};


router.js路由檔案的內容:

import { createRouter, createWebHashHistory } from "vue-router";
// 從 'vue-router' 庫中匯入建立路由和建立雜湊歷史記錄的方法

// 定義路由物件
const router = createRouter({
  history: createWebHashHistory(),
  // 使用 createWebHashHistory 方法建立雜湊路由的歷史記錄模式

  routes: [
    // 定義路由配置陣列
    {
      path: "/",
      // 根路徑
      name: "home",
      // 路由名稱為 'home'
      component: () => import("../views/Home.vue"),
      // 當訪問根路徑時,透過動態匯入載入 '../views/Home.vue' 元件
    },
    {
      path: "/about",
      name: "about",
      // 路徑為 '/about',路由名稱為 'about'
      component: () => import("../views/About.vue"),
      // 當訪問 '/about' 路徑時,透過動態匯入載入 '../views/About.vue' 元件
    },
  ],
});

export default router;
// 將建立的路由物件匯出,以便在其他模組中使用


APP.vue檔案的內容:

APP.vue是根元件,在此的作用是

路由整合:包含 <router-view> 來展示根據路由匹配動態切換的頁面內容。

<template>
  <div>
    <router-view />
  </div>
</template>

<script setup>

</script>

<style scoped></style>


主角來了:

<template>
    <div class="flex flex-col h-screen">
        <!-- 頂部導航欄 -->
        <div class="flex flex-nowrap fixed w-full items-baseline top-0 px-6 py-4 bg-gray-100">
            <div class="text-2xl font-bold">ChatGPT</div>
            <div class="ml-4 text-sm text-gray-500">
                基於OpenAI的ChatGPT自然語言模型人工智慧對話
            </div>
            <div class="ml-auto px-3 py-2 text-sm cursor-pointer hover:bg-white rounded-md" @click="clickConfig()">
                設定
            </div>
        </div>
        <!-- 訊息顯示區域 -->
        <div>
            <div class="flex flex-col mt-24 px-6 pb-8">
                <div :class="`flex flex-col justify-center ${item.role == 'user'? 'items-end' : 'items-start'
                    }`" v-for="(item, index) in messageList.slice(2)" :key="index">
                    <p>{{ item.role }}</p>
                    <p class="color-gray-500 text-sm">{{ item.content }}</p>
                </div>
            </div>
        </div>
        <!-- 輸入區域 -->
        <div class="sticky bottom-0 w-full p-6 pb-8 bg-gray-100">
            <div class="mb-2 text-sm text-gray-500">請輸入API KEY:</div>
            <div>
                <input v-model="messageContent" class="input flex-1" :type="isConfig? 'password' : 'text'"
                    :placeholder="isConfig? 'k-xxxxxx' : '給ChatGPT傳送訊息'" @keydown.enter="sendOrSave()" />
                <button class="btn ml-4" :disabled="isTalking" @click="sendOrSave()">
                    儲存
                </button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { chat } from '../libs/gpt.js'

// 定義訊息內容的響應式變數
const messageContent = ref('') 
// 定義是否處於配置狀態的響應式變數
const isConfig = ref('') 
// 定義是否正在處理中的響應式變數
const isTalking = ref(false) 

// 點選設定的處理函式
const clickConfig = () => {
    isConfig.value = true;
    messageContent.value = getApiKey() || '';
}

// 傳送或儲存的處理函式
const sendOrSave = () => {
    if (!messageContent.value.length) return;
    if (isConfig.value) {
        // 儲存 API 金鑰
        if (saveAPIKey(messageContent.value.trim())) {
            isConfig.value = false;
        }
        messageContent.value = '';
    } else {
        // 傳送訊息
        sendMessage()
    }
}

// 元件掛載時的處理
onMounted(() => {
    if (getApiKey()) {
        isConfig.value = false
    }
})

// 訊息列表的響應式變數
const messageList = ref([
    {
        role:'system',
        content: '你是 人工智慧客服,請儘可能簡潔地回答問題',
    },
    {
        role: 'assistant',
        content: `你好,我是AI語言模型,我可以提供一些常用服務和資訊,例如:

1. 翻譯:我可以把中文翻譯成英文,英文翻譯成中文,還有其他一些語言翻譯,比如法語、日語、西班牙語等。

2. 諮詢服務:如果你有任何問題需要諮詢,例如健康、法律、投資等方面,我可以儘可能為你提供幫助。

3. 閒聊:如果你感到寂寞或無聊,我們可以聊一些有趣的話題,以減輕你的壓力。

請告訴我你需要哪方面的幫助,我會根據你的需求給你提供相應的資訊和建議。`
    }
])

// 傳送訊息的非同步函式
const sendMessage = async () => {
    const message = messageContent.value.trim();
    try {
        isTalking.value = true;
        messageList.value.push({
            role: 'user',
            content: message
        })

        const data = await chat(messageList.value, getApiKey())
        messageList.value.push({
            role: 'assistant',
            content: data
        })
        messageContent.value = ''
    } catch (e) {

    } finally {
        isTalking.value = false
    }
    isTalking.value = true;
}

// 儲存 API 金鑰的函式
const saveAPIKey = (apiKey) => {
    localStorage.setItem("apiKey", apiKey);
    return true;
}

// 獲取 API 金鑰的函式
const getApiKey = () => {
    return localStorage.getItem("apiKey");
}
</script>

<style scoped></style>


這段程式碼是一個 Vue 元件的模板和指令碼部分:

  • 模板中包含頂部導航欄、訊息顯示區域和輸入區域。

    • 導航欄顯示應用名稱和描述,並提供了“設定”按鈕。

    • 訊息顯示區域根據訊息的傳送者角色(使用者或助手)進行佈局顯示。

    • 輸入區域用於輸入訊息或 API 金鑰,幷包含儲存或傳送的操作按鈕。

  • 指令碼部分使用 ref 定義了一些響應式變數,如 messageContentisConfigisTalking 和 messageList

    • messageContent 用於儲存輸入的訊息或 API 金鑰。

    • isConfig 表示是否處於配置 API 金鑰的狀態。

    • isTalking 表示是否正在處理髮送或接收訊息。

    • messageList 儲存了訊息的角色和內容。

  • 定義了多個函式來處理不同的操作,如 clickConfig 處理設定按鈕的點選,sendOrSave 處理髮送或儲存的操作,sendMessage 實際傳送訊息並處理響應,saveAPIKey 儲存 API 金鑰到本地儲存,getApiKey 從本地儲存獲取 API 金鑰。

例如,當用戶點選“設定”按鈕時,isConfig 變為 true,輸入框變為密碼輸入模式,並顯示已儲存的 API 金鑰(如果有)。當用戶輸入訊息並按下回車鍵或點選“儲存”按鈕時,根據 isConfig 的狀態進行儲存 API 金鑰或傳送訊息的操作。在傳送訊息時,會將使用者輸入新增到 messageList 中,等待伺服器響應並將響應內容也新增到 messageList 中。

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.