nuxt-chatgpt 0.2.4 → 0.2.7

package/README.md

@@ -2,7 +2,7 @@
 <br />
 <div>
   <div>
-  <h1>Nuxt Chatgpt <a href="https://nuxtchatgpt.com" target="_blank">🔥(VIEW DEMO)🔥</a></h3>
+  <h1>Nuxt Chatgpt + Image Generator<a href="https://nuxtchatgpt.com" target="_blank">🔥(VIEW DEMO)🔥</a></h3>
   
   </div>
   <div style="display:flex; width:100%; justify-content:center">
@@ -29,7 +29,7 @@ This user-friendly module boasts of an easy integration process that enables sea
 
 - 💪 &nbsp; Easy implementation into any [Nuxt 3](https://nuxt.com) project.
 - 👉 &nbsp; Type-safe integration of Chatgpt into your [Nuxt 3](https://nuxt.com) project.
-- 🕹️ &nbsp; Provides a `useChatgpt()` composable that grants easy access to the `chat`, and `chatCompletion` methods.
+- 🕹️ &nbsp; Provides a `useChatgpt()` composable that grants easy access to the `chat`, and `chatCompletion`, and `generateImage` methods.
 - 🔥 &nbsp; Ensures security by routing requests through a [Nitro Server](https://nuxt.com/docs/guide/concepts/server-engine), preventing the <b>API Key</b> from being exposed.
 - 🧱 &nbsp; It is lightweight and performs well.
 
@@ -64,15 +64,24 @@ That's it! You can now use Nuxt Chatgpt in your Nuxt app 🔥
 
 ## Usage & Examples
 
-To access the `chat`, and `chatCompletion` methods in the nuxt-chatgpt module, you can use the `useChatgpt()` composable, which provides easy access to them. The `chat`, and `chatCompletion` methods requires three parameters:
+To access the `chat`, `chatCompletion`, and `generateImage` methods in the nuxt-chatgpt module, you can use the `useChatgpt()` composable, which provides easy access to them. 
 
+The `chat`, and `chatCompletion` methods requires three parameters:
 
 | Name | Type | Default | Description |
 |--|--|--|--|
 |**message**|`String`|available only for `chat()`|A string representing the text message that you want to send to the GPT model for processing.
 |**messages**|`Array`|available only for `chatCompletion()`|An array of objects that contains `role` and `content`
 |**model**|`String`|`gpt-4o-mini` for `chat()` and `gpt-4o-mini` for `chatCompletion()`|Represent certain model for different types of natural language processing tasks.
-|**options**|`Object`|`{ temperature: 0.5, max_tokens: 2048, top_p: 1 frequency_penalty: 0, presence_penalty: 0 }`|An optional object that specifies any additional options you want to pass to the API request, such as the number of responses to generate, and the maximum length of each response.
+|**options**|`Object`|`{ temperature: 0.5, max_tokens: 2048, top_p: 1 frequency_penalty: 0, presence_penalty: 0 }`|An optional object that specifies any additional options you want to pass to the API request, such as, the number of responses to generate, and the maximum length of each response.
+
+The `generateImage` method requires one parameters:
+
+| Name | Type | Default | Description |
+|--|--|--|--|
+|**message**|`String`| A text description of the desired image(s). The maximum length is 1000 characters.
+|**model**|`String`|`dall-e-3`| The model to use for image generation. Only dall-e-3 is supported at this time.
+|**options**|`Object`|`{ n: 1, quality: 'standard', response_format: 'url', size: '1024x1024', style: 'natural' }`|An optional object that specifies any additional options you want to pass to the API request, such as, the number of images to generate, quality, size and style of the generated images.
 
 Available models:
 
@@ -91,6 +100,7 @@ Available models:
 - gpt-4-32k
 - gpt-4-32k-0314
 - gpt-4-32k-0613
+- dall-e-3
 
 ### Simple `chat` usage 
 In the following example, the model is unspecified, and the gpt-4o-mini model will be used by default.
@@ -264,6 +274,90 @@ async function sendMessage() {
 </template>
 ```
 
+### Simple `generateImage` usage 
+In the following example, the model is unspecified, and the dall-e-3 model will be used by default.
+
+```js
+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
+}
+
+```
+
+```html
+<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>
+```
+
+### Usage of `generateImage` with different model, and options
+
+```js
+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-3', {
+      n: 1,
+      quality: 'standard',
+      response_format: 'url',
+      size: '1024x1024',
+      style: 'natural'
+    })
+  } catch (error) {
+    alert(`Error: ${error}`)
+  }
+  loading.value = false
+}
+```
+
+```html
+<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
 
 The `chat` method allows the user to send a prompt to the OpenAI API and receive a response. You can use this endpoint to build conversational interfaces that can interact with users in a natural way. For example, you could use the chat method to build a chatbot that can answer customer service questions or provide information about a product or service.

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.2.4"
+  "version": "0.2.7"
 }

package/dist/module.mjs

@@ -45,6 +45,13 @@ const module = defineNuxtModule({
         handler: resolve(runtimeDir, "server/api/chat-completion")
       }
     );
+    addServerHandler(
+      {
+        route: "/api/image-generate",
+        method: "post",
+        handler: resolve(runtimeDir, "server/api/image-generate")
+      }
+    );
     nuxt.options.build.transpile.push(runtimeDir);
   }
 });

package/dist/runtime/composables/useChatgpt.mjs

@@ -34,5 +34,22 @@ export const useChatgpt = () => {
       });
     }
   };
-  return { chat, chatCompletion };
+  const generateImage = async (message, model, options) => {
+    try {
+      return await $fetch("/api/image-generate", {
+        method: "POST",
+        body: {
+          message,
+          model,
+          options
+        }
+      });
+    } catch (error) {
+      throw createError({
+        statusCode: 500,
+        message: "Failed to forward request to server"
+      });
+    }
+  };
+  return { chat, chatCompletion, generateImage };
 };

package/dist/runtime/constants/models.d.ts

@@ -13,3 +13,4 @@ export declare const MODEL_GPT_4_0613 = "gpt-4-0613";
 export declare const MODEL_GPT_4_32k: string;
 export declare const MODEL_GPT_4_32k_0314: string;
 export declare const MODEL_GPT_4_32k_0613 = "gpt-4-32k-0613";
+export declare const MODEL_GPT_DALL_E_3 = "dall-e-3";

package/dist/runtime/constants/models.mjs

@@ -13,3 +13,4 @@ export const MODEL_GPT_4_0613 = "gpt-4-0613";
 export const MODEL_GPT_4_32k = "gpt-4-32k";
 export const MODEL_GPT_4_32k_0314 = "gpt-4-32k-0314";
 export const MODEL_GPT_4_32k_0613 = "gpt-4-32k-0613";
+export const MODEL_GPT_DALL_E_3 = "dall-e-3";

package/dist/runtime/constants/options.d.ts

@@ -5,3 +5,10 @@ export declare const defaultOptions: {
     frequency_penalty: number;
     presence_penalty: number;
 };
+export declare const defaultDaleOptions: {
+    n: number;
+    quality: string;
+    response_format: string;
+    size: string;
+    style: string;
+};

package/dist/runtime/constants/options.mjs

@@ -5,3 +5,10 @@ export const defaultOptions = {
   frequency_penalty: 0,
   presence_penalty: 0
 };
+export const defaultDaleOptions = {
+  n: 1,
+  quality: "standard",
+  response_format: "url",
+  size: "1024x1024",
+  style: "natural"
+};

package/dist/runtime/server/api/chat-completion.mjs

@@ -26,7 +26,7 @@ export default defineEventHandler(async (event) => {
   } catch (error) {
     throw createError({
       statusCode: 500,
-      message: "Failed to forward request to OpenAI API"
+      message: error
     });
   }
 });

package/dist/runtime/server/api/chat.mjs

@@ -26,7 +26,7 @@ export default defineEventHandler(async (event) => {
   } catch (error) {
     throw createError({
       statusCode: 500,
-      message: "Failed to forward request to OpenAI API"
+      message: error
     });
   }
 });

package/dist/runtime/server/api/image-generate.d.ts

@@ -0,0 +1,3 @@
+import OpenAI from 'openai';
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<OpenAI.Images.Image[] | undefined>>;
+export default _default;

package/dist/runtime/server/api/image-generate.mjs

@@ -0,0 +1,32 @@
+import OpenAI from "openai";
+import { createError, defineEventHandler, readBody } from "h3";
+import { defaultDaleOptions } from "../../constants/options.mjs";
+import { MODEL_GPT_DALL_E_3 } from "../../constants/models.mjs";
+import { modelMap } from "../../utils/model-map.mjs";
+import { useRuntimeConfig } from "#imports";
+export default defineEventHandler(async (event) => {
+  const { message, model, options } = await readBody(event);
+  if (!useRuntimeConfig().chatgpt.apiKey) {
+    throw createError({
+      statusCode: 403,
+      message: "Missing OpenAI API Key"
+    });
+  }
+  const openai = new OpenAI({
+    apiKey: useRuntimeConfig().chatgpt.apiKey
+  });
+  const requestOptions = {
+    prompt: message,
+    model: !model ? modelMap[MODEL_GPT_DALL_E_3] : modelMap[model],
+    ...options || defaultDaleOptions
+  };
+  try {
+    const response = await openai.images.generate(requestOptions);
+    return response.data;
+  } catch (error) {
+    throw createError({
+      statusCode: 500,
+      message: error
+    });
+  }
+});

package/dist/runtime/types/index.d.ts

@@ -1,6 +1,7 @@
 export interface IChatgptClient {
   chat(IMessage): Promise,
   chatCompletion(IMessage): Promise
+  generateImage(IMessage): Promise
 }
 
 export interface IMessage {

package/dist/runtime/utils/model-map.d.ts

@@ -4,5 +4,6 @@ export declare const modelMap: {
     "gpt-4-1106-preview": string;
     "gpt-4-0613": string;
     "gpt-4-32k-0613": string;
+    "dall-e-3": string;
     default: string;
 };

package/dist/runtime/utils/model-map.mjs

@@ -13,7 +13,8 @@ import {
   MODEL_GPT_4_0613,
   MODEL_GPT_4_32k,
   MODEL_GPT_4_32k_0314,
-  MODEL_GPT_4_32k_0613
+  MODEL_GPT_4_32k_0613,
+  MODEL_GPT_DALL_E_3
 } from "../constants/models.mjs";
 export const modelMap = {
   [MODEL_TEXT_DAVINCI_003]: MODEL_TEXT_DAVINCI_003,
@@ -31,5 +32,6 @@ export const modelMap = {
   [MODEL_GPT_4_32k]: MODEL_GPT_4_32k,
   [MODEL_GPT_4_32k_0314]: MODEL_GPT_4_32k_0314,
   [MODEL_GPT_4_32k_0613]: MODEL_GPT_4_32k_0613,
-  default: MODEL_GPT_TURBO_3_5
+  [MODEL_GPT_DALL_E_3]: MODEL_GPT_DALL_E_3,
+  default: MODEL_GPT_4_MINI
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-chatgpt",
-  "version": "0.2.4",
+  "version": "0.2.7",
   "description": "ChatGPT integration for Nuxt 3",
   "license": "MIT",
   "type": "module",
@@ -26,7 +26,9 @@
     "nuxt3",
     "nuxt",
     "nuxt.js",
-    "nuxt-chatgpt"
+    "nuxt-chatgpt",
+    "image",
+    "image-generator"
   ],
   "exports": {
     ".": {
@@ -47,7 +49,7 @@
     "dev:generate": "nuxi generate playground",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
     "dev:preview": "nuxi preview playground",
-    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release --minor && npm publish && git push --follow-tags",
     "lint": "eslint .",
     "test": "vitest run",
     "test:watch": "vitest watch"
@@ -55,7 +57,7 @@
   "dependencies": {
     "@nuxt/kit": "latest",
     "defu": "latest",
-    "openai": "4.0.0"
+    "openai": "^4.96.2"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "latest",