kwaroran 7d1e9dc9bd feat: add prompt comparison feature (#704)
# PR Checklist
- [ ] Have you checked if it works normally in all models? *Ignore this
if it doesn't use models.*
- [x] Have you checked if it works normally in all web, local, and node
hosted versions? If it doesn't, have you blocked it in those versions?
- [x] Have you added type definitions?

# Description
This PR adds a **prompt comparison feature** to the prompt preset
interface. Now, users can compare two different prompts to identify
differences.

## How to Use
1. Open the prompt preset window.
2. Click the diff button (next to the copy button) for the first prompt
to use as the baseline. The button will turn green, indicating
selection.
<img width="487" alt="c"
src="https://github.com/user-attachments/assets/c2dcf5fa-c4ee-4b3f-8e52-3f0866b12bc4"
/>

3. Click the diff button for the second prompt to compare against the
baseline. A diff view will appear.
4. Clicking the same diff button twice will clear the selection.

## Diff Display Details
- Line-level comparison
- Modified lines: blue vertical line.
- Deleted content: red text on red background with red vertical line.
- Added content: green text on light green background with green
vertical line.

<img width="597" alt="b"
src="https://github.com/user-attachments/assets/0d026e9e-a7a0-4a17-9b80-a2b57c74d7f9"
/>


- If the prompt content is identical, the following message will be
displayed at the top

<img width="600" alt="a"
src="https://github.com/user-attachments/assets/dd5f36f2-9e96-4279-9f9f-79a17f9e4c89"
/>


## Implementation Details
1. `handleDiffMode` manages prompt selection and clearing.
2. `checkDiff` compares prompts and uses `highlightChanges` to mark
differences.
3. Special characters are escaped with `escapeHtml` to ensure the text
is displayed as-is.
4. `resultHtml` is rendered via `alertMd`.

## Notes
- This feature uses the `jsdiff` library to compare prompts efficiently.
- The comparison includes the role, type1, and type2 fields (e.g., ##
system; plain; main). Even if the prompts' text is identical,
differences in these fields will be treated as a mismatch.
- The rendering process in `alertMd` appears to sanitize potentially
dangerous content. However, additional escaping is applied to ensure
that the text is displayed as-is.
- `botpreset.svelte` grew significantly due to this feature;
modularization was considered but not implemented.
- The reason for using the "Prompt Preset" window instead of the "Prompt
Preview" feature is that "Prompt Preview" displays the final form with
CBS processing applied. Even if the content in "Prompt Preview" appears
identical, the actual prompts can differ significantly.

If this feature, its implementation, or any other issue doesn't fit the
project's vision, feel free to reject this PR! Thank you for reviewing!
2025-01-06 00:10:51 +09:00
2024-12-25 22:27:48 +09:00
2023-05-07 12:41:45 +09:00
2024-09-06 02:45:49 +09:00
2023-07-07 06:30:04 +09:00
2024-01-01 23:14:58 +09:00
2024-10-13 01:29:12 +09:00
2024-08-12 23:48:14 +09:00
2023-07-08 15:24:18 +09:00
2024-01-01 23:14:58 +09:00
2024-10-13 01:29:12 +09:00
2024-09-10 22:09:58 +09:00
2024-09-10 22:09:58 +09:00
2024-12-27 05:09:32 +09:00
2023-05-07 12:41:45 +09:00
2024-10-13 01:46:57 +09:00
2024-10-25 18:11:00 +09:00
2023-05-07 12:41:45 +09:00
2025-01-02 03:02:54 +09:00

RisuAI

text

Svelte Typescript Tauri

RisuAI, or Risu for short, is a cross platform AI chatting software / web application with powerful features such as multiple API support, assets in the chat, regex functions and much more.

Screenshots

Screenshot 1 Screenshot 2
Screenshot 1 Screenshot 2
Screenshot 3 Screenshot 4

Features

  • Multiple API Supports: Supports OAI, Claude, Ooba, OpenRouter... and More!
  • Emotion Images: Display the image of the current character, according to his/her expressions!
  • Group Chats: Multiple characters in one chat.
  • Plugins: Add your features and providers, and simply share.
  • Regex Script: Modify model's output by regex, to make a custom GUI and others
  • Powerful Translators: Automatically translate the input/output, so you can roleplay without knowing model's language.
  • Lorebook: Also known as world infos or memory book, which can make character memorize more.
  • Themes: Choose it from 3 themes, Classic, WaifuLike, WaifuCut.
  • Powerful Prompting: Change the prompting order easily, Impersonate inside prompts, Use conditions, variables... and more!
  • Customizable, Friendly UI: Great Accessibility and mobile friendly
  • TTS: Use TTS to make the output text into voice.
  • Additonal Assets: Embed your images, audios and videos to bot, and make it display at chat or background!
  • And More!

You can get detailed information on https://github.com/kwaroran/RisuAI/wiki (Work in Progress)

Discord

Installation

Docker Installation

You can also run RisuAI using Docker. This method is particularly useful for web hosting.

  1. Clone the repository:

    git clone https://github.com/kwaroran/RisuAI.git
    cd RisuAI
    
  2. Build and run the Docker container:

    docker-compose up -d
    
  3. Access RisuAI at http://localhost:6001 in your web browser.

Description
No description provided
Readme 62 MiB
Languages
TypeScript 58.9%
Svelte 35.1%
JavaScript 4.4%
Rust 0.5%
Lua 0.3%
Other 0.7%