Guía y más cosas

Traducido del inglés

Guide & More Stuff

69

144

Diseño de bio avanzado para JanitorAI · Una guía comunitaria gratuita de Melancholux

EL TALLER DE REGINA // RECURSO COMUNITARIOEl manual de bios avanzadasTeléfonos · Archivos · Intros · Audio · Galerías · PATCH de consola · Más
00 // EL TALLER DE REGINAUna nota antes de empezarUna disculpa, algunas aclaraciones y un agradecimiento.

Hola, cariños. Soy Mel. 🤍

Antes de compartir la guía de hoy, les debo una disculpa por cómo manejé los acontecimientos de la semana pasada. No di el tipo de respuesta que la gente razonablemente podría haber esperado de mí. Me puse a la defensiva y fui inmadura, y reconozco que ha ocurrido algo similar en desacuerdos pasados con otras comunidades de Janitor.

No pienso eliminar el contenido en cuestión. Al mismo tiempo, no tengo intención de repetir ese tipo particular de contenido en el futuro si causa incomodidad. Disfrutar o no de un tema es una cosa; ir tras personas reales por ello es otra. Incluso cuando alguien claramente intenta provocarnos, podemos elegir no responder. No sabemos cuánto pueden afectar nuestras palabras a otra persona, y un poco de consideración no nos cuesta nada.

Siento los problemas que he causado y haber tardado tanto en publicar esto. Últimamente he estado inusualmente agotada y he dormido gran parte del día. No es una excusa, solo una explicación de mi silencio. Gracias por su paciencia.

Ahora algo que sí quiero compartir: todo lo que he aprendido experimentando con bios avanzadas de Janitor. Quiero que más creadores puedan hacer cosas que disfruten sin guardarse las técnicas. Bienvenidos a casa. 🌷

01 // EL TALLER DE REGINA¿Qué es una bio avanzada?Una pequeña página temática dentro de la descripción de un personaje.

En lugar de texto plano, puedes combinar HTML con CSS en línea para una interfaz en miniatura: teléfonos falsos, burbujas de chat, archivos de escena inicial, galerías de imágenes, reproductores de música e incluso apps falsas. Esta guía incluye una demostración visible y su código editable justo debajo. No tienes que descargar nada para aprender de ella.

Dos sistemas distintos: El CSS del perfil de creador puede afectar tu perfil y sus tarjetas nativas. El HTML de la descripción de personaje suele funcionar mejor con style="..." en cada elemento; un <style> o <script> global puede ser eliminado. El truco de la API descrito abajo no es oficial y puede dejar de funcionar tras cambios de la plataforma.
02 // EL TALLER DE REGINAConserva la imagen de vista previaLas primeras impresiones importan en las tarjetas de bots.
El encabezado neutral de vista previa
Empieza con un marcado de párrafo simple. Según nuestra experiencia, esto hace más probable que la primera imagen aparezca en la vista previa pública. No está garantizado en todas las actualizaciones de Janitor.

¡Aquí llega una dulce nueva guía!

CÓDIGO FUENTE — SELECCIONA Y COPIA
<p style="text-align:center;">¡Aquí llega una dulce nueva guía!</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 // EL TALLER DE REGINAEl teléfono diminutoNuestra interfaz de chat falsa: sin JavaScript.
Clara prueba la pose Amen
Borde de teléfono, burbujas de chat, foto y área de estado. Cambia el texto y las imágenes para que coincidan con tu propio personaje.
Clara 🌸
al otro lado del pasillo

Vi a los jóvenes hacer algo llamado la pose Amen...

  <p style="background:white;border-radius:15px;padding:10px;">Por favor, no te rías. Ya me arrepiento de haber enviado esto.</p>
</div>
CÓDIGO FUENTE — SELECCIONA Y COPIA
<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>al otro lado del pasillo</small></div>
    <div style="padding:12px;color:#5d4b52;">
      <p style="background:white;border-radius:15px;padding:10px;">Vi a los jóvenes hacer algo llamado la 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, no te rías. Ya me arrepiento de haber enviado esto.</p>
    </div>
  </div>
</div>
04 // EL TALLER DE REGINAEscenarios de aperturaUna tarjeta cinematográfica con una imagen detrás de su título.
Intro desplegable con arte de portada
Haz clic en la tarjeta para revelar el resumen del escenario. La imagen es el fondo del resumen, no una imagen separada.
01 · Un ramo para la nueva vecina
Solo quería darte la bienvenida...
ABRIR ESCENA ↓
Clara llama con un pequeño ramo, de repente mucho más tímida de lo esperado.
CÓDIGO FUENTE — SELECCIONA Y COPIA
<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 · Un ramo para la nueva vecina</b><br>
    <i>Solo quería darte la bienvenida...</i><br>
    <small>ABRIR ESCENA ↓</small>
  </summary>
  <div style="padding:17px;background:#fff8f1;color:#73505c;">Clara llama con un pequeño ramo, de repente mucho más tímida de lo esperado.</div>
</details>
¿Sin imagen? Usa un archivo en su lugar.
Un acordeón estilo pergamino puede parecer intencional sin reutilizar arte no relacionado.
✦ EXPEDIENTE IV — La puerta cerrada
Una toalla. Un pasillo muy desafortunado.
ABRIR ENTRADA ↓
La escena no tiene imagen, así que el propio papel se convierte en el tema visual.
CÓDIGO FUENTE — SELECCIONA Y COPIA
<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;">✦ EXPEDIENTE IV — La puerta cerrada<br><i>Una toalla. Un pasillo muy desafortunado.</i><br><small>ABRIR ENTRADA ↓</small></summary>
  <div style="padding:16px;border-top:1px dashed #c5ad89;">La escena no tiene imagen, así que el propio papel se convierte en el tema visual.</div>
</details>
05 // EL TALLER DE REGINAAudio y transcripcionesHaz reproducible un mensaje de voz o una escena ficticia.
Erika — grabación del operador
URL directa de MP3 + reproductor HTML nativo + una transcripción escrita opcional. No cuentes con la reproducción automática.
☎ ARCHIVO DE EMERGENCIAS 911

Grabación ficticia · 184 días después

OPERADOR: 911, ¿cuál es su emergencia?

ERIKA: Por favor... llama a {{user}}.

CÓDIGO FUENTE — SELECCIONA Y COPIA
<div style="background:#111b24;border:1px solid #567080;border-radius:14px;padding:16px;color:#e0eaf0;">
  <b>☎ ARCHIVO DE EMERGENCIAS 911</b>
  <p>Grabación ficticia · 184 días después</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, ¿cuál es su emergencia?</p>
  <p><b>ERIKA:</b> Por favor... llama a {{user}}.</p>
</div>
06 // EL TALLER DE REGINAGalerías de imágenes y enlaces comunitariosMantén separadas las orientaciones de imagen y crea tarjetas realmente clicables.
Tira de imágenes desplazable
Mantén las galerías verticales y horizontales en sus propias secciones cuando tengas ambos formatos.
CÓDIGO FUENTE — SELECCIONA Y COPIA
<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 de Discord como botón
Usa un href real. Todo el banner es la superficie clicable.
LA GUARIDA DE REGINA
ÚNETE A LA COMUNIDAD ↗
CÓDIGO FUENTE — SELECCIONA Y COPIA
<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>LA GUARIDA DE REGINA</b><br><small>ÚNETE A LA COMUNIDAD ↗</small></a>
07 // EL TALLER DE REGINAAnimaciones: lo que realmente funcionaUna distinción que importa para el CSS del perfil.

Algunos creadores usan efectos animados de perfil, pestañas CSS, transiciones al pasar el cursor y galerías desplazables. Este ejemplo muestra una pegatina flotante suave con soporte para movimiento reducido. Pon este CSS en el área de CSS/HTML del perfil en lugar de asumir que funciona dentro de una bio de personaje.

<style>
/* PARA CSS DE PERFIL, NO PARA UNA BIO DE PERSONAJE */
@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">🌸 ¡Bienvenidos a casa!</span>
08 // EL TALLER DE REGINACómo funciona nuestro método PATCH de consolaPara creadores que quieren experimentar con descripciones avanzadas.

1. Crea o abre un personaje que sea tuyo, preferiblemente un bot de prueba sin publicar. 2. Haz una copia de seguridad de su descripción actual. 3. Crea tu página HTML. 4. Encuentra el UUID en la URL del personaje. 5. Obtén tu propio token de acceso localmente. 6. Usa un script PATCH que incluya la descripción HTML comprimida. 7. Recarga e inspecciona la página pública, en escritorio y en móvil.

Importante: El token de acceso es una credencial de inicio de sesión, no un código público. Obtenlo solo mientras tengas la sesión iniciada en tu propia cuenta. No lo envíes a otro creador, no lo pegues en capturas de pantalla ni lo publiques dentro de un bot. El código de abajo solo lee tus cookies locales de Janitor y copia el token a tu propio portapapeles; no contacta con ningún servidor de terceros. Cambios en el navegador o en las cookies pueden impedir que funcione.
PASO A — TU PROPIO TOKEN

Inicia sesión en Janitor en escritorio, abre DevTools → Consola, ejecuta esto localmente y luego mantén privado el valor copiado.

(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.");
})();
PASO B — FORMA DEL PATCH

Esta es la estructura de petición a la API que usamos. Sustituye el UUID del personaje, tu token privado y el payload HTML comprimido. El payload es la representación gzip → base64 de tu HTML completo, normalmente generada localmente o por una herramienta 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 ejecutes a ciegas un script que te dé un desconocido. Lee su URL de destino y comprueba que solo actualiza tu propio personaje. Este es un método no oficial, no una promesa de compatibilidad ni un permiso para eludir futuras restricciones de seguridad.
09 // EL TALLER DE REGINASelector de elementos para inspirarteHaz clic en un elemento de una página pública para inspeccionar su HTML renderizado.

¿Quieres aprender cómo se construyó una tarjeta, un cuadro de texto o un diseño? En una página pública de personaje, abre DevTools y ejecuta el selector. Pasa el cursor sobre un elemento visible, haz clic para copiar su outerHTML, o pulsa Escape para cancelar. Esto ayuda a estudiar la estructura; los estilos calculados, los datos privados y el comportamiento generado por scripts no se incluyen.

(() => {
  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.");
})();
Usa el trabajo de otros creadores como referencia de aprendizaje; dales crédito cuando corresponda. No republiques sus diseños exactos ni su arte como tuyos. Además, un elemento copiado puede necesitar estilos externos para verse idéntico.
10 // EL TALLER DE REGINACosas que aprendí a la malaComprobaciones prácticas antes de publicar.
✓ Usa un primer párrafo neutral y una imagen real para las vistas previas de tarjetas.
✓ Prefiere <div>, <span>, <img>, <a>, <details> y <summary>.
✓ Mantén los estilos en línea para las descripciones de personajes.
✓ Evita anchos fijos enormes; comprueba la legibilidad en móvil.
✓ Separa las fotos verticales y horizontales.
✓ Dale a cada bot su propio lenguaje visual en lugar de recolorear una plantilla.
✓ Usa enlaces reales, no botones falsos.
✓ Usa <audio controls> y una transcripción accesible cuando sea posible.
✓ Haz una copia de seguridad de la bio anterior antes de experimentar.
✓ Conserva los marcadores de posición como {{user}}.
✓ Nunca pongas tu token de acceso activo dentro de una descripción pública.
Haz algo que se sienta como tu personaje.Un cuaderno de clase, un teléfono diminuto, un archivo de casos, un libro encantado — cualquier cosa que pertenezca a su historia.MÁS DE MELANCHOLUX ↗Sigan esponjosos, cariños. — Mel & Regina 🌸🤍

Creado 21 oct

Actualizado 21 oct

Publicado 21 oct

Chats publicados