Added a diff view to show the changes made by the AI

2025-04-28 15:39:46 +00:00 · 2024-08-12 20:29:03 +02:00 · 2024-08-12 20:29:03 +02:00 · 0e90bbd1e2
commit 0e90bbd1e2
parent 8db2bba1fc
8 changed files with 55 additions and 3 deletions
--- a/Studio/Components/App.razor
+++ b/Studio/Components/App.razor
@ -13,6 +13,7 @@
    <link href="system/MudBlazor.Markdown/MudBlazor.Markdown.min.css" rel="stylesheet" />
    <link href="app.css" rel="stylesheet" />
    <HeadOutlet/>
+    <script src="diff.js"></script>
 </head>

 <body style="overflow: hidden;">
--- a/Studio/Components/AssistantBase.razor.cs
+++ b/Studio/Components/AssistantBase.razor.cs
@ -18,6 +18,12 @@ public abstract partial class AssistantBase : ComponentBase
    [Inject]
    protected ThreadSafeRandom RNG { get; init; } = null!;
    
+    [Inject]
+    protected ISnackbar Snackbar { get; init; } = null!;
+    
+    [Inject]
+    protected Rust Rust { get; init; } = null!;
+    
    internal const string AFTER_RESULT_DIV_ID = "afterAssistantResult";
    internal const string ASSISTANT_RESULT_DIV_ID = "assistantResult";
    
--- a/Studio/Components/Pages/About.razor
+++ b/Studio/Components/Pages/About.razor
@ -49,6 +49,7 @@
                <ThirdPartyComponent Name="flexi_logger" Developer="emabee & Open Source Community" LicenseName="MIT & Apache-2.0" LicenseUrl="https://github.com/emabee/flexi_logger" RepositoryUrl="https://github.com/emabee/flexi_logger" UseCase="This Rust library is used to output the app's messages to the terminal. This is helpful during development and troubleshooting. This feature is initially invisible; when the app is started via the terminal, the messages become visible."/>
                <ThirdPartyComponent Name="HtmlAgilityPack" Developer="ZZZ Projects & Open Source Community" LicenseName="MIT" LicenseUrl="https://github.com/zzzprojects/html-agility-pack/blob/master/LICENSE" RepositoryUrl="https://github.com/zzzprojects/html-agility-pack" UseCase="We use the HtmlAgilityPack to extract content from the web. This is necessary, e.g., when you provide a URL as input for an assistant."/>
                <ThirdPartyComponent Name="ReverseMarkdown" Developer="Babu Annamalai & Open Source Community" LicenseName="MIT" LicenseUrl="https://github.com/mysticmind/reversemarkdown-net/blob/master/LICENSE" RepositoryUrl="https://github.com/mysticmind/reversemarkdown-net" UseCase="This library is used to convert HTML to Markdown. This is necessary, e.g., when you provide a URL as input for an assistant."/>
+                <ThirdPartyComponent Name="wikEd diff" Developer="Cacycle & Open Source Community" LicenseName="None (public domain)" LicenseUrl="https://en.wikipedia.org/wiki/User:Cacycle/diff#License" RepositoryUrl="https://en.wikipedia.org/wiki/User:Cacycle/diff" UseCase="This library is used to display the differences between two texts. This is necessary, e.g., for the grammar and spelling assistant."/>
            </MudGrid>
        </ExpansionPanel>
        <ExpansionPanel HeaderIcon="@Icons.Material.Filled.Verified" HeaderText="License: FSL-1.1-MIT">
--- a/Studio/Components/Pages/GrammarSpelling/AssistantGrammarSpelling.razor.cs
+++ b/Studio/Components/Pages/GrammarSpelling/AssistantGrammarSpelling.razor.cs
@ -21,12 +21,17 @@ public partial class AssistantGrammarSpelling : AssistantBaseCore
        you return the text unchanged.
        """;

-    protected override bool ShowResult => true;
+    protected override bool ShowResult => false;
+    
+    protected override IReadOnlyList<ButtonData> FooterButtons => new[]
+    {
+        new ButtonData("Copy corrected text", Icons.Material.Filled.ContentCopy, Color.Default, string.Empty, this.CopyToClipboard),
+    };

-    private string originalText = string.Empty;
    private string inputText = string.Empty;
    private CommonLanguages selectedTargetLanguage;
    private string customTargetLanguage = string.Empty;
+    private string correctedText = string.Empty;

    private string? ValidateText(string text)
    {
@ -68,6 +73,12 @@ public partial class AssistantGrammarSpelling : AssistantBaseCore
        this.CreateChatThread();
        var time = this.AddUserRequest(this.inputText);
        
-        await this.AddAIResponseAsync(time);
+        this.correctedText = await this.AddAIResponseAsync(time);
+        await this.JsRuntime.GenerateAndShowDiff(this.inputText, this.correctedText);
+    }
+    
+    private async Task CopyToClipboard()
+    {
+        await this.Rust.CopyText2Clipboard(this.JsRuntime, this.Snackbar, this.correctedText);
    }
 }
--- a/Studio/Tools/JsRuntimeExtensions.cs
+++ b/Studio/Tools/JsRuntimeExtensions.cs
@ -0,0 +1,11 @@
+using AIStudio.Components;
+
+namespace AIStudio.Tools;
+
+public static class JsRuntimeExtensions
+{
+    public static async Task GenerateAndShowDiff(this IJSRuntime jsRuntime, string text1, string text2)
+    {
+        await jsRuntime.InvokeVoidAsync("generateDiff", text1, text2, AssistantBase.ASSISTANT_RESULT_DIV_ID, AssistantBase.AFTER_RESULT_DIV_ID);
+    }
+}
--- a/Studio/wwwroot/app.js
+++ b/Studio/wwwroot/app.js
@ -0,0 +1,19 @@
+window.generateDiff = function (text1, text2, divDiff, divLegend) {
+    let wikEdDiff = new WikEdDiff();
+    let targetDiv = document.getElementById(divDiff)
+    targetDiv.innerHTML = wikEdDiff.diff(text1, text2);
+    targetDiv.classList.add('mud-typography-body1');
+    
+    let legend = document.getElementById(divLegend);
+    legend.innerHTML = `
+    <div class="legend mt-2">
+        <h3>Legend</h3>
+        <ul class="mt-2">
+            <li><span class="wikEdDiffMarkRight" title="Moved block" id="wikEdDiffMark999" onmouseover="wikEdDiffBlockHandler(undefined, this, 'mouseover');"></span> Original block position</li>
+            <li><span title="+" class="wikEdDiffInsert">Inserted<span class="wikEdDiffSpace"><span class="wikEdDiffSpaceSymbol"></span> </span>text<span class="wikEdDiffNewline"> </span></span></li>
+            <li><span title="−" class="wikEdDiffDelete">Deleted<span class="wikEdDiffSpace"><span class="wikEdDiffSpaceSymbol"></span> </span>text<span class="wikEdDiffNewline"> </span></span></li>
+            <li><span class="wikEdDiffBlockLeft" title="◀" id="wikEdDiffBlock999" onmouseover="wikEdDiffBlockHandler(undefined, this, 'mouseover');">Moved<span class="wikEdDiffSpace"><span class="wikEdDiffSpaceSymbol"></span> </span>block<span class="wikEdDiffNewline"> </span></span></li>
+        </ul>
+    </div>
+    `;
+}
--- a/Studio/wwwroot/changelog/v0.8.8.md
+++ b/Studio/wwwroot/changelog/v0.8.8.md
@ -1,3 +1,4 @@
 # v0.8.8, build 170
 - Added a grammar and spell checker assistant
+- Improved all assistants by showing a progress bar while processing
 - Upgraded MudBlazor to v7.6.0
--- a/Studio/wwwroot/diff.js
+++ b/Studio/wwwroot/diff.js