nuxt-chatgpt 0.2.3 → 0.2.5

package/README.md

@@ -1,10 +1,15 @@
 <!-- PROJECT LOGO -->
 <br />
 <div>
-  <h1>Nuxt Chatgpt</h3>
-  <img src="images/chatgpt-logo.png" alt="Logo">
+  <div>
+  <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">
+  <img src="images/logo.png" alt="Logo">
+  </div>
 
-  > [ChatGPT](https://openai.com/) integration for [Nuxt 3](https://nuxt.com).
+  > [ChatGPT](https://nuxtchatgpt.com) integration for [Nuxt 3](https://nuxt.com).
 
   [![npm version][npm-version-src]][npm-version-href]
   [![npm downloads][npm-downloads-src]][npm-downloads-href]
@@ -12,6 +17,10 @@
 </div>
 <br />
 
+## About the project
+
+[Nuxt ChatGPT](https://nuxtchatgpt.com) is a project built to showcase the capabilities of the Nuxt3 ChatGPT module. It functions as a ChatGPT clone with enhanced features, including the ability to organize and sort created documents into folders, offering an improved user experience for managing conversations and outputs.
+
 ## About the module
 
 This user-friendly module boasts of an easy integration process that enables seamless implementation into any [Nuxt 3](https://nuxt.com) project. With type-safe integration, you can integrate [ChatGPT](https://openai.com/) into your [Nuxt 3](https://nuxt.com) project without breaking a <b>sweat</b>. Enjoy easy access to the `chat`, and `chatCompletion` methods through the `useChatgpt()` composable. Additionally, the module guarantees <b><i>security</i></b> as requests are routed through a [Nitro Server](https://nuxt.com/docs/guide/concepts/server-engine), thus preventing the exposure of your <b>API Key</b>. The module use [openai](https://github.com/openai/openai-node) library version 4.0.0 behind the scene.
@@ -20,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.
 
@@ -55,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`|`text-davinci-003` for `chat()` and `gpt-3.5-turbo` 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.
+|**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.
+
+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-2` or `dall-e-3`| The model to use for image generation. Only dall-e-2 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:
 
@@ -73,17 +91,20 @@ Available models:
 - 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
-
-You need to join waitlist to use gpt-4 models within `chatCompletion` method
+- dall-e-2
+- dall-e-3
 
 ### Simple `chat` usage 
-In the following example, the model is unspecified, and the text-davinci-003 model will be used by default.
+In the following example, the model is unspecified, and the gpt-4o-mini model will be used by default.
 
 ```js
 const { chat } = useChatgpt()
@@ -125,7 +146,7 @@ const inputData = ref('')
 
 async function sendMessage() {
   try {
-    const response = await chat(inputData.value, 'gpt-3.5-turbo')
+    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}`)
@@ -148,7 +169,7 @@ async function sendMessage() {
 ```
 
 ### Simple `chatCompletion` usage 
-In the following example, the model is unspecified, and the gpt-3.5-turbo model will be used by default.
+In the following example, the model is unspecified, and the gpt-4o-mini model will be used by default.
 
 ```js
 const { chatCompletion } = useChatgpt()
@@ -218,7 +239,7 @@ async function sendMessage() {
 
     chatTree.value.push(message)
 
-    const response = await chatCompletion(chatTree.value, 'gpt-3.5-turbo-0301')
+    const response = await chatCompletion(chatTree.value, 'gpt-4o-mini')
     
     const responseMessage = {
       role: response[0].message.role,
@@ -254,6 +275,90 @@ async function sendMessage() {
 </template>
 ```
 
+### Simple `generateImage` usage 
+In the following example, the model is unspecified, and the dall-e-2 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-2', {
+      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.
@@ -293,7 +398,7 @@ Distributed under the MIT License. See `LICENSE.txt` for more information.
 
 Oliver Trajceski - [LinkedIn](https://mk.linkedin.com/in/oliver-trajceski-8a28b070) - oliver@akrinum.com
 
-Project Link: [https://vuemadness.com/vuehub/nuxt-chatgpt/](https://vuemadness.com/vuehub/nuxt-chatgpt/)
+Project Link: [https://nuxtchatgpt.com](https://nuxtchatgpt.com)
 
 ## Development
 

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.2.3"
+  "version": "0.2.5"
 }

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

@@ -4,9 +4,14 @@ export declare const MODEL_GPT_TURBO_3_5: string;
 export declare const MODEL_GPT_TURBO_3_5_0301: string;
 export declare const MODEL_GPT_TURBO_3_5_1106 = "gpt-3.5-turbo-1106";
 export declare const MODEL_GPT_4: string;
+export declare const MODEL_GPT_4_O: string;
+export declare const MODEL_GPT_4_MINI: string;
+export declare const MODEL_GPT_4_TURBO: string;
 export declare const MODEL_GPT_4_1106_PREVIEW = "gpt-4-1106-preview";
 export declare const MODEL_GPT_4_0314: string;
 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_2 = "dall-e-2";
+export declare const MODEL_GPT_DALL_E_3 = "dall-e-3";

package/dist/runtime/constants/models.mjs

@@ -4,9 +4,14 @@ export const MODEL_GPT_TURBO_3_5 = "gpt-3.5-turbo";
 export const MODEL_GPT_TURBO_3_5_0301 = "gpt-3.5-turbo-0301";
 export const MODEL_GPT_TURBO_3_5_1106 = "gpt-3.5-turbo-1106";
 export const MODEL_GPT_4 = "gpt-4";
+export const MODEL_GPT_4_O = "gpt-4o";
+export const MODEL_GPT_4_MINI = "gpt-4o-mini";
+export const MODEL_GPT_4_TURBO = "gpt-4-turbo";
 export const MODEL_GPT_4_1106_PREVIEW = "gpt-4-1106-preview";
 export const MODEL_GPT_4_0314 = "gpt-4-0314";
 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_2 = "dall-e-2";
+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

@@ -1,7 +1,7 @@
 import OpenAI from "openai";
 import { createError, defineEventHandler, readBody } from "h3";
 import { defaultOptions } from "../../constants/options.mjs";
-import { MODEL_GPT_TURBO_3_5 } from "../../constants/models.mjs";
+import { MODEL_GPT_4_MINI } from "../../constants/models.mjs";
 import { modelMap } from "../../utils/model-map.mjs";
 import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (event) => {
@@ -17,7 +17,7 @@ export default defineEventHandler(async (event) => {
   });
   const requestOptions = {
     messages,
-    model: !model ? modelMap[MODEL_GPT_TURBO_3_5] : modelMap[model],
+    model: !model ? modelMap[MODEL_GPT_4_MINI] : modelMap[model],
     ...options || defaultOptions
   };
   try {

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

@@ -1,7 +1,7 @@
 import OpenAI from "openai";
 import { createError, defineEventHandler, readBody } from "h3";
 import { defaultOptions } from "../../constants/options.mjs";
-import { MODEL_GPT_TURBO_3_5 } from "../../constants/models.mjs";
+import { MODEL_GPT_4_MINI } from "../../constants/models.mjs";
 import { modelMap } from "../../utils/model-map.mjs";
 import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (event) => {
@@ -17,7 +17,7 @@ export default defineEventHandler(async (event) => {
   });
   const requestOptions = {
     messages: [{ role: "user", content: message }],
-    model: !model ? modelMap[MODEL_GPT_TURBO_3_5] : modelMap[model],
+    model: !model ? modelMap[MODEL_GPT_4_MINI] : modelMap[model],
     ...options || defaultOptions
   };
   try {

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[]>>;
+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_2 } 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_2] : modelMap[model],
+    ...options || defaultDaleOptions
+  };
+  try {
+    const response = await openai.images.generate(requestOptions);
+    return response.data;
+  } catch (error) {
+    throw createError({
+      statusCode: 500,
+      message: "Failed to forward request to OpenAI API"
+    });
+  }
+});

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,7 @@ export declare const modelMap: {
     "gpt-4-1106-preview": string;
     "gpt-4-0613": string;
     "gpt-4-32k-0613": string;
+    "dall-e-2": string;
+    "dall-e-3": string;
     default: string;
 };

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

@@ -5,12 +5,17 @@ import {
   MODEL_GPT_TURBO_3_5_0301,
   MODEL_GPT_TURBO_3_5_1106,
   MODEL_GPT_4,
+  MODEL_GPT_4_O,
+  MODEL_GPT_4_MINI,
+  MODEL_GPT_4_TURBO,
   MODEL_GPT_4_1106_PREVIEW,
   MODEL_GPT_4_0314,
   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_2,
+  MODEL_GPT_DALL_E_3
 } from "../constants/models.mjs";
 export const modelMap = {
   [MODEL_TEXT_DAVINCI_003]: MODEL_TEXT_DAVINCI_003,
@@ -19,11 +24,16 @@ export const modelMap = {
   [MODEL_GPT_TURBO_3_5_0301]: MODEL_GPT_TURBO_3_5_0301,
   [MODEL_GPT_TURBO_3_5_1106]: MODEL_GPT_TURBO_3_5_1106,
   [MODEL_GPT_4]: MODEL_GPT_4,
+  [MODEL_GPT_4_O]: MODEL_GPT_4_O,
+  [MODEL_GPT_4_MINI]: MODEL_GPT_4_MINI,
+  [MODEL_GPT_4_TURBO]: MODEL_GPT_4_TURBO,
   [MODEL_GPT_4_1106_PREVIEW]: MODEL_GPT_4_1106_PREVIEW,
   [MODEL_GPT_4_0314]: MODEL_GPT_4_0314,
   [MODEL_GPT_4_0613]: MODEL_GPT_4_0613,
   [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_2]: MODEL_GPT_DALL_E_2,
+  [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.3",
+  "version": "0.2.5",
   "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"