透過 100+ 個訣竅學習 Nuxt！
56.4K

nuxt-chatgpt
nuxt-chatgpt

Nuxt 的 ChatGPT 整合
967 次下載
165 個星號
v0.2.5
schnapsterdogschnapsterdog


關於專案

Nuxt ChatGPT 是一個專案，旨在展示 Nuxt3 ChatGPT 模組的功能。它作為一個 ChatGPT 克隆版本，具有增強的功能，包括將建立的文件組織和分類到資料夾中的能力，為管理對話和輸出提供更佳的使用者體驗。

關於模組

這個使用者友善的模組以簡單的整合流程為傲，能夠無縫實作到任何 Nuxt 3 專案中。透過型別安全的整合，您可以將 ChatGPT 整合到您的 Nuxt 3 專案中，而毫不費力。透過 useChatgpt() composable，輕鬆存取 chat 和 chatCompletion 方法。此外，該模組保證安全性，因為請求會透過 Nitro Server 路由，從而防止您的 API 金鑰 洩露。該模組在幕後使用 openai 函式庫版本 4.0.0。

功能特色

  • 💪   輕鬆實作到任何 Nuxt 3 專案中。
  • 👉   將 Chatgpt 型別安全地整合到您的 Nuxt 3 專案中。
  • 🕹️   提供 useChatgpt() composable，可輕鬆存取 chat、chatCompletion 和 generateImage 方法。
  • 🔥   透過 Nitro Server 路由請求來確保安全性，防止 API 金鑰 洩露。
  • 🧱   輕量且效能良好。

開始使用

  1. 將 nuxt-chatgpt 相依性新增至您的專案
  • npm
    npm install --save-dev nuxt-chatgpt
  • pnpm
    pnpm add -D nuxt-chatgpt
  • yarn
    yarn add --dev nuxt-chatgpt
  1. 將 nuxt-chatgpt 新增至 nuxt.config.ts 的模組區段
export default defineNuxtConfig({
  modules: ["nuxt-chatgpt"],

  // entirely optional
  chatgpt: {
    apiKey: 'Your apiKey here goes here'
  },
})

就是這樣！您現在可以在您的 Nuxt 應用程式中使用 Nuxt Chatgpt 了 🔥

用法 & 範例

若要存取 nuxt-chatgpt 模組中的 chat、chatCompletion 和 generateImage 方法，您可以使用 useChatgpt() composable，它提供對這些方法的輕鬆存取。

chat 和 chatCompletion 方法需要三個參數

名稱型別預設值描述
message字串僅適用於 chat()一個字串，表示您想要傳送給 GPT 模型進行處理的文字訊息。
messages陣列僅適用於 chatCompletion()一個物件陣列，包含 role 和 content
model字串chat() 的 gpt-4o-mini 和 chatCompletion() 的 gpt-4o-mini表示不同類型自然語言處理任務的特定模型。
options物件{ temperature: 0.5, max_tokens: 2048, top_p: 1 frequency_penalty: 0, presence_penalty: 0 }一個選用物件，用於指定您想要傳遞給 API 請求的任何其他選項，例如，要產生的回應數量，以及每個回應的最大長度。

generateImage 方法需要一個參數

名稱型別預設值描述
message字串所需圖片的文字描述。最大長度為 1000 個字元。
model字串dall-e-2 或 dall-e-3用於圖片產生的模型。目前僅支援 dall-e-2。
options物件{ n: 1, quality: 'standard', response_format: 'url', size: '1024x1024', style: 'natural' }一個選用物件，用於指定您想要傳遞給 API 請求的任何其他選項，例如，要產生的圖片數量、品質、大小和風格。

可用模型

  • text-davinci-002
  • text-davinci-003
  • gpt-3.5-turbo
  • gpt-3.5-turbo-0301
  • gpt-3.5-turbo-1106
  • gpt-4
  • gpt-4o
  • gpt-4o-mini
  • gpt-4-turbo
  • gpt-4-1106-preview
  • gpt-4-0314
  • gpt-4-0613
  • gpt-4-32k
  • gpt-4-32k-0314
  • gpt-4-32k-0613
  • dall-e-2
  • dall-e-3

簡單的 chat 用法

在以下範例中，模型未指定，預設將使用 gpt-4o-mini 模型。

const { chat } = useChatgpt()

const data = ref('')
const inputData = ref('')

async function sendMessage() {
  try {
    const response = await chat(inputData.value)
    data.value = response
  } catch(error) {
    alert(`Join the waiting list if you want to use GPT-4 models: ${error}`)
  }
}

<template>
  <div>
    <input v-model="inputData">
    <button
      @click="sendMessage"
      v-text="'Send'"
    />
    <div>{{ data }}</div>
  </div>
</template>

搭配不同模型的 chat 用法

const { chat } = useChatgpt()

const data = ref('')
const inputData = ref('')

async function sendMessage() {
  try {
    const response = await chat(inputData.value, 'gpt-4o-mini')
    data.value = response
  } catch(error) {
    alert(`Join the waiting list if you want to use GPT-4 models: ${error}`)
  }
}

<template>
  <div>
    <input v-model="inputData">
    <button
      @click="sendMessage"
      v-text="'Send'"
    />
    <div>{{ data }}</div>
  </div>
</template>

簡單的 chatCompletion 用法

在以下範例中，模型未指定，預設將使用 gpt-4o-mini 模型。

const { chatCompletion } = useChatgpt()

const chatTree = ref([])
const inputData = ref('')

async function sendMessage() {
  try {
    const message = {
      role: 'user',
      content: `${inputData.value}`,
    }

    chatTree.value.push(message)

    const response = await chatCompletion(chatTree.value)
    
    const responseMessage = {
      role: response[0].message.role,
      content: response[0].message.content
    }
    
    chatTree.value.push(responseMessage)
  } catch(error) {
    alert(`Join the waiting list if you want to use GPT-4 models: ${error}`)
  }
}

<template>
  <div>
    <input v-model="inputData">
    <button
      @click="sendMessage"
      v-text="'Send'"
    />
    <div>
      <div
        v-for="chat in chatTree"
        :key="chat"
      >
        <strong>{{ chat.role }} :</strong>
        <div>{{ chat.content }} </div>
      </div>
    </div>
  </div>
</template>

搭配不同模型的 chatCompletion 用法

const { chatCompletion } = useChatgpt()

const chatTree = ref([])
const inputData = ref('')

async function sendMessage() {
  try {
    const message = {
      role: 'user',
      content: `${inputData.value}`,
    }

    chatTree.value.push(message)

    const response = await chatCompletion(chatTree.value, 'gpt-4o-mini')
    
    const responseMessage = {
      role: response[0].message.role,
      content: response[0].message.content
    }
    
    chatTree.value.push(responseMessage)
  } catch(error) {
    alert(`Join the waiting list if you want to use GPT-4 models: ${error}`)
  }
}

<template>
  <div>
    <input v-model="inputData">
    <button
      @click="sendMessage"
      v-text="'Send'"
    />
    <div>
      <div
        v-for="chat in chatTree"
        :key="chat"
      >
        <strong>{{ chat.role }} :</strong>
        <div>{{ chat.content }} </div>
      </div>
    </div>
  </div>
</template>

簡單的 generateImage 用法

在以下範例中，模型未指定，預設將使用 dall-e-2 模型。

const { generateImage } = useChatgpt()

const images = ref([])
const inputData = ref('')
const loading = ref(false)

async function sendPrompt() {
  loading.value = true
  try {
    images.value = await generateImage(inputData.value)
  } catch (error) {
    alert(`Error: ${error}`)
  }
  loading.value = false
}

<template>
  <div>
    <div v-if="!loading && !images.length">
      <input v-model="inputData">
      <button
        @click="sendPrompt"
        v-text="'Send Prompt'"
      />
    </div>
    <div v-else-if="loading">Generating, please wait ...</div>
    <div v-if="images && !loading" >
      <img v-for="image in images" :key="image.url" :src="image.url" alt="generated-image"/>
    </div>
  </div>
</template>

搭配不同模型和選項的 generateImage 用法

const { generateImage } = useChatgpt()

const images = ref([])
const inputData = ref('')
const loading = ref(false)

async function sendPrompt() {
  loading.value = true
  try {
    images.value = await generateImage(inputData.value, 'dall-e-2', {
      n: 1,
      quality: 'standard',
      response_format: 'url',
      size: '1024x1024',
      style: 'natural'
    })
  } catch (error) {
    alert(`Error: ${error}`)
  }
  loading.value = false
}

<template>
  <div>
    <div v-if="!loading && !images.length">
      <input v-model="inputData">
      <button
        @click="sendPrompt"
        v-text="'Send Prompt'"
      />
    </div>
    <div v-else-if="loading">Generating, please wait ...</div>
    <div v-if="images && !loading" >
      <img v-for="image in images" :key="image.url" :src="image.url" alt="generated-image"/>
    </div>
  </div>
</template>

chat vs chatCompletion

chat 方法允許使用者將提示傳送至 OpenAI API 並接收回應。您可以使用此端點建立可以自然方式與使用者互動的對話式介面。例如，您可以使用 chat 方法建立一個聊天機器人，它可以回答客戶服務問題或提供有關產品或服務的資訊。

chatCompletion 方法與 chat 方法類似，但它為產生更長、更複雜的回應提供了額外功能。具體來說，chatCompletion 方法允許您提供對話歷史記錄作為輸入，API 可以使用該歷史記錄來產生與對話上下文一致的回應。這使得建立可以與使用者進行更長、更自然的對話的聊天機器人成為可能。

模組選項

名稱型別預設值描述
apiKey字串xxxxxx您的 apiKey 在此處
isEnabled布林值true啟用或停用模組。預設為 True。

貢獻

貢獻使開放原始碼社群成為學習、啟發和創造的絕佳場所。您所做的任何貢獻都非常感謝。

如果您有任何建議可以讓這個專案變得更好，請 fork 這個 repo 並建立一個 pull request。您也可以直接開啟一個 issue，並標記為 "enhancement"。別忘了給這個專案一個星號！再次感謝！

  1. Fork 專案
  2. 建立您的功能分支 (git checkout -b feature/AmazingFeature)
  3. 提交您的變更 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 開啟 Pull Request

授權條款

根據 MIT 授權條款發布。詳情請參閱 LICENSE.txt。

聯絡方式

Oliver Trajceski - LinkedIn - oliver@akrinum.com

專案連結：https://nuxtchatgpt.com

開發

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

致謝

在此空間列出您認為有幫助並想要致謝的資源。我已經加入了一些我最喜歡的資源來開始！