前回の記事、
「D-Waveの実機を使ったガチャの実践pythonコードを公開！みんなで量子コンピュータや量子アニーラで一万連ガチャしよう！」
https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745
では、pythonの実際の実行コードを確認しました。今回はこれをウェブアプリとして完成させるために、フロントエンドのアプリ側のhtmlコードと、それを受けるサーバーサイドのフレームワークを確認します。
flaskコード
早速サーバーサイドを先に見てみます。前回はpythonでのコードを確認しました。前回は問題をイジングの式で作り、それからD-Waveに投げてガチャをとってました。今回はアプリから指令がきたらD-Waveに問題をなげ、それをアプリ側に返します。
インストール
pip install flask
ツール自体は、Flask,request,render_templateを使います。
from flask import Flask,request, render_template
app = Flask(__name__)
token = "ここにtoken"
@app.route('/')
def hello():
return render_template("main.html")
@app.route('/api/')
def main():
qubo = np.array([[0,-2,10],[0,0,-1],[0,0,-0.5]])
bqm = dimod.BQM.from_numpy_matrix(qubo)
response = EmbeddingComposite(DWaveSampler(endpoint='https://cloud.dwavesys.com/sapi', token=token, solver='Advantage_system1.1')).sample(bqm, num_reads=1)
a = list(response.first.sample.values())
if a == [1,0,0]:
b = "4"
elif a == [1,1,0]:
b = "1"
elif a == [0,0,0]:
b = "3"
else:
b = "2"
return b
if __name__ == '__main__':
app.run(host='0.0.0.0')
基本的には、インターフェイスはtemplatesのフォルダに入れます。/api/をエンドポイントとして、getで処理しました。quboを設定し、BQMに落とします。また、D-Wave側にはエンドポイントとtokenを設定し、Advantage System 1.1をしています。サンプリングの回数は1回。そして、戻ってきた結果を配列に直して、レア度と対応させます。あとはフロントエンドに戻すので、returnで設定した値を返します。
あとは、サーバーを立ち上げます。
python3 hello.py
などと実行すればサーバーが立ち上がります。portはデフォルトで:5000になっていますので、ローカルもしくはクラウド上で設定してみてください。
フォルダ構成
hello.py
-templates
main.html
フォルダ構成はシンプルです。flaskで実行するpythonファイルと、テンプレートが入っています。次にテンプレートhtmlを解説します。
htmlファイル
アプリ側はなんでも良いのですが、今回はウェブアプリとしてhtmlにしました。
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
body{font-family:courier;}
.table-bordered{border:3px solid black;}
.table-bordered tr:nth-child(3n){border-bottom:2px solid black;}
.table-bordered td:nth-child(3n){border-right:2px solid black;}
.table td{padding:0;}
input{-webkit-appearance:none;border:0;background:none;text-align:center;font-weight:bold;line-height:35px;}
.answer{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;line-height:37px;font-weight:bold;color:skyblue;opacity:0.6}
.result{color:red;}
</style>
</head>
<body>
<div class="container" style="margin-top:20px">
<div class="row">
<div class="col-12">
<img src="ガチャの絵" style="width:100%;height:auto;" id="main">
<div style="text-align:center;margin-top:5px;">
<button id="sudoku" type="button" class="btn btn-outline-dark" style="font-size:24px;font-weight:bold;padding:1px 15px;border:3px solid black;">gacha</button>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$(function(){
var url = "ガチャのキャラの絵の入ったフォルダ";
$('#sudoku').click(function(){
var anneal = setInterval(function(){
//数字の表示系
$('#main').attr('src',url + (Math.floor(Math.random()*4)+1) + '.jpg');
},50)
$.ajax({
type : 'GET',
url : '設定したエンドポイント。サーバーがわ。',
timeout : 15000
}).done(function(data, textStatus, jqXHR) {
clearInterval(anneal);
$('#main').attr('src',url +data+'.jpg');
}).fail(function(jqXHR, textStatus, errorThrown) {
clearInterval(anneal);
$('#main').attr('src',url + '0.jpg');
});
});
})
</script>
</body>
</html>
基本的にはボタンを押したら、ajaxでgetリクエストを投げます。戻ってきたら表示するだけです。全てflaskサーバー側で処理されてるので、基本的にインターフェイスのみになります。
やってみよう
是非やってみてください。アプリ側で式を作ると、問題が大きくなったときに苦労します。ですので、サーバー側での処理をするのがコツですので、その点だけ気をつければ簡単にアプリが作れますし、スマートフォンから量子コンピュータを操作することが可能になり、可能性が広がります。以上です！