Гид и прочее
Переведено с английского·
69
144
by:@Melancholux
Продвинутый дизайн био для JanitorAI · Бесплатное руководство сообщества от Melancholux
МАСТЕРСКАЯ РЕГИНЫ // РЕСУРС СООБЩЕСТВАПродвинутый справочник по биоТелефоны · Архивы · Вступления · Аудио · Галереи · Консоль PATCH · Ещё
00 // МАСТЕРСКАЯ РЕГИНЫЗаметка перед началомИзвинение, несколько уточнений и благодарность.
Привет, дорогие. Это Мел. 🤍
Прежде чем поделиться сегодняшним руководством, я должна извиниться за то, как я повела себя в событиях прошлой недели. Я отреагировала не так, как люди разумно могли бы от меня ожидать. Я была в обороне и вела себя по-детски, и я признаю, что похожее поведение случалось и в прошлых разногласиях с другими сообществами Janitor.
Я не планирую удалять упомянутый контент. В то же время я не намерена в будущем повторять именно такого рода контент, если он вызывает дискомфорт. Нравится тема или не нравится — это одно; нападать на реальных людей из-за неё — совсем другое. Даже когда кто-то явно пытается нас спровоцировать, мы можем выбрать не отвечать. Мы не знаем, насколько глубоко наши слова могут задеть другого человека, а немного внимательности ничего нам не стоит.
Мне жаль из-за проблем, которые я причинила, и из-за того, что так долго писала это. Последнее время я необычно измотана и проспала большую часть дня. Это не оправдание, просто объяснение моего молчания. Спасибо за ваше терпение.
А теперь то, чем я действительно хочу поделиться: всё, чему я научилась, экспериментируя с продвинутыми био для Janitor. Я хочу, чтобы больше авторов могли создавать то, что им нравится, не закрывая техники за семью замками. Добро пожаловать домой. 🌷
01 // МАСТЕРСКАЯ РЕГИНЫЧто такое продвинутое био?Маленькая тематическая страница внутри описания персонажа.
Вместо простого текста вы можете сочетать HTML с встроенным CSS, чтобы получить миниатюрный интерфейс: фальшивые телефоны, пузыри чата, файлы вступительных сцен, галереи изображений, музыкальные плееры и даже фейковые приложения. Это руководство включает наглядную демонстрацию и её редактируемый код прямо под ней. Вам не нужно ничего скачивать, чтобы по нему учиться.
Две разные системы: CSS профиля автора может влиять на ваш профиль и его родные карточки. HTML в описании персонажа обычно лучше всего работает с
style="..." на каждом элементе; глобальный <style> или <script> может быть вырезан. Описанный ниже обходной путь через API неофициален и может перестать работать после изменений платформы.02 // МАСТЕРСКАЯ РЕГИНЫСохраните превью-изображениеПервое впечатление важно на карточках ботов.
Нейтральный заголовок превью
Начните с простой разметки абзаца. По нашему опыту, это повышает шансы, что первое изображение появится в публичном превью. Это не гарантируется при каждом обновлении Janitor.
Новое милое руководство здесь!
ИСХОДНЫЙ КОД — ВЫДЕЛИТЕ И СКОПИРУЙТЕ
<p style="text-align:center;">Новое милое руководство здесь!</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 // МАСТЕРСКАЯ РЕГИНЫКрошечный телефонНаш фейковый интерфейс чата: JavaScript не нужен.
Клара пробует позу Аминь
Рамка телефона, пузыри чата, фото и область статуса. Меняйте текст и изображения под своего персонажа.
Клара 🌸
через коридор
через коридор
Я видела, как молодые люди делают что-то под названием поза Аминь...
<p style="background:white;border-radius:15px;padding:10px;">Пожалуйста, не смейся. Я уже жалею, что отправила это.</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>Клара 🌸</b><br><small>через коридор</small></div>
<div style="padding:12px;color:#5d4b52;">
<p style="background:white;border-radius:15px;padding:10px;">Я видела, как молодые люди делают что-то под названием поза Аминь...</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;">Пожалуйста, не смейся. Я уже жалею, что отправила это.</p>
</div>
</div>
</div>04 // МАСТЕРСКАЯ РЕГИНЫВступительные сценарииКинематографичная карточка с изображением за заголовком.
Раскрывающееся вступление с обложкой
Нажмите на карточку, чтобы раскрыть описание сценария. Изображение — это фон сводки, а не отдельная картинка.
01 · Букет для новой соседки
Она лишь хотела поприветствовать вас...
ОТКРЫТЬ СЦЕНУ ↓
Клара стучит с маленьким букетом, внезапно гораздо более застенчивая, чем ожидала.
ИСХОДНЫЙ КОД — ВЫДЕЛИТЕ И СКОПИРУЙТЕ
<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 · Букет для новой соседки</b><br>
<i>Она лишь хотела поприветствовать вас...</i><br>
<small>ОТКРЫТЬ СЦЕНУ ↓</small>
</summary>
<div style="padding:17px;background:#fff8f1;color:#73505c;">Клара стучит с маленьким букетом, внезапно гораздо более застенчивая, чем ожидала.</div>
</details>Нет изображения? Используйте вместо него архив.
Аккордеон в стиле пергамента может выглядеть намеренно, не переиспользуя не относящуюся к делу графику.
✦ ФАЙЛ IV — Запертая дверь
Одно полотенце. Один очень неудачный коридор.
ОТКРЫТЬ ЗАПИСЬ ↓
У сцены нет изображения, поэтому сама бумага становится визуальной темой.
ИСХОДНЫЙ КОД — ВЫДЕЛИТЕ И СКОПИРУЙТЕ
<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;">✦ ФАЙЛ IV — Запертая дверь<br><i>Одно полотенце. Один очень неудачный коридор.</i><br><small>ОТКРЫТЬ ЗАПИСЬ ↓</small></summary> <div style="padding:16px;border-top:1px dashed #c5ad89;">У сцены нет изображения, поэтому сама бумага становится визуальной темой.</div> </details>
05 // МАСТЕРСКАЯ РЕГИНЫАудио и расшифровкиСделайте голосовое сообщение или вымышленную сцену воспроизводимой.
Эрика — запись диспетчера
Прямая MP3-ссылка + нативный HTML-плеер + необязательная письменная расшифровка. Не рассчитывайте на автовоспроизведение.
☎ АРХИВ ДИСПЕТЧЕРСКОЙ 911
Вымышленная запись · 184 дня спустя
ДИСПЕТЧЕР: 911, какая у вас чрезвычайная ситуация?
ЭРИКА: Пожалуйста... позвоните {{user}}.
ИСХОДНЫЙ КОД — ВЫДЕЛИТЕ И СКОПИРУЙТЕ
<div style="background:#111b24;border:1px solid #567080;border-radius:14px;padding:16px;color:#e0eaf0;">
<b>☎ АРХИВ ДИСПЕТЧЕРСКОЙ 911</b>
<p>Вымышленная запись · 184 дня спустя</p>
<audio controls preload="metadata" style="width:100%;">
<source src="https://files.catbox.moe/7u6jbn.mp3" type="audio/mpeg">
</audio>
<p><b>ДИСПЕТЧЕР:</b> 911, какая у вас чрезвычайная ситуация?</p>
<p><b>ЭРИКА:</b> Пожалуйста... позвоните {{user}}.</p>
</div>06 // МАСТЕРСКАЯ РЕГИНЫГалереи изображений и ссылки сообществаРазделяйте разные ориентации изображений и делайте реальные кликабельные карточки.
Прокручиваемая полоса изображений
Держите портретные и альбомные галереи в отдельных разделах, если у вас есть оба формата.
ИСХОДНЫЙ КОД — ВЫДЕЛИТЕ И СКОПИРУЙТЕ
<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>
Баннер Discord как кнопка
Используйте настоящий href. Весь баннер — кликабельная поверхность.
ЛОГОВО РЕГИНЫВСТУПИТЬ В СООБЩЕСТВО ↗
ИСХОДНЫЙ КОД — ВЫДЕЛИТЕ И СКОПИРУЙТЕ
<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>ЛОГОВО РЕГИНЫ</b><br><small>ВСТУПИТЬ В СООБЩЕСТВО ↗</small></a>07 // МАСТЕРСКАЯ РЕГИНЫАнимации: что на самом деле работаетРазличие, которое важно для CSS профиля.
Некоторые авторы используют анимированные эффекты профиля, CSS-табы, переходы при наведении и прокручиваемые галереи. Этот пример показывает мягкий парящий стикер с поддержкой уменьшенного движения. Поместите этот CSS в область CSS/HTML профиля, а не полагайте, что он сработает внутри био персонажа.
<style>
/* ДЛЯ CSS ПРОФИЛЯ, А НЕ БИО ПЕРСОНАЖА */
@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">🌸 Добро пожаловать домой!</span>
08 // МАСТЕРСКАЯ РЕГИНЫКак работает наш метод консоли PATCHДля авторов, которые хотят экспериментировать с продвинутыми описаниями.
1. Создайте или откройте персонажа, которым владеете вы, желательно неопубликованного тестового бота. 2. Сделайте резервную копию текущего описания. 3. Создайте свою HTML-страницу. 4. Найдите UUID в URL персонажа. 5. Получите свой собственный токен доступа локально. 6. Используйте скрипт PATCH, включающий сжатое HTML-описание. 7. Перезагрузите и проверьте публичную страницу на компьютере и на мобильном.
Важно: Токен доступа — это учётные данные для входа, а не публичный код. Получайте его только будучи авторизованным в своём собственном аккаунте. Не отправляйте его другому автору, не вставляйте в скриншоты и не публикуйте внутри бота. Код ниже лишь читает ваши локальные cookie Janitor и копирует токен в ваш собственный буфер обмена; он не обращается ни к какому стороннему серверу. Изменения в браузере или cookie могут помешать его работе.
ШАГ A — ВАШ СОБСТВЕННЫЙ ТОКЕН
Войдите в Janitor на компьютере, откройте DevTools → Console, запустите это локально, а затем держите скопированное значение в тайне.
(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.");
})();ШАГ B — СТРУКТУРА PATCH
Это оболочка API-запроса, которую мы используем. Замените UUID персонажа, ваш приватный токен и сжатый HTML-payload. Payload — это представление gzip → base64 вашего полного HTML, обычно сгенерированное локально или с помощью инструмента кода.
(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());
})();Никогда не запускайте вслепую скрипт, данный незнакомцем. Прочитайте URL назначения и проверьте, что он обновляет только вашего собственного персонажа. Это неофициальный метод, а не обещание совместимости или разрешение обходить будущие ограничения безопасности.
09 // МАСТЕРСКАЯ РЕГИНЫВыбор элемента для вдохновенияНажмите на элемент на публичной странице, чтобы изучить его отрисованный HTML.
Хотите узнать, как построена карточка, текстовое поле или макет? На публичной странице персонажа откройте DevTools и запустите выборщик. Наведите курсор на видимый элемент, нажмите, чтобы скопировать его outerHTML, или нажмите Escape для отмены. Это помогает изучать структуру; вычисленные стили, приватные данные и поведение, сгенерированное скриптами, не включаются.
(() => {
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.");
})();
Используйте работы других авторов как учебный ориентир; указывайте их, когда это уместно. Не публикуйте их точные дизайны или графику как свои собственные. Кроме того, скопированному элементу могут понадобиться внешние стили, чтобы выглядеть идентично.
10 // МАСТЕРСКАЯ РЕГИНЫВещи, которым я научилась на горьком опытеПрактические проверки перед публикацией.
✓ Используйте нейтральный первый абзац и настоящее изображение для превью карточки.
✓ Предпочитайте <div>, <span>, <img>, <a>, <details> и <summary>.
✓ Держите стили встроенными для описаний персонажей.
✓ Избегайте огромных фиксированных ширин; проверяйте читаемость на мобильных.
✓ Разделяйте вертикальные и горизонтальные фото.
✓ Давайте каждому боту собственный визуальный язык вместо перекрашивания одного шаблона.
✓ Используйте настоящие ссылки, а не фейковые кнопки.
✓ Используйте <audio controls> и доступную расшифровку, когда это возможно.
✓ Делайте резервную копию предыдущего био перед экспериментами.
✓ Сохраняйте плейсхолдеры вроде {{user}}.
✓ Никогда не помещайте ваш рабочий токен доступа в публичное описание.
✓ Предпочитайте <div>, <span>, <img>, <a>, <details> и <summary>.
✓ Держите стили встроенными для описаний персонажей.
✓ Избегайте огромных фиксированных ширин; проверяйте читаемость на мобильных.
✓ Разделяйте вертикальные и горизонтальные фото.
✓ Давайте каждому боту собственный визуальный язык вместо перекрашивания одного шаблона.
✓ Используйте настоящие ссылки, а не фейковые кнопки.
✓ Используйте <audio controls> и доступную расшифровку, когда это возможно.
✓ Делайте резервную копию предыдущего био перед экспериментами.
✓ Сохраняйте плейсхолдеры вроде {{user}}.
✓ Никогда не помещайте ваш рабочий токен доступа в публичное описание.
Создайте что-то, что ощущается как ваш персонаж.Тетрадь класса, маленький телефон, архив дел, заколдованная книга — что угодно, что принадлежит их истории.БОЛЬШЕ ОТ MELANCHOLUX ↗Оставайтесь пушистыми, дорогие. — Мел & Регина 🌸🤍
Создано 21 окт.
Обновлено 21 окт.
Опубликован 21 окт.
- Безлимитный
- #guide
- #announcement
- #reginaden