CHATGPTにてRedmine view customizerのHTML要素を生成する(1)

Last updated at 2024-05-30Posted at 2023-07-09

本題

　表題の検討について、コードの原型が出来上がった。
今回のポイントとしては、

CHATGPTのAPIトークンは、REDMINEの個人情報に記載
　→　つまりAPIコール時に誰がアクセスしたのかを分かり易くする
REDMINEからは自由質問をさせて、質問に応じてHTMLを返す
　→　質問に対して、CHATGPTがHTMLさえも考えてしまう（出来るのかなこんなことも・・・）
チケット自体が持っている情報も参考にする
　→　これは将来的には、REDMINE全体のリソース（ＤＢ）の内容を完全に把握させることにもつながる

　日々のCHATGPTの進歩が激しすぎるので、キャッチアップしていくのが本当に大変である。

CHATGPTトークン

　redmine view customizerに質問されている内容であるが、ユーザー情報には以下でアクセスできるとのこと

ViewCustomize.context全体をJSON形式に変換してPOSTすることができます。以下にその例を示します。

var contextData = JSON.stringify(ViewCustomize.context);

このコードでは、ViewCustomize.context全体を一つの文字列として扱い、それを隠しフィールドの値としてフォームに追加しています。そのため、サーバー側ではこのデータを取得してからパースする必要があります。

バックエンド

　今回は受け取る側に全面的に機能を実装させるために、チケットウィンドウを丸ごとリクエスト全体で受けて、PYTHON側でゴニョゴニョすることにした。さきほどのCHATGPTトークンも、BODYに押し込んで後で処理をすることになる。

　このコードは前回書いたものである。https://qiita.com/EasyCording/items/3df63dcbb7e1f9f2d14e

main.py

from fastapi import FastAPI, Request

app = FastAPI()

@app.post("/redmine")

async def post_handler(request: Request):
    form = await request.form()

    for field in form:
        value = form[field]
        print(f"{field}: {value}")

    return {"text":"api called"}

フロントエンド

チケットのフォーム全体はid = issue-formである（これはブラウザで確認せざる得ない）
CHATGPT用の要素はHTMLとしてredmine view customizeに貼り付ける。

下記のコードでは、formData.append()メソッドを使用してchatFieldの値をフォームデータに追加します。このメソッドは既存のFormDataオブジェクトに新しいキー/値ペアを追加します。

    <input type="text" id="chatField" name="chatField">
    <button id="chatButton">Click me!</button>
  
  <script>
    $(function() {
      // Note: Change the ID according to the custom field you want to target
      const chatField = $('#chatField');
      const chatButton = $('#chatButton');
      const url = "http://127.0.0.1:8000/redmine";
      const form = document.getElementById("issue-form");
      
      chatButton.on('click', async (event) => {
          event.preventDefault(); // Stop the default form submission behavior

          try {           
            var contextData = JSON.stringify(ViewCustomize.context);

            const formData = new FormData(form);
            formData.append('contextData', contextData); // Add the contextData to the form data
            formData.append('chatText', chatField.val()); // Add the chatField value to the form data
            
            const response = await fetch(url, { method: "POST", body: formData });
            const res = await response.json();

            // Check for errors before accessing properties
            if ('text' in res) {
              chatField.val(res.text);
            } else {
              console.log('Error: response data not in expected format');
            }
          } catch (error) {
            console.log(error);
          }
      });
    });
  </script>

上記のコードでは、chatFieldテキストボックスの現在の値を取得し（val()メソッドを使用）、それをフォームデータに追加します。これにより、送信されるPOSTリクエストにchatTextフィールドが含まれ、その値はchatFieldテキストボックスの値となります。

実行結果

RESPONSE

ちゃんとAPIトークンをFASTAPIに渡すことが出来た。

INFO:     127.0.0.1:39862 - "POST /redmine HTTP/1.1" 200 OK
utf8: ✓
_method: patch
authenticity_token: plWyeDkXFOVmHco9yV3ObccM5wIra7HN+yiL5aNzLggnfIN59JYIoqU0z+Wuy0ZdKNMN3e9wp8/8TFp9AjwzKw==
form_update_triggered_by: 
issue[is_private]: 0
issue[tracker_id]: 1
issue[subject]: REDMINE活用
issue[description]: 別途、ＡＰＩ活用してVIEWを作ること
issue[status_id]: 1
was_default_status: 1
issue[assigned_to_id]: 
issue[category_id]: 
issue[parent_issue_id]: 178
issue[estimated_hours]: 
chatField: プロンプト

contextData: {
  省略　
"customFields":[{"id":18,"name":"chatgpt-token","value":"sk-xxxxxxxxxxxxxxxxx"}

chatText: プロンプト

参考

Redmineに関連する記事

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up