Add "about" page and more descriptions in readme. Change default thre… (#12)

* Add "about" page and more descriptions in readme. Change default threshold to 0.8.

* Update variable name for deepsource.

.flake8

@@ -1,5 +1,5 @@
 [flake8]
-ignore = I001,I002,I004,I005,I101,I201,C101,C403,C901,F401,F403,S001,D100,D101,D102,D103,D104,D105,D106,D107,D200,D210,D205,D400,T001,W504,D202,E203,W503,B006,T002,T100,P103,C408,F841
+ignore = I001,I002,I004,I005,I101,I201,C101,C403,C901,F401,F403,S001,D100,D101,D102,D103,D104,D105,D106,D107,D200,D210,D205,D400,T001,W504,D202,E203,E501,W503,B006,T002,T100,P103,C408,F841
 max-line-length = 120
 exclude = outputs/*
 max-complexity = 10

.github/README.md

@@ -1 +1,2 @@
-This is the main readme file.
+![visitors](https://visitor-badge.glitch.me/badge?page_id=wissamantoun.arabicnlpapp)
+[![DeepSource](https://static.deepsource.io/deepsource-badge-light-mini.svg)](https://deepsource.io/gh/Erlemar/digit-draw-detect/?ref=repository-badge )

README.md

@@ -10,4 +10,4 @@ app_file: st_app.py
 pinned: false
 license: mit
 ---
-Checking readme.
+![visitors](https://visitor-badge.glitch.me/badge?page_id=wissamantoun.arabicnlpapp)

pages/about.py

@@ -0,0 +1,22 @@
+import streamlit as st
+
+text = """
+## A brief history of the project.
+The first idea of the project was conceived in the summer of 2017. I completed cs231n course and wanted to put my skills to the test. So I studied Flask and many other tools from scratch and made an [app](https://github.com/Erlemar/digit-draw-recognize) for recognizing handwritten digits. It had two models - a simple feed-forward neural net written in NumPy and a CNN written in Tensorflow. One fun feature of this app was online learning: the model continuously improved its predictions based on new inputs (though this did sometimes lead to incorrect predictions).
+
+In 2019 I decided to update the [project](https://github.com/Erlemar/digit-draw-predict): I trained the new neural net in PyTorch and used cv2 to detect separate digits (people often drew multiple digits). More than that, the model had 11 classes - I made a separate class for "junk", as people often drew things for fun: animals, objects, or words.
+
+The first two versions were deployed on Heroku's free plan, but in 2022 these plans were discontinued. I didn't want my project to die because of nostalgia, so I developed a new version and deployed it differently. The current version has an object detection model (yolo3 written from scratch) and 12 classes (digits, junk, and **censored**)
+. If you want to know what does **censored** means, just try to draw something 😉
+
+Initially, I considered deploying the app on Streamlit Cloud, but its computational limits were too low, so now the model is live on HuggingFace Spaces.
+
+### Links with additional information:
+
+* [Project page on my personal website](https://andlukyane.com/project/drawn-digits-prediction)
+* [A dataset with the digits and bounding boxes on Kaggle](https://www.kaggle.com/datasets/artgor/handwritten-digits-and-bounding-boxes)
+* [Training code](https://github.com/Erlemar/pytorch_tempest_pet_)
+
+"""
+
+st.markdown(text, unsafe_allow_html=True)

src/utils.py

@@ -1,5 +1,6 @@
 import datetime
 import json
+import os
 import uuid
 from typing import List
 
@@ -9,12 +10,22 @@ import matplotlib.patches as patches
 import matplotlib.pyplot as plt
 import numpy.typing as npt
 import streamlit as st
+import tomli
 
 AWS_ACCESS_KEY_ID = ''
 AWS_SECRET_ACCESS_KEY = ''
-if st.secrets is not None:
-    AWS_ACCESS_KEY_ID = st.secrets['AWS_ACCESS_KEY_ID']
-    AWS_SECRET_ACCESS_KEY = st.secrets['AWS_SECRET_ACCESS_KEY']
+try:
+    if st.secrets is not None:
+        AWS_ACCESS_KEY_ID = st.secrets['AWS_ACCESS_KEY_ID']
+        AWS_SECRET_ACCESS_KEY = st.secrets['AWS_SECRET_ACCESS_KEY']
+except BaseException:
+    pass
+
+if os.path.exists('config.toml'):
+    with open('config.toml', 'rb') as f:
+        config = tomli.load(f)
+        AWS_ACCESS_KEY_ID = config['AWS_ACCESS_KEY_ID']
+        AWS_SECRET_ACCESS_KEY = config['AWS_SECRET_ACCESS_KEY']
 
 client = boto3.client('s3', aws_access_key_id=AWS_ACCESS_KEY_ID, aws_secret_access_key=AWS_SECRET_ACCESS_KEY)
 
@@ -84,8 +95,8 @@ def save_image(image: npt.ArrayLike, pred: List[List]) -> str:
     fig.savefig(f'{file_name}.png')
 
     # dump bboxes in a local file
-    with open(f'{file_name}.json', 'w') as f:
-        json.dump({f'{file_name}.png': pred}, f)
+    with open(f'{file_name}.json', 'w') as j_f:
+        json.dump({f'{file_name}.png': pred}, j_f)
 
     # upload the image and the bboxes to s3.
     save_object_to_s3(f'{file_name}.png', f'images/{file_name}.png')

st_app.py

@@ -8,6 +8,7 @@ from streamlit_drawable_canvas import st_canvas
 from src.ml_utils import predict, get_model, transforms
 from src.utils import plot_img_with_rects, save_image
 
+st.title('Handwritten digit detector')
 logging.info('Starting')
 
 col1, col2 = st.columns(2)
@@ -38,9 +39,19 @@ with col2:
         logging.info('prediction done')
 
         file_name = save_image(image.permute(1, 2, 0).numpy(), pred)
-        threshold = st.slider('Bbox probability slider', min_value=0.0, max_value=1.0, value=0.5)
+        threshold = st.slider('Bbox probability slider', min_value=0.0, max_value=1.0, value=0.8)
 
         fig = plot_img_with_rects(image.permute(1, 2, 0).numpy(), pred, threshold, coef=192)
         fig.savefig(f'{file_name}_temp.png')
         image = Image.open(f'{file_name}_temp.png')
         st.image(image)
+
+text = """
+This is a small app for handwritten digit recognition and recognition developed for fun. It uses a handwritten YOLOv3 model trained from scratch.
+You can draw a digit (or whatever you want) and the model will try to understand what is it.
+You can use the slider above to show bounding boxes with a probability higher than the threshold.
+If you want to know how the app works in more detail, you are welcome to read "About" page.
+Enjoy! :)
+"""
+
+st.markdown(text, unsafe_allow_html=True)