Teachable to HTML

A Teachable Machine model can be converted into an interactive web page by exporting its code directly into an HTML file. This allows a trained machine learning program to run inside a standard web browser using live camera input.

Exporting from Teachable Machine

• Open a pose project in Teachable Machine and label the two classes as sit and stand.
• Click the train model button to start training and check that the predictions work properly.
• Click the export model button and select the option to upload the model online.
• Copy the code provided at the bottom once the upload process finishes.

Running the code in a browser

Open a text editor, set it to plain text, paste the exported code, and save the document as an HTML file. When you open this file in a web browser, click the start button and wait a moment for the machine learning model to load. Grant the requested camera permission by clicking allow so the browser can see the live video. The page then displays detection results, showing a value like 1.00 when the correct sit or stand pose is recognized.

Aligning elements with division tags

• Default exported web pages often have rough alignment that needs better layout styling.
• Additional styling code can be pasted at the very top of the model HTML file.
• A division tag is opened at the top of the file to group the page elements together.
• A closing division tag with a slash must be added below the fourth line to properly contain the section.

Testing the styled web page

After saving the updated HTML file with the new tags, reopen it in the browser to view the changes. The alignment of the video and results will look much cleaner and more organized than the original version. Clicking the start button and checking the live predictions confirms that the model still functions properly while looking better on the screen. Learning how these tags control placement allows further customization and upgrades to the design of the website.