From 6930eff86e49c1ffe947b7adce762bb5c27ab09a Mon Sep 17 00:00:00 2001
From: Ionite <dev@ionite.io>
Date: Sat, 21 Oct 2023 20:19:01 -0400
Subject: [PATCH] Update controlnet card layout, add numeric bindings

---
 .../Controls/ControlNetCard.axaml             | 163 +++++++++++++-----
 .../Inference/ControlNetCardViewModel.cs      |  15 ++
 2 files changed, 134 insertions(+), 44 deletions(-)

diff --git a/StabilityMatrix.Avalonia/Controls/ControlNetCard.axaml b/StabilityMatrix.Avalonia/Controls/ControlNetCard.axaml
index aeac5124..e2cc4762 100644
--- a/StabilityMatrix.Avalonia/Controls/ControlNetCard.axaml
+++ b/StabilityMatrix.Avalonia/Controls/ControlNetCard.axaml
@@ -1,38 +1,38 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:controls="using:StabilityMatrix.Avalonia.Controls"
-        xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
-        xmlns:models="clr-namespace:StabilityMatrix.Core.Models;assembly=StabilityMatrix.Core"
-        xmlns:lang="clr-namespace:StabilityMatrix.Avalonia.Languages"
-        xmlns:vmInference="clr-namespace:StabilityMatrix.Avalonia.ViewModels.Inference"
-        xmlns:sg="clr-namespace:SpacedGridControl.Avalonia;assembly=SpacedGridControl.Avalonia"
-        xmlns:mocks="clr-namespace:StabilityMatrix.Avalonia.DesignData"
-        x:DataType="vmInference:ControlNetCardViewModel">
+<Styles
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:StabilityMatrix.Avalonia.Controls"
+    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"
+    xmlns:vmInference="clr-namespace:StabilityMatrix.Avalonia.ViewModels.Inference"
+    x:DataType="vmInference:ControlNetCardViewModel">
     <Design.PreviewWith>
         <StackPanel Width="350" Height="400">
-            <controls:ControlNetCard DataContext="{x:Static mocks:DesignData.ControlNetCardViewModel}"/>
+            <controls:ControlNetCard DataContext="{x:Static mocks:DesignData.ControlNetCardViewModel}" />
         </StackPanel>
     </Design.PreviewWith>
 
     <Style Selector="controls|ControlNetCard">
-        <!-- Set Defaults -->
+        <!--  Set Defaults  -->
         <Setter Property="Template">
             <ControlTemplate>
                 <controls:Card Padding="12">
-                    <sg:SpacedGrid 
-                        ColumnDefinitions="0.8*,*" 
-                        RowDefinitions="Auto,Auto,Auto,Auto,Auto" 
+                    <sg:SpacedGrid
+                        ColumnDefinitions="0.8*,*"
                         ColumnSpacing="8"
-                        RowSpacing="4">
-                        
-                        <!-- Image Select -->
+                        RowDefinitions="Auto,Auto,Auto,Auto,5,Auto"
+                        RowSpacing="6">
+
+                        <!--  Image Select  -->
                         <controls:SelectImageCard
-                            DataContext="{Binding SelectImageCardViewModel}"
-                            Padding="6"
-                            FontSize="13"
                             Grid.RowSpan="4"
-                            />
-                        
+                            Padding="6"
+                            DataContext="{Binding SelectImageCardViewModel}"
+                            FontSize="13" />
+
                         <!--  TODO: Preprocessor Model  -->
                         <TextBlock
                             Grid.Row="0"
@@ -45,10 +45,9 @@
                             Grid.Row="1"
                             Grid.Column="1"
                             Margin="0,0,0,4"
-                            Theme="{StaticResource FAComboBoxHybridModelTheme}"
-                            ItemsSource="{Binding ClientManager.Models}"
-                            HorizontalAlignment="Stretch"/>
-                        
+                            HorizontalAlignment="Stretch"
+                            Theme="{StaticResource FAComboBoxHybridModelTheme}" />
+
                         <!--  ControlNet Model  -->
                         <TextBlock
                             Grid.Row="2"
@@ -60,31 +59,107 @@
                         <ui:FAComboBox
                             Grid.Row="3"
                             Grid.Column="1"
-                            Theme="{StaticResource FAComboBoxHybridModelTheme}"
-                            ItemsSource="{Binding ClientManager.Models}"
-                            HorizontalAlignment="Stretch"/>
-                        
-                        <StackPanel
-                            Grid.Row="4"
+                            HorizontalAlignment="Stretch"
+                            ItemsSource="{Binding ClientManager.ControlNetModels}"
+                            SelectedItem="{Binding SelectedModel}"
+                            Theme="{StaticResource FAComboBoxHybridModelTheme}" />
+
+                        <sg:SpacedGrid
+                            RowDefinitions="Auto,Auto,Auto,Auto"
+                            ColumnDefinitions="*,Auto,Auto"
+                            Grid.Row="5"
                             Grid.Column="0"
                             Grid.ColumnSpan="2">
-                            <!-- Strength -->
-                            <TextBlock
-                                Text="{x:Static lang:Resources.Label_Strength}"
+                            <!--  Strength  -->
+                            <TextBlock 
+                                Text="{x:Static lang:Resources.Label_Strength}" 
+                                VerticalAlignment="Center"
                                 TextAlignment="Left" />
+                            <ui:NumberBox
+                                Grid.Row="0"
+                                Grid.Column="1"
+                                Grid.ColumnSpan="2"
+                                HorizontalAlignment="Stretch"
+                                SpinButtonPlacementMode="Inline"
+                                Maximum="10"
+                                Minimum="0"
+                                SmallChange="0.01"
+                                SimpleNumberFormat="F2"
+                                Value="{Binding Strength}" />
                             <Slider
-                                BorderThickness="1"/>
-                        
-                            <!-- Start end percent -->
-                            <TextBlock
-                                Text="{x:Static lang:Resources.Label_Steps}"
+                                Grid.Row="1"
+                                Grid.Column="0"
+                                Grid.ColumnSpan="3"
+                                Margin="0,-4"
+                                Maximum="1"
+                                Minimum="0"
+                                TickFrequency="0.01"
+                                IsSnapToTickEnabled="True"
+                                SmallChange="0.01"
+                                Value="{Binding Strength}" />
+
+                            <!--  Start end percent  -->
+                            <TextBlock 
+                                Grid.Row="2"
+                                Grid.Column="0"
+                                VerticalAlignment="Center"
+                                Text="{x:Static lang:Resources.Label_Steps}" 
                                 TextAlignment="Left" />
-                            <ui:RangeSlider
+                            
+                            <ui:NumberBox
+                                Grid.Row="2"
+                                Grid.Column="1"
+                                HorizontalAlignment="Stretch"
+                                Maximum="10"
                                 Minimum="0"
-                                Maximum="1"
+                                SmallChange="0.01"
+                                Value="{Binding StartPercent}" />
+                            <ui:NumberBox
+                                Grid.Row="2"
+                                Grid.Column="2"
+                                HorizontalAlignment="Stretch"
+                                Maximum="10"
+                                Minimum="0"
+                                SmallChange="0.01"
+                                Value="{Binding EndPercent}" />
+                            
+                            <!--<sg:SpacedGrid Grid.Row="2"
+                                         Grid.Column="1"  
+                                         HorizontalAlignment="Right"
+                                         ColumnDefinitions="*,*">
+                                <ui:NumberBox
+                                    HorizontalAlignment="Stretch"
+                                    Maximum="10"
+                                    Minimum="0"
+                                    SmallChange="0.01"
+                                    Value="{Binding StartPercent}" />
+                                <ui:NumberBox
+                                    Grid.Column="1"
+                                    HorizontalAlignment="Stretch"
+                                    Maximum="10"
+                                    Minimum="0"
+                                    SmallChange="0.01"
+                                    Value="{Binding EndPercent}" />
+                            </sg:SpacedGrid>-->
+
+                            <ui:RangeSlider
+                                Grid.Row="3"
+                                Grid.Column="0"
+                                Grid.ColumnSpan="3"
                                 BorderThickness="1"
+                                Maximum="1"
+                                Minimum="0"
+                                RangeEnd="{Binding EndPercent}"
+                                RangeStart="{Binding StartPercent}"
                                 StepFrequency="0.01"
-                                ToolTipStringFormat="P"/>
+                                ToolTipStringFormat="P" />
+                        </sg:SpacedGrid>
+
+                        <StackPanel
+                            Grid.Row="4"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2">
+
                         </StackPanel>
 
 
diff --git a/StabilityMatrix.Avalonia/ViewModels/Inference/ControlNetCardViewModel.cs b/StabilityMatrix.Avalonia/ViewModels/Inference/ControlNetCardViewModel.cs
index c95e048c..4fc58471 100644
--- a/StabilityMatrix.Avalonia/ViewModels/Inference/ControlNetCardViewModel.cs
+++ b/StabilityMatrix.Avalonia/ViewModels/Inference/ControlNetCardViewModel.cs
@@ -19,6 +19,21 @@ public partial class ControlNetCardViewModel : LoadableViewModelBase
     [Required]
     private HybridModelFile? selectedPreprocessor;
 
+    [ObservableProperty]
+    [Required]
+    [Range(0d, 10d)]
+    private double strength = 1.0;
+
+    [ObservableProperty]
+    [Required]
+    [Range(0d, 1d)]
+    private double startPercent;
+
+    [ObservableProperty]
+    [Required]
+    [Range(0d, 1d)]
+    private double endPercent = 1.0;
+
     public SelectImageCardViewModel SelectImageCardViewModel { get; }
 
     public IInferenceClientManager ClientManager { get; }