【C# GUI】WPFのGUIで、pythonバックエンド

ここでは、C#のGUIのフレームワークであるWPFのサンプルプログラムを、ChatGPTの力を借りながら、作ったサンプルコードをまとめています。実行可能であることは確認していますが、WPF初学者の私がChatGPTと作っているので、ベストな方法ではないかもしれませんので、ご了承ください。

はじめに

機械学習系のプログラムはやっぱりPythonが便利ですが、GUIが備わったアプリを作ろうと思うと、Python標準のGUIライブラリ、tkinter のルックスが今一つだったりします。

そこで、メインの計算はPythonでやらせて、GUIはC#のWPFで作るということができると、ちょっといいかなと思ったりします。

そこで、ChatGPTと相談しながら、サンプルプログラムを作りました。

構成は？

まず、どういうフレームワークで作ればよいか聞いてみました。

バックエンドをpythonでつくり、GUIをWPFで作るという方法を考えます。初学者にとって一番わかりやすい構成を考えてください。

すると、バックエンドにはFlaskを使うといいよと教えてくれました。

初学者にとってわかりやすい構成として、PythonのバックエンドとしてFlaskを使用し、WPFを使用してGUIを構築する方法を考えてみましょう。以下はその基本的な手順です。

… 省略

PythonバックエンドのWPFアプリ

プロンプト

以下のプロンプトを入力しました。

バックエンドをpython+Flaskでつくり、GUIをWPFで作るという構成を考えます。
そのサンプルとして以下の仕様ようなアプリを作ります。

GUI
＋入力テキストボックス
＋出力テキストボックス
＋「2乗を計算する」ボタン

動作
＋入力テキストボックスに数値(浮動小数点)を入れると、バックエンドのpythonプログラムがその数値の2乗を計算し、その答えが出力テキストボックスに表示される。

条件
＋pythonコードは、pyton3.8を想定し、Flaskを使ってください。
＋WPFは、Visual Studio Express 2017を使用することを想定してください。

要求
＋以上の仕様を満たすアプリのコード（xaml, xaml.cs, python）を丁寧なコメントを入れて作ってください。
＋ライブラリーを使用する場合には、ライブラリーのインストール方法も教えてください。

ChatGPTの出力

まず、Python側のプログラムです。

# backend.py
from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/calculate_square', methods=['POST'])
def calculate_square():
    data = request.json
    number = data['number']
    result = number ** 2
    return jsonify({'result': result})

if __name__ == '__main__':
    app.run(debug=True)

# backend.py

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/calculate_square', methods=['POST'])

def calculate_square():

data = request.json

number = data['number']

result = number ** 2

return jsonify({'result': result})

if __name__ == '__main__':

app.run(debug=True)

MainWindow.xamlです。

<Window x:Class="CalculatorApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Calculator" Height="250" Width="400">
    <Grid>
        <TextBox Name="inputTextBox" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20" Width="100"/>
        <Button Name="calculateButton" Content="2乗を計算する" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="130,20,0,0" Width="120" Click="CalculateButton_Click"/>
        <TextBox Name="outputTextBox" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20,60,0,0" Width="300" Height="100" IsReadOnly="True"/>
    </Grid>
</Window>

<Window x:Class="CalculatorApp.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Calculator" Height="250" Width="400">

<Grid>

</Grid>

</Window>

MainWindow.xaml.csです。

using System;
using System.Net.Http;
using System.Text;
using System.Windows;

namespace CalculatorApp
{
    public partial class MainWindow : Window
    {
        private const string BackendUrl = "http://localhost:5000/calculate_square"; // Replace with your backend URL

        public MainWindow()
        {
            InitializeComponent();
        }

        private async void CalculateButton_Click(object sender, RoutedEventArgs e)
        {
            if (double.TryParse(inputTextBox.Text, out double number))
            {
                using (var client = new HttpClient())
                {
                    var data = new { number = number };
                    var json = Newtonsoft.Json.JsonConvert.SerializeObject(data);
                    var content = new StringContent(json, Encoding.UTF8, "application/json");

                    var response = await client.PostAsync(BackendUrl, content);
                    var responseJson = await response.Content.ReadAsStringAsync();
                    dynamic resultData = Newtonsoft.Json.JsonConvert.DeserializeObject(responseJson);
                    double result = resultData.result;

                    outputTextBox.Text = $"入力の2乗: {result}";
                }
            }
            else
            {
                outputTextBox.Text = "有効な数値を入力してください。";
            }
        }
    }
}

using System;

using System.Net.Http;

using System.Text;

using System.Windows;

namespace CalculatorApp

{

public partial class MainWindow : Window

{

private const string BackendUrl = "http://localhost:5000/calculate_square"; // Replace with your backend URL

public MainWindow()

{

InitializeComponent();

}

private async void CalculateButton_Click(object sender, RoutedEventArgs e)

{

if (double.TryParse(inputTextBox.Text, out double number))

{

using (var client = new HttpClient())

{

var data = new { number = number };

var json = Newtonsoft.Json.JsonConvert.SerializeObject(data);

var content = new StringContent(json, Encoding.UTF8, "application/json");

var response = await client.PostAsync(BackendUrl, content);

var responseJson = await response.Content.ReadAsStringAsync();

dynamic resultData = Newtonsoft.Json.JsonConvert.DeserializeObject(responseJson);

double result = resultData.result;

outputTextBox.Text = $"入力の2乗: {result}";

}

else

{

outputTextBox.Text = "有効な数値を入力してください。";

}

実行

Python環境には、”pip install Flask”でFlaskをインストールして、”python background.py” でプログラムを実行します。

Visual Studio側では、MainWindow.xamlとMainWindow.xaml.cs をコピペで作り実行します。

その結果、次のようなGUIが表示されました。

上のテキストボックスに11.11と入れて、「2乗を計算する」を押すと、下に「入力の2乗：123.4321」と答えが表示されました。

ちゃんと動いているようです。

月	火	水	木	金	土	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

ブログ

はじめに

構成は？

PythonバックエンドのWPFアプリ

プロンプト

ChatGPTの出力

実行

コメントを残すコメントをキャンセル

カテゴリー

Count per Day

ブログ

【C# GUI】WPFのGUIで、pythonバックエンド

はじめに

構成は？

PythonバックエンドのWPFアプリ

プロンプト

ChatGPTの出力

実行

コメントを残す コメントをキャンセル

カテゴリー

Count per Day

コメントを残すコメントをキャンセル