Skip to content

noFlowWater/signage_solution

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Contributors Forks Stargazers Issues MIT License webos


Logo

Face Certification Kiosk Using webOS

It's a webOS-based signage solution kiosk example project that verification the face of registered users and makes custom recommendations.

🎥 View Demo · 🐞 Report Bug · 💬 Request Feature

🗂️ Table of Contents 🗂️
  1. About The Project
  2. Specifications
  3. Getting Started
  4. Usage Screenshot
  5. Contact

About The Project

User Facial Registration User Menu Recommendation Algorithm

Background

Small-scale business owners often face financial constraints that make it challenging to afford expensive signage solutions. Therefore, there is a growing need for an affordable, open-source-based signage solution that can be easily implemented without the high costs associated with traditional signage products. This proposal aims to develop a user-customized kiosk that recognizes users to recommend menus and dynamically update menu lists.

Project Objectives and Content

User Verification:

  • The kiosk will utilize a camera to identify users and check if they are returning visitors with payment records.
  • Images captured by the kiosk camera will be sent to an image process server for user identification.
  • The server will verify if the recognized user is a returning visitor.
  • In cases where user verification is unsuccessful, an alternative authentication method is provided.

Custom Menu Recommendations and Reconfiguration through Web App:

  • User data registration will be facilitated both at the kiosk and in the server's database.
  • The web app will offer menu recommendations based on user information.
  • Menus will be dynamically altered based on user data (considering factors like allergies, etc.).
  • Menu recommendations will operate using a user collaborative filtering algorithm based on the order history of registered users.

Note: Payment processing is not included in the scope of this project.

🖼️ System Architecture 🖼️

System Architecture

🖼️ Database ERD 🖼️

Database ERD

Built With

Frontend

ReactnpmBootstrapSocket.ioJavaScriptFigma

Face Identify Server

FlaskOpenCVSocket.ioPython

Kiosk API Server

NodejsnpmPrismaJavaScript

Database

MySQLPrisma

Development Environment

macOS

Client Environment

LGRaspberry

(back to top)

Specifications

Development Environment Specifications

Our project was developed in an Apple Silicon environment, which provided us with advanced computing capabilities and efficiency. Here are the details:

  • Platform: Apple Silicon (M1, M1 Pro, M1 Max, or later)
  • Operating System: macOS Big Sur or later
  • Memory: 8GB RAM or more
  • Storage: 256GB SSD or higher

We recommend using a similar Apple Silicon-based environment for development to ensure compatibility

Hardware Requirements for Client Device

For setting up the client device in this project, you will need the following hardware components:

  • Raspberry Pi 4 4GB(+@): The core computing unit for the kiosk.
  • MicroSD Card with webOS Image: Use a microSD card loaded with the webOS image to boot the Raspberry Pi. For this project, we have used the pre-built webOS OSE 2.24.0 image for Raspberry Pi 4, which can be downloaded from here. Additionally, if you need guidance on flashing the webOS Open Source Edition to your microSD card, please refer to flashing webos-ose guide for detailed instructions.
  • Touchscreen or Monitor: A display unit to interact with the kiosk. A touchscreen is preferred for a more interactive experience.
    we use this
  • Webcam: An essential component for facial recognition or other interactive features. Ensure compatibility with the Raspberry Pi.
  • Optional Input Devices: Devices like a mouse and keyboard for initial setup and troubleshooting.
  • Power Supply and Cables: A suitable power supply for the Raspberry Pi and screen, along with necessary cables such as HDMI for connectivity.

Ensure that you have all these components available before proceeding with the setup of your client device for the signage solution project.

webOS Offitial Docs

(back to top)

Getting Started

This guide will help you set up and run the project in your local environment. Follow these steps to get started.

Note: This guide is tailored for a setup on a single local PC. It can also be adapted for multi-server environments, accommodating both centralized and distributed systems efficiently.

Note: For effective data processing, we recommend hosting both the Flask application and database on the same system. This setup reduces latency and improves operational efficiency, especially for large, user-specific models.

Installation

The process for installing and setting up the project is as follows. This template does not rely on any external dependencies or services.

  1. Clone the repository.
    git clone https://github.com/noFlowWater/signage_solution.git
  2. Move into the cloned directory.
    cd signage_solution

After cloning and moving into the directory, you will find three folders in the project directory:
react, flask, nodejs.

Proceed with the project in the following order:

Each step is detailed in the README.md file of the respective folder, allowing you to sequentially progress and gather the necessary information.

(back to top)

Usage Screenshot

🖼️ Home 🖼️

홈 화면

🖼️ User 🖼️

Select User Mode

🖼️ 1. Select User Mode 🖼️

사용자 모드 선택

User Registration

🖼️ 1. Enter User Basic Information 🖼️

사용자 기본정보 입력

🖼️ 2. Register user's face 🖼️

사용자 얼굴 등록

🖼️ 3. Select User Allergy 🖼️

사용자 알러지 선택

User Login

🖼️ 1. User Authentication 🖼️

사용자 인식 사용자 확인

🖼️ 2. User Alternate Authentication 🖼️

대체 인증

Menu

🖼️ 1. Custom Menu recommendation 🖼️

메뉴 추천

🖼️ 2. Check Menu Allergy/Soldout, Detail 🖼️

알러지:매진 확인 알러지 확인창

🖼️ 3. Check Shopping Cart & Pay 🖼️

장바구니 확인 결제 완료

🖼️ Admin 🖼️

Administrator Login

🖼️ 1. Administrator Login 🖼️

관리자 로그인

🖼️ 2. Administrator Login Failure 🖼️

관리자 비밀번호 체크

Administrator Menu Management

🖼️ 1. Administrator Menu List 🖼️

관리자 홈

🖼️ 2. Administrator Menu Details 🖼️

관리자 메뉴 상세보기

🖼️ 3. Administrator Menu Registration and Deletion 🖼️

관리자 메뉴 등록 관리자 메뉴 수정

Administrator Password Change

🖼️ 1. Changing Password (fail 1) 🖼️

admin_change_password_1

🖼️ 2. Changing Password (fail 2) 🖼️

admin_change_password_2

🖼️ 3. Changing Password (success) 🖼️

admin_change_password_3

(back to top)

Contact

💡 노유수 (noFlowWater) : [email protected]

💡 주보경 (jupyter1234) : [email protected]

💡 윤진노 (jinno321) : [email protected]

💡 이민수 (ohyatt) : [email protected]

💡 김현수 (beoldshoe) : [email protected]

(back to top)