Criador de overlays com IA

Gere um overlay, teste e carregue o resultado salvo no OBS.

O que é

O criador de overlays com IA ajuda a criar overlays HTML a partir de instruções. Ele não é a própria página do OBS. Use aiprompt.html para criar e visualizar, depois use aioverlay.html para a página resultante.

Página do criador de overlays com IA com campo de instruções, controles de prévia, botões de simulação de eventos, controles de salvamento e aba de código HTML
Visualize e simule eventos antes de colocar o overlay no OBS.

1. Crie na página de instruções

  1. Abrir aiprompt.html?session=YOUR_SESSION.
  2. Descreva o que o overlay deve fazer e como deve ser seu visual.
  3. Use instruções específicas: layout, comportamento das mensagens, cores, duração das animações e tipos de evento importantes.
  4. Use os controles de prévia e simule eventos de chat, seguidores, inscrições, presentes, raids, doações e JSON personalizado.
  5. Salve o overlay com um nome de página claro.

2. Adicione a página resultante ao OBS

Depois de salvar, adicione a página resultante como fonte de navegador do OBS. Mantenha a mesma sessão e o mesmo nome da página salva.

https://socialstream.ninja/aioverlay.html?session=YOUR_SESSION&overlay=chat-overlay

Se o overlay for transparente ou aparecer apenas durante eventos, use primeiro os botões de simulação para confirmar que ele pode ser exibido.

3. Use modelos para configurar mais rápido

Se precisa de algo confiável rapidamente, comece com um modelo e personalize. Use o criador com IA quando quiser algo mais específico.

Prévia de overlay do Social Stream Ninja com uma mensagem de chat estilizada
Modelos são melhores para layouts conhecidos; geração por IA é melhor para experimentos personalizados.

Correções comuns

  • Prévia em branco: clique em um botão de simulação e confira o painel do console.
  • OBS em branco: confira se o nome da página salva e a sessão correspondem aos do criador.
  • Comportamento incorreto dos eventos: teste com o tipo exato de evento esperado, não apenas chat normal.
  • O código gerado não funciona: use Revisar e aprimorar (Review & polish) ou simplifique as instruções.
  • O overlay funciona no criador, mas não no OBS: abra a mesma URL de aioverlay.html em um navegador normal primeiro.