image history tab

angular.json

@@ -47,8 +47,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "1mb",
+                  "maximumError": "3mb"
                 },
                 {
                   "type": "anyComponentStyle",

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
   }
 

src/app/home/image-grid/image-grid.component.html

@@ -32,7 +32,7 @@
     <img [src]="'data:image/png;base64,' + images[3].base64" class="small-image" alt="Image4 goes here" (click)="inpaintingEnabled || expandImage(3, $event)" id="image3">
   </div>
   <div class="reference-image" *ngIf="this.sharedService.getReferenceImageValue() && !showLoading && showReferenceImage" id="wrapper5">
-    <img [src]="this.sharedService.getReferenceImageValue()!.url" alt="Reference Image goes here" (click)="inpaintingEnabled || expandImage(4, $event)" id="referenceImage">
+    <img [src]="this.sharedService.getReferenceImageValue()!.url ?? this.sharedService.getReferenceImageValue()!.thumbnailUrl" alt="Reference Image goes here" (click)="inpaintingEnabled || expandImage(4, $event)" id="referenceImage">
   </div>
   <canvas #imageCanvas id="drawing-canvas" (mousedown)="onMouseDown($event)" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp()"></canvas>
 

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');

src/app/home/options/options.component.css

@@ -31,6 +31,72 @@
   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;
+}
+
+.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;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -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;
@@ -69,4 +135,8 @@
   #advanced-options {
     width: 97vw;
   }
+
+  .p-inputtext{
+    padding-right: 0px;
+  }
 }

src/app/home/options/options.component.html

@@ -62,26 +62,67 @@
       [(ngModel)]="generationRequest.strength" />
   </div>
 
+  <!-- Remove reference image button -->
+  <span *ngIf="referenceImage" id="remove-reference-image-button" style="margin-left: 20px;">
+    <button class="btn btn-danger" type="button" (click)="removeReferenceImage()">
+      Remove Reference Image
+    </button>
+  </span>
+
   <!-- Advanced options -->
   <div id="advanced-options">
     <button class="btn btn-primary dropdown-toggle" data-bs-toggle="collapse" href="#collapseExample" role="button"
-      aria-expanded="false" aria-controls="collapseExample">
+      aria-expanded="false" aria-controls="collapseExample" (click)="toggleOptions()">
       Options
     </button>
 
-    <!-- Remove reference image button -->
-    <span *ngIf="referenceImage" id="remove-reference-image-button" style="margin-left: 20px;">
-      <button class="btn btn-danger" type="button" (click)="removeReferenceImage()">
-        Remove Reference Image
+    <!-- Image History Panel -->
+    <span class="history-panel">
+      <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="collapse"
+        data-bs-target="#historyCollapse" aria-expanded="false" aria-controls="historyCollapse"
+        (click)="toggleHistory()">
+        Image History
       </button>
+      <div class="collapse" id="historyCollapse">
+        <div class="card card-body">
+          <div class="sorting-options">
+            <div class="sort-dropdown">
+              <p-dropdown id="sortBy" [options]="dropdownOptions" [(ngModel)]="selectedSortOption"
+                (onChange)="sortImages()"></p-dropdown>
+              <button class="btn btn-sm btn-secondary" (click)="reverseSortOrder()">
+                {{ sortOrder === 'asc' ? '&#9650;' : '&#9660;' }}
+              </button>
+            </div>
+            <div class="search-bar">
+              <input type="text" pInputText placeholder="Search prompts" [(ngModel)]="searchQuery"
+                (input)="searchImages()">
+            </div>
+          </div>
+          <!-- Image History Panel -->
+          <div class="history-grid">
+            <div *ngFor="let image of paginatedImages" class="history-item">
+              <img [src]="image.url ?? image.thumbnailUrl" alt="Generated Image" (click)="openImageDetails(image)">
+              <div class="history-details">
+                <span>{{ image.timestamp | date:'short' }}</span>
+                <span class="summary-text">{{ image.promptSummary }}</span>
+              </div>
+            </div>
+          </div>
+          <!-- Show message if no images are available -->
+          <div *ngIf="paginatedImages.length === 0" class="no-images-message">
+            No generated images available.
+          </div>
+          <div class="pagination">
+            <button class="btn btn-sm btn-primary" (click)="previousPage()"
+              [disabled]="currentPage === 1">Previous</button>
+            <span>Page {{ currentPage }} of {{ totalPages }}</span>
+            <button class="btn btn-sm btn-primary" (click)="nextPage()"
+              [disabled]="currentPage === totalPages">Next</button>
+          </div>
+        </div>
+      </div>
     </span>
 
-    <!-- Re-generate with reference button -->
-    <button class="btn btn-success" type="button" onclick="redoWithSameReference()" id="redo-with-reference-button"
-      style="display: none">
-      Regenerate W/Prev Reference
-    </button>
-
     <div class="collapse w-100" id="collapseExample">
       <label for="floatingSelect">Model Select</label>
       <select class="form-select" id="floatingSelect" aria-label="Floating label select example"
@@ -180,7 +221,7 @@
           </span>
         </label>
         <input type="text" class="form-control" id="fastPassCode" placeholder="Join the Discord to win!"
-          [(ngModel)]="generationRequest.fast_pass_code" />
+          [(ngModel)]="generationRequest.fast_pass_code" (input)="onFastPassCodeChange($event)" />
       </div>
 
       <!-- Notifications -->
@@ -199,10 +240,5 @@
     </div>
   </div>
 
-  <!-- <p-overlayPanel #op>
-    <ng-template pTemplate="content">
-        <h4>Custom Content</h4>
-    </ng-template>
-</p-overlayPanel> -->
-  <!-- <p-button (click)="op.toggle($event)" icon="pi pi-image" label="Show"></p-button> -->
+
 </div>