├── LogotipoV2-Simple.png ├── README.md ├── drawing.js ├── fabric.min.js ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── group1-shard1of1.bin ├── index.html └── model.json /LogotipoV2-Simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ringa-tech/exportacion-numeros/4777b39638827f6d366bbb2457603d3d21fee183/LogotipoV2-Simple.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Números escritos a mano 2 | 3 | Este código fuente sirve como apoyo para el video de exportación de modelos de Tensorflow a Tensorflow.js, del canal de YouTube [Ringa Tech](https://youtube.com/RingaTech) 4 | 5 | Se trata de un clasificador de números escritos, en donde puedes dibujar en el explorador un número del 0 al 9, y al dar clic en predecir intentará decir qué número es, utilizando Tensorflow.js, en base aun modelo entrenado en Python con Tensorflow 6 | 7 | ## Probar en vivo 8 | Puedes probar este proyecto en vivo [aquí](https://ringa-tech.com/exportacion/numeros/) 9 | 10 | ## Cómo utilizarlo 11 | 12 | ### Descargar el repositorio 13 | Descarga el repositorio donde gustes en tu computadora 14 | 15 | ### Inicia un servidor en la carpeta 16 | Este proyecto utiliza un modelo de Tensorflow.js, el cual para cargarse requiere que el acceso sea por medio de http/https. 17 | Para eso puedes usar cualquier servidor, pero aquí hay una forma de hacerlo: 18 | - Descarga Python en tu computadora 19 | - Abre una línea de comandos o terminal 20 | - Navega hasta la carpeta donde descargaste el repositorio 21 | - Ejecuta el comando `python -m http.server 8000` 22 | - Abre un explorador y ve a http://localhost:8000 23 | ### Uso 24 | Dibuja con el mouse o tu dedo en el canvas cuadrado un número del 0 al 9, y da clic en "Predecir". Para limpiar el canvas da clic en "Limpiar". 25 | 26 | ## Problemas 27 | Si tienes un problema, regístralo aquí o déjame un comentario en el video de Youtube. Asegúrate de primero revisar la consola de desarrollador de tu explorador para ver si puedes identificar el problema. -------------------------------------------------------------------------------- /drawing.js: -------------------------------------------------------------------------------- 1 | var brushWidth = 10; 2 | var color = "#000000"; 3 | var drawingcanvas; 4 | 5 | (function() { 6 | var $ = function(id){return document.getElementById(id)}; 7 | 8 | drawingcanvas = this.__canvas = new fabric.Canvas('bigcanvas', { 9 | isDrawingMode: true 10 | }); 11 | 12 | fabric.Object.prototype.transparentCorners = false; 13 | 14 | if (drawingcanvas.freeDrawingBrush) { 15 | drawingcanvas.freeDrawingBrush.color = color; 16 | drawingcanvas.freeDrawingBrush.width = brushWidth; 17 | } 18 | })(); -------------------------------------------------------------------------------- /favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ringa-tech/exportacion-numeros/4777b39638827f6d366bbb2457603d3d21fee183/favicon-16x16.png -------------------------------------------------------------------------------- /favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ringa-tech/exportacion-numeros/4777b39638827f6d366bbb2457603d3d21fee183/favicon-32x32.png -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ringa-tech/exportacion-numeros/4777b39638827f6d366bbb2457603d3d21fee183/favicon.ico -------------------------------------------------------------------------------- /group1-shard1of1.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ringa-tech/exportacion-numeros/4777b39638827f6d366bbb2457603d3d21fee183/group1-shard1of1.bin -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Números 9 | 10 | 11 | 12 | 24 | 25 | 26 | 27 | 28 |
29 |
30 | 31 |

Números escritos a mano

32 |
33 |

Predicción de números escritos a mano utilizando Tensorflow.js

34 |

El detalle puedes verlo en este video

35 |
36 |
37 | 38 |
39 | 40 |
41 |
42 |
43 |
44 |
Dibuja el número grande y centrado para tener una mejor predicción
45 | 46 | 47 |
48 |
49 | 50 | 51 |
52 |
53 | 54 |
55 |
56 |
57 | 58 |
59 | 60 |
61 |
62 |

Ringa Tech

63 |
64 |

Revisa mi canal para videos de inteligencia artificial, programación, etc.

65 |
66 |
67 |
68 | 69 |
70 |
71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 221 | 222 | -------------------------------------------------------------------------------- /model.json: -------------------------------------------------------------------------------- 1 | 2 | {"format": "layers-model", "generatedBy": "keras v2.5.0", "convertedBy": "TensorFlow.js Converter v3.8.0", "modelTopology": {"keras_version": "2.5.0", "backend": "tensorflow", "model_config": {"class_name": "Sequential", "config": {"name": "sequential_3", "layers": [{"class_name": "InputLayer", "config": {"batch_input_shape": [null, 28, 28, 1], "dtype": "float32", "sparse": false, "ragged": false, "name": "conv2d_12_input"}}, {"class_name": "Conv2D", "config": {"name": "conv2d_12", "trainable": true, "batch_input_shape": [null, 28, 28, 1], "dtype": "float32", "filters": 32, "kernel_size": [3, 3], "strides": [1, 1], "padding": "valid", "data_format": "channels_last", "dilation_rate": [1, 1], "groups": 1, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "MaxPooling2D", "config": {"name": "max_pooling2d_12", "trainable": true, "dtype": "float32", "pool_size": [2, 2], "padding": "valid", "strides": [2, 2], "data_format": "channels_last"}}, {"class_name": "Conv2D", "config": {"name": "conv2d_13", "trainable": true, "dtype": "float32", "filters": 64, "kernel_size": [3, 3], "strides": [1, 1], "padding": "valid", "data_format": "channels_last", "dilation_rate": [1, 1], "groups": 1, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "MaxPooling2D", "config": {"name": "max_pooling2d_13", "trainable": true, "dtype": "float32", "pool_size": [2, 2], "padding": "valid", "strides": [2, 2], "data_format": "channels_last"}}, {"class_name": "Conv2D", "config": {"name": "conv2d_14", "trainable": true, "dtype": "float32", "filters": 128, "kernel_size": [3, 3], "strides": [1, 1], "padding": "valid", "data_format": "channels_last", "dilation_rate": [1, 1], "groups": 1, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "MaxPooling2D", "config": {"name": "max_pooling2d_14", "trainable": true, "dtype": "float32", "pool_size": [2, 2], "padding": "valid", "strides": [2, 2], "data_format": "channels_last"}}, {"class_name": "Dropout", "config": {"name": "dropout_3", "trainable": true, "dtype": "float32", "rate": 0.5, "noise_shape": null, "seed": null}}, {"class_name": "Flatten", "config": {"name": "flatten_3", "trainable": true, "dtype": "float32", "data_format": "channels_last"}}, {"class_name": "Dense", "config": {"name": "dense_6", "trainable": true, "dtype": "float32", "units": 512, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_7", "trainable": true, "dtype": "float32", "units": 10, "activation": "softmax", "use_bias": true, "kernel_initializer": {"class_name": "GlorotUniform", "config": {"seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}]}}, "training_config": {"loss": {"class_name": "SparseCategoricalCrossentropy", "config": {"reduction": "auto", "name": "sparse_categorical_crossentropy", "from_logits": false}}, "metrics": [[{"class_name": "MeanMetricWrapper", "config": {"name": "accuracy", "dtype": "float32", "fn": "sparse_categorical_accuracy"}}]], "weighted_metrics": null, "loss_weights": null, "optimizer_config": {"class_name": "Adam", "config": {"name": "Adam", "learning_rate": 0.0010000000474974513, "decay": 0.0, "beta_1": 0.8999999761581421, "beta_2": 0.9990000128746033, "epsilon": 1e-07, "amsgrad": false}}}}, "weightsManifest": [{"paths": ["group1-shard1of1.bin"], "weights": [{"name": "conv2d_12/kernel", "shape": [3, 3, 1, 32], "dtype": "float32"}, {"name": "conv2d_12/bias", "shape": [32], "dtype": "float32"}, {"name": "conv2d_13/kernel", "shape": [3, 3, 32, 64], "dtype": "float32"}, {"name": "conv2d_13/bias", "shape": [64], "dtype": "float32"}, {"name": "conv2d_14/kernel", "shape": [3, 3, 64, 128], "dtype": "float32"}, {"name": "conv2d_14/bias", "shape": [128], "dtype": "float32"}, {"name": "dense_6/kernel", "shape": [128, 512], "dtype": "float32"}, {"name": "dense_6/bias", "shape": [512], "dtype": "float32"}, {"name": "dense_7/kernel", "shape": [512, 10], "dtype": "float32"}, {"name": "dense_7/bias", "shape": [10], "dtype": "float32"}]}]} --------------------------------------------------------------------------------