c.ai X Character Creation Helper

Gives visual feedback for the definition

当前为 2024-04-02 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name c.ai X Character Creation Helper
  3. // @namespace c.ai X Character Creation Helper
  4. // @version 1.2
  5. // @license MIT
  6. // @description Gives visual feedback for the definition
  7. // @author Vishanka
  8. // @match https://character.ai/*
  9. // @grant none
  10. // ==/UserScript==
  11.  
  12.  
  13. (function() {
  14. 'use strict';
  15.  
  16. // Function to check for element's presence and execute a callback when found
  17. const checkElementPresence = (selector, callback, maxAttempts = 10) => {
  18. let attempts = 0;
  19. const interval = setInterval(() => {
  20. const element = document.querySelector(selector);
  21. if (element) {
  22. clearInterval(interval);
  23. callback(element);
  24. } else if (++attempts >= maxAttempts) {
  25. clearInterval(interval);
  26. console.warn(`Element ${selector} not found after ${maxAttempts} attempts.`);
  27. }
  28. }, 1000);
  29. };
  30.  
  31. // Function to monitor elements on the page
  32. function monitorElements() {
  33. const initialElementIds = [
  34. //'div.flex-auto:nth-child(1) > div:nth-child(2) > div:nth-child(1)',
  35. 'div.relative:nth-child(5) > div:nth-child(1) > div:nth-child(1)', // Greeting
  36. 'div.relative:nth-child(4) > div:nth-child(1) > div:nth-child(1)' // Description
  37. ];
  38.  
  39. initialElementIds.forEach(selector => {
  40. checkElementPresence(selector, (element) => {
  41. console.log(`Content of ${selector}:`, element.textContent);
  42. });
  43. });
  44.  
  45. // Selector for the definition
  46. const definitionSelector = '.transition > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)';
  47. checkElementPresence(definitionSelector, (element) => {
  48. const textarea = element.querySelector('textarea');
  49. if (textarea && !document.querySelector('.custom-definition-panel')) {
  50. updatePanel(textarea); // Initial panel setup
  51.  
  52. // Observer to detect changes in the textarea content
  53. const observer = new MutationObserver(() => {
  54. updatePanel(textarea);
  55. });
  56.  
  57. observer.observe(textarea, {attributes: true, childList: true, subtree: true, characterData: true});
  58. }
  59. });
  60. }
  61.  
  62. // Function to update or create the DefinitionFeedbackPanel based on textarea content
  63. function updatePanel(textarea) {
  64. let DefinitionFeedbackPanel = document.querySelector('.custom-definition-panel');
  65. if (!DefinitionFeedbackPanel) {
  66. DefinitionFeedbackPanel = document.createElement('div');
  67. DefinitionFeedbackPanel.classList.add('custom-definition-panel');
  68. textarea.parentNode.insertBefore(DefinitionFeedbackPanel, textarea);
  69. }
  70. DefinitionFeedbackPanel.innerHTML = ''; // Clear existing content
  71. DefinitionFeedbackPanel.style.border = '0px solid #ccc';
  72. DefinitionFeedbackPanel.style.padding = '10px';
  73. DefinitionFeedbackPanel.style.marginBottom = '10px';
  74.  
  75. const cleanedContent = textarea.value.trim();
  76. console.log(`Content of Definition:`, cleanedContent);
  77. const textLines = cleanedContent.split('\n');
  78. let lastColor = '#222326';
  79. let isDialogueContinuation = false; // Track if the current line continues a dialogue
  80. let prevColor = null; // Track the previous line's color for detecting color changes
  81.  
  82.  
  83. // Determine line color based on content and dialogue continuation logic
  84. let consecutiveCharCount = 0;
  85. let lastCharColor = '';
  86. let lastNamedCharacterColor = '';
  87. //let isDialogueContinuation = false;
  88.  
  89. function determineLineColor(line, prevLine) {
  90. const dialogueStarterRegex = /^\{\{(?:char|user|random_user_[^\}]*)\}\}:|^[\S]+:/;
  91. const isDialogueStarter = dialogueStarterRegex.test(line);
  92. const continuesDialogue = prevLine && prevLine.trim().endsWith(':') && (line.startsWith(' ') || !dialogueStarterRegex.test(line));
  93.  
  94. if (isDialogueStarter) {
  95. isDialogueContinuation = true;
  96. if (line.startsWith('{{char}}:')) {
  97. consecutiveCharCount++;
  98. lastColor = consecutiveCharCount % 2 === 0 ? '#26272B' : '#292A2E';
  99. lastCharColor = lastColor;
  100. } else if (line.match(/^[\S]+:/)) {
  101. lastNamedCharacterColor = lastNamedCharacterColor === '#474747' ? '#4C4C4D' : '#474747';
  102. lastColor = lastNamedCharacterColor;
  103. }
  104. else if (line.match(/^\{\{random_user_[^\}]*\}\}:|^\{\{random_user_\}\}:|^{{random_user_}}/)) {
  105. lastNamedCharacterColor = lastNamedCharacterColor === '#474747' ? '#4C4C4D' : '#474747';
  106. lastColor = lastNamedCharacterColor;
  107. } else {
  108. consecutiveCharCount = 0;
  109. lastColor = line.startsWith('{{user}}:') ? '#37362F' : '#3B3A32';
  110. }
  111. } else if (line.startsWith('END_OF_DIALOG')) {
  112. isDialogueContinuation = false;
  113. lastColor = 'rgba(65, 65, 66, 0)';
  114. } else if (isDialogueContinuation && continuesDialogue) {
  115. // Do nothing, continuation of dialogue
  116. } else if (isDialogueContinuation && !isDialogueStarter) {
  117. // Do nothing, continuation of dialogue
  118. } else {
  119. isDialogueContinuation = false;
  120. lastColor = 'rgba(65, 65, 66, 0)';
  121. }
  122. return lastColor;
  123. }
  124.  
  125. // Function to remove dialogue starters from the start of a line
  126. let trimmedParts = []; // Array to store trimmed parts
  127. let consecutiveLines = []; // Array to store consecutive lines with the same color
  128. //let prevColor = null;
  129.  
  130. function trimDialogueStarters(line) {
  131. const dialogueStarterRegex = /^(\{\{char\}\}:|\{\{user\}\}:|\{\{random_user_[^\}]*\}\}:|[A-Za-z\S]+:)\s*/;
  132.  
  133.  
  134. const trimmed = line.match(dialogueStarterRegex);
  135. if (trimmed) {
  136. trimmedParts.push(trimmed[0]); // Store the trimmed part
  137. }
  138. return line.replace(dialogueStarterRegex, '');
  139. }
  140.  
  141. function groupConsecutiveLines(color, lineDiv) {
  142. // Check if there are consecutive lines with the same color
  143. if (consecutiveLines.length > 0 && consecutiveLines[0].color === color) {
  144. consecutiveLines.push({ color, lineDiv });
  145. } else {
  146. // If not, append the previous group of consecutive lines and start a new group
  147. appendConsecutiveLines();
  148. consecutiveLines.push({ color, lineDiv });
  149. }
  150. }
  151.  
  152. function appendConsecutiveLines() {
  153. if (consecutiveLines.length > 0) {
  154. const groupDiv = document.createElement('div');
  155. const color = consecutiveLines[0].color;
  156.  
  157. // Create a container div that could potentially use flexbox
  158. const containerDiv = document.createElement('div');
  159. containerDiv.style.width = '100%';
  160.  
  161. groupDiv.style.backgroundColor = color;
  162. groupDiv.style.padding = '12px';
  163. groupDiv.style.borderRadius = '16px';
  164. groupDiv.style.display = 'inline-block';
  165. groupDiv.style.maxWidth = '100%'; // You might adjust this as needed
  166.  
  167. // Only apply flexbox styling if the color condition is met
  168. if (color === '#37362F' || color === '#3B3A32') {
  169. containerDiv.style.display = 'flex';
  170. containerDiv.style.justifyContent = 'flex-end'; // Aligns the child div to the right
  171. }
  172.  
  173. consecutiveLines.forEach(({ lineDiv }) => {
  174. groupDiv.appendChild(lineDiv);
  175. });
  176.  
  177. // Add the groupDiv to the containerDiv (flex or not based on color)
  178. containerDiv.appendChild(groupDiv);
  179.  
  180. // Append the containerDiv to the DefinitionFeedbackPanel
  181. DefinitionFeedbackPanel.appendChild(containerDiv);
  182. consecutiveLines = []; // Clear the array
  183. }
  184. }
  185.  
  186.  
  187.  
  188. function formatText(text) {
  189. // Handle headers; replace Markdown headers (# Header) with <h1>, <h2>, etc.
  190. text = text.replace(/^(######\s)(.*)$/gm, '<h6>$2</h6>'); // For h6
  191. text = text.replace(/^(#####\s)(.*)$/gm, '<h5>$2</h5>'); // For h5
  192. text = text.replace(/^(####\s)(.*)$/gm, '<h4>$2</h4>'); // For h4
  193. text = text.replace(/^(###\s)(.*)$/gm, '<h3>$2</h3>'); // For h3
  194. text = text.replace(/^(##\s)(.*)$/gm, '<h2>$2</h2>'); // For h2
  195. text = text.replace(/^(#\s)(.*)$/gm, '<h1>$2</h1>'); // For h1
  196.  
  197. // Process bold italic before bold or italic to avoid nesting conflicts
  198. text = text.replace(/\*\*\*([^*]+)\*\*\*/g, '<em><strong>$1</strong></em>');
  199. // Replace text wrapped in double asterisks with <strong> tags for bold
  200. text = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
  201. // Finally, replace text wrapped in single asterisks with <em> tags for italics
  202. text = text.replace(/\*([^*]+)\*/g, '<em>$1</em>');
  203.  
  204. return text;
  205. }
  206.  
  207.  
  208.  
  209. textLines.forEach((line, index) => {
  210. const prevLine = index > 0 ? textLines[index - 1] : null;
  211. const currentColor = determineLineColor(line, prevLine);
  212. const trimmedLine = trimDialogueStarters(line);
  213.  
  214. if (prevColor && currentColor !== prevColor) {
  215. appendConsecutiveLines(); // Append previous group of consecutive lines
  216.  
  217. const spacingDiv = document.createElement('div');
  218. spacingDiv.style.marginBottom = '20px';
  219. DefinitionFeedbackPanel.appendChild(spacingDiv);
  220. }
  221.  
  222. const lineDiv = document.createElement('div');
  223. lineDiv.style.wordWrap = 'break-word'; // Allow text wrapping
  224.  
  225. if (trimmedLine.startsWith("END_OF_DIALOG")) {
  226. appendConsecutiveLines(); // Make sure to append any pending groups before adding the divider
  227. const separatorLine = document.createElement('hr');
  228. DefinitionFeedbackPanel.appendChild(separatorLine); // This ensures the divider is on a new line
  229. } else {
  230. if (trimmedParts.length > 0) {
  231. const headerDiv = document.createElement('div');
  232. const headerText = trimmedParts.shift();
  233. const formattedHeaderText = headerText.replace(/:/g, '');
  234. headerDiv.textContent = formattedHeaderText;
  235. if (formattedHeaderText.includes('{{user}}')) {
  236. headerDiv.style.textAlign = 'right';
  237. }
  238. DefinitionFeedbackPanel.appendChild(headerDiv);
  239. }
  240.  
  241. if (trimmedLine.trim() === '') {
  242. lineDiv.appendChild(document.createElement('br'));
  243. } else {
  244. const paragraph = document.createElement('p');
  245. // Call formatTextForItalics to wrap text in asterisks with <em> tags
  246. paragraph.innerHTML = formatText(trimmedLine);
  247. lineDiv.appendChild(paragraph);
  248. }
  249.  
  250. groupConsecutiveLines(currentColor, lineDiv);
  251. }
  252.  
  253. prevColor = currentColor;
  254. });
  255.  
  256. appendConsecutiveLines();
  257.  
  258.  
  259.  
  260.  
  261. }
  262.  
  263.  
  264.  
  265. // Monitor for URL changes to re-initialize element monitoring
  266. let currentUrl = window.location.href;
  267. setInterval(() => {
  268. if (window.location.href !== currentUrl) {
  269. console.log("URL changed. Re-initializing element monitoring.");
  270. currentUrl = window.location.href;
  271. monitorElements();
  272. }
  273. }, 1000);
  274.  
  275. monitorElements();
  276. })();