harshkapadia2 / one-or-two

A hand gesture model web app to detect 1 and 2 in a picture.

one-or-two

A hand gesture model from Teachable Machine to detect 1 and 2 in a picture.

Hosted at https://one-or-two.herokuapp.com/.

Sample inputs have been provided in the ./samples directory.

Aim

The aim of making this web app was to learn how to connect a model with a web app. Even though that was sort of achieved, there are a lot of problems with the model and results. Working on the issues!

Contributions

• All contributors are most welcome!
• Please refer to CONTRIBUTING.md for local project setup and further instructions.

one-or-two's Issues

Move internal CSS to an external file.

• ./templates/github-corner.html has CSS in <style></style> tags.
• Remove the <style> tag and add the CSS code within it to a new file ./static/css/github-corner.css.
• Add a link to the github-corner.css file in ./templates/base.html.

Internal Server Error on using PNG files

500 Internal Server Error in /predict when a PNG file is uploaded.

Add a 404 page

• What is a 404 NOT FOUND HTTP error?
• Create a simple front end 404 template.
  • Create a new CSS file for the page in the ./static/css dir and include it in the {% block head %} section of the HTML file (example) after adding {% block head %}{% endblock %} to ./templates/base.html (example).
• Use Flask error handlers to display a 404 page.

Prediction issue

Hi @HarshKapadia2

Great Project! ^_^
Also, went through Teachable Machines, it seems like a simple and brilliant concept.

I tried uploading some images on the webpage. It seems to give a false prediction for every image capturing 1.
I have attached the images, Please look into it. It gives false predictions on all versions of 1.

Drive Link

Thank you,
Tushar Nankani

Disable `Predict` button on click.

On the home page (./templates/home-page.html), once the Predict button is clicked, it should be disabled so that multiple requests are not sent to the server.

Use client side JavaScript (JS) to handle this.

Steps:

• Add an id to the Predict button in ./templates/home-page.html.
• Create a new JS file at ./static/js.
• Include it in the {% block head %} section of ./templates/home-page.html (example) after adding {% block head %}{% endblock %} to ./templates/base.html (example).
• In the new JS file
  • Refer to the Predict button using const <element> = document.querySelector("#<element-id>").
  • Add an event listener with a click event to the button.
  • In the event listener, use <element>.disabled = true to disable the button.

ML model

• The current model is a model I made using Teachable Machine.
• A better model, maybe a custom one built by someone, would be better.
• If any changes to the model are made, please
  • make changes to ./model/model.py.
  • make sure that the output format is correct on the output page.
  • change README.md by removing 'Teachable Machine' from the text. (If the model is built by someone else.)
  • add any more details to CONTRIBUTING.md for local project setup.

Dynamic error page

There should be one common template for all errors where the error code (Eg: 404, 500) and error message (Eg: NOT FOUND, INTERNAL SERVER ERROR) were just passed in as and when the error occurred.

Refer to issues #6 and #7 and PR #19 for some help.

Example:
A Node.js project Food Oye that I had done. (Live web app)

The status, status_descp and err_trace in the 1st pic get populated in the final output (2nd pic)

A similar thing has to be done in Flask.

Add a 500 page

• What is a 500 INTERNAL SERVER ERROR HTTP error?
• Create a simple front end 500 template.
  • Create a new CSS file for the page in the ./static/css dir and include it in the {% block head %} section of the HTML file (example) after adding {% block head %}{% endblock %} to ./templates/base.html (example).
• Use Flask error handlers to display a 500 page.

Web cam functionality.

• Currently the user needs to upload a picture from their devices.
• Leaving this option open, add a feature to enable the web cam and take a picture if the user wishes to.
• The picture should directly be taken as an input.

CSS code splitting.

• Split the CSS code in ./static/css/style.css into a file for each page.

Changes

• Add the CSS code common to all stylesheets to ./static/css/base.css.
• Add the CSS code pertaining to a particular HTML template file to a new CSS file with the same name as the HTML file, to the ./static/css dir.
• Delete the ./static/css/style.css file.
• Remove the link to style.css in the ./templates/base.html file.
• Add a link to the ./static/css/base.css file to the ./templates/base.html file as follows

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/base.css') }}">

• In each HTML file, add a link to its specific css file in the {% block head %} block.
  • Add a {% block head %}{% endblock %} in the head of ./templates/base.html as well.

Eg:
base.html (Example from another project)

<head>
	...
	...
	{% block head %}{% endblock %}
	...
	...
</head>

file-name.html (Example from another project)

{% extends 'base.html' %}

{% block head %}
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/file-name.css') }}">
{% endblock %}

{% block body %} ...