diff options
Diffstat (limited to 'g4f/gui/client/static')
| -rw-r--r-- | g4f/gui/client/static/css/style.css | 87 | ||||
| -rw-r--r-- | g4f/gui/client/static/js/chat.v1.js | 126 |
2 files changed, 205 insertions, 8 deletions
diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css index 441e2042..72f3ec4f 100644 --- a/g4f/gui/client/static/css/style.css +++ b/g4f/gui/client/static/css/style.css @@ -474,7 +474,6 @@ body { .stop_generating, .toolbar .regenerate { position: absolute; - z-index: 1000000; top: 0; right: 0; } @@ -1118,6 +1117,92 @@ a:-webkit-any-link { display: none; } +.album-image { + width: 100px; + height: auto; + margin: 5px; + display: inline-block; +} + +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + background-color: rgba(0,0,0,0.9); +} + +.modal-content { + margin: auto; + display: block; + max-width: 80%; + max-height: 80%; + transition: transform 0.2s; +} + +.close { + position: absolute; + top: 15px; + right: 35px; + color: #f1f1f1; + font-size: 40px; + font-weight: bold; + transition: 0.3s; +} + +.close:hover, +.close:focus { + color: #bbb; + text-decoration: none; + cursor: pointer; +} + + +.image-counter { + color: #fff; + font-size: 18px; + margin: auto 10px; + user-select: none; +} + +.nav-button { + background-color: #555; + color: #fff; + border: none; + padding: 10px; + font-size: 20px; + cursor: pointer; +} + +.nav-button:hover { + background-color: #777; +} + +.nav-button { + position: relative; +} + +.nav-button.left { + left: 0; +} + +.nav-button.right { + right: 0; +} + +.navigation-controls { + position: absolute; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 10px; +} + .blink { animation: blinker 1s step-start infinite; } diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js index d5a1ffaa..9bf07046 100644 --- a/g4f/gui/client/static/js/chat.v1.js +++ b/g4f/gui/client/static/js/chat.v1.js @@ -338,6 +338,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) { @@ -347,13 +355,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) { @@ -366,6 +367,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) @@ -934,17 +936,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") { |