ocr - Reconocimiento optico de caracteres

INTRODUCCION

Vamos a desarrollar una aplicación de reconocimiento óptico de caracteres (OCR - Optical Character Recognition)

El objteivo de sta aplicación es ayudar a las personas con deficiencias visuales o con dificultades en el lenguaje, tanto en español como en otros idiomas. Además tendrá varias funcionalidades incorporadas:

Será capaz de identificar el texto en una imagen, pudiendo cogerla de la galería de imágenes o tomando una foto.
Permitirá traducir a diversos idiomas el texto que haya reconocido, leyéndolo para ayudar al usuario.
Permitirá copiar el texto al portapapeles para poder ser usado en cualquier otra aplicación.

Para el diseño de la aplicación se solicitará a los alumnos el uso de alguna inteligencia artificial que nos permita crear las imágenes y logotipos que utilizaremos en la aplicación

Diseño App

La pantalla principal Screen1 se ha creado con diferentes zonas, las cuales se explicarán a continuación. Hay que tener en cuenta que en la pantalla es donde incluiremos la imagen que queramos para el fondo de la aplicación. Es posible que sea necesario modificarla para que se vea solo en el centro de la pantalla incluyendo para en blanco arriba y abajo. La aplicación contiene las siguientes zonas:

Titulo / cabecera: con el título y botones para información sobre la aplicación

Área de selección de la imagen: permite seleccionar una imagen o hacer una foto

Idiomas de la imagen (entrada) e idioma de salida (texto que se muestra y se lee

Área con el texto de salida

Botón para copiar texto

Selector de la velocidad de lectura del texto en el idioma correspondiente

Funciones adicionales: Traducir, Silenciar y Volver a leer

Titulo / cabecera

Se ha creado con una disposición horizontal, con el color de fondo que nos guste y en la que se han incorporado los siguientes elementos

Botón sin texto y con las siguientes características:
- Nombre: creador
- Imagen: la del icono de la aplicación.
- Ancho: 30 pixeles
- Alto: ajustar al contenedor
Etiqueta con las siguientes características:

- Negrita y cursiva
- Tamaño de letra: 25.
- Texto: Nombre de la aplicación
- Ancho: ajustar al contenedor

Botón sin texto y con las siguientes características:
- Nombre: informacion
- Imagen: icono de información "i".
- Ancho: 28 pixeles
- Alto: 28 pixeles

Área de selección de la imagen

Se ha creado con una disposición horizontal, con el color de fondo que nos guste y en la que se han incorporado los siguientes elementos

Botón para activar la cámara con las siguientes características:
- Nombre: BTN_camara
- Texto: Hacer foto.
- Alto: automático
- Ancho: 40%
Imagen para añadir una lupa:

- Imagen: una lupa
- Alto: 30 pixeles
- Ancho: 30 pixeles

Selector de Imagen para abrir la galería y poder seleccionar la foto.
- Nombre: SelectorDeImagen1
- Alto: automático
- Ancho: 40%
Imagen para añadir una lupa:

- Imagen: galería de fotos
- Alto: 30 pixeles
- Ancho: 30 pixeles.

Idiomas de la imagen (entrada) e idioma de salida (texto que se muestra y se lee)

Se ha creado con dos disposiciones horizontales, uno con dos etiquetas "Idioma Foto" e "Idioma Salida" que ocupen el 50% de ancho cada uno y otra disposición horizontal con dos desplegables que ocupen el 50% de ancho y además las siguientes características

Desplegable para el idioma de la foto. Le daremos el nombre "IdiomaEntrada"
Desplegable para el idioma que se presentará en la aplicación. Le daremos el nombre "IdiomaSalida"

Área con el texto de salida

Se incluirá una disposición vertical desplazable (para que se pueda hacer scroll en caso de que el texto no quepa completamente en la pantalla). El ancho y el alto definido como "ajustar al contenedor"

En ella se incluirá una etiqueta a que le pondremos de nombre "texto" y con alto y ancho definico como "ajustar al contenedor"

Botón para copiar texto

Dado que la idea es incluir un botón a la derecha que sirva para copiar el texto al portapales, será necesario incorporar una disposición horizontal con dos elementos:

Etiqueta con la siguientes características.

Texto: en blanco.

Ancho: Ajustar al contenedor (para que se extienda lo máximo posible)

Botón para copiar al portapapeles.

Texto: en blanco.

Imagen: "copiar al portapapeles"

Ancho: 30 pixeles.

Alto: 30 pixeles.

Selector de la velocidad de lectura del texto en el idioma correspondiente

El deslizador nos permite modificar la velocidad con la que la App lee el texto traducido.

Etiqueta con la siguientes características.

Texto: "Velocidad de pronunciación".

Ancho: Ajustar al contenedor

Deslizador (podéis elegir los colores que queráis)

Valor mínimo: 1.

Valor máximo: 200

Número de pasos (steps): 100.

Ancho: Ajustar al contenedor

Funciones adicionales: Traducir, Silenciar y Volver a leer

Cómo funciones adicionales queremos incluir botones para:

Traducir: volver a traducir el texto que hemos recuperado de la imagen cambiando previamente el idioma de salida si fuera necesario
Silenciar: que deje de hablar cuando queramos
Volver a leer: para que vuelva a leer el texto si lo necesitamos

Deberemos dar un nombre significativo a cada botón y organizarlos en la pantalla como consideremos.

En el ejemplo se ha puesto en una disposición horizontal el botón "Traducir" y el de "Silenciar" y en otra línea el botón de "Volver a leer"

Programacion app

Para la programación de la App vamos a necesitar:

Crear las variables que vamos a utilizar en el proceso.
Controlar lo que hace la aplicación cuando arranque.
Controlar lo que hace cada uno de los botones de la cabecera
Controlar lo que hacen los botones de la selección de imagen
Controlar lo que hace el botón copiar
Controlar la velocidad de pronunciación
Controlar lo que hacen los botones de las funcionalidades adicionales

Adicionalmente vamos a tener que controlar la extensión OCR que hemos incluido en nuestro en la aplicación

Variables

Para la programación de la App vamos a necesitar crear diversas variables:

idiomaOCR: un diccionario vacío (para guardar la relación entre el listado de idiomas de entrada y el código que hay que enviar en la llamada a la extensión OCR
idiomaSalida: un diccionario vacío (para guardar la relación entre el listado de idiomas de salida y el código que hay que enviar en la llamada al traductor
idiomaEntrada: crearemos una lista con el listado de idiomas con los que trabajaremos en la aplicación: Español, Inglés, Francés, Portugués, Alemán, Italiano, Griego, Árabe, Japonés, Chino.
lista: crearemos una lista vacía.
codigoIdiomaSalida: crearemos una lista con el listado de códigos de idioma que utiliza el traductor. Los incluiremos en el mismo orden en el que los hemos incluido en la variable idomaEntrada. Valores: es, en, fr, pt, de, it, el, ar, ja, zh.
diccionario: crearemos un diccionario vacío.
idiomaOriginal: para almacenar el código del idioma que estaba seleccionado en el momento de llamar a la extensión para reconocer los caracteres en la imagen. La ceraremos con el valor inicial "es"
mensaje: variable auxiliar para construir el texto objtenido y que debe ponerse en pantalla. La crearemos con valor en blanco.
pickedImagePath: para almacenar la ruta interna donde se almacena la foto realizada antes de enviarla a la extensión OCR. La crearemos con valor en blanco.
textoIntermedio. para construir el mensaje a partir de la respuesta de la extensión OCR. La crearemos con valor en blanco.
codigoIdiomaEntrada: crearemos una lista con el listado de códigos de idioma que utiliza la extensión OCR. Los incluiremos en el mismo orden en el que los hemos incluido en la variable idomaEntrada. Valores: spa, eng, fre, por, ger, ita, gre, ara, jpn, chs.

Al Iniciar aplicación

Cargamos los desplegables con los idiomas que tenemos en la variable idiomaEntrada
Cargamos el diccionario idiomaOCR que relaciona los nombres de los idiomas de entrada con los códigos de idioma para la extensión OCR
Cargamos el diccionario idiomaSalida que relaciona los nombres de los idiomas de salida con los códigos de idioma para el traductor.
Ponemos el valor por defecto "spa" para el idioma de la extensión OCR
Abrimos la ventana de presentación de nuestra aplicación

Cabecera

Botón creador: mostramos un mensaje de diálogo con la información de los creadores, con el título "Autores" y un botón denominado con texto "Cerrar"
Botón información: abre la pantalla inicial de presentación por si queremos volver a verla.

Selección de imagen

Botón BTN_Camara: "limpia" la etiqueta texto de la pantalla, muestra un mensaje de aviso indicando que la foto no puede "pesar" más de un mega y abrimos la cámara.
Qúe hace la cámara después de tomar la foto: se guarda la ruta de la imagen tomada en la variable pickedImagePath y llamamos a la extensión OCR (UploadImage) con dicha ruta.
Selector de imagen: Después de la selección nos guardamos la selección en la variable pickedImagePath y llamamos a la extensión OCR (UploadImage) con dicha ruta.

Selector de velocidad de pronunciación. Botones "Copiar" y funciones adicionales

Deslizador: cuando cambie la posición modificamos la velocidad de pronunciación del texto a voz
Botón copiar lama a la extensión TaifunClipboard para guardar el texto en el portapapeles
Botón traducir: llama al traductor indicando el idioma del texto (idiomaOriginal), el idioma al que traducir (el código correspondiente al idioma seleccionado en el selector de idiomaSalida) y el texto a traducir
Botón silenciar: detiene el texto a voz.
Botón leer: llama a "hablar" del texto a voz con el texto que debe leer.

OCR

Es la parte más compleja de la aplicación pues es donde debemos controlar la respuesta de la extensión OCR .

Si la variable de respuesta success no es verdadera daremos un mensaje de error de conexión
Si la longitud del contenido de la respuesta es menor de 385 daremos otro mensaje de error de que no ha sido capaz de reconocer el texto.
Si todo va bien tendremos que dar formato al mensaje (el texto llega a partir de la posición 385 del mensaje). Para ello utilizaremos un procedimiento que denominaremos "formatearTexto",
- - - En este proceso primero eliminamos las 13 primeras posiciones y las 365 ultimas (en medio es donde viene el texto que ha reconocido la extensión.
    - Debido a que la extensión utiliza caracteres especiales para salto de línea, "\r\n", es necesario hacer transformaciones previas al mensaje antes de utilizarlo en nuestro programa. Son transformaciones no muy "finas" pero efectivas.
      - cambiamos la cadena "rn" por un una cadena que no vaya a venir en el texto, por ejemplo "zzxxzz"
        eliminamos caracteres especiales del mensaje mediante una lista y un diccionario auxiliar:

"{",""\n"\",""\n"“",""\n"”",""\n":",","\n

- - - - eliminamos la cadena "rn" que aparece después del cambio (lo sustituimos por una cadena vacía)
        volvemos a poner las cadenas iniciales del texto que tenían "rn" (deshaciendo el cambio inicial, es decir, sustituir la cadena "zzxxzz" por "rn" original.
Si el idioma de entrada y de salida no es el mismo habrá que llamar al traductor pero si son iguales habrá que poner el mensaje en el texto de la pantalla y leerlo.

Page updated

Report abuse