前回はちょっとChatGPTで量子コンピューティングアプリを作り始めてみました。今回は前回の続きです。 <a href="https://blueqat.com/yuichiro_minato2/6498e2ae-3261-426c-a9c9-62a6ebed5dac" rel="noopener noreferrer" target="_blank">https://blueqat.com/yuichiro_minato2/6498e2ae-3261-426c-a9c9-62a6ebed5dac</a> 前回はフロントにTailwindを利用し、バックエンドにflaskを準備、フロントではフォームを準備し、バックエンドではpostで受け取る準備をしました。 今回はできるところまでやりたいですが、フロントエンドにpostの機能をつけて、返答を表示機能が必要で、バックエンドは受け取った指令からQUBOをサンプラーに流して計算します。 わし：送信ボタンが押されたらinput textの内容をpostで /apiのエンドポイントに送るコードを書いてください ChatGPT先生：<pre class="ql-syntax" spellcheck="false">&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;meta charset=&#34;UTF-8&#34;&gt;
  &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;&gt;
  &lt;title&gt;Tailwind CSS Example&lt;/title&gt;
  &lt;!-- Load the Tailwind CSS file from a CDN --&gt;
  &lt;link href=&#34;https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css&#34; rel=&#34;stylesheet&#34;&gt;
 &lt;/head&gt;
 &lt;body class=&#34;bg-gray-200&#34;&gt;
  &lt;!-- Header --&gt;
  &lt;header class=&#34;bg-gray-800 p-4&#34;&gt;
   &lt;div class=&#34;container mx-auto flex items-center&#34;&gt;
    &lt;a href=&#34;#&#34; class=&#34;text-white font-medium text-lg&#34;&gt;Your Logo&lt;/a&gt;
    &lt;nav class=&#34;ml-auto flex items-center&#34;&gt;
     &lt;a href=&#34;#&#34; class=&#34;text-white mr-4 hover:text-gray-400&#34;&gt;Features&lt;/a&gt;
     &lt;a href=&#34;#&#34; class=&#34;text-white mr-4 hover:text-gray-400&#34;&gt;Pricing&lt;/a&gt;
     &lt;a href=&#34;#&#34; class=&#34;text-white hover:text-gray-400&#34;&gt;Login&lt;/a&gt;
    &lt;/nav&gt;
   &lt;/div&gt;
  &lt;/header&gt;

  &lt;!-- Main Content --&gt;
  &lt;main class=&#34;container mx-auto py-10&#34;&gt;
   &lt;h1 class=&#34;text-3xl font-medium text-center&#34;&gt;Welcome to Tailwind CSS&lt;/h1&gt;
   &lt;p class=&#34;text-lg text-gray-700 text-center&#34;&gt;Build beautiful and fast-loading interfaces with ease.&lt;/p&gt;
   &lt;div class=&#34;flex items-center justify-center h-screen&#34;&gt;
    &lt;form class=&#34;bg-white p-6 rounded-lg shadow-xl&#34; onsubmit=&#34;submitForm(event)&#34;&gt;
     &lt;h2 class=&#34;text-lg font-medium text-gray-700 text-center mb-4&#34;&gt;Input Form&lt;/h2&gt;
     &lt;div class=&#34;mb-4&#34;&gt;
      &lt;input type=&#34;text&#34; class=&#34;border border-gray-400 p-2 w-full&#34; id=&#34;inputText&#34; placeholder=&#34;Input text here&#34;&gt;
     &lt;/div&gt;
     &lt;button type=&#34;submit&#34; class=&#34;bg-blue-500 text-white p-2 rounded-full hover:bg-blue-600&#34;&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
   &lt;/div&gt;
  &lt;/main&gt;
 &lt;/body&gt;
 &lt;script&gt;
  async function submitForm(event) {
   event.preventDefault();
   const inputText = document.getElementById(&#39;inputText&#39;).value;
   const response = await fetch(&#39;/api&#39;, {
    method: &#39;POST&#39;,
    headers: {
     &#39;Content-Type&#39;: &#39;application/json&#39;
    },
    body: JSON.stringify({ inputText })
   });
   const result = await response.json();
   console.log(result);
  }
 &lt;/script&gt;
&lt;/html&gt;
</pre> 丁寧に書いてくれましたが、よく考えたら人間の使いやすさのためにあったようなjqueryとかいらなくなるかもしれませんね。。。確認したら確かに送れました。バックエンドを配列を受け取る形で前回は終わったのですが、それを修正して文字列をフロントに返すようにします。 <img src="https://assets.blueqat.com/public/uploads/us-east-2:4805ff4b-c3cc-4344-b165-86544c34d0bf/2023/02/08/tail3.png"/> できました。念の為フロントにも戻ってきた結果を表示する領域を準備します。 わし：postでなげたresultを表示するコードを書いてください。 ChatGPT：<pre class="ql-syntax" spellcheck="false">&lt;!-- Main Content --&gt;
&lt;main class=&#34;container mx-auto py-10&#34;&gt;
 &lt;h1 class=&#34;text-3xl font-medium text-center&#34;&gt;Welcome to Tailwind CSS&lt;/h1&gt;
 &lt;p class=&#34;text-lg text-gray-700 text-center&#34;&gt;Build beautiful and fast-loading interfaces with ease.&lt;/p&gt;
 &lt;div class=&#34;flex justify-center&#34;&gt;
 &lt;form method=&#34;post&#34; action=&#34;/api&#34;&gt;
 &lt;input type=&#34;text&#34; name=&#34;input_text&#34; class=&#34;border border-gray-400 p-2&#34;&gt;
 &lt;button type=&#34;submit&#34; class=&#34;bg-blue-500 text-white p-2&#34;&gt;送信&lt;/button&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 &lt;p class=&#34;text-lg text-gray-700 text-center mt-4&#34;&gt;送信された結果: {{ result }}&lt;/p&gt;
&lt;/main&gt;
</pre> このコードでは、「送信された結果」という文字列の下に送信ボタンが押されたときに返された結果（result）が表示されます。この例では、Flaskテンプレートエンジンを使用しています。入力フォームに入力された値が「/api」エンドポイントに送信され、その結果がFlaskアプリケーションから返されます。 APIで繋げとか言った割にいきなりテンプレート使ってきました。javascriptで表示するコードを書いてもらいたいです。 わし：flaskテンプレートエンジンを使わずresultをmainに表示する処理をjavascriptで処理してください ChatGPT：（ちょっといきなり全部交換するような文脈を無視した回答が。。。） ここで一旦調整が必要です。まずは整理して、フロントから投げたPOSTをそのままAPI経由でフロントで受け取れるようにして表示するまでを書いてみます。 フロントでエラーが出ます。 VM155:1 Uncaught (in promise) SyntaxError: Expected property name or &#39;}&#39; in JSON at position 1 よくみてみると多分JSONがきちんと処理されてませんね。みた感じflask側ではstrで送って、フロントでjsonで処理されてます。 わし：flask側で返す値を文字列ではなくjson形式にするにはどうすれば良いですか？ ChatGPT先生：Flask側では、Jsonify関数を使用してJSON形式で値を返すことができます。例:<pre class="ql-syntax" spellcheck="false">from flask import Flask, jsonify, request


app = Flask(__name__)


@app.route(&#39;/api&#39;, methods=[&#39;POST&#39;])
def api():
    data = request.get_json()
    result = {&#34;result&#34;: data}
    return jsonify(result)


if __name__ == &#39;__main__&#39;:
    app.run(debug=True)


</pre> ということで、jsonifyを追加して、書き換えました。 そのconsoleには結果エラーなく動きました。これをhtmlに表示します。こっからはちょっと細かいところなので人間の方が早いのでやってしまいました。その結果、 <img src="https://assets.blueqat.com/public/uploads/us-east-2:4805ff4b-c3cc-4344-b165-86544c34d0bf/2023/02/08/return.png"/> きちんとフォームに入れた文字がsubmitされ、APIを通じてバックエンドで処理されてフロントに戻って表示されました。細かい処理は聞くよりやってしまった方が早かったです。 <pre class="ql-syntax" spellcheck="false"> &lt;script&gt;
  async function submitForm(event) {
   event.preventDefault();
   const inputText = document.getElementById(&#39;inputText&#39;).value;
   const response = await fetch(&#39;/api&#39;, {
    method: &#39;POST&#39;,
    headers: {
     &#39;Content-Type&#39;: &#39;application/json&#39;
    },
    body: JSON.stringify({ inputText })
   });
   const result = await response.json();
   console.log(result);
   let resultElement = document.getElementById(&#34;result&#34;);
   // Update the innerHTML of the result element with the result value
   resultElement.innerHTML = result[&#34;result&#34;];
  }
 &lt;/script&gt;
</pre> htmlにはこちらを追加しました。 <pre class="ql-syntax" spellcheck="false">&lt;div id=&#34;result&#34;&gt;&lt;/div&gt;
</pre> ということで最低限のコードはできたので（というかよく使うのでこのワンセットを準備しておけばいい気がします） 次はバックエンドにD-Wave Nealを組み込んで計算してみたいと思います。フロントからPOSTで何かしら受け取ったらNealで適当な問題を解かせてフロントに返します。 最初はフロントから指令が来たら適当な例を解きます。 わし：d-wave neal のsimulated annealing sampler を使って計算結果をフロントに戻すflaskコードを書いてください ChatGPT先生：Flaskを使ってD-Wave NealのSimulated Annealing samplerを呼び出して計算結果をフロントに返すには次のようにします。<ol><li>まず、dwave-nealライブラリをインストールします。</li></ol> <pre class="ql-syntax" spellcheck="false">pip install dwave-neal
</pre> <ol><li>次に、次のようなFlaskアプリケーションを作成します。</li></ol><pre class="ql-syntax" spellcheck="false">from flask import Flask, request, jsonify
import dimod
import neal


app = Flask(__name__)


@app.route(&#34;/api&#34;, methods=[&#34;POST&#34;])
def solve_qubo():
    # QUBOのハミルトニアンを定義
    linear = {0: -1, 1: 2, 2: -3}
    quadratic = {(0, 1): 4, (1, 2): -1}
    model = dimod.BinaryQuadraticModel(linear, quadratic, 0.0, dimod.BINARY)


    # Simulated Annealing samplerを呼び出して解を求める
    sampler = neal.SimulatedAnnealingSampler()
    response = sampler.sample(model)
    result = list(response.first.sample.values())


    # 解をフロントに返す
    return jsonify({&#34;result&#34;: result})


if __name__ == &#34;__main__&#34;:
    app.run()
</pre> 良さそうです。ただ、エラーが出ます。 わし：TypeError: Object of type int8 is not JSON serializable はどう解決できますか？ ChatGPT先生：このエラーは、JSON形式に変換できないデータ型（この場合はint8）があることを示しています。これを解決するには、int8データ型を別のデータ型（例えばint、floatなど）に変換するか、またはnumpy配列を直接使わずに、リストなどの別のデータ構造を使用することができます。 ということなんで、データ型を変更する必要があります。 わし：pythonのlistの中のint8型のデータをint型に変換するコードをください ChatGPT先生：下記のように、リスト内の要素をint型に変換することで解決できます。<pre class="ql-syntax" spellcheck="false">result = [int(i) for i in result]
</pre>このように変換することで、jsonifyでフロントに送ることができます。 ということで、書き直してみた結果、、、 <pre class="ql-syntax" spellcheck="false">from flask import Flask, render_template, request, jsonify
import dimod
import neal

application = Flask(__name__)

@application.route(&#34;/&#34;)
def home():
  return render_template(&#34;index.html&#34;)

@application.route(&#34;/api&#34;, methods=[&#34;POST&#34;])
def api():
  # QUBOのハミルトニアンを定義
  linear = {0: -1, 1: 2, 2: -3}
  quadratic = {(0, 1): 4, (1, 2): -1}
  model = dimod.BinaryQuadraticModel(linear, quadratic, 0.0, dimod.BINARY)

  # Simulated Annealing samplerを呼び出して解を求める
  sampler = neal.SimulatedAnnealingSampler()
  response = sampler.sample(model)
  result = list(response.first.sample.values())
  print(result)
  result = [int(i) for i in result]
  # 解をフロントに返す
  return jsonify({&#34;result&#34;: result})
  #return jsonify(result = result)
if __name__ == &#34;__main__&#34;:
  application.run(debug=True)
</pre> できてしまいました。絶望しかないですね。こんな簡単にできてしまうとは。。。 <img src="https://assets.blueqat.com/public/uploads/us-east-2:4805ff4b-c3cc-4344-b165-86544c34d0bf/2023/02/08/done.png"/> 次回は最後にきちんとQUBOを受け取りたいと思います。以上です。

ChatGPT先生を使って量子コンピューティングのWebアプリを作ってみる、その２、QUBO実装

Yuichiro Minato