Labelling Images Application for Machine Learning – update 2

This version deployed includes:

✅ A reward system that celebrates milestones with a trophy 🏆 when users label a certain number of images.

On this update I did implement user sessions and a process to counts numbers of images labelled in the session, then once on the session did labelled 10 images it show a modal to celebrate the achievement.

const getSessionId = () => {
    let sessionId = localStorage.getItem('sessionId');
    if (!sessionId) {
        sessionId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
        localStorage.setItem('sessionId', sessionId);
    }
    return sessionId;
}

const incrementFeedbackCount = () => {
  let feedbackCount = parseInt(localStorage.getItem('feedbackCount'), 10) || 0;
  feedbackCount += 1;
  localStorage.setItem('feedbackCount', feedbackCount);
  return feedbackCount;
};

const getFeedbackCount = () => {
  return parseInt(localStorage.getItem('feedbackCount'), 10) || 0;
};

const n = getFeedbackCount();

{isModalOpen && (
     <div className="modal">
           <div className="modal-content">
                {(n==10) ? (
                    <div className="subTitle">
                       <h3>You labelled {n} images</h3>
                       <h3>Great job!</h3>
                       {/* Trophy icon */}
                       <div className='award'>
                          <span role="img" aria-label="trophy" style={{fontSize: '48px'}}>🏆</span>
                          <p className='smallFont'>You have earned a trophy!</p>
                        </div>
                    </div>
                 ) : (
                    <p>{modalMessage}</p>
                 )}                    
                <button className='button' onClick={closeModal}>Ok</button>
                <p className="smallFont">Total labels Submitted: {feedbackCount}</p>             
            </div>
      </div>
)}   

This project is a step forward in my journey to understanding and applying Machine Learning concepts.

I’d love for you to check it out and share your feedback! 

URL : https://josesuarezcordova.github.io/pwa_app/