StabilityMatrix/StabilityMatrix.Avalonia/Views/Dialogs/NewOneClickInstallDialog.axaml

<controls:UserControlBase xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:controls="clr-namespace:StabilityMatrix.Avalonia.Controls"
             xmlns:dialogs="clr-namespace:StabilityMatrix.Avalonia.ViewModels.Dialogs"
             xmlns:lang="clr-namespace:StabilityMatrix.Avalonia.Languages"
             xmlns:mocks="clr-namespace:StabilityMatrix.Avalonia.DesignData"
             xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
             xmlns:input="clr-namespace:FluentAvalonia.UI.Input;assembly=FluentAvalonia"
             xmlns:packages="clr-namespace:StabilityMatrix.Core.Models.Packages;assembly=StabilityMatrix.Core"
             xmlns:models="clr-namespace:StabilityMatrix.Core.Models;assembly=StabilityMatrix.Core"
             mc:Ignorable="d" d:DesignWidth="700" d:DesignHeight="725"
             x:DataType="dialogs:NewOneClickInstallViewModel"
             d:DataContext="{x:Static mocks:DesignData.NewOneClickInstallViewModel}"
             x:Class="StabilityMatrix.Avalonia.Views.Dialogs.NewOneClickInstallDialog">
    
    <controls:UserControlBase.Resources>
        <input:StandardUICommand x:Key="InstallPackageCommand"
                                 Command="{Binding InstallPackageCommand}" />

        <DataTemplate x:DataType="packages:BasePackage" x:Key="PackageTemplate">
            <Button Padding="0"
                    HorizontalAlignment="Stretch"
                    HorizontalContentAlignment="Stretch"
                    Margin="4"
                    Classes="transparent-full"
                    CornerRadius="8"
                    Command="{StaticResource InstallPackageCommand}"
                    CommandParameter="{Binding }">
                <controls:Card Padding="8, 0">

                    <Grid ColumnDefinitions="Auto, *, Auto">
                        <controls:BetterAdvancedImage
                            Grid.Column="0"
                            MaxHeight="96"
                            MaxWidth="96"
                            Stretch="UniformToFill"
                            CornerRadius="4"
                            Source="{Binding PreviewImageUri}" />
                        <StackPanel Grid.Column="1" Orientation="Vertical">
                        <TextBlock Text="{Binding DisplayName}"
                                   FontWeight="Light"
                                   Margin="16,8,0,0"
                                   FontSize="20" />
                        
                        <TextBlock Text="{Binding ByAuthor}"
                                   FontWeight="Light"
                                   Margin="16,0,0,0"
                                   FontSize="13" />

                        <TextBlock TextWrapping="Wrap"
                                   Text="{Binding Blurb}"
                                   FontWeight="Light"
                                   Margin="16,8,0,8"
                                   FontSize="14" />
                        
                        <controls:Card Tag="{Binding InstallerSortOrder}"
                                       HorizontalAlignment="Left"
                                       Padding="4"
                                       Margin="16, 0, 0, 8"
                                       VerticalAlignment="Top">

                                        <controls:Card.Styles>
                                            <Style Selector="controls|Card[Tag=Recommended]">
                                                <Setter Property="Background"
                                                        Value="{DynamicResource ThemeGreenColorTransparent}" />
                                                <Setter Property="BorderBrush"
                                                        Value="{DynamicResource ThemeGreenColorTransparent}" />
                                                <Style
                                                    Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                                                    <Setter Property="Foreground"
                                                            Value="{DynamicResource ButtonForeground}" />
                                                </Style>
                                                <Setter Property="Content">
                                                    <Template>
                                                        <TextBlock
                                                            FontWeight="Medium"
                                                            HorizontalAlignment="Center"
                                                            Text="Recommended"
                                                            TextAlignment="Center"
                                                            VerticalAlignment="Center" />
                                                    </Template>
                                                </Setter>
                                            </Style>
                                            <Style Selector="controls|Card[Tag=Simple]">
                                                <Setter Property="Background"
                                                        Value="{DynamicResource ThemeDarkBlueColor}" />
                                                <Setter Property="BorderBrush"
                                                        Value="{DynamicResource ThemeDarkBlueColor}" />
                                                <Setter Property="Content">
                                                    <Template>
                                                        <TextBlock
                                                            FontWeight="Medium"
                                                            HorizontalAlignment="Center"
                                                            Text="Simple"
                                                            TextAlignment="Center"
                                                            VerticalAlignment="Center" />
                                                    </Template>
                                                </Setter>
                                            </Style>
                                            <Style Selector="controls|Card[Tag=Advanced]">
                                                <Setter Property="Background"
                                                        Value="{DynamicResource ThemeOrangeColor}" />
                                                <Setter Property="BorderBrush"
                                                        Value="{DynamicResource ThemeOrangeColor}" />
                                                <Setter Property="Foreground"
                                                        Value="Black" />
                                                <Setter Property="Content">
                                                    <Template>
                                                        <TextBlock
                                                            FontWeight="Medium"
                                                            HorizontalAlignment="Center"
                                                            Text="Advanced"
                                                            TextAlignment="Center"
                                                            VerticalAlignment="Center" />
                                                    </Template>
                                                </Setter>
                                            </Style>
                                            <Style Selector="controls|Card">
                                                <Setter Property="Background"
                                                        Value="{DynamicResource ThemeDarkRedColor}" />
                                                <Setter Property="BorderBrush"
                                                        Value="{DynamicResource ThemeDarkRedColor}" />
                                                <Setter Property="Content">
                                                    <Template>
                                                        <TextBlock
                                                            FontWeight="Medium"
                                                            HorizontalAlignment="Center"
                                                            Text="Expert"
                                                            TextAlignment="Center"
                                                            VerticalAlignment="Center" />
                                                    </Template>
                                                </Setter>
                                            </Style>
                                        </controls:Card.Styles>
                                    </controls:Card>
                        </StackPanel>

                        <ui:SymbolIcon Grid.Column="2"
                                              HorizontalAlignment="Right"
                                              VerticalAlignment="Center"
                                              FontSize="24"
                                              Symbol="ChevronRight" />
                    </Grid>
                </controls:Card>
            </Button>
        </DataTemplate>
    </controls:UserControlBase.Resources>
    
    <StackPanel Orientation="Vertical" Margin="8">
        <TextBlock Text="{x:Static lang:Resources.Text_WelcomeToStabilityMatrix}"
                   TextWrapping="Wrap"
                   Margin="8,0,8,0"
                   VerticalAlignment="Center" HorizontalAlignment="Center"
                   FontSize="36" FontWeight="Light" />
        <TextBlock Text="{x:Static lang:Resources.Text_OneClickInstaller_SubHeader}"
                   TextWrapping="Wrap" TextAlignment="Center"
                   VerticalAlignment="Top" HorizontalAlignment="Center"
                   FontSize="16" FontWeight="Light" Margin="8"/>

        <ScrollViewer Height="575"
                      Padding="8, 0">
            <ItemsRepeater ItemsSource="{Binding ShownPackages}"
                           Name="PackagesRepeater">
                <ItemsRepeater.Layout>
                    <StackLayout Orientation="Vertical" />
                </ItemsRepeater.Layout>
                <ItemsRepeater.ItemTemplate>
                    <StaticResource ResourceKey="PackageTemplate" />
                </ItemsRepeater.ItemTemplate>
            </ItemsRepeater>
        </ScrollViewer>
        
        <ui:TeachingTip
            Name="InferenceTeachingTip"
            MinWidth="100"
            Title="Use ComfyUI with Inference"
            Subtitle="A new built-in native Stable Diffusion experience, powered by ComfyUI"
            ActionButtonContent="{x:Static lang:Resources.Action_Install}"
            ActionButtonCommand="{Binding InstallComfyForInferenceCommand}"
            CloseButtonContent="{x:Static lang:Resources.Action_Close}"
            PreferredPlacement="RightTop"
            Margin="8,0,0,0"
            PlacementMargin="0,0,0,0"
            TailVisibility="Auto">
            <ui:TeachingTip.HeroContent>
                <controls:BetterAdvancedImage
                    RenderOptions.BitmapInterpolationMode="HighQuality"
                    Source="https://cdn.lykos.ai/static/sc-inference-drag-load.gif"/>
            </ui:TeachingTip.HeroContent>
        </ui:TeachingTip>
        
        <Grid ColumnDefinitions="Auto, *" Margin="0,4">
            <ToggleSwitch IsChecked="{Binding ShowIncompatiblePackages}"
                          Margin="6, 0"
                          OffContent="Show All Packages"
                          OnContent="Show All Packages"/>
            <Button Grid.Column="0"
                    Grid.ColumnSpan="2"
                    HorizontalAlignment="Center"
                    Content="{x:Static lang:Resources.Label_SkipSetup}"
                    Command="{Binding OnCloseButtonClick}"/>
        </Grid>
    </StackPanel>
</controls:UserControlBase>