Skip to content

Commit

Permalink
Added favoriting feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@Metal079
Metal079 committed Oct 1, 2024
1 parent 822bdee commit e0fbf23
Show file tree
Hide file tree
Showing 6 changed files with 548 additions and 36 deletions.
3 changes: 2 additions & 1 deletion src/_shared/mobians-image.interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ export interface MobiansImage {
promptSummary?: string;
thumbnailUrl?: string; // Add this line
blob?: Blob;
favorite?: boolean;
}

// Used just for the image history
export type MobiansImageMetadata = Pick<MobiansImage, 'UUID' | 'prompt' | 'timestamp' | 'aspectRatio' | 'width'>;
export type MobiansImageMetadata = Pick<MobiansImage, 'UUID' | 'prompt' | 'timestamp' | 'aspectRatio' | 'width' | 'height' | 'favorite'>;
39 changes: 39 additions & 0 deletions src/app/home/options/options.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,45 @@
max-height: 75vh;
}

.history-item img {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.history-item img:hover {
transform: scale(1.05); /* Slight zoom */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Add a shadow on hover */
}

/* Increase spacing between images */
.history-grid {
grid-gap: 20px; /* Increase space between items */
}

.image-container {
position: relative;
display: inline-block;
}

.top-left-icon {
position: absolute;
top: 8px;
left: 8px;
color: white;
cursor: pointer;
font-size: 1.5em;
border-radius: 50%;
}

.top-right-icon {
position: absolute;
top: 8px;
right: 8px;
color: white;
cursor: pointer;
font-size: 1.5em;
border-radius: 50%;
}

@media (max-width: 768px) {
.button-group {
flex-direction: row;
Expand Down
122 changes: 93 additions & 29 deletions src/app/home/options/options.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,9 +271,9 @@ <h5 class="lora-name">{{ loraItem.name }}</h5>
<!-- Toggle to return webp images isntead of png, (much smaller image sizes!) -->
<div class="d-flex justify-content-start mb-3">
<div class="form-check me-3">
<input class="form-check-input" type="checkbox" [(ngModel)]="generationRequest.lossy_images"
id="returnWebp">
<label class="form-check-label" for="returnWebp">WebP Images (Much smaller image size. Disable to save images as png when downloading!)</label>
<input class="form-check-input" type="checkbox" [(ngModel)]="generationRequest.lossy_images" id="returnWebp">
<label class="form-check-label" for="returnWebp">WebP Images (Much smaller image size. Disable to save images as
png when downloading!)</label>
</div>
</div>

Expand All @@ -290,37 +290,101 @@ <h5 class="lora-name">{{ loraItem.name }}</h5>
</div>
</div>

<!-- Image History Content Panel -->
<!-- Image History Content Panel -->
<div class="collapse w-100" id="historyCollapse">
<div class="card card-body">
<div class="sorting-options">
<div class="search-bar">
<input type="text" pInputText placeholder="Search prompts" [(ngModel)]="searchQuery"
(input)="debouncedSearch()">
</div>
</div>
<!-- Image History Panel -->
<div class="history-grid">
<div *ngFor="let image of currentPageImages" class="history-item">
<img [src]="image.url" alt="Generated Image" (click)="openImageDetails(image)">
<div class="history-details">
<span>{{ image.timestamp | date:'short' }}</span>
<span class="summary-text">{{ image.promptSummary }}</span>
<p-tabView>
<!-- All Images Tab -->
<p-tabPanel header="All Images">
<div class="sorting-options">
<div class="search-bar">
<input type="text" pInputText placeholder="Search prompts" [(ngModel)]="searchQuery"
(input)="debouncedSearch()">
</div>
</div>
</div>
</div>
<!-- Show message if no images are available -->
<div *ngIf="currentPageImages.length === 0" class="no-images-message">
No generated images available.
</div>
<div class="pagination">
<button class="btn btn-sm btn-primary" (click)="previousPage()"
[disabled]="currentPageNumber === 1">Previous</button>
<span>Page {{ currentPageNumber }} of {{ totalPages }}</span>
<button class="btn btn-sm btn-primary" (click)="nextPage()"
[disabled]="currentPageNumber === totalPages">Next</button>
</div>
<!-- Image History Panel -->
<div class="history-grid">
<div *ngFor="let image of currentPageImages" class="history-item">
<div class="image-container">
<img [src]="image.url" alt="Generated Image" (click)="openImageDetails(image)">
<div class="top-left-icon">
<i
class="fa"
[ngClass]="image.favorite ? 'fa-solid fa-star' : 'fa-regular fa-star'"
(click)="toggleFavorite(image)"
aria-label="Toggle Favorite"
></i>
</div>
<div class="top-right-icon">
<i class="fa-solid fa-trash" (click)="deleteImage(image)" aria-label="Delete Image"></i>
</div>
</div>
<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="currentPageImages.length === 0" class="no-images-message">
No generated images available.
</div>
<div class="pagination">
<button class="btn btn-sm btn-primary" (click)="previousPage()"
[disabled]="currentPageNumber === 1">Previous</button>
<span>Page {{ currentPageNumber }} of {{ totalPages }}</span>
<button class="btn btn-sm btn-primary" (click)="nextPage()"
[disabled]="currentPageNumber === totalPages">Next</button>
</div>
</p-tabPanel>

<!-- Favorites Tab -->
<p-tabPanel header="Favorites">
<!-- Favorites Content -->
<div class="sorting-options">
<div class="search-bar">
<input type="text" pInputText placeholder="Search prompts" [(ngModel)]="favoriteSearchQuery"
(input)="debouncedFavoriteSearch()">
</div>
</div>
<div class="history-grid">
<div *ngFor="let image of favoritePageImages" class="history-item">
<div class="image-container">
<img [src]="image.url" alt="Generated Image" (click)="openImageDetails(image)">
<div class="top-left-icon">
<i
class="fa"
[ngClass]="image.favorite ? 'fa-solid fa-star' : 'fa-regular fa-star'"
(click)="toggleFavorite(image)"
aria-label="Toggle Favorite"
></i>
</div>
<div class="top-right-icon">
<i class="fa-solid fa-trash" (click)="deleteImage(image)" aria-label="Delete Image"></i>
</div>
</div>
<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="favoritePageImages.length === 0" class="no-images-message">
No favorite images available.
</div>
<div class="pagination">
<button class="btn btn-sm btn-primary" (click)="previousFavoritePage()"
[disabled]="favoriteCurrentPageNumber === 1">Previous</button>
<span>Page {{ favoriteCurrentPageNumber }} of {{ favoriteTotalPages }}</span>
<button class="btn btn-sm btn-primary" (click)="nextFavoritePage()"
[disabled]="favoriteCurrentPageNumber === favoriteTotalPages">Next</button>
</div>
</p-tabPanel>
</p-tabView>
</div>
</div>


<router-outlet></router-outlet>
Loading

0 comments on commit e0fbf23

Please sign in to comment.