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

# 本題
　表題の検討について、コードの原型が出来上がった。
今回のポイントとしては、
* CHATGPTのAPIトークンは、REDMINEの個人情報に記載
　→　つまりAPIコール時に誰がアクセスしたのかを分かり易くする

* REDMINEからは自由質問をさせて、質問に応じてHTMLを返す
　→　質問に対して、CHATGPTがHTMLさえも考えてしまう（出来るのかなこんなことも・・・）

* チケット自体が持っている情報も参考にする
　→　これは将来的には、REDMINE全体のリソース（ＤＢ）の内容を完全に把握させることにもつながる 

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

# CHATGPTトークン

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

https://qiita.com/forenoonM/items/3e2ebd8d4b93d5884203#:~:text=%E3%80%90%E5%90%84%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%80%91%20redmine_view_customize%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%8B%E3%82%89%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E5%80%A4%E3%82%92%E5%8F%82%E7%85%A7%E3%81%97%E5%87%A6%E7%90%86%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%20redmine_view_customize%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3,v1.2.0%20%E3%81%8C%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%20ViewCustomize.context.user.customFields%20%E3%81%A7%E5%90%84%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%A7%E3%81%8D%E3%82%8B%E3%80%82

>`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オブジェクトに新しいキー/値ペアを追加します。

```html
    <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テキストボックスの値となります。

# 実行結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212914/185bd860-8414-c2a3-3ef7-9ff76c9bbb20.png)

# 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: プロンプト
```

# 参考
https://qiita.com/EasyCording/items/6fe972110b39117b91ae
# 参考
- Redmineに関連する記事
1. [仕事で使うREMINEに関する考察（１９）](https://qiita.com/EasyCording/items/6ca2cb52a654df882598) 
2. [WIKI一発記入　仕事で使うREDMINEに関する考察(18)](https://qiita.com/EasyCording/items/a7d6adc1ab5b1d41a95f) 
3. [CHATGPTにてRedmine view customizerのHTML要素を生成する(4)](https://qiita.com/EasyCording/items/e04b73d185bb406cdf7a) 
4. [チケット運用の盲点　仕事で使うREDMINEに関する考察(17)](https://qiita.com/EasyCording/items/f1a802a1b8c334c34828) 
5. [CHATGPTにてRedmine view customizerのHTML要素を生成する(3)](https://qiita.com/EasyCording/items/752332e2883ce666460c) 
6. [CHATGPTにてRedmine view customizerのHTML要素を生成する(2)](https://qiita.com/EasyCording/items/90e2708aadcd3c1ae917) 
7. [CHATGPTにてRedmine view customizerのHTML要素を生成する(1)](https://qiita.com/EasyCording/items/6740c3ba7117ee18c2a9) 
8. [CHATGPT便りの開発方針　仕事で使うREDMINEに関する考察(16)](https://qiita.com/EasyCording/items/cab4dbb6c36820727f69) 
9. [チケットからTODO作業へ落とし込み　仕事で使うREDMINEに関する考察(15)](https://qiita.com/EasyCording/items/6fe972110b39117b91ae) 
10. [仕事で使うREDMINEに関する考察(14)](https://qiita.com/EasyCording/items/a76b7fe02f8d5ecefe5e) 
11. [CHATGPT利活用　仕事で使うREDMINEに関する考察(12)](https://qiita.com/EasyCording/items/857b7cf12b7dd091ff82) 
12. [やりたいことを少しずつ　仕事で使うREDMINEに関する考察(11)](https://qiita.com/EasyCording/items/b9d939a861c06bb57f18) 
13. [組織を巻き込むプレゼン資料　仕事で使うREDMINEに関する考察(10)](https://qiita.com/EasyCording/items/605a860e5a4d66011747) 
14. [OfficeのフローにREDMINEをねじ込む　仕事で使うREDMINEに関する考察(9)](https://qiita.com/EasyCording/items/e63cbe486b08f99e1702) 
15. [RedmineチケットにCHATGPTを実装（超簡単）](https://qiita.com/EasyCording/items/20439251ad82d492d654) 
16. [RedmineのチケットにCHATGPTを実装（２）](https://qiita.com/EasyCording/items/3df63dcbb7e1f9f2d14e) 
17. [Office365からRedmineへのメール送信してチケット登録](https://qiita.com/EasyCording/items/3176b4020954e2eddbb6) 
18. [Redmineプラグイン開発](https://qiita.com/EasyCording/items/5e837a3425d3df8bfb0c) 
19. [RedmineをTODOリストに使う　仕事で使うREDMINEに関する考察(8)](https://qiita.com/EasyCording/items/bbf470b09a08d06b87f3) 
20. [仕事で使うREDMINEに関する考察(7)](https://qiita.com/EasyCording/items/3260595d70a86c21308e) 
21. [仕事で使うREDMINEに関する考察(6)](https://qiita.com/EasyCording/items/c2c3a5850941f45d1317) 
22. [仕事で使うREDMINEに関する考察(5)](https://qiita.com/EasyCording/items/f46ce0718f005f8b4d96) 
23. [仕事で使うREDMINEに関する考察(4)](https://qiita.com/EasyCording/items/e2f6fffde3d8e0a0012b) 
24. [仕事で使うREDMINEに関する考察(3)](https://qiita.com/EasyCording/items/44dd27c6b897b0d7d82b) 
25. [仕事で使うREDMINEに関する考察(2)](https://qiita.com/EasyCording/items/7f8fbba0553635a7421d) 
26. [仕事で使うREDMINEに関する考察](https://qiita.com/EasyCording/items/c3b62c9e5ca3f0cc379f)