Guía y más cosas
Traducido del inglés·
69
144
Diseño de bio avanzado para JanitorAI · Una guía comunitaria gratuita de Melancholux
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. 🌷
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.
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.¡Aquí llega una dulce nueva guía!
<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>
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>
<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>
01 · Un ramo para la nueva vecina
Solo quería darte la bienvenida...
ABRIR ESCENA ↓
<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>✦ EXPEDIENTE IV — La puerta cerrada
Una toalla. Un pasillo muy desafortunado.
ABRIR ENTRADA ↓
<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>
Grabación ficticia · 184 días después
OPERADOR: 911, ¿cuál es su emergencia?
ERIKA: Por favor... llama a {{user}}.
<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><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>
ÚNETE A LA COMUNIDAD ↗
<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>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>
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.
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.");
})();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());
})();¿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.");
})();
✓ 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.
Creado 21 oct
Actualizado 21 oct
Publicado 21 oct
- Sin límite
- #guide
- #announcement
- #reginaden