This repository has been archived by the owner on Jun 30, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #122 from BenjaIeg/main
agregar apuntes BenjaIeg
- Loading branch information
Showing
1 changed file
with
148 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| ## Analisis de proyecto en MediaPipe P5 | ||
|
|
||
| Este ejercicio lo estoy realizando junto con Juanitaliano | ||
|
|
||
| ### Image clasification | ||
|
|
||
| https://tetsuakibaba.github.io/p5MediaPipe/image-classification/ | ||
|
|
||
| La clasificaciones de imagen, como menciona el nombre, es un clasificador de objetos de los cuales se visualizan en la camara web | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
| Herramientas de las cuales se apoya el codigo | ||
|
|
||
| MediaPipe y libreria de Clasificacion de imagenes: | ||
|
|
||
| https://developers.google.com/mediapipe/solutions/vision/image_classifier | ||
|
|
||
| Visualizacion de los 3 codigos a la vez https://codepen.io/mediapipe-preview/pen/BaVZejK | ||
|
|
||
| ImageNet: Es un banco de datos de miles de imagenes cargadas y entrenadas para el area de computer vision y deep learning. | ||
|
|
||
| https://www.image-net.org/ | ||
|
|
||
|  | ||
|
|
||
| Tensorflow Lite | ||
|
|
||
| Los modelos descargados tambien se descargan en tipo tensorflow lite. | ||
|
|
||
|
|
||
| Codigo para la visualizacion en la web | ||
|
|
||
| ``` | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>p5MediaPipeHands Image Classification</title> | ||
| </head> | ||
| <body> | ||
| <body> | ||
| <h1>Image Classification</h1> | ||
| <p id="message"></p> | ||
| <button id="webcamButton" disabled> | ||
| ENABLE WEBCAM | ||
| </button> | ||
| <div style="position: relative;"> | ||
| <video id="webcam" style="position:absolute;left:0px;top:0px;width:100%;height:auto" autoplay playsinline></video> | ||
| <div id="canvas" style="position:absolute;left:0px;top:0px"> | ||
| </div> | ||
| </div> | ||
| <!-- include js libraries --> | ||
| <script src="./js/drawing_utils.js" crossorigin="anonymous"></script> | ||
| <script src="./js/p5.js"></script> | ||
| <script src="./js/sketch.js"></script> | ||
| <script type="module" src="./js/script.js"></script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| ## Codigo de funcionamiento | ||
|
|
||
| ``` | ||
| let classification_results; | ||
| function setup() { | ||
| let p5canvas = createCanvas(400, 400); | ||
| p5canvas.parent('#canvas'); | ||
| // お手々が見つかると以下の関数が呼び出される．resultsに検出結果が入っている． | ||
| gotClassification = function (results) { | ||
| classification_results = results; | ||
| adjustCanvas(); | ||
| } | ||
| } | ||
| function draw() { | ||
| // 描画処理 | ||
| clear(); // これを入れないと下レイヤーにあるビデオが見えなくなる | ||
| // 各頂点座標を表示する | ||
| // 各頂点座標の位置と番号の対応は以下のURLを確認 | ||
| // https://developers.google.com/mediapipe/solutions/vision/hand_landmarker | ||
| if (classification_results) { | ||
| let name = classification_results.classifications[0].categories[0].categoryName; | ||
| let score = classification_results.classifications[0].categories[0].score; | ||
| // console.log(classification_results.classifications[0].categories[0]); | ||
| textSize(48); | ||
| text(`${name}: ${(score * 100).toFixed(0)} %`, 20, 64); | ||
| } | ||
| } | ||
| function windowResized() { | ||
| adjustCanvas(); | ||
| } | ||
| function adjustCanvas() { | ||
| // Get an element by its ID | ||
| var element_webcam = document.getElementById('webcam'); | ||
| resizeCanvas(element_webcam.clientWidth, element_webcam.clientHeight); | ||
| //console.log(element_webcam.clientWidth); | ||
| } | ||
| ``` | ||
|
|
||
|
|
||
| Otros links y conceptos revisados en clases. | ||
|
|
||
| https://component.gallery/ | ||
|
|
||
| https://en.wikipedia.org/wiki/Computer_vision | ||
|
|
||
| atlas ai kate crawford | ||
|
|
||
| https://github.com/auduno/clmtrackr?tab=readme-ov-file | ||
|
|
||
| https://es.wikipedia.org/wiki/Harvard_Mark_I | ||
|
|
||
| https://developers.google.com/mediapipe | ||
|
|
||
| https://coral.ai/ | ||
|
|
||
| https://guardianproject.info/ | ||
|
|
||
| https://lingdong.works/ | ||
|
|
||
| https://github.com/LingDong- | ||
|
|
||
| https://www.media.mit.edu/people/lingdong/projects/ | ||
|
|
||
| golan levin | ||
|
|
||
| https://www.pratt.edu/design/ |