Merge pull request #6 from The-3Labs-Team/v2

V2
The-3Labs-Team · Mar 28, 2024 · 0158669 · 0158669
2 parents 27c7cd6 + ed9d7ab
commit 0158669
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 23 deletions.
diff --git a/.github/workflows/purge-cdn.yml b/.github/workflows/purge-cdn.yml
@@ -0,0 +1,14 @@
+name: Flush Cache
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  purge-jsdelivr-cache:
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: gacts/purge-jsdelivr-cache@v1
+        with:
+          url: |
+            https://cdn.jsdelivr.net/gh/The-3Labs-Team/tinymce-chatgpt-plugin@2/dist/chatgpt.js
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# TinyMCE 6.x ChatGPT Plugin
+# TinyMCE ChatGPT Plugin
 
 <p align="center"><img src="https://github.com/the-3labs-team/tinymce-chatgpt-plugin/raw/HEAD/art/logo-tinyopen.svg" alt="Logo TinyMCE ChatGPT Plugin"></p>
 
@@ -7,7 +7,7 @@
 ![jsDelivr hits (GitHub)](https://img.shields.io/jsdelivr/gh/hy/The-3Labs-Team/tinymce-chatgpt-plugin?label=downloads)
 [![Maintainability](https://api.codeclimate.com/v1/badges/1737eafb663973324bc8/maintainability)](https://codeclimate.com/github/The-3Labs-Team/tinymce-chatgpt-plugin/maintainability)
 
-This plugin integrates ChatGPT within TinyMCE, allowing you to generate realistic and creative text with the push of a button.
+This plugin integrates ChatGPT (or your OpenAI compatible LLM) within TinyMCE, allowing you to generate realistic and creative text with the push of a button.
 
 <p align="center"><img src="https://github.com/the-3labs-team/tinymce-chatgpt-plugin/raw/HEAD/art/demo.gif" alt="TinyMCE Demo Gif"></p>
 
@@ -19,22 +19,22 @@ ChatGPT is a powerful tool that can help you improve your productivity and the q
 
 ## Features
 
-Support custom prompts defined by you!
-Generates realistic and creative text with the push of a button
-Can be used to generate a variety of text formats
-Can be used to translate languages
-Can be used to write different types of creative content
-Can be used to answer your questions in an informative way
-Anything what ChatGPT can handle
+- 🤖 OpenAI and Custom LLM OpenAI compatible
+- ⚙️ Support custom prompts defined by you!
+- 🧑‍🎨 Generates realistic and creative text with the push of a button
+- 🧬 Can be used to generate a variety of text formats
+- 🈷️ Can be used to translate languages
+- 🙋 Can be used to answer your questions in an informative way
 
 | :warning: WARNING                                                                                                                                         |
 | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Consider this plugin as a prototype and not suitable for production deployment at this time. Use it only in controlled environments and at your own risk. |
 
 ## Requirements
 
-- TinyMCE 6.0 or later
-- ChatGPT API key ([get one](https://openai.com))
+- TinyMCE 6|7 or later
+- OpenAI API key ([get one here](https://openai.com))
+- (Optional) Custom LLM API
 
 ## Installation
 
@@ -47,21 +47,23 @@ tinymce.init({
   // 1. Add the plugin to the list of external plugins
   external_plugins: {
     chatgpt:
-      "https://cdn.jsdelivr.net/gh/The-3Labs-Team/tinymce-chatgpt-plugin@1/dist/chatgpt.min.js",
+      "https://cdn.jsdelivr.net/gh/The-3Labs-Team/tinymce-chatgpt-plugin@2/dist/chatgpt.js",
   },
 
   // 2. Configure the ChatGPT plugin
   openai: {
-    apiKey: "sk-yourapikeyhere", // Your OpenAI API key
-    model: "text-davinci-003",
+    api_key: "sk-yourapikeyhere", // Your OpenAI API key
+    model: "gpt-3.5-turbo",
     temperature: 0.5,
-    maxTokens: 150,
+    max_tokens: 150,
     prompts: [
       "Translate from English to Italian",
       "Summarize",
       "Proofread",
       "Write a blog post about",
     ],
+    // Optional: Add your custom LLM
+    // baseUri: "https://your-llm-endpoint.com",
   },
 
   // 3. Add the ChatGPT button to the toolbar
@@ -78,21 +80,23 @@ If you are using our [TinyMCE Laravel Nova Package 4](https://github.com/murderc
 
     // 1. Add the plugin to the list of external plugins
     'external_plugins' => [
-        'chatgpt' => 'https://cdn.jsdelivr.net/gh/The-3Labs-Team/tinymce-chatgpt-plugin@1/dist/chatgpt.min.js'
+        'chatgpt' => 'https://cdn.jsdelivr.net/gh/The-3Labs-Team/tinymce-chatgpt-plugin@2/dist/chatgpt.js'
     ],
 
     // 2. Configure the plugin
     'openai' => [
         'api_key' => 'sk-yourapikeyhere', // Your OpenAI API key
-        'model' => 'text-davinci-003',
+        'model' => 'gpt-3.5-turbo',
         'temperature' => 0.5,
         'max_tokens' => 150,
         'prompts' => [
             'Translate from English to Italian',
             'Summarize',
             'Proofread',
             'Write a blog post about',
-        ]
+        ],
+        // Optional: Add your custom LLM
+        // 'base_uri' => 'https://your-llm-endpoint.com',
     ],
 
 ],
@@ -102,3 +106,21 @@ If you are using our [TinyMCE Laravel Nova Package 4](https://github.com/murderc
 
 //...
 ```
+
+### Breaking Changes from v1 to v2
+
+- We are using the new `/chat/completions` endpoint from OpenAI
+- The `model` default now must be a chat model, like `gpt-3.5-turbo`
+- If you want to use the old `/completion` endpoint, you can use the `baseUri` option to set your custom LLM endpoint like `https://api.openai.com/v1/completions`
+
+### Custom LLM
+
+If you have a custom LLM, you can use it by setting the `baseUri` option in the configuration. The plugin will use this endpoint to generate the text.
+
+```js
+baseUri: "https://your-llm-endpoint.com"
+```
+
+Please note that the custom LLM must be OpenAI compatible and follow the same API as OpenAI.
+Also, the custom LLM must be accessible from the client-side.
+Check the `demo-lm-studio.html` file for an example of how to use a custom LLM.
diff --git a/demo/demo-lm-studio.html b/demo/demo-lm-studio.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <script src="https://cdn.jsdelivr.net/npm/tinymce@7/tinymce.min.js" referrerpolicy="origin"></script>
+  <link href="https://cdn.jsdelivr.net/npm/tinymce@7/skins/ui/oxide/content.min.css" rel="stylesheet">
+  <script>
+    tinymce.init({
+      selector: '#mytextarea',
+      version: '6',
+
+      // 1. Add the plugin to the list of external plugins
+      external_plugins: {
+        chatgpt:
+          "http://127.0.0.1:8080/dist/chatgpt.js",
+      },
+
+      // 2. Configure the ChatGPT plugin
+      openai: {
+        api_key: "lm-studio",
+        // model: "",
+        temperature: 0.5,
+        max_tokens: 150,
+        prompts: [
+          "Translate from English to Italian",
+          "Summarize",
+          "Proofread",
+          "Write a blog post about",
+        ],
+        baseUri: "http://localhost:11434/v1/chat/completions",
+      },
+
+      // 3. Add the ChatGPT button to the toolbar
+      toolbar: ["chatgpt"],
+    });
+  </script>
+</head>
+
+<body>
+<h1>TinyMCE Quick Start Guide</h1>
+<form method="post">
+  <textarea id="mytextarea">Hello, World!</textarea>
+</form>
+</body>
+</html>
diff --git a/dist/chatgpt.js b/dist/chatgpt.js
@@ -68,7 +68,7 @@ tinymce.PluginManager.add('chatgpt', function (editor) {
           .then((res) => res.json())
           .then((data) => {
             // Define the reply
-            const reply = data.choices[0].text
+            const reply = data.choices[0].message.content
             // Insert the reply into the editor
             editor.insertContent(reply)
             // Close the dialog
@@ -87,20 +87,25 @@ tinymce.PluginManager.add('chatgpt', function (editor) {
    * @returns {Promise<Response>}
    */
   function getResponseFromOpenAI (prompt) {
-    const ChatGPT = {
+    const baseUri = OPENAI.baseUri || 'https://api.openai.com/v1/chat/completions'
+
+    const requestBody = {
       model: OPENAI.model,
-      prompt,
+      messages: [{
+        role: 'user',
+        content: prompt
+      }],
       temperature: OPENAI.temperature,
       max_tokens: OPENAI.max_tokens
     }
 
-    return fetch('https://api.openai.com/v1/completions', {
+    return fetch(baseUri, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
         Authorization: 'Bearer ' + OPENAI.api_key
       },
-      body: JSON.stringify(ChatGPT)
+      body: JSON.stringify(requestBody)
     })
   }