AI ChatGPT(5)、人気のエディタVSCとChatGPT

「AI ChatGPT(5)、人気のエディタVSCとChatGPT」

プロローグ

これまでは、「秀丸」エディタで、文書もプログラムソースも編集していましたが、
やはりソースは、文書とは別のエディタがいいですね。
※秀丸でも、ソースのカラー表示(キーワード等の区別)は可能でしたが・・・。

参考URL:今回は人気のテキストエディタ『Visual Studio Code』のインストール方法と、・・・。
https://miya-system-works.com/blog/detail/vscode-install/

○VS Codeの特徴

○「拡張機能」によりさまざまな機能の追加の余地がある
    ○macOS、Windows、Linuxといった主要なプラットフォームをサポートする
    ○Git連携機能を使える
    ○メジャーな多くのプログラミング言語でシンタックスハイライトが使える
    シンタックスハイライトとは、テキストエディタなどの文字表示に関する機能の一つで、あらかじめ指定された文中の特定の記号やキーワードなどを他とは異なる色で表示すること。
スニペット機能が利用できる
    スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。
    自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。
インテリセンス(補完機能)が使える
    IntelliSense とは、メンバーの一覧、パラメーター ヒント、クイック ヒント、入力候補など多数の機能を含むコード補完機能です。
    これらの機能により、使用中のコードに関する情報の確認、入力中のパラメーターの追跡、プロパティおよびメソッドの呼び出しの追加などが、わずかなキーストロークで可能になります。
○『拡張機能』という仕組みで機能を自由にカスタマイズできる

VisualStudioCodeのインストール

○ダウンロード
ダウンロードしたファイル:VSCodeUserSetup-x64-1.76.2.exe

○VisualStudioCodeのイメージ、入力補完機能、便利そうですね!
※インストール例です、このようなイメージのエディタです。

○インストール

○日本語化
インストール時に、日本語化まで実施できますが、私は実施しませんでした。
※私は、再起動を勘違い(Windows10かと勘違い)して、ここに記述するように、「拡張機能」から日本語化しました。

○日本語化されました、しかもカラフルで見やすいです、やる気がでます。

ChatGPTをインストール

参考URL:VisualStudioCodeの拡張機能を使用して、ChatGPTをインストールします。
VSCodeにChatGPTの拡張機能を入れてコードレビューやバグを発見してもらう

https://qiita.com/tak001/items/c3000b3ce9b6e72b2ae5
※事前に、OpenAIへのアカウント登録が必要です。
「AI ChatGPT(1)、いまもっともホットな話題」を参照して下さい。

○ChatGPTの拡張モジュールについて
公式なアマウンスとしては、以下を参照して下さい。

「VisualStudioMarketplace:からChatGTP[deprecated]が削除されました。
※2023/03/22日
https://marketplace.visualstudio.com/items?itemName=gencay.vscode-chatgpt
なお、代替手段として「ChatGPT – Genie AI」が記載されていました。

上記に記したように、「ChatGPT(deprecated)」をインストールしましたが、どうも「ChatGPT」は
「deprecated」となってしまったようです。
これに気がついたのは、「Find bugs」コマンドがショートカットメニューになかったためです。
最終的には、「ChatGPT – Genie API」をインストールしました。
また、「Find bugs」コマンド実行すると、今後はAPIKEYが未設定というエラーが表示されました。
所がいくら見ても、APIKEYを設定する場所が見つかりません。

○「ChatGPT – Genie API」のインストール

○「ChatGPT – Genie API」の設定

○重要な設定です
「Model」の設定です、これで請求される料金が大きく違ってきますので、超重要です。
まあ、既定値(gpt-3.5-turbo)のままの設定でいいです。
「gpt-3.5-turbo」の言語モデルの利用は1000トークンあたり0.002ドルと、日本円で0.27円ととても安価です。

現行のOpen AIの文章生成APIで同じGPT-3.5系で、最も高性能なモデルであるDavinciの1/10になっています。

※「ChatGPT[deprecated]」では、「METHOD」項目で「Browser」という「無料」の選択肢がありましたが、
※「ChatGPT – Genie API」では、「Model」しか選択肢がないようです。


使用料が一番安いモデルを選択します。
既定値の「gpt-3.5-turbo」のままにします。

財布事情の方は、無料の「code-davinci-002」等でしょう。

但し、有料/無料は時期により変わるかも知れません。

○モデルごとの料金について(詳細)
○料金:公式のページ:https://openai.com/pricing
※参考URL:VSCode 拡張機能 ChatGPT – Genie AI を使用するための下準備。
モデル選択や日本語化等(Windows版 gpt-4対応)
※https://qiita.com/masakinihirota/items/27ef33b9edf4aa58fabd

GPT-3 モデル 素直な作業ができる、非常に速い、コストが低い。

対応モデル名 補足 有料/無料
GPT-4 2023年3月15日に公開 有料
GPT-4-03-14 有料
GPT-4-32K 有料
GPT-4-32K-03-14 有料
gpt-3.5-turbo
既定値
text-davinci-003 の 1/10 のコストで、
GPT-3.5 の最高性能モデル
有料
gpt-3.5-turbo-0301 2023 年 3 月 1 日のモデル。
この日時に情報が固定されたモデル。
有料
text-davinci-003 有料
text-curie-001 GPT-3 モデル 非常に高機能で、
Davinci より高速で低価格。
有料
text-babbage-001 有料
text-ada-001 通常 GPT-3 シリーズの中で最も高速な
モデルであり、最も低価格です。
有料
code-davinci-002 code-davinci-002 限定ベータ期間中は無料 無料
code-cushman-001 限定ベータ期間中は無料
Davinci Codex
とほぼ同じ性能ですが、若干高速です
無料


※GPT3.5とGPT4の違いは:例えとして、能力的には gpt-3.5-turbo は高校生レベルの英会話ができる人ですが、GPT-4 は大学教授レベルの英語ができる人です。お金に余裕があれば、当然GPT4を使うべきです。
※gpt-3.5-turbo最新モデルはスピードがcode-davinci-002モデルより体感で 100 倍 早いです、ただし有料。

Pythonの設定

○pyhton拡張モジュールのインストール

○pyhton拡張モジュールの設定
   python環境の設定&pythonの実行

○python言語でChatGPTAPIを叩いています。

import os
os.environ["OPENAI_API_KEY"] = "sk-・・・・・・・・・・・"

import openai

response = openai.ChatCompletion.create(
  model="gpt-3.5-turbo",
  messages=[
    {"role": "system", "content": "あなたは役に立つアシスタントです。"},
    {"role": "user", "content": "2021年の日本シリーズで優勝したのは?"},
    {"role": "assistant", "content": "2021年の日本シリーズで優勝したのは、東京ヤクルトスワローズです。"},
    {"role": "user", "content": "その球団の本拠地はどこですか?"}
  ]
)
print(response["choices"][0]["message"]["content"])
print(response)

ChatGPTにpythonプログラムをレビューして貰います。

○これって、本当に驚きです、作成したpyhtonプログラムをChatGPTにレビューしてもらいます:
本当です、以下のレビューです:
・pythonコードにバグがないかChatGPTにチェックしてもらいます。
・pythonコードに必要なコメントをChatGPTに追加してもいます。
・pythonコードをChatGPTに説明してもらいます。
・pythonコードをChatGPTに最適化してもらいます。
・pythonコードをChatGPTに補完(次に入力すべきコードの候補を自動的に表示)してもらいます。

○「ChatGPT – Genie API」の「Genie」コマンドを使ってみます
このコマンドを使用するには、ソースを選択して、右クリックします。

○「Genie:Find bugs」
   ソースにバグがないかChatGPTに確認してもらいます。

○「Genie:Optimize」
   ソースをChatGPTに最適化してもらいます。

○「Genie:Expain」
○「Genie:Optimize」
   ソースプログラムをChatGPTに説明してもらいます。

○「Genie:Adds Commennt」
○「Genie:Optimize」
   ソースにコメントを、ChatGPTに付けてもらいます。

○「Genie:Complete code」
○「Genie:Optimize」
   完全なるソースをChatGPTにコード化してもらいます。

○「Genie:Add tests」

○「Genie:Optimize」
   単体テストプログラムをChatGPTに作成してもらいます。

○「openai.ChatCompletion.create()とは」
   上記関数をChatGPTに説明してもらいます。

PHP言語の拡張インストール

OpenAI社では、PHP言語用のライブラリは用意していないので、ChatGPT APIは
「curl」ライブラリで実装します。
○PHP拡張のインストール(PHP Intelephense)

○PHP拡張のインストール(PHP All-One PHP support)

○PHPプログラムのレビュー

○pyhton言語と同様にPHPコードレビューが可能です。
※pythonと同様なので、詳細は省略します。
・Genie:Add tests
・Genie:Find bugs
・Genie:Optimize
・Genie:Explain
・Genie:Add comments
・Genie:Complete code

○PHPプログラムの実行

・「表示」「ターミナル」からターミナルを開きます。
・ターミナル・ウィンドウで、phpコマンドを入力します。
・【例】(base) C:\Users\shim1/ChatGPT> C:\xammp\php/php.exe CHatGPT4.php
・私の環境ではウィルスチェックから警告がでました、例外を追加。

○PHP言語でChatGPTAPIを叩いています。

 'gpt-3.5-turbo',
        'messages'  => [json_decode($msg, true)]
    );

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, 'https://api.openai.com/v1/chat/completions');
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $response = curl_exec($ch);

    curl_close($ch);
    $response_data = json_decode($response, true);

    if (isset($response_data['choices'][0]['message']['content'])) {
        echo trim($response_data['choices'][0]['message']['content']);

    }
}

$prompt = 'Welcome to ChatGPT.';
send_prompt($prompt);

○PHP WEBアプリケーションを実行する場合。
○まず、拡張機能「PHP Server」をインストールします。

○VSCにPHPパスを設定する

○PHP WEBアプリの実行
以下のいずれかで、実行できます。

HTMLの拡張インストール

○HTML拡張のインストール

○Browser拡張のインストール
    HTMLファイルを実行するために、Browser拡張のインストールが必要です。

○Brower拡張によるHTMLファイルの実行

著者:志村佳昭(株式会社トリニタス 技術顧問)