mirror of
https://github.com/MindWorkAI/AI-Studio.git
synced 2025-08-20 20:12:57 +00:00
WIP: Adjusted styling for user experience and added installation with installers; Added async loading of license text
This commit is contained in:
krut_ni
parent
49dc84897b
commit
cecf777827
@ -1,4 +1,4 @@
|
|||||||
<MudTabs @bind-ActivePanelIndex="selectedIndex" PanelClass="code-block">
|
<MudTabs @bind-ActivePanelIndex="selectedIndex" PanelClass="code-block" MinimumTabWidth="30px">
|
||||||
@foreach (var block in blocks)
|
@foreach (var block in blocks)
|
||||||
{
|
{
|
||||||
<MudTabPanel Text="@block.Title">
|
<MudTabPanel Text="@block.Title">
|
||||||
|
|||||||
@ -1,106 +1,157 @@
|
|||||||
@using ReverseMarkdown.Converters
|
<MudDialog>
|
||||||
<MudDialog>
|
|
||||||
<TitleContent>
|
<TitleContent>
|
||||||
Install Pandoc
|
Install Pandoc
|
||||||
</TitleContent>
|
</TitleContent>
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
@if (this.showInstallPage)
|
@if (this.showInstallPage)
|
||||||
{
|
{
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<MudText Class="mb-2">
|
<MudText Class="mb-2">
|
||||||
AI Studio relies on the third-party app <strong>Pandoc</strong> to process and retrieve data from local
|
AI Studio relies on the third-party app <strong>Pandoc</strong> to process and retrieve data from
|
||||||
Office files (ex. <strong>Word</strong>) and later other text formats like LaTeX.
|
local
|
||||||
</MudText>
|
Office files (ex. <strong>Word</strong>) and later other text formats like LaTeX.
|
||||||
<MudText>
|
|
||||||
Unfortunately Pandocs GPL license is not compatible with AI Studios licences.
|
|
||||||
Therefore you have to accept Pandocs GPL license before we can download and install Pandoc automatically for you (recommended).
|
|
||||||
However you can download it yourself manually with the instructions below.
|
|
||||||
</MudText>
|
|
||||||
</div>
|
|
||||||
<MudExpansionPanels Class="mb-3" MultiExpansion="@false">
|
|
||||||
<ExpansionPanel HeaderIcon="@Icons.Material.Filled.AutoFixHigh" HeaderText="Automatic Installation">
|
|
||||||
<MudText Typo="Typo.caption">
|
|
||||||
Pandoc is distributed under the <MudLink Typo="Typo.caption" Href="https://github.com/jgm/pandoc/blob/main/COPYRIGHT" Target="_blank">GNU General Public License v2 (GPL)</MudLink>.
|
|
||||||
By clicking "Accept GPL and Install", you agree to the terms of the GPL license <br/> and Pandoc will be installed automatically for you.<br/>
|
|
||||||
</MudText>
|
</MudText>
|
||||||
<MudButton Color="Color.Primary" Class="mt-4" Variant="Variant.Filled" Size="Size.Small" StartIcon="@Icons.Material.Filled.InstallDesktop">Accept GPL and Install</MudButton>
|
|
||||||
</ExpansionPanel>
|
|
||||||
<ExpansionPanel HeaderIcon="@Icons.Material.Filled.Build" HeaderText="Manual Installation">
|
|
||||||
<MudText>
|
<MudText>
|
||||||
If you prefer to install Pandoc yourself, please follow these steps:
|
Unfortunately Pandocs GPL license is not compatible with AI Studios licences.
|
||||||
|
Therefore you have to accept Pandocs GPL license before we can download and install Pandoc
|
||||||
|
automatically for you (recommended).
|
||||||
|
However you can download it yourself manually with the instructions below.
|
||||||
</MudText>
|
</MudText>
|
||||||
<MudList T="string">
|
<MudExpansionPanels>
|
||||||
<MudListItem T="string">
|
<MudExpansionPanel Text="GNU General Public License v2 (GPL)" MaxHeight="300" ExpandedChanged="OnExpandedChanged">
|
||||||
Accept the terms of the GPL license and download the latest archive with the button below.
|
@if (this.isLoading)
|
||||||
</MudListItem>
|
{
|
||||||
<MudListItem T="string">
|
<MudSkeleton />
|
||||||
Extract the archive to a folder of your choice.
|
<MudSkeleton Animation="Animation.Wave" />
|
||||||
<CodeTabs>
|
<MudSkeleton />
|
||||||
<CodeBlock Title="Windows">C:\Users\%USERNAME%\pandoc</CodeBlock>
|
}
|
||||||
<CodeBlock Title="Mac OS">/usr/local/bin/pandoc</CodeBlock>
|
else if (!string.IsNullOrEmpty(this.licenseText))
|
||||||
<CodeBlock Title="Linux">/usr/local/bin/pandoc</CodeBlock>
|
{
|
||||||
</CodeTabs>
|
<div>@this.licenseText</div>
|
||||||
</MudListItem>
|
}
|
||||||
<MudListItem T="string">
|
</MudExpansionPanel>
|
||||||
Open the folder and copy the full path to the <code>pandoc.exe</code> file into you clipboard.
|
</MudExpansionPanels>
|
||||||
<CodeTabs>
|
</div>
|
||||||
<CodeBlock Title="Windows">C:\Users\%USERNAME%\pandoc\pandoc-3.7.0-windows-x86_64\pandoc-3.7.0</CodeBlock>
|
<MudExpansionPanels Class="mb-3" MultiExpansion="@false" Outlined="false" Elevation="0">
|
||||||
<CodeBlock Title="Mac OS">/usr/local/bin/pandoc/pandoc-3.7.0-x86_64-macOS/pandoc-3.7.0</CodeBlock>
|
<ExpansionPanel HeaderIcon="@Icons.Material.Filled.AutoFixHigh" HeaderText="Automatic Installation" IsExpanded="true">
|
||||||
<CodeBlock Title="Linux">/usr/local/bin/pandoc/pandoc-3.7.0-linux-amd64/pandoc-3.7.0</CodeBlock>
|
<MudText Typo="Typo.caption">
|
||||||
</CodeTabs>
|
Pandoc is distributed under the
|
||||||
</MudListItem>
|
<MudLink Typo="Typo.caption" Href="https://github.com/jgm/pandoc/blob/main/COPYRIGHT"
|
||||||
<MudListItem T="string">
|
Target="_blank">GNU General Public License v2 (GPL)
|
||||||
Add the copied path to your systems environment variables and check the installation by typing
|
</MudLink>
|
||||||
<CodeBlock IsInline="@true">pandoc --version</CodeBlock> into your command line interface.
|
.
|
||||||
<CodeTabs>
|
By clicking "Accept GPL and Install", you agree to the terms of the GPL license <br/> and Pandoc
|
||||||
<CodeBlock Title="Windows">pandoc.exe --version<br/>pandoc.exe 3.7.0</CodeBlock>
|
will be installed automatically for you.<br/>
|
||||||
<CodeBlock Title="Mac OS">pandoc --version<br/>pandoc.exe 3.7.0</CodeBlock>
|
</MudText>
|
||||||
<CodeBlock Title="Linux">pandoc --version<br/>pandoc.exe 3.7.0</CodeBlock>
|
<MudButton Color="Color.Primary" Class="mt-4" Variant="Variant.Filled" Size="Size.Small"
|
||||||
</CodeTabs>
|
StartIcon="@Icons.Material.Filled.InstallDesktop">Accept GPL and Install
|
||||||
</MudListItem>
|
</MudButton>
|
||||||
</MudList>
|
</ExpansionPanel>
|
||||||
<MudText Class="mb-3" Typo="Typo.caption">
|
<ExpansionPanel HeaderIcon="@Icons.Material.Filled.Build" HeaderText="Manual Installation">
|
||||||
Pandoc is distributed under the <MudLink Typo="Typo.caption" Href="https://github.com/jgm/pandoc/blob/main/COPYRIGHT" Target="_blank">GNU General Public License v2 (GPL)</MudLink>.
|
<MudText Class="mb-2">
|
||||||
By clicking "Accept GPL and Download", you agree to the terms of the GPL license.
|
If you prefer to install Pandoc yourself, please follow one of these two guides. Installers are only available for Windows and Mac.
|
||||||
</MudText>
|
</MudText>
|
||||||
<MudButton Color="Color.Secondary" Class="mt-4" Variant="Variant.Filled" Size="Size.Small" StartIcon="@Icons.Material.Filled.Downloading">Accept GPL and Download</MudButton>
|
<MudExpansionPanels Outlined="false" Elevation="0">
|
||||||
</ExpansionPanel>
|
<ExpansionPanel HeaderIcon="@Icons.Material.Filled.AppRegistration" HeaderText="Download with Installer" IsExpanded="true">
|
||||||
</MudExpansionPanels>
|
<MudList T="string">
|
||||||
<div class="mt-2">
|
<MudListItem T="string" Class="mb-4">
|
||||||
<MudButton Variant="Variant.Text" Color="Color.Default">Reject GPL licence</MudButton>
|
Accept the terms of the GPL license and download the latest installer with the download button below.
|
||||||
</div>
|
<CodeTabs>
|
||||||
|
<CodeBlock Title="Windows">pandoc-3.7.0-windows-x86_64.msi</CodeBlock>
|
||||||
|
<CodeBlock Title="Mac OS x86">pandoc-3.7.0.1-x86_64-macOS.pkg</CodeBlock>
|
||||||
|
<CodeBlock Title="Mac OS ARM">pandoc-3.7.0.1-arm64-macOS.pkg</CodeBlock>
|
||||||
|
</CodeTabs>
|
||||||
|
</MudListItem>
|
||||||
|
<MudListItem T="string">
|
||||||
|
Execute the installer and follow the instructions.
|
||||||
|
</MudListItem>
|
||||||
|
</MudList>
|
||||||
|
</ExpansionPanel>
|
||||||
|
<ExpansionPanel HeaderIcon="@Icons.Material.Outlined.Archive" HeaderText="Download with archive">
|
||||||
|
<MudList T="string">
|
||||||
|
<MudListItem T="string" Class="mb-4">
|
||||||
|
Accept the terms of the GPL license and download the latest archive with the download button below.
|
||||||
|
</MudListItem>
|
||||||
|
<MudListItem T="string" Class="mb-4">
|
||||||
|
Extract the archive to a folder of your choice.
|
||||||
|
<CodeTabs>
|
||||||
|
<CodeBlock Title="Windows">C:\Users\%USERNAME%\pandoc</CodeBlock>
|
||||||
|
<CodeBlock Title="Mac OS">/usr/local/bin/pandoc</CodeBlock>
|
||||||
|
<CodeBlock Title="Linux">/usr/local/bin/pandoc</CodeBlock>
|
||||||
|
</CodeTabs>
|
||||||
|
</MudListItem>
|
||||||
|
<MudListItem T="string" Class="mb-4">
|
||||||
|
Open the folder and copy the full path to the <code>pandoc.exe</code> file into you
|
||||||
|
clipboard.
|
||||||
|
<CodeTabs>
|
||||||
|
<CodeBlock Title="Windows">C:\Users\%USERNAME%\pandoc\pandoc-3.7.0-windows-x86_64\pandoc-3.7.0</CodeBlock>
|
||||||
|
<CodeBlock Title="Mac OS">/usr/local/bin/pandoc/pandoc-3.7.0-x86_64-macOS/pandoc-3.7.0</CodeBlock>
|
||||||
|
<CodeBlock Title="Linux">/usr/local/bin/pandoc/pandoc-3.7.0-linux-amd64/pandoc-3.7.0</CodeBlock>
|
||||||
|
</CodeTabs>
|
||||||
|
</MudListItem>
|
||||||
|
<MudListItem T="string">
|
||||||
|
Add the copied path to your systems environment variables and check the installation
|
||||||
|
by typing
|
||||||
|
<CodeBlock IsInline="@true">pandoc --version</CodeBlock>
|
||||||
|
into your command line interface.
|
||||||
|
<CodeTabs>
|
||||||
|
<CodeBlock Title="Windows">> pandoc.exe --version<br/>> pandoc.exe 3.7.0</CodeBlock>
|
||||||
|
<CodeBlock Title="Mac OS">> pandoc --version<br/>> pandoc.exe 3.7.0</CodeBlock>
|
||||||
|
<CodeBlock Title="Linux">> pandoc --version<br/>> pandoc.exe 3.7.0</CodeBlock>
|
||||||
|
</CodeTabs>
|
||||||
|
</MudListItem>
|
||||||
|
</MudList>
|
||||||
|
<MudText Class="mb-3" Typo="Typo.caption">
|
||||||
|
Pandoc is distributed under the
|
||||||
|
<MudLink Typo="Typo.caption" Href="https://github.com/jgm/pandoc/blob/main/COPYRIGHT"
|
||||||
|
Target="_blank">GNU General Public License v2 (GPL)
|
||||||
|
</MudLink>
|
||||||
|
.
|
||||||
|
By clicking "Accept GPL and Download", you agree to the terms of the GPL license.
|
||||||
|
</MudText>
|
||||||
|
<MudButton Color="Color.Secondary" Class="mt-4" Variant="Variant.Filled" Size="Size.Small" StartIcon="@Icons.Material.Filled.Downloading">
|
||||||
|
Accept GPL and Download
|
||||||
|
</MudButton>
|
||||||
|
</ExpansionPanel>
|
||||||
|
</MudExpansionPanels>
|
||||||
|
</ExpansionPanel>
|
||||||
|
</MudExpansionPanels>
|
||||||
|
<div class="mt-2">
|
||||||
|
<MudButton Variant="Variant.Text" Color="Color.Default">Reject GPL licence</MudButton>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<MudItem Class="pa-6"
|
<MudItem Class="pa-6"
|
||||||
Style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
Style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
||||||
@if (showSkeleton)
|
@if (showSkeleton)
|
||||||
{
|
{
|
||||||
<MudSkeleton SkeletonType="SkeletonType.Circle" Animation="Animation.Pulse" Class="mb-4"
|
<MudSkeleton SkeletonType="SkeletonType.Circle" Animation="Animation.Pulse" Class="mb-4"
|
||||||
Style="width: 4em; height: 4em;"/>
|
Style="width: 4em; height: 4em;"/>
|
||||||
<MudSkeleton SkeletonType="SkeletonType.Rectangle" Animation="Animation.Pulse" Width="230px"
|
<MudSkeleton SkeletonType="SkeletonType.Rectangle" Animation="Animation.Pulse" Width="230px"
|
||||||
Height="35px"/>
|
Height="35px"/>
|
||||||
}
|
}
|
||||||
else if (isPandocAvailable)
|
else if (isPandocAvailable)
|
||||||
{
|
{
|
||||||
<MudIcon Class="mb-2" Style="width: 2.5em; height: 2.5em;" Icon="@Icons.Material.Filled.Check"
|
<MudIcon Class="mb-2" Style="width: 2.5em; height: 2.5em;" Icon="@Icons.Material.Filled.Check"
|
||||||
Color="Color.Success"/>
|
Color="Color.Success"/>
|
||||||
<MudText Typo="Typo.subtitle1" Align="Align.Center">
|
<MudText Typo="Typo.subtitle1" Align="Align.Center">
|
||||||
Pandoc ist auf Ihrem System verfügbar
|
Pandoc ist auf Ihrem System verfügbar
|
||||||
</MudText>
|
</MudText>
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<MudIcon Class="mb-2" Style="width: 2.5em; height: 2.5em;" Icon="@Icons.Material.Filled.Error"
|
<MudIcon Class="mb-2" Style="width: 2.5em; height: 2.5em;" Icon="@Icons.Material.Filled.Error"
|
||||||
Color="Color.Error"/>
|
Color="Color.Error"/>
|
||||||
<MudText Class="mb-2" Typo="Typo.subtitle1" Align="Align.Center">
|
<MudText Class="mb-2" Typo="Typo.subtitle1" Align="Align.Center">
|
||||||
Pandoc ist auf Ihrem System nicht verfügbar
|
Pandoc ist auf Ihrem System nicht verfügbar
|
||||||
</MudText>
|
</MudText>
|
||||||
<MudButton Color="Color.Primary" OnClick="@this.ProceedToInstallation" Variant="Variant.Filled">Proceed
|
<MudButton Color="Color.Primary" OnClick="@this.ProceedToInstallation" Variant="Variant.Filled">
|
||||||
to installation
|
Proceed
|
||||||
</MudButton>
|
to installation
|
||||||
}
|
</MudButton>
|
||||||
</MudItem>
|
}
|
||||||
|
</MudItem>
|
||||||
}
|
}
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
<DialogActions>
|
<DialogActions>
|
||||||
|
|||||||
@ -4,14 +4,20 @@ namespace AIStudio.Dialogs;
|
|||||||
|
|
||||||
public partial class PandocDialog : ComponentBase
|
public partial class PandocDialog : ComponentBase
|
||||||
{
|
{
|
||||||
|
[Inject]
|
||||||
|
private HttpClient HttpClient { get; set; } = null!;
|
||||||
|
|
||||||
[CascadingParameter]
|
[CascadingParameter]
|
||||||
private IMudDialogInstance MudDialog { get; set; } = null!;
|
private IMudDialogInstance MudDialog { get; set; } = null!;
|
||||||
|
|
||||||
|
private static readonly string LICENCE_URI = "https://raw.githubusercontent.com/jgm/pandoc/master/COPYRIGHT";
|
||||||
|
|
||||||
private bool isPandocAvailable;
|
private bool isPandocAvailable;
|
||||||
private bool showSkeleton;
|
private bool showSkeleton;
|
||||||
private bool showInstallPage;
|
private bool showInstallPage;
|
||||||
|
private string? licenseText;
|
||||||
|
private bool isLoading;
|
||||||
|
|
||||||
|
|
||||||
#region Overrides of ComponentBase
|
#region Overrides of ComponentBase
|
||||||
|
|
||||||
protected override async Task OnInitializedAsync()
|
protected override async Task OnInitializedAsync()
|
||||||
@ -33,4 +39,40 @@ public partial class PandocDialog : ComponentBase
|
|||||||
}
|
}
|
||||||
|
|
||||||
private void ProceedToInstallation() => this.showInstallPage = true;
|
private void ProceedToInstallation() => this.showInstallPage = true;
|
||||||
|
|
||||||
|
private async Task OnExpandedChanged(bool newVal)
|
||||||
|
{
|
||||||
|
if (newVal)
|
||||||
|
{
|
||||||
|
this.isLoading = true;
|
||||||
|
try
|
||||||
|
{
|
||||||
|
await Task.Delay(600);
|
||||||
|
|
||||||
|
this.licenseText = await this.LoadLicenseTextAsync();
|
||||||
|
}
|
||||||
|
catch (Exception ex)
|
||||||
|
{
|
||||||
|
Console.WriteLine($"Fehler beim Laden des Lizenztexts: {ex.Message}");
|
||||||
|
this.licenseText = "Fehler beim Laden des Lizenztexts.";
|
||||||
|
}
|
||||||
|
finally
|
||||||
|
{
|
||||||
|
this.isLoading = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
await Task.Delay(350);
|
||||||
|
this.licenseText = string.Empty;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task<string> LoadLicenseTextAsync()
|
||||||
|
{
|
||||||
|
var response = await this.HttpClient.GetAsync(LICENCE_URI);
|
||||||
|
response.EnsureSuccessStatusCode();
|
||||||
|
var content = await response.Content.ReadAsStringAsync();
|
||||||
|
return content;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user