Nuxt Chatgpt + 圖片產生器 🔥(查看演示)🔥

ChatGPT 為 Nuxt 3 的整合。

關於專案

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 金鑰洩露。
🧱 它輕巧且效能良好。

開始使用

將 nuxt-chatgpt 相依性新增到您的專案

npm
```
npm install --save-dev nuxt-chatgpt
```
pnpm
```
pnpm add -D nuxt-chatgpt
```
yarn
```
yarn add --dev nuxt-chatgpt
```

將 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 此儲存庫並建立一個 pull request。您也可以直接開啟一個帶有「enhancement」標籤的問題。別忘了給這個專案一顆星！再次感謝！

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

# 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

致謝

使用此空間列出您覺得有幫助且想要表示感謝的資源。我已經包括了一些我最喜歡的資源來開始！

nuxt-chatgpt