From 882280dac7bba645ecc8a4057f318fd037a3a92c Mon Sep 17 00:00:00 2001 From: moqn Date: Thu, 29 Jun 2023 05:48:08 -0700 Subject: [PATCH] added a test page --- .DS_Store | Bin 6148 -> 8196 bytes _css/style.css | 1055 ++++++++++++++++++++++++++++++++++ _iframes/.DS_Store | Bin 0 -> 6148 bytes _iframes/testPage/index.html | 20 + _iframes/testPage/main.html | 19 + _iframes/testPage/script.js | 50 ++ _iframes/testPage/style.css | 10 + _sidebar.md | 1 + index.html | 257 ++++----- test.md | 388 +++++++++++++ 10 files changed, 1670 insertions(+), 130 deletions(-) create mode 100644 _css/style.css create mode 100644 _iframes/.DS_Store create mode 100644 _iframes/testPage/index.html create mode 100644 _iframes/testPage/main.html create mode 100644 _iframes/testPage/script.js create mode 100644 _iframes/testPage/style.css create mode 100755 test.md diff --git a/.DS_Store b/.DS_Store index e1f5bceb9f7731e095f94eff1af8ca4739dfb8fe..72c2d861b2c0ac372c99971337fa5848a9e8a8f4 100644 GIT binary patch literal 8196 zcmeHMy^9k;6n}e3F1sEFLG-vv7ZeK#njC&|AZsr6Vnho)bJ^Q9x478}*~B0rkWxGU z1^)uE(Z<3?&{~XOV<*_zX(hh-NNy&(iJgcy12ezLy!Yn)_O~C&+W>%3>3L;M;y_D&ETPkJk$^+hQY&e z-4=e1z!66t4u&W`43XIo6^g;K3o*n>UU0t3HaV~N`dM!6xX3GF zTVy|PnqA2Y*J)l8^9FDqI?#X?_z=7OxGj$DrP~gJxLYcXjipRBx17&g`IY>3ZIAS8 z-A1<;R~nr=^wUj3LU%H6xVHkoUoRZlB2l*yM1F?_1fGvBcW(!gNBR}gi@cb{*0{m4 zOsig48w}1}Di!V0uxJl1U%=VR##mI{k^Oo7hWMd6A#0c8L;9?DeqLi9!-J(MFGF8P5hi3m%@6hQj&d zo2^;9%(q&6x4O-*LS+w`>pUNY=Xiu^z{2an$E(6;7~z%aD{L~wFX>(~r{y10PAU7z z%ockp{4(Duze9MZbm0+%$gl}LRLh%T2pd$-R6m&`IsAU2+Z^BhJL*rq3QyRfJS}9| z!%k2~Jfp~W=Kd~!NcWOCemgnkn6jU&<6=*hAG`Z0N8PjnT7e9gV4c?g*XFnav { + display: none; +} + +div#app { + font-size: 30px; + font-weight: lighter; + margin: 40vh auto; + text-align: center; +} + +div#app:empty::before { + content: 'Loading...'; +} + +img.emoji { + height: 1.2em; + vertical-align: middle; +} + +span.emoji { + font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 1.2em; + vertical-align: middle; +} + +.progress { + background-color: #2ee2ee; + background-color: var(--theme-color, #2ee2ee); + height: 2px; + left: 0px; + position: fixed; + right: 0px; + top: 0px; + transition: width 0.2s, opacity 0.4s; + width: 0%; + z-index: 999999; +} + +.search a:hover { + color: #2ee2ee; + color: var(--theme-color, #2ee2ee); +} + +.search .search-keyword { + color: #2ee2ee; + color: var(--theme-color, #2ee2ee); + font-style: normal; + font-weight: bold; +} + +html, +body { + height: 100%; +} + +body { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #34495e; + font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; + font-size: 15px; + letter-spacing: 0; + margin: 0; + overflow-x: hidden; +} + +img { + max-width: 100%; +} + +a[disabled] { + cursor: not-allowed; + opacity: 0.6; +} + +kbd { + border: solid 1px #ccc; + border-radius: 3px; + display: inline-block; + font-size: 12px !important; + line-height: 12px; + margin-bottom: 3px; + padding: 3px 5px; + vertical-align: middle; +} + +li input[type='checkbox'] { + margin: 0 0.2em 0.25em 0; + vertical-align: middle; +} + +.app-nav { + margin: 25px 60px 0 0; + position: absolute; + right: 0; + text-align: right; + z-index: 10; + /* navbar dropdown */ +} + +.app-nav.no-badge { + margin-right: 25px; +} + +.app-nav p { + margin: 0; +} + +.app-nav>a { + margin: 0 1rem; + padding: 5px 0; +} + +.app-nav ul, +.app-nav li { + display: inline-block; + list-style: none; + margin: 0; +} + +.app-nav a { + color: inherit; + font-size: 16px; + text-decoration: none; + transition: color 0.3s; +} + +.app-nav a:hover { + color: #2ee2ee; + color: var(--theme-color, #2ee2ee); +} + +.app-nav a.active { + border-bottom: 2px solid #2ee2ee; + border-bottom: 2px solid var(--theme-color, #2ee2ee); + color: #2ee2ee; + color: var(--theme-color, #2ee2ee); +} + +.app-nav li { + display: inline-block; + margin: 0 1rem; + padding: 5px 0; + position: relative; + cursor: pointer; +} + +.app-nav li ul { + background-color: #fff; + border: 1px solid #ddd; + border-bottom-color: #ccc; + border-radius: 4px; + box-sizing: border-box; + display: none; + max-height: calc(100vh - 61px); + overflow-y: auto; + padding: 10px 0; + position: absolute; + right: -15px; + text-align: left; + top: 100%; + white-space: nowrap; +} + +.app-nav li ul li { + display: block; + font-size: 14px; + line-height: 1rem; + margin: 0; + margin: 8px 14px; + white-space: nowrap; +} + +.app-nav li ul a { + display: block; + font-size: inherit; + margin: 0; + padding: 0; +} + +.app-nav li ul a.active { + border-bottom: 0; +} + +.app-nav li:hover ul { + display: block; +} + +.github-corner { + border-bottom: 0; + position: fixed; + right: 0; + text-decoration: none; + top: 0; + z-index: 1; +} + +.github-corner:hover .octo-arm { + animation: octocat-wave 560ms ease-in-out; +} + +.github-corner svg { + color: #fff; + fill: #2ee2ee; + fill: var(--theme-color, #2ee2ee); + height: 80px; + width: 80px; +} + +main { + display: block; + position: relative; + width: 100vw; + height: 100%; + z-index: 0; +} + +main.hidden { + display: none; +} + +.anchor { + display: inline-block; + text-decoration: none; + transition: all 0.3s; +} + +.anchor span { + color: #34495e; +} + +.anchor:hover { + text-decoration: underline; +} + +.sidebar { + border-right: 1px solid rgba(0, 0, 0, 0.07); + overflow-y: auto; + padding: 40px 0 0; + position: absolute; + top: 0; + bottom: 0; + left: 0; + transition: transform 250ms ease-out; + width: 300px; + z-index: 20; +} + +.sidebar>h1 { + margin: 0 auto 1rem; + font-size: 1.5rem; + font-weight: 300; + text-align: center; +} + +.sidebar>h1 a { + color: inherit; + text-decoration: none; +} + +.sidebar>h1 .app-nav { + display: block; + position: static; +} + +.sidebar .sidebar-nav { + line-height: 2em; + padding-bottom: 40px; +} + +.sidebar li.collapse .app-sub-sidebar { + display: none; +} + +.sidebar ul { + margin: 0 0 0 15px; + padding: 0; +} + +.sidebar li>p { + font-weight: 700; + margin: 0; +} + +.sidebar ul, +.sidebar ul li { + list-style: none; +} + +.sidebar ul li a { + border-bottom: none; + display: block; +} + +.sidebar ul li ul { + padding-left: 20px; +} + +.sidebar::-webkit-scrollbar { + width: 4px; +} + +.sidebar::-webkit-scrollbar-thumb { + background: transparent; + border-radius: 4px; +} + +.sidebar:hover::-webkit-scrollbar-thumb { + background: rgba(136, 136, 136, 0.4); +} + +.sidebar:hover::-webkit-scrollbar-track { + background: rgba(136, 136, 136, 0.1); +} + +.sidebar-toggle { + background-color: transparent; + background-color: rgba(255, 255, 255, 0.8); + border: 0; + outline: none; + padding: 10px; + position: absolute; + bottom: 0; + left: 0; + text-align: center; + transition: opacity 0.3s; + width: 284px; + z-index: 30; + cursor: pointer; +} + +.sidebar-toggle:hover .sidebar-toggle-button { + opacity: 0.4; +} + +.sidebar-toggle span { + background-color: #2ee2ee; + background-color: var(--theme-color, #2ee2ee); + display: block; + margin-bottom: 4px; + width: 16px; + height: 2px; +} + +body.sticky .sidebar, +body.sticky .sidebar-toggle { + position: fixed; +} + +.content { + padding-top: 60px; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 300px; + transition: left 250ms ease; + /* here */ + display: flex; + justify-content: center; +} + +.markdown-section { + margin: 0 10%; + /* max-width: 80%; */ + max-width: 800px; + /* here */ + padding: 30px 15px 40px 15px; + position: relative; +} + +.markdown-section>* { + box-sizing: border-box; + font-size: inherit; +} + +.markdown-section> :first-child { + margin-top: 0 !important; +} + +.markdown-section hr { + border: none; + border-bottom: 1px solid #eee; + margin: 2em 0; +} + +.markdown-section iframe { + border: 1px solid #eee; + /* fix horizontal overflow on iOS Safari */ + width: 1px; + min-width: 100%; +} + +.markdown-section table { + border-collapse: collapse; + border-spacing: 0; + display: block; + margin-bottom: 1rem; + overflow: auto; + width: 100%; +} + +.markdown-section th { + border: 1px solid #ddd; + font-weight: bold; + padding: 6px 13px; +} + +.markdown-section td { + border: 1px solid #ddd; + padding: 6px 13px; +} + +.markdown-section tr { + border-top: 1px solid #ccc; +} + +.markdown-section tr:nth-child(2n) { + background-color: #f8f8f8; +} + +.markdown-section p.tip { + background-color: #f8f8f8; + border-bottom-right-radius: 2px; + border-left: 4px solid #f66; + border-top-right-radius: 2px; + margin: 2em 0; + padding: 12px 24px 12px 30px; + position: relative; +} + +.markdown-section p.tip:before { + background-color: #f66; + border-radius: 100%; + color: #fff; + content: '!'; + font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; + font-size: 14px; + font-weight: bold; + left: -12px; + line-height: 20px; + position: absolute; + height: 20px; + width: 20px; + text-align: center; + top: 14px; +} + +.markdown-section p.tip code { + background-color: #efefef; +} + +.markdown-section p.tip em { + color: #34495e; +} + +.markdown-section p.warn { + background: rgba(66, 185, 131, 0.1); + border-radius: 2px; + padding: 1rem; +} + +.markdown-section ul.task-list>li { + list-style-type: none; +} + +body.close .sidebar { + transform: translateX(-300px); +} + +body.close .sidebar-toggle { + width: auto; +} + +body.close .content { + left: 0; +} + +@media print { + + .github-corner, + .sidebar-toggle, + .sidebar, + .app-nav { + display: none; + } +} + +@media screen and (max-width: 768px) { + + .github-corner, + .sidebar-toggle, + .sidebar { + position: fixed; + } + + .app-nav { + margin-top: 16px; + } + + .app-nav li ul { + top: 30px; + } + + main { + height: auto; + min-height: 100vh; + overflow-x: hidden; + } + + .sidebar { + left: -300px; + transition: transform 250ms ease-out; + } + + .content { + left: 0; + max-width: 100vw; + position: static; + padding-top: 20px; + transition: transform 250ms ease; + } + + .app-nav, + .github-corner { + transition: transform 250ms ease-out; + } + + .sidebar-toggle { + background-color: transparent; + width: auto; + padding: 30px 30px 10px 10px; + } + + body.close .sidebar { + transform: translateX(300px); + } + + body.close .sidebar-toggle { + background-color: rgba(255, 255, 255, 0.8); + transition: 1s background-color; + width: 284px; + padding: 10px; + } + + body.close .content { + transform: translateX(300px); + } + + body.close .app-nav, + body.close .github-corner { + display: none; + } + + .github-corner:hover .octo-arm { + animation: none; + } + + .github-corner .octo-arm { + animation: octocat-wave 560ms ease-in-out; + } +} + +@keyframes octocat-wave { + + 0%, + 100% { + transform: rotate(0); + } + + 20%, + 60% { + transform: rotate(-25deg); + } + + 40%, + 80% { + transform: rotate(10deg); + } +} + +section.cover { + position: relative; + align-items: center; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + min-height: 100vh; + width: 100%; + display: none; +} + +section.cover.show { + display: flex; +} + +section.cover.has-mask .mask { + background-color: #fff; + opacity: 0.8; + position: absolute; + top: 0; + bottom: 0; + width: 100%; +} + +section.cover .cover-main { + flex: 1; + margin: 0 16px; + text-align: center; + position: relative; +} + +section.cover a { + color: inherit; + text-decoration: none; +} + +section.cover a:hover { + text-decoration: none; +} + +section.cover p { + line-height: 1.5rem; + margin: 1em 0; +} + +section.cover h1 { + color: inherit; + font-size: 2.5rem; + font-weight: 300; + margin: 0.625rem 0 2.5rem; + position: relative; + text-align: center; +} + +section.cover h1 a { + display: block; +} + +section.cover h1 small { + bottom: -0.4375rem; + font-size: 1rem; + position: absolute; +} + +section.cover blockquote { + font-size: 1.5rem; + text-align: center; +} + +section.cover ul { + line-height: 1.8; + list-style-type: none; + margin: 1em auto; + max-width: 500px; + padding: 0; +} + +section.cover .cover-main>p:last-child a { + border-color: #2ee2ee; + border-color: var(--theme-color, #2ee2ee); + border-radius: 2rem; + border-style: solid; + border-width: 1px; + box-sizing: border-box; + color: #2ee2ee; + color: var(--theme-color, #2ee2ee); + display: inline-block; + font-size: 1.05rem; + letter-spacing: 0.1rem; + margin: 0.5rem 1rem; + padding: 0.75em 2rem; + text-decoration: none; + transition: all 0.15s ease; +} + +section.cover .cover-main>p:last-child a:last-child { + background-color: #2ee2ee; + background-color: var(--theme-color, #2ee2ee); + color: #fff; +} + +section.cover .cover-main>p:last-child a:last-child:hover { + color: inherit; + opacity: 0.8; +} + +section.cover .cover-main>p:last-child a:hover { + color: inherit; +} + +section.cover blockquote>p>a { + border-bottom: 2px solid #2ee2ee; + border-bottom: 2px solid var(--theme-color, #2ee2ee); + transition: color 0.3s; +} + +section.cover blockquote>p>a:hover { + color: #2ee2ee; + color: var(--theme-color, #2ee2ee); +} + +body { + background-color: #fff; +} + +/* sidebar */ +.sidebar { + background-color: #fff; + color: #364149; +} + +.sidebar li { + margin: 6px 0 6px 0; +} + +.sidebar ul li a { + color: #505d6b; + font-size: 18px; + /* here */ + font-weight: normal; + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; +} + +.sidebar ul li a:hover { + text-decoration: underline; +} + +.sidebar ul li ul { + padding: 0; +} + +.sidebar ul li.active>a { + border-right: 2px solid; + color: #2ee2ee; + color: var(--theme-color, #2ee2ee); + font-weight: 600; +} + +.app-sub-sidebar li::before { + content: '-'; + padding-right: 4px; + float: left; +} + +/* markdown content found on pages */ +.markdown-section h1, +.markdown-section h2, +.markdown-section h3, +.markdown-section h4, +.markdown-section strong { + color: #2c3e50; + font-weight: 600; +} + +.markdown-section a { + color: #2ee2ee; + color: var(--theme-color, #2ee2ee); + font-weight: 600; +} + +.markdown-section h1 { + font-size: 2rem; + margin: 0 0 1rem; +} + +.markdown-section h2 { + font-size: 1.75rem; + margin: 45px 0 0.8rem; +} + +.markdown-section h3 { + font-size: 1.5rem; + margin: 40px 0 0.6rem; +} + +.markdown-section h4 { + font-size: 1.25rem; +} + +.markdown-section h5 { + font-size: 1rem; +} + +.markdown-section h6 { + color: #777; + font-size: 1rem; +} + +.markdown-section figure, +.markdown-section p { + margin: 1.2em 0; +} + +.markdown-section p, +.markdown-section ul, +.markdown-section ol { + line-height: 1.6rem; + word-spacing: 0.05rem; +} + +.markdown-section ul, +.markdown-section ol { + padding-left: 1.5rem; +} + +.markdown-section blockquote { + border-left: 4px solid #2ee2ee; + border-left: 4px solid var(--theme-color, #2ee2ee); + color: #858585; + margin: 2em 0; + padding-left: 20px; +} + +.markdown-section blockquote p { + font-weight: 600; + margin-left: 0; +} + +.markdown-section iframe { + margin: 1em 0; +} + +.markdown-section em { + color: #7f8c8d; +} + +.markdown-section code, +.markdown-section pre, +.markdown-section output::after { + font-family: 'Roboto Mono', Monaco, courier, monospace; +} + +.markdown-section code, +.markdown-section pre { + background-color: #f8f8f8; +} + +.markdown-section pre, +.markdown-section output { + margin: 1.2em 0; + position: relative; +} + +.markdown-section pre>code, +.markdown-section output { + border-radius: 2px; + display: block; +} + +.markdown-section pre>code, +.markdown-section output::after { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; +} + +.markdown-section code { + border-radius: 2px; + color: #e96900; + margin: 0 2px; + padding: 3px 5px; + white-space: pre-wrap; +} + +.markdown-section> :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) code { + font-size: 0.8rem; +} + +.markdown-section pre { + padding: 0 1.4rem; + line-height: 1.5rem; + overflow: auto; + word-wrap: normal; +} + +.markdown-section pre>code { + color: #525252; + font-size: 0.8rem; + padding: 2.2em 5px; + line-height: inherit; + margin: 0 2px; + max-width: inherit; + overflow: inherit; + white-space: inherit; +} + +.markdown-section output { + padding: 1.7rem 1.4rem; + border: 1px dotted #ccc; +} + +.markdown-section output> :first-child { + margin-top: 0; +} + +.markdown-section output> :last-child { + margin-bottom: 0; +} + +.markdown-section code::after, +.markdown-section code::before, +.markdown-section output::after, +.markdown-section output::before { + letter-spacing: 0.05rem; +} + +.markdown-section pre::after, +.markdown-section output::after { + color: #ccc; + font-size: 0.6rem; + font-weight: 600; + height: 15px; + line-height: 15px; + padding: 5px 10px 0; + position: absolute; + right: 0; + text-align: right; + top: 0; +} + +.markdown-section pre::after, +.markdown-section output::after { + content: attr(data-lang); +} + +/* code highlight */ +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #8e908c; +} + +.token.namespace { + opacity: 0.7; +} + +.token.boolean, +.token.number { + color: #c76b29; +} + +.token.punctuation { + color: #525252; +} + +.token.property { + color: #c08b30; +} + +.token.tag { + color: #2973b7; +} + +.token.string { + color: #2ee2ee; + color: var(--theme-color, #2ee2ee); +} + +.token.selector { + color: #6679cc; +} + +.token.attr-name { + color: #2973b7; +} + +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #22a2c9; +} + +.token.attr-value, +.token.control, +.token.directive, +.token.unit { + color: #2ee2ee; + color: var(--theme-color, #2ee2ee); +} + +.token.keyword, +.token.function { + color: #e96900; +} + +.token.statement, +.token.regex, +.token.atrule { + color: #22a2c9; +} + +.token.placeholder, +.token.variable { + color: #3d8fd1; +} + +.token.deleted { + text-decoration: line-through; +} + +.token.inserted { + border-bottom: 1px dotted #202746; + text-decoration: none; +} + +.token.italic { + font-style: italic; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.important { + color: #c94922; +} + +.token.entity { + cursor: help; +} + +code .token { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + min-height: 1.5rem; + position: relative; + left: auto; +} \ No newline at end of file diff --git a/_iframes/.DS_Store b/_iframes/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..414d9b5961ede023032775c110b781bc1353f1ee GIT binary patch literal 6148 zcmeHKy-veG47N*$R4g4CZ({Gpf|OQaN9w=|rBORHN}*-HXWe6A{mzmJ^~e5oJ)p!3d^DWM8x+1M|oxr!yYun(k;tqwylzTqN=(m7Mps3sO;k9?Kz&mPW#WR>g5k3x9iTGGgMd7 z4z~GqeIL`V?PmIZ`JlCR&T3coRa{S9EpmM63^)VMz)>-Po-LA{D!O$BoB?N`VL-kQ z0V + + + + + + + p5.js iframe + + + + +

Model

+

Description

+ + + + \ No newline at end of file diff --git a/_iframes/testPage/main.html b/_iframes/testPage/main.html new file mode 100644 index 0000000..8c0029e --- /dev/null +++ b/_iframes/testPage/main.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + + +
+
+ + + + \ No newline at end of file diff --git a/_iframes/testPage/script.js b/_iframes/testPage/script.js new file mode 100644 index 0000000..6b91811 --- /dev/null +++ b/_iframes/testPage/script.js @@ -0,0 +1,50 @@ +console.log('ml5 version:', ml5.version); + +let cam; +let poseNet; +let poses = []; + +function setup() { + createCanvas(640, 480); + background(0); + // webcam + cam = createCapture(VIDEO); + cam.size(640, 480); + cam.hide(); + //poseNet + poseNet = ml5.poseNet(cam, modelReady); + poseNet.on("pose", gotResults); +} + +function draw() { + background(0); + image(cam, 0, 0); + + noStroke(); + for (let i = 0; i < poses.length; i++) { + for (let k = 0; k < poses[i].pose.keypoints.length; k++) { + // console.log(poses[i].pose.keypoints[k]); + let point = poses[i].pose.keypoints[k]; + + let x = point.position.x; + let y = point.position.y; + let score = point.score; + let partName = point.part; + + fill(0, 255, 0); + ellipse(x, y, 5, 5); + + text(partName, x + 15, y + 5); + text(score.toFixed(2), x + 15, y + 20); + //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed + } + } +} + +function modelReady() { + console.log("Model Loaded: PoseNet"); +} + +function gotResults(newPoses) { + poses = newPoses; +} \ No newline at end of file diff --git a/_iframes/testPage/style.css b/_iframes/testPage/style.css new file mode 100644 index 0000000..ca8e0fb --- /dev/null +++ b/_iframes/testPage/style.css @@ -0,0 +1,10 @@ +html, +body { + margin: 0; + padding: 0; + background-color: #EEEEEE; +} + +canvas { + display: block; +} \ No newline at end of file diff --git a/_sidebar.md b/_sidebar.md index 85d1cbe..72e2b00 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -14,6 +14,7 @@ * [Getting Started](/) * [FAQ](/faq.md) + * [Test Page](/test.md) diff --git a/index.html b/index.html index bf528e9..500226d 100644 --- a/index.html +++ b/index.html @@ -1,144 +1,141 @@ - - - ml5 - A friendly machine learning library for the web. - - - - - - - - - - - +
loading...
+ + + + + + + + + + + + + + -
loading...
- - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/test.md b/test.md new file mode 100755 index 0000000..cd6a3c6 --- /dev/null +++ b/test.md @@ -0,0 +1,388 @@ +# iframe from p5 Web Editor +[p5 Web Editor](https://editor.p5js.org/MOQN/full/bBlyX6b-3 ':include :type=iframe width=100% height=480px') + + +# iframe from a relative folder +[p5 sketch](_iframes/testPage/ ':include :type=iframe width=100% height=480px') + + +# ml5.js provides an approachable API and examples to help you get started + + +![npm](https://img.shields.io/npm/v/ml5?color=%230ace81&label=Latest%20Version) + +```javascript +// Step 1: Create an image classifier with MobileNet +const classifier = ml5.imageClassifier("MobileNet", onModelReady); + +// Step 2: select an image +const img = document.querySelector("#myImage"); + +// Step 3: Make a prediction +let prediction = classifier.predict(img, gotResults); + +// Step 4: Do something with the results! +function gotResults(err, results) { + console.log(results); + // all the amazing things you'll add +} +``` + +# PoseNet + + +
+ pose detection +

image via: https://pdm.com.co/tag/posenet/

+
+ + +## Description + +PoseNet is a machine learning model that allows for Real-time Human Pose Estimation. + +PoseNet can be used to estimate either a single pose or multiple poses, meaning there is a version of the algorithm that can detect only one person in an image/video and one version that can detect multiple persons in an image/video. + +The original PoseNet model was ported to TensorFlow.js by Dan Oved. For background, read [Real-time Human Pose Estimation in the Browser with TensorFlow.js](https://medium.com/tensorflow/real-time-human-pose-estimation-in-the-browser-with-tensorflow-js-7dd0bc881cd5). + +## Quickstart + +```js +const video = document.getElementById('video'); + +// Create a new poseNet method +const poseNet = ml5.poseNet(video, modelLoaded); + +// When the model is loaded +function modelLoaded() { + console.log('Model Loaded!'); +} +// Listen to new 'pose' events +poseNet.on('pose', (results) => { + poses = results; +}); +``` + + +## Usage + +### Initialize +There are a couple ways to initialize `ml5.poseNet`. +```js +// Initialize with video, type and callback +const poseNet = ml5.poseNet(?video, ?type, ?callback); +// OR Initialize with video, options and callback +const poseNet = ml5.poseNet(?video, ?options, ?callback); +// OR Initialize WITHOUT video. Just options and callback here +const poseNet = ml5.poseNet(?callback, ?options); +``` + +#### Parameters +* **video**: OPTIONAL. Optional HTMLVideoElement input to run poses on. +* **type**: OPTIONAL. A String value to run `single` or `multiple` estimation. Changes the `detectionType` property of the options. Default is `multiple`. +* **callback**: OPTIONAL. A function that is called when the model is loaded. +* **options**: OPTIONAL. A object that contains properties that effect the posenet model accuracy, results, etc. + + ```js + { + architecture: 'MobileNetV1', + imageScaleFactor: 0.3, + outputStride: 16, + flipHorizontal: false, + minConfidence: 0.5, + maxPoseDetections: 5, + scoreThreshold: 0.5, + nmsRadius: 20, + detectionType: 'multiple', + inputResolution: 513, + multiplier: 0.75, + quantBytes: 2, + }; + ``` + +### Properties + +*** +#### .net +> The poseNet model +*** + +*** +#### .video +> The optional video added to the +*** + +*** +#### .architecture +> The model architecture +*** + +*** +#### .detectionType +> The detection type +*** + +*** +#### .imageScaleFactor +> The image scale factor +*** + +*** +#### .outputStride +> Can be one of 8, 16, 32 (Stride 16, 32 are supported for the ResNet architecture and stride 8, 16, 32 are supported for the MobileNetV1 architecture). It specifies the output stride of the PoseNet model. The smaller the value, the larger the output resolution, and more accurate the model at the cost of speed. Set this to a larger value to increase speed at the cost of accuracy. +*** + +*** +#### .flipHorizontal +> Boolean. Flip the image horizontal or not. +*** + +*** +#### .scoreThreshold +> The threshold for returned values. Between 0 and 1. Only return instance detections that have root part score greater or equal to this value. Defaults to 0.5. +*** + + +*** +#### .maxPoseDetections +> the maximum number of poses to detect. Defaults to 5. +*** + +*** +#### .multiplier +> Can be one of 1.01, 1.0, 0.75, or 0.50 (The value is used only by the MobileNetV1 architecture and not by the ResNet architecture). It is the float multiplier for the depth (number of channels) for all convolution ops. The larger the value, the larger the size of the layers, and more accurate the model at the cost of speed. Set this to a smaller value to increase speed at the cost of accuracy. +*** + +*** +#### .inputResolution +> Can be one of 161, 193, 257, 289, 321, 353, 385, 417, 449, 481, 513, and 801. Defaults to 257. It specifies the size the image is resized to before it is fed into the PoseNet model. The larger the value, the more accurate the model at the cost of speed. Set this to a smaller value to increase speed at the cost of accuracy. +*** + +*** +#### .quantBytes +>This argument controls the bytes used for weight quantization. The available options are: 4. 4 bytes per float (no quantization). Leads to highest accuracy and original model size (~90MB). 2. 2 bytes per float. Leads to slightly lower accuracy and 2x model size reduction (~45MB). 1. 1 byte per float. Leads to lower accuracy and 4x model size reduction (~22MB). +*** + +*** +#### .nmsRadius +> Non-maximum suppression part distance. It needs to be strictly positive. Two parts suppress each other if they are less than nmsRadius pixels away. Defaults to 20. +*** + + +### Methods + +*** +#### .on('pose', ...) +> An event listener that returns the results when a pose is detected. You can use this with `.singlePose()` or `.multiPose()` or just listen for poses if you pass in a `video` into the constructor. + +```js +poseNet.on('pose', callback); +``` + +📥 **Inputs** + +* **callback**: REQUIRED. A callback function to handle the results when a pose is detected. For example. + +```js +poseNet.on('pose', (results) => { + // do something with the results + console.log(results); +}); +``` + +📤 **Outputs** + +* **Array**: Returns an array of objects. See documentation for `.singlePose()` and `.multiPose()` + +*** + + +*** +#### .singlePose() +> Given a number, will make magicSparkles + +```js +poseNet.singlePose(?input); +``` + +📥 **Inputs** + +* **input**: Optional. A HTML video or image element or a p5 image or video element. If no input is provided, the default is to use the video given in the constructor. + +📤 **Outputs** + +* **Array**: Returns an array of objects. A sample is included below. + + ```js + [ + { + pose: { + keypoints: [{ position: { x, y }, score, part }, ...], + leftAngle: { x, y, confidence }, + leftEar: { x, y, confidence }, + leftElbow: { x, y, confidence }, + ... + }, + }, + ]; + ``` +*** + +*** +#### .multiPose() +> Given a number, will make magicSparkles + +```js +poseNet.multiPose(?input); +``` + +📥 **Inputs** + +* **input**: Optional. Number. A HTML video or image element or a p5 image or video element. If no input is provided, the default is to use the video given in the constructor. + +📤 **Outputs** + +* **Array**: Returns an array of objects. A sample is included below. + + ```js + [ + { + pose: { + keypoints: [{ position: { x, y }, score, part }, ...], + leftAngle: { x, y, confidence }, + leftEar: { x, y, confidence }, + leftElbow: { x, y, confidence }, + ... + }, + }, + { + pose: { + keypoints: [{ position: { x, y }, score, part }, ...], + leftAngle: { x, y, confidence }, + leftEar: { x, y, confidence }, + leftElbow: { x, y, confidence }, + ... + }, + }, + ]; + ``` +*** + + +## Examples + +**p5.js** +* [PoseNet_image_single](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/PoseNet/PoseNet_image_single) +* [PoseNet_part_selection](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/PoseNet/PoseNet_part_selection) +* [PoseNet_webcam](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/PoseNet/PoseNet_webcam) + +**p5 web editor** +* [PoseNet_image_single](https://editor.p5js.org/ml5/sketches/PoseNet_image_single) +* [PoseNet_part_selection](https://editor.p5js.org/ml5/sketches/PoseNet_part_selection) +* [PoseNet_webcam](https://editor.p5js.org/ml5/sketches/PoseNet_webcam) + +**plain javascript** +* [PoseNet_image_single](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/PoseNet/PoseNet_image_single) +* [PoseNet_part_selection](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/PoseNet/PoseNet_part_selection) +* [PoseNet_webcam](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/PoseNet/PoseNet_webcam) + +## Demo + +No demos yet - contribute one today! + +## Tutorials + +### PoseNet on The Coding Train + + + +## Model and Data Provenance +> A project started by [Ellen Nickles](https://github.com/ellennickles/) + +### Models Overview + +There are two model versions available for use with ml5’s implementation of PoseNet, “MobileNetV1” and “ResNet50.” + +Each model is a type of convolutional neural network (CNN). A CNN finds patterns in the pixels of images (e.g. horizontal or vertical edges), and through successive layers of computation finds sets of patterns to identify more complex patterns (e.g. corners or circles), eventually detecting intricate patterns that it predicts belong to a particular category (e.g. right eye or left elbow). The categories depend on how images in the model’s training dataset are labeled. + +#### MobileNetV1 - Model Biography + +* **Description** + * MobileNet is a term that describes a type of machine learning model architecture that has been optimized to run on platforms with limited computational power, such as applications on mobile or embedded devices. MobileNets have several use cases, including image classification, object detection, and image segmentation. This particular MobileNet model was trained to detect people and 17 different key points on the body. + * ml5 defaults using a MobileNet created with TensorFlow.js, a JavaScript library from TensorFlow, an open source machine learning platform developed by Google. +* **Developer and Year** + * Google’s TensorFlow.js team. The TensorFlow version was ported to TensorFlow.js by Dan Oved in collaboration with Google Researchers, George Papandreou and [Tyler (Lixuan) Zhu](https://research.google/people/TylerZhu/). +* **Purpose and Intended Users** + * From the website: TensorFlow is an open source machine learning platform that “has a comprehensive, flexible ecosystem of tools, libraries, and community resources that lets researchers push the state-of-the-art in ML and developers easily build and deploy ML-powered applications.” This model is available for use in the ml5 library because Tensorflow licenses it with Apache License 2.0. +* **Hosted Location** + * As of June 2019, ml5 imports MobileNetV1 from TensorFlow, hosted on the NPM database. This means that your ml5 sketch will automatically use the most recent version distributed on NPM. +* **ml5 Contributor and Year** + * Ported by Cristóbal Valenzuela in 2018 +* **References** + * Website [TensorFlow](https://www.tensorflow.org/) + * Developers [Dan Oved](https://www.danioved.com/), George Papandreou, and [Tyler (Lixuan) Zhu](https://research.google/people/TylerZhu/) + * ml5 Contributor [Cristóbal Valenzuela](https://cvalenzuelab.com/) + * GitHub Repository [TensorFlow.js Pose Detection in the Browser: PoseNet Model](https://github.com/tensorflow/tfjs-models/tree/master/posenet) + * NPM Readme [Pose Detection in the Browser: PoseNet Model](https://www.npmjs.com/package/@tensorflow-models/posenet) + * Article: [Real-time Human Pose Estimation in the Browser with TensorFlow.js](https://medium.com/tensorflow/real-time-human-pose-estimation-in-the-browser-with-tensorflow-js-7dd0bc881cd5) + +#### MobileNetV1 - Data Biography +* **Description** + * According to Dan Oved, the model was trained on images from the COCO dataset. +* **Source** + * From the website: The COCO dataset is managed by a number of collaborators from both academic and commercial organizations for “large-scale object detection, segmentation, and captioning,” and according to the paper, images were collected from Flickr. +* **Collector and Year** + * The COCO database began in 2014. +* **Collection Method** + * COCO methods for collecting images and annotating pixels into segments are described in the paper. +* **Purpose and Intended Users** + * The COCO dataset was created to advance computer vision research. +* **References** + - TensorFlow.js PoseNet Developer [Dan Oved](https://www.danioved.com/) + - Paper [Microsoft COCO: Common Objects in Context](https://arxiv.org/abs/1405.0312) + - Website [Microsoft COCO: Common Objects in Context](http://cocodataset.org/#home) + +#### ResNet50 - Model Biography + +- **Description** + - ResNet is a term that describes a type of machine learning model architecture that contains more computational layers than a MobileNet model. Because of its larger size, it is slower but yields more accurate results. + - As of PoseNet 2.0, a ResNet50 model version is available to import from TensorFlow and may be specified in your ml5 script. +- **Developer and Year** + - Google’s TensorFlow.js team +- **Purpose and Intended Users** + - Same as above +- **Hosted Location** + - ml5 imports ResNet50 from TensorFlow, hosted on the NPM database. This means that if you specify ResNet in your ml5 sketch, it will automatically use the most recent version distributed on NPM. +- **ml5 Contributor and Year** + - Same as above +- **References** + - Same as above + +#### ResNet50 - Data Biography + +- **Description** + - Same as above +- **Source** + - Same as above +- **Collector and Year** + - Same as above +- **Collection Method** + - Same as above +- **Purpose and Intended Users** + - Same as above +- **References** + - Same as above + + +## Acknowledgements + +**Contributors**: + * Cristobal Valenzuela, Maya Man, Dan Oved + +**Credits**: + * Paper Reference | Website URL | Github Repo | Book reference | etc + + +## Source Code + +* [/src/PoseNet](https://github.com/ml5js/ml5-library/tree/main/src/PoseNet)