From 0f7d3ac0be16c672acaabf8da2dc459cbe81986a Mon Sep 17 00:00:00 2001 From: kqlio67 Date: Fri, 25 Oct 2024 20:15:10 +0300 Subject: feat(messages): add image album functionality --- g4f/gui/client/static/js/chat.v1.js | 128 +++++++++++++++++++++++++++++++++--- 1 file changed, 120 insertions(+), 8 deletions(-) (limited to 'g4f/gui/client/static/js/chat.v1.js') diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js index 9790b261..10b5c1f0 100644 --- a/g4f/gui/client/static/js/chat.v1.js +++ b/g4f/gui/client/static/js/chat.v1.js @@ -306,6 +306,14 @@ const prepare_messages = (messages, message_index = -1) => { messages = messages.filter((_, index) => message_index >= index); } + let new_messages = []; + if (systemPrompt?.value) { + new_messages.push({ + "role": "system", + "content": systemPrompt.value + }); + } + // Remove history, if it's selected if (document.getElementById('history')?.checked) { if (message_index == null) { @@ -315,13 +323,6 @@ const prepare_messages = (messages, message_index = -1) => { } } - let new_messages = []; - if (systemPrompt?.value) { - new_messages.push({ - "role": "system", - "content": systemPrompt.value - }); - } messages.forEach((new_message) => { // Include only not regenerated messages if (new_message && !new_message.regenerate) { @@ -334,6 +335,7 @@ const prepare_messages = (messages, message_index = -1) => { return new_messages; } + async function add_message_chunk(message) { if (message.type == "conversation") { console.info("Conversation used:", message.conversation) @@ -902,17 +904,127 @@ function open_settings() { } } +async function loadImages() { + try { + const response = await fetch('/images'); + const images = await response.json(); + console.log(images); + displayImages(images); + } catch (error) { + console.error('Error fetching images:', error); + } +} + +function displayImages(images) { + const album = document.querySelector('.images'); + album.innerHTML = ''; + images.forEach(image => { + const imgElement = document.createElement('img'); + imgElement.src = image; + imgElement.alt = 'Generated Image'; + imgElement.classList.add('album-image'); + album.appendChild(imgElement); + }); +} + +document.addEventListener('DOMContentLoaded', () => { + loadImages(); +}); + function open_album() { + const album = document.querySelector('.images'); if (album.classList.contains("hidden")) { sidebar.classList.remove("shown"); settings.classList.add("hidden"); album.classList.remove("hidden"); history.pushState({}, null, "/images/"); + loadImages(); } else { album.classList.add("hidden"); } } +let currentScale = 1; +let currentImageIndex = 0; +let imagesList = []; + +function displayImages(images) { + imagesList = images; + const album = document.querySelector('.images'); + album.innerHTML = ''; + images.forEach((image, index) => { + const imgElement = document.createElement('img'); + imgElement.src = image; + imgElement.alt = 'Generated Image'; + imgElement.classList.add('album-image'); + imgElement.style.cursor = 'pointer'; + imgElement.addEventListener('click', () => openImageModal(index)); + album.appendChild(imgElement); + }); +} + +function openImageModal(index) { + currentImageIndex = index; + const modal = document.getElementById('imageModal'); + const modalImg = document.getElementById('img01'); + const imageCounter = document.getElementById('imageCounter'); + modal.style.display = 'block'; + modalImg.src = imagesList[index]; + currentScale = 1; + modalImg.style.transform = `scale(${currentScale})`; + imageCounter.textContent = `${index + 1} / ${imagesList.length}`; +} + +const modal = document.getElementById('imageModal'); +const span = document.getElementsByClassName('close')[0]; +const prevImageButton = document.getElementById('prevImage'); +const nextImageButton = document.getElementById('nextImage'); + +span.onclick = function() { + modal.style.display = 'none'; +} + +window.onclick = function(event) { + if (event.target == modal) { + modal.style.display = 'none'; + } +} + +document.getElementById('img01').addEventListener('wheel', function(event) { + event.preventDefault(); + if (event.deltaY < 0) { + currentScale += 0.1; + } else if (currentScale > 0.1) { + currentScale -= 0.1; + } + document.getElementById('img01').style.transform = `scale(${currentScale})`; +}); + +prevImageButton.onclick = function() { + if (currentImageIndex > 0) { + currentImageIndex--; + openImageModal(currentImageIndex); + } +} + +nextImageButton.onclick = function() { + if (currentImageIndex < imagesList.length - 1) { + currentImageIndex++; + openImageModal(currentImageIndex); + } +} + +document.addEventListener('keydown', function(event) { + if (modal.style.display === 'block') { + if (event.key === 'ArrowLeft') { + prevImageButton.click(); + } else if (event.key === 'ArrowRight') { + nextImageButton.click(); + } + } +}); + + const register_settings_storage = async () => { optionElements.forEach((element) => { if (element.type == "textarea") { @@ -1424,4 +1536,4 @@ if (SpeechRecognition) { recognition.start(); } }); -} \ No newline at end of file +} -- cgit v1.2.3 From d7d1db835ed6670d51823e32c855151813e12fce Mon Sep 17 00:00:00 2001 From: kqlio67 Date: Tue, 29 Oct 2024 09:48:04 +0200 Subject: Update (g4f/gui/*) --- g4f/gui/client/static/js/chat.v1.js | 110 ------------------------------------ 1 file changed, 110 deletions(-) (limited to 'g4f/gui/client/static/js/chat.v1.js') diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js index 9bf07046..42ddb129 100644 --- a/g4f/gui/client/static/js/chat.v1.js +++ b/g4f/gui/client/static/js/chat.v1.js @@ -936,127 +936,17 @@ function open_settings() { } } -async function loadImages() { - try { - const response = await fetch('/images'); - const images = await response.json(); - console.log(images); - displayImages(images); - } catch (error) { - console.error('Error fetching images:', error); - } -} - -function displayImages(images) { - const album = document.querySelector('.images'); - album.innerHTML = ''; - images.forEach(image => { - const imgElement = document.createElement('img'); - imgElement.src = image; - imgElement.alt = 'Generated Image'; - imgElement.classList.add('album-image'); - album.appendChild(imgElement); - }); -} - -document.addEventListener('DOMContentLoaded', () => { - loadImages(); -}); - function open_album() { - const album = document.querySelector('.images'); if (album.classList.contains("hidden")) { sidebar.classList.remove("shown"); settings.classList.add("hidden"); album.classList.remove("hidden"); history.pushState({}, null, "/images/"); - loadImages(); } else { album.classList.add("hidden"); } } -let currentScale = 1; -let currentImageIndex = 0; -let imagesList = []; - -function displayImages(images) { - imagesList = images; - const album = document.querySelector('.images'); - album.innerHTML = ''; - images.forEach((image, index) => { - const imgElement = document.createElement('img'); - imgElement.src = image; - imgElement.alt = 'Generated Image'; - imgElement.classList.add('album-image'); - imgElement.style.cursor = 'pointer'; - imgElement.addEventListener('click', () => openImageModal(index)); - album.appendChild(imgElement); - }); -} - -function openImageModal(index) { - currentImageIndex = index; - const modal = document.getElementById('imageModal'); - const modalImg = document.getElementById('img01'); - const imageCounter = document.getElementById('imageCounter'); - modal.style.display = 'block'; - modalImg.src = imagesList[index]; - currentScale = 1; - modalImg.style.transform = `scale(${currentScale})`; - imageCounter.textContent = `${index + 1} / ${imagesList.length}`; -} - -const modal = document.getElementById('imageModal'); -const span = document.getElementsByClassName('close')[0]; -const prevImageButton = document.getElementById('prevImage'); -const nextImageButton = document.getElementById('nextImage'); - -span.onclick = function() { - modal.style.display = 'none'; -} - -window.onclick = function(event) { - if (event.target == modal) { - modal.style.display = 'none'; - } -} - -document.getElementById('img01').addEventListener('wheel', function(event) { - event.preventDefault(); - if (event.deltaY < 0) { - currentScale += 0.1; - } else if (currentScale > 0.1) { - currentScale -= 0.1; - } - document.getElementById('img01').style.transform = `scale(${currentScale})`; -}); - -prevImageButton.onclick = function() { - if (currentImageIndex > 0) { - currentImageIndex--; - openImageModal(currentImageIndex); - } -} - -nextImageButton.onclick = function() { - if (currentImageIndex < imagesList.length - 1) { - currentImageIndex++; - openImageModal(currentImageIndex); - } -} - -document.addEventListener('keydown', function(event) { - if (modal.style.display === 'block') { - if (event.key === 'ArrowLeft') { - prevImageButton.click(); - } else if (event.key === 'ArrowRight') { - nextImageButton.click(); - } - } -}); - - const register_settings_storage = async () => { optionElements.forEach((element) => { if (element.type == "textarea") { -- cgit v1.2.3