From 8bf44af1e779cee38faf3b9e561a6dbe6b4569dd Mon Sep 17 00:00:00 2001 From: metal079 Date: Mon, 4 Mar 2024 22:52:41 -0600 Subject: [PATCH 1/8] fixed case issue with fastpasses --- src/app/home/options/options.component.html | 3 ++- src/app/home/options/options.component.ts | 12 ++++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/app/home/options/options.component.html b/src/app/home/options/options.component.html index 316c792..34803cf 100644 --- a/src/app/home/options/options.component.html +++ b/src/app/home/options/options.component.html @@ -180,7 +180,8 @@ + [(ngModel)]="generationRequest.fast_pass_code" + (input)="onFastPassCodeChange($event)" /> diff --git a/src/app/home/options/options.component.ts b/src/app/home/options/options.component.ts index 908948f..aab5847 100644 --- a/src/app/home/options/options.component.ts +++ b/src/app/home/options/options.component.ts @@ -219,11 +219,15 @@ export class OptionsComponent { // Save aspect ratio localStorage.setItem("aspect-ratio", this.aspectRatio.aspectRatio); - if (this.generationRequest.fast_pass_code == undefined || this.generationRequest.fast_pass_code == "") { + + // Save fast pass code + if (this.generationRequest.fast_pass_code == undefined || this.generationRequest.fast_pass_code.trim() == "") { this.generationRequest.fast_pass_code = undefined; localStorage.removeItem("fast-pass-code"); } - else if (this.generationRequest.fast_pass_code != undefined && this.generationRequest.fast_pass_code != "") { + else if (this.generationRequest.fast_pass_code != undefined && this.generationRequest.fast_pass_code.trim() != "") { + // Convert fast_pass_code to lowercase and remove whitespace + this.generationRequest.fast_pass_code = this.generationRequest.fast_pass_code.toLowerCase().replace(/\s/g, ''); localStorage.setItem("fast-pass-code", this.generationRequest.fast_pass_code); } @@ -472,4 +476,8 @@ export class OptionsComponent { onDiscordLoginSuccess(userData: any) { localStorage.setItem('discordUserData', JSON.stringify(userData)); } + + onFastPassCodeChange(event: any) { + this.generationRequest.fast_pass_code = event.target.value.toLowerCase().replace(/\s/g, ''); + } } From d69827f4911c0ca70785bb11c1ac1ed182a32a50 Mon Sep 17 00:00:00 2001 From: metal079 Date: Mon, 4 Mar 2024 22:55:13 -0600 Subject: [PATCH 2/8] lets try every 1 second because why not --- src/app/home/options/options.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/home/options/options.component.ts b/src/app/home/options/options.component.ts index aab5847..873cf66 100644 --- a/src/app/home/options/options.component.ts +++ b/src/app/home/options/options.component.ts @@ -349,9 +349,9 @@ export class OptionsComponent { "API_IP": API_URL } - // Create an interval which fires every 3 seconds + // Create an interval which fires every 1 second let subscription: Subscription; // Declare a variable to hold the subscription - subscription = interval(3000) + subscription = interval(1000) .pipe( // For each tick of the interval, call the service concatMap(() => this.stableDiffusionService.getJob(getJobInfo).pipe( From acb2812c4a1bd0195c21d43a255b0bd498e32deb Mon Sep 17 00:00:00 2001 From: metal079 Date: Tue, 12 Mar 2024 07:04:21 -0500 Subject: [PATCH 3/8] image history wip --- src/_shared/mobians-image.interface.ts | 3 + src/app/home/options/options.component.css | 35 ++++ src/app/home/options/options.component.html | 46 +++++- src/app/home/options/options.component.ts | 172 ++++++++++++++++++-- 4 files changed, 235 insertions(+), 21 deletions(-) diff --git a/src/_shared/mobians-image.interface.ts b/src/_shared/mobians-image.interface.ts index 577963d..673139b 100644 --- a/src/_shared/mobians-image.interface.ts +++ b/src/_shared/mobians-image.interface.ts @@ -6,5 +6,8 @@ export interface MobiansImage { base64: string; UUID: string; rating?: boolean; + timestamp?: Date; + promptSummary?: string; + thumbnailUrl?: string; // Add this line } \ No newline at end of file diff --git a/src/app/home/options/options.component.css b/src/app/home/options/options.component.css index bbf461d..135163a 100644 --- a/src/app/home/options/options.component.css +++ b/src/app/home/options/options.component.css @@ -31,6 +31,41 @@ margin-left: 10px; } +.history-panel { + margin-top: 20px; + margin-left: 10px; +} + +.history-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + grid-gap: 10px; + margin-top: 10px; +} + +.history-item { + cursor: pointer; +} + +.history-item img { + width: 100%; + height: auto; + border-radius: 4px; +} + +.history-details { + display: flex; + flex-direction: column; + margin-top: 5px; + font-size: 12px; +} + +.no-images-message { + text-align: center; + padding: 20px; + color: #888; +} + @media (max-width: 480px) { .input-button-container { display: flex; diff --git a/src/app/home/options/options.component.html b/src/app/home/options/options.component.html index 34803cf..983759d 100644 --- a/src/app/home/options/options.component.html +++ b/src/app/home/options/options.component.html @@ -62,13 +62,47 @@ [(ngModel)]="generationRequest.strength" /> + +
+ + + +
+
+ +
+
+ Generated Image +
+ {{ image.timestamp | date:'short' }} + {{ image.promptSummary }} +
+
+
+ +
+ No generated images available. +
+ +
+
+ + +
@@ -200,10 +233,5 @@ - - + \ No newline at end of file diff --git a/src/app/home/options/options.component.ts b/src/app/home/options/options.component.ts index 873cf66..3e71811 100644 --- a/src/app/home/options/options.component.ts +++ b/src/app/home/options/options.component.ts @@ -22,6 +22,8 @@ import { SwPush } from '@angular/service-worker'; export class OptionsComponent { private subscription!: Subscription; private referenceImageSubscription!: Subscription; + private dbName = 'ImageDatabase'; + private storeName = 'ImageStore'; models = ["sonicDiffusionV4", "fluffySonic"] enableGenerationButton: boolean = true; @@ -58,6 +60,12 @@ export class OptionsComponent { currentSeed?: number; supporter: boolean = false; serverMember: boolean = false; + userGeneratedImages: MobiansImage[] = []; + + paginatedImages: MobiansImage[] = []; + currentPage = 1; + imagesPerPage = 6; // Display 8 images per page (2 rows of 4 images each) + totalPages = 1; @Input() inpaintMask?: string; @@ -78,6 +86,27 @@ export class OptionsComponent { , private swPush: SwPush ) { } + private openDatabase(): Promise { + return new Promise((resolve, reject) => { + const request = indexedDB.open(this.dbName, 2); + + request.onerror = (event) => { + reject(new Error('Failed to open database')); + }; + + request.onsuccess = (event) => { + const db = request.result; + resolve(db); + }; + + request.onupgradeneeded = (event) => { + const db = request.result; + db.deleteObjectStore(this.storeName); // Delete the existing object store + db.createObjectStore(this.storeName, { keyPath: 'UUID' }); // Recreate the object store with the correct key path + }; + }); + } + ngOnInit() { this.subscription = this.sharedService.getPrompt().subscribe(value => { this.generationRequest.prompt = value; @@ -236,7 +265,7 @@ export class OptionsComponent { } // Load session storage info of changed settings - loadSettings() { + async loadSettings() { if (localStorage.getItem("prompt-input") != null) { this.generationRequest.prompt = localStorage.getItem("prompt-input")!; } @@ -261,6 +290,44 @@ export class OptionsComponent { if (localStorage.getItem("model") != null) { this.generationRequest.model = localStorage.getItem("model")!; } + + try { + const db = await this.openDatabase(); + const transaction = db.transaction(this.storeName, 'readonly'); + const store = transaction.objectStore(this.storeName); + + const request = store.getAll(); + + request.onsuccess = (event) => { + this.userGeneratedImages = request.result; + + // Sort the userGeneratedImages array based on the timestamp in descending order + this.userGeneratedImages.sort((a, b) => { + const timestampA = a.timestamp ? a.timestamp.getTime() : 0; + const timestampB = b.timestamp ? b.timestamp.getTime() : 0; + return timestampB - timestampA; + }); + + // Calculate the total number of pages + this.totalPages = Math.ceil(this.userGeneratedImages.length / this.imagesPerPage); + + // Display the first page of images + this.paginateImages(); + }; + + request.onerror = (event) => { + console.error('Failed to retrieve images from IndexedDB', event); + }; + + // Wait for the transaction to complete before proceeding + await new Promise((resolve) => { + transaction.oncomplete = () => { + resolve(undefined); + }; + }); + } catch (error) { + console.error('Failed to open database', error); + } } // Reset session storage info of changed settings and reset view @@ -376,30 +443,70 @@ export class OptionsComponent { // Only continue the stream while the job is incomplete takeWhile(response => !(jobComplete = (response.status === 'completed')), true), // Once the stream completes, do any cleanup if necessary - finalize(() => { + finalize(async () => { if (this.enableNotifications) { this.notificationService.playDing(); this.notificationService.sendPushNotification(); } if (jobComplete && lastResponse) { console.log(lastResponse); - this.images = lastResponse.result.map((base64String: string) => { + const generatedImages = lastResponse.result.map((base64String: string) => { return { base64: base64String, - // Fill in other properties as needed - width: this.generationRequest.width, // Example value, update as needed - height: this.generationRequest.height, // Example value, update as needed - aspectRatio: this.aspectRatio.aspectRatio, // Example value, update as needed - UUID: uuidv4(), // Example value, update as needed - rated: false, // Example value, update as needed + width: this.generationRequest.width, + height: this.generationRequest.height, + aspectRatio: this.aspectRatio.aspectRatio, + UUID: uuidv4(), + rated: false, + timestamp: new Date(), + promptSummary: this.generationRequest.prompt.slice(0, 50) + '...', // Truncate prompt summary + thumbnailUrl: 'data:image/png;base64,' + base64String // Generate thumbnail URL }; }); + this.images = generatedImages; this.sharedService.setImages(this.images); + + // Add the generated images to userGeneratedImages array + this.userGeneratedImages.push(...generatedImages); + + // Sort the userGeneratedImages array based on the timestamp in descending order + this.userGeneratedImages.sort((a, b) => { + const timestampA = a.timestamp ? a.timestamp.getTime() : 0; + const timestampB = b.timestamp ? b.timestamp.getTime() : 0; + return timestampB - timestampA; + }); + + // Calculate the total number of pages + this.totalPages = Math.ceil(this.userGeneratedImages.length / this.imagesPerPage); + + // Display the current page of images + this.paginateImages(); + + try { + const db = await this.openDatabase(); + const transaction = db.transaction(this.storeName, 'readwrite'); + const store = transaction.objectStore(this.storeName); + + for (const image of generatedImages) { + console.log(image); + store.put(image); + } + + transaction.oncomplete = () => { + console.log('Images stored in IndexedDB'); + }; + + transaction.onerror = (event) => { + console.error('Failed to store images in IndexedDB', event); + }; + } catch (error) { + console.error('Failed to open database', error); + } + this.loadingChange.emit(false); this.enableGenerationButton = true; } }) - ) .subscribe( response => { @@ -416,8 +523,8 @@ export class OptionsComponent { } else { // This will be called every 3 seconds, so we do nothing here - console.log("queue position: " + response.queue_position); - this.queuePositionChange.emit(response.queue_position); + console.log("queue position: " + response.queue_position ?? 0); + this.queuePositionChange.emit(response.queue_position ?? 0); } }, error => { @@ -472,6 +579,47 @@ export class OptionsComponent { this.imageModalOpen.emit(true); } + openImageDetails(image: MobiansImage) { + // Implement the logic to open the image details modal or view + console.log('Opening image details for:', image); + + // + } + + toggleOptions() { + const historyCollapse = document.getElementById('historyCollapse'); + if (historyCollapse) { + historyCollapse.classList.remove('show'); + } + } + + toggleHistory() { + const optionsCollapse = document.getElementById('collapseExample'); + if (optionsCollapse) { + optionsCollapse.classList.remove('show'); + } + } + + paginateImages() { + const startIndex = (this.currentPage - 1) * this.imagesPerPage; + const endIndex = startIndex + this.imagesPerPage; + this.paginatedImages = this.userGeneratedImages.slice(startIndex, endIndex); + } + + previousPage() { + if (this.currentPage > 1) { + this.currentPage--; + this.paginateImages(); + } + } + + nextPage() { + if (this.currentPage < this.totalPages) { + this.currentPage++; + this.paginateImages(); + } + } + // Example function called after successful Discord login onDiscordLoginSuccess(userData: any) { localStorage.setItem('discordUserData', JSON.stringify(userData)); From 6f0311fb8b11ca6650e5f7f000ba99f9e8aa564f Mon Sep 17 00:00:00 2001 From: metal079 Date: Tue, 12 Mar 2024 13:12:12 -0500 Subject: [PATCH 4/8] Basic image history --- src/_shared/mobians-image.interface.ts | 3 + .../home/image-grid/image-grid.component.html | 2 +- .../home/image-grid/image-grid.component.ts | 1 + src/app/home/options/options.component.css | 45 +++++ src/app/home/options/options.component.html | 46 ++++- src/app/home/options/options.component.ts | 175 ++++++++++++++++-- 6 files changed, 250 insertions(+), 22 deletions(-) diff --git a/src/_shared/mobians-image.interface.ts b/src/_shared/mobians-image.interface.ts index 577963d..673139b 100644 --- a/src/_shared/mobians-image.interface.ts +++ b/src/_shared/mobians-image.interface.ts @@ -6,5 +6,8 @@ export interface MobiansImage { base64: string; UUID: string; rating?: boolean; + timestamp?: Date; + promptSummary?: string; + thumbnailUrl?: string; // Add this line } \ No newline at end of file diff --git a/src/app/home/image-grid/image-grid.component.html b/src/app/home/image-grid/image-grid.component.html index e5de2c1..0178a23 100644 --- a/src/app/home/image-grid/image-grid.component.html +++ b/src/app/home/image-grid/image-grid.component.html @@ -32,7 +32,7 @@ Image4 goes here
- Reference Image goes here + Reference Image goes here
diff --git a/src/app/home/image-grid/image-grid.component.ts b/src/app/home/image-grid/image-grid.component.ts index e589a2c..dfa9382 100644 --- a/src/app/home/image-grid/image-grid.component.ts +++ b/src/app/home/image-grid/image-grid.component.ts @@ -94,6 +94,7 @@ export class ImageGridComponent { if (image) { console.log('Reference Image changed:', image); this.showReferenceImage = true; + this.showInstructions = false; } else{ console.log('Reference Image removed'); diff --git a/src/app/home/options/options.component.css b/src/app/home/options/options.component.css index bbf461d..2ea8701 100644 --- a/src/app/home/options/options.component.css +++ b/src/app/home/options/options.component.css @@ -31,6 +31,51 @@ margin-left: 10px; } +.history-panel { + margin-top: 20px; + margin-left: 10px; +} + +.history-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + grid-gap: 10px; + margin-top: 10px; +} + +.history-item { + cursor: pointer; +} + +.history-item img { + width: 100%; + height: auto; + border-radius: 4px; +} + +.history-details { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 5px; +} + +.summary-text { + max-height: 40px; /* Adjust the height as needed */ + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 1; /* Adjust the number of lines to show */ + -webkit-box-orient: vertical; + text-align: center; +} + +.no-images-message { + text-align: center; + padding: 20px; + color: #888; +} + @media (max-width: 480px) { .input-button-container { display: flex; diff --git a/src/app/home/options/options.component.html b/src/app/home/options/options.component.html index 34803cf..cb19e32 100644 --- a/src/app/home/options/options.component.html +++ b/src/app/home/options/options.component.html @@ -62,13 +62,47 @@ [(ngModel)]="generationRequest.strength" /> + +
+ + + +
+
+ +
+
+ Generated Image +
+ {{ image.timestamp | date:'short' }} + {{ image.promptSummary }} +
+
+
+ +
+ No generated images available. +
+ +
+
+ + +
@@ -200,10 +233,5 @@ - - + \ No newline at end of file diff --git a/src/app/home/options/options.component.ts b/src/app/home/options/options.component.ts index 873cf66..1401d7f 100644 --- a/src/app/home/options/options.component.ts +++ b/src/app/home/options/options.component.ts @@ -22,6 +22,8 @@ import { SwPush } from '@angular/service-worker'; export class OptionsComponent { private subscription!: Subscription; private referenceImageSubscription!: Subscription; + private dbName = 'ImageDatabase'; + private storeName = 'ImageStore'; models = ["sonicDiffusionV4", "fluffySonic"] enableGenerationButton: boolean = true; @@ -58,6 +60,12 @@ export class OptionsComponent { currentSeed?: number; supporter: boolean = false; serverMember: boolean = false; + userGeneratedImages: MobiansImage[] = []; + + paginatedImages: MobiansImage[] = []; + currentPage = 1; + imagesPerPage = 6; // Display 8 images per page (2 rows of 4 images each) + totalPages = 1; @Input() inpaintMask?: string; @@ -78,6 +86,27 @@ export class OptionsComponent { , private swPush: SwPush ) { } + private openDatabase(): Promise { + return new Promise((resolve, reject) => { + const request = indexedDB.open(this.dbName, 2); + + request.onerror = (event) => { + reject(new Error('Failed to open database')); + }; + + request.onsuccess = (event) => { + const db = request.result; + resolve(db); + }; + + request.onupgradeneeded = (event) => { + const db = request.result; + db.deleteObjectStore(this.storeName); // Delete the existing object store + db.createObjectStore(this.storeName, { keyPath: 'UUID' }); // Recreate the object store with the correct key path + }; + }); + } + ngOnInit() { this.subscription = this.sharedService.getPrompt().subscribe(value => { this.generationRequest.prompt = value; @@ -236,7 +265,7 @@ export class OptionsComponent { } // Load session storage info of changed settings - loadSettings() { + async loadSettings() { if (localStorage.getItem("prompt-input") != null) { this.generationRequest.prompt = localStorage.getItem("prompt-input")!; } @@ -261,6 +290,44 @@ export class OptionsComponent { if (localStorage.getItem("model") != null) { this.generationRequest.model = localStorage.getItem("model")!; } + + try { + const db = await this.openDatabase(); + const transaction = db.transaction(this.storeName, 'readonly'); + const store = transaction.objectStore(this.storeName); + + const request = store.getAll(); + + request.onsuccess = (event) => { + this.userGeneratedImages = request.result; + + // Sort the userGeneratedImages array based on the timestamp in descending order + this.userGeneratedImages.sort((a, b) => { + const timestampA = a.timestamp ? a.timestamp.getTime() : 0; + const timestampB = b.timestamp ? b.timestamp.getTime() : 0; + return timestampB - timestampA; + }); + + // Calculate the total number of pages + this.totalPages = Math.ceil(this.userGeneratedImages.length / this.imagesPerPage); + + // Display the first page of images + this.paginateImages(); + }; + + request.onerror = (event) => { + console.error('Failed to retrieve images from IndexedDB', event); + }; + + // Wait for the transaction to complete before proceeding + await new Promise((resolve) => { + transaction.oncomplete = () => { + resolve(undefined); + }; + }); + } catch (error) { + console.error('Failed to open database', error); + } } // Reset session storage info of changed settings and reset view @@ -376,30 +443,70 @@ export class OptionsComponent { // Only continue the stream while the job is incomplete takeWhile(response => !(jobComplete = (response.status === 'completed')), true), // Once the stream completes, do any cleanup if necessary - finalize(() => { + finalize(async () => { if (this.enableNotifications) { this.notificationService.playDing(); this.notificationService.sendPushNotification(); } if (jobComplete && lastResponse) { console.log(lastResponse); - this.images = lastResponse.result.map((base64String: string) => { + const generatedImages = lastResponse.result.map((base64String: string) => { return { base64: base64String, - // Fill in other properties as needed - width: this.generationRequest.width, // Example value, update as needed - height: this.generationRequest.height, // Example value, update as needed - aspectRatio: this.aspectRatio.aspectRatio, // Example value, update as needed - UUID: uuidv4(), // Example value, update as needed - rated: false, // Example value, update as needed + width: this.generationRequest.width, + height: this.generationRequest.height, + aspectRatio: this.aspectRatio.aspectRatio, + UUID: uuidv4(), + rated: false, + timestamp: new Date(), + promptSummary: this.generationRequest.prompt.slice(0, 50) + '...', // Truncate prompt summary + url: 'data:image/png;base64,' + base64String // Generate URL }; }); + this.images = generatedImages; this.sharedService.setImages(this.images); + + // Add the generated images to userGeneratedImages array + this.userGeneratedImages.push(...generatedImages); + + // Sort the userGeneratedImages array based on the timestamp in descending order + this.userGeneratedImages.sort((a, b) => { + const timestampA = a.timestamp ? a.timestamp.getTime() : 0; + const timestampB = b.timestamp ? b.timestamp.getTime() : 0; + return timestampB - timestampA; + }); + + // Calculate the total number of pages + this.totalPages = Math.ceil(this.userGeneratedImages.length / this.imagesPerPage); + + // Display the current page of images + this.paginateImages(); + + try { + const db = await this.openDatabase(); + const transaction = db.transaction(this.storeName, 'readwrite'); + const store = transaction.objectStore(this.storeName); + + for (const image of generatedImages) { + console.log(image); + store.put(image); + } + + transaction.oncomplete = () => { + console.log('Images stored in IndexedDB'); + }; + + transaction.onerror = (event) => { + console.error('Failed to store images in IndexedDB', event); + }; + } catch (error) { + console.error('Failed to open database', error); + } + this.loadingChange.emit(false); this.enableGenerationButton = true; } }) - ) .subscribe( response => { @@ -416,8 +523,8 @@ export class OptionsComponent { } else { // This will be called every 3 seconds, so we do nothing here - console.log("queue position: " + response.queue_position); - this.queuePositionChange.emit(response.queue_position); + console.log("queue position: " + response.queue_position ?? 0); + this.queuePositionChange.emit(response.queue_position ?? 0); } }, error => { @@ -472,6 +579,50 @@ export class OptionsComponent { this.imageModalOpen.emit(true); } + openImageDetails(image: MobiansImage) { + // Implement the logic to open the image details modal or view + console.log('Opening image details for:', image); + + // Set the reference image to the selected image + this.referenceImage = image; + this.generationRequest.image = image.base64; + this.sharedService.setReferenceImage(image); + } + + toggleOptions() { + const historyCollapse = document.getElementById('historyCollapse'); + if (historyCollapse) { + historyCollapse.classList.remove('show'); + } + } + + toggleHistory() { + const optionsCollapse = document.getElementById('collapseExample'); + if (optionsCollapse) { + optionsCollapse.classList.remove('show'); + } + } + + paginateImages() { + const startIndex = (this.currentPage - 1) * this.imagesPerPage; + const endIndex = startIndex + this.imagesPerPage; + this.paginatedImages = this.userGeneratedImages.slice(startIndex, endIndex); + } + + previousPage() { + if (this.currentPage > 1) { + this.currentPage--; + this.paginateImages(); + } + } + + nextPage() { + if (this.currentPage < this.totalPages) { + this.currentPage++; + this.paginateImages(); + } + } + // Example function called after successful Discord login onDiscordLoginSuccess(userData: any) { localStorage.setItem('discordUserData', JSON.stringify(userData)); From a337102188edab5818e313e2a08b9a45c202c5c6 Mon Sep 17 00:00:00 2001 From: metal079 Date: Tue, 12 Mar 2024 14:21:56 -0500 Subject: [PATCH 5/8] adjusted budget --- angular.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/angular.json b/angular.json index a38c206..0365a7b 100644 --- a/angular.json +++ b/angular.json @@ -47,8 +47,8 @@ "budgets": [ { "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" + "maximumWarning": "1mb", + "maximumError": "3mb" }, { "type": "anyComponentStyle", From 38d6965585d79d8f62622c50c78d85c3eb7629e2 Mon Sep 17 00:00:00 2001 From: metal079 Date: Tue, 12 Mar 2024 14:53:01 -0500 Subject: [PATCH 6/8] slightly better formatting in image history --- src/app/home/options/options.component.css | 33 +++++++++++++++++++-- src/app/home/options/options.component.html | 17 ++++++----- 2 files changed, 40 insertions(+), 10 deletions(-) diff --git a/src/app/home/options/options.component.css b/src/app/home/options/options.component.css index 2ea8701..1fa9363 100644 --- a/src/app/home/options/options.component.css +++ b/src/app/home/options/options.component.css @@ -60,12 +60,33 @@ margin-top: 5px; } +.sorting-options { + display: flex; + flex-wrap: nowrap; + align-items: center; + gap: 10px; + padding-right: 10px; +} + +.sort-dropdown { + display: flex; + align-items: center; + gap: 5px; + flex-shrink: 0; +} + +.search-bar { + flex: 1; + min-width: 0; + max-width: 200px; +} + .summary-text { - max-height: 40px; /* Adjust the height as needed */ + max-height: 40px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; - -webkit-line-clamp: 1; /* Adjust the number of lines to show */ + -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-align: center; } @@ -114,4 +135,12 @@ #advanced-options { width: 97vw; } + + .sorting-options { + padding-right: 0; + } + + .search-bar { + max-width: 100%; + } } \ No newline at end of file diff --git a/src/app/home/options/options.component.html b/src/app/home/options/options.component.html index 578528f..a799f31 100644 --- a/src/app/home/options/options.component.html +++ b/src/app/home/options/options.component.html @@ -86,17 +86,18 @@
- - - +
+ + +
+
- + - +
From e362af95a099bc2cac9d701a68d8ef0f6413022e Mon Sep 17 00:00:00 2001 From: metal079 Date: Tue, 12 Mar 2024 15:03:38 -0500 Subject: [PATCH 7/8] fixed seach bar in image history --- src/app/home/options/options.component.css | 8 ++------ src/app/home/options/options.component.html | 9 ++++----- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/app/home/options/options.component.css b/src/app/home/options/options.component.css index 1fa9363..81006c4 100644 --- a/src/app/home/options/options.component.css +++ b/src/app/home/options/options.component.css @@ -136,11 +136,7 @@ width: 97vw; } - .sorting-options { - padding-right: 0; - } - - .search-bar { - max-width: 100%; + .p-inputtext{ + padding-right: 0px; } } \ No newline at end of file diff --git a/src/app/home/options/options.component.html b/src/app/home/options/options.component.html index a799f31..ccada39 100644 --- a/src/app/home/options/options.component.html +++ b/src/app/home/options/options.component.html @@ -87,16 +87,15 @@
- +
- - - - +
From fd1176bb2671e814926610c37f2b95086d4111f0 Mon Sep 17 00:00:00 2001 From: metal079 Date: Tue, 12 Mar 2024 21:01:52 -0500 Subject: [PATCH 8/8] fixed db creation? --- src/app/home/options/options.component.ts | 36 ++++++++++++++++++----- 1 file changed, 29 insertions(+), 7 deletions(-) diff --git a/src/app/home/options/options.component.ts b/src/app/home/options/options.component.ts index 7f5a5d1..d952110 100644 --- a/src/app/home/options/options.component.ts +++ b/src/app/home/options/options.component.ts @@ -73,7 +73,7 @@ export class OptionsComponent { sortOrder: 'asc' | 'desc' = 'desc'; searchQuery: string = ''; filteredImages: MobiansImage[] = []; - dropdownOptions: { label: string, value: string }[] = [ + dropdownOptions: { label: string, value: string }[] = [ { label: 'Date', value: 'timestamp' }, { label: 'Alphabetical', value: 'promptSummary' } ]; @@ -99,7 +99,7 @@ export class OptionsComponent { private openDatabase(): Promise { return new Promise((resolve, reject) => { - const request = indexedDB.open(this.dbName, 2); + const request = indexedDB.open(this.dbName, 5); request.onerror = (event) => { reject(new Error('Failed to open database')); @@ -112,8 +112,17 @@ export class OptionsComponent { request.onupgradeneeded = (event) => { const db = request.result; - db.deleteObjectStore(this.storeName); // Delete the existing object store + // Check if the object store exists before trying to delete it + if (db.objectStoreNames.contains('yourObjectStoreName')) { + db.deleteObjectStore('yourObjectStoreName'); + console.log('Object store deleted') + console.log(this.storeName) + } + + // Now, create the object store as needed db.createObjectStore(this.storeName, { keyPath: 'UUID' }); // Recreate the object store with the correct key path + console.log('Object store created') + console.log(this.storeName) }; }); } @@ -122,8 +131,18 @@ export class OptionsComponent { this.subscription = this.sharedService.getPrompt().subscribe(value => { this.generationRequest.prompt = value; }); + + this.openDatabase().then(() => { + // Database and object store created successfully + // Perform any necessary operations + console.log('Database and object store created successfully') + this.loadSettings(); + }).catch((error) => { + console.error('Failed to open database:', error); + // Handle the error appropriately + }); + this.sharedService.setGenerationRequest(this.generationRequest); - this.loadSettings(); this.updateSharedPrompt(); this.referenceImageSubscription = this.sharedService.getReferenceImage().subscribe(image => { @@ -311,17 +330,17 @@ export class OptionsComponent { request.onsuccess = (event) => { this.userGeneratedImages = request.result; - + // Sort the userGeneratedImages array based on the timestamp in descending order this.userGeneratedImages.sort((a, b) => { const timestampA = a.timestamp ? a.timestamp.getTime() : 0; const timestampB = b.timestamp ? b.timestamp.getTime() : 0; return timestampB - timestampA; }); - + // Calculate the total number of pages this.totalPages = Math.ceil(this.userGeneratedImages.length / this.imagesPerPage); - + // Display the first page of images this.searchImages(); this.paginateImages(); @@ -494,6 +513,9 @@ export class OptionsComponent { // Display the current page of images this.paginateImages(); + // update the view + this.sortImages(); + try { const db = await this.openDatabase(); const transaction = db.transaction(this.storeName, 'readwrite');