@terasima712 (ゆき寺島)posted at 2023-04-11

自作アンケートページの回答を保存してからページを更新したい

Q&A

動的なアンケートサイトの作成

Google colab上でflaskを用いてアンケートをのためのWebアプリを作成しようとしています。
自動で画像を生成し、それに対する点数を回答とし、その回答を元に新しい画像を生成してまた回答を集めるという内容にしています。

発生している問題・エラー

from flask import Flask, render_template, request#追記変更
from flask_ngrok import run_with_ngrok
import sqlite3


img_url = #画像urlを生成する部分(省略)

app = Flask(__name__)
run_with_ngrok(app)  # Start ngrok when app is run

@app.route("/")
def index():
  return render_template("index.html")

@app.route("/loc", methods = ["GET","POST"])
def loc():
  if request.method == 'POST':
    id = uuid.uuid1()
    y = request.form.get('y')
    
    #表示されていたimg_urlをhtmlから取得

    write_db(dbname, y, img_url) #データベースへ画像URLと回答を登録
    img_url = create_img(y, img_url) #画像URLと回答をもとに、新しい画像URLを生成

    return render_template("loc.html", image = img_url)#新しく生成した画像URLをもとにページを更新し、それに遷移する
  else:
    #開くだけならURLでリクエストなのでGET
    return render_template("loc.html", image = img_url)


if __name__ == '__main__':
  app.run()

このようなコードを書きました。
ページに表示されていたimg_url、つまり回答yに紐づくimg_urlを取得する方法がわかりません。
このまま実行すると、同時に複数のブラウザでこのページを開いて回答が送信されたときに、異なる画像に対する回答がdbに記録されてしまいます。
例二つのブラウザでURLにアクセスする
⇨両方のブラウザに同じ画像Aが表示される
⇨ブラウザ1で表示されている画像Aに対する回答Pを送信する
⇨画像Aに対する回答はPだと記録される
⇨ブラウザ1には(回答Pをもとにして生成された)画像Bが表示され、ブラウザ2では画像Aが表示されたまま
⇨ブラウザ2で表示されている画像Aに対する回答Qを送信する
⇨画像Bに対する回答はQだと記録される(!?)

どうかお力添えをいただけると幸いです。

loc.html

<title>コーディネートアンケート</title>
<body>
<form action="/loc" name="locdata" method="POST">
<input type="text" name="y" value="このコーディネートに0から9で点数をつけてください">
<input  type="submit" value = "送信">
</form>

    <img src = "img_url">

<script>

function displayData(y) {
    const formElements = document.forms.locdata
    formElements.y.value = y;
}
</script>

index.html

<title>コーディネートアンケート</title>
<body>
<form action="/loc" name="locdata" method="POST">
<input type="text" name="y" value="このコーディネートに0から9で点数をつけてください">
<input  type="submit" value = "送信">
</form>
<h1>データ入力の方法</h1>
<p><small>1.現在のURLの末尾に「/loc」を追記しページ遷移する</small><p>
<p><small>2.遷移先では表示された画像のコーデに0から9で点数をつけ、送信する</small><p>
<p><small>3.送信後、再読み込みするとまた異なるコーディネートが表示されるので、2を繰り返す</small><p>


<script>

function displayData(y) {
    const formElements = document.forms.locdata
    formElements.y.value = y;
}
</script>

Are you sure you want to delete the question?