ESTUDO DE CASO EM IA & ACESSIBILIDADE

VisionVoice - Assistente IA
Multimodal & Voz Acessível

Autodescrição inteligente de imagens via Google Gemini Flash, sintetização vocal em tempo real (gTTS) e interface universal em conformidade com as diretrizes WCAG 2.1 AA/AAA.

Desenvolvido por: Douglas Chaves Moura

01. Contexto & Motivação da Acessibilidade

A web moderna é predominantemente visual. Para milhões de pessoas cegas ou com baixa visão, a ausência de autodescrições adequadas em imagens representa uma barreira contínua de exclusão digital e perda de contexto informacional.

O VisionVoice nasceu como um projeto de engenharia de software focado em resolver esse desafio de ponta a ponta: transformar imagens arbitrárias em narrativas sonoras ricas, precisas e acessíveis, combinando visão computacional de última geração ao processamento de áudio sintetizado em tempo real.

O VisionVoice integra o modelo multimodal Google Gemini (2.0 / 1.5 Flash) a um motor de síntese vocal gTTS em memória (`BytesIO`), entregando uma interface construída sob os mais estritos princípios do W3C / WCAG 2.1 (Níveis AA e AAA): modo alto contraste instantâneo, escalabilidade de fontes (12px a 24px), navegação 100% por teclado e anúncios dinâmicos para leitores de tela (NVDA, JAWS e TalkBack).

02. Arquitetura do Sistema

A arquitetura foi projetada para ser leve, assíncrona e desacoplada, dividida em três camadas bem definidas com comunicação puramente via REST:

  • Frontend SPA Acessível (Client Tier): Desenvolvido em Pure Vanilla Web Standards (HTML5 semântico com ARIA Landmark Roles, CSS3 com variáveis de alto contraste e JavaScript ES6+), sem dependência de frameworks pesados e com carregamento instantâneo.
  • Backend FastAPI & gTTS Engine (Core Engine): Servidor ASGI em Python para ingestão assíncrona de uploads multipart, roteamento de prompts, higienização regex de textos gerados e geração de áudio em memória sem escrita em disco.
  • Camada Multimodal (AI Cloud): Integração direta com a API REST do Google Gemini, executando análise visual estruturada e descoberta dinâmica de modelos em baixa latência (1 a 3 segundos).
ARQUITETURA DO SISTEMA // VISIONVOICE LABORATÓRIO LOCAL FULL-STACK CAMADA 01 • CLIENT TIER Frontend Acessível WCAG 2.1 AA/AAA • Vanilla JS Modo Alto Contraste Tema escuro e contornos dourados Fontes Dinâmicas (12-24px) Controles rápidos A+, A- e A Atalhos Globais de Teclado Alt+1, Alt+2, Alt+C, Alt+P Leitor de Tela (ARIA-Live) Anúncios dinâmicos para NVDA Player de Áudio Nativo Autoplay e download de MP3 Dois Modos de Operação Manual (gTTS) & Auto (IA) SPA PORT: 5500 / 8000 POST /analyze POST /audio 200 MP3 CAMADA 02 • CORE ENGINE FastAPI & gTTS Python 3.9+ ASGI • Síntese Vocal Síntese em Memória Stream via BytesIO sem disco Higienização Regex Limpeza de <think> e markdown Cliente HTTP Assíncrono Consumo via httpx de alta vazão Descoberta Dinâmica REST Auto-fallback de modelos Flash Formatação Base64 / MP3 Áudio imediato para o player Resolução Flexível de Chaves Chave via UI ou arquivo .env ASGI SERVER: 127.0.0.1:8000 generate /models inline_data CAMADA 03 • AI CLOUD Google Gemini Multimodal Vision Flash API Prompt Estruturado (3 Etapas) Visão geral, espacial e textos Português Natural (pt-BR) Fluidez total para narração vocal Transcrição OCR Integrada Leitura de cartazes e rótulos Sem Raciocínio Interno Bloqueio de tags <think> Baixa Latência (1 a 3s) Geração rápida para UX fluida Zero Retenção de Imagens Stateless e privacidade total API: GEMINI 2.0 FLASH 💻 AMBIENTE: LOCALHOST (ESTUDO) 🔒 PROCESSAMENTO: MEMÓRIA / BYTESIO 👁️ FOCO: ACESSIBILIDADE WCAG 2.1

03. Engenharia de Prompt Acessível & Higienização Textual

A qualidade de uma autodescrição para sintetizador de voz depende criticamente de como a IA é instruída e de como a saída é tratada antes da conversão fonética. O VisionVoice implementa um prompt em 3 camadas, garantindo que o modelo nunca produza pensamentos intermediários (<think>) ou estruturas de lista técnica que prejudiquem a audição:

>_ Console // Pipeline de Prompt & Filtro Regex de Higienização [ VisionVoice Core ]
> ACCESSIBILITY_VISION_PROMPT = """
  1. Visão Geral (o que é a imagem e o tema central).
  2. Detalhes Espaciais, Cores e Iluminação (elementos principais da cena).
  3. Textos visíveis (se houver, transcritos entre aspas).
  NÃO inclua <think>, NÃO use markdown (#, **, `) ou seções em inglês."""

> clean_generated_text(raw_output)
----------------------------------------------------------------------
Entrada Raw IA : "<think>Analyzing street scene...</think> **Visão Geral:** Fotografia urbana de uma faixa de pedestres movimentada em dia ensolarado..."
Saída Higienizada: "Fotografia urbana de uma faixa de pedestres movimentada em dia ensolarado. No centro, pessoas caminham sob iluminação natural quente. Ao fundo, uma placa sinaliza 'Avenida Central'."
----------------------------------------------------------------------
Status: Texto corrido 100% natural pronto para sintetização vocal em 1.2ms.

Esse pipeline elimina qualquer ruído de formatação e converte o resultado em parágrafos contínuos que soam confortáveis e humanos quando lidos pelo sintetizador de voz.

04. Síntese Vocal In-Memory com gTTS & Streaming

Para evitar gargalos de I/O em disco e garantir que os dados do usuário permaneçam confidenciais e efêmeros, a conversão fonética em MP3 é executada inteiramente na memória RAM utilizando io.BytesIO:

  • Zero Persistência em Disco: O arquivo de áudio nunca é gravado no sistema de arquivos local, eliminando acúmulo de cache temporário.
  • Streaming Assíncrono: No endpoint POST /api/generate-audio, a resposta é enviada via StreamingResponse(media_type="audio/mpeg") para reprodução imediata.
  • Entrega Base64 Data URI: No endpoint multimodal POST /api/analyze-and-speak, o áudio é encodado em Base64, permitindo que a SPA reproduza o som instantaneamente e disponibilize botão de download sem requisições adicionais.
🎙️ Arquitetura Stateless de Áudio: "Ao receber o texto higienizado, o sintetizador gera o stream binário MP3 em ~400ms na memória e o entrega diretamente ao navegador, garantindo privacidade, desempenho e conformidade com boas práticas de segurança."

05. Demonstração Visual & Recursos de Acessibilidade

Abaixo, a comparação entre a interface no Modo Padrão (Claro) e no Modo Alto Contraste (Escuro com contornos dourados), demonstrando a versatilidade visual para diferentes necessidades e perfis de visão:

Interface do VisionVoice no Modo Padrão exibindo o seletor de modos e campo de chave API
Figura 1: Interface principal no Modo Padrão - Seletor de Modo Manual / Automático, campo de API Key e área de upload.
Interface do VisionVoice no Modo Alto Contraste com autodescrição gerada pela IA e player de áudio MP3
Figura 2: Tema de Alto Contraste (WCAG 2.1 AA/AAA) ativo - Autodescrição gerada pela IA e player de áudio MP3 pronto para audição e download.

Atalhos Globais de Teclado (Navegação Rápida)

Para empoderar usuários que utilizam exclusivamente o teclado ou leitores de tela, o VisionVoice conta com atalhos globais mapeados em toda a aplicação:

Atalho Função / Ação Público Beneficiado
Alt + 1 Alternar para o Modo Manual (Digitação de texto + gTTS) Todos os usuários
Alt + 2 Alternar para o Modo Automático (IA Multimodal Gemini) Todos os usuários
Alt + C Ativar / Desativar Modo Alto Contraste Baixa visão & fotofobia
Alt + P Tocar / Pausar o áudio sintetizado gerado Leitores de tela & audição rápida
Alt + + / - / 0 Ajuste de Fonte (Aumentar, Diminuir ou Redefinir) Baixa visão & legibilidade
Alt + H Abrir Guia de Acessibilidade e Ajuda na tela Novos usuários & navegação guiada

06. Homologação da API & Métricas de Desempenho

O back-end foi homologado para garantir tempo de resposta ultrarrápido, tratamento seguro de exceções e validação estrita de entradas multipart e JSON:

>_ Benchmark & Health Suite // Endpoints FastAPI + Gemini Flash [ 100% Operacional ]
> curl -I http://127.0.0.1:8000/api/health
HTTP/1.1 200 OK {"status": "online", "message": "VisionVoice API funcionando com sucesso."}

> test_analyze_and_speak(image="test_sample.jpg", model="gemini-2.0-flash")
----------------------------------------------------------------------
1. Upload & Validação MIME (image/jpeg)       : VÁLIDO [ 12ms ]
2. Descoberta de Modelos (/v1beta/models)     : OK (gemini-2.0-flash)
3. Injeção de Prompt & Análise Multimodal     : OK (1.42s)
4. Filtro Regex de Higienização Textual       : OK (1.1ms)
5. Síntese Vocal gTTS na Memória (BytesIO)    : OK (380ms)
6. Retorno Base64 + Streaming MP3             : 200 OK (Tamanho: 48.2 KB)
----------------------------------------------------------------------
Resultado: Pipeline completo executado em ~1.81s com Zero I/O em disco.

Explore o Projeto no GitHub

Acesse o código-fonte completo, a documentação Swagger e o design system acessível do VisionVoice.

Repositório GitHub Voltar aos Projetos