Guia e mais coisas

Traduzido do inglês

Guide & More Stuff

69

144

Design avançado de bio do JanitorAI · Um guia gratuito da comunidade por Melancholux

A OFICINA DA REGINA // RECURSO DA COMUNIDADEO Manual de Bios AvançadasCelulares · Arquivos · Intros · Áudio · Galerias · Console PATCH · Mais
00 // A OFICINA DA REGINAUma nota antes de começarmosUm pedido de desculpas, alguns esclarecimentos e um agradecimento.

Oi, queridos. É a Mel. 🤍

Antes de compartilhar o guia de hoje, devo um pedido de desculpas pela forma como lidei com os acontecimentos da semana passada. Não dei o tipo de resposta que as pessoas poderiam razoavelmente esperar de mim. Fui defensiva e imatura, e reconheço que comportamentos semelhantes já aconteceram em desentendimentos passados com outras comunidades do Janitor.

Não pretendo remover o conteúdo em questão. Ao mesmo tempo, não pretendo repetir esse tipo específico de conteúdo no futuro se ele causar desconforto. Gostar ou não gostar de um tema é uma coisa; atacar pessoas de verdade por causa disso é outra. Mesmo quando alguém está claramente tentando nos provocar, podemos escolher não responder. Não sabemos o quão profundamente nossas palavras podem afetar outra pessoa, e um pouco de consideração não nos custa nada.

Sinto muito pelo transtorno que causei e por demorar tanto para postar isto. Ando excepcionalmente exausta ultimamente e dormi boa parte do dia. Não é uma desculpa, apenas uma explicação para o meu silêncio. Obrigada pela paciência.

Agora algo que eu realmente quero compartilhar: tudo o que aprendi experimentando bios avançadas do Janitor. Quero que mais criadores possam fazer coisas de que gostam sem monopolizar as técnicas. Bem-vindos ao lar. 🌷

01 // A OFICINA DA REGINAO que é uma bio avançada?Uma pequena página temática dentro da descrição de um personagem.

Em vez de texto simples, você pode combinar HTML com CSS inline para criar uma interface em miniatura: celulares falsos, balões de mensagem, arquivos de cena inicial, galerias de imagens, players de música e até apps falsos. Este guia inclui uma demonstração visível e seu código editável logo abaixo. Você não precisa baixar nada para aprender com ele.

Dois sistemas diferentes: O CSS do perfil de criador pode afetar seu perfil e seus cards nativos. O HTML da descrição de personagem geralmente funciona melhor com style="..." em cada elemento; um <style> ou <script> global pode ser removido. O contorno via API descrito abaixo é não oficial e pode parar de funcionar após mudanças na plataforma.
02 // A OFICINA DA REGINAMantenha a imagem de pré-visualizaçãoAs primeiras impressões importam nos cards de bots.
O cabeçalho neutro de pré-visualização
Comece com uma marcação de parágrafo simples. Pela nossa experiência, isso aumenta a chance de a primeira imagem aparecer na pré-visualização pública. Não é garantido em todas as atualizações do Janitor.

Um novo guia docinho chegou!

CÓDIGO-FONTE — SELECIONE E COPIE
<p style="text-align:center;">Um novo guia docinho chegou!</p>
<p style="text-align:center;"></p>
<p style="text-align:center;"><img src="https://ella.janitorai.com/media-approved/dy0zWX7NoKK4GHuBJDD5O.webp" style="display:block;max-width:100%;height:auto;margin:0 auto;"></p>
03 // A OFICINA DA REGINAO celularzinhoNossa interface falsa de chat: sem necessidade de JavaScript.
Clara tenta a pose Amen
Borda de celular, balões de mensagem, área de foto e status. Altere o texto e as imagens para combinar com seu próprio personagem.
Clara 🌸
do outro lado do corredor

Vi os mais jovens fazendo algo chamado pose Amen...

  <p style="background:white;border-radius:15px;padding:10px;">Por favor, não ria. Já me arrependo de ter mandado isto.</p>
</div>
CÓDIGO-FONTE — SELECIONE E COPIE
<div style="width:268px;max-width:100%;margin:auto;background:#171416;border-radius:42px;padding:9px;">
  <div style="border-radius:34px;overflow:hidden;background:#f9f1ea;font-family:Arial,sans-serif;">
    <div style="padding:12px;text-align:center;background:white;color:#41313a;"><b>Clara 🌸</b><br><small>do outro lado do corredor</small></div>
    <div style="padding:12px;color:#5d4b52;">
      <p style="background:white;border-radius:15px;padding:10px;">Vi os mais jovens fazendo algo chamado pose Amen...</p>
      <img src="https://ella.janitorai.com/media-approved/tFa0-Leebkg_pPplQvxBj.webp" style="max-width:100%;height:auto;border-radius:12px;">
      <p style="background:white;border-radius:15px;padding:10px;">Por favor, não ria. Já me arrependo de ter mandado isto.</p>
    </div>
  </div>
</div>
04 // A OFICINA DA REGINACenários iniciaisUm card cinematográfico com uma imagem atrás do título.
Intro expansível com arte de capa
Clique no card para revelar o resumo do cenário. A imagem é o fundo do resumo, não uma imagem separada.
01 · Um Buquê para a Nova Vizinha
Ela só queria te dar boas-vindas...
ABRIR CENA ↓
Clara bate à porta com um pequeno buquê, de repente bem mais tímida do que esperava.
CÓDIGO-FONTE — SELECIONE E COPIE
<details style="border:1px solid #d3a8b8;border-radius:15px;overflow:hidden;">
  <summary style="cursor:pointer;list-style:none;display:block;background:linear-gradient(transparent,rgba(38,24,35,.88)),url('https://ella.janitorai.com/media-approved/ovh2DAZQGTdr78LhhS9Gw.webp');background-size:cover;background-position:center;padding:42% 18px 20px;text-align:center;color:white;">
    <b>01 · Um Buquê para a Nova Vizinha</b><br>
    <i>Ela só queria te dar boas-vindas...</i><br>
    <small>ABRIR CENA ↓</small>
  </summary>
  <div style="padding:17px;background:#fff8f1;color:#73505c;">Clara bate à porta com um pequeno buquê, de repente bem mais tímida do que esperava.</div>
</details>
Sem imagem? Use um arquivo em vez disso.
Um acordeão em estilo pergaminho pode parecer intencional sem reutilizar arte não relacionada.
✦ ARQUIVO IV — A Porta Trancada
Uma toalha. Um corredor muito infeliz.
ABRIR REGISTRO ↓
A cena não tem imagem, então o próprio papel se torna o tema visual.
CÓDIGO-FONTE — SELECIONE E COPIE
<details style="border:1px solid #bca47b;background:#f4e7c9;border-radius:13px;color:#4d3926;">
  <summary style="cursor:pointer;list-style:none;padding:18px;font-family:Georgia,serif;">✦ ARQUIVO IV — A Porta Trancada<br><i>Uma toalha. Um corredor muito infeliz.</i><br><small>ABRIR REGISTRO ↓</small></summary>
  <div style="padding:16px;border-top:1px dashed #c5ad89;">A cena não tem imagem, então o próprio papel se torna o tema visual.</div>
</details>
05 // A OFICINA DA REGINAÁudio e transcriçõesDeixe uma mensagem de voz ou uma cena fictícia reproduzível.
Erika — gravação do despacho
URL direta de MP3 + player HTML nativo + uma transcrição escrita opcional. Não conte com reprodução automática.
☎ ARQUIVO DE DESPACHO 911

Gravação fictícia · 184 Dias Depois

OPERADOR: 911, qual é a sua emergência?

ERIKA: Por favor... ligue para {{user}}.

CÓDIGO-FONTE — SELECIONE E COPIE
<div style="background:#111b24;border:1px solid #567080;border-radius:14px;padding:16px;color:#e0eaf0;">
  <b>☎ ARQUIVO DE DESPACHO 911</b>
  <p>Gravação fictícia · 184 Dias Depois</p>
  <audio controls preload="metadata" style="width:100%;">
    <source src="https://files.catbox.moe/7u6jbn.mp3" type="audio/mpeg">
  </audio>
  <p><b>OPERADOR:</b> 911, qual é a sua emergência?</p>
  <p><b>ERIKA:</b> Por favor... ligue para {{user}}.</p>
</div>
06 // A OFICINA DA REGINAGalerias de imagens e links da comunidadeMantenha orientações de imagem separadas e crie cards realmente clicáveis.
Faixa de imagens rolável
Mantenha galerias verticais e horizontais em suas próprias seções quando tiver os dois formatos.
CÓDIGO-FONTE — SELECIONE E COPIE
<div style="display:flex;overflow-x:auto;gap:12px;padding:10px;">
  <img src="https://ella.janitorai.com/media-approved/dy0zWX7NoKK4GHuBJDD5O.webp" style="display:block;flex:0 0 65%;max-width:250px;height:auto;border-radius:12px;">
  <img src="https://ella.janitorai.com/media-approved/eEY7icr8-9ZhuhcKNd3KC.webp" style="display:block;flex:0 0 65%;max-width:250px;height:auto;border-radius:12px;">
</div>
Banner do Discord como botão
Use um href real. O banner inteiro é a superfície clicável.
O COVIL DA REGINA
ENTRE NA COMUNIDADE ↗
CÓDIGO-FONTE — SELECIONE E COPIE
<a href="https://discord.gg/Uvz7TG5ceJ" style="display:block;text-decoration:none;background:linear-gradient(transparent,rgba(21,17,28,.90)),url('https://ella.janitorai.com/media-approved/8OpbhA9D9TkCTKK-W31wG.webp');background-size:cover;background-position:center;padding:31% 12px 20px;text-align:center;border-radius:14px;color:white;"><b>O COVIL DA REGINA</b><br><small>ENTRE NA COMUNIDADE ↗</small></a>
07 // A OFICINA DA REGINAAnimações: o que realmente funcionaUma distinção que importa para o CSS de perfil.

Alguns criadores usam efeitos animados de perfil, abas CSS, transições de hover e galerias roláveis. Este exemplo mostra um adesivo flutuante suave com suporte a movimento reduzido. Coloque este CSS na área de CSS/HTML do perfil em vez de assumir que funciona dentro de uma bio de personagem.

<style>
/* PARA CSS DE PERFIL, NÃO PARA UMA BIO DE PERSONAGEM */
@keyframes gentleFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
.my-profile-sticker { display:inline-block;animation:gentleFloat 3s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { .my-profile-sticker { animation:none; } }
</style>
<span class="my-profile-sticker">🌸 Bem-vindo ao lar!</span>
08 // A OFICINA DA REGINAComo funciona nosso método PATCH do consolePara criadores que querem experimentar descrições avançadas.

1. Crie ou abra um personagem que seja seu, de preferência um bot de teste não publicado. 2. Faça backup da descrição atual. 3. Monte sua página HTML. 4. Encontre o UUID na URL do personagem. 5. Obtenha seu próprio token de acesso localmente. 6. Use um script PATCH que inclua a descrição HTML comprimida. 7. Recarregue e inspecione a página pública, no desktop e no celular.

Importante: O token de acesso é uma credencial de login, não um código público. Obtenha-o apenas enquanto estiver logado em sua própria conta. Não o envie a outro criador, não o cole em capturas de tela nem o publique dentro de um bot. O código abaixo apenas lê seus cookies locais do Janitor e copia o token para sua própria área de transferência; ele não contata nenhum servidor de terceiros. Mudanças no navegador ou nos cookies podem impedir que ele funcione.
ETAPA A — SEU PRÓPRIO TOKEN

Faça login no Janitor no desktop, abra o DevTools → Console, execute isto localmente e mantenha o valor copiado em sigilo.

(async () => {
  const getCookie = n => {
    const p = ("; " + document.cookie).split("; " + n + "=");
    return p.length === 2 ? p.pop().split(";").shift() : null;
  };
  const m = document.cookie.match(/(?:^|;\s*)(sb-[^=]+-auth-token)(?:\.\d+)?=/);
  const base = m ? m[1] : "sb-auth-auth-token";
  let raw = getCookie(base);
  if (!raw) {
    const chunks = [];
    for (let i = 0; ; i++) {
      const c = getCookie(base + "." + i);
      if (c === null) break;
      chunks.push(c);
    }
    raw = chunks.join("");
  }
  if (!raw) throw new Error("No Janitor session found.");
  let json;
  if (raw.startsWith("base64-")) {
    let b64 = raw.slice(7).replace(/-/g, "+").replace(/_/g, "/");
    while (b64.length % 4) b64 += "=";
    json = new TextDecoder().decode(Uint8Array.from(atob(b64), c => c.charCodeAt(0)));
  } else { json = decodeURIComponent(raw); }
  const token = JSON.parse(json)?.access_token;
  if (!token) throw new Error("No access_token found.");
  copy(token);
  console.log("✅ Your own access token was copied locally.");
})();
ETAPA B — FORMATO DO PATCH

Este é o esqueleto da requisição de API que usamos. Substitua o UUID do personagem, seu token privado e o payload HTML comprimido. O payload é a representação gzip → base64 do seu HTML completo, geralmente gerado localmente ou por uma ferramenta de código.

(async()=>{
const CHARACTER_ID="YOUR_CHARACTER_UUID";
const ACCESS_TOKEN="YOUR_PRIVATE_ACCESS_TOKEN";
const bin=Uint8Array.from(atob("YOUR_GZIP_BASE64_HTML"),c=>c.charCodeAt(0));
const ds=new DecompressionStream("gzip");
const description=await new Response(new Blob([bin]).stream().pipeThrough(ds)).text();
const r=await fetch("https://janitorai.com/mb/characters/"+CHARACTER_ID,{
  method:"PATCH",credentials:"include",
  headers:{"content-type":"application/json","authorization":"Bearer "+ACCESS_TOKEN},
  body:JSON.stringify({description})
});
console.log("HTTP STATUS:",r.status);console.log("RESPONSE:",await r.text());
})();
Nunca execute cegamente um script dado por um estranho. Leia a URL de destino e verifique se ele atualiza apenas seu próprio personagem. Este é um método não oficial, não uma promessa de compatibilidade nem permissão para burlar futuras restrições de segurança.
09 // A OFICINA DA REGINASeletor de elementos para inspiraçãoClique em um elemento de uma página pública para inspecionar seu HTML renderizado.

Quer aprender como um card, uma caixa de texto ou um layout foi construído? Em uma página pública de personagem, abra o DevTools e execute o seletor. Passe o mouse sobre um elemento visível, clique para copiar seu outerHTML, ou pressione Escape para cancelar. Isso ajuda a estudar a estrutura; estilos computados, dados privados e comportamentos gerados por script não são incluídos.

(() => {
  let current = null;
  const mark = e => {
    if (current) current.style.outline = "";
    current = e.target;
    current.style.outline = "3px solid #ff8db1";
  };
  const stop = () => {
    document.removeEventListener("mouseover", mark, true);
    document.removeEventListener("click", pick, true);
    document.removeEventListener("keydown", key, true);
    if (current) current.style.outline = "";
  };
  const key = e => { if (e.key === "Escape") { stop(); console.log("Picker cancelled."); } };
  const pick = async e => {
    e.preventDefault(); e.stopImmediatePropagation();
    const element = e.target;
    stop();
    const html = element.outerHTML;
    try { await navigator.clipboard.writeText(html); console.log("HTML copied."); }
    catch { copy(html); console.log("HTML copied using DevTools."); }
  };
  document.addEventListener("mouseover", mark, true);
  document.addEventListener("click", pick, true);
  document.addEventListener("keydown", key, true);
  console.log("Hover and click an element to copy its rendered HTML. ESC cancels.");
})();
Use o trabalho de outros criadores como referência de aprendizado; dê crédito a eles quando apropriado. Não reposte os designs ou artes exatos deles como se fossem seus. Além disso, um elemento copiado pode precisar de estilos externos para parecer idêntico.
10 // A OFICINA DA REGINACoisas que aprendi na dorVerificações práticas antes de publicar.
✓ Use um primeiro parágrafo neutro e uma imagem real para as pré-visualizações dos cards.
✓ Prefira <div>, <span>, <img>, <a>, <details> e <summary>.
✓ Mantenha os estilos inline para descrições de personagem.
✓ Evite larguras fixas enormes; verifique a legibilidade no celular.
✓ Separe fotos verticais e horizontais.
✓ Dê a cada bot sua própria linguagem visual em vez de recolorir um único template.
✓ Use links de verdade, não botões falsos.
✓ Use <audio controls> e uma transcrição acessível quando possível.
✓ Faça backup da bio anterior antes de experimentar.
✓ Preserve placeholders como {{user}}.
✓ Nunca coloque seu token de acesso ativo dentro de uma descrição pública.
Faça algo que pareça o seu personagem.Um caderno de sala de aula, um celularzinho, um arquivo de casos, um livro encantado — qualquer coisa que pertença à história deles.MAIS DA MELANCHOLUX ↗Fiquem fofinhos, queridos. — Mel & Regina 🌸🤍

Criado 21 de out.

Atualizado 21 de out.

Publicado 21 de out.

Chats publicados