Add webserver/guess

.gitignore

@@ -22,6 +22,9 @@ test-img-vis-kernel/*
 **.rej
 patches/*
 
+## Webserver:Guess
+human_guess.csv
+
 ## 50States10K dataset
 # Download it from https://drive.google.com/file/d/1Y8eqx1Uy8kuRP4BNmTCVvrNbCxx6RoiP/view
 # Edit and run src/scripts/generate_dataset.sh to generate train and test set

src/webserver/app.py

@@ -1,12 +1,22 @@
 #!/usr/bin/python3
-from flask import Flask, render_template, request
+from flask import Flask, render_template, request, session
 import subprocess
+import secrets
 import json
 
+import guess
+
 MAGIC_NUMBER = 2051
 
 app = Flask(__name__)
 
+app.register_blueprint(guess.bp)
+
+
+app.config['SECRET_KEY'] = secrets.token_hex()
+app.config['SESSION_TYPE'] = 'memchached'
+
+
 @app.route("/")
 def index():
     return render_template("index.html")

src/webserver/guess.py

@@ -0,0 +1,81 @@
+import os
+import random
+import uuid
+import datetime
+
+from flask import (Blueprint, Flask, flash, make_response, redirect,
+                   render_template, request, send_from_directory, session,
+                   url_for)
+
+bp = Blueprint('guess', __name__, url_prefix="/guess")
+
+# Define some constants
+IMAGE_DIR = os.path.join(os.getcwd(),'data/50States10K/test')
+CATEGORIES = os.listdir(IMAGE_DIR)
+CATEGORIES.sort()
+RESULTS_FILE = 'human_guess.csv'
+HINT = False # Show answer in console
+
+
+if not os.path.exists(RESULTS_FILE):
+    with open(RESULTS_FILE, "w") as f:
+        f.write("label,guess,corresponding,filename,uuid,datetime")
+
+
+def ensure_cookies(session):
+    if "reussis" not in session:
+        session["reussis"] = 0
+    if "essayes" not in session:
+        session["essayes"] = 0
+    if "uuid" not in session:
+        session["uuid"] = str(uuid.uuid4()) # Session uuid, we don't need it to be unique but just not too common
+
+def give_image(session): # Store an image path in the session cookie
+    category = random.choice(CATEGORIES)
+    image = random.choice(os.listdir(os.path.join(IMAGE_DIR, category)))
+    session["image_filename"] = f"{category}/{image}"
+    if HINT:
+        print(category)
+
+
+
+# Define the guessing game page
+@bp.route('/', methods=['GET', 'POST'])
+def guess():
+    ensure_cookies(session)
+    if request.method == 'POST':
+        if "image_filename" in session and "guess" in request.form:
+            real_filename = (session["image_filename"].split("/")[0], session["image_filename"].split("/")[1])
+
+            # Check if the guess is correct
+            result = (request.form['guess'] == real_filename[0])
+            if result:
+                session["reussis"] += 1
+                flash("C'était la bonne réponse !")
+            else:
+                flash(f"La bonne réponse était '{real_filename[0]}'")
+            session["essayes"] += 1
+
+            # Save the result to file
+            with open(RESULTS_FILE, 'a') as f:
+                f.write(f'{real_filename[0]},{request.form["guess"]},{result},{real_filename[1]},{session["uuid"]},{datetime.datetime.now()}\n')
+
+        elif "guess" not in request.form:
+            flash("Veuillez faire au moins un choix")
+            return redirect("/guess")
+        else:
+            return redirect("/guess")
+
+    # Display the guessing game page
+    resp = make_response(render_template('guess.html', CHOICES=CATEGORIES, session=session))
+    give_image(session)
+    return resp
+
+
+@bp.route("/image.png")
+def get_media():
+    if "image_filename" not in session:
+        abort(403)
+    else:
+        real_filename = (session["image_filename"].split("/")[0], session["image_filename"].split("/")[1])
+        return send_from_directory(os.path.join(IMAGE_DIR, real_filename[0]), real_filename[1])

src/webserver/static/guess.css

@@ -0,0 +1,98 @@
+form {
+    margin-top: 1em;
+}
+
+ol {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+li {
+    margin: 0.5em 0;
+}
+
+input[type="submit"]#guess-button {
+    background-color: #4CAF50;
+    border: none;
+    color: white;
+    padding: 0.5em;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 1em;
+    margin-top: 1em;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+input[type="radio"] {
+    margin-right: 0.5em;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    margin-top: 1em;
+}
+
+#labels {
+    overflow: scroll;
+    height: 80vh;
+    border-color: black;
+    border-width: 1px;
+    border-style: solid;
+    max-height: 70vh;
+}
+
+#guess-image {
+    width: 40vw;
+    height: 40vw;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 3px;
+}
+
+.flash {
+    padding: 1em 0;
+    background: #cae6f6;
+    border: 1px solid #377ba8;
+    border-radius: 3px;
+    text-align: center;
+    margin: 1em 0;
+  }
+
+#guess-body {
+    display:flex;
+    justify-content:space-between;
+}
+
+#guess-form {
+    background-color: white;
+    align-items: center;
+    display: grid;
+    position: fixed;
+    right: 5vw;
+}
+
+#left-div {
+    width: 40vw;
+    margin: 0 5vw;
+    margin-top: 10vh;
+    text-align: center;
+}
+
+#us-map {
+    position: fixed;
+    height: 45vh;
+    bottom: -43vh;
+    transition: ease 1s;
+    border-style: solid;
+    border-width: 2px;
+}
+
+
+#us-map:hover {
+    bottom: -2px;
+    transition: ease 1s;
+}

src/webserver/static/mnist.css

@@ -1,4 +1,4 @@
-body {
+body, #guess-body {
     flex-direction: row;
     display: flex;
     overflow: hidden;

src/webserver/templates/guess.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Guessing Game</title>
+    <link href="{{ url_for('static',filename='guess.css') }}" rel="stylesheet">
+</head>
+<body>
+    <div id="guess-body">
+        <div id="left-div">
+            <img src="/guess/image.png" id="guess-image" alt="Image to guess">
+            {% for message in get_flashed_messages() %}
+            <div class="flash">{{ message }}</div>
+            {% endfor %}
+            {% if session["essayes"] != 0 %}
+            <div id="accuracy">
+                Nombre d'images réussies : {{ session["reussis"] }}/{{ session["essayes"] }}<br/>
+                Taux de réussite: {{ '%0.2f'| format(session["reussis"] / session["essayes"] *100) }}%
+            </div>
+            {% endif %}
+        </div>
+        <form method="post" id="guess-form">
+            <h2>Choose the correct label:</h2>
+            <div id="labels">
+                <ol>
+                {% for i in CHOICES %}
+                    <li><label><input type="radio" name="guess" value="{{ i }}"> {{ i }}</label></li>
+                {% endfor %}
+                </ol>
+            </div>
+            <input type="submit" id="guess-button" value="Guess">
+        </form>
+        <img src="/static/usa_map.png" id="us-map">
+    </div>
+</body>
+</html>

src/webserver/templates/index.html

@@ -3,10 +3,11 @@
 <head>
   <meta charset="utf-8">
   <title>Home page</title>
-  <link href="{{ url_for('static',filename='style.css') }}" rel="stylesheet">
+  <!--<link href="{{ url_for('static',filename='style.css') }}" rel="stylesheet">-->
   
 </head>
 <body>
-  <a href="/mnist">MNIST</a>
+  <a href="/mnist">MNIST</a><br/>
+  <a href="/guess">Guessing Game</a>
 </body>
 </html>

src/webserver/templates/mnist.html

@@ -3,8 +3,8 @@
 <head>
   <meta charset="utf-8">
   <title>MNIST interaction</title>
-  <link href="{{ url_for('static',filename='style.css') }}" rel="stylesheet">
-  <script src="{{ url_for('static',filename='script.js') }}"></script>
+  <link href="{{ url_for('static',filename='mnist.css') }}" rel="stylesheet">
+  <script src="{{ url_for('static',filename='mnist.js') }}"></script>
 </head>
 <body onload="init()">
   <div id="maincard">