Import/Export SillyTavern V2/Custom JSON & PNG characters on JanitorAI (create, edit, view pages). Handles WEBP/non-PNG images gracefully for edit page export.
// ==UserScript== // @name JanitorAI SillyTavern Importer & Exporter // @namespace http://tampermonkey.net/ // @version 2.5 // @description Import/Export SillyTavern V2/Custom JSON & PNG characters on JanitorAI (create, edit, view pages). Handles WEBP/non-PNG images gracefully for edit page export. // @author Minoa (https://bio.minoa.cat) // @match https://janitorai.com/create_character // @match https://janitorai.com/edit_character/* /* @match https://janitorai.com/characters/* disabled rn as its not working*/ // @require https://cdn.jsdelivr.net/npm/[email protected]/crc32.min.js // @grant GM_addStyle // @grant GM_notification // @grant GM_xmlhttpRequest // @grant GM_download // @connect api.jannyai.com // @connect *.janitorai.com // @connect * // @license MIT; https://opensource.org/licenses/MIT // @contributionURL https://bio.minoa.cat // ==/UserScript== /* * Image Handling code structure inspired by Character Editor by Avakson: * https://avakson.github.io/character-editor/ * * Script Author: Minoa * Website: https://bio.minoa.cat */ (function() { 'use strict'; // --- Constants --- const SCRIPT_VERSION = "2.5"; // Updated const TAVERN_V2_SPEC = { spec: "chara_card_v2", spec_version: "2.0" }; const CUSTOM_TOOL_META = { name: "JanitorAI Import & Exporter Tampermonkey Script By Minoa", version: SCRIPT_VERSION, url: "https://bio.minoa.cat" }; // --- CRC32 Logic --- // Included via @require // --- PNG Parsing Logic (PngHelper object remains the same) --- const PngHelper = { _uint8: new Uint8Array(4), _int32: null, _uint32: null, PNG_SIGNATURE: new Uint8Array([0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A]), initialize() { if (!this._int32) { this._int32 = new Int32Array(this._uint8.buffer); this._uint32 = new Uint32Array(this._uint8.buffer); } }, isPng(arrayBuffer) { if (!arrayBuffer || arrayBuffer.byteLength < 8) return false; const h = new Uint8Array(arrayBuffer.slice(0, 8)); return this.PNG_SIGNATURE.every((b, i) => h[i] === b); }, uint32ToBytes(num) { this.initialize(); this._uint32[0] = num; return new Uint8Array([this._uint8[3], this._uint8[2], this._uint8[1], this._uint8[0]]); }, bytesToUint32(bytes, offset = 0) { this.initialize(); this._uint8[3] = bytes[offset]; this._uint8[2] = bytes[offset + 1]; this._uint8[1] = bytes[offset + 2]; this._uint8[0] = bytes[offset + 3]; return this._uint32[0]; }, decodeText(data) { let n = true, k = '', t = ''; for (let i = 0; i < data.length; i++) { const c = data[i]; if (n) { if (c) k += String.fromCharCode(c); else n = false; } else { if (c) t += String.fromCharCode(c); else console.warn('Null char in PNG tEXt data.'); } } return { keyword: k, text: t }; }, readChunk(data, idx) { this.initialize(); const l = this.bytesToUint32(data, idx); idx += 4; const typeBytes = data.slice(idx, idx + 4); const type = String.fromCharCode(...typeBytes); idx += 4; const chunkData = data.slice(idx, idx + l); idx += l; const crc = this.bytesToUint32(data, idx); idx += 4; const typeAndData = new Uint8Array(4 + chunkData.length); typeAndData.set(typeBytes, 0); typeAndData.set(chunkData, 4); const calcCrc = CRC32.buf(typeAndData); if (this.bytesToUint32(this.uint32ToBytes(crc)) !== this.bytesToUint32(this.uint32ToBytes(calcCrc))) { console.warn(`CRC mismatch: "${type}". Expected ${crc}, got ${calcCrc}.`); } return { type: type, data: chunkData, length: l, crc: crc, nextIndex: idx }; }, readChunks(data) { if (!this.isPng(data)) throw new Error('Invalid PNG header'); const chunks = []; let idx = 8; while (idx < data.byteLength) { try { const r = this.readChunk(data, idx); chunks.push({ type: r.type, data: r.data, length: r.length, crc: r.crc }); idx = r.nextIndex; if (r.type === 'IEND') break; } catch (e) { throw new Error(`Read chunk failed: ${e.message}`); } } if (chunks.length === 0 || chunks[0].type !== 'IHDR') throw new Error('Missing IHDR/chunks.'); if (!chunks.find(c => c.type === 'IEND')) console.warn('Missing IEND.'); return chunks; }, extractCharaData(arrayBuffer) { const data = new Uint8Array(arrayBuffer); const chunks = this.readChunks(data); const textChunks = chunks.filter(c => c.type === 'tEXt').map(c => this.decodeText(c.data)); if (textChunks.length < 1) throw new Error('No tEXt chunks.'); const charaChunk = textChunks.find(t => t.keyword === 'chara'); if (!charaChunk) throw new Error('No "chara" tEXt chunk.'); try { const b64 = atob(charaChunk.text); const u8 = new Uint8Array(b64.length); for (let i = 0; i < b64.length; i++) u8[i] = b64.charCodeAt(i); const jsonStr = new TextDecoder().decode(u8); const jsonData = JSON.parse(jsonStr); return (jsonData.spec === "chara_card_v2" && jsonData.data) ? jsonData.data : jsonData; } catch (e) { throw new Error(`Decode/parse "chara" failed: ${e.message}`); } }, createTEXtChunk(keyword, text) { this.initialize(); const keywordBytes = new TextEncoder().encode(keyword); const textBytes = new TextEncoder().encode(text); const chunkData = new Uint8Array(keywordBytes.length + 1 + textBytes.length); chunkData.set(keywordBytes, 0); chunkData[keywordBytes.length] = 0; chunkData.set(textBytes, keywordBytes.length + 1); const chunkType = new TextEncoder().encode('tEXt'); const lengthBytes = this.uint32ToBytes(chunkData.length); const typeAndData = new Uint8Array(4 + chunkData.length); typeAndData.set(chunkType, 0); typeAndData.set(chunkData, 4); const crc = CRC32.buf(typeAndData); const crcBytes = this.uint32ToBytes(crc); const chunk = new Uint8Array(4 + 4 + chunkData.length + 4); chunk.set(lengthBytes, 0); chunk.set(chunkType, 4); chunk.set(chunkData, 8); chunk.set(crcBytes, 8 + chunkData.length); return chunk; }, embedCharaData(imageArrayBuffer, charaJsonData) { const imageData = new Uint8Array(imageArrayBuffer); const originalChunks = this.readChunks(imageData); const tavernV2Data = { ...TAVERN_V2_SPEC, data: charaJsonData }; const jsonString = JSON.stringify(tavernV2Data); const base64String = btoa(unescape(encodeURIComponent(jsonString))); const charaChunkBytes = this.createTEXtChunk('chara', base64String); const newPngParts = [this.PNG_SIGNATURE]; let inserted = false; for (let i = 0; i < originalChunks.length; i++) { const chunk = originalChunks[i]; if (chunk.type === 'IEND' && !inserted) { newPngParts.push(charaChunkBytes); inserted = true; console.log("Inserted 'chara' tEXt before IEND."); } const chunkTypeBytes = new TextEncoder().encode(chunk.type); const lengthBytes = this.uint32ToBytes(chunk.length); const crcBytes = this.uint32ToBytes(chunk.crc); const fullChunk = new Uint8Array(4 + 4 + chunk.data.length + 4); fullChunk.set(lengthBytes, 0); fullChunk.set(chunkTypeBytes, 4); fullChunk.set(chunk.data, 8); fullChunk.set(crcBytes, 8 + chunk.data.length); newPngParts.push(fullChunk); } if (!inserted) { console.warn("IEND not found. Appending 'chara' and new IEND."); newPngParts.push(charaChunkBytes); const iendChunk = new Uint8Array([0, 0, 0, 0, 0x49, 0x45, 0x4E, 0x44, 0xAE, 0x42, 0x60, 0x82]); newPngParts.push(iendChunk); } return new Blob(newPngParts, { type: 'image/png' }); } }; // --- Helper Functions --- // *** ENSURE THESE ARE CORRECTLY DEFINED AND ACCESSIBLE *** function setInputValue(selector, value, isTextArea = false) { const element = document.querySelector(selector); if (element && value !== undefined && value !== null) { element.value = value; element.dispatchEvent(new Event('input', { bubbles: true })); element.dispatchEvent(new Event('change', { bubbles: true })); if (isTextArea) { element.dispatchEvent(new Event('textarea', { bubbles: true })); element.style.height = 'auto'; element.style.height = (element.scrollHeight) + 'px'; } console.log(`Set ${selector} to: ${String(value).substring(0, 50)}...`); } else if (!element) console.warn(`Element not found: ${selector}`); else { element.value = ''; element.dispatchEvent(new Event('input', { bubbles: true })); element.dispatchEvent(new Event('change', { bubbles: true })); } } function getInputValue(selector) { const element = document.querySelector(selector); // Add a check to see if the element exists before trying to get value if (!element) { console.warn(`Element not found for getInputValue: ${selector}`); return undefined; // Return undefined if not found } return element.value; } function setRichTextValue(selector, value) { const element = document.querySelector(selector); if (element && value !== undefined && value !== null) { while (element.firstChild) element.removeChild(element.firstChild); const p = document.createElement('p'); p.textContent = value; element.appendChild(p); element.dispatchEvent(new Event('input', { bubbles: true, composed: true })); element.dispatchEvent(new Event('blur', { bubbles: true })); console.log(`Set Rich Text ${selector} to: ${String(value).substring(0, 50)}...`); } else if (!element) console.warn(`Rich text element not found: ${selector}`); else { while (element.firstChild) element.removeChild(element.firstChild); element.dispatchEvent(new Event('input', { bubbles: true, composed: true })); element.dispatchEvent(new Event('blur', { bubbles: true })); } } function getRichTextValue(selector) { const element = document.querySelector(selector); // Add a check to see if the element exists if (!element) { console.warn(`Rich text element not found for getRichTextValue: ${selector}`); return undefined; // Return undefined if not found } return element.textContent; } function getTagsFromReactSelect(containerSelector) { const tags = []; // Use the container selector passed to it, not a hardcoded one const controlElement = document.querySelector(containerSelector + ' .react-select__control'); if (controlElement) { controlElement.querySelectorAll(`.react-select__multi-value__label`).forEach(el => tags.push(el.textContent.trim().replace(/^#/, ''))); } else console.warn("React Select control element not found for tags inside:", containerSelector); return tags; } function downloadFile(blob, filename) { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); console.log(`Triggered download for: ${filename}`); } function sanitizeFilename(name) { // Ensure name is a string before calling replace const nameStr = String(name || ''); // Default to empty string if name is null/undefined return nameStr.trim().replace(/[\\/:*?"<>|]/g, '_').replace(/\s+/g, '_'); } function fetchUrlAsBlob(url) { // Changed to fetch Blob return new Promise((resolve, reject) => { console.log(`Fetching URL as Blob: ${url}`); GM_xmlhttpRequest({ method: "GET", url: url, responseType: "blob", // Request blob onload: r => (r.status >= 200 && r.status < 300) ? resolve(r.response) : reject(new Error(`HTTP ${r.status}: ${r.statusText}`)), onerror: r => reject(new Error(`Network error: ${r.error || 'Unknown'}`)), ontimeout: () => reject(new Error("Request timed out")) }); }); } function fetchUrlAsArrayBuffer(url) { // Kept for API download return new Promise((resolve, reject) => { console.log(`Fetching URL as ArrayBuffer: ${url}`); GM_xmlhttpRequest({ method: "GET", url: url, responseType: "arraybuffer", onload: r => (r.status >= 200 && r.status < 300) ? resolve(r.response) : reject(new Error(`HTTP ${r.status}: ${r.statusText}`)), onerror: r => reject(new Error(`Network error: ${r.error || 'Unknown'}`)), ontimeout: () => reject(new Error("Request timed out")) }); }); } // --- Image Conversion Helper --- function convertBlobToPngArrayBuffer(blob) { return new Promise((resolve, reject) => { const objectURL = URL.createObjectURL(blob); const img = new Image(); img.onload = () => { console.log(`Converting ${blob.type} to PNG...`); const canvas = document.createElement('canvas'); canvas.width = img.naturalWidth; canvas.height = img.naturalHeight; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); canvas.toBlob(pngBlob => { if (!pngBlob) { reject(new Error("Canvas toBlob failed.")); return; } const reader = new FileReader(); reader.onload = (e) => resolve(e.target.result); // Resolve with ArrayBuffer reader.onerror = (e) => reject(new Error(`FileReader error: ${e.target.error}`)); reader.readAsArrayBuffer(pngBlob); }, 'image/png'); URL.revokeObjectURL(objectURL); }; img.onerror = (err) => { URL.revokeObjectURL(objectURL); console.error("Image load error:", err); reject(new Error(`Failed to load image for conversion (Type: ${blob.type})`)); }; img.src = objectURL; }); } // --- Importer Logic (Edit/Create Page) --- function populateForm(characterData, imageFile = null) { console.log("Populating form with character data:", characterData); setInputValue('input[placeholder="Provide a unique name for your character"]', characterData.name || ''); setInputValue('input#chat_name', characterData.name || ''); setRichTextValue('div.tiptap.ProseMirror[contenteditable="true"]', characterData.description || ''); setInputValue('textarea#personality', characterData.personality || '', true); setInputValue('textarea#scenario', characterData.scenario || '', true); setInputValue('textarea#first_message', characterData.first_mes || '', true); let examples = characterData.mes_example || ''; examples = examples.replace(/<START>/g, '').trim(); examples = examples.replace(/\{\{user\}\}/gi, '{{user}}'); examples = examples.replace(/\{\{random_user_1\}\}/gi, '{{user}}'); examples = examples.replace(/\{\{char\}\}/gi, '{{char}}'); examples = examples.replace(/\{\{random_user_2\}\}/gi, '{{char}}'); setInputValue('textarea#example_dialogs', examples, true); if (imageFile instanceof File) { injectImageFile(imageFile); } else { console.log("Not setting image from import source."); } if (characterData.tags && Array.isArray(characterData.tags) && characterData.tags.length > 0) { console.warn("Tag import experimental:", characterData.tags); } else { console.log("No tags found in imported data."); } GM_notification('Character data imported successfully!', 'JanitorAI Importer'); alert('Character data imported! Please review all fields.'); } function injectImageFile(file) { const fileInput = document.querySelector('label[for="avatar"] + div input[type="file"]'); const dropZone = document.querySelector('label[for="avatar"] + div .css-1rotys8'); if (!fileInput && !dropZone) { console.error('Avatar input/dropzone not found!'); alert('Error: Could not find avatar upload element.'); return; } if (!file || !(file instanceof File)) { console.error('Invalid file for image input.'); alert('Error: Invalid image file data.'); return; } try { const dataTransfer = new DataTransfer(); dataTransfer.items.add(file); if (fileInput) { fileInput.files = dataTransfer.files; fileInput.dispatchEvent(new Event('change', { bubbles: true })); console.log(`Injected image file "${file.name}"`); } else if (dropZone) { console.log("Attempting drop event simulation..."); const dropEvent = new DragEvent('drop', { bubbles: true, cancelable: true, dataTransfer: dataTransfer }); dropZone.dispatchEvent(dropEvent); const inputEvent = new Event('input', { bubbles: true }); dropZone.dispatchEvent(inputEvent); console.log(`Simulated drop event for "${file.name}"`); } } catch (error) { console.error('Error setting image:', error); alert(`Error injecting image: ${error.message}`); } } function handleFileImport(event) { const file = event.target.files[0]; if (!file) return; const importButton = document.getElementById('jnai-import-button'); if (importButton) { importButton.textContent = 'Processing...'; importButton.disabled = true; } const reader = new FileReader(); reader.onload = async (e) => { let characterDataForForm; let imageFile = null; try { if (file.type === 'image/png') { console.log("Processing PNG file..."); const arrayBuffer = e.target.result; if (!PngHelper.isPng(arrayBuffer)) throw new Error("Selected file is not a valid PNG."); characterDataForForm = PngHelper.extractCharaData(arrayBuffer); imageFile = file; } else if (file.type === 'application/json') { console.log("Processing JSON file..."); const jsonString = e.target.result; const jsonData = JSON.parse(jsonString); if (jsonData.spec === "chara_card_v2" && jsonData.data && jsonData.name && jsonData.first_mes) { console.log("Detected NEW complex JSON format. Using 'data' object."); characterDataForForm = jsonData.data; if (!characterDataForForm.tags) characterDataForForm.tags = jsonData.data?.tags || []; } else if (jsonData.spec === "chara_card_v2" && jsonData.data) { console.log("Detected standard Tavern V2 JSON format."); characterDataForForm = jsonData.data; if (!characterDataForForm.tags) characterDataForForm.tags = jsonData.data?.tags || []; } else { console.log("Assuming Tavern V1 JSON format (or unknown)."); characterDataForForm = jsonData; if (!characterDataForForm.tags) characterDataForForm.tags = []; } } else { throw new Error('Unsupported file type. Please select a .png or .json file.'); } if (!characterDataForForm || typeof characterDataForForm !== 'object') throw new Error("Parsed data is not a valid character object."); if (!characterDataForForm.name && !characterDataForForm.description) { console.warn("Imported data missing key fields:", characterDataForForm); if (!confirm("Warning: Imported data seems incomplete. Attempt anyway?")) { throw new Error("Import cancelled by user."); } } populateForm(characterDataForForm, imageFile); } catch (error) { console.error('Import failed:', error); alert(`Import failed: ${error.message}`); GM_notification(`Import failed: ${error.message}`, 'JanitorAI Importer Error'); } finally { if (importButton) { importButton.textContent = 'Import Card/JSON'; importButton.disabled = false; } event.target.value = null; } }; reader.onerror = (e) => { console.error("FileReader error:", e); alert(`Error reading file: ${e.target.error}`); if (importButton) { importButton.textContent = 'Import Card/JSON'; importButton.disabled = false; } event.target.value = null; }; if (file.type === 'image/png') reader.readAsArrayBuffer(file); else if (file.type === 'application/json') reader.readAsText(file); else { alert('Unsupported file type.'); if (importButton) { importButton.textContent = 'Import Card/JSON'; importButton.disabled = false; } event.target.value = null; } } // --- Exporter Logic (Edit Page) --- function scrapeDataFromEditPage() { console.log("Scraping data from Edit Page..."); const data = {}; // Use the helper functions correctly data.jai_char_name = getInputValue('input#name'); data.jai_chat_name = getInputValue('input#chat_name'); data.jai_char_bio = getRichTextValue('div.tiptap.ProseMirror[contenteditable="true"]'); data.jai_personality = getInputValue('textarea#personality'); data.jai_scenario = getInputValue('textarea#scenario'); data.jai_first_message = getInputValue('textarea#first_message'); data.jai_example_dialogs = getInputValue('textarea#example_dialogs'); const imgElement = document.querySelector('div.css-aqwq0n img.chakra-image'); if (imgElement && imgElement.src) { data.imageUrl = imgElement.src.split('?')[0]; // Clean URL console.log(`Found image URL (cleaned): ${data.imageUrl}`); } else { data.imageUrl = null; console.warn("Could not find character image preview using selector 'div.css-aqwq0n img.chakra-image'."); } const tagsFormControl = Array.from(document.querySelectorAll('.chakra-form-control')) .find(el => el.querySelector('label')?.textContent?.includes('Character Tags')); if (tagsFormControl) { // Find the specific div that IS the react-select container const reactSelectContainer = tagsFormControl.querySelector('.css-tau7tx > div > div[class*="react-select"]'); if(reactSelectContainer) { // Pass the actual container selector to the helper // We need a unique way to identify this specific container if there are multiple react-selects. // Let's try finding its class name dynamically. const containerClasses = reactSelectContainer.className.split(' ').map(c => c.trim()).filter(c => c.length > 0); const specificSelector = '.' + containerClasses.join('.'); // Reconstruct a specific selector console.log("Using specific selector for tags:", specificSelector); data.tags = getTagsFromReactSelect(specificSelector); // Pass the specific selector } else { console.warn("Could not find react-select container within tags form control."); data.tags = []; } } else { console.warn("Could not find form control for tags by label."); data.tags = []; } // *** CRITICAL: Log the scraped data *before* validation *** console.log("Scraped raw data:", data); // Validation (check if chat name was actually found) if (data.jai_chat_name === undefined) { // Check for undefined explicitly alert("Cannot export: Failed to scrape 'Character Chat Name'. The page structure might have changed or the element is not ready."); return null; // Return null if essential data is missing } if (!data.jai_chat_name) { // Check if it's empty after being found alert("Cannot export: 'Character Chat Name' is empty. This is required for export."); return null; } return data; } // Exports JSON in the NEW complex format async function handleExportJsonEdit() { const scrapedData = scrapeDataFromEditPage(); if (!scrapedData) return; // Exit if scraping failed validation const exportJson = { "name": scrapedData.jai_chat_name || scrapedData.jai_char_name || "", "description": scrapedData.jai_char_bio || "", "first_mes": scrapedData.jai_first_message || "", "personality": scrapedData.jai_personality || "", "scenario": scrapedData.jai_scenario || "", "mes_example": scrapedData.jai_example_dialogs || "", "spec": "chara_card_v2", "spec_version": "2.0", "data": { "name": scrapedData.jai_chat_name || scrapedData.jai_char_name || "", "description": scrapedData.jai_char_bio || "", "personality": scrapedData.jai_personality || "", "scenario": scrapedData.jai_scenario || "", "first_mes": scrapedData.jai_first_message || "", "mes_example": scrapedData.jai_example_dialogs || "", "creator_notes": "", "system_prompt": "", "post_history_instructions": "", "alternate_greetings": [], "character_version": "", "tags": scrapedData.tags || [], "creator": "", "extensions": { "talkativeness": "0.5", "depth_prompt": { "prompt": "", "depth": "" } } }, "alternative": { /* Default/empty */ }, "misc": { /* Default/empty */ }, "metadata": { "version": 1, "created": Date.now(), "modified": Date.now(), "source": "JanitorAI Edit Page Scrape", "tool": CUSTOM_TOOL_META } }; // Add default empty structures if needed if (!exportJson.alternative) exportJson.alternative = { name_alt:"", description_alt:"", first_mes_alt:"", alternate_greetings_alt:[], personality_alt:"", scenario_alt:"", mes_example_alt:"", creator_alt:"", extensions_alt:{ talkativeness_alt:"0.5", depth_prompt_alt:{ prompt_alt:"", depth_alt:"" }}, system_prompt_alt:"", post_history_instructions_alt:"", creator_notes_alt:"", character_version_alt:"", tags_alt:[] }; if (!exportJson.misc) exportJson.misc = { rentry:"", rentry_alt:"" }; const jsonString = JSON.stringify(exportJson, null, 2); const blob = new Blob([jsonString], { type: 'application/json;charset=utf-8' }); const filename = `${sanitizeFilename(scrapedData.jai_chat_name || scrapedData.jai_char_name || 'character')}.json`; downloadFile(blob, filename); GM_notification('Character exported as custom JSON.', 'JanitorAI Exporter'); } // Exports PNG using standard V2 embedding, handles non-PNG avatars async function handleExportPngEdit() { const exportButton = document.getElementById('jnai-export-png-button'); if(exportButton) exportButton.disabled = true; // *** Scrape data FIRST *** const scrapedData = scrapeDataFromEditPage(); if (!scrapedData) { // Exit if scraping failed validation if(exportButton) exportButton.disabled = false; return; } if (!scrapedData.imageUrl) { alert("Cannot export as PNG: Image URL not found during scraping."); if(exportButton) exportButton.disabled = false; return; } // *** THEN handle image fetching and conversion *** try { console.log("Fetching image for PNG export..."); const imageBlob = await fetchUrlAsBlob(scrapedData.imageUrl); let pngArrayBuffer; console.log(`Fetched image blob. Type: ${imageBlob.type}, Size: ${imageBlob.size}`); if (imageBlob.type === 'image/png') { console.log("Image is already PNG."); pngArrayBuffer = await imageBlob.arrayBuffer(); } else if (imageBlob.type.startsWith('image/')) { console.log(`Image is not PNG (${imageBlob.type}). Converting...`); pngArrayBuffer = await convertBlobToPngArrayBuffer(imageBlob); console.log("Conversion to PNG successful."); } else { throw new Error(`Fetched file is not a recognizable image type: ${imageBlob.type || 'unknown'}`); } if (!pngArrayBuffer || pngArrayBuffer.byteLength < 8 || !PngHelper.isPng(pngArrayBuffer)) { throw new Error("Failed to obtain a valid PNG ArrayBuffer."); } // Prepare data for STANDARD V2 embedding using the ALREADY scraped data const dataToEmbed = { name: scrapedData.jai_chat_name || scrapedData.jai_char_name || "", description: scrapedData.jai_char_bio || "", personality: scrapedData.jai_personality || "", scenario: scrapedData.jai_scenario || "", first_mes: scrapedData.jai_first_message || "", mes_example: scrapedData.jai_example_dialogs || "", tags: scrapedData.tags || [], creator_notes: "", system_prompt: "", post_history_instructions: "", alternate_greetings: [], character_version: "", creator: "", extensions: { talkativeness: "0.5", depth_prompt: { prompt: "", depth: "" } } }; console.log("Embedding standard V2 data into PNG..."); const finalPngBlob = PngHelper.embedCharaData(pngArrayBuffer, dataToEmbed); console.log("Data embedded."); // Use the scraped name for the filename const filename = `${sanitizeFilename(scrapedData.jai_chat_name || scrapedData.jai_char_name || 'character')}.png`; downloadFile(finalPngBlob, filename); GM_notification('Character exported as PNG (Standard V2 Format).', 'JanitorAI Exporter'); } catch (error) { console.error('PNG Export failed:', error); alert(`PNG Export failed: ${error.message}`); GM_notification(`PNG Export failed: ${error.message}`, 'JanitorAI Exporter Error'); } finally { if(exportButton) exportButton.disabled = false; } } // --- Exporter Logic (View Page using API) --- async function downloadJannyCharacterApi(uuid) { return new Promise((resolve, reject) => { /* ... (same as before) ... */ }); } async function handleExportPngView() { /* ... (same as before) ... */ } async function handleExportJsonView() { /* ... (same as before, uses downloadJannyCharacterApi & PngHelper.extractCharaData) ... */ } // --- UI Injection --- function addButtons() { /* ... (same as before, calls the correct handlers) ... */ const pathname = window.location.pathname; const buttonContainerId = 'jnai-button-container'; const existingContainer = document.getElementById(buttonContainerId); if (existingContainer) existingContainer.remove(); const container = document.createElement('div'); container.id = buttonContainerId; Object.assign(container.style, { position: 'fixed', top: '10px', right: '15px', zIndex: '9999', display: 'flex', flexDirection: 'column', gap: '5px' }); if (pathname === '/create_character' || pathname.startsWith('/edit_character/')) { const fileInput = document.createElement('input'); fileInput.type = 'file'; fileInput.accept = '.png,.json'; fileInput.style.display = 'none'; fileInput.id = 'jnai-import-input'; fileInput.addEventListener('change', handleFileImport); const importButton = document.createElement('button'); importButton.textContent = 'Import Card/JSON'; importButton.id = 'jnai-import-button'; importButton.className = 'jnai-button'; importButton.addEventListener('click', () => fileInput.click()); container.appendChild(importButton); if (!document.getElementById(fileInput.id)) document.body.appendChild(fileInput); const exportJsonButton = document.createElement('button'); exportJsonButton.textContent = 'Export JSON (Custom)'; exportJsonButton.id = 'jnai-export-json-button'; exportJsonButton.className = 'jnai-button'; exportJsonButton.title = 'Exports in the specified custom JSON format.'; exportJsonButton.addEventListener('click', handleExportJsonEdit); container.appendChild(exportJsonButton); const exportPngButton = document.createElement('button'); exportPngButton.textContent = 'Export PNG (Std V2)'; exportPngButton.id = 'jnai-export-png-button'; exportPngButton.className = 'jnai-button'; exportPngButton.title = 'Embeds standard V2 data into the current avatar (converts if needed).'; exportPngButton.addEventListener('click', handleExportPngEdit); container.appendChild(exportPngButton); } if (pathname.startsWith('/characters/') && pathname.split('/').length > 2 && pathname.split('/')[2].length > 0) { const exportJsonButton = document.createElement('button'); exportJsonButton.textContent = 'Export JSON (API/Custom)'; exportJsonButton.id = 'jnai-export-json-button'; exportJsonButton.className = 'jnai-button jnai-button-api'; exportJsonButton.title = 'Downloads card via API and formats as custom JSON.'; exportJsonButton.addEventListener('click', handleExportJsonView); container.appendChild(exportJsonButton); const exportPngButton = document.createElement('button'); exportPngButton.textContent = 'Export PNG (API/Std V2)'; exportPngButton.id = 'jnai-export-png-button'; exportPngButton.className = 'jnai-button jnai-button-api'; exportPngButton.title = 'Downloads card via API (should be standard V2 PNG).'; exportPngButton.addEventListener('click', handleExportPngView); container.appendChild(exportPngButton); } if (container.hasChildNodes()) document.body.appendChild(container); else console.log("No buttons added for current page:", pathname); } // --- Styling --- GM_addStyle(` .jnai-button { padding: 8px 12px; background-color: #6a4f8a; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 12px; /* Smaller font */ box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: background-color 0.2s ease, transform 0.1s ease; text-align: center; white-space: nowrap; } .jnai-button:hover { background-color: #8363a8; } .jnai-button:active { transform: scale(0.98); } .jnai-button:disabled { background-color: #cccccc; color: #666666; cursor: not-allowed; } .jnai-button-api { background-color: #5a7a9a; } .jnai-button-api:hover { background-color: #7395b8; } `); // --- Initialization --- console.log(`JanitorAI SillyTavern Importer/Exporter v${SCRIPT_VERSION} Initializing...`); let currentPage = window.location.pathname; const observer = new MutationObserver(() => { const mainContentSelector = 'main, [role="main"], #app main, .css-1t6eusi, .css-lo240v'; const isReady = document.querySelector(mainContentSelector); const urlChanged = window.location.pathname !== currentPage; if (isReady && (urlChanged || !document.getElementById('jnai-button-container'))) { console.log("Page change/load detected, adding/refreshing buttons for:", window.location.pathname); currentPage = window.location.pathname; // Increased delay slightly, might help ensure elements are populated setTimeout(addButtons, 800); } else if (urlChanged) { currentPage = window.location.pathname; } }); observer.observe(document.body, { childList: true, subtree: true }); // Increased initial delay setTimeout(addButtons, 1500); })();
