add information to readme.

This commit is contained in:
Jordan 2024-03-02 14:40:00 -08:00
parent 4af0874b8f
commit 1b0e4f9dd2
3 changed files with 47 additions and 4 deletions

View File

@ -1,12 +1,55 @@
# Invoke Prompt Editor POC
This is a POC (proof-of-concept) front-end for a new prompt editor for [Invoke](https://invoke-ai.github.io/).
This will envtually be merged into the Invoke code base.
## Features and Usage
There are 2 tabs shown:
- **Prompt Composer** This is where you'll add prompt items to your composition.
- **Text Prompt** This is the original native prompt of Invoke. As you edit in the **PromptComposer**, the
text will be updated.
![The prompt composer](image-1.png)
### Prompt Library
The prompt library is indicated by the ![library book](image.png) symbol. If you click in, a prompt library will open.
To insert a prompt into the composer, click the **plus icon** (+).
To add a new prompt to the library, use the fields at the bottom.
### Prompt Composer
The prompt composer as bare prompts (called **Nugget**s).
Each **Nugget** has a score, indicated by a number beside the prompt. The number relates to the number of times
`+` or `-` is added to the prompt
**Nugget**s can be grouped into components called **Operations**. To group **Nugget**s together, ensure you're in *dnd Mode*,
and move one nugget onto another.
If you want to add a nugget to an *operation*, drag it into the *operation*.
To change the *operator*, right click on the **Operation** and select a new one.
**Limitations:**
- Operations cannot be grouped into other **Operation**s.
- **Nugget**s must be grouped by category (e.g. "Vibes" can only be grouped with other "Vibes").
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app),
and uses `pnpm` for the package manager.
## Available Scripts
In the project directory, you can run:
### `npm start`
### `pnpm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
@ -14,12 +57,12 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.\
You will also see any lint errors in the console.
### `npm test`
### `pnpm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
### `pnpm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

BIN
image-1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

BIN
image.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 445 B