StabilityMatrix/StabilityMatrix.Avalonia/Controls/Inference/ModelCard.axaml

<Styles
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:avalonia="https://github.com/projektanker/icons.avalonia"
    xmlns:controls="using:StabilityMatrix.Avalonia.Controls"
    xmlns:converters="clr-namespace:StabilityMatrix.Avalonia.Converters"
    xmlns:fluent="clr-namespace:FluentIcons.Avalonia.Fluent;assembly=FluentIcons.Avalonia.Fluent"
    xmlns:inference="clr-namespace:StabilityMatrix.Avalonia.ViewModels.Inference"
    xmlns:lang="clr-namespace:StabilityMatrix.Avalonia.Languages"
    xmlns:mocks="clr-namespace:StabilityMatrix.Avalonia.DesignData"
    xmlns:models="clr-namespace:StabilityMatrix.Core.Models;assembly=StabilityMatrix.Core"
    xmlns:sg="clr-namespace:SpacedGridControl.Avalonia;assembly=SpacedGridControl.Avalonia"
    xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
    x:DataType="inference:ModelCardViewModel">
    <Design.PreviewWith>
        <Panel Width="400" Height="200">
            <StackPanel Width="300" VerticalAlignment="Center">
                <controls:ModelCard DataContext="{x:Static mocks:DesignData.ModelCardViewModel}" />
                <controls:ModelCard DataContext="{x:Static mocks:DesignData.ImgToVidModelCardViewModel}" />
            </StackPanel>
        </Panel>
    </Design.PreviewWith>

    <Styles.Resources>
        <fluent:SymbolIconSource
            x:Key="IconCube"
            IsFilled="False"
            Symbol="Cube" />
        <fluent:SymbolIconSource
            x:Key="IconQuestionCircle"
            IsFilled="True"
            Symbol="QuestionCircle" />
        <fluent:SymbolIconSource
            x:Key="IconTableCellEdit"
            IsFilled="True"
            Symbol="TableCellEdit" />
    </Styles.Resources>

    <Style Selector="controls|ModelCard">
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="Template">
            <ControlTemplate>
                <controls:Card Padding="12">
                    <sg:SpacedGrid
                        ColumnDefinitions="Auto,*,Auto"
                        ColumnSpacing="8"
                        RowDefinitions="*,*,*,*"
                        RowSpacing="0">
                        <!--  Model  -->
                        <TextBlock
                            Grid.Column="0"
                            VerticalAlignment="Center"
                            Text="{x:Static lang:Resources.Label_Model}"
                            TextAlignment="Left" />

                        <controls:BetterComboBox
                            Grid.Row="0"
                            Grid.Column="1"
                            Padding="8,6,4,6"
                            HorizontalAlignment="Stretch"
                            ItemsSource="{Binding ClientManager.Models}"
                            SelectedItem="{Binding SelectedModel}"
                            Theme="{StaticResource BetterComboBoxHybridModelTheme}" />

                        <Button
                            Grid.Row="0"
                            Grid.Column="2"
                            Margin="0,0,0,0"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch">
                            <ui:SymbolIcon FontSize="16" Symbol="Setting" />
                            <Button.Flyout>
                                <ui:FAMenuFlyout Placement="BottomEdgeAlignedLeft">
                                    <ui:ToggleMenuFlyoutItem
                                        IconSource="{StaticResource IconCube}"
                                        IsChecked="{Binding IsRefinerSelectionEnabled}"
                                        Text="{x:Static lang:Resources.Label_Refiner}" />
                                    <ui:ToggleMenuFlyoutItem
                                        IconSource="{StaticResource IconCube}"
                                        IsChecked="{Binding IsVaeSelectionEnabled}"
                                        Text="{x:Static lang:Resources.Label_VAE}" />
                                    <ui:ToggleMenuFlyoutItem
                                        IconSource="{StaticResource IconTableCellEdit}"
                                        IsChecked="{Binding IsClipSkipEnabled}"
                                        Text="{x:Static lang:Resources.Label_CLIPSkip}" />
                                    <ui:MenuFlyoutSeparator />
                                    <ui:MenuFlyoutItem
                                        Command="{Binding ConfigClickCommand}"
                                        IconSource="{StaticResource IconQuestionCircle}"
                                        Text="{x:Static lang:Resources.Label_Config}" />
                                </ui:FAMenuFlyout>
                            </Button.Flyout>
                        </Button>

                        <!--  Refiner  -->
                        <TextBlock
                            Grid.Row="1"
                            Grid.Column="0"
                            Margin="0,8,0,0"
                            VerticalAlignment="Center"
                            IsVisible="{Binding IsRefinerSelectionEnabled}"
                            Text="{x:Static lang:Resources.Label_Refiner}"
                            TextAlignment="Left" />

                        <controls:BetterComboBox
                            Grid.Row="1"
                            Grid.Column="1"
                            Grid.ColumnSpan="2"
                            Margin="0,8,0,0"
                            Padding="8,6,4,6"
                            HorizontalAlignment="Stretch"
                            IsVisible="{Binding IsRefinerSelectionEnabled}"
                            ItemsSource="{Binding ClientManager.Models}"
                            SelectedItem="{Binding SelectedRefiner}"
                            Theme="{StaticResource BetterComboBoxHybridModelTheme}" />

                        <!--  VAE  -->
                        <TextBlock
                            Grid.Row="2"
                            Grid.Column="0"
                            Margin="0,8,0,0"
                            VerticalAlignment="Center"
                            IsVisible="{Binding IsVaeSelectionEnabled}"
                            Text="{x:Static lang:Resources.Label_VAE}"
                            TextAlignment="Left" />

                        <ui:FAComboBox
                            Grid.Row="2"
                            Grid.Column="1"
                            Grid.ColumnSpan="2"
                            Margin="0,8,0,0"
                            HorizontalAlignment="Stretch"
                            DisplayMemberBinding="{Binding ShortDisplayName}"
                            IsTextSearchEnabled="True"
                            IsVisible="{Binding IsVaeSelectionEnabled}"
                            ItemsSource="{Binding ClientManager.VaeModels}"
                            SelectedItem="{Binding SelectedVae}" />

                        <!--  CLIP Skip  -->
                        <TextBlock
                            Grid.Row="3"
                            Grid.Column="0"
                            Margin="0,8,0,0"
                            VerticalAlignment="Center"
                            IsVisible="{Binding IsClipSkipEnabled}"
                            Text="{x:Static lang:Resources.Label_CLIPSkip}"
                            TextAlignment="Left" />

                        <NumericUpDown
                            Grid.Row="3"
                            Grid.Column="1"
                            Grid.ColumnSpan="2"
                            Margin="0,8,0,0"
                            HorizontalAlignment="Stretch"
                            ClipValueToMinMax="True"
                            Increment="1"
                            IsVisible="{Binding IsClipSkipEnabled}"
                            Maximum="24"
                            Minimum="1"
                            ParsingNumberStyle="Integer"
                            Watermark="1"
                            Value="{Binding ClipSkip, Converter={x:Static converters:NullableDefaultNumericConverters.IntToDecimal}}" />

                    </sg:SpacedGrid>
                </controls:Card>
            </ControlTemplate>
        </Setter>
    </Style>
</Styles>