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

ChatGPT 集成，用于 Nuxt 3。

关于项目

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

这个用户友好的模块以易于集成的过程而自豪，可以无缝地实施到任何 Nuxt 3 项目中。通过类型安全的集成，您可以将 ChatGPT 集成到您的 Nuxt 3 项目中，< b>毫不费力。通过 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	`String`	仅适用于 `chat()`	一个字符串，表示您要发送到 GPT 模型进行处理的文本消息。
messages	`Array`	仅适用于 `chatCompletion()`	一个对象数组，其中包含 `role` 和 `content`
model	`String`	`chat()` 的 `gpt-4o-mini` 和 `chatCompletion()` 的 `gpt-4o-mini`	表示不同类型的自然语言处理任务的特定模型。
options	`Object`	`{ temperature: 0.5, max_tokens: 2048, top_p: 1 frequency_penalty: 0, presence_penalty: 0 }`	一个可选对象，用于指定您要传递给 API 请求的任何其他选项，例如，要生成的响应数量以及每个响应的最大长度。

generateImage 方法需要一个参数

名称	类型	默认值	描述
message	`String`	所需图像的文本描述。最大长度为 1000 个字符。
model	`String`	`dall-e-2` 或 `dall-e-3`	用于图像生成的模型。目前仅支持 dall-e-2。
options	`Object`	`{ 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	`String`	`xxxxxx`	您的 apiKey 在这里
isEnabled	`Boolean`	`true`	启用或禁用模块。默认 `True`。

贡献

贡献使开源社区成为学习、启发和创造的绝佳场所。任何贡献都非常感谢。

如果您有任何可以改进此功能的建议，请 Fork 仓库并创建 Pull Request。您也可以简单地提交一个带有标签“enhancement”的 Issue。不要忘记给项目点赞！再次感谢！

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