Nuxt Chatgpt + 图片生成器 🔥(查看演示)🔥

ChatGPT 集成到 Nuxt 3 中。

关于项目

Nuxt ChatGPT 是一个旨在展示 Nuxt3 ChatGPT 模块功能的项目。它作为一个 ChatGPT 克隆，具有增强功能，包括能够将创建的文档组织和排序到文件夹中，从而提供改进的用户体验来管理对话和输出。

这个用户友好的模块拥有一个简单的集成过程，可以无缝地集成到任何 Nuxt 3 项目中。通过类型安全的集成，您可以将 ChatGPT 集成到您的 Nuxt 3 项目中，而无需费吹灰之力。通过 useChatgpt() 组合式轻松访问 chat 和 chatCompletion 方法。此外，该模块保证了 **安全性**，因为请求通过 Nitro 服务器路由，从而防止您的 **API 密钥** 泄露。该模块在幕后使用 openai 库 4.0.0 版本。

功能

💪 轻松集成到任何 Nuxt 3 项目中。
👉 在您的 Nuxt 3 项目中进行类型安全的 ChatGPT 集成。
🕹️ 提供一个 useChatgpt() 组合式，可以轻松访问 chat、chatCompletion 和 generateImage 方法。
🔥 通过 Nitro 服务器路由请求以确保安全性，防止 **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 的 modules 部分

export default defineNuxtConfig({
  modules: ["nuxt-chatgpt"],

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

就是这样！您现在可以在您的 Nuxt 应用程序中使用 Nuxt Chatgpt 🔥

用法和示例

要访问 nuxt-chatgpt 模块中的 chat、chatCompletion 和 generateImage 方法，您可以使用 useChatgpt() 组合式，它提供了对它们的轻松访问。

chat 和 chatCompletion 方法需要三个参数

名称	类型	默认值	描述
message	`字符串`	仅适用于 `chat()`	表示您要发送到 GPT 模型以进行处理的文本消息的字符串。
messages	`数组`	仅适用于 `chatCompletion()`	包含 `role` 和 `content` 的对象的数组
model	`字符串`	`gpt-4o-mini` 用于 `chat()` 和 `gpt-4o-mini` 用于 `chatCompletion()`	表示用于不同类型的自然语言处理任务的特定模型。
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 与 chatCompletion

chat 方法允许用户向 OpenAI API 发送提示并接收响应。您可以使用此端点构建能够以自然方式与用户交互的对话界面。例如，您可以使用 chat 方法构建一个可以回答客户服务问题或提供有关产品或服务信息的聊天机器人。

chatCompletion 方法类似于 chat 方法，但它提供了其他功能来生成更长、更复杂的响应。具体来说，chatCompletion 方法允许您提供对话历史记录作为输入，API 可以使用它来生成与对话上下文一致的响应。这使得构建能够与用户进行更长、更自然对话的聊天机器人成为可能。

模块选项

名称	类型	默认值	描述
apiKey	`字符串`	`xxxxxx`	您的 apiKey 放在这里
isEnabled	`布尔值`	`true`	启用或禁用模块。默认情况下为 `True`。

贡献

贡献使开源社区成为一个学习、启发和创造的绝佳场所。您做出的任何贡献都将 **受到高度赞赏**。

如果您有任何建议可以使本项目变得更好，请分叉存储库并创建一个拉取请求。您也可以简单地使用标签“增强”打开一个问题。别忘了给项目加星！再次感谢！

分叉项目
创建您的功能分支 (git checkout -b feature/AmazingFeature)
提交您的更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
打开一个拉取请求

# 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