Guide et autres choses
Traduit de l’anglais·
69
144
Bio JanitorAI avancée · Un guide communautaire gratuit par Melancholux
Salut, mes chéris. C'est Mel. 🤍
Avant de partager le guide d'aujourd'hui, je te dois des excuses pour ma façon de gérer les événements de la semaine dernière. Je n'ai pas donné le genre de réponse qu'on pouvait raisonnablement attendre de moi. J'étais sur la défensive et immature, et je reconnais que ce comportement s'est déjà produit lors de désaccords passés avec d'autres communautés Janitor.
Je n'ai pas l'intention de retirer le contenu en question. En même temps, je ne compte pas répéter ce type particulier de contenu à l'avenir s'il cause un malaise. Apprécier ou ne pas apprécier un sujet, c'est une chose ; s'en prendre à de vraies personnes à cause de ça, c'en est une autre. Même quand quelqu'un cherche clairement à nous provoquer, on peut choisir de ne pas répondre. On ne sait pas à quel point nos mots peuvent affecter quelqu'un, et un peu de considération ne coûte rien.
Je suis désolée pour le trouble que j'ai causé, et d'avoir mis si longtemps à publier ceci. Je suis exceptionnellement épuisée ces derniers temps et j'ai dormi une bonne partie de la journée. Ce n'est pas une excuse, juste une explication à mon silence. Merci de ta patience.
Maintenant, quelque chose que je veux vraiment partager : tout ce que j'ai appris en expérimentant avec les bios Janitor avancées. Je veux que plus de créateurs puissent faire des choses qui leur plaisent sans verrouiller les techniques. Bienvenue chez toi. 🌷
Au lieu de texte brut, tu peux combiner le HTML avec le CSS inline pour créer une mini-interface : faux téléphones, bulles de chat, fichiers de scène d'ouverture, galeries d'images, lecteurs de musique, et même de fausses applications. Ce guide inclut une démonstration visible et son code modifiable directement en dessous. Tu n'as rien à télécharger pour apprendre à partir de ce guide.
style="..." sur chaque élément ; un <style> ou <script> global peut être supprimé. La solution de contournement via l'API décrite ci-dessous est non officielle et peut cesser de fonctionner après des changements de la plateforme.Un nouveau guide tout doux est là !
<p style="text-align:center;">Un nouveau guide tout doux est là !</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>
de l'autre côté du couloir
J'ai vu les jeunes faire un truc qui s'appelle la pose Amen...
<p style="background:white;border-radius:15px;padding:10px;">S'il te plaît, ne ris pas. Je regrette déjà de l'avoir envoyé.</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>de l'autre côté du couloir</small></div>
<div style="padding:12px;color:#5d4b52;">
<p style="background:white;border-radius:15px;padding:10px;">J'ai vu les jeunes faire un truc qui s'appelle 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;">S'il te plaît, ne ris pas. Je regrette déjà de l'avoir envoyé.</p>
</div>
</div>
</div>
01 · Un bouquet pour la nouvelle voisine
Elle voulait juste t'accueillir...
OUVRIR LA SCÈNE ↓
<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 bouquet pour la nouvelle voisine</b><br>
<i>Elle voulait juste t'accueillir...</i><br>
<small>OUVRIR LA SCÈNE ↓</small>
</summary>
<div style="padding:17px;background:#fff8f1;color:#73505c;">Clara frappe avec un petit bouquet, soudain bien plus timide que prévu.</div>
</details>✦ DOSSIER IV — La porte verrouillée
Une serviette. Un couloir très malencontreux.
OUVRIR L'ENTRÉE ↓
<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;">✦ DOSSIER IV — La porte verrouillée<br><i>Une serviette. Un couloir très malencontreux.</i><br><small>OUVRIR L'ENTRÉE ↓</small></summary> <div style="padding:16px;border-top:1px dashed #c5ad89;">La scène n'a pas d'image, donc le papier lui-même devient le thème visuel.</div> </details>
Enregistrement fictif · 184 jours plus tard
DISPATCHER : 911, quelle est votre urgence ?
ERIKA : S'il te plaît... appelle {{user}}.
<div style="background:#111b24;border:1px solid #567080;border-radius:14px;padding:16px;color:#e0eaf0;">
<b>☎ ARCHIVE DU DISPATCH 911</b>
<p>Enregistrement fictif · 184 jours plus tard</p>
<audio controls preload="metadata" style="width:100%;">
<source src="https://files.catbox.moe/7u6jbn.mp3" type="audio/mpeg">
</audio>
<p><b>DISPATCHER :</b> 911, quelle est votre urgence ?</p>
<p><b>ERIKA :</b> S'il te plaît... appelle {{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>
REJOINDRE LA COMMUNAUTÉ ↗
<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>LE REPAIRE DE REGINA</b><br><small>REJOINDRE LA COMMUNAUTÉ ↗</small></a>Certains créateurs utilisent des effets de profil animés, des onglets CSS, des transitions au survol et des galeries défilantes. Cet exemple montre un autocollant flottant tout en douceur avec prise en charge de la réduction des animations. Place ce CSS dans la zone CSS/HTML du profil plutôt que de supposer qu'il fonctionne dans une bio de personnage.
<style>
/* POUR LE CSS DU PROFIL, PAS UNE BIO DE PERSONNAGE */
@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">🌸 Bienvenue chez toi !</span>
1. Crée ou ouvre un personnage qui t'appartient, de préférence un bot de test non publié. 2. Sauvegarde sa description actuelle. 3. Crée ta page HTML. 4. Trouve l'UUID dans l'URL du personnage. 5. Récupère ton propre jeton d'accès en local. 6. Utilise un script PATCH qui inclut la description HTML compressée. 7. Recharge et inspecte la page publique, sur ordinateur et sur mobile.
Connecte-toi à Janitor sur ordinateur, ouvre les DevTools → Console, exécute ceci en local, puis garde la valeur copiée privée.
(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.");
})();Ceci est l'enveloppe de requête API que nous utilisons. Remplace l'UUID du personnage, ton jeton privé et la charge utile HTML compressée. La charge utile est la représentation gzip → base64 de ton HTML complet, généralement générée en local ou par un outil de code.
(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());
})();Tu veux savoir comment une carte, une zone de texte ou une mise en page a été construite ? Sur une page publique de personnage, ouvre les DevTools et lance le sélecteur. Survole un élément visible, clique pour copier son outerHTML, ou appuie sur Échap pour annuler. Cela aide à étudier la structure ; les styles calculés, les données privées et les comportements générés par script ne sont pas inclus.
(() => {
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.");
})();
✓ Privilégie <div>, <span>, <img>, <a>, <details> et <summary>.
✓ Garde les styles inline pour les descriptions de personnages.
✓ Évite les largeurs fixes énormes ; vérifie la lisibilité sur mobile.
✓ Sépare les photos verticales et horizontales.
✓ Donne à chaque bot son propre langage visuel au lieu de recolorer un seul modèle.
✓ Utilise de vrais liens, pas de faux boutons.
✓ Utilise <audio controls> et une transcription accessible quand c'est possible.
✓ Sauvegarde la bio précédente avant d'expérimenter.
✓ Préserve les placeholders comme {{user}}.
✓ Ne mets jamais ton jeton d'accès actif dans une description publique.
Créé 21 oct.
Mis à jour 21 oct.
Publié 21 oct.
- Illimité
- #guide
- #announcement
- #reginaden