Teachable Machine Client App 💻

This simple client app offers local server hosting for AI models created with Teachable Machine. It allows you to launch a local server on your desktop and seamlessly access it from other devices within your network.

• Features

  • Image upload
  • Camera (both front and rear)
  • Camera controls (play and pause)
  • Custom Theme
  • Ngrok Supported
    

• Requirements

  • Python 3
  • Python packages:
    • ngrok
    • pyyaml
  • Internet Access

Follow the steps below to setup a frontend for your AI model trained with Teachable machine.

---

How to build a AI model with Teachable Machine

Step 1

Go to https://teachablemachine.withgoogle.com/train/image

Step 2

Name the different classes for your model (eg: with mask, without mask, mask weared incorrectly)

Step 3

Upload Different Image from different angles for each class or click on webcam to open webcam and take photo realtime

Step 4

Click on Train Model

Step 5

Click on Export Model

Upload or Download your Model

---

Step 1 (Downloading Repository)

Manually Download the zip

• Download the zip and Extract the files
• Open the folder and click on the address bar and type cmd.exe and Press Enter This will open cmd on the project folder

Using Git

• Open cmd.exe (from start menu or Press Win + R and type cmd.exe and Press Ok)

  Clone the repository and navigate to the folder

  git clone https://github.com/sanayvarghese/client-teachable-machine.git
  

  cd client-teachable-machine
  

Step 2 (Installing Requirements)

Now you want to install the requirements for the project to run using python In cmd.exe, Paste

python -m pip install -r requirements.txt

Step 3 (Configuring Project)

Now open the browser and get your Teachable machine trained AI model link or download the model and edit the config.yml file

Using Teachable machine model link

• First upload your model

  
  

• Copy the sharable link

  
  

• Paste the link in config.yml file for the field TEACHABLE_MACHINE_URL.

  Eg: config.yml

  From

  TEACHABLE_MACHINE_URL: ./libraries/

  To

  TEACHABLE_MACHINE_URL: https://teachablemachine.withgoogle.com/models/XXXXXX/

  Make sure you leave a space between colon( : )

  Replace https://teachablemachine.withgoogle.com/models/XXXXXX/ with your link
  

Using downloaded model

• First download the model

And move to the project folder

• Unzip and move the files to libraries/ folder

  Files are

  • metadata.json
  • model.json
  • weights.bin
    

• Edit the config.yml file's TEACHABLE_MACHINE_URL field

  Now config.yml will be like

  TEACHABLE_MACHINE_URL: ./libraries/

  Make sure you leave a space between colon( : )

Step 3 (Running the app)

Tip

If you want to start a secure server and access your server from any device consider using Ngrok We have provided the steps to setup ngrok with our project in FAQ

Start server and host the app on the local machine

In cmd.exe type:

python server.py

Our app will be now hosted on https://<your ip>:8000 Now visit this url using a browser on same device or another device on same network.

Now this warning page will appear.

Click on Advanced and click on Proceed to ... Accept the camera permission to enable camera.

Now our app is perfectly working! 🥳🎉

Tip

You can set custom theme colors by changing theme.css (We have also provided a detailed walkthrough in FAQ)

Tip

You can change the facing mode of camera in config.yml (We have also provided a detailed walkthrough in FAQ)

If you have any questions or face any issue, feel free to message me on Twitter(@sanayvarghese) or on Instagram(@sanay_.wh00)(Fast reply) or Open an issue on this repository. Thankyou 🤩

FAQ

Q1. How to change the camera view?

Step 1

Open the config.yml file and edit CAMERA_FACING to your desired mode

CAMERA_FACING: "front"

OR

CAMERA_FACING: "rear"

And Restart your server

Q2. How to integrate Ngrok with our app?

Step 1

Go to ngrok dashboard and copy your auth_token (Eg: 2HaR4n5oF4XXXXXXXXXXX)

Step 2

Edit the config.yml

NGROK_AUTH_TOKEN: <your ngrok_auth_token>

Replace <your ngrok_auth_token> with your copied token

Step 3

Start the server

Step 4

• For devices on the same network,

  • Visit http://<your ip>:8001 which will redirect to ngrok hosted website
  • If your Visiting the site for first time a prompt will appear, click on Visit Site button After you click the Visit Site Button it will open your app, and accpet the camera permission

• For deivces outsite your network,

  • Manually type the ngrok url in your browser
  • Click on Visit Site Button it will open your app, and accpet the camera permission

Q3. How to set custom themes?

Open theme.css file edit the colors from there

:root {
  --primary-color: darkviolet; /*Border video color*/
  --background-color: black; /*Background color (default: dark mode)*/
  --text-color: white; /*Text color*/
  --button-color: black; /*Control button color*/
  --botton-border: white; /*Control button Border*/
}

Restart the server to apply the changes

Q3. Facing Error: yaml.parser.ParserError

Open config.yml and Make Sure you have leaved a space after colon( : )

If the error still persist, Feel free to contact me or open a issue in github.