System Architecture

BP-PromptTools:
Client-Side Token Auditing

Documentação técnica sobre as decisões de arquitetura, fluxo de dados e estratégias de performance utilizadas no desenvolvimento da ferramenta.

01 Filosofia de Design

Privacy-First (GDPR/LGPD)

Ao adotar uma arquitetura Client-Side Only, garantimos que os prompts sensíveis dos usuários nunca trafeguem pela rede nem sejam armazenados em servidores externos. O processamento ocorre exclusivamente na memória do navegador.

Zero-Latency Interaction

Removemos o round-trip de requisições ao servidor para cálculos. A contagem de tokens e estimativa de custo são reativas, utilizando JavaScript puro (Vanilla ES6) para feedback instantâneo (< 16ms).

02 Fluxo de Dados

USER INPUT Text / File

BROWSER ENGINE

Token Heuristics

Cost Calculation

Context Limit

UI Update

LocalStorage

O fluxo elimina a necessidade de banco de dados SQL. A persistência de templates utiliza a API window.localStorage, permitindo que o usuário feche a aba e retorne sem perder dados, mantendo o estado persistente entre sessões.

03 Estrutura de Modelos

A inteligência de precificação é desacoplada da lógica de aplicação. Utilizamos um arquivo models.json que atua como fonte da verdade, permitindo atualizações de preço sem recompilação de código ("Hot-Swap").

{
  "gemini-3-0-pro": {
    "name": "Gemini 3.0 Pro",
    "provider": "Google",
    "type": "multimodal",
    
    // Custos de Input/Output (por 1k tokens)
    "input_cost_1k": 0.00125,
    "output_cost_1k": 0.00375,
    
    // Custos Específicos de Mídia (Token-based)
    "image_token_cost": 1120,
    "audio_token_cost_sec": 32,
    
    // Limites de Memória
    "context_window": 2000000,
    "chat_safe_limit": 128000
  }
}

Exemplo de Schema v2.1

04 Stack Tecnológica

BACKEND / ROUTING

PHP 8.2+

Lightweight Router & SEO Header Injection.

CORE LOGIC

Vanilla JS (ES6)

No Frameworks. Zero Build Step. Native Modules.

STYLING

Tailwind CSS

Utility-first design system & Dark Mode.