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

ChatGPT 集成，用于 Nuxt 3。

关于项目

Nuxt ChatGPT 是一个旨在展示 Nuxt3 ChatGPT 模块功能的项目。它的功能类似于 ChatGPT 克隆版，并增强了功能，包括将创建的文档组织和排序到文件夹中的能力，为管理对话和输出提供更好的用户体验。

这个用户友好的模块以易于集成的过程而自豪，可以无缝实施到任何 Nuxt 3 项目中。通过类型安全的集成，您可以将 ChatGPT 集成到您的 Nuxt 3 项目中，而无需费劲。通过 useChatgpt() 组合式，可以轻松访问 chat 和 chatCompletion 方法。此外，该模块通过 Nitro Server 路由请求来保证安全，从而防止暴露您的 API 密钥。该模块在幕后使用 openai 库的 4.0.0 版本。

功能

💪 轻松集成到任何 Nuxt 3 项目中。
👉 将 Chatgpt 类型安全地集成到您的 Nuxt 3 项目中。
🕹️ 提供一个 useChatgpt() 组合式，可以轻松访问 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() 组合式，它可以轻松访问它们。

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 请求。您也可以简单地打开一个带有“enhancement”标签的 issue。别忘了给该项目一个星标！再次感谢！

Fork 该项目
创建您的 Feature 分支 (git checkout -b feature/AmazingFeature)
提交您的更改 (git commit -m '添加一些 AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
打开 Pull 请求

# 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