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 # 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 ## Available Scripts
In the project directory, you can run: In the project directory, you can run:
### `npm start` ### `pnpm start`
Runs the app in the development mode.\ Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 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.\ The page will reload if you make edits.\
You will also see any lint errors in the console. You will also see any lint errors in the console.
### `npm test` ### `pnpm test`
Launches the test runner in the interactive watch mode.\ 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. 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.\ Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance. 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