AI-Studio/app/MindWork AI Studio/Assistants/VisualBriefing/VisualBriefingAssistant.razor
2026-07-31 18:18:23 +02:00

354 lines
27 KiB
Plaintext

@attribute [Route(Routes.ASSISTANT_VISUAL_BRIEFING)]
@using AIStudio.Assistants.SlideBuilder
@using AIStudio.Tools.Media
@using AIStudio.Tools.Rust
@inherits MSGComponentBase
<CascadingValue Value="Components.VISUAL_BRIEFING_ASSISTANT">
<CascadingValue Value="@this.CurrentMediaOwner">
<div class="visual-briefing-shell">
<PreviewPrototype ApplyInnerScrollingFix="true"/>
<MudText Typo="Typo.h4" Class="mb-3">@T("Visual Briefings")</MudText>
<MudList T="Guid"
Color="Color.Primary"
Class="mb-1"
SelectedValue="@(this.selectedProject?.BriefingId ?? Guid.Empty)"
SelectedValueChanged="@this.SelectBriefingAsync">
@foreach (var project in this.projects)
{
<MudListItem T="Guid" @key="project.BriefingId" Value="@project.BriefingId" Icon="@(project.IsAvailable ? Icons.Material.Filled.Dashboard : Icons.Material.Filled.WarningAmber)">
<MudStack Spacing="0">
<MudText Typo="Typo.body1">@this.ProjectDisplayName(project)</MudText>
<MudText Typo="Typo.caption">@project.ModifiedAtUtc.ToLocalTime().ToString("g")</MudText>
@if (!project.IsAvailable)
{
<MudText Typo="Typo.caption" Color="Color.Error">@this.ProjectStatusName(project.Status)</MudText>
}
@if (project.IsAvailable && this.IsGenerating(project.BriefingId))
{
<MudProgressLinear Indeterminate="true" Color="Color.Primary" Class="mt-1"/>
}
@if (project.IsAvailable)
{
<MediaTranscriptionStatus Owner="@MediaImportOwner.ForVisualBriefing(project.BriefingId)" Compact="true"/>
}
</MudStack>
</MudListItem>
}
</MudList>
<MudStack Row="true" Spacing="1" Class="mt-1" Wrap="Wrap.Wrap">
<MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add" OnClick="@this.CreateBriefingAsync">@T("New briefing")</MudButton>
<MudButton Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.FileUpload" OnClick="@this.ImportAsync">@T("Import")</MudButton>
</MudStack>
<MudDivider Style="height: 0.25ch; margin: 1rem 0;" Class="mt-6"/>
<main class="visual-briefing-main">
@if (this.selectedProject is not null && !this.selectedProject.IsAvailable)
{
<MudPaper Outlined="true" Class="pa-6">
<MudStack Spacing="3">
<MudText Typo="Typo.h4">@this.ProjectDisplayName(this.selectedProject)</MudText>
<MudAlert Severity="Severity.Error" Variant="Variant.Outlined">
@this.ProjectRecoveryMessage(this.selectedProject.Status)
</MudAlert>
<MudText Typo="Typo.body1">@T("AI Studio has left the project files unchanged. A future update may make this visual briefing accessible again.")</MudText>
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1" Wrap="Wrap.Wrap">
<MudText Typo="Typo.body2"><strong>@T("Project ID"):</strong> @this.selectedProject.BriefingId.ToString("D")</MudText>
<MudCopyClipboardButton TooltipMessage="@T("Copy project ID")" StringContent="@this.selectedProject.BriefingId.ToString("D")"/>
</MudStack>
<MudText Typo="Typo.body2">
@T("If you need help, report the problem and include the project ID.")
<MudLink Href="https://github.com/MindWorkAI/AI-Studio" Target="_blank">@T("Report a problem?")</MudLink>
</MudText>
<MudStack Row="true" Spacing="1" Wrap="Wrap.Wrap">
<MudButton Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.FolderOpen" OnClick="@this.OpenSelectedProjectDirectoryAsync">@T("Open project folder")</MudButton>
<MudButton Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.DeleteForever" Color="Color.Error" OnClick="@this.DeleteAsync">@T("Delete")</MudButton>
</MudStack>
</MudStack>
</MudPaper>
}
else if (this.selectedBriefing is null)
{
<MudPaper Outlined="true" Class="pa-6">
<MudText Typo="Typo.h5">@T("Create or import a visual briefing to begin.")</MudText>
</MudPaper>
}
else
{
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center" Wrap="Wrap.Wrap" Class="mb-3">
<MudText Typo="Typo.h3">@this.projectName</MudText>
<MudStack Row="true" Spacing="1">
<MudButton StartIcon="@Icons.Material.Filled.DriveFileRenameOutline" OnClick="@this.RenameAsync" Disabled="@this.IsCurrentBusy">@T("Rename")</MudButton>
<MudButton StartIcon="@Icons.Material.Filled.DeleteForever" Color="Color.Error" OnClick="@this.DeleteAsync" Disabled="@this.IsCurrentBusy">@T("Delete")</MudButton>
</MudStack>
</MudStack>
<MudPaper Outlined="true" Class="pa-4 mb-4">
<MudGrid>
<MudItem xs="12" md="7">
<MudTextField T="string" @bind-Text="@this.projectName" Label="@T("Briefing name")" Required="true" Immediate="@true" Variant="Variant.Outlined" Disabled="@this.IsCurrentBusy"/>
</MudItem>
<MudItem xs="12" md="5">
<MudTextField T="string" @bind-Text="@this.author" Label="@T("Author (optional)")" Variant="Variant.Outlined" Disabled="@this.IsCurrentBusy"/>
</MudItem>
</MudGrid>
<MudTextField T="string" @bind-Text="@this.instruction" Label="@T("Briefing scope, notes, or current change instruction (optional)")" Variant="Variant.Outlined" AutoGrow="true" Lines="3" Class="mt-3" Disabled="@this.IsCurrentBusy"/>
<EnumSelection T="VisualBriefingProtectionLevel"
NameFunc="@(level => this.ProtectionLevelName(level))"
@bind-Value="@this.protectionLevel"
Icon="@Icons.Material.Filled.Security"
Label="@T("Protection level")"
AllowOther="true"
OtherValue="VisualBriefingProtectionLevel.OTHER"
@bind-OtherInput="@this.customProtectionLevel"
LabelOther="@T("Custom protection level")"
Disabled="@this.IsCurrentBusy"/>
</MudPaper>
<MudGrid Class="mb-4">
<MudItem xs="12" lg="6">
<MudPaper Outlined="true" Class="pa-4 h-100">
<MudText Typo="Typo.h5">@T("Source material")</MudText>
<MudText Typo="Typo.body2" Class="mb-2">@T("Documents, spreadsheets, images, audio, and video are considered as source context.")</MudText>
<AttachDocuments Name="Visual briefing source material"
Layer="@DropLayers.ASSISTANTS"
@bind-DocumentPaths="@this.sourceMaterial"
OnChange="@this.SourceMaterialChangedAsync"
CatchAllDocuments="true"
UseSmallForm="false"
Provider="@this.provider"
Disabled="@this.IsCurrentBusy"/>
</MudPaper>
</MudItem>
<MudItem xs="12" lg="6">
<MudPaper Outlined="true" Class="pa-4 h-100">
<MudText Typo="Typo.h5">@T("Visual assets")</MudText>
<MudText Typo="Typo.body2" Class="mb-2">@T("PNG, JPEG, and WebP assets are analyzed and must appear visibly in the briefing.")</MudText>
<AttachDocuments Name="Visual briefing visual assets"
Layer="@DropLayers.ASSISTANTS"
@bind-DocumentPaths="@this.visualAssets"
OnChange="@this.VisualAssetsChangedAsync"
CatchAllDocuments="false"
UseSmallForm="false"
AllowedFileTypes="@(new[] { FileTypes.VISUAL_BRIEFING_IMAGE })"
Provider="@this.provider"
Disabled="@this.IsCurrentBusy"/>
</MudPaper>
</MudItem>
</MudGrid>
@if (this.selectedBriefing.Sources.Count > 0)
{
<MudPaper Outlined="true" Class="pa-4 mb-4">
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Class="mb-2">
<MudText Typo="Typo.h5">@T("Linked sources")</MudText>
<MudButton StartIcon="@Icons.Material.Filled.Refresh" OnClick="@this.RefreshSourceStatusAsync" Disabled="@this.IsCurrentBusy">@T("Refresh status")</MudButton>
</MudStack>
<MudTable Items="@this.selectedBriefing.Sources" Dense="true" Hover="true" Breakpoint="Breakpoint.Sm">
<HeaderContent>
<MudTh>@T("File")</MudTh>
<MudTh>@T("Kind")</MudTh>
<MudTh>@T("Status")</MudTh>
<MudTh>@T("Actions")</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="@T("File")">@Path.GetFileName(context.Path)</MudTd>
<MudTd DataLabel="@T("Kind")">@context.Kind</MudTd>
<MudTd DataLabel="@T("Status")">
<MudChip T="string" Size="Size.Small" Color="@SourceStatusColor(context.Status)">@this.SourceStatusName(context.Status)</MudChip>
</MudTd>
<MudTd DataLabel="@T("Actions")">
<MudTooltip Text="@T("Relink")" Placement="Placement.Bottom">
<MudIconButton Icon="@Icons.Material.Filled.Link" OnClick="@(() => this.RelinkAsync(context))" Disabled="@this.IsCurrentBusy"/>
</MudTooltip>
@if (context.IsMedia && context.Status is VisualBriefingSourceStatus.TRANSCRIPT_OUTDATED)
{
<MudTooltip Text="@T("Transcribe again")" Placement="Placement.Bottom">
<MudIconButton Icon="@Icons.Material.Filled.RecordVoiceOver" OnClick="@(() => this.RetranscribeAsync(context))" Disabled="@this.IsCurrentBusy"/>
</MudTooltip>
}
<MudTooltip Text="@T("Remove")" Placement="Placement.Bottom">
<MudIconButton Icon="@Icons.Material.Filled.RemoveCircle" Color="Color.Error" OnClick="@(() => this.RemoveSourceAsync(context))" Disabled="@this.IsCurrentBusy"/>
</MudTooltip>
</MudTd>
</RowTemplate>
</MudTable>
</MudPaper>
}
<MudPaper Outlined="true" Class="pa-4 mb-4">
<MudText Typo="Typo.h5" Class="mb-3">@T("Briefing settings")</MudText>
<ProviderSelection @bind-ProviderSettings="@this.provider" ExplicitMinimumConfidence="@this.MinimumProviderConfidence" Disabled="@this.IsCurrentBusy"/>
<ProfileSelection @bind-CurrentProfile="@this.profile" MarginLeft="" Disabled="@this.IsCurrentBusy"/>
<EnumSelection T="CommonLanguages" NameFunc="@(language => language.Name())" @bind-Value="@this.targetLanguage" Icon="@Icons.Material.Filled.Translate" Label="@T("Target language")" AllowOther="true" @bind-OtherInput="@this.customTargetLanguage" OtherValue="CommonLanguages.OTHER" LabelOther="@T("Custom target language")" Disabled="@this.IsCurrentBusy"/>
<EnumSelection T="AudienceProfile" NameFunc="@(value => value.Name())" @bind-Value="@this.audienceProfile" Label="@T("Audience profile")" Disabled="@this.IsCurrentBusy"/>
<EnumSelection T="AudienceAgeGroup" NameFunc="@(value => value.Name())" @bind-Value="@this.audienceAgeGroup" Label="@T("Audience age group")" Disabled="@this.IsCurrentBusy"/>
<EnumSelection T="AudienceOrganizationalLevel" NameFunc="@(value => value.Name())" @bind-Value="@this.audienceOrganizationalLevel" Label="@T("Audience organizational level")" Disabled="@this.IsCurrentBusy"/>
<EnumSelection T="AudienceExpertise" NameFunc="@(value => value.Name())" @bind-Value="@this.audienceExpertise" Label="@T("Audience expertise")" Disabled="@this.IsCurrentBusy"/>
<MudSwitch T="bool" @bind-Value="@this.showSourceReferences" Color="Color.Primary" Disabled="@this.IsCurrentBusy">@T("Show source references")</MudSwitch>
<MudSwitch T="bool" @bind-Value="@this.optimizeImages" Color="Color.Primary" Disabled="@this.IsCurrentBusy">@T("Optimize large visual assets")</MudSwitch>
</MudPaper>
<MudStack Row="true" Spacing="2" Wrap="Wrap.Wrap" Class="mb-4">
@if (this.selectedBriefing.Versions.Count == 0)
{
<MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.AutoAwesome" OnClick="@(() => this.GenerateAsync(VisualBriefingEditMode.INITIAL))" Disabled="@this.CannotGenerate(VisualBriefingEditMode.INITIAL)">@T("Create briefing")</MudButton>
}
else
{
<MudTooltip Text="@T("Creates a new version with a different design while keeping the current structure, content, and visual assets.")">
<span>
<MudButton Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Palette" OnClick="@(() => this.GenerateAsync(VisualBriefingEditMode.CHANGE_DESIGN))" Disabled="@this.CannotGenerate(VisualBriefingEditMode.CHANGE_DESIGN)">@T("Change design")</MudButton>
</span>
</MudTooltip>
<MudTooltip Text="@T("Creates a new version from the current sources and instructions while keeping the current structure and design.")">
<span>
<MudButton Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Update" OnClick="@(() => this.GenerateAsync(VisualBriefingEditMode.UPDATE_CONTENT))" Disabled="@this.CannotGenerate(VisualBriefingEditMode.UPDATE_CONTENT)">@T("Update content")</MudButton>
</span>
</MudTooltip>
<MudTooltip Text="@(this.SelectedVersionSupportsEdits
? T("Recompile this version with the current AI Studio version without AI model calls.")
: T("This version has no compatible semantic artifacts. Rebuild the briefing instead."))">
<span>
<MudButton Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Code" OnClick="@(() => this.RecompileAsync())" Disabled="@this.CannotRecompile">@T("Recompile briefing")</MudButton>
</span>
</MudTooltip>
<MudTooltip Text="@T("Creates a new version from the current sources and instructions. The structure, content, and design may all change.")">
<span>
<MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.AutoAwesome" OnClick="@(() => this.GenerateAsync(VisualBriefingEditMode.REBUILD))" Disabled="@this.CannotGenerate(VisualBriefingEditMode.REBUILD)">@T("Rebuild briefing")</MudButton>
</span>
</MudTooltip>
}
</MudStack>
@if (this.latestBuild is not null)
{
string[] buildStepTitles =
[
T("Prepare sources"),
T("Analyze material"),
T("Plan briefing"),
T("Curate content"),
T("Design presentation"),
T("Compile and save"),
];
<MudExpansionPanels Class="mb-4 visual-briefing-build-progress" Elevation="0">
<MudExpansionPanel Text="@this.BuildProgressTitle"
Expanded="@(this.latestBuild.Status is not VisualBriefingBuildStatus.COMPLETED)">
<MudStepper ActiveIndex="@this.BuildStepperIndex"
CompletedStepColor="Color.Primary"
CurrentStepColor="Color.Primary"
ErrorStepColor="Color.Error"
NonLinear="@false"
OnPreviewInteraction="@PreventBuildStepperInteractionAsync"
ShowResetButton="@false">
<ChildContent>
@for (var index = 0; index < buildStepTitles.Length; index++)
{
var stepIndex = index;
<MudStep Title="@buildStepTitles[stepIndex]"
Completed="@this.BuildGroupCompleted(stepIndex)"
HasError="@this.BuildGroupStopped(stepIndex)">
<MudStack Spacing="1" Class="mt-2">
<MudText Typo="Typo.body2">@this.BuildGroupSummary(stepIndex)</MudText>
@if (this.BuildGroupRunning(stepIndex))
{
<MudProgressLinear Color="Color.Primary" Indeterminate="true"/>
<MudText Typo="Typo.body2">@string.Format(T("{0} in progress..."), buildStepTitles[stepIndex])</MudText>
}
@if (this.BuildGroupStopped(stepIndex))
{
<MudAlert Severity="Severity.Error" Dense="true">
@this.BuildGroupFailure(stepIndex)
</MudAlert>
@if (this.latestBuild.Status is VisualBriefingBuildStatus.FAILED or VisualBriefingBuildStatus.CANCELED)
{
<MudButton Variant="Variant.Filled"
Color="Color.Primary"
StartIcon="@Icons.Material.Filled.PlayArrow"
Disabled="@this.IsCurrentBusy"
OnClick="@this.ResumeLatestBuildAsync">
@T("Resume build")
</MudButton>
}
}
</MudStack>
</MudStep>
}
</ChildContent>
</MudStepper>
</MudExpansionPanel>
</MudExpansionPanels>
}
@if (this.reusableContentBuildId is { } reusableBuildId)
{
<MudAlert Severity="Severity.Warning" Variant="Variant.Outlined" Class="mb-4">
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Wrap="Wrap.Wrap">
<MudText>@T("The updated content no longer fits the current presentation. You can continue as a rebuild without another content model call.")</MudText>
<MudButton Variant="Variant.Filled"
Color="Color.Warning"
StartIcon="@Icons.Material.Filled.Refresh"
OnClick="@(() => this.GenerateAsync(VisualBriefingEditMode.REBUILD, reusableBuildId))"
Disabled="@this.IsCurrentBusy">
@T("Continue as rebuild")
</MudButton>
</MudStack>
</MudAlert>
}
@if (this.lastBuildDiagnostics is not null)
{
<MudButton Variant="Variant.Text"
StartIcon="@Icons.Material.Filled.ContentCopy"
OnClick="@this.CopyTechnicalDetailsAsync"
Class="mb-4">
@T("Copy technical details")
</MudButton>
}
@if (this.selectedBriefing.Versions.Count > 0)
{
<MudPaper Outlined="true" Class="pa-3">
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Wrap="Wrap.Wrap" Class="mb-3">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
<MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="@this.PreviousVersionAsync" Disabled="@(!this.CanGoBackward)"/>
<MudSelect T="Guid" Value="@this.selectedRevisionId" ValueChanged="@this.SelectRevisionAsync" Label="@T("Version")" Dense="true">
@foreach (var version in this.selectedBriefing.Versions.OrderByDescending(version => version.VersionNumber))
{
<MudSelectItem Value="@version.RevisionId">@($"v{version.VersionNumber} · {version.EditMode} · {version.CreatedAtUtc.ToLocalTime():g}")</MudSelectItem>
}
</MudSelect>
<MudIconButton Icon="@Icons.Material.Filled.ArrowForward" OnClick="@this.NextVersionAsync" Disabled="@(!this.CanGoForward)"/>
</MudStack>
<MudStack Row="true" Spacing="1">
<MudToggleGroup T="VisualBriefingPreviewDevice" @bind-Value="@this.previewDevice" SelectionMode="SelectionMode.SingleSelection" Color="Color.Primary">
@* MudToggleItem has no Icon parameter; the icon has to be set for both states. *@
<MudToggleItem Value="@VisualBriefingPreviewDevice.DESKTOP" SelectedIcon="@Icons.Material.Filled.DesktopWindows" UnselectedIcon="@Icons.Material.Filled.DesktopWindows"/>
<MudToggleItem Value="@VisualBriefingPreviewDevice.TABLET" SelectedIcon="@Icons.Material.Filled.Tablet" UnselectedIcon="@Icons.Material.Filled.Tablet"/>
<MudToggleItem Value="@VisualBriefingPreviewDevice.MOBILE" SelectedIcon="@Icons.Material.Filled.PhoneIphone" UnselectedIcon="@Icons.Material.Filled.PhoneIphone"/>
</MudToggleGroup>
<MudButton StartIcon="@Icons.Material.Filled.SaveAlt" OnClick="@this.ExportAsync">@T("Export")</MudButton>
</MudStack>
</MudStack>
<div class="@this.PreviewContainerClass">
@if (!string.IsNullOrWhiteSpace(this.previewUrl))
{
<iframe class="visual-briefing-preview-frame"
src="@this.previewUrl"
title="@T("Visual briefing preview")"
sandbox="allow-scripts"
referrerpolicy="no-referrer"></iframe>
}
</div>
</MudPaper>
}
}
</main>
</div>
</CascadingValue>
</CascadingValue>