Interfaces inteligentes: IA no front-end para personalizar UI em tempo real

A IA no front-end nao se resume a chatbots. Existe um terreno pratico e pouco explorado: usar modelos leves e heuristicas inteligentes para adaptar a interface em tempo real, conforme o comportamento e as necessidades do usuario.

Personalizacao de layout por comportamento

O ponto de partida e observar como o usuario interage com a interface e adaptar a apresentacao. Nao estamos falando de rastreamento invasivo, mas de sinais explicitos e implicitos que o usuario emite naturalmente.

Hook: useAdaptiveLayout

import { useState, useEffect, useCallback } from 'react';

interface LayoutPreferences {
  preferredCardSize: 'compact' | 'normal' | 'large';
  preferGrid: boolean;
  recentlyViewedCategories: string[];
}

export function useAdaptiveLayout() {
  const [preferences, setPreferences] = useState<LayoutPreferences>({
    preferredCardSize: 'normal',
    preferGrid: true,
    recentlyViewedCategories: [],
  });

  const trackInteraction = useCallback((category: string, action: string) => {
    setPreferences(prev => {
      const updated = [...prev.recentlyViewedCategories, category]
        .filter((c, i, arr) => arr.indexOf(c) === i)
        .slice(-5);

      return {
        ...prev,
        recentlyViewedCategories: updated,
        preferredCardSize: action === 'expand' ? 'large' : prev.preferredCardSize,
      };
    });
  }, []);

  return { preferences, trackInteraction };
}

Esse hook rastreia interacoes como cliques em categorias e expansoes de cards, ajustando o layout automaticamente. Se o usuario expande frequentemente cards, o layout passa a exibi-los maiores por padrao.

Componente adaptativo

function ProductGrid({ products }: { products: Product[] }) {
  const { preferences, trackInteraction } = useAdaptiveLayout();

  const sortedProducts = useMemo(() => {
    return [...products].sort((a, b) => {
      const aScore = preferences.recentlyViewedCategories.includes(a.category) ? 1 : 0;
      const bScore = preferences.recentlyViewedCategories.includes(b.category) ? 1 : 0;
      return bScore - aScore;
    });
  }, [products, preferences.recentlyViewedCategories]);

  return (
    <div className={`grid ${preferences.preferGrid ? 'grid-cols-3' : 'grid-cols-1'}`}>
      {sortedProducts.map(product => (
        <ProductCard
          key={product.id}
          product={product}
          size={preferences.preferredCardSize}
          onInteract={(action) => trackInteraction(product.category, action)}
        />
      ))}
    </div>
  );
}

Recomendacoes contextuais na UI

Alem de reordenar conteudo, a IA pode sugerir acoes e componentes relevantes. Um modelo simples baseado em contexto funciona bem sem depender de APIs externas.

interface UIContext {
  timeOfDay: 'morning' | 'afternoon' | 'evening' | 'night';
  deviceType: 'mobile' | 'desktop';
  scrollDepth: number;
  sessionDuration: number;
}

function getRecommendedAction(context: UIContext): string | null {
  const { timeOfDay, deviceType, scrollDepth, sessionDuration } = context;

  if (deviceType === 'mobile' && scrollDepth > 0.8 && sessionDuration > 120) {
    return 'show_cta_bottom';
  }

  if (timeOfDay === 'evening' && deviceType === 'desktop') {
    return 'enable_dark_mode';
  }

  if (sessionDuration < 10 && scrollDepth < 0.2) {
    return 'show_onboarding_tooltip';
  }

  return null;
}

Essas heuristicas simples substituem chamadas a APIs de IA na maioria dos cenarios de personalizacao de UI. Sao deterministicas, rapidas, faceis de testar e nao adicionam latencia.

Acessibilidade adaptativa

A acessibilidade e o caso de uso mais impactante da IA adaptativa no front-end. Em vez de depender apenas das configuracoes do sistema operacional, a interface pode detectar padroes de uso que indicam dificuldades e ajustar automaticamente.

Deteccao de padroes

export function useAdaptiveA11y() {
  const [settings, setSettings] = useState({
    fontSize: 'normal',
    contrast: 'normal',
    motionReduced: false,
    clickTimeout: 0,
  });

  useEffect(() => {
    const prefersReducedMotion = window.matchMedia(
      '(prefers-reduced-motion: reduce)'
    ).matches;

    const prefersHighContrast = window.matchMedia(
      '(prefers-contrast: more)'
    ).matches;

    setSettings(prev => ({
      ...prev,
      motionReduced: prefersReducedMotion,
      contrast: prefersHighContrast ? 'high' : 'normal',
    }));
  }, []);

  useEffect(() => {
    let misclickCount = 0;
    let touchStartTime = 0;

    const handleTouchStart = () => { touchStartTime = Date.now(); };
    const handleTouchEnd = (e: TouchEvent) => {
      const duration = Date.now() - touchStartTime;
      if (duration > 800) misclickCount++;

      if (misclickCount > 3) {
        setSettings(prev => ({ ...prev, fontSize: 'large' }));
      }
    };

    window.addEventListener('touchstart', handleTouchStart);
    window.addEventListener('touchend', handleTouchEnd);

    return () => {
      window.removeEventListener('touchstart', handleTouchStart);
      window.removeEventListener('touchend', handleTouchEnd);
    };
  }, []);

  return settings;
}

Esse hook combina preferencias do sistema (que ja sao sinalizadas via CSS media queries) com deteccao comportamental. Se o usuario demora muito nos toques ou erra repetidamente, a fonte e aumentada automaticamente.

Composicao dos hooks

O poder dessa abordagem esta na composicao. A interface combina multiplos sinais para tomar decisoes:

function AdaptiveApp({ children }: { children: React.ReactNode }) {
  const a11y = useAdaptiveA11y();
  const { preferences } = useAdaptiveLayout();

  const className = [
    a11y.fontSize === 'large' && 'text-lg',
    a11y.contrast === 'high' && 'high-contrast',
    a11y.motionReduced && 'reduce-motion',
  ].filter(Boolean).join(' ');

  return (
    <div className={className}>
      {children}
    </div>
  );
}

Privacidade e LGPD

Toda a personalizacao descrita aqui acontece no cliente, sem enviar dados comportamentais para servidores. Isso e fundamental para conformidade com a LGPD: nao ha coleta de dados pessoais, nao ha necessidade de consentimento para cookies, e o usuario mantem controle total.

A linha entre personalizacao utilitária e vigilancia e fina. O principio norteador deve ser: adaptar a interface para facilitar a vida do usuario, nao para manipular seu comportamento.

Conclusao

IA no front-end e mais pragmatica do que parece. Nao e preciso integrar modelos pesados ou APIs de machine learning para criar interfaces inteligentes. Heuristicas simples, combinadas com hooks React e preferencias do sistema, ja entregam personalizacao significativa com zero latencia e zero risco de privacidade.

O caminho e comecar pela acessibilidade adaptativa (maior impacto, menor risco), depois evoluir para personalizacao de layout e, por fim, recomendacoes contextuais. Cada etapa agrega valor sem depender da anterior.