From 0248b9f68a7288de45ad620261b26498e36fd504 Mon Sep 17 00:00:00 2001 From: Stefano Novelli Date: Thu, 28 Mar 2024 10:40:09 +0100 Subject: [PATCH 1/9] Updated README with OpenAI and Custom LLM integration, enhanced features, and plugin configurations. --- README.md | 35 +++++++++++++++++++---------------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 2b3eda3..ced886f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# TinyMCE 6.x ChatGPT Plugin +# TinyMCE ChatGPT Plugin

Logo TinyMCE ChatGPT Plugin

@@ -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.

TinyMCE Demo Gif

@@ -19,13 +19,12 @@ 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 | | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -33,7 +32,7 @@ Anything what ChatGPT can handle ## Requirements -- TinyMCE 6.0 or later +- TinyMCE 6.0 or 7.8 or later - ChatGPT API key ([get one](https://openai.com)) ## Installation @@ -47,13 +46,13 @@ 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.min.js", }, // 2. Configure the ChatGPT plugin - chatgpt: { + openai: { apiKey: "sk-yourapikeyhere", // Your OpenAI API key - model: "text-davinci-003", + model: "gpt-3.5-turbo", temperature: 0.5, maxTokens: 150, prompts: [ @@ -62,6 +61,8 @@ tinymce.init({ "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,13 +79,13 @@ 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.min.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' => [ @@ -92,7 +93,9 @@ If you are using our [TinyMCE Laravel Nova Package 4](https://github.com/murderc 'Summarize', 'Proofread', 'Write a blog post about', - ] + ], + // Optional: Add your custom LLM + // 'base_uri' => 'https://your-llm-endpoint.com', ], ], From 67435906c35fa6eeaf54602832e64590211174dc Mon Sep 17 00:00:00 2001 From: Stefano Novelli Date: Thu, 28 Mar 2024 10:40:21 +0100 Subject: [PATCH 2/9] Add demo script --- demo/index.html | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 demo/index.html diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..5b281c6 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,47 @@ + + + + + + + + + + + + +

TinyMCE Quick Start Guide

+
+ +
+ + From f2ec6ffd78cf4216ef38e0a984aa99f379fa1d98 Mon Sep 17 00:00:00 2001 From: Stefano Novelli Date: Thu, 28 Mar 2024 10:40:48 +0100 Subject: [PATCH 3/9] OpenAI + Custom LLM, chat model support --- dist/chatgpt.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/dist/chatgpt.js b/dist/chatgpt.js index 05164f0..95f48cd 100644 --- 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} */ 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) }) } From a857ec7e939ecc914101fecc963908f91f3f8087 Mon Sep 17 00:00:00 2001 From: Stefano Novelli Date: Thu, 28 Mar 2024 10:43:13 +0100 Subject: [PATCH 4/9] Updated README.md to clarify required TinyMCE versions and provide link for obtaining OpenAI API key. Also added mention of optional Custom LLM API. --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ced886f..f08b4d0 100644 --- a/README.md +++ b/README.md @@ -32,8 +32,9 @@ ChatGPT is a powerful tool that can help you improve your productivity and the q ## Requirements -- TinyMCE 6.0 or 7.8 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 From f1cabf7fbf182538ab4e4fadf0b82c32add3f652 Mon Sep 17 00:00:00 2001 From: Stefano Novelli Date: Thu, 28 Mar 2024 11:16:45 +0100 Subject: [PATCH 5/9] Add auto flush cdn cache --- .github/workflows/purge-cdn.yml | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 .github/workflows/purge-cdn.yml diff --git a/.github/workflows/purge-cdn.yml b/.github/workflows/purge-cdn.yml new file mode 100644 index 0000000..dfb915d --- /dev/null +++ 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 From dd078aa4b8e76add08fd7c69df05fdbec40f564a Mon Sep 17 00:00:00 2001 From: Stefano Novelli Date: Thu, 28 Mar 2024 11:16:59 +0100 Subject: [PATCH 6/9] Remove min js --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f08b4d0..473915f 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ 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@2/dist/chatgpt.min.js", + "https://cdn.jsdelivr.net/gh/The-3Labs-Team/tinymce-chatgpt-plugin@2/dist/chatgpt.js", }, // 2. Configure the ChatGPT plugin @@ -80,7 +80,7 @@ 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@2/dist/chatgpt.min.js' + 'chatgpt' => 'https://cdn.jsdelivr.net/gh/The-3Labs-Team/tinymce-chatgpt-plugin@2/dist/chatgpt.js' ], // 2. Configure the plugin From 8ea714367d50e283e294432c55d14b91b8ae39e6 Mon Sep 17 00:00:00 2001 From: Stefano Novelli Date: Thu, 28 Mar 2024 11:19:26 +0100 Subject: [PATCH 7/9] Add breaking changes notes from v1 to v2 --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 473915f..67b51cc 100644 --- a/README.md +++ b/README.md @@ -106,3 +106,9 @@ 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` From cd263674de3740995160852ec4492a4f554a7c01 Mon Sep 17 00:00:00 2001 From: Stefano Novelli Date: Thu, 28 Mar 2024 11:26:45 +0100 Subject: [PATCH 8/9] Fix JS config --- README.md | 4 ++-- demo/index.html | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 67b51cc..471396d 100644 --- a/README.md +++ b/README.md @@ -52,10 +52,10 @@ tinymce.init({ // 2. Configure the ChatGPT plugin openai: { - apiKey: "sk-yourapikeyhere", // Your OpenAI API key + 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", diff --git a/demo/index.html b/demo/index.html index 5b281c6..34caea1 100644 --- a/demo/index.html +++ b/demo/index.html @@ -19,10 +19,10 @@ // 2. Configure the ChatGPT plugin openai: { - apiKey: "sk-yourapikeyhere", // Your OpenAI API key - model: "text-davinci-003", + api_key: "sk-", // Your OpenAI API key + model: "gpt-3.5-turbo", temperature: 0.5, - maxTokens: 150, + max_tokens: 150, prompts: [ "Translate from English to Italian", "Summarize", From 220c2f928522939f77e67d20b4c6031085e8aba8 Mon Sep 17 00:00:00 2001 From: Stefano Novelli Date: Thu, 28 Mar 2024 11:44:41 +0100 Subject: [PATCH 9/9] Add custom LLM info --- README.md | 12 ++++++++++++ demo/{index.html => demo-lm-studio.html} | 4 ++-- 2 files changed, 14 insertions(+), 2 deletions(-) rename demo/{index.html => demo-lm-studio.html} (93%) diff --git a/README.md b/README.md index 471396d..3ba1bb8 100644 --- a/README.md +++ b/README.md @@ -112,3 +112,15 @@ If you are using our [TinyMCE Laravel Nova Package 4](https://github.com/murderc - 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/index.html b/demo/demo-lm-studio.html similarity index 93% rename from demo/index.html rename to demo/demo-lm-studio.html index 34caea1..08b16da 100644 --- a/demo/index.html +++ b/demo/demo-lm-studio.html @@ -19,8 +19,8 @@ // 2. Configure the ChatGPT plugin openai: { - api_key: "sk-", // Your OpenAI API key - model: "gpt-3.5-turbo", + api_key: "lm-studio", + // model: "", temperature: 0.5, max_tokens: 150, prompts: [