fold
wrap
999
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
▸
▾
▾
▾
aiTextPlugin = {import:ai-text-plugin}
textToImagePlugin = {import:text-to-image-plugin}
commentsPlugin = {import:comments-plugin}
tabbedCommentsPlugin = {import:tabbed-comments-plugin-v1}
uploadPlugin = {import:upload-plugin} // <-- for character share links
superFetch = {import:super-fetch-plugin} // <-- to bypass CORs issues in character custom code
fullscreenButtonPlugin = {import:fullscreen-button-plugin}
combineEmojis = {import:combine-emojis-plugin}
bugReport = {import:bug-report-plugin} // for comments-plugin-based feedback button - it's a helper for getting browser debug info like browser version, localStorage size limits, etc. - stuff that's relevant to bug reports
// HEADS UP:
// All the code you see here and in the bottom-right editor is what "powers" this chat app thing.
// Perchance allows you to make random generators, but it also allows you to create more complex applications like this one.
// If you accidentally opened this, then click the "fullscreen" button to go back to using the chat app.
// If you want to customize it to create your own chat app, then you can do that by editing this code, but it's pretty complex!
// I'd recommend starting simpler if you're new to Perchance.
// Start with the tutorial: perchance.org/tutorial
// Then check out this plugin and the examples linked on the plugin page: perchance.org/ai-text-plugin
async generateShareLinkForCharacter(json) =>
if(!window.CompressionStream) {
alert("Share links use a feature that's only available in modern browsers. Please upgrade your browser to the latest version to use this feature. If you're using Safari, switch to Chrome instead.");
return;
}
let loadingModal = createLoadingModal("⏳ Generating share link...");
let jsonString = JSON.stringify(json);
let urlHashData = encodeURIComponent(JSON.stringify(json)).replace(/[!'()*]/g, function(c) {
return '%' + c.charCodeAt(0).toString(16); // since encodeURIComponent doesn't encode some characters (like parentheses) and they mess up markdown links
});
console.log("shareUrl (hash version):", `https://perchance.org/${window.generatorName}#${urlHashData}`);
// convert json text to blob:
let dataUrlJsonString = jsonString.replace(/#/g, "%23"); // since hash is a special character in dataurls (like normal URLs)
⚙️
open popout
wrap lines
fold lines
font size
auto آلي
wrap
99999
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
▸
▾
▾
▾
▾
▾
▾
▾
<script>window.pageLoadStartTime = Date.now(); console.log("pageLoadStartTime:", window.pageLoadStartTime);</script>
<script>window.dbName = "chatbot-ui-v1";</script>
<div id="initialPageLoadingModal" style="pointer-events:none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: 100; display: flex; justify-content: center; align-items: center; padding: 1rem; z-index: 99999999;"><div style="background-color: white; border-radius: 3px; background-color: var(--background); border-radius: var(--border-radius); padding: 1rem; text-align: center; box-shadow: 0px 1px 10px 3px rgb(130 130 130 / 24%);">Loading...</div></div>
<div id="emergencyExportCtn" hidden style="width:100%; position:fixed; top:1rem; z-index:1000;">
<div style="background:var(--box-color); border: 2px solid red; border-radius:var(--border-radius); margin:0 auto; padding:1rem; max-width:max-content; text-align:center;">
<div style="font-size:80%; display:block; text-align:center; margin-bottom: 0.5rem; color:red; font-weight:bold;">Error during load?<br>Try reloading the page, or:</div>
<button id="emergencyExportBtn" onclick="emergencyExportClickHandler(this)" style="font-size:160%;">💾 export data</button>
<button id="emergencyDeleteDataBtn" hidden onclick="emergencyDeleteAllDataClickHandler(this)" style="font-size:160%; display:block; margin:0 auto; margin-top:2rem;">🚨 delete all data</button>
</div>
</div>
<script>
// Display the 'emergency' export button after several seconds if the UI hasn't loaded yet.
// This setTimeout is cleared after UI load.
window.emergencyExportButtonDisplayTimeout = setTimeout(() => {
emergencyExportCtn.hidden = false;
initialPageLoadingModal.hidden = true;
}, 5000);
async function emergencyDeleteAllDataClickHandler() {
emergencyDeleteDataBtn.disabled = true;
emergencyDeleteDataBtn.textContent = `Deleting...`;
await new Promise(r => setTimeout(r, 500));
const request = window.indexedDB.deleteDatabase(window.dbName);
request.onerror = function(event) {
console.error("Error deleting database:", event);
emergencyDeleteDataBtn.textContent = `⚠️ error`;
alert(`Failed to delete data. Please ask for help on the forum. Screenshot this error info: ${event}`);
};
request.onsuccess = function(event) {
console.log("Database deleted successfully");
emergencyDeleteDataBtn.textContent = `✅ deleted`;
alert(`Database deleted successfully. You can now reload/refresh the page.`);
⚙️
open popout
wrap lines
fold lines
font size