ChatGPTでプログラム生成③

ChatGPTへ質問し、WPFへ対応したプログラムを生成します。

ChatGPTへ追加質問

ChatGPTでプログラム生成①
arques.hatenablog.com
の質問に続き、以下の追加質問を行います。

wpfへ対応させて

Visual Studio でプロジェクトの生成

ChatGPTの案内に従い、Visual Studiowpf対応のプロジェクトを生成します。Visual Studio が生成した初期コードを示します。

MainWindow.xaml

Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

MainWindow.xaml.cs

using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

ChatGPTが生成したソースリスト

質問を行うことによって、ChatGPTが生成されたソースリストを示します。

MainWindow.xaml

<Window x:Class="WpfOpenCvSharp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="OpenCvSharp WPF Sample" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Image x:Name="imageControl" Grid.Row="0" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10"/>

        <Button Grid.Row="1" Content="Load Image" Click="LoadImage_Click" HorizontalAlignment="Center" Margin="10"/>
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Windows;
using Microsoft.Win32;
using OpenCvSharp;
using OpenCvSharp.WpfExtensions;

namespace WpfOpenCvSharp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void LoadImage_Click(object sender, RoutedEventArgs e)
        {
            OpenFileDialog openFileDialog = new OpenFileDialog();
            openFileDialog.Filter = "Image files (*.jpg, *.jpeg, *.png) | *.jpg; *.jpeg; *.png";

            if (openFileDialog.ShowDialog() == true)
            {
                string imagePath = openFileDialog.FileName;

                Mat image = Cv2.ImRead(imagePath, ImreadModes.Color);
                if (image.Empty())
                {
                    MessageBox.Show("Failed to load image.");
                    return;
                }

                imageControl.Source = image.ToBitmapSource();
            }
        }
    }
}

ソースコード変更

Visual Studio が生成したソースコードへChatGPTが回答したコードを埋め込み、少しだけ変更します。

MainWindow.xaml

Visual Studio が生成したxamlファイルにChatGPTが生成したコードを埋め込みます。埋め込むのは、ChatGPTが生成した<Grid></Grid>の間のコードをVisual Studio が生成した<Grid></Grid>の間へ差し込みます。

 <Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Image x:Name="imageControl" Grid.Row="0" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10"/>

        <Button Grid.Row="1" Content="Load Image" Click="LoadImage_Click" HorizontalAlignment="Center" Margin="10"/>

    </Grid>
</Window>

外観も示します。

MainWindow.xaml.cs

ChatGPTが生成したコードをVisual Studio が生成したコードと差し替えますが、少し変更が必要です。

using System;
using System.Windows;
using Microsoft.Win32;
using OpenCvSharp;
using OpenCvSharp.WpfExtensions;

//namespace WpfOpenCvSharp
namespace WpfApp1
{
    //public partial class MainWindow : Window
    public partial class MainWindow : System.Windows.Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void LoadImage_Click(object sender, RoutedEventArgs e)
        {
            OpenFileDialog openFileDialog = new OpenFileDialog();
            openFileDialog.Filter = "Image files (*.jpg, *.jpeg, *.png) | *.jpg; *.jpeg; *.png";

            if (openFileDialog.ShowDialog() == true)
            {
                string imagePath = openFileDialog.FileName;

                Mat image = Cv2.ImRead(imagePath, ImreadModes.Color);
                if (image.Empty())
                {
                    MessageBox.Show("Failed to load image.");
                    return;
                }

                imageControl.Source = image.ToBitmapSource();
            }
        }
    }
}

まず、ネームスペースがChatGPTが生成したコードとVisual Studio が生成したコードで異なりますので、Visual Studio が生成したコードへ合わせます。

namespace WpfOpenCvSharp

namespace WpfApp1

へ変更します。

さらに、Window名前空間で競合するため、

public partial class MainWindow : Window

public partial class MainWindow : System.Windows.Window

へ変更します。これはWindowがSystem.WindowsとOpenCVSharpで競合するためです。
二行のみの変更です、両方とも元のコードをコメントとして残しました。


プロジェクトの生成方法やNuGetでOpenCVSharpを導入する方法はChatGPTの回答を参照してください。ChatGPTの回答では、NuGetでOpenCvSharp4.WpfExtensionsのみ導入するように指定されましたが、OpenCvSharp4.Windowsの導入も必要でした。
Wpfの方が、デザイナーなどで変更する必要が無いためChatGPTと相性が良さそうな気がします。基本的に気を付けることは、ベースのプロジェクトをVisual Studio で生成するため、namespaceやクラス名がChatGPTの示したコードことなるため、この点に注意を払うだけで良さそうに感じました。

ビルド&実行

このプログラムをビルド&実行した様子を示します。

ボタンを押すとダイアログが現れます。

指定した画像が表示されます。

ほんの数分でC#からOpenCVを利用する簡単なwpfプログラムを作ることができます。
ChatGPTは凄いなぁ!!!

ChatGPT 3.5を利用しました。