Repository: monolesan/fix-posture
Branch: master
Commit: 441d4aa7b934
Files: 7
Total size: 43.4 KB
Directory structure:
gitextract_41cl6_5b/
├── .glitch-assets
├── LICENSE.md
├── README.md
├── index.html
├── posenet.js
├── script.js
└── style.css
================================================
FILE CONTENTS
================================================
================================================
FILE: .glitch-assets
================================================
{"name":"drag-in-files.svg","date":"2016-10-22T16:17:49.954Z","url":"https://cdn.hyperdev.com/drag-in-files.svg","type":"image/svg","size":7646,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/drag-in-files.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(102, 153, 205)","uuid":"adSBq97hhhpFNUna"}
{"name":"click-me.svg","date":"2016-10-23T16:17:49.954Z","url":"https://cdn.hyperdev.com/click-me.svg","type":"image/svg","size":7116,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/click-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(243, 185, 186)","uuid":"adSBq97hhhpFNUnb"}
{"name":"paste-me.svg","date":"2016-10-24T16:17:49.954Z","url":"https://cdn.hyperdev.com/paste-me.svg","type":"image/svg","size":7242,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/paste-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(42, 179, 185)","uuid":"adSBq97hhhpFNUnc"}
{"uuid":"adSBq97hhhpFNUna","deleted":true}
{"uuid":"adSBq97hhhpFNUnb","deleted":true}
{"uuid":"adSBq97hhhpFNUnc","deleted":true}
{"name":"header.svg","date":"2019-09-03T10:16:41.155Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fheader.svg","type":"image/svg+xml","size":65538,"imageWidth":302,"imageHeight":79,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fheader.svg","thumbnailWidth":302,"thumbnailHeight":79,"uuid":"kvufGrZopH1N79fJ"}
{"name":"creationprocess.svg","date":"2019-09-04T00:45:12.850Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fcreationprocess.svg","type":"image/svg+xml","size":160223,"imageWidth":326,"imageHeight":171,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fcreationprocess.svg","thumbnailWidth":326,"thumbnailHeight":171,"uuid":"W36L1drdKYMHNIkm"}
{"name":"point.svg","date":"2019-09-04T02:48:33.734Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fpoint.svg","type":"image/svg+xml","size":847,"imageWidth":31,"imageHeight":29,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fpoint.svg","thumbnailWidth":31,"thumbnailHeight":29,"uuid":"OItIeQX5SnAHdt59"}
{"name":"fav.png","date":"2019-09-05T08:27:20.061Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Ffav.png","type":"image/png","size":754,"imageWidth":32,"imageHeight":32,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Ffav.png","thumbnailWidth":32,"thumbnailHeight":32,"uuid":"ZpxJQkMiNvCe2gpy"}
{"name":"fav2.png","date":"2019-09-05T08:27:20.197Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Ffav2.png","type":"image/png","size":701,"imageWidth":32,"imageHeight":32,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Ffav2.png","thumbnailWidth":32,"thumbnailHeight":32,"uuid":"8DwHB4QlluLRx5e4"}
{"name":"how does it work_ ai journey map.png","date":"2019-09-07T05:51:07.419Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fhow%20does%20it%20work_%20ai%20journey%20map.png","type":"image/png","size":69233,"imageWidth":1627,"imageHeight":815,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Fhow%20does%20it%20work_%20ai%20journey%20map.png","thumbnailWidth":330,"thumbnailHeight":166,"uuid":"lMpHbSJf7M9JxPqN"}
{"uuid":"lMpHbSJf7M9JxPqN","deleted":true}
{"name":"how does it work_ ai journey map.png","date":"2019-09-07T05:54:17.983Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fhow%20does%20it%20work_%20ai%20journey%20map.png","type":"image/png","size":69233,"imageWidth":1627,"imageHeight":815,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Fhow%20does%20it%20work_%20ai%20journey%20map.png","thumbnailWidth":330,"thumbnailHeight":166,"uuid":"EkLO6EIjkTZ9J4nH"}
{"name":"Human journey map.png","date":"2019-09-07T05:54:33.398Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2FHuman%20journey%20map.png","type":"image/png","size":118252,"imageWidth":2765,"imageHeight":806,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2FHuman%20journey%20map.png","thumbnailWidth":330,"thumbnailHeight":97,"uuid":"Fw9QjyrkhLWAjcys"}
{"uuid":"Fw9QjyrkhLWAjcys","deleted":true}
{"name":"Human journey map.png","date":"2019-09-07T06:00:50.575Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2FHuman%20journey%20map.png","type":"image/png","size":118252,"imageWidth":2765,"imageHeight":806,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2FHuman%20journey%20map.png","thumbnailWidth":330,"thumbnailHeight":97,"uuid":"zsBPxhEd9z7yfEqg"}
{"uuid":"zsBPxhEd9z7yfEqg","deleted":true}
{"uuid":"EkLO6EIjkTZ9J4nH","deleted":true}
{"name":"how does it work_ ai journey map.png","date":"2019-09-07T06:01:10.477Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fhow%20does%20it%20work_%20ai%20journey%20map.png","type":"image/png","size":146007,"imageWidth":1627,"imageHeight":1852,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Fhow%20does%20it%20work_%20ai%20journey%20map.png","thumbnailWidth":290,"thumbnailHeight":330,"uuid":"97OiC8Cz9uzzmRNw"}
{"uuid":"97OiC8Cz9uzzmRNw","deleted":true}
{"name":"how does it work_ ai journey map.png","date":"2019-09-07T06:02:04.377Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fhow%20does%20it%20work_%20ai%20journey%20map.png","type":"image/png","size":69233,"imageWidth":1627,"imageHeight":815,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Fhow%20does%20it%20work_%20ai%20journey%20map.png","thumbnailWidth":330,"thumbnailHeight":166,"uuid":"9UYBmYvAXgxzinQI"}
{"name":"Human journey map.png","date":"2019-09-07T06:02:04.735Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2FHuman%20journey%20map.png","type":"image/png","size":146007,"imageWidth":1627,"imageHeight":1852,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2FHuman%20journey%20map.png","thumbnailWidth":290,"thumbnailHeight":330,"uuid":"ni6GbMxnpAQaGBLz"}
{"name":"short description idea.png","date":"2019-09-07T07:00:28.766Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fshort%20description%20idea.png","type":"image/png","size":216313,"imageWidth":1440,"imageHeight":2348,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Fshort%20description%20idea.png","thumbnailWidth":203,"thumbnailHeight":330,"uuid":"bDNKpcwAIspoSYJt"}
{"name":"fix posture.png","date":"2019-09-07T07:48:37.612Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Ffix%20posture.png","type":"image/png","size":296938,"imageWidth":1627,"imageHeight":3646,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Ffix%20posture.png","thumbnailWidth":148,"thumbnailHeight":330,"uuid":"lRddbj7AjD1DuGrv"}
{"name":"links.png","date":"2019-09-07T08:07:34.548Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Flinks.png","type":"image/png","size":61466,"imageWidth":1627,"imageHeight":890,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Flinks.png","thumbnailWidth":330,"thumbnailHeight":181,"uuid":"NH5YhVcJzpadpk6f"}
{"uuid":"NH5YhVcJzpadpk6f","deleted":true}
{"name":"links.png","date":"2019-09-07T08:09:38.589Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Flinks.png","type":"image/png","size":59121,"imageWidth":1627,"imageHeight":714,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Flinks.png","thumbnailWidth":330,"thumbnailHeight":145,"uuid":"pX3PTOF4JyGN30QL"}
{"name":"headersss.png","date":"2019-09-07T08:57:38.012Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fheadersss.png","type":"image/png","size":138692,"imageWidth":1344,"imageHeight":1007,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Fheadersss.png","thumbnailWidth":330,"thumbnailHeight":248,"uuid":"KkDuOFuvCtZl6n43"}
{"uuid":"KkDuOFuvCtZl6n43","deleted":true}
{"name":"headersss.png","date":"2019-09-07T09:38:04.879Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fheadersss.png","type":"image/png","size":152363,"imageWidth":1344,"imageHeight":929,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Fheadersss.png","thumbnailWidth":330,"thumbnailHeight":229,"uuid":"WFtjNgCzP4AwKETd"}
{"name":"lists.png","date":"2019-09-07T09:46:26.218Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Flists.png","type":"image/png","size":43845,"imageWidth":1120,"imageHeight":1202,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Flists.png","thumbnailWidth":308,"thumbnailHeight":330,"uuid":"siQid6ydqV8KJpl3"}
{"name":"code window.png","date":"2019-09-07T09:57:42.173Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fcode%20window.png","type":"image/png","size":24998,"imageWidth":1042,"imageHeight":480,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Fcode%20window.png","thumbnailWidth":330,"thumbnailHeight":153,"uuid":"Ra2yUB1uIb9Toua7"}
{"name":"experiment.gif","date":"2019-09-07T10:16:15.440Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fexperiment.gif","type":"image/gif","size":502014,"imageWidth":600,"imageHeight":317,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Fexperiment.gif","thumbnailWidth":330,"thumbnailHeight":175,"uuid":"i8QvmszpOA5nQEpc"}
{"name":"little design system.png","date":"2019-09-07T11:02:50.317Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Flittle%20design%20system.png","type":"image/png","size":94567,"imageWidth":1627,"imageHeight":1964,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Flittle%20design%20system.png","thumbnailWidth":274,"thumbnailHeight":330,"uuid":"Lli080heDKVGd13y"}
{"name":"lists.png","date":"2019-09-08T07:41:09.880Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Flists.png","type":"image/png","size":44527,"imageWidth":1120,"imageHeight":1296,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Flists.png","thumbnailWidth":286,"thumbnailHeight":330,"uuid":"fwHdWgyBaciqsY6z"}
{"name":"code window.png","date":"2019-09-08T07:41:10.028Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fcode%20window.png","type":"image/png","size":27077,"imageWidth":1344,"imageHeight":649,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Fcode%20window.png","thumbnailWidth":330,"thumbnailHeight":160,"uuid":"AOgrbGulPXtUBFhF"}
{"name":"links.png","date":"2019-09-08T07:41:10.207Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Flinks.png","type":"image/png","size":59598,"imageWidth":1627,"imageHeight":767,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Flinks.png","thumbnailWidth":330,"thumbnailHeight":156,"uuid":"A9aRwAYG6E4IltIw"}
{"name":"headersss.png","date":"2019-09-08T07:41:15.635Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fheadersss.png","type":"image/png","size":154134,"imageWidth":1344,"imageHeight":1064,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Fheadersss.png","thumbnailWidth":330,"thumbnailHeight":262,"uuid":"W2MQ571dHzBWZ3qq"}
{"uuid":"pX3PTOF4JyGN30QL","deleted":true}
{"uuid":"Ra2yUB1uIb9Toua7","deleted":true}
{"uuid":"siQid6ydqV8KJpl3","deleted":true}
{"name":"pictures.png","date":"2019-09-08T12:14:27.916Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fpictures.png","type":"image/png","size":68604,"imageWidth":1627,"imageHeight":767,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Fpictures.png","thumbnailWidth":330,"thumbnailHeight":156,"uuid":"uiwaL2DDICWHnRTb"}
{"uuid":"uiwaL2DDICWHnRTb","deleted":true}
{"name":"pictures.png","date":"2019-09-08T12:22:06.338Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fpictures.png","type":"image/png","size":100907,"imageWidth":1627,"imageHeight":1315,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Fpictures.png","thumbnailWidth":330,"thumbnailHeight":267,"uuid":"bldCXXtGbtLpinRG"}
{"uuid":"bldCXXtGbtLpinRG","deleted":true}
{"name":"pictures.png","date":"2019-09-08T12:25:16.091Z","url":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fpictures.png","type":"image/png","size":100923,"imageWidth":1627,"imageHeight":1315,"thumbnail":"https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fthumbnails%2Fpictures.png","thumbnailWidth":330,"thumbnailHeight":267,"uuid":"yAjnJjslsCaLAPcH"}
================================================
FILE: LICENSE.md
================================================
MIT License
Copyright (c) 2019 monolesan
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
Can we solve a problem of poor posture using webcamera and pose tracking?
==========================================================================
Fix Posture is an experimental project where A.I. tracks posture and blurs the screen if a person is sitting poorly.
Made with TensorFlow.js PoseNet model, ml5.js and p5.js.
* posenet.js is a part with A.I.
* script.js is a file with UI tricks
Made by me (by monolesan!!!)
My links:
* instagram: https://www.instagram.com/monolesan/
* twitter: https://twitter.com/monolesan
* my cooooooooool website that I made with TensorFlow.js Facemesh model: https://monolesan.com/
Project's website: https://fix-posture.glitch.me/
-----
Code on Glitch: https://glitch.com/~fix-posture
Design on Figma: https://www.figma.com/file/hvYOl9g4oO2UaTpVOqRwcF/AI-experiments-by-me-Good-posture?node-id=0%3A1
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fix posture</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link id="favicon" rel="icon" href="https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Ffav.png?v=1567672040061">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500i,900i|VT323&display=swap" rel="stylesheet">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- load p5.js -->
<!-- We use p5.js to get access to the webcamera and use canvas easier -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
<!-- load ml5.js -->
<!-- We use ml5.js because of simple syntax. Simple syntax forever. <3 -->
<script src="https://unpkg.com/ml5@0.2.3/dist/ml5.min.js" type="text/javascript"></script>
<!-- Our logic is here -->
<script src="/posenet.js"></script>
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
</head>
<body>
<div id="containerforcontainer">
<div id="container">
<div id="name_img">
<img src="https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fheader.svg?v=1567505801155">
<img src="https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fheader.svg?v=1567505801155">
<img src="https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fheader.svg?v=1567505801155">
</div>
<div id="head">
<div class="card pink left_shadow ">
<div id="descriptionText">
<h2>
What is it?
</h2>
<p>
This experiment blurs your screen when you keep not correct posture. To try it, you need to allow camera access. It doesn’t stole your data. <span id="reminderText">START KEEPING GOOD POSTURE BEFORE START.</span>
</p>
</div>
<div id="startbuttonCont" onmouseover="reminder()" onmouseout="reminderOff()" class="right_align">
<button class="yellow right_shadow" onclick="start()" id="startbutton">
start
</button>
</div>
</div>
<div class="double_cards">
<div>
<div class="card small yellow right_shadow">
<p>
Made by <a class="pink a_lefttext right_shadow" target="_blank" href="https://twitter.com/@monolesan">@monolesan</a>
</p>
</div>
<img id="creationprocessHeader" src="https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fcreationprocess.svg?v=1567557912850">
</div>
<div class="card middle yellow left_shadow">
<h2>
Project links
</h2>
<p>
<a class="pink a_righttext left_shadow" target="_blank" href="https://www.figma.com/file/hvYOl9g4oO2UaTpVOqRwcF/AI-experiments-by-me-Good-posture?node-id=0%3A1">Design in Figma</a> — look at detailed process #OpenDesign
</p>
<p>
<a class="pink a_righttext left_shadow" target="_blank" href="https://glitch.com/~fix-posture">Code on Glitch</a> — remix and create your own stuff
</p>
</div>
</div>
<div id="firstDesignSection">
<h1>
design: exploration&ideation
</h1>
</div>
<!-- problem and why it's important -->
<div class="double_cards">
<div class="card middle pink right_shadow" style="padding-right: 0px;">
<h2>
Problem
</h2>
<p>
People don’t keep good posture sitting in front of computer
</p>
<p>
✰ア-ア-ア 亀
</p>
</div>
<div class="textblock small">
<h2>
Why it's important?
</h2>
<p>
Poor posture is cause back pain, harder breathe, wear away at spine and other diseases.
</p>
</div>
</div>
<!-- good and bad posture -->
<div class="double_cards">
<div class="textblock">
<h2>
What is correct posture?
</h2>
<ul>
<li>Screen on eye level</li>
<li>Thighs parallel to floor</li>
<li>Feet touches floor</li>
<li>Elbows close to your body</li>
<li>Shoulders aren’t rounded</li>
<li>Your back is fully supported</li>
</ul>
</div>
<div class="textblock">
<h2>
What's bad posture?
</h2>
<ul>
<li>Legs on table/chair</li>
<li>Body leans towards a screen</li>
<li>Cross-legged sitting</li>
<li>Lean on one hand</li>
<li>Arm on face</li>
<li>Other strange poses</li>
</ul>
</div>
</div>
<div class="textblock">
<h2>
Where and when do people use computer?
</h2>
<ul>
<li>While work at office/public places/home</li>
<li>While studying at university/school/etc.</li>
<li>Having fun</li>
<li>Other situations that I can't come up with</li>
</ul>
</div>
<!-- how and why people keep not good posture????? -->
<div class="textblock">
<h2>
Why do people keep not correct posture?
</h2>
<ul>
<li>Work place isn’t comfortable</li>
<li>The back muscles aren’t trained</li>
<li>Healthy problems</li>
<li>Habit to keep not correct posture</li>
<li>Human doesn’t care</li>
<li>Human doesn’t know they keep not correct posture</li>
</ul>
</div>
<div class="textblock">
<h2>
How to keep correct posture? (if it’s not health problem)
</h2>
<ul>
<li>Train the back muscles</li>
<li>Make your work place comfortable for your body</li>
<li>Control your posture</li>
<li>Sleep in correct pose on correct mattress with pillows</li>
</ul>
</div>
<!-- ideas -->
<div class="card pink left_shadow">
<h2>
Ideas
</h2>
<ul>
<li>Camera detects human’s posture and alert when the posture is bad</li>
<li>Reminder to check the posture every hour</li>
<li>Sticker on a computer that reminds to keep good posture</li>
<li>Chair for correct posture</li>
<li>Posture corrector</li>
<li>Cyber suit that detects position of your body (even your legs !!)</li>
</ul>
</div>
<!-- why it's not the best solution and solution -->
<div class="double_cards">
<div class="textblock middle">
<h2>
Why isn’t solution the best?
</h2>
<p>
Good posture is when all body keeps correct position. Camera tracks only top of body, it doesn’t track legs. But it’s still fine to remind about posture. The best solution is a cyber suit controls all body.
</p>
</div>
<div id="solution" class="card yellow right_shadow small">
<h2>
Solution
</h2>
<p>
Screen are blured when a human doesn’t keep correct posture
</p>
<p>
✰ア-ア-ア
</p>
</div>
</div>
<div id="firstCodeSection">
<h1>
code time
</h1>
</div>
<!-- how will it work -->
<div class="card pink right_shadow">
<h2>
What the program is used?
</h2>
<p>
<a class="yellow a_righttext left_shadow" target="_blank" href="https://www.tensorflow.org/js/">TensorFlow.js PoseNet model</a> detects our body parts ＜3
</p>
<p>
<a class="yellow a_righttext left_shadow" target="_blank" href="https://p5js.org/">p5.js</a> helps to work with canvas and camera
</p>
<p>
<a class="yellow a_righttext left_shadow" target="_blank" href="https://ml5js.org/">ml5.js</a> for easy work with PoseNet
</p>
<p>
<a class="yellow a_righttext left_shadow" target="_blank" href="https://www.analyticsvidhya.com/blog/2019/06/build-machine-learning-model-in-your-browser-tensorflow-js-deeplearn-js/">Cool guide</a> how to work with everything above if you don't know
</p>
</div>
<div class="textblock">
<h2>
How to make it work?
</h2>
<p>
At first, I want to repeat that I used TensorFlow.js PoseNet model that tracks body parts and gives an array of parts’ positions (x, y).
</p>
<p>
I had two ways how to track poor posture:
</p>
<ul>
<li>Create a model and teach it understand when a human keeps incorrect position. This variant doesn't request PoseNet.</li>
<li>Ask a human to keep a correct posture, get their right position of eyes and shoulders. Then check new positions every second and compare it with first positions. Also, detect arms and legs if it will be in a camera view.</li>
</ul>
<p>
I chose the second one, because it’s easier and faster to do.
</p>
</div>
<div class="textblock">
<h2>
Details
</h2>
<p>
Let’s imagine logical part of this idea.
</p>
<p>
When a human keeps incorrect posture, positions of eyes and shoulders will decrease (on y). If y value will decrease, a screen will be blurred and vice versa. That’s simple.
</p>
<p>
I drew pistures with incorrect positions:
</p>
</div>
<img class="design_img" src="https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fpictures.png?v=1567945516091">
<!-- start with bluuuurrrrrrrrrrrr -->
<div class="textblock">
<h2>
Blurrrrrrrrrrrrrrrrrrrr me baby please
</h2>
<p>
I started code with two functions. One <span onmouseover="highlightCode(this.id)" onmouseout="removeHighlight(this.id)" id="blurs">of them <span class="code_explain">blurs</span></span> the screen, the second one <span onmouseover="highlightCode(this.id)" onmouseout="removeHighlight(this.id)" id="removesblur" class="code_explain">removes blur</span>:
</p>
</div>
<div class="code left_shadow" style="margin-bottom: 1em">
<p>
<span id="blurs_code">function blurScreen() {</br>
document.body.style.filter = 'blur(10px)';</br>
document.body.style.transition= '0.9s';</br>
}</br></span>
</br>
<span id="removesblur_code">function removeBlur() {</br>
document.body.style.filter = 'blur(0px)';</br>
}</span>
</p>
</div>
<!-- it works lise I want -->
<div class="textblock">
<h2>
It works like I wanted but doesn’t like I devised
</h2>
<p>
The next step was to detect all needed body parts: right and left eyes, shoulders, wrists, knees and ankles. I did it, but there was a not tiny problem. Sometimes, camera detected wallpapers, shoulders and my right breast as ankles or knees, hahaha. .-.
</p>
<p>
So, it worked unstable and I decided to start with eyes detection.
</p>
<p>
New goal was — get the first right eye position when the human is sitting with good posture, then track eye when the human moves and check the difference between current eye position and default position. And to do it with left eye.
</p>
</div>
<div class="code right_shadow">
<p>
<span class="comment">//Position of eyes after a human has pressed the button “start”. Default position.</span></br>
while (defaultRightEyePosition.length < 1) {</br>
defaultRightEyePosition.push(rightEye.y);</br>
}
</p>
<p>
<span class="comment">//Compare default position with current position. If the difference more than 15, it means a person doesn't keep good posture and program calls the function that blurs screen.</span></br>
if (Math.abs(rightEye.y - defaultRightEyePosition[0]) > 15) {</br>
blurScreen();</br>
}
</p>
<p>
<span class="comment">//If the difference less than 15, it means a person is sitting with correct posture.</span></br>
if (Math.abs(rightEye.y - defaultRightEyePosition[0]) < 15) {</br>
removeBlur();</br>
}</br>
</p>
</div>
<div class="textblock">
<p>
Cool! Despite the fact that it tracks only right eye, it works well like a monster in a dark forest where everyone wants to eat you!
</p>
<p>
You can believe me or maybe don’t, but there is all code we need for this. I decided it’s enough to track only one eye for the experiment. So, let’s design!
</p>
</div>
<!-- VISUAL DESIGN -->
<div>
<h1>
vissssual design
</h1>
<!-- MAPS -->
<div class="textblock">
<h2>
Maps
</h2>
<p>
I drew two shemes. The first is called “AI Journey Map”, it describes program process. The second one is User Journey Map.
</p>
</div>
<img class="design_img" src="https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fhow%20does%20it%20work_%20ai%20journey%20map.png?v=1567836124377">
<div>
<img class="design_img" src="https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2FHuman%20journey%20map.png?v=1567836124735">
</div>
<!-- goals -->
<div class="textblock">
<h2>
Site goals
</h2>
<ul>
<li>Show experiment</li>
<li>Share work process</li>
</ul>
</div>
<!-- DESCRIPTION WIIIIINNNDOOOOWWWWWWWW -->
<div class="textblock">
<h2>
Description window
</h2>
<p>
My visual design was started with the description window. I just drew a pink rectangle, liked it and decided to use rectangles for important information.
</p>
<p>
But before designing the desciption window, I highlighted moments I need to show here.
</p>
</div>
<!-- what will be in the window -->
<div class="textblock">
<h2>
What should be in the window?
</h2>
<ul>
<li>What is it?</li>
<li>How does it work?</li>
<li>It doesn't stole personal information</li>
<li>Reminder: keep a correct posture before start</li>
<li>It can load for a long time</li>
<li>Maybe “Made by”?</li>
</ul>
<p>
Eventually I considered that some points aren't important.
</p>
</div>
<!-- versions of window -->
<div class="textblock">
<h2>
Version 31.10.2077
</h2>
<p>
I had a few versions of how it can look:
</p>
</div>
<!-- IMAGE -->
<img class="design_img" src="https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fshort%20description%20idea.png?v=1567839628766">
<!-- KEEP POSTURE PLEASE -->
<div class="textblock">
<h2>
How to make a human to keep good posture before starrrt?
</h2>
<p>
Evrything above looks great, of course. But I needed to make reminder more notable. I must make sure a human keeps good posture before start. There're some sketches:
</p>
</div>
<!-- IMG -->
<img class="design_img" src="https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Ffix%20posture.png?v=1567842517612">
<!-- links -->
<div class="textblock">
<h2>
Links
</h2>
<p>
I made rectangle links like cards and buttons with shadows (shadows are my best friends in this project). Also, I thought about accent colors for mouse on hover. There were ideas to make a link's hover color brighter than initial color or use bright pink and blue. I chose bright red.
</p>
<p>
While working on link window, I decided to put header here.
</p>
</div>
<!-- img -->
<img class="design_img" src="https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Flinks.png?v=1567928470207">
<!-- HEADERS -->
<div class="textblock">
<h2>
HEADers
</h2>
<p>
I wanted to create something special, not just black big text. I experimented with color of shadows and stroke.
</p>
<p>
The arrow near “Creation process” was drawn accidentally.
</p>
</div>
<!-- img -->
<img class="design_img" src="https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fheadersss.png?v=1567928475635">
<!-- LISTSSSSSS -->
<div class="textblock">
<h2>
You are in my LIST
</h2>
<p>
I experimented with link shape and decided to choose the first variant. But at the last moment, I changed my decision. When I was coding lists, I was surfing Internet how to put an image instead of default list-style-type and found that I can use interesting symbols, letters for it. Of course, I chose Japanese katakana.
</p>
</div>
<!-- IMGGGG -->
<img class="design_img" src="https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Flists.png?v=1567928469880">
<!-- CODE WINDOW BABE -->
<div class="textblock">
<h2>
Code window
</h2>
<p>
I picked rectangle for code window. There were variants with pink shadow and text or with yellow rectangle, they are too bright. Of course, for this window I used “very coder” (beautiful and pixel) font — VT323.
</p>
<p>
Haha, I just got a funny idea to use something like matrix digital rain instead of white windows with black border.
</p>
</div>
<!-- img -->
<img class="design_img" src="https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fcode%20window.png?v=1567928470028">
<!-- DOUBLE EXPERIMENT -->
<div class="textblock">
<h2>
An UX experiment is in AI experiment. DOUBLE EXPERIMENT!
</h2>
<p>
I just came up with a case where you explain code and a human has ability to follow in code what are you talking about.
</p>
</div>
<!-- GIFFF -->
<img class="design_img" src="https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Fexperiment.gif?v=1567851375440">
<!-- little design system -->
<div class="textblock">
<h2>
My little design system
</h2>
<p>
In process, I collected the design system for this project.
</p>
</div>
<!-- img -->
<img class="design_img" src="https://cdn.glitch.com/ec7ef02b-8dc9-4e3b-92c9-82124d3c2d83%2Flittle%20design%20system.png?v=1567854170317">
<div class="textblock">
<h2>
It's not my one experiment. Check other. c;
</h2>
<p>
<a class="pink a_righttext left_shadow" target="_blank" href="https://glitch.com/~make-me-big">Make me big</a> — changes font based on your position in front of your computer. Made with TensorFlow.js PoseNet model.
</p>
<p>
<a class="pink a_righttext left_shadow" target="_blank" href="https://glitch.com/~smile-and-like">Smile and like</a> — a fictional social network where you need smile to like something. Made with face-api.js.
</p>
<p>
<a class="pink a_righttext left_shadow" target="_blank" href="https://glitch.com/~mood-ai-design">Mood-AI-Design</a> — changes design based on your emotions. Made with face-api.js.
</p>
</div>
<div class="card middle left_shadow yellow">
<h2>
Thanks for reading. 🐢
</h2>
<p>
Don't forget to create something by yourself and check open links with design and code. They are in the beggining. c:
</p>
</div>
</div>
</div>
</div>
</div>
<!-- IT'S VERY IMPORTANT PART. IT'S OUR CANVAS AND CAMERA -->
<div id="videoContainer">
</div>
</body>
</html>
================================================
FILE: posenet.js
================================================
let video;
let poseNet;
let poses = [];
var started = false;
function setup() {
const canvas = createCanvas(640, 480); // or use to make fullscreen canvas window.innerWidth, window.innerHeight, but you should to change the formula in changeFontSize()
canvas.parent('videoContainer');
// Video capture
video = createCapture(VIDEO);
video.size(width, height);
if (video == true) {console.log('true');}
// Create a new poseNet method with a single detection
poseNet = ml5.poseNet(video, modelReady);
// This sets up an event that fills the global variable "poses"
// with an array every time new poses are detected
poseNet.on('pose', function(results) {
poses = results;
});
// Hide the video element, and just show the canvas
video.hide();
noLoop();
}
// This function turns on AI
function start() {
select('#startbutton').html('stop')
document.getElementById('startbutton').addEventListener('click', stop);
started = true;
loop();
}
// This function stops the experiment
function stop() {
select('#startbutton').html('start')
document.getElementById('startbutton').addEventListener('click', start);
removeBlur();
started = false;
noLoop();
}
function draw() {
if(started){
//We use white picture as background. You can comment this line and see what will happen. It's cool glitch effect.
// image(whitePicture, 0, 0, width, height);
image(video, 0, 0, width, height);
drawEyes();
}
}
function modelReady(){
// select('#text').html('Hmm... What is it? It’s time to move! AI has turned on. You can insert your text here.')
}
var rightEye, leftEye, rightShoulder, leftShoulder, rightWrist, leftWrist, rightKnee,
leftKnee, rightAnkle, leftAnkle, distanceEye, defaultRightEyePosition = [],
defaultLeftEyePosition = [];
// A function to draw ellipses over the detected keypoints
function drawEyes() {
// Loop through all the poses detected
for (let i = 0; i < poses.length; i++) {
// For each pose detected, loop through all the keypoints
let pose = poses[i].pose;
for (let j = 0; j < pose.keypoints.length; j++) {
// A keypoint is an object describing a body part (like rightArm or leftShoulder)
let keypoint = pose.keypoints[j];
rightEye = pose.keypoints[2].position;
leftEye = pose.keypoints[1].position;
rightShoulder = pose.keypoints[6].position;
leftShoulder = pose.keypoints[5].position;
rightWrist = pose.keypoints[10].position;
leftWrist = pose.keypoints[9].position;
rightKnee = pose.keypoints[14].position;
leftKnee = pose.keypoints[13].position;
rightAnkle = pose.keypoints[16].position;
leftAnkle = pose.keypoints[15].position;
//Position of eyes when a human opens experiment page. Start position.
while(defaultRightEyePosition.length < 1) {
defaultRightEyePosition.push(rightEye.y);
}
while(defaultLeftEyePosition.length < 1) {
defaultLeftEyePosition.push(leftEye.y);
}
//Math.abs converts a negative number to a positive one
if (Math.abs(rightEye.y - defaultRightEyePosition[0]) > 15) {
blurScreen();
}
if (Math.abs(rightEye.y - defaultRightEyePosition[0]) < 15) {
removeBlur();
}
// Only draw an eye is the pose probability is bigger than 0.2
if (keypoint.score > 0.9 ) {
fill(255, 0, 0);
noStroke();
ellipse(rightEye.x, rightEye.y, 10, 10);
ellipse(leftEye.x, leftEye.y, 10, 10);
console.log(Math.abs(rightEye.y - defaultRightEyePosition[0]));
}
}
}
}
function blurScreen() {
document.body.style.filter = 'blur(10px)';
document.body.style.transition= '0.9s';
}
function removeBlur() {
document.body.style.filter = 'blur(0px)';
}
================================================
FILE: script.js
================================================
var reminderText = document.getElementById('reminderText');
function reminder() {
reminderText.style.transition= '0.3s';
reminderText.style.borderBottom = 'thick solid red';
}
function reminderOff() {
reminderText.style.borderBottom = 'none';
}
function highlightCode(codeId) {
document.getElementById(codeId + '_code').style.color = 'red';
document.getElementById(codeId + '_code').style.transition= '0.3s';
}
function removeHighlight(codeId) {
document.getElementById(codeId + '_code').style.color = 'black';
}
================================================
FILE: style.css
================================================
/* SHADOWS */
.left_shadow {
box-shadow: -6px 4px 0px rgba(0, 0, 0, 0.54);
}
.left_shadow:active {
box-shadow: -3px 3px 0px rgba(0, 0, 0, 0.54);
}
.right_shadow {
box-shadow: 5px 4px 0px rgba(0, 0, 0, 0.54);
}
.right_shadow:active {
box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.54);
}
/* CARD SETTTTTTINGS */
.pink {
background: #FDEAFF;
}
.yellow {
background: #FFF96C;
}
.card {
border: 3px solid #000000;
padding: 24px 30px 20px 36px;
margin-bottom: 1em;
max-width: 900px;
/* font */
font-family: Poppins;
font-style: italic;
font-weight: 500;
font-size: 25px;
line-height: 37px;
}
.textblock {
padding: 24px 15px 20px 20px;
margin-bottom: 0.5em;
max-width: 900px;
/* max-height: 400px; */
font-family: Poppins;
font-weight: 500;
font-size: 25px;
line-height: 37px;
}
.code {
border: 3px solid #000000;
padding: 16px 16px 16px 24px;
max-width: 900px;
font-family: 'VT323', monospace;
font-size: 25px;
}
/* ADDITIONAL CARD SETTINGS */
.right_align {
display: flex;
justify-content: flex-end;
}
.double_cards {
display: flex;
justify-content: space-between;
}
.small {
max-width: 378px;
/* max-height: 100px; */
}
.middle {
max-width: 476px;
max-height: 250px;
}
.code_explain {
border-bottom: thick solid red;
}
.comment {
color: gray;
}
button {
border: 4px solid #000000;
padding: 0px 48px 0px 48px;
box-sizing: border-box;
/* font */
font-family: Poppins;
font-style: italic;
font-weight: 900;
font-size: 25px;
line-height: 37px;
/* identical to box height */
display: flex;
align-items: center;
text-align: center;
}
button: active {
outline: none;
}
button:focus {
outline: none;
}
a {
border: 4px solid #000000;
box-sizing: border-box;
/* font */
font-family: Poppins;
font-style: italic;
font-weight: 500;
font-size: 25px;
line-height: 37px;
color: black;
text-decoration: none;
}
a:hover, button:hover {
/* background: #F064FF; */
cursor: pointer;
background: red;
}
.a_righttext {
padding: 0px 4px 0px 12px;
}
.a_lefttext {
padding: 0px 12px 0px 4px;
}
ul {
/* list-style-type: hiragana-iroha; */
list-style-type: katakana;
}
/* SECTION NAME */
h1 {
font-family: Poppins;
font-style: italic;
font-weight: 900;
font-size: 50px;
line-height: 75px;
color: #FDEAFF;
-webkit-text-stroke: 3px black;
margin: 0 0 20px 40px;
}
/* SMALL BLACK HEADER */
h2 {
font-family: Poppins;
font-style: italic;
font-weight: 900;
font-size: 30px;
line-height: 37px;
padding: 0;
margin: 0;
}
img {
margin-bottom: 24px;
padding: 0 20px 0 20px;
}
.design_img {
max-width: 900px;
}
/* This is very hard code to hide video under page content */
#videoContainer {
position: absolute;
z-index: 1;
top:0;
left:0;
}
#containerforcontainer{
position: absolute;
z-index: 20;
top:0;
left:0;
width: 100%;
background: white;
}
#container {
display: flex;
align-items: center;
flex-direction: column;
color: black;
}
/* VIP THINGS THAT HAVE ID */
#name_img {
display: flex;
align-content: space-between;
}
#descriptionText p {
margin-bottom: 0;
}
#startbuttonCont {
padding-top: 25px;
}
#creationprocessHeader {
margin-left: 20px;
}
#firstDesignSection {
display: flex;
flex-direction: column;
align-items: flex-start;
}
#firstCodeSection {
margin-top: 40px;
}
#solution {
max-height: 400px;
filter: blur(1px);
}
@media only screen and (max-width: 810px) {
.double_cards {
display: flex;
flex-direction: column;
align-items: center;
}
.design_img {
max-width: 600px;
min-width: 200px;
}
#name_img img {
max-width: 220px;
}
body {
font-size: 18px;
}
}
gitextract_41cl6_5b/ ├── .glitch-assets ├── LICENSE.md ├── README.md ├── index.html ├── posenet.js ├── script.js └── style.css
SYMBOL INDEX (12 symbols across 2 files)
FILE: posenet.js
function setup (line 6) | function setup() {
function start (line 30) | function start() {
function stop (line 38) | function stop() {
function draw (line 46) | function draw() {
function modelReady (line 56) | function modelReady(){
function drawEyes (line 64) | function drawEyes() {
function blurScreen (line 115) | function blurScreen() {
function removeBlur (line 120) | function removeBlur() {
FILE: script.js
function reminder (line 2) | function reminder() {
function reminderOff (line 7) | function reminderOff() {
function highlightCode (line 11) | function highlightCode(codeId) {
function removeHighlight (line 16) | function removeHighlight(codeId) {
Condensed preview — 7 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (47K chars).
[
{
"path": ".glitch-assets",
"chars": 13177,
"preview": "{\"name\":\"drag-in-files.svg\",\"date\":\"2016-10-22T16:17:49.954Z\",\"url\":\"https://cdn.hyperdev.com/drag-in-files.svg\",\"type\":"
},
{
"path": "LICENSE.md",
"chars": 1066,
"preview": "MIT License\n\nCopyright (c) 2019 monolesan\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\n"
},
{
"path": "README.md",
"chars": 842,
"preview": "Can we solve a problem of poor posture using webcamera and pose tracking?\n=============================================="
},
{
"path": "index.html",
"chars": 21177,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Fix posture</title>\n <meta charset=\"utf-8\">\n <meta http-equiv"
},
{
"path": "posenet.js",
"chars": 3840,
"preview": "let video;\nlet poseNet;\nlet poses = [];\nvar started = false;\n\nfunction setup() {\n const canvas = createCanvas(640, 480)"
},
{
"path": "script.js",
"chars": 530,
"preview": "var reminderText = document.getElementById('reminderText');\nfunction reminder() {\n reminderText.style.transition= '0.3s"
},
{
"path": "style.css",
"chars": 3765,
"preview": "/* SHADOWS */\n.left_shadow {\n box-shadow: -6px 4px 0px rgba(0, 0, 0, 0.54);\n}\n\n.left_shadow:active {\n box-shadow: -3px"
}
]
About this extraction
This page contains the full source code of the monolesan/fix-posture GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 7 files (43.4 KB), approximately 14.0k tokens, and a symbol index with 12 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.