Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add lora filtering options + nsfw filter #11

Merged
merged 1 commit into from
Dec 5, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -26,6 +26,10 @@ import { DialogService } from 'primeng/dynamicdialog';
import { PanelModule } from 'primeng/panel';
import { ChipModule } from 'primeng/chip';
import { DialogModule } from 'primeng/dialog';
import { InputSwitchModule } from 'primeng/inputswitch';
import { SelectButtonModule } from 'primeng/selectbutton';
import { ChipsModule } from 'primeng/chips';
import { MultiSelectModule } from 'primeng/multiselect';


const routes: Routes = [
@@ -56,6 +60,10 @@ const routes: Routes = [
ChipModule,
ButtonModule,
DialogModule,
InputSwitchModule,
SelectButtonModule,
ChipsModule,
MultiSelectModule,
FileUploadModule,
AccordionModule,
ImageModule,
168 changes: 118 additions & 50 deletions src/app/home/options/options.component.css
Original file line number Diff line number Diff line change
@@ -6,14 +6,16 @@
flex-wrap: wrap;
align-items: center;
justify-content: start;
gap: 10px; /* Space between items */
gap: 10px;
/* Space between items */
}

/* Includes prompt input box and generate button */
#prompt-input-box {
padding-left: 10px;
padding-bottom: 10px;
flex-grow: 1; /* Allow the input box to grow and take available space */
flex-grow: 1;
/* Allow the input box to grow and take available space */
}

/* The input box itself where text is */
@@ -44,7 +46,8 @@

.search-bar {
width: 100%;
margin-bottom: 15px; /* Add space below the search bar */
margin-bottom: 10px;
/* Add space below the search bar */
}

.search-bar input {
@@ -54,12 +57,16 @@

.history-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Enforce 2 columns */
grid-template-columns: repeat(2, 1fr);
/* Enforce 2 columns */
grid-gap: 10px;
margin-top: 10px;
max-width: 400px; /* Set a maximum width for the grid container */
margin-left: auto; /* Center the grid horizontally */
margin-right: auto; /* Center the grid horizontally */
max-width: 400px;
/* Set a maximum width for the grid container */
margin-left: auto;
/* Center the grid horizontally */
margin-right: auto;
/* Center the grid horizontally */
}

.history-item {
@@ -69,9 +76,12 @@
.history-item img {
width: 100%;
height: auto;
border-radius: 6px; /* Slightly larger border radius for a smoother look */
aspect-ratio: 1 / 1; /* This will make the image container square */
object-fit: cover; /* Ensure the image covers its container */
border-radius: 6px;
/* Slightly larger border radius for a smoother look */
aspect-ratio: 1 / 1;
/* This will make the image container square */
object-fit: cover;
/* Ensure the image covers its container */
}

.history-details {
@@ -105,46 +115,63 @@
}

.card-body {
min-height: 75vh; /* Start with 50% of the viewport height */
max-height: fit-content ;
overflow-y: auto; /* Allow scrolling if content exceeds max-height */
min-height: 75vh;
/* Start with 50% of the viewport height */
max-height: fit-content;
overflow-y: auto;
/* Allow scrolling if content exceeds max-height */
transition: height 0.5s ease-in-out;
max-width: 600px;
overflow: hidden
}

.pagination {
display: flex;
justify-content: space-between; /* Space buttons evenly */
justify-content: space-between;
/* Space buttons evenly */
margin-top: 20px;
}

.pagination .btn {
width: 48%; /* Make pagination buttons larger */
padding: 10px 0; /* Increase padding for easier tapping */
width: 48%;
/* Make pagination buttons larger */
padding: 10px 0;
/* Increase padding for easier tapping */
}

/* loras */
.lora-filters {
display: flex;
flex-wrap: wrap;
}

.loras-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem;
overflow-y: auto; /* Enable scrolling if the content exceeds the height */
display: flex;
flex-wrap: wrap;
gap: 15px;
/* Space between items */
overflow-y: auto;
/* Enable scrolling if the content exceeds the height */
overflow-x: hidden;
/* Hide horizontal scrollbar */
}

.lora-card {
border: 1px solid #ddd;
border-radius: 8px;
overflow: visible;
min-height: 190px; /* Set a minimum height to prevent layout shifts */
max-width: 600px; /* Enforce a consistent card width */
min-height: 190px;
/* Set a minimum height to prevent layout shifts */
max-width: 600px;
/* Enforce a consistent card width */
}

.lora-image {
width: 100%;
height: 100px;
height: 150px;
object-fit: cover;
object-position: center top; /* Align the image towards the top */
object-position: center top;
/* Align the image towards the top */
}

.lora-info {
@@ -167,7 +194,8 @@
}

.selected-lora-item-container {
max-height: 150px; /* Adjust this value as needed */
max-height: 150px;
/* Adjust this value as needed */
overflow-y: auto;
padding: 10px;
}
@@ -178,7 +206,8 @@
align-items: center;
margin-bottom: 10px;
/* flex-wrap: nowrap; Prevent wrapping */
max-width: 30%; /* Ensure it doesn't exceed the container width */
max-width: 30%;
/* Ensure it doesn't exceed the container width */
}

.selected-lora-image {
@@ -192,24 +221,26 @@
margin-right: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* Prevent wrapping */
max-width: 100%; /* Adjust based on image and button width */
white-space: nowrap;
/* Prevent wrapping */
max-width: 100%;
/* Adjust based on image and button width */
}

/* Menu dropdowns */
#collapseExample{
#collapseExample {
margin-left: 20px;
}

#historyCollapse{
#historyCollapse {
margin-left: 20px;
}

#lorasCollapse{
#lorasCollapse {
margin-left: 20px;
}

#lorasDropdown{
#lorasDropdown {
max-height: 75vh;
}

@@ -218,13 +249,16 @@
}

.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 */
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 */
grid-gap: 20px;
/* Increase space between items */
}

.image-container {
@@ -252,6 +286,16 @@
border-radius: 50%;
}

.lora-card {
width: calc(33% - 15px);
border: 1px solid #ddd;
box-sizing: border-box;
}

.btn.btn-primary.lora-request-btn {
width: 100%;
}

@media (max-width: 768px) {
.button-group {
flex-direction: row;
@@ -261,8 +305,8 @@
.button-group .btn {
width: 95%;
margin-bottom: 10px;
padding: 12px 0;
font-size: 16px;
padding: 12px 0;
font-size: 16px;
margin-left: 0;
}

@@ -307,21 +351,26 @@

#advanced-options {
width: 97vw;
padding-left: 20px; /* Increased padding for consistent spacing */
padding-left: 20px;
/* Increased padding for consistent spacing */
}

.p-inputtext {
padding-right: 0px;
}

.history-grid {
grid-template-columns: repeat(2, 1fr); /* Ensure a 2x2 grid on mobile */
grid-template-columns: repeat(2, 1fr);
/* Ensure a 2x2 grid on mobile */
}

.card-body {
min-height: 70vh; /* Start with 50% of the viewport height */
max-height: 80vh; /* Don't exceed 80% of the viewport height */
overflow-y: auto; /* Allow scrolling if content exceeds max-height */
min-height: 70vh;
/* Start with 50% of the viewport height */
max-height: 80vh;
/* Don't exceed 80% of the viewport height */
overflow-y: auto;
/* Allow scrolling if content exceeds max-height */
transition: height 0.5s ease-in-out;
}

@@ -332,25 +381,44 @@
}

.pagination .btn {
width: 48%; /* Ensure pagination buttons are easy to tap */
width: 48%;
/* Ensure pagination buttons are easy to tap */
padding: 10px 0;
}

/* Menu dropdowns */
#collapseExample{
#collapseExample {
margin-left: 0;
}
#historyCollapse{

#historyCollapse {
margin-left: 0;
}
#lorasCollapse{

#lorasCollapse {
margin-left: 0;
}

#lorasDropdown{
#lorasDropdown {
min-height: 60vh;
max-height: 70vh;
}
}

.lora-card {
width: calc(50% - 15px);
}

p {
font-size: 0.9rem; /* Slightly smaller text */
margin-bottom: 5px;
}

.d-flex.justify-content-between.mb-3 {
flex-direction: column;
align-items: stretch; /* Make them full width */
}

.d-flex.justify-content-between.mb-3 input {
margin-bottom: 0px;
}
}
Loading