Add support for Mask drawing

saddam213 · saddam213 · commit 61b13a316e63 · 2023-10-23T13:28:52.000+13:00
diff --git a/OnnxStack.UI/Models/SchedulerOptionsModel.cs b/OnnxStack.UI/Models/SchedulerOptionsModel.cs
@@ -13,7 +13,7 @@ public class SchedulerOptionsModel : INotifyPropertyChanged
         private int _seed;
         private int _inferenceSteps = 30;
         private float _guidanceScale = 7.5f;
-        private float _strength = 0.6f;
+        private float _strength = 0.7f;
         private float _initialNoiseLevel = 0f;
         private int _trainTimesteps = 1000;
         private float _betaStart = 0.00085f;
diff --git a/OnnxStack.UI/UserControls/ImageInputControl.xaml b/OnnxStack.UI/UserControls/ImageInputControl.xaml
@@ -3,6 +3,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
              xmlns:local="clr-namespace:OnnxStack.UI.UserControls"
              xmlns:userControls="clr-namespace:OnnxStack.UI.UserControls"
              xmlns:behaviors="clr-namespace:OnnxStack.UI.Behaviors"
@@ -17,27 +18,67 @@
 
     <Border DataContext="{Binding ElementName=UI}" BorderBrush="LightGray" BorderThickness="2" >
         <StackPanel Margin="2" >
-            <Image Source="{Binding Result.Image, FallbackValue={StaticResource PlaceholderImage}, TargetNullValue={StaticResource PlaceholderImage}}" Width="{Binding SchedulerOptions.Width}" Height="{Binding SchedulerOptions.Height}" MinHeight="512" MinWidth="512"/>
+            <Canvas MinHeight="512" MinWidth="512">
+                <Image Source="{Binding Result.Image, FallbackValue={StaticResource PlaceholderImage}, TargetNullValue={StaticResource PlaceholderImage}}" Width="{Binding SchedulerOptions.Width}" Height="{Binding SchedulerOptions.Height}" MinHeight="512" MinWidth="512"/>
+                <InkCanvas x:Name="MaskCanvas"  Background="Transparent" ForceCursor="True" Cursor="Pen" MinHeight="512" MinWidth="512"
+                    IsEnabled="{Binding HasResult}"
+                    EditingMode="{Binding MaskEditingMode}" 
+                    Width="{Binding SchedulerOptions.Width}" 
+                    Height="{Binding SchedulerOptions.Height}" 
+                    DefaultDrawingAttributes="{Binding MaskAttributes}" 
+                    Visibility="{Binding IsMaskEnabled, Converter={StaticResource BooleanToVisibilityConverter}}"/>
+            </Canvas>
+           
             <UniformGrid  Columns="1" Height="30" Visibility="{Binding HasResult, Converter={StaticResource BooleanToHiddenConverter}}">
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,3">
                     <TextBlock Text="Image File:" Margin="5,0,0,0"  FontSize="10" Opacity=".6" VerticalAlignment="Center" FontStyle="Italic"/>
                     <TextBlock Text="{Binding Result.FileName}" Margin="5,0,0,0" VerticalAlignment="Center"/>
                 </StackPanel>
-                <!--<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,3">
-                    <TextBlock Text="Size:" Margin="5,0,0,0" FontSize="10" Opacity=".6" VerticalAlignment="Center" FontStyle="Italic"/>
-                    <TextBlock Text="{Binding Result.FileSize}" Margin="5,0,0,0"/>
-                </StackPanel>-->
             </UniformGrid>
             <DockPanel  Height="30">
-                <Button DockPanel.Dock="Right" Command="{Binding ClearImageCommand}" BorderThickness="0,1,1,1" Width="50">
+                <Button DockPanel.Dock="Right" Command="{Binding ClearImageCommand}" BorderThickness="0,1,1,1" Width="50" IsEnabled="{Binding HasResult}">
                     <userControls:FontAwesome Icon="&#xf2ed;" IconStyle="Light"  />
                 </Button>
-                <Button Command="{Binding LoadImageCommand}" ToolTip="Load Image File"  >
+                <Button DockPanel.Dock="Left" Command="{Binding LoadImageCommand}" ToolTip="Load Image File" Width="150" Visibility="{Binding IsMaskEnabled, Converter={StaticResource BooleanToVisibilityConverter}}">
                     <StackPanel Orientation="Horizontal">
                         <userControls:FontAwesome Icon="&#xf1c5;" IconStyle="Light"  Size="13" />
                         <TextBlock Text="Load Image" Margin="5,0,0,0"/>
                     </StackPanel>
                 </Button>
+
+                <DockPanel >
+                    <StackPanel DockPanel.Dock="Right" Orientation="Horizontal" IsEnabled="{Binding HasResult}" Visibility="{Binding IsMaskEnabled, Converter={StaticResource BooleanToVisibilityConverter}}">
+                        <Button DockPanel.Dock="Right" Command="{Binding SaveMaskCommand}"  Width="50" BorderThickness="1,1,0,1">
+                            <userControls:FontAwesome Icon="&#xf0c7;" IconStyle="Light"  />
+                        </Button>
+                        <Button DockPanel.Dock="Right" Command="{Binding MaskModeCommand}"  Width="50" Visibility="{Binding IsMaskEraserEnabled, Converter={StaticResource BooleanToVisibilityConverter}}">
+                            <userControls:FontAwesome Icon="&#xf304;" IconStyle="Light"  />
+                        </Button>
+                        <Button DockPanel.Dock="Right" Command="{Binding MaskModeCommand}"  Width="50" Visibility="{Binding IsMaskEraserEnabled, Converter={StaticResource InverseBooleanToVisibilityConverter}}">
+                            <userControls:FontAwesome Icon="&#xf12d;" IconStyle="Light"  />
+                        </Button>
+                    </StackPanel>
+
+                    <Button DockPanel.Dock="Top" Command="{Binding LoadImageCommand}" Visibility="{Binding IsMaskEnabled, Converter={StaticResource InverseBooleanToVisibilityConverter}}" ToolTip="Load Image File" Height="30" >
+                        <StackPanel Orientation="Horizontal">
+                            <userControls:FontAwesome Icon="&#xf1c5;" IconStyle="Light"  Size="13" />
+                            <TextBlock Text="Load Image" Margin="5,0,0,0"/>
+                        </StackPanel>
+                    </Button>
+
+                    <StackPanel Margin="0,0,5,0" Visibility="{Binding IsMaskEnabled, Converter={StaticResource BooleanToVisibilityConverter}}">
+                        <UniformGrid Columns="2" >
+                            <TextBlock Text="Pen Size" VerticalAlignment="Bottom" FontSize="8" Margin="5,-4,6,0" Opacity=".6" FontStyle="Italic" />
+                            <TextBlock Text="{Binding ElementName=SliderMaskDrawSize, Path=Value, StringFormat={}{0}}" VerticalAlignment="Bottom" FontSize="8" Margin="0,-4,6,0" FontWeight="Medium" HorizontalAlignment="Right" />
+                        </UniformGrid>
+                        <Slider Name="SliderMaskDrawSize" Value="{Binding MaskDrawSize}" IsEnabled="{Binding HasResult}" Minimum="2" Maximum="40" TickFrequency="1" IsSnapToTickEnabled="True" SmallChange="1" LargeChange="1" >
+                            <i:Interaction.Behaviors>
+                                <behaviors:SliderMouseWheelBehavior />
+                            </i:Interaction.Behaviors>
+                        </Slider>
+                    </StackPanel>
+                </DockPanel>
+
             </DockPanel>
         </StackPanel>
     </Border>
diff --git a/OnnxStack.UI/UserControls/ImageInputControl.xaml.cs b/OnnxStack.UI/UserControls/ImageInputControl.xaml.cs
@@ -7,26 +7,40 @@
 using System.Threading.Tasks;
 using System.Windows;
 using System.Windows.Controls;
+using System.Windows.Ink;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
 
 namespace OnnxStack.UI.UserControls
 {
     public partial class ImageInputControl : UserControl, INotifyPropertyChanged
     {
         private readonly IDialogService _dialogService;
 
-        /// <summary>Initializes a new instance of the <see cref="ImageInputControl" /> class.</summary>
+        private int _maskDrawSize = 20;
+        private bool _isMaskEraserEnabled;
+        private DrawingAttributes _maskAttributes;
+        private InkCanvasEditingMode _maskEditingMode = InkCanvasEditingMode.Ink;
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ImageInputControl" /> class.
+        /// </summary>
         public ImageInputControl()
         {
             if (!DesignerProperties.GetIsInDesignMode(this))
                 _dialogService = App.GetService<IDialogService>();
 
             LoadImageCommand = new AsyncRelayCommand(LoadImage);
             ClearImageCommand = new AsyncRelayCommand(ClearImage);
+            MaskModeCommand = new AsyncRelayCommand(MaskMode);
+            SaveMaskCommand = new AsyncRelayCommand(SaveMask);
             InitializeComponent();
         }
 
         public AsyncRelayCommand LoadImageCommand { get; }
         public AsyncRelayCommand ClearImageCommand { get; }
+        public AsyncRelayCommand MaskModeCommand { get; }
+        public AsyncRelayCommand SaveMaskCommand { get; }
 
         public ImageInput Result
         {
@@ -37,6 +51,14 @@ public ImageInput Result
         public static readonly DependencyProperty ResultProperty =
             DependencyProperty.Register("Result", typeof(ImageInput), typeof(ImageInputControl));
 
+        public ImageInput MaskResult
+        {
+            get { return (ImageInput)GetValue(MaskResultProperty); }
+            set { SetValue(MaskResultProperty, value); }
+        }
+
+        public static readonly DependencyProperty MaskResultProperty =
+            DependencyProperty.Register("MaskResult", typeof(ImageInput), typeof(ImageInputControl));
 
         public SchedulerOptionsModel SchedulerOptions
         {
@@ -47,7 +69,6 @@ public SchedulerOptionsModel SchedulerOptions
         public static readonly DependencyProperty SchedulerOptionsProperty =
             DependencyProperty.Register("SchedulerOptions", typeof(SchedulerOptionsModel), typeof(ImageInputControl));
 
-
         public bool HasResult
         {
             get { return (bool)GetValue(HasResultProperty); }
@@ -57,7 +78,60 @@ public bool HasResult
         public static readonly DependencyProperty HasResultProperty =
             DependencyProperty.Register("HasResult", typeof(bool), typeof(ImageInputControl));
 
+        public bool HasMaskResult
+        {
+            get { return (bool)GetValue(HasMaskResultProperty); }
+            set { SetValue(HasMaskResultProperty, value); }
+        }
+
+        public static readonly DependencyProperty HasMaskResultProperty =
+            DependencyProperty.Register("HasMaskResult", typeof(bool), typeof(ImageInputControl));
+
+        public bool IsMaskEnabled
+        {
+            get { return (bool)GetValue(IsMaskEnabledProperty); }
+            set { SetValue(IsMaskEnabledProperty, value); }
+        }
+
+        // Using a DependencyProperty as the backing store for IsMaskEnabled.  This enables animation, styling, binding, etc...
+        public static readonly DependencyProperty IsMaskEnabledProperty =
+            DependencyProperty.Register("IsMaskEnabled", typeof(bool), typeof(ImageInputControl));
+
+
+        public InkCanvasEditingMode MaskEditingMode
+        {
+            get { return _maskEditingMode; }
+            set { _maskEditingMode = value; NotifyPropertyChanged(); }
+        }
+
+        public DrawingAttributes MaskAttributes
+        {
+            get { return _maskAttributes; }
+            set { _maskAttributes = value; NotifyPropertyChanged(); }
+        }
+
+        public bool IsMaskEraserEnabled
+        {
+            get { return _isMaskEraserEnabled; }
+            set { _isMaskEraserEnabled = value; NotifyPropertyChanged(); }
+        }
+
+        public int MaskDrawSize
+        {
+            get { return _maskDrawSize; }
+            set
+            {
+                _maskDrawSize = value;
+                NotifyPropertyChanged();
+                UpdateMaskAttributes();
+            }
+        }
+
 
+        /// <summary>
+        /// Loads the image.
+        /// </summary>
+        /// <returns></returns>
         private Task LoadImage()
         {
             var loadImageDialog = _dialogService.GetDialog<CropImageDialog>();
@@ -75,13 +149,93 @@ private Task LoadImage()
         }
 
 
+        /// <summary>
+        /// Clears the image.
+        /// </summary>
+        /// <returns></returns>
         private Task ClearImage()
         {
             Result = null;
+            MaskResult = null;
             HasResult = false;
+            HasMaskResult = false;
+            MaskCanvas.Strokes.Clear();
+            IsMaskEraserEnabled = false;
+            MaskEditingMode = InkCanvasEditingMode.Ink;
             return Task.CompletedTask;
         }
 
+
+        /// <summary>
+        /// Saves the mask.
+        /// </summary>
+        /// <returns></returns>
+        private Task SaveMask()
+        {
+            MaskResult = new ImageInput
+            {
+                Image = CreateMaskImage(),
+                FileName = "OnnxStack Generated Mask",
+            };
+            HasMaskResult = true;
+            return Task.CompletedTask;
+        }
+
+
+        /// <summary>
+        /// Change Masks mode.
+        /// </summary>
+        /// <returns></returns>
+        private Task MaskMode()
+        {
+            if (_isMaskEraserEnabled)
+            {
+                IsMaskEraserEnabled = false;
+                MaskEditingMode = InkCanvasEditingMode.Ink;
+            }
+            else
+            {
+                IsMaskEraserEnabled = true;
+                MaskEditingMode = InkCanvasEditingMode.EraseByPoint;
+            }
+            return Task.CompletedTask;
+        }
+
+
+        /// <summary>
+        /// Updates the mask attributes.
+        /// </summary>
+        private void UpdateMaskAttributes()
+        {
+            MaskAttributes = new DrawingAttributes
+            {
+                Color = Colors.Black,
+                Height = _maskDrawSize,
+                Width = _maskDrawSize,
+            };
+        }
+
+
+        /// <summary>
+        /// Creates the mask image.
+        /// </summary>
+        /// <returns></returns>
+        public BitmapSource CreateMaskImage()
+        {
+            // Create a RenderTargetBitmap to render the Canvas content.
+            var renderBitmap = new RenderTargetBitmap((int)MaskCanvas.ActualWidth, (int)MaskCanvas.ActualHeight, 96, 96, PixelFormats.Pbgra32);
+
+            // Make a drawing visual to render.
+            var visual = new DrawingVisual();
+            using (DrawingContext context = visual.RenderOpen())
+            {
+                VisualBrush brush = new VisualBrush(MaskCanvas);
+                context.DrawRectangle(brush, null, new Rect(new Point(0, 0), new Point(MaskCanvas.ActualWidth, MaskCanvas.ActualHeight)));
+            }
+            renderBitmap.Render(visual);
+            return renderBitmap;
+        }
+
         #region INotifyPropertyChanged
         public event PropertyChangedEventHandler PropertyChanged;
         public void NotifyPropertyChanged([CallerMemberName] string property = "")
diff --git a/OnnxStack.UI/Views/ImageToImage.xaml b/OnnxStack.UI/Views/ImageToImage.xaml
@@ -46,7 +46,8 @@
                             <userControls:ImageInputControl 
                                 Result="{Binding InputImage, Mode=TwoWay}" 
                                 HasResult="{Binding HasInputResult, Mode=TwoWay}" 
-                                SchedulerOptions="{Binding SchedulerOptions}" />
+                                SchedulerOptions="{Binding SchedulerOptions}"
+                                IsMaskEnabled="False"/>
                         </Viewbox>
                         <Viewbox Margin="20,40,40,40" >
                             <userControls:ImageResultControl 
