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 プロジェクトへの容易な実装。
👉 ChatgptのNuxt 3 プロジェクトへのタイプセーフな統合。
🕹️ chat、chatCompletion、generateImage メソッドへの容易なアクセスを提供する useChatgpt() コンポーザブルを提供します。
🔥 リクエストを Nitroサーバー経由でルーティングすることでセキュリティを確保し、APIキーの漏洩を防ぎます。
🧱 軽量でパフォーマンスに優れています。

はじめに

プロジェクトにnuxt-chatgptの依存関係を追加します

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

nuxt.config.tsのmodulesセクションにnuxt-chatgptを追加します

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 メソッドには3つのパラメータが必要です

名前	タイプ	デフォルト	説明
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 メソッドには1つのパラメータが必要です

名前	タイプ	デフォルト	説明
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` です。

貢献

貢献は、オープンソースコミュニティを学習、刺激、創造のための素晴らしい場所にします。皆様のご貢献に心より感謝申し上げます。

改善のための提案がある場合は、リポジトリをフォークしてプルリクエストを作成してください。「機能強化」タグを付けて issue を開くこともできます。プロジェクトにスターを付けるのをお忘れなく！改めて感謝いたします！

プロジェクトのフォーク
フィーチャブランチの作成 (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