ChatGPT

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/index.html | 437 ++++++++++++++++++------------------ g4f/gui/client/static/css/style.css | 87 +------ g4f/gui/client/static/js/chat.v1.js | 110 --------- 3 files changed, 216 insertions(+), 418 deletions(-) (limited to 'g4f/gui/client') diff --git a/g4f/gui/client/index.html b/g4f/gui/client/index.html index f8c11ea2..7e8ef09c 100644 --- a/g4f/gui/client/index.html +++ b/g4f/gui/client/index.html @@ -1,222 +1,227 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - g4f - gui - - -

- + + + - diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css index 72f3ec4f..441e2042 100644 --- a/g4f/gui/client/static/css/style.css +++ b/g4f/gui/client/static/css/style.css @@ -474,6 +474,7 @@ body { .stop_generating, .toolbar .regenerate { position: absolute; + z-index: 1000000; top: 0; right: 0; } @@ -1117,92 +1118,6 @@ 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 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

Settings

Settings