Hugging Face's logo

Spaces:
Javiai
/
docker-opencv
Sleeping

App Files Community
Javiai commited on
Commit
d1ebf6e
•
1 Parent(s): 709edf5

updates examples

Browse files
Files changed (5) hide show
  1. public/index.html +4 -2
  2. public/tests/index_old.html +14 -8
  3. public/tests/index_posenet.html +31 -20
  4. public/tests/index_segmegtation.html +0 -26
  5. public/tests/index_segmentation.html +35 -0
public/index.html CHANGED
@@ -1,7 +1,7 @@
1
  <!DOCTYPE html>
2
 
3
  <head>
4
- <title>Docker Tensorflow</title>
5
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mvoloskov/potion/potion.min.css">
6
 
7
  <style>
@@ -19,7 +19,9 @@
19
  <h1>Docker Opencv APP</h1>
20
  <p>A App developed for apply IA in streaming video in JavaScript</p>
21
  <p>This is a work in progress project that want to work with P5.js, OpenCV, Tensorflow.js, Node.js and Docker</p>
22
- <p>Right now, only apply a halftone over the webcam video </p> <a href="tests/index_old.html">Halftone</a>
 
 
23
  </header>
24
 
25
  <div>
 
1
  <!DOCTYPE html>
2
 
3
  <head>
4
+ <title>Docker Computer Vision</title>
5
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mvoloskov/potion/potion.min.css">
6
 
7
  <style>
 
19
  <h1>Docker Opencv APP</h1>
20
  <p>A App developed for apply IA in streaming video in JavaScript</p>
21
  <p>This is a work in progress project that want to work with P5.js, OpenCV, Tensorflow.js, Node.js and Docker</p>
22
+ <p>Right now, only apply a halftone over the webcam video </p>
23
+ <h3>Examples</h3>
24
+ <p><a href="/index.html">Segmentation </a><a href="/tests/index_posenet.html">PoseNet </a><a href="/tests/index_old.html">Halftone </a><a href="/tests/index_segmentation.html">Segmentation</a></p>
25
  </header>
26
 
27
  <div>
public/tests/index_old.html CHANGED
@@ -1,5 +1,6 @@
1
  <html>
2
  <head>
 
3
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mvoloskov/potion/potion.min.css">
4
 
5
  <style>
@@ -8,15 +9,20 @@
8
  color: white;
9
  }
10
  </style>
11
- <script src="https://cdn.jsdelivr.net/npm/p5@1.8.0/lib/p5.js"></script>
12
- </head>
13
- <body>
 
 
14
  <header>
15
- <h1>Docker Opencv APP</h1>
16
- <p>A App developed for apply IA in streaming video in JavaScript</p>
17
- <p>This is a work in progress project that want to work with P5.js, OpenCV, Tensorflow.js, Node.js and Docker</p>
18
- <p>Right now, only apply a halftone over the webcam video</p>
19
- </header>
 
 
 
20
 
21
  <script src="sketch.js"></script>
22
  <!--
 
1
  <html>
2
  <head>
3
+ <title>Docker Computer Vision</title>
4
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mvoloskov/potion/potion.min.css">
5
 
6
  <style>
 
9
  color: white;
10
  }
11
  </style>
12
+ <!-- Load p5.js -->
13
+ <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
14
+ </head>
15
+
16
+ <body>
17
  <header>
18
+ <h1>Docker Computer Vision</h1>
19
+ <p>A App developed for apply IA in streaming video in JavaScript</p>
20
+ <p>This is a work in progress project that want to work with P5.js, OpenCV, Tensorflow.js, Node.js and Docker</p>
21
+ <p>Right now, only apply a halftone over the webcam video </p>
22
+ <h3>Examples</h3>
23
+ <p><a href="/index.html">Segmentation </a><a href="/tests/index_posenet.html">PoseNet </a><a href="/tests/index_old.html">Halftone </a><a href="/tests/index_segmentation.html">Segmentation</a></p>
24
+ </header>
25
+
26
 
27
  <script src="sketch.js"></script>
28
  <!--
public/tests/index_posenet.html CHANGED
@@ -1,26 +1,37 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1">
6
-
7
- <title>3D Pose Estimation Sample by BlazePose & p5.js</title>
8
- <!-- Load p5.js -->
9
- <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
10
- <!-- Load MediaPipe Pose Using TensorFlow.js runtime -->
11
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
12
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
13
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>
14
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script>
15
- <script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose"></script>
16
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script>
17
- <!-- Load MediaPipe Pose Using MediaPipe runtime -->
18
- <!-- <script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose"></script>
19
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script> -->
20
- <!-- My Sketch -->
21
- </head>
22
- <body>
23
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  <script src="sketch2.js"></script>
25
  </body>
26
  </html>
 
1
  <!DOCTYPE html>
2
  <html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
 
4
+ <head>
5
+ <title>Docker Computer Vision</title>
6
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mvoloskov/potion/potion.min.css">
7
+
8
+ <style>
9
+ body {
10
+ background: #0b0f19;
11
+ color: white;
12
+ }
13
+ </style>
14
+ <!-- Load p5.js -->
15
+ <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
16
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
17
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
18
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>
19
+ <script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose"></script>
20
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script>
21
+ </head>
22
+
23
+ <body>
24
+ <header>
25
+ <h1>Docker Computer Vision</h1>
26
+ <p>A App developed for apply IA in streaming video in JavaScript</p>
27
+ <p>This is a work in progress project that want to work with P5.js, OpenCV, Tensorflow.js, Node.js and Docker</p>
28
+ <p>Right now, only apply a halftone over the webcam video </p>
29
+ <h3>Examples</h3>
30
+ <p><a href="/index.html">Segmentation </a><a href="/tests/index_posenet.html">PoseNet </a><a href="/tests/index_old.html">Halftone </a><a href="/tests/index_segmentation.html">Segmentation</a></p>
31
+ </header>
32
+ <main>
33
+ <canvas></canvas>
34
+ </main>
35
  <script src="sketch2.js"></script>
36
  </body>
37
  </html>
public/tests/index_segmegtation.html DELETED
@@ -1,26 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1">
6
-
7
- <title>3D Pose Estimation Sample by BlazePose & p5.js</title>
8
- <!-- Load p5.js -->
9
- <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
10
- <!-- Load MediaPipe Pose Using TensorFlow.js runtime -->
11
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
12
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
13
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>
14
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-segmentation"></script>
15
-
16
- <!-- Optional: Include below scripts if you want to use TensorFlow.js runtime.
17
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>-->
18
-
19
- <!-- Optional: Include below scripts if you want to use MediaPipe runtime.
20
- <script src="https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation"></script>-->
21
- </head>
22
- <body>
23
- <canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;"></canvas>
24
- <script src="sketch3.js"></script>
25
- </body>
26
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
public/tests/index_segmentation.html ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Docker Computer Vision</title>
5
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mvoloskov/potion/potion.min.css">
6
+
7
+ <style>
8
+ body {
9
+ background: #0b0f19;
10
+ color: white;
11
+ }
12
+ </style>
13
+ <!-- Load p5.js -->
14
+ <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
15
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
16
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
17
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>
18
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-segmentation"></script>
19
+ </head>
20
+
21
+ <body>
22
+ <header>
23
+ <h1>Docker Computer Vision</h1>
24
+ <p>A App developed for apply IA in streaming video in JavaScript</p>
25
+ <p>This is a work in progress project that want to work with P5.js, OpenCV, Tensorflow.js, Node.js and Docker</p>
26
+ <p>Right now, only apply a halftone over the webcam video </p>
27
+ <h3>Examples</h3>
28
+ <p><a href="/index.html">Segmentation </a><a href="/tests/index_posenet.html">PoseNet </a><a href="/tests/index_old.html">Halftone </a><a href="/tests/index_segmentation.html">Segmentation</a></p>
29
+ </header>
30
+ <main>
31
+ <canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;"></canvas>
32
+ </main>
33
+ <script src="sketch3.js"></script>
34
+ </body>
35
+ </html>