Przewodnik i inne rzeczy

Przetłumaczono z angielskiego

144

Zaawansowany projekt bio JanitorAI · Darmowy poradnik społecznościowy autorstwa Melancholux

WARSZTAT REGINY // ZASÓB SPOŁECZNOŚCIZaawansowany podręcznik bioTelefony · Archiwa · Wstępy · Audio · Galerie · Console PATCH · Więcej

00 // WARSZTAT REGINYKilka słów, zanim zaczniemyPrzeprosiny, kilka wyjaśnień i podziękowanie.

Hai, kochani. Tu Mel. 🤍

Zanim podzielę się dzisiejszym poradnikiem, należą się wam przeprosiny za to, jak poradziłam sobie z wydarzeniami z zeszłego tygodnia. Nie dałam takiej odpowiedzi, jakiej można by się po mnie rozsądnie spodziewać. Byłam defensywna i niedojrzała, i zdaję sobie sprawę, że podobne zachowania miały miejsce w przeszłych nieporozumieniach z innymi społecznościami Janitora.

Nie planuję usuwać omawianych treści. Jednocześnie nie zamierzam w przyszłości powtarzać tego konkretnego rodzaju treści, jeśli powoduje dyskomfort. Lubić lub nie lubić jakiegoś tematu to jedno; atakowanie prawdziwych ludzi z jego powodu to drugie. Nawet gdy ktoś wyraźnie próbuje nas sprowokować, możemy wybrać brak odpowiedzi. Nie wiemy, jak głęboko nasze słowa mogą kogoś dotknąć, a odrobina wyrozumiałości nic nas nie kosztuje.

Przepraszam za kłopoty, które sprawiłam, i za to, że tak długo zwlekałam z tym postem. Ostatnio jestem wyjątkowo wyczerpana i przesypiam większość dnia. To nie wymówka, tylko wyjaśnienie mojego milczenia. Dziękuję za cierpliwość.

A teraz coś, czym naprawdę chcę się podzielić: wszystko, czego nauczyłam się, eksperymentując z zaawansowanymi bio Janitora. Chcę, żeby więcej twórców mogło tworzyć rzeczy, które sprawiają im radość, bez zamykania technik za bramą. Witaj w domu. 🌷

01 // WARSZTAT REGINYCzym jest zaawansowane bio?Mała tematyczna strona wewnątrz opisu postaci.

Zamiast zwykłego tekstu możesz połączyć HTML z inline CSS, tworząc miniaturowy interfejs: fałszywe telefony, dymki czatu, pliki scen otwarcia, galerie obrazów, odtwarzacze muzyki, a nawet fałszywe aplikacje. Ten poradnik zawiera widoczną demonstrację i jej edytowalny kod bezpośrednio pod nią. Nie musisz niczego pobierać, żeby się z niego nauczyć.

Dwa różne systemy: CSS profilu twórcy może wpływać na twój profil i jego natywne karty. HTML w opisie postaci zwykle działa najlepiej z style="..." na każdym elemencie; globalny <style> lub <script> może zostać usunięty. Opisane poniżej obejście przez API jest nieoficjalne i może przestać działać po zmianach na platformie.

02 // WARSZTAT REGINYZachowaj obraz podgląduPierwsze wrażenie ma znaczenie na kartach botów.

Neutralny nagłówek podglądu

Zacznij od prostego znacznika akapitu. Z naszego doświadczenia wynika, że zwiększa to szansę, że pierwszy obraz pojawi się w publicznym podglądzie. Nie jest to gwarantowane przy każdej aktualizacji Janitora.

Jest tu nowy, słodki poradnik!

KOD ŹRÓDŁOWY — ZAZNACZ I SKOPIUJ

<p style="text-align:center;">Jest tu nowy, słodki poradnik!</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 // WARSZTAT REGINYMały telefonNasz fałszywy interfejs czatu: bez potrzeby JavaScriptu.

Clara próbuje pozy Amen

Obramowanie telefonu, dymki czatu, obszar zdjęcia i statusu. Zmień tekst i obrazy, dopasowując je do własnej postaci.

Clara 🌸
po drugiej stronie korytarza

Widziałam, jak młodsi robili coś, co nazywa się pozą Amen...

  <p style="background:white;border-radius:15px;padding:10px;">Proszę, nie śmiej się. Już żałuję, że to wysłałam.</p>
</div>

KOD ŹRÓDŁOWY — ZAZNACZ I SKOPIUJ

<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>po drugiej stronie korytarza</small></div>
    <div style="padding:12px;color:#5d4b52;">
      <p style="background:white;border-radius:15px;padding:10px;">Widziałam, jak młodsi robili coś, co nazywa się pozą 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;">Proszę, nie śmiej się. Już żałuję, że to wysłałam.</p>
    </div>
  </div>
</div>

04 // WARSZTAT REGINYScenariusze otwarciaFilmowa karta z obrazem za tytułem.

Rozwijany wstęp z grafiką okładki

Kliknij kartę, aby odsłonić streszczenie scenariusza. Obraz jest tłem podsumowania, a nie osobnym obrazkiem.

01 · Bukiet dla nowego sąsiada
Chciała cię tylko powitać...
OTWÓRZ SCENĘ ↓

Clara puka z małym bukietem, nagle znacznie bardziej nieśmiała, niż się spodziewała.

KOD ŹRÓDŁOWY — ZAZNACZ I SKOPIUJ

<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 · Bukiet dla nowego sąsiada</b><br>
    <i>Chciała cię tylko powitać...</i><br>
    <small>OTWÓRZ SCENĘ ↓</small>
  </summary>
  <div style="padding:17px;background:#fff8f1;color:#73505c;">Clara puka z małym bukietem, nagle znacznie bardziej nieśmiała, niż się spodziewała.</div>
</details>

Brak obrazu? Użyj zamiast tego archiwum.

Rozwijana sekcja w stylu pergaminu może wyglądać celowo, bez wykorzystywania niepowiązanej grafiki.

✦ PLIK IV — Zamknięte drzwi
Jeden ręcznik. Jeden bardzo niefortunny korytarz.
OTWÓRZ WPIS ↓

Scena nie ma obrazu, więc sam papier staje się motywem wizualnym.

KOD ŹRÓDŁOWY — ZAZNACZ I SKOPIUJ

<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;">✦ PLIK IV — Zamknięte drzwi<br><i>Jeden ręcznik. Jeden bardzo niefortunny korytarz.</i><br><small>OTWÓRZ WPIS ↓</small></summary>
  <div style="padding:16px;border-top:1px dashed #c5ad89;">Scena nie ma obrazu, więc sam papier staje się motywem wizualnym.</div>
</details>

05 // WARSZTAT REGINYAudio i transkrypcjeSpraw, aby wiadomość głosowa lub fikcyjna scena była odtwarzalna.

Erika — nagranie z dyspozytorni

Bezpośredni URL do MP3 + natywny odtwarzacz HTML + opcjonalna pisemna transkrypcja. Nie licz na autoodtwarzanie.

☎ ARCHIWUM DYSPOZYTORNI 911

Fikcyjne nagranie · 184 dni później

DYSPOZYTOR: 911, jaki jest twój problem?

ERIKA: Proszę... zadzwoń {{user}}.

KOD ŹRÓDŁOWY — ZAZNACZ I SKOPIUJ

<div style="background:#111b24;border:1px solid #567080;border-radius:14px;padding:16px;color:#e0eaf0;">
  <b>☎ ARCHIWUM DYSPOZYTORNI 911</b>
  <p>Fikcyjne nagranie · 184 dni później</p>
  <audio controls preload="metadata" style="width:100%;">
    <source src="https://files.catbox.moe/7u6jbn.mp3" type="audio/mpeg">
  </audio>
  <p><b>DYSPOZYTOR:</b> 911, jaki jest twój problem?</p>
  <p><b>ERIKA:</b> Proszę... zadzwoń {{user}}.</p>
</div>

06 // WARSZTAT REGINYGalerie obrazów i linki społecznościRozdziel różne orientacje obrazów i twórz prawdziwe klikalne karty.

Przewijany pasek obrazów

Trzymaj galerie pionowe i poziome w osobnych sekcjach, gdy masz oba formaty.

KOD ŹRÓDŁOWY — ZAZNACZ I SKOPIUJ

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

Baner Discord jako przycisk

Użyj prawdziwego href. Cały baner jest klikalną powierzchnią.

REGINA'S DEN
DOŁĄCZ DO SPOŁECZNOŚCI ↗

KOD ŹRÓDŁOWY — ZAZNACZ I SKOPIUJ

<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>REGINA'S DEN</b><br><small>DOŁĄCZ DO SPOŁECZNOŚCI ↗</small></a>

07 // WARSZTAT REGINYAnimacje: co faktycznie działaRozróżnienie, które ma znaczenie dla CSS profilu.

Niektórzy twórcy używają animowanych efektów profilu, zakładek CSS, przejść hover i przewijanych galerii. Ten przykład pokazuje delikatnie unoszącą się naklejkę z obsługą ograniczenia ruchu. Umieść ten CSS w obszarze profile CSS/HTML area, zamiast zakładać, że zadziała wewnątrz bio postaci.

<style>
/* FOR PROFILE CSS, NOT A CHARACTER BIO */
@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">🌸 Witaj w domu!</span>

08 // WARSZTAT REGINYJak działa nasza metoda console PATCHDla twórców, którzy chcą eksperymentować z zaawansowanymi opisami.

1. Utwórz lub otwórz postać, którą posiadasz, najlepiej nieopublikowanego bota testowego. 2. Zrób kopię zapasową jej obecnego opisu. 3. Zbuduj swoją stronę HTML. 4. Znajdź UUID w URL-u postaci. 5. Pobierz własny token dostępu lokalnie. 6. Użyj skryptu PATCH, który zawiera skompresowany opis HTML. 7. Przeładuj i sprawdź publiczną stronę, na komputerze i na telefonie.

Ważne: Token dostępu to poświadczenie logowania, a nie publiczny kod. Pobierz go wyłącznie będąc zalogowanym na własne konto. Nie wysyłaj go innemu twórcy, nie wklejaj do zrzutów ekranu ani nie publikuj wewnątrz bota. Poniższy kod jedynie odczytuje twoje lokalne ciasteczka Janitora i kopiuje token do twojego własnego schowka; nie kontaktuje się z żadnym serwerem zewnętrznym. Zmiany w przeglądarce lub ciasteczkach mogą uniemożliwić jego działanie.

KROK A — TWÓJ WŁASNY TOKEN

Zaloguj się do Janitora na komputerze, otwórz DevTools → Console, uruchom to lokalnie, a następnie zachowaj skopiowaną wartość w tajemnicy.

(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.");
})();

KROK B — KSZTAŁT PATCH

To jest powłoka żądania API, której używamy. Zastąp UUID postaci, swój prywatny token i skompresowany ładunek HTML. Ładunek to reprezentacja gzip → base64 twojego kompletnego HTML, zwykle generowana lokalnie lub przez narzędzie do kodu.

(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());
})();

Nigdy nie uruchamiaj bezmyślnie skryptu podanego przez obcą osobę. Przeczytaj docelowy URL i sprawdź, czy aktualizuje wyłącznie twoją własną postać. To metoda nieoficjalna, a nie obietnica kompatybilności ani pozwolenie na obchodzenie przyszłych zabezpieczeń.

09 // WARSZTAT REGINYSelektor elementów dla inspiracjiKliknij element na publicznej stronie, aby zbadać jego wyrenderowany HTML.

Chcesz dowiedzieć się, jak zbudowano kartę, pole tekstowe lub układ? Na publicznej stronie postaci otwórz DevTools i uruchom selektor. Najedź na widoczny element, kliknij, aby skopiować jego outerHTML, lub naciśnij Escape, aby anulować. Pomaga to badać strukturę; obliczone style, prywatne dane i zachowanie generowane przez skrypty nie są uwzględniane.

(() => {
  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.");
})();

Traktuj pracę innych twórców jako punkt odniesienia do nauki; podawaj ich autorstwo, gdy to stosowne. Nie publikuj ich dokładnych projektów ani grafiki jako własnych. Skopiowany element może też wymagać zewnętrznych stylów, aby wyglądać identycznie.

10 // WARSZTAT REGINYRzeczy, których nauczyłam się na własnej skórzePraktyczne kontrole przed publikacją.

✓ Używaj neutralnego pierwszego akapitu i prawdziwego obrazu do podglądów kart.
✓ Preferuj <div>, <span>, <img>, <a>, <details> i <summary>.
✓ Trzymaj style inline w opisach postaci.
✓ Unikaj ogromnych stałych szerokości; sprawdzaj czytelność na telefonie.
✓ Rozdzielaj zdjęcia pionowe i poziome.
✓ Nadaj każdemu botowi własny język wizualny, zamiast przekolorowywać jeden szablon.
✓ Używaj prawdziwych linków, nie fałszywych przycisków.
✓ Używaj <audio controls> i dostępnej transkrypcji, gdy to możliwe.
✓ Zrób kopię zapasową poprzedniego bio przed eksperymentami.
✓ Zachowaj placeholdery takie jak {{user}}.
✓ Nigdy nie umieszczaj swojego aktywnego tokena dostępu w publicznym opisie.

Stwórz coś, co przypomina twoją postać.Zeszyt szkolny, mały telefon, archiwum spraw, zaczarowana księga — cokolwiek, co należy do ich historii.WIĘCEJ OD MELANCHOLUX ↗Bądźcie puszyste, kochani. — Mel & Regina 🌸🤍

Utworzono 21 paź

Zaktualizowano 21 paź

Opublikowano 21 paź