feat(messages): add image album functionality

@@ -306,6 +306,14 @@ const prepare_messages = (messages, message_index = -1) => {

306 306 messages = messages.filter((_, index) => message_index >= index);

307 307 }

308 308

309 let new_messages = [];

310 if (systemPrompt?.value) {

311 new_messages.push({

312 "role": "system",

313 "content": systemPrompt.value

314 });

315 }

316

309 317 // Remove history, if it's selected

310 318 if (document.getElementById('history')?.checked) {

311 319 if (message_index == null) {

@@ -315,13 +323,6 @@ const prepare_messages = (messages, message_index = -1) => {

315 323 }

316 324 }

317 325

318 let new_messages = [];

319 if (systemPrompt?.value) {

320 new_messages.push({

321 "role": "system",

322 "content": systemPrompt.value

323 });

324 }

325 326 messages.forEach((new_message) => {

326 327 // Include only not regenerated messages

327 328 if (new_message && !new_message.regenerate) {

@@ -334,6 +335,7 @@ const prepare_messages = (messages, message_index = -1) => {

334 335 return new_messages;

335 336 }

336 337

338

337 339 async function add_message_chunk(message) {

338 340 if (message.type == "conversation") {

339 341 console.info("Conversation used:", message.conversation)

@@ -902,17 +904,127 @@ function open_settings() {

902 904 }

903 905 }

904 906

907 async function loadImages() {

908 try {

909 const response = await fetch('/images');

910 const images = await response.json();

911 console.log(images);

912 displayImages(images);

913 } catch (error) {

914 console.error('Error fetching images:', error);

915 }

916 }

917

918 function displayImages(images) {

919 const album = document.querySelector('.images');

920 album.innerHTML = '';

921 images.forEach(image => {

922 const imgElement = document.createElement('img');

923 imgElement.src = image;

924 imgElement.alt = 'Generated Image';

925 imgElement.classList.add('album-image');

926 album.appendChild(imgElement);

927 });

928 }

929

930 document.addEventListener('DOMContentLoaded', () => {

931 loadImages();

932 });

933

905 934 function open_album() {

935 const album = document.querySelector('.images');

906 936 if (album.classList.contains("hidden")) {

907 937 sidebar.classList.remove("shown");

908 938 settings.classList.add("hidden");

909 939 album.classList.remove("hidden");

910 940 history.pushState({}, null, "/images/");

941 loadImages();

911 942 } else {

912 943 album.classList.add("hidden");

913 944 }

914 945 }

915 946

947 let currentScale = 1;

948 let currentImageIndex = 0;

949 let imagesList = [];

950

951 function displayImages(images) {

952 imagesList = images;

953 const album = document.querySelector('.images');

954 album.innerHTML = '';

955 images.forEach((image, index) => {

956 const imgElement = document.createElement('img');

957 imgElement.src = image;

958 imgElement.alt = 'Generated Image';

959 imgElement.classList.add('album-image');

960 imgElement.style.cursor = 'pointer';

961 imgElement.addEventListener('click', () => openImageModal(index));

962 album.appendChild(imgElement);

963 });

964 }

965

966 function openImageModal(index) {

967 currentImageIndex = index;

968 const modal = document.getElementById('imageModal');

969 const modalImg = document.getElementById('img01');

970 const imageCounter = document.getElementById('imageCounter');

971 modal.style.display = 'block';

972 modalImg.src = imagesList[index];

973 currentScale = 1;

974 modalImg.style.transform = `scale(${currentScale})`;

975 imageCounter.textContent = `${index + 1} / ${imagesList.length}`;

976 }

977

978 const modal = document.getElementById('imageModal');

979 const span = document.getElementsByClassName('close')[0];

980 const prevImageButton = document.getElementById('prevImage');

981 const nextImageButton = document.getElementById('nextImage');

982

983 span.onclick = function() {

984 modal.style.display = 'none';

985 }

986

987 window.onclick = function(event) {

988 if (event.target == modal) {

989 modal.style.display = 'none';

990 }

991 }

992

993 document.getElementById('img01').addEventListener('wheel', function(event) {

994 event.preventDefault();

995 if (event.deltaY < 0) {

996 currentScale += 0.1;

997 } else if (currentScale > 0.1) {

998 currentScale -= 0.1;

999 }

1000 document.getElementById('img01').style.transform = `scale(${currentScale})`;

1001 });

1002

1003 prevImageButton.onclick = function() {

1004 if (currentImageIndex > 0) {

1005 currentImageIndex--;

1006 openImageModal(currentImageIndex);

1007 }

1008 }

1009

1010 nextImageButton.onclick = function() {

1011 if (currentImageIndex < imagesList.length - 1) {

1012 currentImageIndex++;

1013 openImageModal(currentImageIndex);

1014 }

1015 }

1016

1017 document.addEventListener('keydown', function(event) {

1018 if (modal.style.display === 'block') {

1019 if (event.key === 'ArrowLeft') {

1020 prevImageButton.click();

1021 } else if (event.key === 'ArrowRight') {

1022 nextImageButton.click();

1023 }

1024 }

1025 });

1026

1027

916 1028 const register_settings_storage = async () => {

917 1029 optionElements.forEach((element) => {

918 1030 if (element.type == "textarea") {

@@ -1424,4 +1536,4 @@ if (SpeechRecognition) {

1424 1536 recognition.start();

1425 1537 }

1426 1538 });

1427 }

1539 }

gpt4free

feat(messages): add image album functionality

代码差异