ngoctuanai commited on
Commit
d633848
1 Parent(s): d3924cb

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +51 -81
app.py CHANGED
@@ -79,78 +79,66 @@ def generate_txt2img(current_model, prompt, is_negative=False, image_style="None
79
 
80
 
81
  css = """
82
- /* Ensure responsive design for different screen sizes */
83
- @media only screen and (max-width: 768px) {
84
- .gradio-container {
85
- max-width: 100% !important;
86
- }
 
87
  }
88
 
89
- /* Improve button style for better visibility */
90
  .gr-button {
91
  color: white;
92
- background: black;
93
  border-color: black;
94
- border-radius: 5px; /* Add border-radius for a more modern look */
95
- }
96
-
97
- /* Adjust range input style for better visibility */
98
- input[type='range'] {
99
- accent-color: black;
100
- width: 100%; /* Ensure the range input spans the entire width */
101
- }
102
-
103
- /* Increase spacing and improve layout for the gallery section */
104
- #gallery {
105
- min-height: 20rem; /* Adjust min-height for better responsiveness */
106
- margin: 15px auto; /* Center the gallery */
107
- border-radius: 0.5rem; /* Add border-radius for a smoother appearance */
108
  }
109
 
110
- /* Enhance hover effect for details */
111
- .details:hover {
112
- text-decoration: underline;
 
 
 
 
 
 
113
  }
114
 
115
- /* Improve readability and style for the footer */
116
- .footer {
117
- margin: 35px 0 45px;
 
118
  text-align: center;
119
  border-bottom: 1px solid #e5e5e5;
120
- background: white; /* Add background color for better contrast */
121
  }
122
 
123
- /* Adjust padding and border color for the advanced options button */
124
- #advanced-btn {
125
- font-size: 0.9rem;
126
- line-height: 24px;
127
- margin: 12px 0;
128
- padding: 6px 12px; /* Increase padding for a more comfortable click area */
129
- border-radius: 14px;
130
- border-color: black; /* Match border color with button color */
131
  }
132
 
133
- /* Improve styling for acknowledgments section */
134
- .acknowledgments h4 {
135
- margin: 1.25em 0 0.25em;
136
- font-weight: bold;
137
- font-size: 1.15rem;
138
  }
139
 
140
- /* Add a subtle animation to the spin class */
141
- .animate-spin {
142
- animation: spin 1s linear infinite;
143
  }
144
 
145
- /* Adjust share button styling for better visibility */
146
  #share-btn-container {
147
- padding: 0.5rem !important;
148
  background-color: #000000;
149
  justify-content: center;
150
  align-items: center;
151
- border-radius: 9999px;
152
  max-width: 13rem;
153
- margin: 0 auto;
154
  }
155
 
156
  #share-btn-container:hover {
@@ -158,6 +146,7 @@ input[type='range'] {
158
  }
159
 
160
  #share-btn {
 
161
  color: #ffffff;
162
  font-weight: 600;
163
  cursor: pointer;
@@ -167,43 +156,24 @@ input[type='range'] {
167
  right: 0;
168
  }
169
 
170
- /* Adjust form and button styling for better alignment */
171
- .gr-form {
172
- flex: 1 1 100%; /* Use full width for better responsiveness */
173
- border-radius: 5px; /* Add border-radius for a smoother appearance */
174
- }
175
-
176
- #prompt-container {
177
- gap: 0;
178
- }
179
-
180
- #prompt-container .form {
181
- border-radius: 5px; /* Add border-radius for a smoother appearance */
182
- }
183
-
184
- #gen-button {
185
- border-radius: 5px; /* Add border-radius for a smoother appearance */
186
- }
187
-
188
- /* Improve styling for input text boxes */
189
- #prompt-text-input, #negative-prompt-text-input {
190
- padding: 0.45rem 0.625rem;
191
- }
192
-
193
- /* Ensure a minimum width for component-16 */
194
- #component-16 {
195
- border-top-width: 1px !important;
196
- margin-top: 1em;
197
- min-width: 200px; /* Add a minimum width for better visibility */
198
  }
199
 
200
- /* Reduce size of the duplicated image */
201
- .image_duplication{position: absolute; width: 100px; left: 50px}
 
202
  }
203
 
204
- /* Remove unnecessary border for tab items */
205
- .tabitem {
206
- border: none !important;
 
 
 
 
 
207
  }
208
  """
209
 
 
79
 
80
 
81
  css = """
82
+ /* General Container Styles */
83
+ .gradio-container {
84
+ font-family: 'IBM Plex Sans', sans-serif;
85
+ max-width: 730px !important;
86
+ margin: auto;
87
+ padding-top: 1.5rem;
88
  }
89
 
90
+ /* Button Styles */
91
  .gr-button {
92
  color: white;
 
93
  border-color: black;
94
+ background: black;
95
+ white-space: nowrap;
 
 
 
 
 
 
 
 
 
 
 
 
96
  }
97
 
98
+ .gr-button:focus {
99
+ border-color: rgb(147 197 253 / var(--tw-border-opacity));
100
+ outline: none;
101
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
102
+ --tw-border-opacity: 1;
103
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
104
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px var(--tw-ring-offset-width)) var(--tw-ring-color);
105
+ --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
106
+ --tw-ring-opacity: .5;
107
  }
108
 
109
+ /* Footer Styles */
110
+ .footer, .dark .footer {
111
+ margin-bottom: 45px;
112
+ margin-top: 35px;
113
  text-align: center;
114
  border-bottom: 1px solid #e5e5e5;
 
115
  }
116
 
117
+ .footer > p, .dark .footer > p {
118
+ font-size: .8rem;
119
+ display: inline-block;
120
+ padding: 0 10px;
121
+ transform: translateY(10px);
122
+ background: white;
 
 
123
  }
124
 
125
+ .dark .footer {
126
+ border-color: #303030;
 
 
 
127
  }
128
 
129
+ .dark .footer > p {
130
+ background: #0b0f19;
 
131
  }
132
 
133
+ /* Share Button Styles */
134
  #share-btn-container {
135
+ padding: 0 0.5rem !important;
136
  background-color: #000000;
137
  justify-content: center;
138
  align-items: center;
139
+ border-radius: 9999px !important;
140
  max-width: 13rem;
141
+ margin-left: auto;
142
  }
143
 
144
  #share-btn-container:hover {
 
146
  }
147
 
148
  #share-btn {
149
+ all: initial;
150
  color: #ffffff;
151
  font-weight: 600;
152
  cursor: pointer;
 
156
  right: 0;
157
  }
158
 
159
+ /* Animation Styles */
160
+ .animate-spin {
161
+ animation: spin 1s linear infinite;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
162
  }
163
 
164
+ @keyframes spin {
165
+ from { transform: rotate(0deg); }
166
+ to { transform: rotate(360deg); }
167
  }
168
 
169
+ /* Other Styles */
170
+ #gallery {
171
+ min-height: 22rem;
172
+ margin-bottom: 15px;
173
+ margin-left: auto;
174
+ margin-right: auto;
175
+ border-bottom-right-radius: .5rem !important;
176
+ border-bottom-left-radius: .5rem !important;
177
  }
178
  """
179