v0.1.2

### Added * Calculate CLIP token count for the current caption * Add custom CSS by pressing `Alt + C` ### Changed * Correct tag filtering with only excluding tags * Fixed removal and detection of tags (do not include seperator in tag name, instead operate on tag list) * Bumped package versions (both NodeJS and Rust)
NetroScript · Dec 22, 2023 · 4fcd0f2 · 4fcd0f2
1 parent 74fc9ab
commit 4fcd0f2
Show file tree

Hide file tree

Showing 13 changed files with 932 additions and 514 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,17 @@
+## 0.1.2
+
+### Added
+
+* Calculate CLIP token count for the current caption
+* Add custom CSS by pressing `Alt + C`
+
+### Changed
+
+* Correct tag filtering with only excluding tags
+* Fixed removal and detection of tags (do not include seperator in tag name, instead operate on tag list)
+* Bumped package versions (both NodeJS and Rust)
+
+
 ## 0.1.1
 
 * Added automatic counting and adding and removing of individual reoccuring tags

diff --git a/README.md b/README.md
@@ -1,14 +1,16 @@
 # image-set-tag-editor
 
-This is a UI application which allows you to quickly edit a caption file for a image. You can open a folder, get a preview of the image and then can quickly skip through the images and edit the captions for each image. 
+This is a UI application which allows you to quickly edit a caption file for an image. You can open a folder, get a preview of the image and then can quickly skip through the images and edit the captions for each image. 
 Caption files can have any extension, but must have the same name as the image file.
 If you have a folder with different types of captions (`.txt` and `.caption` for example), the extension which occurs most often will be chosen when saving the changes.
 
-![Code_-_Insiders_iOD0uIeWcG](https://github.com/NetroScript/image-set-tag-editor/assets/18115780/575bb2c6-889c-4f65-83d1-34916e4a8f71)
+![Application Preview](https://github.com/NetroScript/image-set-tag-editor/assets/18115780/fb85cefb-7298-4807-8d1c-9e09ce22c9d4)
+
 
 This application was mainly made to edit captions for images which are used in training Stable Diffusion fine-tunes.
 If you need cropping, I suggest my other application [SpeedCrop](https://github.com/NetroScript/SpeedCrop).
 Also it is not possible to bulk edit captions with this application. This is mostly for a final manual review step to check individual captions together with the image in a preview, and change them if necessary.
+There is a rough estimate of token count being shown using CLIP, however as each diffusion model has its own tokenizer, this is not 100% accurate. It is just a rough estimate to see if the caption is too long or too short. ([Tokenizer used](https://github.com/instant-labs/instant-clip-tokenizer))
 
 
 - [image-set-tag-editor](#image-set-tag-editor)
@@ -20,6 +22,9 @@ Also it is not possible to bulk edit captions with this application. This is mos
       - [Using Mouse:](#using-mouse)
     - [3. Editing Image Captions](#3-editing-image-captions)
     - [4. Saving Captions](#4-saving-captions)
+  - [Advanced Usage](#advanced-usage)
+    - [Filtering Tags](#filtering-tags)
+    - [Custom CSS](#custom-css)
   - [Developing](#developing)
     - [Prerequisites](#prerequisites)
     - [Setup](#setup)
@@ -63,13 +68,82 @@ There are several ways you can move between images:
 1. To edit an image caption, click on the caption field below the displayed image to bring it into focus.
 2. Once selected, you can type in or modify the existing caption as needed.
 
+On the left side there will be an overview with all tags in the current image data set. By checking or removing the checkmark, the corresponding tags will either be added or removed from the current image. Tags are prepended, however it does not matter where they are for removal.
+
+The count of each tag only updates when you change to another image.
+
 ### 4. Saving Captions
 
 To save your edited captions, click on the **Save** button located in the bottom left corner of the application. This will overwrite (or create) all captions with the current data. Ensure you've made all necessary changes before saving.
 
 You can also see a video of the application in action here:
 
-https://github.com/NetroScript/image-set-tag-editor/assets/18115780/d91b32d6-5059-4149-aa97-ae9c495fb47c
+https://github.com/NetroScript/image-set-tag-editor/assets/18115780/e4a1e39d-183c-429e-a7f2-d6d0478ed139
+
+## Advanced Usage
+
+### Filtering Tags
+
+The left side with tags allows quickly adding and removing tags from the currently open image.
+However, only the 50 most frequent tags are shown there. For this reason, it is to show a subset of tags, by using certain filtering options.
+
+Writing any text will filter the tags using just a simple string search (case sensitive).
+Entering `red` for example will only show all tags which contain the string `red` in them.
+Should you want multiple tags, you can separate them with `|` (pipe).
+So if you want to see for example all tags which contain tree, grass, building or sky, you can enter `tree|grass|building|sky`.
+
+It is also possible to exclude tags from the results by prepending a `-` (minus) to the tag.
+If you want to see all tags which contain tree, grass building or sky, but no tags which contain car, you can enter `tree|grass|building|sky|-car`.
+
+The *"dataset"* I use for the screenshots for example is just the generated descriptions from Stable Diffusion images. So to not show any generation settings in the text, I can filter using the following string:
+
+`-Seed|-Negative|-CFG|-Size|-Sampler|-Model|-ENSD`
+
+If you need even more complex filtering, it is possible to use regex. To do so, you can either prepend `^` (caret) to the search string, or append `$` (dollar sign) to it. This will then be parsed as regex instead of a simple string search.
+
+So to exclude all tags which start with a `(` for example, you can enter `-^\(`. To take this apart:
+
+* `-` will exclude the results
+* `^` will tell the application to parse the search string as regex
+* `\(` will match a literal `(`
+
+
+### Custom CSS
+
+It is possible to insert custom CSS into the application. This can be done by pressing `Alt + C`. This will open a dialog where you can enter your custom CSS. This CSS will be applied to the whole application, so you can change the background color for example. However the most useful use is to highlight certain tags which are used, this works, as each tag on the left side has a `data-tag` attribute, which contains the tag itself. So you can use this to highlight certain tags.
+
+An example CSS would be the following:
+
+```css
+/* If the tag contains the keyword red, the tag font color will be red */ 
+.tag-display[data-tag*='red'] {
+		color: rgb(255, 50, 5);
+}
+
+/* Every tag which has a ( has a light white background. */
+.tag-display[data-tag*='('] {
+		background: rgba(255, 255, 255, 0.1);
+}
+
+/* Every tag starting with ( has a strong white background. */
+.tag-display[data-tag^='('] {
+		background: rgba(255, 255, 255, 0.3);
+}
+```
+
+This would look like the following:
+
+Pressing `Alt + C`:
+
+![image-set-tag-editor_ibLtOf19WM](https://github.com/NetroScript/image-set-tag-editor/assets/18115780/afc7ce21-1d64-4b0f-a3a9-15b0b22a8022)
+
+After entering the CSS shown above, the left side will look like this:
+
+<p align="center">
+<img src="https://github.com/NetroScript/image-set-tag-editor/assets/18115780/4cc17084-d57c-48dd-8c43-63e6a7a5964b">
+</p>
+
+**Note:** The custom CSS is not saved, so if you close the application, you will have to re-enter it.
 
 ## Developing
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "image-set-tag-editor",
-	"version": "0.1.1",
+	"version": "0.1.2",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",