Guide et autres choses

Traduit de l’anglais

Guide & More Stuff

69

144

Bio JanitorAI avancée · Un guide communautaire gratuit par Melancholux

L'ATELIER DE REGINA // RESSOURCE COMMUNAUTAIRELe manuel des bios avancéesTéléphones · Archives · Intros · Audio · Galeries · Console PATCH · Plus
00 // L'ATELIER DE REGINAUne note avant de commencerDes excuses, quelques précisions, et un merci.

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. 🌷

01 // L'ATELIER DE REGINAQu'est-ce qu'une bio avancée ?Une petite page thématique à l'intérieur d'une description de personnage.

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.

Deux systèmes différents : Le CSS du profil créateur peut affecter ton profil et ses cartes natives. Le HTML de description de personnage fonctionne généralement mieux avec 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.
02 // L'ATELIER DE REGINAGarde l'image d'aperçuLa première impression compte sur les cartes de bots.
L'en-tête d'aperçu neutre
Commence par un balisage de paragraphe simple. D'après notre expérience, cela rend plus probable l'apparition de la première image dans l'aperçu public. Ce n'est pas garanti à chaque mise à jour de Janitor.

Un nouveau guide tout doux est là !

CODE SOURCE — SÉLECTIONNER ET COPIER
<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>
03 // L'ATELIER DE REGINALe petit téléphoneNotre fausse interface de chat : aucun JavaScript requis.
Clara essaie la pose Amen
Bordure de téléphone, bulles de chat, zone photo et statut. Change le texte et les images pour correspondre à ton propre personnage.
Clara 🌸
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>
CODE SOURCE — SÉLECTIONNER ET COPIER
<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>
04 // L'ATELIER DE REGINAScènes d'ouvertureUne carte cinématographique avec une image derrière son titre.
Intro dépliable avec visuel de couverture
Clique sur la carte pour révéler le briefing de la scène. L'image est l'arrière-plan du résumé, pas une image détachée.
01 · Un bouquet pour la nouvelle voisine
Elle voulait juste t'accueillir...
OUVRIR LA SCÈNE ↓
Clara frappe avec un petit bouquet, soudain bien plus timide que prévu.
CODE SOURCE — SÉLECTIONNER ET COPIER
<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>
Pas d'image ? Utilise plutôt une archive.
Un accordéon style parchemin peut sembler intentionnel sans réutiliser un art sans rapport.
✦ DOSSIER IV — La porte verrouillée
Une serviette. Un couloir très malencontreux.
OUVRIR L'ENTRÉE ↓
La scène n'a pas d'image, donc le papier lui-même devient le thème visuel.
CODE SOURCE — SÉLECTIONNER ET COPIER
<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>
05 // L'ATELIER DE REGINAAudio et transcriptionsRends un message vocal ou une scène fictive lisible et écoutable.
Erika — enregistrement de dispatch
URL MP3 directe + lecteur HTML natif + une transcription écrite facultative. Ne compte pas sur la lecture automatique.
☎ ARCHIVE DU DISPATCH 911

Enregistrement fictif · 184 jours plus tard

DISPATCHER : 911, quelle est votre urgence ?

ERIKA : S'il te plaît... appelle {{user}}.

CODE SOURCE — SÉLECTIONNER ET COPIER
<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>
06 // L'ATELIER DE REGINAGaleries d'images et liens communautairesGarde les différentes orientations d'images séparées et fais de vraies cartes cliquables.
Bande d'images défilante
Garde les galeries portrait et paysage dans leurs propres sections quand tu as les deux formats.
CODE SOURCE — SÉLECTIONNER ET COPIER
<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>
Bannière Discord comme bouton
Utilise un vrai href. Toute la bannière est la surface cliquable.
LE REPAIRE DE REGINA
REJOINDRE LA COMMUNAUTÉ ↗
CODE SOURCE — SÉLECTIONNER ET COPIER
<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>
07 // L'ATELIER DE REGINAAnimations : ce qui marche vraimentUne distinction importante pour le CSS de profil.

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>
08 // L'ATELIER DE REGINAComment fonctionne notre méthode console PATCHPour les créateurs qui veulent expérimenter avec des descriptions avancées.

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.

Important : Le jeton d'accès est un identifiant de connexion, pas un code public. Récupère-le uniquement lorsque tu es connecté à ton propre compte. Ne l'envoie pas à un autre créateur, ne le colle pas dans des captures d'écran, et ne le publie pas dans un bot. Le code ci-dessous ne lit que tes cookies Janitor locaux et copie le jeton dans ton propre presse-papiers ; il ne contacte aucun serveur tiers. Des changements de navigateur ou de cookies peuvent l'empêcher de fonctionner.
ÉTAPE A — TON PROPRE JETON

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.");
})();
ÉTAPE B — FORME DU PATCH

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());
})();
N'exécute jamais aveuglément un script donné par un inconnu. Lis son URL de destination et vérifie qu'il ne met à jour que ton propre personnage. C'est une méthode non officielle, pas une promesse de compatibilité ni une permission de contourner de futures restrictions de sécurité.
09 // L'ATELIER DE REGINASélecteur d'éléments pour l'inspirationClique sur un élément d'une page publique pour inspecter son HTML rendu.

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.");
})();
Utilise le travail d'autres créateurs comme référence d'apprentissage ; crédite-les quand c'est approprié. Ne republie pas leurs designs exacts ou leur art comme les tiens. De plus, un élément copié peut avoir besoin de styles externes pour être identique.
10 // L'ATELIER DE REGINACe que j'ai appris à mes dépensVérifications pratiques avant de publier.
✓ Utilise un premier paragraphe neutre et une vraie image pour les aperçus de cartes.
✓ 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ée quelque chose qui ressemble à ton personnage.Un carnet de classe, un petit téléphone, une archive d'affaires, un livre enchanté — n'importe quoi qui appartient à leur histoire.PLUS DE MELANCHOLUX ↗Restez tout doux, mes chéris. — Mel & Regina 🌸🤍

Créé 21 oct.

Mis à jour 21 oct.

Publié 21 oct.

Chats publiés