uploading api

.gitignore

@@ -0,0 +1 @@
+__pycache__/

Procfile

@@ -0,0 +1 @@
+web: gunicorn -w 3 -k uvicorn.workers.UvicornWorker main:app

README.md

@@ -1,10 +1,2 @@
----
-title: Intelli Snake
-emoji: 🌍
-colorFrom: yellow
-colorTo: purple
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# FAST API
+This API is used as backend for the game [Intelli Snake 2](https://geetu040.github.io/intelli-snake-2/)

binary_map.json

@@ -0,0 +1 @@
+[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

main.py

@@ -0,0 +1,43 @@
+from fastapi import FastAPI
+import json, utility
+
+app = FastAPI()
+
+# ADDING ORIGINS
+from fastapi.middleware.cors import CORSMiddleware
+origins = [
+    "http://127.0.0.1:5500",        # local host
+    "https://geetu040.github.io",   # where app is hosted
+]
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=origins,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+@app.get("/")
+def index():
+    return {"Hello": "World"}
+
+@app.get("/intelli-snake/map-{info}")
+def intelliSnake2_map(info:str):
+	returned_info = utility.load_map( json.loads(info) )
+	return json.dumps(returned_info)
+
+@app.get("/intelli-snake/automate-{info}")
+def automate(info:str):
+	predicted_dirs = utility.automate( json.loads(info) )
+	return predicted_dirs
+
+@app.get("/intelli-snake/automate_faster-{info}")
+def automate_faster(info:str):
+	returned_infos = utility.automate_faster( json.loads(info) )
+	return json.dumps(returned_infos)
+
+@app.get("/intelli-snake/write-{content}")
+def write(content:str):
+	with open("latest_dataset.txt", "a") as f:
+		f.write(content)
+	return "nothing"

models/fixed_model.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b9c9405985f5de402e6569cec16a58da0ae422471cf1e7934fa75b1ccbe00b29
+size 1704248

models/fixed_model.json

@@ -0,0 +1 @@
+{"class_name": "Functional", "config": {"name": "model_12", "layers": [{"class_name": "InputLayer", "config": {"batch_input_shape": [null, 4], "dtype": "float32", "sparse": false, "ragged": false, "name": "input_34"}, "name": "input_34", "inbound_nodes": []}, {"class_name": "InputLayer", "config": {"batch_input_shape": [null, 4], "dtype": "float32", "sparse": false, "ragged": false, "name": "input_35"}, "name": "input_35", "inbound_nodes": []}, {"class_name": "Sequential", "config": {"name": "sequential_45", "layers": [{"class_name": "InputLayer", "config": {"batch_input_shape": [null, 4], "dtype": "float32", "sparse": false, "ragged": false, "name": "dense_161_input"}}, {"class_name": "Dense", "config": {"name": "dense_161", "trainable": true, "dtype": "float32", "units": 20, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_162", "trainable": true, "dtype": "float32", "units": 80, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_163", "trainable": true, "dtype": "float32", "units": 400, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}]}, "name": "sequential_45", "inbound_nodes": [[["input_34", 0, 0, {}]]]}, {"class_name": "Sequential", "config": {"name": "sequential_46", "layers": [{"class_name": "InputLayer", "config": {"batch_input_shape": [null, 4], "dtype": "float32", "sparse": false, "ragged": false, "name": "dense_165_input"}}, {"class_name": "Dense", "config": {"name": "dense_165", "trainable": true, "dtype": "float32", "units": 20, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_166", "trainable": true, "dtype": "float32", "units": 80, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_167", "trainable": true, "dtype": "float32", "units": 400, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}]}, "name": "sequential_46", "inbound_nodes": [[["input_35", 0, 0, {}]]]}, {"class_name": "Dense", "config": {"name": "dense_164", "trainable": true, "dtype": "float32", "units": 10, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}, "name": "dense_164", "inbound_nodes": [[["sequential_45", 1, 0, {}]]]}, {"class_name": "Dense", "config": {"name": "dense_168", "trainable": true, "dtype": "float32", "units": 10, "activation": "linear", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}, "name": "dense_168", "inbound_nodes": [[["sequential_46", 1, 0, {}]]]}, {"class_name": "Concatenate", "config": {"name": "concatenate_12", "trainable": true, "dtype": "float32", "axis": -1}, "name": "concatenate_12", "inbound_nodes": [[["dense_164", 0, 0, {}], ["dense_168", 0, 0, {}]]]}, {"class_name": "Sequential", "config": {"name": "sequential_47", "layers": [{"class_name": "InputLayer", "config": {"batch_input_shape": [null, 20], "dtype": "float32", "sparse": false, "ragged": false, "name": "dense_169_input"}}, {"class_name": "Dense", "config": {"name": "dense_169", "trainable": true, "dtype": "float32", "units": 80, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_170", "trainable": true, "dtype": "float32", "units": 400, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_171", "trainable": true, "dtype": "float32", "units": 200, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dropout", "config": {"name": "dropout_18", "trainable": true, "dtype": "float32", "rate": 0.3, "noise_shape": null, "seed": null}}, {"class_name": "Dense", "config": {"name": "dense_172", "trainable": true, "dtype": "float32", "units": 800, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dropout", "config": {"name": "dropout_19", "trainable": true, "dtype": "float32", "rate": 0.3, "noise_shape": null, "seed": null}}, {"class_name": "Dense", "config": {"name": "dense_173", "trainable": true, "dtype": "float32", "units": 80, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}]}, "name": "sequential_47", "inbound_nodes": [[["concatenate_12", 0, 0, {}]]]}, {"class_name": "Dense", "config": {"name": "dense_174", "trainable": true, "dtype": "float32", "units": 4, "activation": "softmax", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}, "name": "dense_174", "inbound_nodes": [[["sequential_47", 1, 0, {}]]]}], "input_layers": [["input_34", 0, 0], ["input_35", 0, 0]], "output_layers": [["dense_174", 0, 0]]}, "keras_version": "2.8.0", "backend": "tensorflow"}

models/random_model.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9613b076879d31b05005a0fe8c6b4f55913a8f95288cf128932b863aa94557c7
+size 2961704

models/random_model.json

@@ -0,0 +1 @@
+{"class_name": "Functional", "config": {"name": "random_model", "layers": [{"class_name": "InputLayer", "config": {"batch_input_shape": [null, 4], "dtype": "float32", "sparse": false, "ragged": false, "name": "input_poss"}, "name": "input_poss", "inbound_nodes": []}, {"class_name": "InputLayer", "config": {"batch_input_shape": [null, 4], "dtype": "float32", "sparse": false, "ragged": false, "name": "input_dirs"}, "name": "input_dirs", "inbound_nodes": []}, {"class_name": "InputLayer", "config": {"batch_input_shape": [null, 31, 28, 1], "dtype": "float32", "sparse": false, "ragged": false, "name": "input_imgs"}, "name": "input_imgs", "inbound_nodes": []}, {"class_name": "Functional", "config": {"name": "model_12", "layers": [{"class_name": "InputLayer", "config": {"batch_input_shape": [null, 4], "dtype": "float32", "sparse": false, "ragged": false, "name": "input_34"}, "name": "input_34", "inbound_nodes": []}, {"class_name": "InputLayer", "config": {"batch_input_shape": [null, 4], "dtype": "float32", "sparse": false, "ragged": false, "name": "input_35"}, "name": "input_35", "inbound_nodes": []}, {"class_name": "Sequential", "config": {"name": "sequential_45", "layers": [{"class_name": "InputLayer", "config": {"batch_input_shape": [null, 4], "dtype": "float32", "sparse": false, "ragged": false, "name": "dense_161_input"}}, {"class_name": "Dense", "config": {"name": "dense_161", "trainable": true, "dtype": "float32", "units": 20, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_162", "trainable": true, "dtype": "float32", "units": 80, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_163", "trainable": true, "dtype": "float32", "units": 400, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}]}, "name": "sequential_45", "inbound_nodes": [[["input_34", 0, 0, {}]]]}, {"class_name": "Sequential", "config": {"name": "sequential_46", "layers": [{"class_name": "InputLayer", "config": {"batch_input_shape": [null, 4], "dtype": "float32", "sparse": false, "ragged": false, "name": "dense_165_input"}}, {"class_name": "Dense", "config": {"name": "dense_165", "trainable": true, "dtype": "float32", "units": 20, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_166", "trainable": true, "dtype": "float32", "units": 80, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_167", "trainable": true, "dtype": "float32", "units": 400, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}]}, "name": "sequential_46", "inbound_nodes": [[["input_35", 0, 0, {}]]]}, {"class_name": "Dense", "config": {"name": "dense_164", "trainable": true, "dtype": "float32", "units": 10, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}, "name": "dense_164", "inbound_nodes": [[["sequential_45", 1, 0, {}]]]}, {"class_name": "Dense", "config": {"name": "dense_168", "trainable": true, "dtype": "float32", "units": 10, "activation": "linear", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}, "name": "dense_168", "inbound_nodes": [[["sequential_46", 1, 0, {}]]]}, {"class_name": "Concatenate", "config": {"name": "concatenate_12", "trainable": true, "dtype": "float32", "axis": -1}, "name": "concatenate_12", "inbound_nodes": [[["dense_164", 0, 0, {}], ["dense_168", 0, 0, {}]]]}, {"class_name": "Sequential", "config": {"name": "sequential_47", "layers": [{"class_name": "InputLayer", "config": {"batch_input_shape": [null, 20], "dtype": "float32", "sparse": false, "ragged": false, "name": "dense_169_input"}}, {"class_name": "Dense", "config": {"name": "dense_169", "trainable": true, "dtype": "float32", "units": 80, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_170", "trainable": true, "dtype": "float32", "units": 400, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_171", "trainable": true, "dtype": "float32", "units": 200, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dropout", "config": {"name": "dropout_18", "trainable": true, "dtype": "float32", "rate": 0.3, "noise_shape": null, "seed": null}}, {"class_name": "Dense", "config": {"name": "dense_172", "trainable": true, "dtype": "float32", "units": 800, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dropout", "config": {"name": "dropout_19", "trainable": true, "dtype": "float32", "rate": 0.3, "noise_shape": null, "seed": null}}, {"class_name": "Dense", "config": {"name": "dense_173", "trainable": true, "dtype": "float32", "units": 80, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}]}, "name": "sequential_47", "inbound_nodes": [[["concatenate_12", 0, 0, {}]]]}, {"class_name": "Dense", "config": {"name": "dense_174", "trainable": true, "dtype": "float32", "units": 4, "activation": "softmax", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}, "name": "dense_174", "inbound_nodes": [[["sequential_47", 1, 0, {}]]]}], "input_layers": [["input_34", 0, 0], ["input_35", 0, 0]], "output_layers": [["dense_174", 0, 0]]}, "name": "model_12", "inbound_nodes": [[["input_poss", 0, 0, {}], ["input_dirs", 0, 0, {}]]]}, {"class_name": "Sequential", "config": {"name": "model_imgs", "layers": [{"class_name": "InputLayer", "config": {"batch_input_shape": [null, 31, 28, 1], "dtype": "float32", "sparse": false, "ragged": false, "name": "conv2d_14_input"}}, {"class_name": "Conv2D", "config": {"name": "conv2d_14", "trainable": true, "dtype": "float32", "filters": 64, "kernel_size": [3, 3], "strides": [1, 1], "padding": "same", "data_format": "channels_last", "dilation_rate": [1, 1], "groups": 1, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Conv2D", "config": {"name": "conv2d_15", "trainable": true, "dtype": "float32", "filters": 128, "kernel_size": [3, 3], "strides": [1, 1], "padding": "same", "data_format": "channels_last", "dilation_rate": [1, 1], "groups": 1, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "AveragePooling2D", "config": {"name": "average_pooling2d_14", "trainable": true, "dtype": "float32", "pool_size": [2, 2], "padding": "valid", "strides": [2, 2], "data_format": "channels_last"}}, {"class_name": "AveragePooling2D", "config": {"name": "average_pooling2d_15", "trainable": true, "dtype": "float32", "pool_size": [2, 2], "padding": "valid", "strides": [2, 2], "data_format": "channels_last"}}, {"class_name": "MaxPooling2D", "config": {"name": "max_pooling2d_7", "trainable": true, "dtype": "float32", "pool_size": [2, 2], "padding": "valid", "strides": [2, 2], "data_format": "channels_last"}}, {"class_name": "Flatten", "config": {"name": "flatten_31", "trainable": true, "dtype": "float32", "data_format": "channels_last"}}, {"class_name": "BatchNormalization", "config": {"name": "batch_normalization_15", "trainable": true, "dtype": "float32", "axis": [1], "momentum": 0.99, "epsilon": 0.001, "center": true, "scale": true, "beta_initializer": {"class_name": "Zeros", "config": {}}, "gamma_initializer": {"class_name": "Ones", "config": {}}, "moving_mean_initializer": {"class_name": "Zeros", "config": {}}, "moving_variance_initializer": {"class_name": "Ones", "config": {}}, "beta_regularizer": null, "gamma_regularizer": null, "beta_constraint": null, "gamma_constraint": null}}, {"class_name": "Dropout", "config": {"name": "dropout_16", "trainable": true, "dtype": "float32", "rate": 0.3, "noise_shape": null, "seed": null}}, {"class_name": "Dense", "config": {"name": "dense_71", "trainable": true, "dtype": "float32", "units": 80, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}]}, "name": "model_imgs", "inbound_nodes": [[["input_imgs", 0, 0, {}]]]}, {"class_name": "Sequential", "config": {"name": "model_tsfr", "layers": [{"class_name": "InputLayer", "config": {"batch_input_shape": [null, 4], "dtype": "float32", "sparse": false, "ragged": false, "name": "dense_72_input"}}, {"class_name": "Dense", "config": {"name": "dense_72", "trainable": true, "dtype": "float32", "units": 80, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dropout", "config": {"name": "dropout_17", "trainable": true, "dtype": "float32", "rate": 0.3, "noise_shape": null, "seed": null}}, {"class_name": "Dense", "config": {"name": "dense_73", "trainable": true, "dtype": "float32", "units": 400, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dropout", "config": {"name": "dropout_18", "trainable": true, "dtype": "float32", "rate": 0.3, "noise_shape": null, "seed": null}}, {"class_name": "Dense", "config": {"name": "dense_74", "trainable": true, "dtype": "float32", "units": 80, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dropout", "config": {"name": "dropout_19", "trainable": true, "dtype": "float32", "rate": 0.3, "noise_shape": null, "seed": null}}]}, "name": "model_tsfr", "inbound_nodes": [[["model_12", 1, 0, {}]]]}, {"class_name": "Dense", "config": {"name": "output_imgs", "trainable": true, "dtype": "float32", "units": 10, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}, "name": "output_imgs", "inbound_nodes": [[["model_imgs", 1, 0, {}]]]}, {"class_name": "Dense", "config": {"name": "output_tsfr", "trainable": true, "dtype": "float32", "units": 10, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}, "name": "output_tsfr", "inbound_nodes": [[["model_tsfr", 1, 0, {}]]]}, {"class_name": "Concatenate", "config": {"name": "input_conc", "trainable": true, "dtype": "float32", "axis": -1}, "name": "input_conc", "inbound_nodes": [[["output_imgs", 0, 0, {}], ["output_tsfr", 0, 0, {}]]]}, {"class_name": "Sequential", "config": {"name": "model_conc", "layers": [{"class_name": "InputLayer", "config": {"batch_input_shape": [null, 20], "dtype": "float32", "sparse": false, "ragged": false, "name": "dense_75_input"}}, {"class_name": "Dense", "config": {"name": "dense_75", "trainable": true, "dtype": "float32", "units": 80, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "BatchNormalization", "config": {"name": "batch_normalization_16", "trainable": true, "dtype": "float32", "axis": [1], "momentum": 0.99, "epsilon": 0.001, "center": true, "scale": true, "beta_initializer": {"class_name": "Zeros", "config": {}}, "gamma_initializer": {"class_name": "Ones", "config": {}}, "moving_mean_initializer": {"class_name": "Zeros", "config": {}}, "moving_variance_initializer": {"class_name": "Ones", "config": {}}, "beta_regularizer": null, "gamma_regularizer": null, "beta_constraint": null, "gamma_constraint": null}}, {"class_name": "Dropout", "config": {"name": "dropout_20", "trainable": true, "dtype": "float32", "rate": 0.3, "noise_shape": null, "seed": null}}, {"class_name": "Dense", "config": {"name": "dense_76", "trainable": true, "dtype": "float32", "units": 400, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "BatchNormalization", "config": {"name": "batch_normalization_17", "trainable": true, "dtype": "float32", "axis": [1], "momentum": 0.99, "epsilon": 0.001, "center": true, "scale": true, "beta_initializer": {"class_name": "Zeros", "config": {}}, "gamma_initializer": {"class_name": "Ones", "config": {}}, "moving_mean_initializer": {"class_name": "Zeros", "config": {}}, "moving_variance_initializer": {"class_name": "Ones", "config": {}}, "beta_regularizer": null, "gamma_regularizer": null, "beta_constraint": null, "gamma_constraint": null}}, {"class_name": "Dropout", "config": {"name": "dropout_21", "trainable": true, "dtype": "float32", "rate": 0.3, "noise_shape": null, "seed": null}}, {"class_name": "Dense", "config": {"name": "dense_77", "trainable": true, "dtype": "float32", "units": 80, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "BatchNormalization", "config": {"name": "batch_normalization_18", "trainable": true, "dtype": "float32", "axis": [1], "momentum": 0.99, "epsilon": 0.001, "center": true, "scale": true, "beta_initializer": {"class_name": "Zeros", "config": {}}, "gamma_initializer": {"class_name": "Ones", "config": {}}, "moving_mean_initializer": {"class_name": "Zeros", "config": {}}, "moving_variance_initializer": {"class_name": "Ones", "config": {}}, "beta_regularizer": null, "gamma_regularizer": null, "beta_constraint": null, "gamma_constraint": null}}]}, "name": "model_conc", "inbound_nodes": [[["input_conc", 0, 0, {}]]]}, {"class_name": "Dense", "config": {"name": "output_conc", "trainable": true, "dtype": "float32", "units": 4, "activation": "sigmoid", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}, "name": "output_conc", "inbound_nodes": [[["model_conc", 1, 0, {}]]]}], "input_layers": [["input_imgs", 0, 0], ["input_poss", 0, 0], ["input_dirs", 0, 0]], "output_layers": [["output_conc", 0, 0]]}, "keras_version": "2.8.0", "backend": "tensorflow"}

utility.py

@@ -0,0 +1,212 @@
+import json, random
+import numpy as np
+from keras.models import model_from_json
+
+# GETTING THE MODELS
+with open("models/random_model.json", "r") as f:
+	random_model = model_from_json(f.read())
+random_model.load_weights("models/random_model.h5")
+
+with open("models/fixed_model.json", "r") as f:
+	fixed_model = model_from_json(f.read())
+fixed_model.load_weights("models/fixed_model.h5")
+
+models = {
+	"fixed": fixed_model,
+	"random": random_model,
+}
+
+# GETTING THE MAP
+with open("binary_map.json", "r") as f:
+	fixed_map = json.loads(f.read())
+rows = 31
+cols = 28
+
+# FUNCTTIONS FOR AUTOMATION
+
+def automate_faster(info):
+	infos = []
+	for i in range(info['automated_infos_count']):
+		dirs = automate(info, stringify_dirs=False)
+		for dir in dirs:
+			if move(info, dir): break
+			info['second_pref_count'] += 1
+			print("SECOND PREFERENCE USED")
+
+		new_info = {}
+		for key, value in info.items():
+			if key == 'map':
+				new_info[key] = value.copy()
+			else:
+				new_info[key] = value
+
+		infos.append(new_info)
+	
+	return infos
+
+def move(info, dir):
+	h = info['map'].index(3)
+
+	if dir == 0: n = h-cols
+	if dir == 1: n = h-1
+	if dir == 2: n = h+cols
+	if dir == 3: n = h+1
+
+	# IF FOOD IS EATEN
+	if (info['map'][n] == 2):
+		# updating board
+		info['score'] += 1
+		info['parts'] += 1
+		info['steps'] = 0
+		info['map'][n] = info['parts']+3
+		# placing food randomly
+		if info['map_type'] == 'random':
+			info = load_map(info)
+			return info
+		else:
+			info = randomize(info, head=False, food=True)
+			
+		# r = random.randint(0, 31*28-1)
+		# while (info['map'][r] != 0):  r = random.randint(0, 31*28-1)
+		# info['map'][r] = 2
+
+	# IF SNAKE HITS THE BODY
+	if (info['map'][n] > 4 and info['map'][n] != info['parts']+3 and not info['evade_bite']):
+		parts_to_remove = (info['parts']+3) - info['map'][n]
+		for i in range(parts_to_remove):
+			info['map'][info['map'].index(info['parts']-i+3)] = 0
+		info['parts'] -= parts_to_remove
+		info['fouls'] += 1
+
+	# MOVING THE BODY
+	if ( info['map'][n] != 1 and info['map'][n] != 3 and info['map'][n] != 4 ):
+		for i in range(info['parts']+1):
+			try:
+				cache_n = info['map'].index(3+i)
+				info['map'][cache_n] = 0
+				info['map'][n] = 3+i
+				n = cache_n
+			except:
+				info['map'][n] = 3+i
+
+		info['steps'] += 1
+		if info['steps'] > info['steps_limit']:
+			info['steps'] = 0
+			info['fouls'] += 1
+			# placing food randomly
+			info = randomize(info, head=False, food=True)
+
+		return True
+	
+	return False
+
+
+def automate(info, stringify_dirs=True):
+	x = preprocessing(info['map'], info['map_type'])
+	y = models[info['map_type']].predict(x)
+	dirs = postprocess(y)
+	if stringify_dirs: return str(dirs)
+	else: return dirs
+
+def preprocessing(x, type):
+	x = np.array(x).reshape(31, 28, 1)
+	food_x, food_y = np.where(x == 2)[1], np.where(x == 2)[0]
+	head_x, head_y = np.where(x == 3)[1], np.where(x == 3)[0]
+	possible_dirs = np.array([[0, 0, 0, 0]])
+	try: possible_dirs[0, 0] = int(x[head_y-1, head_x] == 0 or x[head_y-1, head_x] == 2)
+	except: pass
+	try: possible_dirs[0, 1] = int(x[head_y, head_x-1] == 0 or x[head_y, head_x-1] == 2)
+	except: pass
+	try: possible_dirs[0, 2] = int(x[head_y+1, head_x] == 0 or x[head_y+1, head_x] == 2)
+	except: pass
+	try: possible_dirs[0, 3] = int(x[head_y, head_x+1] == 0 or x[head_y, head_x+1] == 2)
+	except: pass
+		
+	possitions = np.array([[head_x[0]/27, head_y[0]/30, food_x[0]/27, food_y[0]/30]])
+	if type == 'random':
+		maps = np.where(x == 1, 1, 0).reshape(1, 31, 28, 1)
+		x = [maps, possitions, possible_dirs]
+	elif type == 'fixed':
+		x = [possitions, possible_dirs]
+	return x
+
+def postprocess(y):
+	dirs = [0, 0, 0, 0]
+	y = y[0]
+	for i in range(4):
+		dirs[i] = np.argmax(y)
+		y[np.argmax(y)] = -1
+	return dirs
+
+
+
+# FUNCTIONS FOR MAPS
+
+def load_map(info):
+	if info['map_type'] == 'fixed':
+		info['map'] = fixed_map[:]
+	elif info['map_type'] == 'random':
+		info['map'] = [1]*rows*cols
+		info['map'] = add_rects(info['map'], times=8, cross=False, d=8)
+	info = randomize(info, head=True, food=True)
+	return info
+
+def randomize(info, head, food):
+	
+	if food:
+		# finding possition
+		r = random.randint(0, rows*cols -1)
+		while info['map'][r] != 0:
+			r = random.randint(0, rows*cols-1)
+		# removing previous
+		try: info['map'][info['map'].index(2)] = 0
+		except: pass
+		# adding new
+		info['map'][r] = 2
+
+	if head:
+		# removing previous
+		for i in range(info['parts']+1):
+			try:info['map'][info['map'].index(3+i)] = 0
+			except: pass
+		# finding possition
+		r = random.randint(0, rows*cols -1)
+		while info['map'][r] != 0:
+			r = random.randint(0, rows*cols-1)
+		# adding head
+		info['map'][r] = 3
+		# adding body
+		prev = r
+		for part in range(info['parts']):
+			dirs = [prev-1, prev+1, prev-cols, prev+cols]
+			r = random.choice(dirs)
+			while info['map'][r] != 0:
+				dirs.remove(r)
+				if len(dirs) == 0:
+					return randomize(info, head, food)
+				r = random.choice(dirs)
+			info['map'][r] = 4+part
+			prev = r
+		if info['map'][info['map'].index(3)+1] != 0 and info['map'][info['map'].index(3)-1] != 0 and info['map'][info['map'].index(3)+cols] != 0 and info['map'][info['map'].index(3)-cols] != 0:
+			return randomize(info, head, food)
+	return info
+
+def add_rects(map, times=1, d=5, cross=False):
+	map = np.array(map).reshape(rows, cols)
+	x1, y1 = random.randint(1, cols-2-d), random.randint(1, rows-2-d)
+	x2, y2 = random.randint(x1+d, cols-2), random.randint(y1+d, rows-2)
+
+	for x in range(x2-x1+1):
+		map[y1, x1+x] = 0
+		map[y2, x1+x] = 0
+		if cross:
+			map[(y1+y2)//2, x1+x] = 0
+	for y in range(y2-y1+1):
+		map[y1+y, x2] = 0
+		map[y1+y, x1] = 0
+		if cross:
+			map[y1+y, (x1+x2)//2] = 0
+
+	if times == 1: return map.ravel().tolist()
+	else: return add_rects(map=map, times=times-1, d=d, cross=cross)
+

web/README.md

@@ -0,0 +1,11 @@
+# Intelli Snake 2
+#### Python | Machine Learning | Deep Learning | Keras | Tensorflow | Scikit-learn | FAST API | Web Designing | Web Development
+[Play Game](https://geetu040.github.io/intelli-snake-2/)
+
+[Backend API](https://github.com/geetu040/intelli-snake-2)
+
+Previous Versions: 
+
+[Intelli Snake](https://intelli-snake.herokuapp.com/)
+
+[The Fetcher](https://the-fetcher.herokuapp.com/)

web/index.html

@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Intelli Snake 2</title>
+	<link rel="shortcut icon" href="snake.png">
+	<style>
+		:root {
+			--rows: 31;
+			--cols: 28;
+			--win_size: 98vmin;
+		}
+	</style>
+	<link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+
+	<div class="container">
+		<div class="sub-container">
+			<div class="top">
+				<div id="score">Score: <span id="score_span">0</span></div>
+				<div id="fouls">Fouls: <span id="fouls_span">0</span></div>
+				<div id="fouls">Steps: <span id="steps_span">0</span></div>
+			</div>
+			<div class="game">
+
+				<div id="loading" class="lds-hourglass"></div>
+				<div id="ins">
+
+					<b class="heading1">Instructions</b> <br>
+					<ul>
+						<li> Use arrow keys
+							<img src="arrows.png" alt="" width="6%">
+							to move the Snake
+						</li>
+						<li> Press Space at any time to pause the game </li>
+						<li> On Touch systems swipe the screen to control movement </li>
+						<li> Help Snake fetch the food and score higher! </li>
+						<li> You can automate the snake to catch food by itself </li>
+						<li> The game is based on the idea: <a href="https://the-fetcher.herokuapp.com/"
+								target="new">The Fetcher</a> </li>
+						<li> Intelli Snake 2 is an efficient version of: <a href="https://intelli-snake.herokuapp.com/"
+								target="new">Intelli Snake</a> </li>
+					</ul> <br>
+
+
+					<b class="heading1">Fouls</b> <br>
+					A foul is commited when the Snake
+					<ul>
+						<li> eats itself </li>
+						<li> hits the wall (collision needs to be enabled) </li>
+						<li> fails to catch food in 60 steps </li>
+					</ul> <br>
+
+
+					<b class="heading1">Automation</b> <br>
+					Two options are available for automation
+					<ul><br>
+						<li> <b> Fast Automation </b>
+							<ul>
+								<li>Snake moves faster than regular</li>
+								<li> An Asynchronous Http request is sent which returns the next
+									50 steps</li>
+								<li>Snake then moves through the loaded steps, meanwhile more requests are sent for more
+									steps</li>
+								<li>Snake moves and requests are sent in parallel</li>
+							</ul>
+						</li> <br>
+						<li> <b> Automate </b>
+							<ul>
+								<li>Snake moves at regular speed</li>
+								<li>At each step a synchronous Http request is sent which returns with the next step
+								</li>
+								<li>Snake waits for a request at each step</li>
+							</ul>
+						</li>
+					</ul>
+
+					<br>
+					<hr><br>
+					<b class="heading1"> AI behind Automation </b> <br>
+					<ul>
+						<li> For automation we have 2 models built on Deep Neural Networks and Convolutianl Neural
+							Networks </li>
+						<li> Both the models are based on keras API, using tensorflow, implementing Functional API and
+							Sequential models. </li>
+						<li> The models return an array of directions sorted by preference </li>
+						<li> Snake then uses the first direction with most preference </li>
+						<li> If the first preferred direction doestnot help, snake uses the next preference</li>
+						<li> Since the Random Model has lesser accuracy, you'll find it commiting more fouls </li>
+					</ul>
+					<br>
+					<ul>
+						<li>
+							<b>Fixed Model</b> <span>[Accuracy: 99.72%]</span> <br>
+							<ul>
+								<li>
+									It takes 2 inputs
+									<ul>
+										<li> Possition of snake and food </li>
+										<li> Available directions </li>
+									</ul>
+								</li>
+								<li> It is based on Functional API and Sequential Models </li>
+								<li> Deep Neural Networks are involved </li>
+							</ul>
+						</li> <br>
+						<li>
+							<b>Random Model</b> <span>[Accuracy: 94.59%]</span> <br>
+							<ul>
+								<li>
+									It takes 3 inputs
+									<ul>
+										<li> Image of the Map </li>
+										<li> Possition of snake and food </li>
+										<li> Available directions </li>
+									</ul>
+								</li>
+								<li> Deep Neural Networks, along with Convolutianl Neural Networks are involved </li>
+								<li> It is based on Functional API, Sequential Model and Transfer Model (using Fixed
+									Model as base) </li>
+								<li> Input 2 and Input 3 are transferred to Fixed Model, the output is then used with
+									Input 1 by Sequential Models and Functional API which then generate a final output
+								</li>
+
+							</ul>
+						</li>
+					</ul>
+
+
+					<br>
+					<hr>
+					To see the summary of models and the complete back end <br>
+					visit: <a href="https://github.com/geetu040/intelli-snake-2" target="new">Github Repository</a>
+
+				</div>
+
+				<!-- {% for y in range(params.rows) %}
+				{% for x in range(params.cols) %}
+				<div class="game-item"></div>
+				{% endfor %}
+				{% endfor %} -->
+
+			</div>
+		</div>
+		<div class="right">
+			<button id="btn_fast_automation">Fast Automation</button>
+			<button id="btn_pause_auto">Automate</button>
+			<button id="btn_next_map">Random Map</button>
+			<button id="btn_speeder">Slower</button>
+			<button id="btn_collide">Enable Collision</button>
+			<button id="btn_replace">Replace Food</button>
+			<button id="btn_guide">Guide</button>
+		</div>
+	</div>
+
+	<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
+	<!-- <script type="text/javascript" src="https://livejs.com/live.js"></script> -->
+	<script>
+		rows = 31
+		cols = 28
+		win_size = 98
+
+		for (let i=0; i<rows*cols; i++) {
+			let gameItem = document.createElement("div");
+			gameItem.classList.add("game-item")
+			document.getElementsByClassName("game")[0].appendChild(gameItem);
+		}
+
+	</script>
+	<script src="swipe.js"></script>
+	<script src="script.js"></script>
+</body>
+
+</html>

web/script.js

@@ -0,0 +1,386 @@
+// const API_URL = "http://127.0.0.1:8000/intelli-snake-2/"
+const API_URL = "https://intelli-snake-2-api.herokuapp.com/intelli-snake-2/"
+
+let loaded_infos = []
+interval_var_fast = 0
+let start_auto = 1
+let mult = 1
+
+// WRITING IN A FILE
+let file_writing = 0
+let content = ''
+let data_line
+
+class Game {
+	constructor () {
+		// initializing constants and variables
+		this.game_items = document.getElementsByClassName("game-item")
+		this.info = {
+			"map_type": "none",
+			"map": 0,
+			"parts": 2,
+			"evade_bite": 0,
+			"allowcollisions": 0,
+			"score": 0,
+			"fouls": 0,
+			"interval_var": 0,
+			"cache_dir": null,
+			"prev_dir": null,
+			"second_pref_count": 0,
+			"mode": "paused",
+			"steps": 0,
+			"steps_limit": 60,
+			"slow_time": 600,
+			"fast_time": 200,
+			"time": 200,
+			"automated_infos_count": 50,
+			"automated_time_update_freq": 1,
+			"overflow_infos": 0,
+		}
+		// intializing the game
+		this.get_map("fixed")
+		btn_pause_auto.innerText = "Automate"
+	}
+
+
+	set_game_interval(func) {
+		clearInterval(this.info.interval_var)
+		this.info.interval_var = setInterval(func, this.info.time)
+	}
+	auto_key_move() {
+		if (this.info.cache_dir != null) {
+			if(game.move(this.info.cache_dir)) {this.info.prev_dir = this.info.cache_dir}
+			else {game.move(this.info.prev_dir)}
+		}
+	}
+
+
+	move(dir) {
+		if (file_writing) {data_line = "\n" + JSON.stringify(this.info.map)}
+
+		let h = this.info.map.indexOf(3)
+		let n = 31*28
+		if (dir == 0) { n = h - cols }
+		else if (dir == 1) { n = h - 1 }
+		else if (dir == 2) { n = h + cols }
+		else if (dir == 3) { n = h + 1 }
+
+		// IF FOOD IS EATEN
+		if (this.info.map[n] == 2) {
+			this.info.score++
+			this.info.parts++
+			this.info.steps = 0
+			if (this.info.map_type == "random" && file_writing) {
+				// LOADING NEW RANDOM MAP AFTER EATEN
+				this.pause_game()
+				this.get_map("random")
+				return true
+			}
+			this.info.map[n] = this.info.parts+3
+			let r = Math.floor(Math.random() * (31*28))
+			while (this.info.map[r] != 0) { r = Math.floor(Math.random() * (31*28)) }
+			this.info.map[r] = 2
+			this.pause_game()
+		}
+		// CHECKING FOR FOUL WHEN HIT THE WALL
+		if (this.info.map[n] == 1 && this.info.allowcollisions) { this.info.fouls++ }
+		// IF SNAKE HITS THE BODY
+		if (this.info.map[n] > 4 && this.info.map[n] != this.info.parts+3 && !this.info.evade_bite) {
+			let parts_to_remove = (this.info.parts+3) - this.info.map[n]
+			for (let i=0; i<parts_to_remove; i++) { this.info.map[this.info.map.indexOf(this.info.parts-i+3)] = 0 }
+			this.info.parts -= parts_to_remove
+			this.info.fouls++
+		}
+
+		// MOVING THE BODY
+		if (this.can_move(n, dir)) {
+			let cache_n;
+			for (let part=0; part<=this.info.parts; part++) {
+				cache_n = this.info.map.indexOf(3+part)
+				this.info.map[this.info.map.indexOf(3+part)] = 0
+				this.info.map[n] = 3+part
+				n = cache_n
+			}
+			this.update_map()
+			this.info.steps++
+			if (this.info.steps > this.info.steps_limit) { btn_replace.click();this.info.steps=0;this.info.fouls++ }
+
+			if (file_writing) {
+				data_line += "," + String(dir)
+				content += data_line
+			}
+			
+			return true
+		} else {return false}
+	}
+	can_move(next_step, dir) {
+		let next_item = this.info.map[next_step]
+		// IF SNAKE GOES OUT OF BOUNDARIES
+		if (next_step < 0 || next_step > 31*28-1) {return false}
+		if (dir == 1 && next_step % 28 == 27) {return false}
+		if (dir == 3 && next_step % 28 == 0) {return false}
+		// ILLEGAL STEP INSIDE THE BOUNDARIES
+		switch (next_item) {
+			case 0: return true
+			case 1: if (this.info.allowcollisions) {return true} return false
+			case 2: return true
+			case 3: return false
+			case 4: return false
+			default: return true;
+		}
+	}
+
+	automate_faster(time) {
+		clearInterval(interval_var_fast)
+		interval_var_fast = setInterval(() => {
+			if (loaded_infos.length > 1) {
+				this.info = loaded_infos[0]
+				this.update_map()
+				loaded_infos.shift()
+			} else { console.log('\n ==== OUT OF INFOS ==== \n') }
+		}, time);
+	}
+	load_automated_infos() {
+		let time_i = Date.now()
+
+		fetch(API_URL + `automate_faster-${JSON.stringify(loaded_infos[loaded_infos.length-1])}`)
+		.then(response => response.json())
+		.then(data => {
+			let returned_infos = JSON.parse(data)
+			if (btn_fast_automation.innerText == "Fast Automation") {if(btn_guide.innerText == "Guide"){btn_fast_automation.disabled = false};return}
+			loading.style.setProperty("visibility", "hidden")
+			// adding more infos
+			if (loaded_infos.length < 200 || this.info['overflow_infos']) {loaded_infos = loaded_infos.concat(returned_infos)}
+			console.log("ADDED NEW INFOS")
+			console.table(`infos count: ${loaded_infos.length}`)
+
+			// Finding optimal time for interval
+			let time_f = Date.now()
+			let fast_time = (time_f - time_i)/(this.info.automated_infos_count*mult)
+			if (this.info.automated_time_update_freq) { game.automate_faster(fast_time) }
+			else {if (start_auto == 1) {game.automate_faster(fast_time); start_auto=0;}}
+			console.log(`FAST TIME: ${fast_time}`)
+
+			console.log("\n")
+			this.load_automated_infos()
+		});
+	}
+	automate() {
+
+		fetch(API_URL + `automate-${JSON.stringify(this.info)}`)
+		.then(response => response.json())
+		.then(data => {
+			let pred_dirs = JSON.parse(data)  // predicted directions sorted by preference
+			for (let i=0; i<4; i++) { if (this.move(pred_dirs[i])) { this.info.second_pref_count += i; break } }
+		
+		});
+	}
+
+
+
+	get_map(map_type) {
+		// getting the maps
+		loading.style.setProperty("visibility", "visible")
+		this.info.map_type = map_type
+		this.info.steps = 0
+
+		fetch(API_URL + `map-${JSON.stringify(this.info)}`)
+		.then(response => response.json())
+		.then(data => {
+			this.info = JSON.parse(data)
+			loading.style.setProperty("visibility", "hidden")
+			this.update_map()
+		});
+	}
+	update_map() {
+		// APPLYING LIST TO VISUAL GRID
+		for (let i=0; i<rows*cols; i++) {
+			this.game_items[i].classList.remove('wall')
+			this.game_items[i].classList.remove('empty')
+			this.game_items[i].classList.remove('food')
+			this.game_items[i].classList.remove('head')
+			this.game_items[i].classList.remove('body')
+			switch (this.info.map[i]) {
+				case 0: this.game_items[i].classList.add("empty"); break
+				case 1: this.game_items[i].classList.add("wall"); break
+				case 2: this.game_items[i].classList.add("food"); break
+				case 3: this.game_items[i].classList.add("head"); break
+				default: this.game_items[i].classList.add("body"); break
+			}
+		}
+		// UPDATING THE BOARD
+		score_span.innerText = this.info.score
+		fouls_span.innerText = this.info.fouls
+		steps_span.innerText = this.info.steps
+	}
+	pause_game() {
+		clearInterval(this.info.interval_var)
+		clearInterval(interval_var_fast)
+		btn_fast_automation.innerText = "Fast Automation"
+		btn_pause_auto.innerText = "Automate"
+		this.info.mode = "paused"
+		loaded_infos = []
+		start_auto = 1
+		this.info.cache_dir = null
+		btn_next_map.disabled = false
+		btn_speeder.disabled = false
+		if (this.info.map_type == "fixed") {btn_collide.disabled = false}
+		btn_replace.disabled = false
+		// btn_fast_automation.disabled = false
+		btn_pause_auto.disabled = false
+		loading.style.setProperty("visibility", "hidden")
+
+	}
+}
+let game = new Game()
+// KEYBOARD EVENTS
+document.onkeydown = (event)=> {
+	// writing in a file
+	if (event.key == 'Backspace' && file_writing) {
+		content = ''
+	}
+	if (event.key == 'Enter' && file_writing) {
+		fetch(API_URL + `write-${content}`)
+		.then(response => response.json())
+		.then(data => {
+			content = ''
+			return
+		});
+	}
+	// controls
+	if (event.key == 'ArrowRight') { game.info.cache_dir = 3 }
+	if (event.key == 'ArrowLeft') { game.info.cache_dir = 1 }
+	if (event.key == 'ArrowUp') { game.info.cache_dir = 0 }
+	if (event.key == 'ArrowDown') { game.info.cache_dir = 2 }
+	if (event.key == ' ') { game.pause_game(); return }
+	if (game.info.mode == "paused") {
+		// PLAY THE GAME WITH KEYS
+		game.set_game_interval(()=>{ game.auto_key_move() })
+		game.info.mode = "key"
+	}
+}
+// SWIPE EVENTS
+document.addEventListener('swiped-up', function(e) { document.onkeydown({key: 'ArrowUp'})} );
+document.addEventListener('swiped-left', function(e) { document.onkeydown({key: 'ArrowLeft'})} );
+document.addEventListener('swiped-down', function(e) { document.onkeydown({key: 'ArrowDown'})} );
+document.addEventListener('swiped-right', function(e) { document.onkeydown({key: 'ArrowRight'})} );
+
+
+// BUTTONS
+btn_fast_automation.onclick = ()=>{
+	if (btn_fast_automation.innerText == "Fast Automation") {
+		game.pause_game()
+		btn_fast_automation.innerText = "Pause"
+		// FAST AUTOMATE
+		loading.style.setProperty("visibility", "visible")
+		loaded_infos = loaded_infos.concat(game.info)
+		game.load_automated_infos();
+		
+		btn_next_map.disabled = true
+		btn_speeder.disabled = true
+		btn_collide.disabled = true
+		btn_replace.disabled = true
+	} else {
+		game.pause_game();
+		btn_fast_automation.disabled = true
+	}
+}
+btn_pause_auto.onclick = () => {
+	if (btn_pause_auto.innerText == "Automate") {
+		if (btn_fast_automation.innerText == "Pause") {btn_fast_automation.disabled = true}
+		game.pause_game()
+		// AUTOMATE THE GAME
+		btn_pause_auto.innerText = "Pause"
+		game.set_game_interval(()=>{ game.automate() })
+		game.info.mode = "automated"
+		btn_speeder.disabled = true
+	} else {game.pause_game()}
+}
+btn_next_map.onclick = ()=>{
+	game.info.steps = 0
+	game.info.score = 0
+	game.info.fouls = 0
+	if (btn_next_map.innerText == "Random Map") {
+		// GETTING RANDOM MAP
+		game.get_map("random")
+		btn_next_map.innerText = 'Fixed Map'
+		btn_collide.innerText = 'Disable Collision'
+		btn_collide.click()
+		btn_collide.disabled = true
+	} else {
+		// GETTING FIXED MAP
+		game.get_map("fixed")
+		btn_next_map.innerText = 'Random Map'
+		btn_collide.disabled = false
+	}
+	game.pause_game()
+}
+btn_speeder.onclick = () => {
+	if (btn_speeder.innerText == 'Slower') {
+		// SLOW IT
+		game.info.time = game.info.slow_time
+		btn_speeder.innerText = 'Faster'
+	} else {
+		// FAST IT
+		game.info.time = game.info.fast_time
+		btn_speeder.innerText = 'Slower'
+	}
+	if (game.info.mode == "automated") {
+		game.pause_game()
+		btn_pause_auto.click()
+	} else if (game.info.mode == "key") {
+		game.pause_game()
+	}
+}
+btn_collide.onclick = () => {
+	if (btn_collide.innerText == 'Enable Collision') {
+		// Enable Collision
+		game.info.allowcollisions = 1
+		btn_collide.innerText = 'Disable Collision'
+	} else {
+		// Disable Collision
+		game.info.allowcollisions = 0
+		btn_collide.innerText = 'Enable Collision'
+	}
+}
+btn_replace.onclick = () => {
+	game.info.map[game.info.map.indexOf(2)] = 0
+	let r = Math.floor(Math.random() * (31*28))
+	while (game.info.map[r] != 0) { r = Math.floor(Math.random() * (31*28)) }
+	game.info.map[r] = 2
+	game.update_map()
+}
+btn_guide.onclick = ()=>{
+	game.pause_game()
+	if (btn_guide.innerText == "Guide") {
+		// SHOWING GUIDE
+		ins.style.setProperty('display', 'block')
+		btn_guide.innerText = "Close"
+		btn_fast_automation.disabled = true
+		btn_pause_auto.disabled = true
+		btn_next_map.disabled = true
+		btn_speeder.disabled = true
+		btn_collide.disabled = true
+		btn_replace.disabled = true
+	} else {
+		// CLOSING GUIDE
+		ins.style.setProperty('display', 'none')
+		btn_guide.innerText = "Guide"
+		btn_fast_automation.disabled = false
+	}
+}
+document.querySelector("body").style.setProperty("height", `${window.innerHeight}px`)
+document.querySelector(":root").style.setProperty(
+	"--win_size",
+	`${(win_size/100) * ((window.innerHeight < window.innerWidth)? window.innerHeight: window.innerWidth)}px`
+)
+
+window.addEventListener("resize", () => {
+	document.querySelector("body").style.setProperty("height", `${window.innerHeight}px`)
+	document.querySelector(":root").style.setProperty(
+		"--win_size",
+		`${(win_size/100) * ((window.innerHeight < window.innerWidth)? window.innerHeight: window.innerWidth)}px`
+	)
+});
+
+

web/style.css

@@ -0,0 +1,280 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+:root {
+	--screen_ratio: 11vmin;
+	--top_size: 8%;
+	--right_size: 18%;
+	--border_size: 0.4vmin;
+	--ins_size: 95%;
+	--loading_size: 10vmin;
+
+	--food_size: 100%;
+	--head_size: 100%;
+	--body_size: 100%;
+
+	--bg_color_lighterer: rgb(240, 239, 239);
+	--bg_color_lighter: rgb(229, 226, 226);
+	--bg_color_light: rgb(187, 186, 186);
+	--bg_color_norm: rgb(117, 116, 116);
+	--bg_color_dark: rgb(87, 86, 86);
+	--bg_color_darker: rgb(51, 50, 50);
+}
+
+body {
+	background-color: var(--bg_color_lighter);
+	overflow: hidden;
+	box-sizing: border-box;
+	width: 100vw;
+	/* height: 100vh; */
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	/* border: 2px solid rgba(255, 0, 0, 0.533); */
+}
+
+#ins {
+	position: absolute;
+	width: var(--ins_size);
+	height: var(--ins_size);
+	overflow-y: scroll;
+	left: calc(50% - var(--ins_size)/2);
+	top: calc(50% - var(--ins_size)/2);
+	z-index: 3;
+	padding: 2%;
+	font-size: 2.25vmin;
+	background-color: var(--bg_color_lighterer);
+	color: var(--bg_color_darker);
+	border: 0.3vmin solid var(--bg_color_darker);
+	outline: 0.3vmin solid var(--bg_color_dark);
+	font-family: monospace;
+	display: none;
+}
+
+#ins>ul {
+	padding-left: 3%;
+}
+
+#ins>b {
+	background-color: inherit;
+	color: black;
+	text-decoration: double;
+}
+
+a {
+	color: black;
+}
+
+li>span {
+	background-color: var(--bg_color_lighter);
+}
+#ins>.heading1 {
+	background-color: var(--bg_color_lighter);
+}
+.big-container {
+	/* border: 2px solid rgba(0, 0, 255, 0.438); */
+	box-sizing: border-box;
+	width: 100vw;
+	/* height: 100vh; */
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.container {
+	border: var(--border_size) solid black;
+	width: var(--win_size);
+	height: calc(var(--win_size) - var(--screen_ratio));
+	/* margin: calc((100vmin - var(--win_size) + var(--screen_ratio) - var(--top_size)/3)/2) auto; */
+	/* margin-top: calc(10vh) ;
+	margin-left: auto;
+	margin-right: auto; */
+	display: flex;
+	flex-direction: row;
+	background-color: var(--bg_color_lighterer);
+}
+
+.sub-container {
+	border-right: var(--border_size) solid var(--bg_color_darker);
+	display: flex;
+	flex-direction: column;
+	width: calc(100% - var(--right_size));
+}
+
+.top {
+	width: 100%;
+	height: var(--top_size);
+	display: flex;
+	justify-content: space-evenly;
+	padding: var(--border_size);
+	background-color: var(--bg_color_light);
+}
+
+.top>div {
+	font-weight: bolder;
+	font-family: monospace;
+	font-family: 'Courier New', Courier, monospace;
+	font-size: 2.8vmin;
+	background-color: var(--bg_color_lighterer);
+	color: var(--bg_color_darker);
+	border: 0.3vmin solid var(--bg_color_darker);
+	padding: 0% 7%;
+	display: flex;
+	align-items: center;
+	width: 30%;
+}
+
+.top>div:hover {
+	cursor: default;
+}
+
+.game {
+	padding: 0.2%;
+	height: 100%;
+	border-top: var(--border_size) solid var(--bg_color_darker);
+
+}
+
+.right {
+	width: var(--right_size);
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+	padding: 0.8%;
+	background-color: var(--bg_color_lighter);
+}
+
+.right>button {
+	font-weight: bolder;
+	font-family: monospace;
+	font-family: 'Courier New', Courier, monospace;
+	font-size: 2.5vmin;
+	width: 100%;
+	height: 8%;
+	border: 0.3vmin solid var(--bg_color_dark);
+	background-color: white;
+	position: relative;
+	overflow: hidden;
+}
+
+.right>button:hover {
+	outline: 0.1vmin solid var(--bg_color_dark);
+	box-shadow: 3px 3px 3px var(--bg_color_norm);
+	background-color: var(--bg_color_light);
+	color: black;
+	cursor: pointer;
+}
+
+.right>button:disabled {
+	cursor: not-allowed;
+	color: inherit;
+	color: var(--bg_color_dark);
+	background-color: var(--bg_color_lighterer);
+}
+
+.right>button:disabled:hover {
+	background-color: inherit;
+	box-shadow: none;
+	outline: none;
+}
+
+.game {
+	display: flex;
+	flex-wrap: wrap;
+	position: relative;
+}
+
+.game>div {
+	width: calc((100%/var(--cols)));
+	height: calc((100%/var(--rows)));
+}
+
+.wall {
+	box-sizing: border-box;
+	margin: 0;
+	background-color: var(--bg_color_norm);
+	border-radius: 10%;
+	border: 0.05vmin solid black;
+
+}
+
+.empty {
+	background-color: var(--bg_color_lighterer);
+}
+
+.food {
+	box-sizing: border-box;
+	background-color: aqua;
+	border: 0.3vmin solid black;
+	outline: 0.4vmin solid rgb(130, 213, 213);
+	border-radius: 45%;
+	z-index: 1;
+	margin: calc(((50% - var(--food_size)/2)/var(--rows))) calc(((50% - var(--food_size)/2)/var(--cols)));
+	width: calc((var(--food_size)/var(--cols))) !important;
+	height: calc((var(--food_size)/var(--rows))) !important;
+}
+
+.head {
+	background-color: rgb(255, 0, 0);
+	border: 0.3vmin solid black;
+	outline: 0.45vmin solid rgb(169, 81, 81);
+	border-radius: 50%;
+	z-index: 2;
+	margin: calc(((50% - var(--head_size)/2)/var(--rows))) calc(((50% - var(--head_size)/2)/var(--cols)));
+	width: calc((var(--head_size)/var(--cols))) !important;
+	height: calc((var(--head_size)/var(--rows))) !important;
+}
+
+.body {
+	box-sizing: border-box;
+	background: rgb(249, 0, 0);
+	background: radial-gradient(circle, rgba(183, 1, 1, 0.492) 41%, rgba(116, 119, 33, 0.3) 58%);
+	border: 0.1vmin solid black;
+	outline: 0.2vmin solid red;
+	border-radius: 50%;
+	z-index: 1;
+	margin: calc(((50% - var(--body_size)/2)/var(--rows)));
+	width: calc((var(--body_size)/var(--cols))) !important;
+	height: calc((var(--body_size)/var(--rows))) !important;
+}
+
+#loading {
+	position: absolute;
+	left: calc((50% - var(--loading_size)));
+	top: calc((50% - var(--loading_size) - calc(100% / var(--rows))));
+	visibility: hidden;
+}
+.lds-hourglass {
+	display: inline-block;
+	position: relative;
+}
+
+.lds-hourglass:after {
+	content: " ";
+	display: block;
+	border-radius: 50%;
+	width: 0;
+	height: 0;
+	margin: 0;
+	border: var(--loading_size) solid;
+	border-color: rgba(0, 0, 0, 0.355) transparent;
+	animation: lds-hourglass 1.2s infinite;
+}
+
+@keyframes lds-hourglass {
+	0% {
+		transform: rotate(0);
+		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	}
+
+	50% {
+		transform: rotate(900deg);
+		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+	}
+
+	100% {
+		transform: rotate(1800deg);
+	}
+}

web/swipe.js

@@ -0,0 +1,157 @@
+/*!
+ * swiped-events.js - v@version@
+ * Pure JavaScript swipe events
+ * https://github.com/john-doherty/swiped-events
+ * @inspiration https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element
+ * @author John Doherty <www.johndoherty.info>
+ * @license MIT
+ */
+(function (window, document) {
+
+	'use strict';
+  
+	// patch CustomEvent to allow constructor creation (IE/Chrome)
+	if (typeof window.CustomEvent !== 'function') {
+  
+	    window.CustomEvent = function (event, params) {
+  
+		  params = params || { bubbles: false, cancelable: false, detail: undefined };
+  
+		  var evt = document.createEvent('CustomEvent');
+		  evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+		  return evt;
+	    };
+  
+	    window.CustomEvent.prototype = window.Event.prototype;
+	}
+  
+	document.addEventListener('touchstart', handleTouchStart, false);
+	document.addEventListener('touchmove', handleTouchMove, false);
+	document.addEventListener('touchend', handleTouchEnd, false);
+  
+	var xDown = null;
+	var yDown = null;
+	var xDiff = null;
+	var yDiff = null;
+	var timeDown = null;
+	var startEl = null;
+  
+	/**
+	 * Fires swiped event if swipe detected on touchend
+	 * @param {object} e - browser event object
+	 * @returns {void}
+	 */
+	function handleTouchEnd(e) {
+  
+	    // if the user released on a different target, cancel!
+	    if (startEl !== e.target) return;
+  
+	    var swipeThreshold = parseInt(getNearestAttribute(startEl, 'data-swipe-threshold', '20'), 10); // default 20px
+	    var swipeTimeout = parseInt(getNearestAttribute(startEl, 'data-swipe-timeout', '500'), 10);    // default 500ms
+	    var timeDiff = Date.now() - timeDown;
+	    var eventType = '';
+	    var changedTouches = e.changedTouches || e.touches || [];
+  
+	    if (Math.abs(xDiff) > Math.abs(yDiff)) { // most significant
+		  if (Math.abs(xDiff) > swipeThreshold && timeDiff < swipeTimeout) {
+			if (xDiff > 0) {
+			    eventType = 'swiped-left';
+			}
+			else {
+			    eventType = 'swiped-right';
+			}
+		  }
+	    }
+	    else if (Math.abs(yDiff) > swipeThreshold && timeDiff < swipeTimeout) {
+		  if (yDiff > 0) {
+			eventType = 'swiped-up';
+		  }
+		  else {
+			eventType = 'swiped-down';
+		  }
+	    }
+  
+	    if (eventType !== '') {
+  
+		  var eventData = {
+			dir: eventType.replace(/swiped-/, ''),
+			touchType: (changedTouches[0] || {}).touchType || 'direct',
+			xStart: parseInt(xDown, 10),
+			xEnd: parseInt((changedTouches[0] || {}).clientX || -1, 10),
+			yStart: parseInt(yDown, 10),
+			yEnd: parseInt((changedTouches[0] || {}).clientY || -1, 10)
+		  };
+  
+		  // fire `swiped` event event on the element that started the swipe
+		  startEl.dispatchEvent(new CustomEvent('swiped', { bubbles: true, cancelable: true, detail: eventData }));
+  
+		  // fire `swiped-dir` event on the element that started the swipe
+		  startEl.dispatchEvent(new CustomEvent(eventType, { bubbles: true, cancelable: true, detail: eventData }));
+	    }
+  
+	    // reset values
+	    xDown = null;
+	    yDown = null;
+	    timeDown = null;
+	}
+  
+	/**
+	 * Records current location on touchstart event
+	 * @param {object} e - browser event object
+	 * @returns {void}
+	 */
+	function handleTouchStart(e) {
+  
+	    // if the element has data-swipe-ignore="true" we stop listening for swipe events
+	    if (e.target.getAttribute('data-swipe-ignore') === 'true') return;
+  
+	    startEl = e.target;
+  
+	    timeDown = Date.now();
+	    xDown = e.touches[0].clientX;
+	    yDown = e.touches[0].clientY;
+	    xDiff = 0;
+	    yDiff = 0;
+	}
+  
+	/**
+	 * Records location diff in px on touchmove event
+	 * @param {object} e - browser event object
+	 * @returns {void}
+	 */
+	function handleTouchMove(e) {
+  
+	    if (!xDown || !yDown) return;
+  
+	    var xUp = e.touches[0].clientX;
+	    var yUp = e.touches[0].clientY;
+  
+	    xDiff = xDown - xUp;
+	    yDiff = yDown - yUp;
+	}
+  
+	/**
+	 * Gets attribute off HTML element or nearest parent
+	 * @param {object} el - HTML element to retrieve attribute from
+	 * @param {string} attributeName - name of the attribute
+	 * @param {any} defaultValue - default value to return if no match found
+	 * @returns {any} attribute value or defaultValue
+	 */
+	function getNearestAttribute(el, attributeName, defaultValue) {
+  
+	    // walk up the dom tree looking for attributeName
+	    while (el && el !== document.documentElement) {
+  
+		  var attributeValue = el.getAttribute(attributeName);
+  
+		  if (attributeValue) {
+			return attributeValue;
+		  }
+  
+		  el = el.parentNode;
+	    }
+  
+	    return defaultValue;
+	}
+  
+  }(window, document));