From 433f569e39bc3eff7b6c31386268d18d3790a997 Mon Sep 17 00:00:00 2001 From: AidanTilgner Date: Thu, 1 Feb 2024 14:28:47 -0800 Subject: [PATCH] feat: made some fixes and updates --- README.md | 110 ++++++++++++------------------------------------ main.ts | 96 ++++++++++++++++++++++++++++++++++++------ manifest.json | 2 +- utils/openai.ts | 17 ++++++-- 4 files changed, 126 insertions(+), 99 deletions(-) diff --git a/README.md b/README.md index bb0348e..110229c 100644 --- a/README.md +++ b/README.md @@ -1,96 +1,42 @@ -# Obsidian Sample Plugin +# Obsidian Autogen Plugin +The Autogen plugin allows you to create in-place generations within notes, using OpenAI's models. -This is a sample plugin for Obsidian (https://obsidian.md). +# Settings +Define your API key in the plugin settings, as well as the model to use for text generation. The `gpt-3.5-turbo` plugin is the default, due to it's low cost and very fast completions. However for more accuracy at slightly slower inference speed I'd recommend GPT-4. 32k variants of each model are also available, and allow for much larger token sizes. To learn more about tokens and specifics I'd recommend reading [OpenAI's forum](https://help.openai.com/en/articles/4936856-what-are-tokens-and-how-to-count-them) on the subject. You can also change the `Trigger Regex`, which will decide what text should be looked for and matched as a selection to be replaced. -This project uses Typescript to provide type checking and documentation. -The repo depends on the latest plugin API (obsidian.d.ts) in Typescript Definition format, which contains TSDoc comments describing what it does. +You can also modify the `Window Size`, which is different but correlated with the token limit of the selected model. The `Window Size` setting defines how many characters, not including the trigger prompt (this: @[prompt is here]), should be sent to the model. This likely won't matter for most notes, however for longer notes it's important to make sure that too many tokens aren't being sent, as this may cause errors. This setting defaults to 8k which will send _about_ 2k tokens per generation, from above and below the text. This should be enough for basic context to be sent to the model, but can be increased to about 16k on the smaller models and about 128k on the larger ones. -**Note:** The Obsidian API is still in early alpha and is subject to change at any time! +> ![warning] +> The number of tokens sent to the server will influence the price that you will pay for API usage. -This sample plugin demonstrates some of the basic functionality the plugin API can do. -- Adds a ribbon icon, which shows a Notice when clicked. -- Adds a command "Open Sample Modal" which opens a Modal. -- Adds a plugin setting tab to the settings page. -- Registers a global click event and output 'click' to the console. -- Registers a global interval which logs 'setInterval' to the console. +If you don't understand what these things mean, or you want to keep things simple, I'd recommend **sticking to the defaults**. -## First time developing plugins? -Quick starting guide for new plugin devs: +# Usage +When you're working in a note, you can use the following syntax (@[prompt]) to trigger a generation: -- Check if [someone already developed a plugin for what you want](https://obsidian.md/plugins)! There might be an existing plugin similar enough that you can partner up with. -- Make a copy of this repo as a template with the "Use this template" button (login to GitHub if you don't see it). -- Clone your repo to a local development folder. For convenience, you can place this folder in your `.obsidian/plugins/your-plugin-name` folder. -- Install NodeJS, then run `npm i` in the command line under your repo folder. -- Run `npm run dev` to compile your plugin from `main.ts` to `main.js`. -- Make changes to `main.ts` (or create new `.ts` files). Those changes should be automatically compiled into `main.js`. -- Reload Obsidian to load the new version of your plugin. -- Enable plugin in settings window. -- For updates to the Obsidian API run `npm update` in the command line under your repo folder. +```markdown +There are many classes that can be taken at Lorem Ipsum University, for example: -## Releasing new releases - -- Update your `manifest.json` with your new version number, such as `1.0.1`, and the minimum Obsidian version required for your latest release. -- Update your `versions.json` file with `"new-plugin-version": "minimum-obsidian-version"` so older versions of Obsidian can download an older version of your plugin that's compatible. -- Create new GitHub release using your new version number as the "Tag version". Use the exact version number, don't include a prefix `v`. See here for an example: https://github.com/obsidianmd/obsidian-sample-plugin/releases -- Upload the files `manifest.json`, `main.js`, `styles.css` as binary attachments. Note: The manifest.json file must be in two places, first the root path of your repository and also in the release. -- Publish the release. - -> You can simplify the version bump process by running `npm version patch`, `npm version minor` or `npm version major` after updating `minAppVersion` manually in `manifest.json`. -> The command will bump version in `manifest.json` and `package.json`, and add the entry for the new version to `versions.json` - -## Adding your plugin to the community plugin list - -- Check https://github.com/obsidianmd/obsidian-releases/blob/master/plugin-review.md -- Publish an initial version. -- Make sure you have a `README.md` file in the root of your repo. -- Make a pull request at https://github.com/obsidianmd/obsidian-releases to add your plugin. - -## How to use - -- Clone this repo. -- Make sure your NodeJS is at least v16 (`node --version`). -- `npm i` or `yarn` to install dependencies. -- `npm run dev` to start compilation in watch mode. - -## Manually installing the plugin - -- Copy over `main.js`, `styles.css`, `manifest.json` to your vault `VaultFolder/.obsidian/plugins/your-plugin-id/`. - -## Improve code quality with eslint (optional) -- [ESLint](https://eslint.org/) is a tool that analyzes your code to quickly find problems. You can run ESLint against your plugin to find common bugs and ways to improve your code. -- To use eslint with this project, make sure to install eslint from terminal: - - `npm install -g eslint` -- To use eslint to analyze this project use this command: - - `eslint main.ts` - - eslint will then create a report with suggestions for code improvement by file and line number. -- If your source code is in a folder, such as `src`, you can use eslint with this command to analyze all files in that folder: - - `eslint .\src\` - -## Funding URL - -You can include funding URLs where people who use your plugin can financially support it. - -The simple way is to set the `fundingUrl` field to your link in your `manifest.json` file: - -```json -{ - "fundingUrl": "https://buymeacoffee.com" -} +@[a table with 3 columns: id, name, description and 3 rows with dummy entries for a list of classes one could take] ``` -If you have multiple URLs, you can also do: +Then, whatever is in this selection, as well as a window of context from your note (capped at 8000 characters by default to limit token usage), will be sent to the language model of choice after a typing delay. The subsequent generation will replace your content, for example the above would be replaced by: -```json -{ - "fundingUrl": { - "Buy Me a Coffee": "https://buymeacoffee.com", - "GitHub Sponsor": "https://github.com/sponsors", - "Patreon": "https://www.patreon.com/" - } -} +```markdown +There are many classes that can be taken at Lorem Ipsum University, for example: + +| ID | Class Name | Class Description | +| ---- | ---- | ---- | +| 1 | Mathematics | This course covers foundational aspects of math | +| 2 | English Literature | Learn in-depth analysis of English literary works | +| 3 | Computer Science | Basic principles of computing and programming languages covered | ``` -## API Documentation +The main thing that is happening here is that the @[prompt] syntax is being used to trigger a replacement. -See https://github.com/obsidianmd/obsidian-api +# Timeline +Additional features may be added if requested, but the idea is to keep the functionality relatively simple. + +# Bugs, Questions, Etc. +If you have any questions or notice any unexpected behavior feel free to open an issue and I will try to reponse ASAP. \ No newline at end of file diff --git a/main.ts b/main.ts index 27e5745..71a36c6 100644 --- a/main.ts +++ b/main.ts @@ -14,11 +14,17 @@ import { getClient, getReplacement } from "utils/openai"; interface AutogenSettings { openaiApiKey: string; model: ChatCompletionCreateParamsBase["model"]; + triggerRegex: string; + windowSize: number; + typingDelay: number; } const DEFAULT_SETTINGS: AutogenSettings = { openaiApiKey: "", model: "gpt-3.5-turbo", + triggerRegex: "@\\[(.*?)\\]", + windowSize: 8000, + typingDelay: 2000, }; export default class Autogen extends Plugin { @@ -29,6 +35,7 @@ export default class Autogen extends Plugin { async onload() { await this.loadSettings(); + this.typingDelay = this.settings.typingDelay; this.registerEvent( this.app.workspace.on( @@ -59,9 +66,9 @@ export default class Autogen extends Plugin { } async showConfirmationModal(editor: Editor) { - const pattern = /@\[(.*?)\]/g; + const pattern = new RegExp(this.settings.triggerRegex, "g"); const content = editor.getValue(); - const windowSize = 5000; + const windowSize = this.settings.windowSize; const match = pattern.exec(content); @@ -78,10 +85,17 @@ export default class Autogen extends Plugin { modal.contentEl.empty(); modal.titleEl.setText("Generating replacement..."); + // put a little loading indicator in the contentEl + const loadingEl = createEl("p", { + text: "Loading...", + }); + modal.contentEl.appendChild(loadingEl); + const replacement = await this.generateReplacementText( textWindow, match[0] ); + modal.contentEl.empty(); modal.titleEl.setText("Replace selection with:"); const textEl = createEl("p", { text: replacement, @@ -90,10 +104,14 @@ export default class Autogen extends Plugin { modal.contentEl.createEl("br"); + const buttonContainer = createEl("div"); + buttonContainer.style.display = "flex"; + buttonContainer.style.justifyContent = "flex-end"; + buttonContainer.style.alignItems = "center"; + buttonContainer.style.width = "100%"; + buttonContainer.style.gap = "10px"; + const confirmButton = createEl("button", { text: "Confirm" }); - confirmButton.setCssStyles({ - marginRight: "10px", - }); const cancelButton = createEl("button", { text: "Cancel" }); confirmButton.addEventListener("click", () => { @@ -104,7 +122,10 @@ export default class Autogen extends Plugin { modal.close(); }); - modal.contentEl.appendChild(confirmButton); + buttonContainer.appendChild(cancelButton); + buttonContainer.appendChild(confirmButton); + + modal.contentEl.appendChild(buttonContainer); }; const modal = new AutogenConfirmationModal( @@ -175,17 +196,23 @@ class AutogenConfirmationModal extends Modal { const { contentEl, titleEl } = this; titleEl.setText("Replace this selection?"); + contentEl.style.whiteSpace = "pre-wrap"; + const textEl = createEl("p", { - text: this.match.replace("@[", "").replace("]", ""), + text: `"${this.match.replace("@[", "").replace("]", "")}"`, }); contentEl.appendChild(textEl); contentEl.createEl("br"); + const buttonContainer = createEl("div"); + buttonContainer.style.display = "flex"; + buttonContainer.style.justifyContent = "flex-end"; + buttonContainer.style.alignItems = "center"; + buttonContainer.style.width = "100%"; + buttonContainer.style.gap = "10px"; + const confirmButton = createEl("button", { text: "Yes" }); - confirmButton.setCssStyles({ - marginRight: "10px", - }); const cancelButton = createEl("button", { text: "No" }); confirmButton.addEventListener("click", async () => { @@ -197,8 +224,10 @@ class AutogenConfirmationModal extends Modal { this.close(); }); - contentEl.appendChild(confirmButton); - contentEl.appendChild(cancelButton); + buttonContainer.appendChild(cancelButton); + buttonContainer.appendChild(confirmButton); + + contentEl.appendChild(buttonContainer); } onClose() { @@ -271,5 +300,48 @@ class AutogenSettingTab extends PluginSettingTab { await this.plugin.saveSettings(); }); }); + + new Setting(containerEl) + .setName("Trigger Regex") + .setDesc("The regex pattern to trigger the autogen") + .addText((text) => + text + .setPlaceholder("Enter the regex pattern") + .setValue("@\\[(.*?)\\]") + .onChange(async (value) => { + this.plugin.settings.triggerRegex = value; + await this.plugin.saveSettings(); + }) + ); + + new Setting(containerEl) + .setName("Window Size") + .setDesc( + "The max number of characters, not including the prompt, to be sent for the generation. This affects token usage and performance." + ) + .addText((text) => + text + .setPlaceholder("Enter the window size") + .setValue(this.plugin.settings.windowSize.toString()) + .onChange(async (value) => { + this.plugin.settings.windowSize = parseInt(value); + await this.plugin.saveSettings(); + }) + ); + + new Setting(containerEl) + .setName("Typing Delay") + .setDesc( + "The delay in milliseconds to wait after the user stops typing before generating the replacement" + ) + .addText((text) => + text + .setPlaceholder("Enter the typing delay") + .setValue(this.plugin.settings.typingDelay.toString()) + .onChange(async (value) => { + this.plugin.settings.typingDelay = parseInt(value); + await this.plugin.saveSettings(); + }) + ); } } diff --git a/manifest.json b/manifest.json index 9243c5a..67de0b4 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "obsidian-autogen-plugin", "name": "Autogen", - "version": "1.0.0beta", + "version": "1.0.1beta", "minAppVersion": "0.15.0", "description": "In place autogeneration of content based on prompts.", "author": "Aidan Tilgner", diff --git a/utils/openai.ts b/utils/openai.ts index 888bf78..6cad736 100644 --- a/utils/openai.ts +++ b/utils/openai.ts @@ -21,12 +21,21 @@ export const getReplacement = async ( messages: [ { content: ` - You are a helpful text replacer. Given a selection of text, you are tasked with generating a replacement for the selection. + Identity: + You are a helpful text replacer. Given a selection of text, you are tasked with generating a replacement for the selection. - The selection will be shown in the following format: - @[selection] + # Context + The selection will be shown in the following format: + @[selection] - And its your job to generate what should go there in replacement, based on the user's prompt. + # Your Role + Its your job to generate what should go there in replacement, based on the user's prompt. Depending on the context, the replacement + may be a placeholder to be expanded on, or instructions for a more in-depth replacement. Generate the replacement which makes the most sense + based on a combination of the context and the selection itself. + + # Things to remember: + - Markdown is preferred + - Keep in mind the context of the full text given, but only replace the selection itself `, role: "system", },