|
1 | | -# create-svelte |
| 1 | +# image-set-tag-editor |
2 | 2 |
|
3 | | -Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). |
| 3 | +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. |
| 4 | +Caption files can have any extension, but must have the same name as the image file. |
| 5 | +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. |
4 | 6 |
|
5 | | -## Creating a project |
| 7 | + |
6 | 8 |
|
7 | | -If you're seeing this, you've probably already done this step. Congrats! |
| 9 | +This application was mainly made to edit captions for images which are used in training Stable Diffusion fine-tunes. |
| 10 | +If you need cropping, I suggest my other application [SpeedCrop](https://github.com/NetroScript/SpeedCrop). |
| 11 | +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. |
8 | 12 |
|
9 | | -```bash |
10 | | -# create a new project in the current directory |
11 | | -npm create svelte@latest |
12 | 13 |
|
13 | | -# create a new project in my-app |
14 | | -npm create svelte@latest my-app |
15 | | -``` |
| 14 | +- [image-set-tag-editor](#image-set-tag-editor) |
| 15 | + - [Installing](#installing) |
| 16 | + - [Usage](#usage) |
| 17 | + - [1. Starting Up](#1-starting-up) |
| 18 | + - [2. Navigating Through Images](#2-navigating-through-images) |
| 19 | + - [Using Keyboard:](#using-keyboard) |
| 20 | + - [Using Mouse:](#using-mouse) |
| 21 | + - [3. Editing Image Captions](#3-editing-image-captions) |
| 22 | + - [4. Saving Captions](#4-saving-captions) |
| 23 | + - [Developing](#developing) |
| 24 | + - [Prerequisites](#prerequisites) |
| 25 | + - [Setup](#setup) |
| 26 | + - [Running](#running) |
| 27 | + - [Building](#building) |
| 28 | + |
| 29 | + |
| 30 | +## Installing |
| 31 | + |
| 32 | +As an end-user, you can download the latest version from the [releases page](https://github.com/NetroScript/image-set-tag-editor/releases). |
| 33 | + |
| 34 | +If you want to build the application yourself, follow the instructions in the [development section](#developing). |
| 35 | + |
| 36 | +## Usage |
| 37 | + |
| 38 | +### 1. Starting Up |
| 39 | + |
| 40 | +When you first open the application: |
| 41 | + |
| 42 | +1. Click on the **Select Folder** button to pick a directory containing your images. The native OS folder dialog will pop up, allowing you to navigate to the desired location on your system. |
| 43 | +2. After selecting the folder, the application will load the images and display the first one in the main viewing area. |
| 44 | + |
| 45 | +### 2. Navigating Through Images |
| 46 | + |
| 47 | +There are several ways you can move between images: |
| 48 | + |
| 49 | +#### Using Keyboard: |
| 50 | + |
| 51 | +- **Left and Right Arrow Keys**: If the caption editing field is **not** in focus, simply press the left or right arrow keys on your keyboard to navigate to the previous or next image, respectively. |
| 52 | + |
| 53 | +- **Numpad Keys**: If the caption editing field **is** in focus, you can alternatively use the `Numpad 4` key to move to the previous image and `Numpad 6` key to move to the next one. |
| 54 | + |
| 55 | +#### Using Mouse: |
| 56 | + |
| 57 | +- **Image Preview Bar**: The bottom bar showcases smaller previews of all your loaded images. To navigate to a specific image, simply double-click on its preview. Images that have been viewed at least once will have a green bar at the bottom of their preview. Note: This green bar only indicates that the image was viewed, not that its caption was saved. |
| 58 | + |
| 59 | +- **Navigation Arrows**: At the top of the application, you'll find two arrow icons. Click on the left arrow to go to the previous image, and the right arrow to move to the next image. |
| 60 | + |
| 61 | +### 3. Editing Image Captions |
| 62 | + |
| 63 | +1. To edit an image caption, click on the caption field below the displayed image to bring it into focus. |
| 64 | +2. Once selected, you can type in or modify the existing caption as needed. |
| 65 | + |
| 66 | +### 4. Saving Captions |
| 67 | + |
| 68 | +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. |
| 69 | + |
| 70 | +You can also see a video of the application in action here: |
| 71 | + |
| 72 | +https://github.com/NetroScript/image-set-tag-editor/assets/18115780/d91b32d6-5059-4149-aa97-ae9c495fb47c |
16 | 73 |
|
17 | 74 | ## Developing |
18 | 75 |
|
19 | | -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: |
| 76 | +This app uses [SvelteKit](https://kit.svelte.dev/) for the UI and [tauri](https://tauri.app/) for the native wrapper and file system access. |
20 | 77 |
|
21 | | -```bash |
22 | | -npm run dev |
| 78 | +### Prerequisites |
23 | 79 |
|
24 | | -# or start the server and open the app in a new browser tab |
25 | | -npm run dev -- --open |
26 | | -``` |
| 80 | +- [Node.js](https://nodejs.org/en/) |
| 81 | +- [pnpm](https://pnpm.io/) |
| 82 | +- [Rust](https://www.rust-lang.org/tools/install) |
27 | 83 |
|
28 | | -## Building |
| 84 | +### Setup |
29 | 85 |
|
30 | | -To create a production version of your app: |
| 86 | +1. Clone the repository and navigate to the project directory. |
| 87 | +2. Install the dependencies with `pnpm install`. |
| 88 | + |
| 89 | +### Running |
| 90 | + |
| 91 | +To start a development server: |
31 | 92 |
|
32 | 93 | ```bash |
33 | | -npm run build |
| 94 | +pnpm tauri dev |
34 | 95 | ``` |
35 | 96 |
|
36 | | -You can preview the production build with `npm run preview`. |
| 97 | +### Building |
37 | 98 |
|
38 | | -> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. |
| 99 | +To create a production version of your app: |
| 100 | + |
| 101 | +```bash |
| 102 | +pnpm tauri build |
| 103 | +``` |
0 commit comments