CAIO ALEXANDRE TROTI CAETANO LOOLABAE: APLICATIVO DE LEITURA DE TEXTO E REPRODUÇÃO DE EFEITOS SONOROS POR INTELIGÊNCIA ARTIFICIAL Sorocaba 2024 CAIO ALEXANDRE TROTI CAETANO LOOLABAE: APLICATIVO DE LEITURA DE TEXTO E REPRODUÇÃO DE EFEITOS SONOROS POR INTELIGÊNCIA ARTIFICIAL Trabalho de Conclusão de Curso apresentado ao Instituto de Ciência e Tecnologia de Sorocaba, Universidade Estadual Paulista (UNESP), como parte dos requisitos para obtenção do grau de Bacharel em Engenharia de Controle e Automação. Orientador: Prof. Dr. Márcio Alexandre Marques Sorocaba 2024 C128l Caetano, Caio Alexandre Troti Loolabae : aplicativo de leitura de texto e reprodução de efeitos sonoros por inteligência artificial / Caio Alexandre Troti Caetano. -- Sorocaba, 2024 71 p. Trabalho de conclusão de curso (Bacharelado - Engenharia de Controle e Automação) - Universidade Estadual Paulista (UNESP), Instituto de Ciência e Tecnologia, Sorocaba Orientador: Márcio Alexandre Marques 1. Aplicativos móveis. 2. Reconhecimento de padrões óticos. 3. Processamento de linguagem natural (Computação). I. Título. Sistema de geração automática de fichas catalográficas da Unesp. Biblioteca da Universidade Estadual Paulista (UNESP), Instituto de Ciência e Tecnologia, Sorocaba. Dados fornecidos pelo autor(a). Essa ficha não pode ser modificada. LOOLABAE: APLICATIVO DE LEITURA DE TEXTO E REPRODUÇÃO DE EFEITOS SONOROS POR INTELIGÊNCIA ARTIFICIAL CAIO ALEXANDRE TROTI CAETANO ESTE TRABALHO DE GRADUAÇÃO FOI JULGADO ADEQUADO COMO PARTE DO REQUISITO PARA A OBTENÇÃO DO GRAU DE BACHAREL EM ENGENHARIA DE CONTROLE E AUTOMAÇÂO Prof. Dr. Everson Martins Coordenador BANCA EXAMINADORA: Prof. Dr. MÁRCIO ALEXANDRE MARQUES Orientador – UNESP – Campus Sorocaba Prof. Dr. EVERSON MARTINS UNESP – Campus Sorocaba Prof. Dr. IVANDO SEVERINO DINIZ UNESP – Campus Sorocaba Sorocaba 2024 Dedico esta monografia ao último acontecimento do universo, uma estrela Anã Preta que entrará em supernova daqui a 1032000 anos. AGRADECIMENTOS Aos meus pais, por todo o suporte e incentivo a perseguir meus sonhos e realizar esta graduação. Ao cursinho pré-vestibular gratuito GeraBixo pela oportunidade de aprimorar meus estudos e a isenção para o vestibular da VUNESP. Ao Instituto de Ciências e Tecnologia UNESP Sorocaba por me proporcionar esta graduação e a oportunidade de aprimorar minha curiosidade sobre o universo. Agradeço aos professores do Curso de Engenharia de Controle e Automação que contribuíram para minha formação profissional. Aos demais servidores e funcionários da UNESP Sorocaba pela contribuição para a minha formação. Ao meu amigo Robson por ser meu companheiro na jornada de luta que é a graduação em engenharia, e tornar este processo mais divertido e agradável. Ao Professor Doutor Márcio por confiar em mim e ser o meu orientador neste Trabalho de Conclusão de Curso. A minha esposa Jessie pelo apoio emocional durante a realização deste trabalho, e pela sugestão do tema. Ao meu amigo Caio Surian pelo suporte durante este trabalho. Ao Sebo Livraria Econômica pela doação dos livros infantis usados neste trabalho, sem eles a dificuldade e custo em adquirir estes materiais seria muito maior. As diretoras de dança Fláviane e Andressa por disponibilizarem tempo e compreensão para a realização de minhas pesquisas, bem como aos pais das crianças entrevistadas. CAETANO, C. A. T. Loolabae: aplicativo de leitura de texto e reprodução de efeitos sonoros por inteligência artificial. 2024. 71 p. Trabalho de Graduação (Bacharelado em Engenharia de Controle e Automação) - Instituto de Ciência e Tecnologia de Sorocaba, Universidade Estadual Paulista, Sorocaba, 2024. RESUMO As inovações na indústria de tecnologia trouxeram maior acessibilidade a tecnologias de Inteligência Artificial (IA) como Large Language Models (LLM) e o GPT-4. Nesse sentido, o presente trabalho tem como objetivo utilizar estas tecnologias para auxiliar e incentivar crianças à leitura por meio de um aplicativo web. A aplicação web utilizou frameworks modernos em linguagem TypeScript, conversão de imagem para texto e uso de inteligência artificial de texto generativa. O aplicativo é capaz de capturar uma foto de uma página de um livro infantil por meio da câmera de um celular (smartphone), e na sequência, realizar a sua leitura com voz sintetizada, além de reproduzir efeitos sonoros previamente especificados. Esses efeitos sonoros são chamados de contextos e são reproduzidos de acordo com a sua presença no trecho do texto lido. O aplicativo foi implementado com um Front-end utilizando React e Material UI (User Interface), um Back-end em Node.JS, a conversão de imagem para texto utilizando as APIs do OCRSpace e o tratamento de texto pelo GPT-4. Três testes independentes foram realizados: um teste geral utilizando a ferramenta de forma completa, analisando sua performance com o Coeficiente de Dice; um teste técnico com imagens de diferentes qualidades, quantificando o acerto do aplicativo pelo mesmo coeficiente; e por fim, um teste de experiência de uso com crianças, no qual, elas utilizaram o aplicativo e responderam a um questionário. A satisfação das crianças quanto ao uso utilizou a métrica Net Promoter Score (NPS). O teste geral obteve um Coeficiente de Dice médio de 0,97. O teste técnico apresentou o Coeficiente de Dice médio de 0,92 de similaridade em casos ideais, e 88,57% em média de acerto de contextos. O teste de experiência foi realizado com 22 crianças na faixa etária de 7 a 12 anos, no qual dentre 7 perguntas do questionário, 6 tiveram respostas positivas acima de 50%, a satisfação média foi de 87%, e o NPS foi de 41. O aplicativo demonstrou ser funcional, operando com o mínimo de custo e com bons resultados técnicos, além das opiniões das crianças que o utilizaram serem favoráveis. Palavras-chave: aplicação web; OCR; GPT-4; TypeScript; sintetização de voz; efeitos sonoros. CAETANO, C. A. T. Loolabae: text reading and sound effects reproduction application by artificial intelligence. 2024. 71 p. Undergraduate final work (Bachelor’s degree in Control and Automation Engineering) – Institute of Science and Technology of Sorocaba, São Paulo State University, Sorocaba, 2024. ABSTRACT Innovations in the technology industry have brought greater accessibility to artificial intelligence (AI) technologies such as Large Language Models (LLM) and GPT-4. In this sense, the present work aims to use these technologies to help and encourage children to read using a web application. The web application used modern frameworks in TypeScript language, image to text conversion and generative text artificial intelligence. The application can capture a photo of a page from a children's book using a cell phone camera (smartphone), and then reading it with a synthesized voice, in addition to reproducing previously specified sound effects. These sound effects are called contexts and are reproduced according to their presence in the portion of the text read. The application was implemented with a Front-end using React and Material UI (User Interface), a Back-end in Node.JS, image-to-text conversion using the OCRSpace APIs and text processing using GPT-4. Three independent tests were carried out: a general test using the tool completely, analyzing its performance with the Dice Coefficient; a technical test with images of different qualities, quantifying the application's success using the same coefficient; and finally, a user experience test with children, in which they used the application and answered a form. Children's satisfaction was measured with the Net Promoter Score (NPS) metric. The general test obtained an average Dice Coefficient of 0.97. The technical test presented an average Dice Coefficient of 0.92 similarity in ideal cases, and 88.57% average context accuracy. The experience test had 22 children aged 7 to 12 years, in which among 7 questions in the questionnaire, 6 had positive responses above 50%, the average satisfaction was 87%, and the NPS was 41. The application proved to be functional, operating with minimal cost and with good technical results, in addition to the favorable opinions of the children who used it. Keywords: web application; OCR; GPT-4; TypeScript; voice synthesis; sound effects. LISTA DE FIGURAS Figura 1 - Área principal de trabalho do VS Code. .................................................................. 17 Figura 2 - Exemplo de UI com o Material Design 3. ............................................................... 22 Figura 3 - Ícone e logotipo da aplicação................................................................................... 30 Figura 4 - Fluxograma de execução Front-end. ........................................................................ 31 Figura 5 - Fluxograma de execução Back-end. ........................................................................ 32 Figura 6 - Estrutura de diretório do projeto principal e do Front-end. ..................................... 34 Figura 7 - Arquivo de definição de Contextos com exemplos. ................................................ 34 Figura 8 - Páginas Home, Configurações e Tema do aplicativo. ............................................. 36 Figura 9 - Página de Seleção de Tema, com os temas escuro e claro. ..................................... 37 Figura 10 - Páginas de Idioma e Seleção de Voz do aplicativo. .............................................. 37 Figura 11 - Telas de (a) Carregamento, (b) Erro e (c) durante a execução da aplicação. ........ 42 Figura 12 - Casos de teste do livro Piraiaguara: a) ideal, b) perspectiva, c) com sombra e d) com reflexo. .............................................................................................................................. 46 Figura 13 - Página do livro A Mula Sem Cabeça, nos cenários em perspectiva e reflexo. ...... 50 Figura 14 - Distribuição do Tempo de Execução médio do Back-end. .................................... 51 Figura 15 - Foto do livro Opostos no Mar. ............................................................................... 53 Figura 16 - Tempo de Execução médio em segundos por Número de Caracteres. .................. 55 Figura 17 - Distribuição de idade das crianças participantes dos testes. .................................. 57 Figura 18 - Respostas das Questões de 4 a 10 em percentual. ................................................. 58 Figura 19 - Número de alunos em relação a Nota de Satisfação. ............................................. 59 LISTA DE QUADROS Quadro 1 - Resposta de erro da API. ........................................................................................ 38 Quadro 2 - Exemplo do retorno em JSON do GPT-4 na análise de contextos. ....................... 41 Quadro 3 - Exemplo do retorno do Back-end em formato JSON. ........................................... 41 Quadro 4 - Pseudocódigo do algoritmo de compressão de imagem do browser-imagem- compression. ............................................................................................................................. 44 Quadro 5 - Texto original (à esquerda), e texto corrigido pelo GPT-4 (à direita). ................... 54 LISTA DE TABELAS Tabela 1 - Resultados do teste geral do livro Ginger The Giraffe. ........................................... 48 Tabela 2 - Tempo de Execução do Back-end em segundos. .................................................... 49 Tabela 3 - Coeficiente de Dice médio para os diferentes cenários. .......................................... 51 Tabela 4 - Coeficiente de Dice médio por livro. ...................................................................... 52 Tabela 5 - Relação de caracteres de um texto e o tempo de execução médio por livro em segundos. .................................................................................................................................. 54 Tabela 6 - Percentual de Acerto por Caso. ............................................................................... 56 Tabela 7 - Percentual de Acerto por Livro. .............................................................................. 56 LISTA DE ABREVIATURAS E SIGLAS AAC Advanced Audio Coding AMD Asynchronous Module Definition API Application Programing Interface APP Application ASCII American Standard Code for Information Interchange CPU Central Processing Unit CSS Cascading Style Sheets CSV Comma-Separated Values DOM Document Object Model ECMA European Computer Manufacturers Association ESM ECMA Script Module GPT Generative Pre-trained Transformer HDMI High-Definition Multimedia Interface HTML HyperText Markup Language HTTP Hypertext Transfer Protocol i18n Internacionalization IA Inteligência Artificial IaaS Infrastructure as a Service IDE Integrated Development Environment JS JavaScript JSON JavaScript Object Notation JSX JavaScript XML l10n Localization LLM Large Language Model MP3 MPEG-1/2 Audio Layer 3 NIST National Institute of Standards and Technology NPL Natural Language Processing NPM Node Package Manager NPS Net Promoter Score OCR Optical Character Recognition OGG Ogging (jargão utilizado para nomear o formato de arquivo de áudio) PaaS Platform as a Service PNAD Contínua Pesquisa Nacional por Amostra de Domicílios Contínua PWA Progressive Web App RAM Random Access Memory RFC Request For Change SaaS Software as a Service SASS Syntactically Awesome Stylesheets SCSS Sassy CSS SDK Software Development Kit TA Tecnologia Assistiva TS TypeScript UI User Interface UMD Universal Module Definition VS Code Visual Studio Code W3C World Wide Web Consortium WAV Waveform Audio Format XML Extensible Markup Language SUMÁRIO 1 INTRODUÇÃO ........................................................................................................ 14 1.1 Objetivos.................................................................................................................... 15 2 REVISÃO BIBLIOGRÁFICA ................................................................................ 17 2.1 Visual Studio Code ................................................................................................... 17 2.2 “Transpilação”.......................................................................................................... 17 2.3 JavaScript.................................................................................................................. 18 2.4 TypeScript ................................................................................................................. 19 2.5 JSON .......................................................................................................................... 19 2.6 React .......................................................................................................................... 20 2.7 CSS ............................................................................................................................. 20 2.8 SASS e SCSS ............................................................................................................. 21 2.9 Material UI ................................................................................................................ 21 2.10 Tailwind ..................................................................................................................... 22 2.11 PWA ........................................................................................................................... 23 2.12 WebSpeech API ........................................................................................................ 23 2.13 Howler ....................................................................................................................... 23 2.14 Localização e Internacionalização .......................................................................... 24 2.15 Bundlers e Vite.......................................................................................................... 24 2.16 Express.js................................................................................................................... 25 2.17 Google Cloud............................................................................................................. 25 2.18 Coeficiente de Sørensen-Dice .................................................................................. 26 2.19 Net Promoter Score .................................................................................................. 27 2.20 OCR Space ................................................................................................................ 27 2.21 Large Language Models .......................................................................................... 28 3 MATERIAIS E MÉTODOS .................................................................................... 30 3.1 Fluxograma do Aplicativo ....................................................................................... 30 3.2 Materiais.................................................................................................................... 32 3.2.1 Back-end ..................................................................................................................... 32 3.2.2 Front-end .................................................................................................................... 33 3.3 Metodologia ............................................................................................................... 33 3.3.1 Contextos e Core ........................................................................................................ 34 3.3.2 Front-end .................................................................................................................... 35 3.3.3 API.............................................................................................................................. 38 3.3.4 Back-end ..................................................................................................................... 39 3.3.5 Execução .................................................................................................................... 41 3.3.6 Teste Geral ................................................................................................................. 42 3.3.7 Teste Técnico ............................................................................................................. 43 3.3.8 Experiência do Usuário .............................................................................................. 46 4 RESULTADOS ......................................................................................................... 48 5 CONCLUSÃO .......................................................................................................... 60 5.1 Trabalhos Futuros .................................................................................................... 60 REFERÊNCIAS ..................................................................................................................... 62 ANEXO A – Questionário 1 de Avaliação do aplicativo Loolabae .................................... 68 ANEXO B – Questionário 2 de Avaliação do aplicativo Loolabae .................................... 70 14 1 INTRODUÇÃO Em 1984 foi distribuído ao público o primeiro telefone celular Motorola DynaTAC 8000X, desenvolvido pela Motorola, pesando 790 gramas, com a capacidade de 30 minutos de conversa e tempo de carga da bateria de cerca de 10 horas (Mobile Phone Museum, 2024). A partir de então, os celulares passaram por múltiplas evoluções até a sua iteração mais recente, quando em 2007 a Apple anunciou o primeiro iPhone. Com capacidade revolucionária, tela responsiva ao toque chamada “multi-touch”, hoje conhecido como touch-screen; capaz de acessar a internet e suportar o uso de múltiplos aplicativos, este formato de telefones celulares ficou conhecido como smartphones (Honan, 2007). A praticidade e funcionalidade dos smartphones conquistaram o cotidiano da população, com 6,165 bilhões de usuários no mundo em 2022 (Taylor, 2023), e segundo a Pesquisa Nacional por Amostra de Domicílios Contínua (PNAD Contínua), 89,5% dos domicílios brasileiros detinham smartphones em 2022 (Brasil, 2022). Com a popularidade dos aparelhos, a demanda por inovação em novos aplicativos, sejam nativos para smartphones ou para a internet, cresce a passos largos saltando de 140 bilhões de downloads em 2016 para 255 bilhões em 2022 (Ceci, 2024), introduzindo a oportunidade do uso destes aplicativos em diversos setores, incluindo para a pedagogia. Landis et al. em seu artigo trás o aplicativo de navegador Meet the Metaorganism, com a proposta de aprimorar o aprendizado do conceito de metaorganismo, no qual todo organismo é analisado incluindo os microrganismos que o habitam. Este aplicativo apresenta seu conteúdo de forma visual e interativa auxiliando o processo de construção mental do estudante de biologia sobre o tópico (Landis et al., 2023). Griffith et al. em sua revisão sobre o uso de aplicativos como ferramenta de aprendizagem, focado em crianças abaixo dos 6 anos de idade, conclui que existe evidências emergentes onde aplicativos interativos são úteis no processo inicial de escolarização de crianças, com resultados melhores no currículo de matemática (Griffith et al., 2020). Em 2022 a aplicação denominada ChatGPT se tornou sensação na internet trazendo à moda o assunto de ferramentas com funcionalidade de IA (Inteligência Artificial) e processamento de linguagem natural. Tal aplicação é capaz de entender, compreender e responder à prompts utilizando linguagem semelhante à humana, fazendo resumos, traduções ou gerando explicações de um tópico (Teubner et al., 2023). A partir de então, a indústria contemplou o lançamento de múltiplas Large Language Model (LLM), como o Bard (Pichai, 15 2023) e postumamente, o Gemini criado pela Google (Pichai; Hassabis, 2023) e o GPT-4 da Open AI em 2023 (OpenAI, 2023). Estes avanços proporcionam a criação de aplicações de conversação, chamados de robôs de conversa ou chatbots, que podem ser utilizados para fins educativos. Segundo Long Mai: Uma aplicação particularmente promissora da NPL (Natural Language Processing) neste domínio é a integração de chatbots falados de domínio aberto como parceiros falantes para aquisição de um segundo idioma (Mai; Carson-Berndsen, 2023, tradução nossa). Entretanto, segundo o estudo de Bernabei et al. sobre o uso de LLM por estudantes de engenharia, seus resultados apontam que embora os estudantes a princípio consideram o ChatGPT confiável, aumentando sua performance e velocidade em tarefas repetitivas, a IA não apresenta resultados de alta qualidade à nível acadêmico, necessitando ajustes finos e manuais pelos estudantes (Bernabei et al., 2023). A área de Optical Character Recognition (OCR), uma tecnologia que permite que imagens ou documentos transformados em texto editável (Baird; Tombre, 2014), também obteve melhorias com os avanços de IA, como exemplo, o produto Document AI lançado pela Google em 2020 que utiliza IA generativa para aprimorar os resultados e suporte a mais de 200 idiomas (Google, 2024b). Portanto, dado o estado atual de tecnologias como LLM e OCR, a proposta deste trabalho é unir a praticidade de aplicativos para celulares com o poder e funcionalidade de LLM para auxiliar a alfabetização e aprendizagem de crianças. O projeto consiste em um aplicativo o qual a criança realiza a captura de uma foto da página de um livro, seja um livro convencional ou infantil contendo múltiplas imagens, e o aplicativo faz a leitura em voz natural do texto, com a adição de efeitos sonoros, caso haja contexto para tal. O projeto contém um Front-end e Back- end separados, no qual uma imagem é analisada por OCR, corrigida e seus devidos contextos analisados pela LLM. 1.1 Objetivos Desenvolver um aplicativo web para dispositivos móveis capaz de capturar uma imagem de uma página de livro com a câmera do smartphone, efetuar sua leitura com voz sintetizada e reproduzir efeitos sonoros previamente configurados e de acordo com contextos existentes no texto analisado. O aplicativo utilizará tecnologias de conversão de imagem para 16 texto e inteligência artificial de texto generativa, sendo o seu propósito, auxiliar e incentivar crianças à leitura. Para validar o aplicativo, três testes independentes foram realizados: um teste geral utilizando a ferramenta de forma completa analisando seu desempenho com o Coeficiente de Dice; um teste técnico com imagens de diferentes qualidades e quantificando o acerto do aplicativo pelo mesmo coeficiente, e por fim, um teste de experiência de uso com crianças, no qual, elas utilizaram o aplicativo e responderam a um questionário. 17 2 REVISÃO BIBLIOGRÁFICA 2.1 Visual Studio Code O Visual Studio Code (VS Code) é um ambiente de desenvolvimento integrado (IDE) altamente popular e amplamente utilizado na indústria de desenvolvimento de software. Desenvolvido pela Microsoft, o VS Code é uma ferramenta de código aberto que oferece uma plataforma flexível e eficaz para a criação, edição e depuração de código-fonte (Microsoft, 2023). A Figura 1 exibe a área de trabalho do VS Code, onde, na lateral esquerda aparece a navegação do diretório, com as pastas e arquivos presentes em um projeto. Na área parte inferior da figura encontra-se uma linha de comando e ao centro o editor de texto do arquivo em edição. Figura 1 - Área principal de trabalho do VS Code. Fonte: Autoria própria (2024). 2.2 “Transpilação” A compilação, no contexto da programação, é um processo de conversão do código- fonte escrito por um programador em um formato executável por um computador. Na primeira etapa, o código-fonte é analisado por um compilador, que verifica a sintaxe do código e realiza a análise léxica e sintática para identificar eventuais erros. Se o código-fonte estiver correto, a segunda etapa compreende a geração do código objeto ou executável, tipicamente em linguagem de máquina ou linguagem de montagem, dependendo do compilador e da arquitetura do sistema alvo (Abo et al., c2007). 18 Já a interpretação permite a execução direta do código-fonte por um interpretador, sem a necessidade de compilação prévia para código de máquina. Diferentemente da compilação, esse processo envolve a tradução e execução do código-fonte linha por linha em tempo de execução. O interpretador analisa o código-fonte, verifica a sintaxe e executa as instruções sequencialmente, o que resulta em uma execução mais flexível e com a capacidade de lidar com código de alto nível (Sebesta, c2012). Em linguagens interpretadas como JavaScript, é necessário um ambiente que possua um interpretador específico para a linguagem, e embora o desenvolvimento e a depuração sejam mais ágeis, o processo de interpretação pode ser mais lento do que a compilação e tornar o código vulnerável a erros e ataques de segurança se o interpretador não for adequadamente controlado (Sebesta, c2012). A “transpilação”, também conhecido como source-to-source, é um processo que envolve a tradução de código-fonte de uma linguagem para outra linguagem de nível semelhante ou inferior. Essa técnica é frequentemente utilizada para garantir a compatibilidade entre diferentes linguagens ou ambientes de desenvolvimento. Sua principal motivação é permitir que desenvolvedores escrevam código em uma linguagem mais expressiva e abstrata e traduzam esse código para outra linguagem que seja executável em um ambiente específico. Isso é particularmente comum em linguagens de script, como TypeScript, que é “transpilado” para JavaScript padrão com o intuito de garantir a compatibilidade com navegadores e ambientes de execução (Chougule, 2022). 2.3 JavaScript JavaScript é uma linguagem de programação de alto nível, dinâmica e versátil, fundamentalmente utilizada para criar interações dinâmicas em páginas web. Sua flexibilidade permite a criação de aplicações tanto no lado do cliente (Front-end) quanto no servidor (Back- end), com interpretadores como Node.js (DeGroat, 2019). Em 1992, a empresa Nombas trouxe a possibilidade do uso em páginas da web de sua linguagem de programação de scripts utilizada internamente pela companhia, chamada de ScriptEase e rebatizada para CEnvi. Brendan Eich, colaborador da Netscape, criou a linguagem LiveScript para o browser Netscape Navigator 2 em 1995. Por outro lado, para reforçar seu posicionamento no mercado de navegadores da web, a Microsoft lançou o JScript para o Internet Explorer 3 em 1996. Neste momento, havia três 19 diferentes implementações da linguagem e nenhum órgão regulador de sua sintaxe e funcionalidades. Em 1997 o European Computer Manufacturers Association (ECMA), formado por desenvolvedores da Microsoft, Borland, Netscape, entre outros, trouxe a primeira padronização da linguagem JavaScript 1.1, dando início a longa jornada de mudanças e evoluções que trariam a linguagem à sua forma atual (Zakas, 2009). Segundo Douglas Crockford: JavaScript é uma linguagem importante porque é a linguagem do navegador da web. A sua associação com o navegador a torna uma das linguagens de programação mais populares do mundo. Ao mesmo tempo, é uma das linguagens de programação mais negligenciadas do mundo. A API do navegador, o Document Object Model (DOM) é horrível e o JavaScript é injustamente responsabilizado. (Crockford, 2008, p. 2, tradução nossa). Considerando suas origens, sua importância e os problemas associados à padronização e suas APIs, surgem bibliotecas e frameworks como React.js, Angular.js e Vue.js, que contribuem para a evolução da linguagem e facilitam as interações entre o desenvolvedor e a aplicação. 2.4 TypeScript Lançado em 2012 após dois anos de desenvolvimento interno pela Microsoft, o TypeScript teve como arquiteto principal Anders Hejlsberg, também responsável pela linguagem C#. Um código JavaScript também é válido em TypeScript, operando como um superset de JavaScript (Baxter-Reynolds, 2012). TypeScript é uma linguagem de código aberto e sua principal vantagem reside na adição de um sistema de tipos estáticos, bem como inferência de tipagem, interfaces, genéricos, namespaces, entre outros; possibilitando a detecção de erros comuns ainda durante o desenvolvimento (Chandrakar, 2023). 2.5 JSON O JavaScript Object Notation (JSON) é um formato “leve” e simples de dados divulgado no Request For Change (RFC) The application/json Media Type for JavaScript Object Notation (JSON) (O Tipo de Mídia application/json para Notação de Objeto de Javascript, em tradução livre), por D. Crockford (2006). Este formato possibilita a serialização 20 e conversão de dados estruturados para o formato textual, derivado do primitivo objeto de JavaScript, podendo representar os tipos primitivos string, números, booleanos, vazio, objetos e vetores (Crockford, 2006). 2.6 React React é uma biblioteca de JavaScript de código aberto desenvolvida pelo Facebook e lançada em 2013. Baseada no conceito de “componentização”, permite a criação de componentes reutilizáveis que encapsulam elementos de interface e o seu comportamento, facilitando a construção de interfaces complexas de forma modular e escalável (Copes, 2019). Uma das características do React é o uso de um modelo de programação chamado "Virtual DOM". Ao invés de atualizar diretamente o Document Object Model (DOM) do navegador a cada alteração, a biblioteca trabalha com uma representação virtual do DOM, que identifica as diferenças entre o estado anterior e o atual, e atualiza apenas os elementos necessários no DOM real (Dawson, 2014; Copes, 2019). React também utiliza JSX (JavaScript XML), uma extensão da sintaxe JavaScript, que permite a mistura de JavaScript com marcação HTML, unificando o elemento de interface e sua lógica em um único arquivo (Copes, 2019). 2.7 CSS CSS ou Cascading Style Sheets, é uma linguagem de estilo utilizada para controlar a apresentação e o layout de documentos HTML ou XML. Publicado pelo World Wide Web Consortium (W3C) em 1995, o CSS oferece uma maneira de separar o conteúdo estrutural de um documento da sua representação visual. Essa separação permite que os desenvolvedores definam regras de estilo, como cores, fontes, espaçamentos e disposição de elementos, criando interfaces de usuário atraentes e consistentes em páginas da web (Meyer, 2006). Para a solução de regras de estilo conflitantes em um elemento, CSS utiliza o conceito de cascata (cascading), onde as regras são computadas em ordem, e as regras novas conflitantes sobrescrevem as antigas, permitindo que elementos da interface sejam recustomizados durante a navegação (Meyer, 2006). 21 2.8 SASS e SCSS SASS (Syntactically Awesome Stylesheets) é uma linguagem de extensão para CSS que oferece recursos adicionais e melhorias na escrita de estilos para páginas da web. Uma de suas principais vantagens é o uso de variáveis, que possibilitam a definição de valores que podem ser reutilizados em todo o código, facilitando a manutenção e a atualização de estilos. Além disso, os mixins permitem a criação de blocos de estilos reutilizáveis, tornando o código mais modular e reduzindo repetições. O aninhamento de regras do SASS oferece uma maneira mais clara e organizada de representar a estrutura do documento, simplificando estilos complexos (Sass, 2024). SASS possui duas sintaxes principais: a indentada (SASS) e a baseada em SCSS (Sassy CSS), que se assemelha ao CSS convencional com a adição das funcionalidades do SASS. Ambas as sintaxes são “transpiladas” para CSS padrão, garantindo a compatibilidade com navegadores e ambientes que suportam CSS (Sass, 2024). 2.9 Material UI Uma interface de usuário (User Interface, UI) se refere ao ponto de interação entre humanos e máquinas. No contexto de aplicações web, o termo é usado para a interface que o usuário manipula em monitores de computadores, desktop ou telas touch-screen em celulares (Souza, 2020). Em julho de 2014, a Google anunciou em sua conferência anual de desenvolvedores Google I/O, o guia de design chamado Material Design com a proposta de melhorar a consistência da UI, legibilidade e melhor uso do espaço da tela entre os aplicativos para dispositivos Android, tablets e desktops. O guia contém diretrizes de espaçamento, uso de cores, fontes, animações, e o conceito de UI que se assemelham à papéis sobrepostos. O Material Design se tornaria o padrão da interface dos aplicativos da Google após 2014, como Gmail, Calendar, entre outros (Spradlin, 2014; Brian, 2014). A Figura 2 exibe um exemplo de interface utilizando o Material Design 3. Ela contém uma caixa de pesquisa no cabeçalho, um exemplo de card com imagem e botões de ação. Logo abaixo, um campo slider e botões switch, o botão Call to Action flutuante no canto inferior esquerdo e uma aba de navegação inferior com três opções de navegação. 22 Figura 2 - Exemplo de UI com o Material Design 3. Fonte: Material [...] (2024). Material UI é uma biblioteca popular de componentes de interface de usuário (UI) para React. Baseada no conceito de Material Design, foi desenvolvida para facilitar a criação de interfaces atraentes e responsivas, oferecendo uma extensa coleção de componentes prontos para o uso, como botões, barras de navegação, cards e campos de texto (Sirotka, 2022). 2.10 Tailwind Tailwind CSS é uma estrutura de design de código aberto que segue a abordagem de Atomic CSS, no qual as classes de estilo servem apenas a um propósito e seu nome remete à função visual que ela executa. Por exemplo, uma classe nomeada background-red, aplica apenas a cor de fundo vermelha ao elemento. Tailwind não fornece componentes, mas sim a definição de inúmeras classes prontas para o uso, que combinado com a funcionalidade de componentes do React, promove a rápida criação de uma biblioteca própria e particular de componentes (De Roy, 2022). 23 2.11 PWA Aplicativos nativos são programas desenvolvidos e compilados especificamente para uma plataforma alvo, utilizando um Software Development Kit (SDK) que são próprios da plataforma, como por exemplo, o Android Studio, utilizado para dispositivos Android. Embora não se enquadrem no conceito de multiplataforma, aplicativos nativos proporcionam maior responsividade e a capacidade de interação com funcionalidades nativas do ambiente, como notificações push e acesso aos arquivos em armazenamento (Gillis, 2022; Android Studio, 2024). Para aprimorar o mercado de aplicativos, em 2015 o desenvolvedor Alex Russel em seu artigo Progressive Web Apps: Escaping Tabs Without Losing Our Soul (2015) (Aplicativos da Web Progressivos: Escapando Tabs Sem Perder Nossa Alma, em tradução livre) trouxe a proposta no qual aplicações web seriam capazes de operar tanto no ambiente do browser, quanto distribuídas pela Google Play e App Store e instaladas como um aplicativo nativo. Com a adoção da filosofia mobile-first da Google em 2016, os Progressive Web Apps (PWA) se tornaram parte integral dos aplicativos distribuídos atualmente (ScandiPWA, 2019). 2.12 WebSpeech API A Web Speech API desenvolvida em JavaScript e presente no ambiente de navegadores, permite a integração de funcionalidades de reconhecimento de fala e síntese de voz em aplicativos da web. Esta API isenta o desenvolvedor dos detalhes técnicos de cada dispositivo e possibilita funcionalidades como o comando de voz ou a acessibilidade de um aplicativo (Yaniv, 2023). 2.13 Howler Howler.js é uma biblioteca JavaScript de áudio que simplifica a reprodução e manipulação de áudio em aplicativos da web utilizando a WebAudio API. Essa biblioteca fornece uma API amigável e consistente entre browsers, com suporte a múltiplos formatos como MP3, AAC, WAV ou OGG (Higgins, 2020). 24 2.14 Localização e Internacionalização Segundo a definição da W3C, Localização se refere à adaptação de uma aplicação ao idioma e cultura de um usuário. O termo advindo do inglês localization, também é conhecido como l10n (onde 10 é o número de letras entre a letra L e a letra N). Esta adaptação engloba formatos de data e hora, números, moeda, símbolos e cores (Ishida et al., 2020). Ainda segundo a W3C, Internacionalização se trata de um termo mais geral sobre o processo de permitir a fácil localização de uma aplicação, em um processo mais amplo de projetar esta aplicação tendo em vista a funcionalidade de localização para diferentes públicos. Advindo do inglês internacionalization ou i18n (tal qual 18 são os números de letras entre a letra I e N) (ISHIDA et al., 2020). Devido a sua importância, o objeto intl é uma funcionalidade integrante da API dos navegadores, contendo funções de internacionalização. A biblioteca format.js amplifica estas funcionalidades e a biblioteca react-intl é a sua implementação para React (Intl, 2023; Format JS, 2024; React Intl, 2024). 2.15 Bundlers e Vite Na linguagem JavaScript, module é um arquivo contendo código que pode ser importado por outro arquivo. Em HTML, a tag script carrega e executa arquivos JavaScript, porém apenas um arquivo pode ser carregado para cada tag script. Para a adição de mais arquivos, os arquivos precisam ser combinados em um único ou múltiplas tags devem ser utilizadas (Sofela, 2022; Sutch, 2020). A realização de ambas as soluções se torna inviável em aplicações grandes e complexas como um aplicativo web, portanto, bibliotecas chamadas module bundlers são responsáveis por analisar o código em tempo de compilação, carregar todos os códigos e gerar um único arquivo de saída contendo todo o código compatível com o ambiente do navegador. Module bundlers são altamente configuráveis e capazes de realizar a “transpilação”, possibilitando o uso de TypeScript (Sofela, 2022). Diversos formatos de module surgiram como o Asynchronous Module Definition (AMD), CommonJS e Universal Module Definition (UMD) (Sofela, 2022), porém com o aumento da complexidade das aplicações, a carga de trabalho sobre os bundlers tornaram o 25 ciclo de desenvolvimento lento, pois para visualizar os resultados de uma alteração, o bundler precisa realizar o processo de análise sobre toda a aplicação de uma vez (Why Vite, 2024). Em 2015 o comitê ECMA definiu o padrão ES Module (ESM), que passou a ser adotado pelos navegadores (Sofela, 2022). Já entre os bundlers disponíveis, o Vite utiliza o suporte nativo a ESM dos navegadores para agilizar o processo de “transpilação” e de inicialização do código (Why Vite, 2024). Vite, criado por Evan, também criador do framework Vue, se destaca pela performance e velocidade (Davidson, 2023). 2.16 Express.js Express.js é um framework web para Node.js que simplifica o desenvolvimento de aplicações web e APIs, oferecendo uma abstração de alto nível para a criação de servidores web em JavaScript. Express.js provê mínima funcionalidade para a criação de rotas, mas pode ser estendido adicionando suporte à middleware, autenticação, processamento de requisições e respostas HTTP (Vladutu, 2014). 2.17 Google Cloud De acordo com o National Institute of Standards and Technology (NIST), a computação em nuvem é um modelo de prestação de serviços de recursos computacionais conveniente, configurável e sob demanda, como servidores, redes, armazenamento, aplicações e serviços (Mell; Grance, 2011). Esse modelo de computação baseia-se na virtualização, onde os recursos de hardware são compartilhados e alocados dinamicamente para atender às demandas dos usuários. Os três principais modelos de serviços são: • Infrastructure as a Service (IaaS) - onde o cliente tem a capacidade de alocar servidores, armazenamentos ou outros recursos fundamentais capazes de executar código. • Platform as a Service (PaaS) - onde o provedor disponibiliza aplicações e ferramentas para que o cliente gerencie seus recursos em nuvem. • Software as a Service (SaaS) - onde o provedor disponibiliza aplicações prontas para o uso via web funcionais em múltiplos dispositivos (Mell e Grance, 2011). 26 Entre os provedores de computação em nuvem, a Google Cloud conta com o serviço App Engine que realiza o gerenciamento automático de hospedagem, domínio, administração e escalamento da aplicação, onde o desenvolvedor se torna isento da manutenção de infraestrutura em nuvem (Lutkevich, 2022). 2.18 Coeficiente de Sørensen-Dice O Coeficiente de Sørensen-Dice, desenvolvido de forma independente e simultânea por Lee R. Dice (1945) e Thorvald Sørensen (1948), é um coeficiente de similaridade entre dois grupos discretos. No estudo Measures of the Amount of Ecologic Association Between Species (Medidas da quantidade de associação ecológica entre espécies, em tradução livre), Dice procura correlacionar a associação de duas espécies distintas que coexistem em um mesmo ambiente de forma quantitativa, encontrando um índice numérico que define tal relação. Esta análise é útil para determinar a relação de dois grupos discretos quaisquer, como exemplo, duas strings de texto. Dice propõe: O índice pode ser obtido dividindo o número (a) de amostras aleatórias de uma dada série no qual a espécime A ocorre no número (h) de amostras no qual as espécies A e B ocorrem juntas (Dice, 1945, tradução nossa). Onde: Í𝑛𝑑𝑖𝑐𝑒 𝑑𝑒 𝑎𝑠𝑠𝑜𝑐𝑖𝑎çã𝑜 𝐵 𝐴 = ℎ 𝑎 (1) Í𝑛𝑑𝑖𝑐𝑒 𝑑𝑒 𝑎𝑠𝑠𝑜𝑐𝑖𝑎çã𝑜 𝐴 𝐵 = ℎ 𝑏 (2) Logo, em estudos em que a associação entre espécies não é alterada, caso a espécie usada como base seja comutada, o índice de coincidência pode ser calculado pela Equação (3): Í𝑛𝑑𝑖𝑐𝑒 𝑑𝑒 𝐶𝑜𝑖𝑛𝑐𝑖𝑑ê𝑛𝑐𝑖𝑎 = 2ℎ 𝑎 + 𝑏 (3) Seja h as amostras onde ambas as espécies ocorrem juntas, ou seja, a intersecção entre os dois grupos, e a + b a soma entre as duas espécies (A e B) ou a soma dos dois grupos. A biblioteca string-similarity em JavaScript utiliza esta Equação (3) para o cálculo do coeficiente de similaridade entre duas strings textuais (string-similarity, 2024). 27 2.19 Net Promoter Score Uma das estratégias utilizadas na indústria de tecnologia e aplicações web é o foco na fidelidade de seus clientes, que detêm a maior probabilidade de recomendar os serviços ou produtos desta empresa para outros possíveis clientes. A métrica Net Promoter Score (NPS) é utilizada para quantificar esta fidelidade dos clientes em um produto ou serviço, e foi criada por Frederick Reichheld em seu artigo The One Number You Need to Grow (O Número que Você Precisa para Crescer, em tradução livre) (2003). Nessa métrica, os usuários devem responder uma pesquisa organizada pela empresa com a pergunta “Qual a probabilidade de que você recomende nossa empresa, produto ou serviço?”, e as respostas são classificadas de acordo com uma escala de 0 a 10. A métrica categoriza as respostas em: • De 9 a 10: são usuários promotores mais propensos a se manterem clientes por mais tempo ou por engajar outros usuários via recomendação; • De 7 a 8: são usuários passivos, com opinião neutra; • De 0 a 6: são usuários detratores, menos propensos a recomendar para outros usuários. A métrica é então calculada com a subtração do percentual de detratores do percentual dos promotores (Reichheld, 2003). 2.20 OCR Space Optical Character Recognition (OCR) é uma tecnologia utilizada para a conversão de texto impresso ou manuscrito em formato digital, permitindo que imagens ou documentos escaneados sejam interpretados e transformados em texto editável (Baird; Tombre, 2014). Entre as múltiplas dificuldades que afetam a qualidade dos resultados do processo de reconhecimento de imagem, uma delas é que as imagens podem não ter sido capturadas de forma ótima ou em um ambiente controlado, especialmente quando capturadas por uma câmera ou celular. Os processos de reconhecimento utilizam métodos de classificação previamente treinados, porém pode não haver dados completos para o treino adequado. Idiomas diferentes podem não ter ferramentas desenvolvidas adequadamente para a tarefa. Documentos podem ser criados de formas diversas, com designs complexos e tipografia desconhecida que 28 impossibilitam o reconhecimento de forma generalista, levando pesquisadores e empresas a focarem em casos de análise simples e controlados (Baird; Tombre, 2014). O OCR é utilizado em uma variedade de contextos, sendo uma de suas primeiras aplicações o processamento de dados postais para entregas de correio, bem como digitalização de documentos, reconhecimento de idioma de textos em imagens e automação de processos de entrada de dados (Gilloux, 2014). OCRSpace é um serviço via API para reconhecimento de imagens e conversão para texto, com suporte a múltiplos idiomas incluindo inglês e português, detecção de orientação da página e com limite de uso gratuitos (Free OCR API, 2024). 2.21 Large Language Models Com a demanda de sistemas capazes de lidar com tarefas complexas como conversação, tradução e compilação de informações, o progresso do processamento de linguagem natural (Natural Language Processing - NLP) evoluiu para utilizar redes neurais e modelos pré-treinados. O Grande Modelo de Linguagem (Large Language Model - LLM) é uma arquitetura de inteligência artificial treinado com um grande volume de dados na escala de giga e terabytes, que apresenta habilidades emergentes como aprendizado de contexto e capacidade de aprendizagem zero-shot (Naveed et al., 2023). Aprendizagem zero-shot tem como objetivo mapear informações em um dado espaço criando relações entre as diferentes classificações dos objetos de entrada, permitindo que caso haja novos dados de entrada não classificados, a IA seja capaz de classificá-lo de forma relevante utilizando o conhecimento prévio de treino (Awari, 2023). Seja o exemplo de prompt: “Classifique o texto como neutro, negativo ou positivo. Texto: Eu penso que férias é OK.”. Este prompt não entrega informações adicionais relevantes de como classificar textos, porém com a resposta “neutro”, a aprendizagem zero-shot demonstra que a IA é capaz de compreender o significa de “sentimento” e de classificar textos de forma relevante de acordo com o pedido realizado no prompt (Zero-Shot Prompting, 2024). O Generative Pre-trained Transformer (GPT) em sua versão 4, desenvolvido pela OpenAI e publicado no relatório GPT-4 Technical Report (OpenAI, 2023), é um grande modelo de predição de linguagem capaz de processar imagens e textos de entrada que aprimora as funcionalidades da versão anterior 3.5, sendo mais criativo, confiável e capaz de resolver problemas mais complexos (OpenAI, 2023). 29 O GPT responde a prompts, escritos em linguagem natural, no qual o usuário pode descrever um pedido para que a IA realize, como por exemplo, fazer uma pergunta de conhecimento geral, pedir para resumir ou redigir textos etc. Durante seu funcionamento, o texto de entrada é “tokenizado” pelo algoritmo próprio da OpenAI, sendo que cada token pode conter palavras curtas de 2 ou 3 letras, ou dividir palavras e espaços entre múltiplos tokens. Seja os dados de entrada n tokens, a saída é apenas um token que é realimentado a entrada até o fim do processo de predição. Este processo não é determinístico e cada token de saída é escolhido a partir de uma distribuição de possibilidades sobre todos os tokens possíveis (Stollnitz, 2023). O poder de ferramentas LLM como o GPT-4 e sua capacidade de manter conversação em linguagem natural, abre oportunidades como a criação de robôs de conversa, ou chatbots, específicos para operar como parceiro de conversação para o aprendizado de uma segunda língua (Mai; Carson-Berndsen, 2023). Entretanto, assim como comentado no trabalho de Beutel, Geerits e Kielstein com o nome Artificial hallucination: GPT on LSD? (2023) (Alucinação Artificial: GPT ou LSD?, em tradução livre) a capacidade de sumarização ou resumo do GPT deve ser questionado, visto a possibilidade de “alucinações”, onde a IA cria afirmações incorretas e falsas, mesmo quando fornecido o texto ao qual o resumo deveria se basear. 30 3 MATERIAIS E MÉTODOS O aplicativo se chama Loolabae, que consiste em uma adaptação da palavra lullaby do inglês “canção de ninar” para a fonética da língua portuguesa. O ícone e o logotipo do aplicativo utilizado na página da versão web e no processo de instalação via PWA é exibido na Figura 3. Ambos são inspirados na estética minimalista do Google Material Design. Figura 3 - Ícone e logotipo da aplicação. Fonte: Autoria própria (2024). 3.1 Fluxograma do Aplicativo O aplicativo foi dividido em duas partes, sendo o Front-end a parte que contêm a UI do projeto e é executada no dispositivo do cliente. O Back-end é a parte executada e hospedada em nuvem que realiza o processamento dos dados. O ciclo de funcionamento simplificado do projeto é: um usuário de posse de seu celular abre o aplicativo e com a sua câmera, fotografa a página de um livro. Esta foto é então enviada para o Back-end, onde os dados são processados e o Back-end retorna a resposta. Já o Front- end reproduz o texto da página deste livro, bem como os efeitos sonoros de acordo com o contexto do trecho em questão. A Figura 4 exibe o fluxograma de execução do Front-end. 31 Figura 4 - Fluxograma de execução Front-end. Fonte: Autoria própria (2024). Quando a requisição contendo a fotografia chega ao Back-end, ela é repassada para o OCR Space, e seu retorno é o texto contido na imagem. Na sequência, este texto extraído é enviado para o GPT-4, que o corrige os ruídos ou erros ortográficos. Então, o texto corrigido é reenviado para o GPT-4 em busca dos possíveis contextos. Estes contextos são ambientes no qual a história se passa (praia, água etc.), animais ou objetos presentes no texto. Eles são definidos pela aplicação em um vetor em TypeScript. Por fim o texto e a lista de contextos são retornados para o Front-end, como ilustrado na Figura 5. 32 Figura 5 - Fluxograma de execução Back-end. Fonte: Autoria própria (2024). 3.2 Materiais O aplicativo foi programado e seus testes realizados a partir de um computador desktop pessoal com o sistema operacional Windows 11, com 32 GB de memória RAM e um processador Intel Core i7-12700K de 3.61 GHz. 3.2.1 Back-end A Google Cloud fornece opções gratuitas de computação em nuvem, desde que dentro dos limites de uso estabelecidos. O produto da Google Cloud escolhido foi o App Engine, que gerencia as máquinas, o roteamento das requisições e a criação de um domínio temporário de forma automática, bem como o suporte à JavaScript nativo do produto. O App Engine em seu limite gratuito fornece a instância da classe F1 durante 28 horas por dia, com 384 MB de memória e 600 MHz de CPU (Google, 2024a, 2024b). Como ambiente de JavaScript, o Node.js foi utilizado com Express para o servidor web em conjunto com a linguagem TypeScript. Node.js não fornece suporte padrão à TypeScript, portanto Rollup foi o bundler e o “transpilador” escolhido. Para o processo de conversão de imagem para texto, a API do OCRSpace fornece, dentro de seu pacote gratuito, até 25000 requisições por mês, e o limite de upload de imagens de 1 MB (Free OCR API, 2024). A correção do texto resultante do processo de OCR bem como 33 a captura de contexto do texto é realizada pela API do OpenAI, com o modelo GPT-4, porém, até o momento deste projeto não há opções gratuitas, custando $ 0,03 a cada 1000 tokens (OpenAI, 2024). 3.2.2 Front-end A combinação do bundler Vite e React, com as bibliotecas Material UI para componentes, e Tailwind com SCSS para customização, proporcionaram uma grande facilidade no desenvolvimento. A linguagem utilizada foi TypeScript. A compressão de imagem é realizada pela biblioteca browser-image-compression, a reprodução dos efeitos sonoros foi executada pela biblioteca Howler, e a reprodução de voz pela WebSpeech API. O aplicativo foi testado primariamente com o navegador Google Chrome e o suporte à PWA foi implementado pela biblioteca plugin do Vite chamada vite-plugin-pwa (vite-plugin-pwa, 2024). 3.3 Metodologia O projeto utiliza a funcionalidade do ambiente Node.js, especificamente do Node Packager Manager (NPM) (2024), com múltiplos projetos dentro de um único projeto, sendo eles o Front-end, Back-end e um Core contendo trechos de código compartilhado entre ambos. A Figura 6 exibe, à esquerda, a estrutura do diretório principal, no qual a pasta app se refere ao Front-end e a pasta server ao Back-end. As outras pastas e arquivos são configurações do ambiente de programação. As pastas app e server seguem a estrutura mostrada à direita da Figura 6, onde o código fonte se encontra na pasta src. 34 Figura 6 - Estrutura de diretório do projeto principal e do Front-end. Fonte: Autoria própria (2024). 3.3.1 Contextos e Core Os contextos são definidos no projeto chamado Core, pois este código é utilizado por ambos o Front-end e Back-end, e contêm duas partes. A primeira parte consiste em um arquivo TypeScript com um vetor que define os contextos disponíveis na aplicação. A Figura 7 exibe alguns contextos neste arquivo. Figura 7 - Arquivo de definição de Contextos com exemplos. Fonte: Autoria própria (2024). 35 A propriedade name (Figura 7) se refere ao nome deste contexto, ele é enviado para o GPT-4 durante o processo de análise, bem como o nome do arquivo de som a ser executado. Os efeitos sonoros são divididos em duas categorias: efeitos de fundo chamados “during” serão executados simultaneamente durante a leitura, adicionando uma profundidade artística na execução. Como exemplo, caso o texto contenha elementos de chuva ou tempestade, a voz sintetizada realizará a leitura do texto com a adição do efeito sonoro de chuva ao fundo. A segunda categoria se aplica a efeitos sonoros curtos chamados “after”. Eles são conectados a um objeto, animal ou ação. Como exemplo, caso o texto contenha um leão ou um dos personagens seja um leão, após a finalização da leitura o efeito sonoro de rugido será executado. Caso haja mais de um efeito sonoro curto, eles serão executados em ordem um após o outro. A propriedade type armazena essa categorização de efeitos com os valores possíveis “during” e “after”. A segunda parte da definição de um contexto é seu arquivo de áudio em formato MP3 que se encontra na pasta do projeto. Este arquivo é copiado automaticamente durante a “transpilação” para uma pasta que ficará disponível para download pelo navegador e pelo dispositivo do usuário durante a execução. 3.3.2 Front-end O aplicativo contém cinco páginas diferentes, sendo a página inicial chamada Home (Figura 8). Nesta página, o usuário tem a possibilidade de navegar para a página de Configurações tocando no botão superior direito com o ícone menu, ou abrir a câmera para a captura de foto clicando em qualquer ponto da seção principal da página. 36 Figura 8 - Páginas Home, Configurações e Tema do aplicativo. Fonte: Autoria própria (2024). Ao acessar a página de Configurações, o usuário tem a opção de retornar a Home tocando o botão no canto superior esquerdo com o ícone chevron (que se assemelha a uma seta para a esquerda), ou navegar por três diferentes páginas de configurações, sendo elas a seleção de tema, idioma e seleção de voz. Para todas as configurações pertinentes do aplicativo, o padrão inicial é determinado coletando as opções pessoais do usuário a partir das APIs do navegador. Na página de Tema, o usuário pode escolher permanecer no tema correspondente ao sistema, ou optar pelos temas claro ou escuro. A Figura 9 exibe a página de Tema com os temas escuro e claro. Uma borda escura foi adicionada em torno do tema claro para evidenciar suas bordas. 37 Figura 9 - Página de Seleção de Tema, com os temas escuro e claro. Fonte: Autoria própria (2024). Na página de Idioma exibida na parte à esquerda da Figura 10, o usuário pode escolher entre os dois idiomas disponíveis, inglês e português para a utilização do aplicativo. Esta seleção é importante e é utilizada pelo OCRSpace e GPT-4 para a conversão da imagem em texto. Por padrão inicial, a linguagem utilizada é a mesma do dispositivo do usuário. Figura 10 - Páginas de Idioma e Seleção de Voz do aplicativo. Fonte: Autoria própria (2024). 38 A página de seleção de voz (à direita da Figura 10) exibe as vozes disponíveis no sistema para a reprodução de fala pela WebSpeech API. As opções exibidas são dependentes dos idiomas instalados e configurados no dispositivo. Como um exemplo, caso o usuário não tenha o idioma inglês habilitado, os sintetizados de voz em inglês não aparecerão dentre as opções. Caso o usuário escolha a linguagem em português, mas escolha o sintetizador em inglês, o aplicativo fará a leitura de um texto em português, mas com fonética da língua inglesa, gerando resultados imprecisos. O padrão desta opção é a primeira voz da lista de acordo com a linguagem do dispositivo do usuário. 3.3.3 API O Back-end detêm um único endpoint /api/analyze, com o corpo de requisição no formato multipart/form-data, com os seguintes parâmetros: • image: Obrigatório, corresponde a imagem em si; • locale: Opcional, linguagem utilizada pelo Front-end, sendo a opção padrão em inglês. Nenhuma validação de autenticação é realizada, e os casos de exceções estão exibidos no Quadro 1: Quadro 1 - Resposta de erro da API. Status Tipo Mensagens 400 BadRequest • Invalid Image. 500 BadResult • Not possible to analyze the image. 500 InternalServerError • Secret Manager: PROJECT_NAME environment variable is undefined. • Secret Manager: [name] secret is empty or undefined. • Mensagem de erro do OCR Space. Fonte: Autoria própria (2024). A API utiliza a nomenclatura padrão de códigos de status de resposta HTTP (MDN Web Docs, 2023), com exceção do erro do tipo BadResult, criado especificamente neste projeto para representar erros caso a API do OCRSpace retorne um status de sucesso com o texto vazio. 39 Caso esta API falhe, as mensagens de erro são encaminhadas para a exceção principal como InternalServerError. Estas mensagens não são exibidas no Front-end e servem apenas para teste. 3.3.4 Back-end Ao receber a requisição do Front-end via o endpoint /api/analyze, a primeira etapa da execução é validar se a imagem está contida no corpo da requisição, caso não esteja, a exceção BadRequest é acionada e retornada. A seguir, a imagem é convertida para base64, e enviada para a API do OCRSpace, junto com o parâmetro de idioma utilizado e que veio do corpo da requisição. A resposta da API é analisada e neste momento as exceções InternalServerError ou BadResult podem ser acionadas. Esta API retorna um campo string contendo o resultado da conversão de imagem para texto. Os prompts utilizados em LLMs são cruciais para seu funcionamento e a modificação de sua formatação ou palavras utilizadas altera seu comportamento. Dito isto, o prompt abaixo em inglês é enviado para o GPT-4 em conjunto com o texto convertido: “Given the text, analyze the context of the text and clean up any non-sense or non- textual words and characters and correct grammar and spelling of the following text. If the text is correct, don't change anything, just respond with the text back. Avoid using swearing or bad wording. The text is in [locale].” Traduzindo o prompt enviado: “Dado o texto, analise o contexto do texto e limpe quaisquer palavras e caracteres sem sentido ou não textuais e corrija a gramática e a ortografia do texto seguinte. Se o texto estiver correto, não altere nada, apenas responda com o texto de volta. Evite usar palavrões. O texto está em [localização].” Onde o parâmetro locale pode assumir os valores “english” ou “portuguese”. É importante ressaltar que o GPT-4 é capaz de operar mesmo que o prompt esteja com idiomas mistos. Esta API também retorna um campo string contendo o texto corrigido. O texto corrigido é enviado novamente para a API do GPT-4 com o prompt: “Given the options of contexts below: 40 [contextToString()] Analyze the text on which context the story has and return a response as JSON containing all the contexts, and rating the probability between 0 and 1, where 0 means no probability, and 1 means highest probability, you can use decimal numbers if you want. Don't answer any other words, just return a JSON.” Traduzido: “Dadas as opções de contextos abaixo: [contextToString()] Analise o texto em qual contexto a história está e retorne uma resposta como JSON contendo todos os contextos, e classificando a probabilidade entre 0 e 1, onde 0 significa nenhuma probabilidade e 1 significa maior probabilidade, você pode usar números decimais se quiser. Não responda outras palavras, apenas retorne um JSON.” A função contextToString retorna e adiciona no meio do prompt todos os contextos da aplicação em forma de lista não numerada e com asterisco como marcadores. Por exemplo: * rain; * restaurant; * school; * cat; * dog; * cow; Esta API então retorna um campo string contendo JSON no formato string. No exemplo apresentado, após a conversão desta string para JSON, o retorno será (Quadro 2): 41 Quadro 2 - Exemplo do retorno em JSON do GPT-4 na análise de contextos. Fonte: Autoria própria (2024). Estes vetores de contextos são filtrados removendo as entradas que contenham um valor menor do que 0,75. Este valor de filtro foi escolhido de forma arbitrária para reduzir possíveis casos de falsos positivos. Na sequência, o vetor filtrado e o texto corrigido são retornados para o Front-end, no seguinte formato (Quadro 3): Quadro 3 - Exemplo do retorno do Back-end em formato JSON. Fonte: Autoria própria (2024). 3.3.5 Execução A Figura 11 exibe os elementos da tela durante o processamento da requisição. As Figura 11a e 11b apresentam, respectivamente, a tela inicial de carregamento e quando um erro ocorre. No caso de erro, uma mensagem simplificada é exibida na tela. Para remover a mensagem de erro e tentar novamente, o usuário precisa pressionar o centro da tela (Figura 11b). { “rain”: 0, “restaurant”: 0, “school”: 0, “cat”: 1, “dog”: 0, “cow”: 0 } { “text”: “Texto corrigido”, “contexts”: [ { “name”: “cat”, “type”: “after”, “value”: 1 } ] } 42 Figura 11 - Telas de (a) Carregamento, (b) Erro e (c) durante a execução da aplicação. (a) (b) (c) Fonte: Autoria própria (2024). Caso o retorno do Back-end seja positivo, o Front-end separa os contextos de acordo com o seu type, e ativa a sintetização de voz WebSpeech API com o texto retornado simultaneamente com a execução dos contextos do type “during” pelo Howler. A Figura 11c exibe a tela durante a leitura de texto. Assim que a WebSpeech API finaliza a leitura, a aplicação inicia a execução dos contextos de type “after” de forma sequencial. Por exemplo, caso haja um contexto de leão e gato, o som de um rugido será executado e logo em seguida o som de miado. Após o término, a tela volta ao estado padrão da tela Home assim como na Figura 8. A qualquer momento o usuário pode interromper este processo tocando no centro da tela durante a leitura. 3.3.6 Teste Geral O teste geral foi realizado pelo discente e consistiu na utilização do livro Ginger The Giraffe (Albert, 2020), com um total de 12 páginas. Cada página do livro foi processada em ordem via Front-end para utilização completa do sistema. As imagens são da versão digital do livro, portanto de alta qualidade e com ausência de imperfeições, sombra e reflexo, representando casos idealizados. 43 O texto processado e os contextos foram coletados a partir da linha de comando do Back-end, ou seja, antes da resposta ser enviada para o Front-end. Com um script simples em TypeScript o texto original transcrito manualmente para o formato string foi comparado com o resultado do processo, calculando o Coeficiente de Dice com a biblioteca string-similarity, onde o coeficiente varia entre 0 e 1, sendo 1 correspondente a strings idênticas. Tanto o texto original quanto o texto final processado foram filtrados removendo caracteres de fim de linha (\n) e espaços de tabulação (\x09 em ASCII), pois interferem no valor do coeficiente, causando diferenças em textos que outrora seriam semelhantes, entretanto, isso não afeta o sintetizador de voz durante a execução. Na etapa de análise de contextos, os contextos são comparados com os contextos esperados, e uma porcentagem de acerto é calculada pela Equação (4): 𝑟 = 𝑁ú𝑚𝑒𝑟𝑜 𝑑𝑒 𝑐𝑜𝑛𝑡𝑒𝑥𝑡𝑜𝑠 𝑑𝑜 𝑟𝑒𝑠𝑢𝑙𝑡𝑎𝑑𝑜 𝑑𝑎 𝐴𝑛á𝑙𝑖𝑠𝑒 𝑐 = 𝑁ú𝑚𝑒𝑟𝑜 𝑑𝑒 𝑐𝑜𝑛𝑡𝑒𝑥𝑡𝑜𝑠 𝑒𝑠𝑝𝑒𝑟𝑎𝑑𝑜𝑠 𝑃𝑜𝑟𝑐𝑒𝑛𝑡𝑎𝑔𝑒𝑚 = { 𝑟 ≠ 0 𝑒 𝑐 = 0 → 0 𝑟 = 0 𝑒 𝑐 = 0 → 100 𝑐 ≠ 0 → 𝑟 𝑐 ∗ 100 (4) A variável r representa os contextos do resultado de análise que são esperados, pois é possível que o GPT-4 encontre contextos adicionais não esperados. Os contextos esperados foram definidos de forma intuitiva, ou seja, lendo o livro página a página e demarcando quais dos contextos disponíveis deveria ser reproduzido durante a leitura da página, seja pela menção direta de uma palavra-chave, ou pela inferência implícita no texto. 3.3.7 Teste Técnico Para a coleta de dados técnicos da aplicação, um script em TypeScript foi implementado e foi responsável por testar o sistema considerando a performance computacional do processo. Os testes foram realizados em um computador pessoal ao invés do computador em nuvem que o Back-end está hospedado, pois as três etapas do processo são dependentes de APIs externas e não da capacidade de processamento e memória da máquina em nuvem. O parâmetro de entrada do script é um vetor contendo as definições para cada caso. Por exemplo, um caso pode conter as seguintes propriedades: 44 • name: nome do arquivo de imagem; • extension: extensão do arquivo; • locale: idioma do texto contido na imagem; • text: texto da imagem transcrito manualmente para o formato string, para o fim de comparação dos resultados do processo com o resultado esperado; • contexts: vetor de strings com os contextos esperados do texto, também preenchidos manualmente. O script inicia o processo sobre um caso abrindo o arquivo de imagem e carregando na memória. A imagem então é comprimida para estar de acordo com a limitação de 1 MB em tamanho da API do OCRSpace. O projeto realiza esta operação no Front-end via a biblioteca browser-image-compression, exclusiva para ambientes de navegadores. Entretanto, o script de teste é executado no ambiente do Back-end. Para garantir o funcionamento adequado, um novo algoritmo de redução do tamanho da imagem foi implementado utilizando a biblioteca Sharp. Analisando o código do browser- image-compression, a compressão da imagem é feita reduzindo a largura e a altura da imagem de forma iterativa, até que a limitação de 1 MB seja atingida. O algoritmo implementado utilizando o Sharp reproduz as mesmas operações da biblioteca browser-image-compression adaptando a lógica para o ambiente NodeJS, exibido de forma simplificada no Quadro 4. Quadro 4 - Pseudocódigo do algoritmo de compressão de imagem do browser-imagem-compression. Fonte: Autoria própria (2024). tamanho = 1 MB tentativas = 20 enquanto (tentativas != 0 E tamanhoAtual > tamanho) { largura = largura * 0.95 altura = altura * 0.95 imagemAtual = comprimir(imagem, largura, altura) tentativas = tentativas - 1; tamanhoAtual = imagemAtual.tamanho } 45 Dado o tamanho alvo da imagem de 1 MB e o número máximo de tentativas 20, o bloco de código enquanto será executado até o momento em que o número de tentativas seja esgotado (tentativas seja zero) ou o tamanho atual da imagem seja menor que o tamanho alvo. Dentro do bloco de código, a altura e largura da imagem são multiplicados por 0,95 a cada iteração, diminuindo o tamanho da imagem a cada ciclo. Esta etapa de compressão de imagem é desconsiderada na análise de tempo de execução, pois ocorre no Front-end. Na próxima etapa, a imagem passa pelo processo de OCR, Correção e Análise de Contextos, e o tempo de execução em cada etapa é calculado. As etapas são implementadas utilizando as mesmas funções da aplicação principal. A similaridade entre o texto obtido pelo processo e o texto esperado é mensurado da mesma forma pela biblioteca string-similarity (Coeficiente de Dice) e que foi utilizado na metodologia do Teste Geral. A análise dos resultados de contextos também usa a mesma metodologia. Os livros utilizados para os testes foram: • Aventuras na Praia (Washington, 2005); • O Carro de Anastácio (Montes e Roldán, 1989); • A Mula Sem Cabeça (Ciranda Cultural, 2016); • Piraiaguara (Hetzel, 2000); • Brincadeiras (Canton e Volpi, 2006); • Coleção Sabia, Sabiá? (Amorim, 1999); • O Guia do Mochileiro das Galáxias (Adams, 2010); • Immune (Dettmer, 2021); Para cada página de livro, quatro cenários, quando disponíveis, são testados de forma independente, gerando quatro casos. O primeiro caso é a situação ideal, com iluminação adequada, sem sombra e boa qualidade; segundo caso com iluminação ideal, porém com o conteúdo desalinhado e em perspectiva; o terceiro com sombra sobre o texto; e o quarto com reflexo sobre o papel quando a página tem propriedades reflexivas. As imagens da Figura 12 exibem os diferentes casos de uma página do livro Piraiaguara: a) ideal, b) perspectiva, c) com sombra e d) com reflexo. 46 Figura 12 - Casos de teste do livro Piraiaguara: a) ideal, b) perspectiva, c) com sombra e d) com reflexo. Fonte: Autoria própria (2024). A saída do script de testes é um arquivo CSV contendo todos os casos com os coeficientes, contextos corretos, porcentagem de acerto dos contextos e tempo de execução de cada etapa. 3.3.8 Experiência do Usuário Para avaliar o aplicativo, testes de experiência do usuário ocorreram em duas escolas de dança de Sorocaba, a saber, Do Ré Mi Flá gerida pela diretora e professora Flaviane Henrique Paes, e no Studio Move Up gerido pela diretora e professora Andreza Fernanda de Oliveira Rimes. Todos os participantes tiveram autorização dos pais ou responsáveis e participaram de livre e espontânea vontade. Os testes ocorreram com grupos de crianças entre os 7 a 12 anos em duas etapas e com a presença da professora de dança responsável pela turma de alunos. No primeiro, as crianças tinham liberdade de utilizar o aplicativo com o celular particular ou emprestado da professora de dança responsável, e com uma coleção de livros 47 infantis disponibilizados pelo discente. O tempo de utilização foi variado, sendo o tempo mínimo de 10 minutos. Em seguida, as crianças receberam um questionário para preencher. O questionário contém 13 perguntas que se encontra no Anexo A. As duas primeiras perguntas de cunho pessoal sobre a idade e ano escolar da criança, são para caracterização dos usuários. As questões de 4 a 12 foram redigidas em um formato de “nível de concordância”, no qual o texto da questão é afirmativo, e as alternativas de respostas estão em uma escala de concordância do questionado com relação à afirmação, contendo 5 níveis diferentes. As alternativas são: “discordo totalmente”, “discordo parcialmente”, “neutro”, “concordo parcialmente” e “concordo totalmente”. A questão 13 utiliza a métrica NPS, porém foi formulada de forma simplificada com o enunciado “O quanto você gostou do aplicativo?”. A redação do questionário foi elaborada em linguagem simples, evitando termos técnicos da área de aplicações web para diminuir problemas de interpretação por parte das crianças. As questões também foram redigidas de forma que o maior grau de concordância (alternativa “concordo totalmente”) representa resultados positivos para a aplicação. Entretanto, durante a primeira aplicação com as crianças, foi notado uma dificuldade de interpretação das perguntas de 4 a 12, especialmente em crianças menores de 8 anos. Para essas crianças foi necessário o auxílio do professor. Para tanto, uma segunda versão do formulário foi elaborada, exibida no Anexo B, no qual estas perguntas foram reformuladas de forma interrogativa, e com apenas duas alternativas para a resposta, sendo elas “sim” e “não”, correspondendo então as questões de 3 a 11 no novo questionário. As perguntas de cunho pessoal 1 e 2 se mantiveram, a questão 3 foi removida e a questão 13 com a métrica NPS se manteve, porém, agora identificada pelo número 12. 48 4 RESULTADOS O Tabela 1 exibe os resultados por página do Teste Geral com o livro Ginger The Giraffe. A coluna Contextos exibe a porcentagem de acerto dos contextos. Tabela 1 - Resultados do teste geral do livro Ginger The Giraffe. Teste Geral - Ginger The Giraffe Página Coeficiente Contextos 4 0,99 100% 5 0,99 100% 6 0,98 100% 7 0,91 50% 8 0,94 50% 9 0,96 100% 10 1,00 0% 11 0,98 100% 12 0,92 100% 13 0,99 100% 14 0,97 100% 15 0,98 100% Fonte: Autoria própria (2024). A média do Coeficiente de Dice foi de 0,97 e a porcentagem média de acerto de contextos de 83%. Este resultado é esperado visto que as imagens foram criadas digitalmente e compiladas em formato de livro para possível impressão. Neste caso, não há interferência de iluminação, baixa qualidade da câmera, sombra ou reflexo. Entretanto, é importante salientar uma deficiência do sistema: todo texto passa pelo processo de correção pelo GPT-4 mesmo que os resultados do OCR sejam perfeitos. E o GPT- 4 é passível de trazer variâncias no texto e alterações devido a sua natureza não determinística. Como exemplo, na página 7 a girafa Ginger responde para o macaco Mickey: “Todas as zebras e os antílopes e os elefantes estão ficando preocupados com a grama seca” (Albert, 2020); entende-se que a escolha do autor de enumerar os animais conectando com “e os” é estilística e propositada no contexto de histórias infantis. Porém, não sendo esta a forma comum literária de enumeração de substantivos. O GPT-4 entende isso como incorreto e corrige para “Todas as zebras, antílopes e elefantes estão ficando preocupados com a grama seca”. 49 Estas pequenas mudanças acumulativas justificam casos em que, mesmo com uma imagem ideal, o Coeficiente de Dice não é 1, pois, pequenas mudanças existem. O uso do GPT- 4 como processo de correção ainda é válido, visto que suas correções utilizam o poder atual de linguagem natural, onde mesmo que o texto não seja idêntico, ele ainda é compreensível e análogo ao original. Como nestes testes os contextos esperados levam em conta qual efeito sonoro deveria ser reproduzido sob a ótica da análise textual humana, o caso da página 7 chama atenção, onde o macaco Mickey responde a girafa que está com fome porque não chove há muito tempo (Albert, 2020). Com essa informação, espera-se que não haja ruído de chuva durante a leitura desta página, portanto este contexto “chuva” não é esperado. Porém o GPT-4 detectou o contexto adicional possivelmente pela presença da palavra-chave “chuva” e executou o efeito sonoro de chuva. Isto demonstra que embora o GPT-4 seja poderoso, a conexão contextual entre um trecho de texto, os eventos que estão acontecendo em uma cena da narrativa e a expressão artística sonora desta cena é um problema bastante complexo e não completamente solucionado pela IA. A Tabela 2 exibe informações relevantes com relação ao tempo de execução (em segundos) do Back-end da aplicação. A coluna OCR representa o tempo do processo de conversão de imagem para texto, a Correção corresponde ao processo de correção da saída do OCR pelo GPT-4 e Contextos significa o processo de análise de contextos do texto. Tabela 2 - Tempo de Execução do Back-end em segundos. Tempo de Execução (s) OCR Correção Contextos Pior Caso 14,24 32,04 11,22 Média 10,57 11,04 8,26 Melhor Caso 7,59 2,31 1,47 Fonte: Autoria própria (2024). A média apresenta que cada etapa tem a duração acima de 8 segundos, sendo a média total de execução de 29,47 segundos. Este é um tempo de resposta grande em comparação com o nível profissional e industrial das aplicações modernas, visto que um menor tempo de resposta está conectado com maior satisfação do usuário (Baecker, 2022). 50 O melhor caso das etapas de Correção e Contextos advém do livro A Mula Sem Cabeça, nos casos de perspectiva e reflexo. A Figura 13 exibe, respectivamente, as imagens em questão. Em ambos os casos, o texto capturado é completamente inconsistente ou incompreensível, e quando o GPT-4 é incapaz de realizar a correção ou análise de contextos de um trecho de texto, ele retorna uma mensagem de erro curta, justificando o baixo tempo de execução. Figura 13 - Página do livro A Mula Sem Cabeça, nos cenários em perspectiva e reflexo. Fonte: Autoria própria (2024). A Figura 14 mostra a distribuição da média do tempo de execução entre as três etapas. 51 Figura 14 - Distribuição do Tempo de Execução médio do Back-end. Fonte: Autoria própria (2024). O tempo de execução do processamento é dividido igualmente entre todas as etapas. Entretanto, a execução é distribuída predominantemente nas etapas Correção e Contextos, que são realizadas pela mesma API do GPT-4, representando um possível ponto de melhoria e diminuição do tempo de execução. A Tabela 3 exibe a média do Coeficiente de Dice de todos os casos possíveis, sendo eles: caso ideal, em perspectiva, com sombra sobre a página e com reflexo. A coluna OCR exibe o coeficiente logo após a etapa de OCR e a coluna Corrigido, exibe o coeficiente após a etapa de correção pelo GPT-4. Tabela 3 - Coeficiente de Dice médio para os diferentes cenários. Coeficiente de Dice OCR Corrigido Ideal 0,91 0,92 Perspectiva 0,76 0,79 Sombra 0,84 0,87 Reflexo 0,86 0,89 Fonte: Autoria própria (2024). O Coeficiente de Dice médio total da aplicação foi de 0,87. 35% 37% 28% Distribuição do Tempo de Execução Back- end OCR Correção Contextos 52 O sistema tem maior taxa de acerto em casos ideias, e de acordo com os principais desafios da tecnologia de OCR, o ambiente controlado traz melhores resultados. Ainda segundo a Tabela 3, os piores resultados vêm de perspectiva, onde o conteúdo textual está desalinhado com a horizontal da imagem, ou então a página do livro está em perspectiva com relação a câmera. Analisando estes dados e separando os coeficientes por livro, na Tabela 4, os livros Piraiaguara e A Mula Sem Cabeça obtiveram os piores resultados. Tabela 4 - Coeficiente de Dice médio por livro. Coeficiente de Dice por Livro OCR Corrigido Aventuras na Praia 0,90 0,94 O Carro de Anastáscio 0,88 0,93 A Mula Sem Cabeça 0,63 0,68 Piraiaguara 0,77 0,81 Brincadeiras 0,92 0,91 Coleção Sabia, Sabiá? 0,88 0,95 O Guia do Mochileiro das Galáxias 0,91 0,92 Immune 0,91 0,83 Fonte: Autoria própria (2024). Assim como exibido na Figura 13, o resultado do coeficiente de 0,68 é justificado pela tipografia não convencional do livro, com caracteres finos e texto alinhado em curva, o que dificulta o processo de OCR. Enquanto o livro Coleção Sabia, Sabiá?, em seu caso ideal (Tabela 4), obteve o melhor resultado (0,95), devido ao número reduzido de figuras, cores simples e tipografia consistente. Este é o principal desafio deste projeto, onde os resultados do OCR são altamente dependentes da qualidade da entrada de dados. Como o objetivo central é a leitura de livros infantis, estes livros trazem tipografias diversas, coloridos e com grande quantidade de imagens e desenhos, além de páginas com bordas arredondadas. A Figura 15 exibe um exemplo do livro Opostos no Mar (Brooks, 2018) com tipografia incomum e bordas arredondadas. 53 Figura 15 - Foto do livro Opostos no Mar. Fonte: Autoria própria (2024). Analisando apenas o coeficiente, o processo de correção não apresenta indícios significativos de melhoria. Porém, o processo de OCR pode retornar caracteres e símbolos não textuais no meio de palavras e frases. Quando o sintetizador de voz no Front-end faz a leitura de um texto com ruído, os símbolos são lidos um a um, palavras e frases são interrompidas, gerando uma inconsistência na leitura e dificultando o entendimento do texto. A etapa de correção do GPT-4 é necessária para remover esses caracteres, corrigir possíveis erros de concordância e remover ruído do texto. No Quadro 5 é exibido o texto antes da correção (Texto Original) e o texto após a correção (Texto Corrigido) do livro Piraiaguara. Nesse caso, o cenário tinha reflexo e coeficientes de 0,85 antes e 0,91 após correção. 54 Quadro 5 - Texto original (à esquerda), e texto corrigido pelo GPT-4 (à direita). Fonte: Autoria própria (2024). Já a Tabela 5 exibe, para cada livro, o número de caracteres do texto com o seu tempo de execução total (em segundos). Tabela 5 - Relação de caracteres de um texto e o tempo de execução médio por livro em segundos. Caracteres e Tempo de Execução por Livro Caracteres Total (s) Aventuras na Praia 838 34,78 O Carro de Anastáscio 165 22,76 A Mula Sem Cabeça 112 19,49 Piraiaguara 382 24,18 Brincadeiras 338 25,20 Coleção Sabia, Sabiá? 318 25,65 O Guia do Mochileiro das Galáxias 1923 52,40 Immune 2030 39,68 Fonte: Autoria própria (2024). Texto Original uando finalmente chegava _na Baía de Guanabara, PiraiaguaÊáístava sempre sem fôlego. Nunca sabia se a causa era o cansaçooü abelzdaquelas águas calmas, meio-lago, meio- mar. Ascidades ao seu redor ainda estavam acordando. De caídas nas margens do mar, as luzes iam-se apagando. dos prédios e das casas pegavam fogo, inundados pela Texto Corrigido Quando finalmente chegava na Baía de Guanabara, Piraiagua estava sempre sem fôlego. Nunca sabia se a causa era o cansaço ou a beleza daquelas águas calmas, meio-lago, meio-mar. As cidades ao seu redor ainda estavam acordando. Deitadas nas margens do mar, as luzes iam-se apagando. Dos prédios e das casas pegavam fogo, inundados pela. 55 O livro O Guia do Mochileiro das Galáxias obteve o pior tempo de execução médio com 52,40 segundos. Já o melhor caso é o da A Mula Sem Cabeça, com 19,49 segundos. O Figura 16 mostra a média dos casos do tempo de execução em função do número de caracteres. Figura 16 - Tempo de Execução médio em segundos por Número de Caracteres. Fonte: Autoria própria (2024). A API do GPT-4 gera, em tempo real, suas respostas em linguagem natural, token por token de acordo com seu sistema de predição de texto, onde cada token de saída é realimentado na entrada de dados até que a predição esteja completa. Portanto, quanto maior a saída esperada, ou seja, um texto longo, maior o tempo de resposta da API. Entretanto, quando o GPT-4 não consegue realizar uma operação assim como descrito no prompt, ele retorna uma mensagem de erro que contêm uma quantidade de caracteres reduzida. Logo, dentre os livros, A Mula Sem Cabeça obteve o maior número de erros pelo GPT-4, tornando-se a execução mais rápida. Esta situação é notável observando a linha de tendência do Figura 16, onde quanto maior o número de caracteres, maior o tempo de execução. Isto é um sinal de atenção para a escalabilidade de um projeto, no qual requisições podem falhar ou ultrapassar o tempo de execução limite apenas por causa do tamanho do texto que o usuário deseja processar. Quanto aos contextos, a Tabela 6 exibe a porcentagem de acerto por casos, sendo eles ideal, perspectiva, com sombra e com reflexo. Já a Tabela 7 apresenta a porcentagem de acerto por livro, sendo a sua porcentagem média total de 88,57%. 0 10 20 30 40 50 60 0 500 1000 1500 2000 T em p o d e E x ec u çã o ( s) Caracteres Tempo de Execução por Número de Caracteres 56 Tabela 6 - Percentual de Acerto por Caso. Percentual de Acerto por Caso Porcentagem Ideal 87,50 Perspectiva 97,14 Sombra 87,50 Reflexo 80,00 Fonte: Autoria própria (2024). Tabela 7 - Percentual de Acerto por Livro. Percentual de Acerto por Livro Porcentagem Aventuras na Praia 95,00 O Carro de Anastácio 100,00 A Mula Sem Cabeça 100,00 Piraiaguara 25,00 Brincadeiras 100,00 Coleção Sabia, Sabiá? 100,00 O Guia do Mochileiro das Galáxias 100,00 Immune 100,00 Fonte: Autoria própria (2024). A porcentagem de acerto de contextos por caso sofreu grande interferência do livro Piraiaguara com o segundo menor coeficiente e a menor porcentagem quando classificado por livros. Entretanto, observando os demais livros (Tabela 7), embora o coeficiente dos casos em perspectiva seja menor em média (Tabela 6), as variações no texto produzidas pelo processo de OCR e correção do texto pelo GPT-4 não afetaram a capacidade de análise de contextos do GPT-4, com resultados acima de 95% de acerto. Estes dados apresentam tendência a favorecer resultados positivos em casos que não apresentam contextos, pois se a análise não retorna contextos e estes não são esperados, a porcentagem de acerto é de 100%. Do teste de experiência, 22 crianças utilizaram o aplicativo e responderam os questionários. A distribuição da idade das crianças pode ser observada na Figura 17. 57 Figura 17 - Distribuição de idade das crianças participantes dos testes. Fonte: Autoria própria (2024). Considerando apenas o questionário 2, com um total de 17 usuários, as questões entre 4 e 10 com alternativas de “Sim” e “Não”, onde “Sim” representa um viés positivo para a aplicação, podemos interpretar “Sim” como positivo, e “Não” como negativo. Logo, organizando as respostas na Figura 18, podemos observar que a tendência geral é de aprovação do aplicativo por parte dos usuários, com resultados acima de 50% de aprovação na maioria das questões. Entretanto a questão 8 (“O aplicativo tocou sons de acordo com o contexto do texto? Exemplo: som de passarinhos quando o texto fala sobre florestas”) recebeu 59% de respostas negativas. 7 anos 13% 8 anos 14% 9 anos 9% 10 anos 32% 11 anos 23% 12 anos 9% Distribuição de Idade 58 Figura 18 - Respostas das Questões de 4 a 10 em percentual. Fonte: Autoria própria (2024). Esta situação é explicada pela presença de apenas 22 contextos na aplicação no momento dos testes, causando uma situação em que para a maior parte dos textos não havia um contexto adequado naquele momento. Embora o GPT-4 tenha a capacidade de capturar contextos, mesmo de forma implícita (não é necessária a menção da palavra-chave “praia” para que haja a interpretação de que a história se passe em um ambiente praiano), não há armazenamento da leitura de textos anteriores na aplicação. Ou seja, em um livro que a história se passe na praia, nem todas as páginas ou trechos do texto terão explícita ou implicitamente uma menção ao local de onde a história se passa. Sem armazenamento de leituras anteriores, a aplicação não tem a capacidade de supor um contexto. Ainda sobre o questionário 2, a questão 11 (“Você precisa de ajuda para usar o aplicativo?”) representa uma inversão dos valores das questões anteriores, onde a resposta “Não” é positiva, pois indicaria que o usuário teve capacidade de facilmente utilizar o aplicativo sem suporte. Nesta questão, 50% das crianças responderam que sim, precisaram de ajuda para a utilização do aplicativo. Visto a simplicidade da UI, isso se deve ao tempo limitado de exposição que as crianças tiveram, e o mais importante, a dificuldade em tirar fotos com qualidade o suficiente para o bom funcionamento do aplicativo. Foi observado durante os testes que as crianças precisaram de suporte para aprender a capturar fotos em cenários melhores, com boa 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% 4 5 6 7 8 9 10 Respostas das Questões de 4 à 10 Positivo Negativo 59 iluminação, sem sombra e sem reflexo, evitando ao máximo, distorções. Também é importante salientar que os livros utilizados pelas crianças são os mesmos dos testes técnicos, e dentre eles, há casos de tipografia não convencional. Possíveis soluções a esta limitação são as mesmas quanto as limitações performáticas do sistema, melhorar a capacidade do processo de OCR e de correção do GPT-4 e diminuir a taxa de erro do processo. Quanto à satisfação dos usuários com relação a aplicação, a Figura 19 exibe as respostas de todas as 22 crianças que responderam aos dois questionários. É notável a tendência de satisfação com o aplicativo, visto que 86,3% das notas ficaram acima de 7. Figura 19 - Número de alunos em relação a Nota de Satisfação. Fonte: Autoria própria (2024). A média das notas é 8,09, a porcentagem de promotores é 50%, de detratores 9%, e o NPS calculado de 41, que classificaria este sistema como “Razoável” (Magalhães, 2019). A média e o NPS demonstram que a aplicação tem potencial entre os usuários, e que com melhorias adequadas, a satisfação e a usabilidade pelo público avaliado seriam aprimoradas. 0 0 1 0 0 1 1 2 6 7 4 0 1 2 3 4 5 6 7 8 9 10 Número de Alunos por Nota de Satisfação Notas 60 5 CONCLUSÃO Os resultados mostraram que o aplicativo obteve sucesso em casos de imagens ideais com Coeficiente de Dice médio de 0,92 de similaridade, e de 0,79 nos piores casos, sugerindo que mesmo com imagens não ideais, os resultados ainda são satisfatórios. Isso mostra que a qualidade da imagem obtida interfere fortemente nos resultados do processo de OCR, necessitando então que o usuário capture uma foto com o celular com boa iluminação e com o mínimo de interferências. Já o processo de correção do texto pelo GPT-4, embora não traga grandes melhorias quando o texto é comparado com o original pelo Coeficiente de Dice, esta correção remove erros e caracteres não textuais que afetam a sintetização de voz no momento da leitura e deterioram a experiência do usuário. O GPT-4 também se mostrou capaz de analisar um trecho de texto e detectar se um contexto previamente estabelecido existe neste texto analisado, possibilitando seu uso para a adição dos efeitos sonoros. Entretanto, ele não é apropriado para compreender um livro como um todo, visto que na implementação desta aplicação, a IA não armazena leituras anteriores. Com relação aos testes de experimentação e usabilidade realizados pelas crianças, elas demonstraram interesse nas funcionalidades do aplicativo, com avaliações moderadamente positivas (acima de 50%), embora algumas apresentaram dificuldades na sua utilização. Segundo a métrica NPS, o aplicativo se encontra na categoria “Razoável”, mostrando que ele tem potencial de escalabilidade e sucesso entre os usuários, desde que haja o devido investimento em funcionalidades mais robustas, maior performance com o uso de computação em nuvem e processamento de imagem. Conclui-se que é possível implementar um aplicativo de baixo custo utilizando tecnologias modernas de IA sendo ele capaz de auxiliar no processo de ensino e aprendizagem e no entretenimento de crianças, pois, com a assistência do aplicativo para leitura de livros, esse momento se torna mais prazeroso para as crianças. 5.1 Trabalhos Futuros O aplicativo desenvolvido tem um tempo de resposta alto quando comparado com aplicações profissionais, entretanto, considerando que este trabalho utilizou serviços gratuitos 61 fornecidos pelos diferentes provedores, existe um potencial corporativo ao qual melhorias são possíveis por meio de investimentos financeiros. Já para um cenário de larga escala, o processo de OCR poderá ser implementado em uma solução particular ou então a aplicação poderá fazer o uso dos planos pagos do OCRSpace, removendo os empecilhos da etapa de compactação da imagem, bem como o uso de planos pagos do App Engine torna-se necessário para a expansão da distribuição do aplicativo. 62 REFERÊNCIAS ABO, A. V.; LAM, M. S.; SETHI, R.; ULLMAN, J. D. Compilers: Principles, Techniques, and Tools. 2. ed. Boston: Pearson, c2007. ADAMS, D. O Guia do Mochileiro das Galáxias. 1. ed. São Paulo: Arqueiro, v. 1, 2010. AGNOL, J. L. H. D. Geração Procedural de Melodias por Gênero Usando Aprendizado de Máquina. 2022. Trabalho de Graduação (Tecnólogo em Tecnologia em Análise e Desenvolvimento de Sistemas) - Universidade Tecnológica Federal do Paraná, Pato Branco, 2022. ALBERT, T. Ginger The Giraffe. [S. l.]: Monkey Pen, 2020. Disponível em: https://monkeypen.com/blogs/news/ginger-the-giraffe-free-children-book. Acesso em: 2 out. 2023. AMORIM, M. L. Coleção Sabia, Sabiá? Belo Horizonte: Armazém de Ideias, v. 7, 1999. ANDROID STUDIO. Android, [2024]. Disponível em: https://developer.android.com/studio?hl=pt-br. Acesso em: 4 jan. 2024. AWARI. Zero Shot Learning em Machine Learning: Conceitos e Aplicações. [S. l.]: Awari, 31 jul. 2023. Disponível em: https://awari.com.br/zero-shot-learning-em-machine- learning-conceitos-e- aplicacoes/?utm_source=blog&utm_campaign=projeto+blog&utm_medium=Zero%20Shot% 20Learning%20em%20Machine%20Learning:%20Conceitos%20e%20Aplica%C3%A7%C3 %B5es. Acesso em: 31 jan. 2024. BAECKER, L. What is a Good API Response Time? [S. l.]: Hyperping, 4 mar. 2022. Disponível em: https://hyperping.io/blog/what-is-a-good-api-response-time. Acesso em: 19 fev. 2024. BAIRD, H. S.; TOMBRE, K. The Evolution of Document Image Analysis. In: DOERMANN, D.; TOMBRE, K. Handbook of Document Image Processing and Recognition. College Park: Springer Reference, v. 1, 2014. p. 63-72. BAXTER-REYNOLDS, M. Microsoft TypeScript: Can the father of C# save us from the tyranny of JavaScript? [S. l.]: ZDNet, 1 out. 2012. Disponível em: https://www.zdnet.com/article/microsoft-typescript-can-the-father-of-c-save-us-from-the- tyranny-of-javascript/. Acesso em: 15 dez. 2023. BERNABEI, M.; COLABIANCHI, S.; FALEGNAMI, A.; COSTANTINO, F. Students’ use of large language models in engineering education: A case study on technology acceptance, perceptions, efficacy, and detection chances. Computers and Education: Artificial Intelligence, v. 5, 2023. ISSN 100172. BEUTEL, G.; GEERITS, E.; KIELSTEIN, J. T. Artifcial hallucination: GPT on LSD? Critical Care, Londres, v. 27. 148. 2023. 63 BRASIL. Ministério das Comunicações. Celular segue como aparelho mais utilizado para acesso à internet no Brasil. [Brasília]: Ministério das Comunicações, 16 set. 2022. Disponível em: https://www.gov.br/mcom/pt-br/noticias/2022/setembro/celular-segue-como- aparelho-mais-utilizado-para-acesso-a-internet-no-brasil. Acesso em: 7 fev. 2024. BRIAN, M. Google's new 'Material Design' UI coming to Android, Chrome OS and the web. [S. l.]: Engadget, 15 jul. 2014. Disponível em: https://www.engadget.com/2014-06-25- googles-new-design-language-is-called-material-design.html. Acesso em: 3 jan. 2024. BROOKS, S. Opostos no Mar. 1. ed. [S. l.]: Ciranda Cultural, 2018. CANTON, K.; VOLPI, A. Brincadeiras. 1. ed. São Paulo: Livraria Martins Fontes, 2006. CECI, L. Number of mobile app downloads worldwide from 2016 to 2023. [S. l.]: Statista, 16 jan. 2024. Disponível em: https://www.statista.com/statistics/271644/worldwide-free-and- paid-mobile-app-store-downloads/. Acesso em: 7 fev. 2024. CHANDRAKAR, S. Mastering TypeScript: 10 Essential Features for Writing Better Code. [S. l.]: Medium, 14 mar. 2023. Disponível em: https://bootcamp.uxdesign.cc/mastering- typescript-10-essential-feature