microservices are able to run (#5)

chat_gpt_microservice/client/js/change-language.js

@@ -0,0 +1,47 @@
+document.addEventListener('DOMContentLoaded', fetchLanguages);  
+  
+async function fetchLanguages() {  
+    try {  
+        const [languagesResponse, currentLanguageResponse] = await Promise.all([  
+            fetch(`${url_prefix}/get-languages`),  
+            fetch(`${url_prefix}/get-locale`)  
+        ]);  
+  
+        const languages = await languagesResponse.json();  
+        const currentLanguage = await currentLanguageResponse.text();  
+  
+        const languageSelect = document.getElementById('language');  
+        languages.forEach(lang => {  
+            const option = document.createElement('option');  
+            option.value = lang;  
+            option.textContent = lang;  
+            languageSelect.appendChild(option);  
+        });  
+  
+        const savedLanguage = localStorage.getItem("language") || currentLanguage;  
+        setLanguageOnPageLoad(savedLanguage);  
+    } catch (error) {  
+        console.error("Failed to fetch languages or current language");  
+    }  
+}  
+  
+function setLanguageOnPageLoad(language) {  
+    document.getElementById("language").value = language;  
+}  
+  
+function changeLanguage(lang) {  
+    fetch(`${url_prefix}/change-language`, {  
+        method: "POST",  
+        headers: {  
+            "Content-Type": "application/json",  
+        },  
+        body: JSON.stringify({ language: lang }),  
+    }).then((response) => {  
+        if (response.ok) {  
+            localStorage.setItem("language", lang);  
+            location.reload();  
+        } else {  
+            console.error("Failed to change language");  
+        }  
+    });  
+}  

chat_gpt_microservice/client/js/chat.js

@@ -0,0 +1,508 @@
+const query = (obj) =>
+	Object.keys(obj)
+		.map((k) => encodeURIComponent(k) + "=" + encodeURIComponent(obj[k]))
+		.join("&");
+const url_prefix = document.querySelector("body").getAttribute("data-urlprefix");
+const markdown = window.markdownit();
+const message_box = document.getElementById(`messages`);
+const message_input = document.getElementById(`message-input`);
+const box_conversations = document.querySelector(`.top`);
+const spinner = box_conversations.querySelector(".spinner");
+const stop_generating = document.querySelector(`.stop-generating`);
+const send_button = document.querySelector(`#send-button`);
+const user_image = `<img src="${url_prefix}/assets/img/user.png" alt="User Avatar">`;
+const gpt_image = `<img src="${url_prefix}/assets/img/gpt.png" alt="GPT Avatar">`;
+let prompt_lock = false;
+
+hljs.addPlugin(new CopyButtonPlugin());
+
+message_input.addEventListener("blur", () => {
+	window.scrollTo(0, 0);
+});
+
+message_input.addEventListener("focus", () => {
+	document.documentElement.scrollTop = document.documentElement.scrollHeight;
+});
+
+const delete_conversations = async () => {
+	localStorage.clear();
+	await new_conversation();
+};
+
+const handle_ask = async () => {
+	message_input.style.height = `80px`;
+	window.scrollTo(0, 0);
+	let message = message_input.value;
+
+	if (message.length > 0) {
+		message_input.value = ``;
+		message_input.dispatchEvent(new Event("input"));
+		await ask_gpt(message);
+	}
+};
+
+const remove_cancel_button = async () => {
+	stop_generating.classList.add(`stop-generating-hiding`);
+
+	setTimeout(() => {
+		stop_generating.classList.remove(`stop-generating-hiding`);
+		stop_generating.classList.add(`stop-generating-hidden`);
+	}, 300);
+};
+
+const ask_gpt = async (message) => {
+	try {
+		message_input.value = ``;
+		message_input.innerHTML = ``;
+		message_input.innerText = ``;
+
+		add_conversation(window.conversation_id, message.substr(0, 16));
+		window.scrollTo(0, 0);
+		window.controller = new AbortController();
+
+		jailbreak = document.getElementById("jailbreak");
+		model = document.getElementById("model");
+		prompt_lock = true;
+		window.text = ``;
+		window.token = message_id();
+
+		stop_generating.classList.remove(`stop-generating-hidden`);
+
+		add_user_message_box(message);
+
+		message_box.scrollTop = message_box.scrollHeight;
+		window.scrollTo(0, 0);
+		await new Promise((r) => setTimeout(r, 500));
+		window.scrollTo(0, 0);
+
+		message_box.innerHTML += `
+            <div class="message">
+                <div class="avatar-container">
+                    ${gpt_image}
+                </div>
+                <div class="content" id="gpt_${window.token}">
+                    <div id="cursor"></div>
+                </div>
+            </div>
+        `;
+
+		message_box.scrollTop = message_box.scrollHeight;
+		window.scrollTo(0, 0);
+		await new Promise((r) => setTimeout(r, 1000));
+		window.scrollTo(0, 0);
+
+		const response = await fetch(`${url_prefix}/backend-api/v2/conversation`, {
+			method: `POST`,
+			signal: window.controller.signal,
+			headers: {
+				"content-type": `application/json`,
+				accept: `text/event-stream`,
+			},
+			body: JSON.stringify({
+				conversation_id: window.conversation_id,
+				action: `_ask`,
+				model: model.options[model.selectedIndex].value,
+				jailbreak: jailbreak.options[jailbreak.selectedIndex].value,
+				meta: {
+					id: window.token,
+					content: {
+						conversation: await get_conversation(window.conversation_id),
+						internet_access: document.getElementById("switch").checked,
+						content_type: "text",
+						parts: [
+							{
+								content: message,
+								role: "user",
+							},
+						],
+					},
+				},
+			}),
+		});
+
+		const reader = response.body.getReader();
+
+		while (true) {
+			const { value, done } = await reader.read();
+			if (done) break;
+
+			chunk = decodeUnicode(new TextDecoder().decode(value));
+
+			if (
+				chunk.includes(`<form id="challenge-form" action="${url_prefix}/backend-api/v2/conversation?`)
+			) {
+				chunk = `cloudflare token expired, please refresh the page.`;
+			}
+
+			text += chunk;
+
+			document.getElementById(`gpt_${window.token}`).innerHTML = markdown.render(text);
+			document.querySelectorAll(`code`).forEach((el) => {
+				hljs.highlightElement(el);
+			});
+
+			window.scrollTo(0, 0);
+			message_box.scrollTo({ top: message_box.scrollHeight, behavior: "auto" });
+		}
+
+		// if text contains :
+		if (text.includes(`instead. Maintaining this website and API costs a lot of money`)) {
+			document.getElementById(`gpt_${window.token}`).innerHTML =
+				"An error occurred, please reload / refresh cache and try again.";
+		}
+
+		add_message(window.conversation_id, "user", message);
+		add_message(window.conversation_id, "assistant", text);
+
+		message_box.scrollTop = message_box.scrollHeight;
+		await remove_cancel_button();
+		prompt_lock = false;
+
+		await load_conversations(20, 0);
+		window.scrollTo(0, 0);
+	} catch (e) {
+		add_message(window.conversation_id, "user", message);
+
+		message_box.scrollTop = message_box.scrollHeight;
+		await remove_cancel_button();
+		prompt_lock = false;
+
+		await load_conversations(20, 0);
+
+		console.log(e);
+
+		let cursorDiv = document.getElementById(`cursor`);
+		if (cursorDiv) cursorDiv.parentNode.removeChild(cursorDiv);
+
+		if (e.name != `AbortError`) {
+			let error_message = `oops ! something went wrong, please try again / reload. [stacktrace in console]`;
+
+			document.getElementById(`gpt_${window.token}`).innerHTML = error_message;
+			add_message(window.conversation_id, "assistant", error_message);
+		} else {
+			document.getElementById(`gpt_${window.token}`).innerHTML += ` [aborted]`;
+			add_message(window.conversation_id, "assistant", text + ` [aborted]`);
+		}
+
+		window.scrollTo(0, 0);
+	}
+};
+
+const add_user_message_box = (message) => {
+	const messageDiv = createElement("div", { classNames: ["message"] });
+	const avatarContainer = createElement("div", { classNames: ["avatar-container"], innerHTML: user_image });
+	const contentDiv = createElement("div", {
+		classNames: ["content"],
+		id: `user_${token}`,
+		textContent: message,
+	});
+
+	messageDiv.append(avatarContainer, contentDiv);
+	message_box.appendChild(messageDiv);
+};
+
+const decodeUnicode = (str) => {
+	return str.replace(/\\u([a-fA-F0-9]{4})/g, function (match, grp) {
+		return String.fromCharCode(parseInt(grp, 16));
+	});
+};
+
+const clear_conversations = async () => {
+	const elements = box_conversations.childNodes;
+	let index = elements.length;
+
+	if (index > 0) {
+		while (index--) {
+			const element = elements[index];
+			if (element.nodeType === Node.ELEMENT_NODE && element.tagName.toLowerCase() !== `button`) {
+				box_conversations.removeChild(element);
+			}
+		}
+	}
+};
+
+const clear_conversation = async () => {
+	let messages = message_box.getElementsByTagName(`div`);
+
+	while (messages.length > 0) {
+		message_box.removeChild(messages[0]);
+	}
+};
+
+const delete_conversation = async (conversation_id) => {
+	localStorage.removeItem(`conversation:${conversation_id}`);
+
+	if (window.conversation_id == conversation_id) {
+		await new_conversation();
+	}
+
+	await load_conversations(20, 0, true);
+};
+
+const set_conversation = async (conversation_id) => {
+	history.pushState({}, null, `${url_prefix}/chat/${conversation_id}`);
+	window.conversation_id = conversation_id;
+
+	await clear_conversation();
+	await load_conversation(conversation_id);
+	await load_conversations(20, 0, true);
+};
+
+const new_conversation = async () => {
+	history.pushState({}, null, `${url_prefix}/chat/`);
+	window.conversation_id = uuid();
+
+	await clear_conversation();
+	await load_conversations(20, 0, true);
+};
+
+const load_conversation = async (conversation_id) => {
+	let conversation = await JSON.parse(localStorage.getItem(`conversation:${conversation_id}`));
+	console.log(conversation, conversation_id);
+
+	for (item of conversation.items) {
+		if (is_assistant(item.role)) {
+			message_box.innerHTML += load_gpt_message_box(item.content);
+		} else {
+			message_box.innerHTML += load_user_message_box(item.content);
+		}
+	}
+
+	document.querySelectorAll(`code`).forEach((el) => {
+		hljs.highlightElement(el);
+	});
+
+	message_box.scrollTo({ top: message_box.scrollHeight, behavior: "smooth" });
+
+	setTimeout(() => {
+		message_box.scrollTop = message_box.scrollHeight;
+	}, 500);
+};
+
+const load_user_message_box = (content) => {
+	const messageDiv = createElement("div", { classNames: ["message"] });
+	const avatarContainer = createElement("div", { classNames: ["avatar-container"], innerHTML: user_image });
+	const contentDiv = createElement("div", { classNames: ["content"] });
+	const preElement = document.createElement("pre");
+	preElement.textContent = content;
+	contentDiv.appendChild(preElement);
+
+	messageDiv.append(avatarContainer, contentDiv);
+
+	return messageDiv.outerHTML;
+};
+
+const load_gpt_message_box = (content) => {
+	return `
+            <div class="message">
+                <div class="avatar-container">
+                    ${gpt_image}
+                </div>
+                <div class="content">
+                    ${markdown.render(content)}
+                </div>
+            </div>
+        `;
+};
+
+const is_assistant = (role) => {
+	return role == "assistant";
+};
+
+const get_conversation = async (conversation_id) => {
+	let conversation = await JSON.parse(localStorage.getItem(`conversation:${conversation_id}`));
+	return conversation.items;
+};
+
+const add_conversation = async (conversation_id, title) => {
+	if (localStorage.getItem(`conversation:${conversation_id}`) == null) {
+		localStorage.setItem(
+			`conversation:${conversation_id}`,
+			JSON.stringify({
+				id: conversation_id,
+				title: title,
+				items: [],
+			})
+		);
+	}
+};
+
+const add_message = async (conversation_id, role, content) => {
+	before_adding = JSON.parse(localStorage.getItem(`conversation:${conversation_id}`));
+
+	before_adding.items.push({
+		role: role,
+		content: content,
+	});
+
+	localStorage.setItem(`conversation:${conversation_id}`, JSON.stringify(before_adding)); // update conversation
+};
+
+const load_conversations = async (limit, offset, loader) => {
+	//console.log(loader);
+	//if (loader === undefined) box_conversations.appendChild(spinner);
+
+	let conversations = [];
+	for (let i = 0; i < localStorage.length; i++) {
+		if (localStorage.key(i).startsWith("conversation:")) {
+			let conversation = localStorage.getItem(localStorage.key(i));
+			conversations.push(JSON.parse(conversation));
+		}
+	}
+
+	//if (loader === undefined) spinner.parentNode.removeChild(spinner)
+	await clear_conversations();
+
+	for (conversation of conversations) {
+		box_conversations.innerHTML += `
+            <div class="conversation-sidebar">
+                <div class="left" onclick="set_conversation('${conversation.id}')">
+                    <i class="fa-regular fa-comments"></i>
+                    <span class="conversation-title">${conversation.title}</span>
+                </div>
+                <i onclick="delete_conversation('${conversation.id}')" class="fa-regular fa-trash"></i>
+            </div>
+        `;
+	}
+
+	document.querySelectorAll(`code`).forEach((el) => {
+		hljs.highlightElement(el);
+	});
+};
+
+document.getElementById(`cancelButton`).addEventListener(`click`, async () => {
+	window.controller.abort();
+	console.log(`aborted ${window.conversation_id}`);
+});
+
+function h2a(str1) {
+	var hex = str1.toString();
+	var str = "";
+
+	for (var n = 0; n < hex.length; n += 2) {
+		str += String.fromCharCode(parseInt(hex.substr(n, 2), 16));
+	}
+
+	return str;
+}
+
+const uuid = () => {
+	return `xxxxxxxx-xxxx-4xxx-yxxx-${Date.now().toString(16)}`.replace(/[xy]/g, function (c) {
+		var r = (Math.random() * 16) | 0,
+			v = c == "x" ? r : (r & 0x3) | 0x8;
+		return v.toString(16);
+	});
+};
+
+const message_id = () => {
+	random_bytes = (Math.floor(Math.random() * 1338377565) + 2956589730).toString(2);
+	unix = Math.floor(Date.now() / 1000).toString(2);
+
+	return BigInt(`0b${unix}${random_bytes}`).toString();
+};
+
+window.onload = async () => {
+	load_settings_localstorage();
+
+	conversations = 0;
+	for (let i = 0; i < localStorage.length; i++) {
+		if (localStorage.key(i).startsWith("conversation:")) {
+			conversations += 1;
+		}
+	}
+
+	if (conversations == 0) localStorage.clear();
+
+	await setTimeout(() => {
+		load_conversations(20, 0);
+	}, 1);
+
+	if (!window.location.href.endsWith(`#`)) {
+		if (/\/chat\/.+/.test(window.location.href.slice(url_prefix.length))) {
+			await load_conversation(window.conversation_id);
+		}
+	}
+
+	message_input.addEventListener("keydown", async (evt) => {
+		if (prompt_lock) return;
+
+		if (evt.key === "Enter" && !evt.shiftKey) {
+			evt.preventDefault();
+			await handle_ask();
+		}
+	});
+
+	send_button.addEventListener("click", async (event) => {
+		event.preventDefault();
+		if (prompt_lock) return;
+		message_input.blur();
+		await handle_ask();
+	});
+
+	register_settings_localstorage();
+};
+
+const register_settings_localstorage = async () => {
+	settings_ids = ["switch", "model", "jailbreak"];
+	settings_elements = settings_ids.map((id) => document.getElementById(id));
+	settings_elements.map((element) =>
+		element.addEventListener(`change`, async (event) => {
+			switch (event.target.type) {
+				case "checkbox":
+					localStorage.setItem(event.target.id, event.target.checked);
+					break;
+				case "select-one":
+					localStorage.setItem(event.target.id, event.target.selectedIndex);
+					break;
+				default:
+					console.warn("Unresolved element type");
+			}
+		})
+	);
+};
+
+const load_settings_localstorage = async () => {
+	settings_ids = ["switch", "model", "jailbreak"];
+	settings_elements = settings_ids.map((id) => document.getElementById(id));
+	settings_elements.map((element) => {
+		if (localStorage.getItem(element.id)) {
+			switch (element.type) {
+				case "checkbox":
+					element.checked = localStorage.getItem(element.id) === "true";
+					break;
+				case "select-one":
+					element.selectedIndex = parseInt(localStorage.getItem(element.id));
+					break;
+				default:
+					console.warn("Unresolved element type");
+			}
+		}
+	});
+};
+
+function clearTextarea(textarea) {
+	textarea.style.removeProperty("height");
+	textarea.style.height = `${textarea.scrollHeight + 4}px`;
+	if (textarea.value.trim() === "" && textarea.value.includes("\n")) {
+		textarea.value = "";
+	}
+}
+
+function createElement(tag, { classNames, id, innerHTML, textContent } = {}) {
+	const el = document.createElement(tag);
+	if (classNames) {
+		el.classList.add(...classNames);
+	}
+	if (id) {
+		el.id = id;
+	}
+	if (innerHTML) {
+		el.innerHTML = innerHTML;
+	}
+	if (textContent) {
+		const preElement = document.createElement("pre");
+		preElement.textContent = textContent;
+		el.appendChild(preElement);
+	}
+	return el;
+}

chat_gpt_microservice/client/js/highlightjs-copy.min.js

@@ -0,0 +1 @@
+class CopyButtonPlugin{constructor(options={}){self.hook=options.hook;self.callback=options.callback}"after:highlightElement"({el,text}){let button=Object.assign(document.createElement("button"),{innerHTML:"Copy",className:"hljs-copy-button"});button.dataset.copied=false;el.parentElement.classList.add("hljs-copy-wrapper");el.parentElement.appendChild(button);el.parentElement.style.setProperty("--hljs-theme-background",window.getComputedStyle(el).backgroundColor);button.onclick=function(){if(!navigator.clipboard)return;let newText=text;if(hook&&typeof hook==="function"){newText=hook(text,el)||text}navigator.clipboard.writeText(newText).then(function(){button.innerHTML="Copied!";button.dataset.copied=true;let alert=Object.assign(document.createElement("div"),{role:"status",className:"hljs-copy-alert",innerHTML:"Copied to clipboard"});el.parentElement.appendChild(alert);setTimeout(()=>{button.innerHTML="Copy";button.dataset.copied=false;el.parentElement.removeChild(alert);alert=null},2e3)}).then(function(){if(typeof callback==="function")return callback(newText,el)})}}}

chat_gpt_microservice/client/js/sidebar-toggler.js

@@ -0,0 +1,34 @@
+const sidebar = document.querySelector(".sidebar");
+const menuButton = document.querySelector(".menu-button");
+
+function toggleSidebar(event) {
+    if (sidebar.classList.contains("shown")) {
+        hideSidebar(event.target);
+    } else {
+        showSidebar(event.target);
+    }
+    window.scrollTo(0, 0);
+}
+
+function showSidebar(target) {
+    sidebar.classList.add("shown");
+    target.classList.add("rotated");
+    document.body.style.overflow = "hidden";
+}
+
+function hideSidebar(target) {
+    sidebar.classList.remove("shown");
+    target.classList.remove("rotated");
+    document.body.style.overflow = "auto";
+}
+
+menuButton.addEventListener("click", toggleSidebar);
+
+document.body.addEventListener('click', function(event) {
+    if (event.target.matches('.conversation-title')) {
+        const menuButtonStyle = window.getComputedStyle(menuButton);
+        if (menuButtonStyle.display !== 'none') {
+            hideSidebar(menuButton);
+        }
+    }
+});

chat_gpt_microservice/client/js/theme-toggler.js

@@ -0,0 +1,22 @@
+var switch_theme_toggler = document.getElementById("theme-toggler");
+
+switch_theme_toggler.addEventListener("change", toggleTheme);
+
+function setTheme(themeName) {
+	localStorage.setItem("theme", themeName);
+	document.documentElement.className = themeName;
+}
+
+function toggleTheme() {
+	var currentTheme = localStorage.getItem("theme");
+	var newTheme = currentTheme === "theme-dark" ? "theme-light" : "theme-dark";
+
+	setTheme(newTheme);
+	switch_theme_toggler.checked = newTheme === "theme-dark";
+}
+
+(function () {
+	var currentTheme = localStorage.getItem("theme") || "theme-dark";
+	setTheme(currentTheme);
+	switch_theme_toggler.checked = currentTheme === "theme-dark";
+})();