AI Chat Playgroundと自作UIライブラリでつくるひみつ道具！生成AIでMATLABはネコ型ロボットに？

## はじめに
今年は、ChatGPTなどの生成AIが急速に進展し、話題となりました。最近では、Mathworks社のMATLABコミュニティサイトで、MATLABに特化したAI Chat Playgroundが公開されています。
MATLABと生成AIでどんなことができるのか？
MATLAB Homeユーザーの目線で、・・・できたらいいなぁ♬...と！あれこれ、考え、試みたことをまとめてみたいと思います:grin:

## パーソナルコンピュータからパーソナルAIへ

初期の家庭用パーソナルコンピュータは、電源を起動すると、Basic言語が立ち上がりました。インタープリタ言語のひとつであるBASICの登場により、コマンドプロンプトから対話的にコマンドを実行したり、プログラムを作成することができるようになりました。これにより、ユーザー自身でオリジナルゲームやソフトを作れるようになり、一部の人の間でブームとなりました。
その後、Windows95の登場で、GUI(Graphical User Interface)が主流となりましたが、MATLABは、より進化したCUI(Character User Interface)も存続しています。
ChatGPTの登場で、AIの専門家でなくても、プロンプトから自然言語で会話することで、AIに問題を解かせたり、文章やプログラムをつくることも可能となりました。
世界中の人々が、今再び、このプロンプトに熱狂しています。現在のChatGPTは、パーソナルAIの初期のユーザーインターフェースなのかもしれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329764/eccfa7f0-eded-7f1e-5574-e780339f2cf2.png)

https://chat.openai.com/


## LLM(Large Language Models)について
- LLMは、言葉（トークン）入力し、言葉を出力する大規模なニューラルネットワークモデルで、膨大なデータを使ってトレーニングされています。
- ディープラーニングのTransformer技術により、自然言語処理が飛躍的に向上し、専門家のように振る舞うレベルまで進化しています。
- 短期記憶に相当するコンテキストウインドウに、会話のやりとりを保持しています。対話をしながら、アウトプットの精度を上げたり、リセットして一から会話をやり直すことも可能です。
- プロンプトに、自作ライブラリの説明やサンプルコードを入れることで、あたかも、その知識をもっているかのように回答させることが可能です。

## AI Chat Playground
MATLABアカウントから利用できる、MATLABに特化した生成AIです。
さっそくですが、プロンプトを作って試してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329764/23fa27c5-ce34-0f50-f3d9-33f56a6c98d7.png)

[AI Chat Playground](https://jp.mathworks.com/matlabcentral/playground/new)


~~~
次のMATLABコードを生成してください
- 次の計算式をステップ時間0.1sec,10sec実行
- y= sin(t)
- 波形をアニメーションで表示
- アニメーションgifで保存
~~~
生成されたコード
実行すると、以下のようになります。
~~~matlab
t = 0:0.1:10;
y = sin(t);
for i = 1:length(t)
    plot(t(1:i), y(1:i), 'LineWidth', 2);
    xlabel('Time (sec)');
    ylabel('Amplitude');
    ylim([-1.2 1.2]);
    grid on;
    drawnow;
    frame = getframe(1);
    im{i} = frame2im(frame);
end
imw(im{1}, 'animation.gif', 'gif', 'Loopcount', inf, 'DelayTime', 0.1);
for i = 2:length(t)
    imwrite(im{i}, 'animation.gif', 'gif', 'WriteMode', 'append', 'DelayTime', 0.1);
end

~~~



![sine_wave_animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329764/1cf8bf91-1dee-8f8b-dc22-3421d58cc82a.gif)

AI Chat playgroundについても、聞いてみます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329764/11876316-8340-d54a-57dd-6a3e4ca2927c.png)


MATLABに関する質問にのみ答えるという役割に設定されてるようです...しかしながら、次のようにPythonコードをMATLABへ変換するといったことも可能なようです。これは便利！:sunglasses:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329764/03c42689-73e1-5225-cb62-924f40fc9e56.png)

プロンプト
~~~
以下のPythonコードをMATLABに変換してください
import numpy as np

# 行列AとBを定義
A = np.array([[1, 2], [3, 4]])
B = np.array([[2, 0], [1, 3]])

# 計算結果を出力
print("A =\n", A)
print("B =\n", B)
print("A + B =\n", A + B)
print("A - B =\n", A - B)
print("A * B =\n", np.dot(A, B))
print("Inverse of A =\n", np.linalg.inv(A))
print("Determinant of A =", np.linalg.det(A))
~~~

AI Chat playgroundによる出力
~~~ matlab
% Define matrices A and B
A = [1 2; 3 4];
B = [2 0; 1 3];

% Calculate and display results
disp('A =');
disp(A);
disp('B =');
disp(B);
disp('A + B =');
disp(A + B);
disp('A - B =');
disp(A - B);
disp('A * B =');
disp(A * B);
disp('Inverse of A =');
disp(inv(A));
disp('data:ant of A =');
disp(det(A));

~~~


## UIを含むコード生成の課題
LLMを使えば、自然言語からGUIを使ったツールを生成することもできそうです。
しかしながら、ユーザーインターフェースのコマンドを含むコードを生成させると、レイアウトの配置が問題になる場合があります。

プロンプト
~~~
以下のMATLABコードを生成してください
- 数値入力スライダーのUIでパラメータA,B,Cを入力
-スライダーの横にパラメータ名を表示
- A+B+Cを表示
~~~

生成コード
~~~matlab
% 数値入力スライダーのUIでパラメータA,B,Cを入力
f = figure;
sld1 = uicontrol('Style', 'slider', 'Min',0,'Max',1,'Value',0.5,'Position', [400 400 120 20]);
sld2 = uicontrol('Style', 'slider', 'Min',0,'Max',1,'Value',0.5,'Position', [400 350 120 20]);
sld3 = uicontrol('Style', 'slider', 'Min',0,'Max',1,'Value',0.5,'Position', [400 300 120 20]);

% スライダーの横にパラメータ名を表示
txt1 = uicontrol('Style','text','Position',[250 400 120 20],'String','A');
txt2 = uicontrol('Style','text','Position',[250 350 120 20],'String','B');
txt3 = uicontrol('Style','text','Position',[250 300 120 20],'String','C');

% A+B+Cを表示
btn = uicontrol('Style', 'pushbutton', 'String', 'Calculate', 'Position', [400 250 120 20],...
    'Callback', @(~,~)disp(get(sld1,'Value')+get(sld2,'Value')+get(sld3,'Value')));
~~~
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329764/5702d46a-60ae-027b-c3cc-4123b095a788.png)

uicontrol関数だと、なんとなくそれらしい、決め打ちのPositionが設定されたコードが生成されます。見た目のレイアウトを自然言語で指示するのは大変です。マルチモーダルのAIが進化すれば、何れ解決するかもしれませんが...

## UIライブラリ ParamUI
https://jp.mathworks.com/matlabcentral/fileexchange/130169-paramui_matlab

LLMでUIを含むコードを作成しやすくするため、自作したライブラリです。
パラメータテーブルというシンプルな表からUIを生成するため、レイアウトを気にせず、短いコードでGUIアプリを作成できます。

~~~matlab
ParameterTable = { 
    'A', 'Parameter A', 0.5, [0, 1, 0.1];
    'B', 'Parameter B', 150, [100, 500, 10];
    'Run', 'Run!', false, 'button';
 };

paramui(ParameterTable, @usrFunc);

%Define user function
function usrFunc(prm)
    if prm.Run
        disp(prm);
    end
end
~~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329764/9515982b-353a-9bb3-a99d-6bc70686fbb6.png)

## 生成AIと自作UIライブラリでひみつ道具をつくってみる

### 1. みらいスコープ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329764/ebc8e2f4-697c-c9e0-83ca-f27a45bfb9d0.png)


未来の時間のデータを見ることができるオシロスコープを想定
本家ネコ型ロボットのポケットから、いかにも出てきそうなアイテム...:sunglasses:

プロンプト
~~~
以下のMATLABコードを生成してください

- 未来のデータを予測するオシロスコープ
- 予測するための波形を生成する
- 減衰波、複数の周波数成分を含む
- 生成波形はパラメータをチューニングできる
- 生成波形のx秒先を予測
- 予測アルゴリズムをいくつかの中から選択できる
- 予測前と予測後の波形をプロットを重ね書き表示
- 以下のParamUIライブラリとテンプレートを使う

# External library for MATLAB
paramui(ParameterTable, UsrFunc)
- Processing: Create UI from ParameterTable, assign UI parts values to Prm structure, call user function
- Input: ParameterTable, UsrFunc
  - ParameterTable: Containing the following Columns
     PrameterVariable, ParameterLabel, InitialValue, Range(Slider:[Min,Max,Step], Selecter:{'A','B'...}, FileName:'*.txt;*.doc', Folder:'folder')
  - Example:  PrameterVariable = {'A1','Num 1',0.5, [0, 1, 0.1];'F1','Flag 1',true,[];'Run','Run !',false,'button';'S1','Select 1','Two',{'One','Two','Three'};'Name','Name 1','Taro',[]; }
  - Prm structure definition Prm.(ParameterVariable)
       Example: Prm.A1=0.5, Prm.F1=false, Prm.Text='Taro',Prm.S1='Two', Prm.Run=true
   - UsrFunc: Function handle Example: UserFunc = @(Prm) disp(Prm)
            
# Code Template
~~~ matlab
%Loop & get UI parameters  
PrameterTable = {'A1','Num 1',0.5, [0, 1, 0.1];'Run','Run!',False,'button'}
pu = paramui(ParameterTable);
while pu.IsAlive
    if pu.Prm.Run
        disp(pu.Prm); # Write user code
        Prm.Run = false;
    end
end
~~~


### 2. つみほろ星

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329764/1334b5df-2d3d-1209-260a-14d243887f6e.png)

一年間ほとんど利用せず、積んだままとなっているToolBoxの活用法を提案してくれる:relaxed:かわいいキャラクターを想定
ポチってしまったが、使いこなせてない...罪悪感を解消してくれる:sweat_smile:

プロンプト
~~~
MATLABで以下の要件のサンプルコードを提案してください
- 以下のparamuiライブラリとテンプレートを使う
- Image Processing Toolboxを使う

# ParamUI library
paramui(ParameterTable, UsrFunc)
- Processing: Create UI from ParameterTable, assign UI parts values to Prm structure, call user function
# Code Template
ParameterTable = { 
    'A', 'Parameter A', 0.5, [0, 1, 0.1];
    'B', 'Parameter B', 150, [100, 500, 10];
    'Run', 'Run!', false, 'button';
 };
paramui(ParameterTable, @usrFunc);
%Define user function
function usrFunc(prm)
    if prm.Run
        disp(prm);
    end
end
~~~


## さいごに
期待どおりのコードがなかなか出てこない場合もあり、プロンプトに試行錯誤することもありますが、様々なLLMが登場し、性能は向上し続けています。
最新のGoogle Bardでは、Gemini Proエンジンへのアップデートで、MATLABのコード生成が以前よりかなりよくなった気がします。
現在のChatGPT4では、Advanced Analysisを使うと、Pythonコードの生成と実行を行い、実行エラーが出るとデバッグまで自動で行ってくれます。これは強力な機能で、MATLABでも同様のことが、将来できるようになるのかもしれません。