ngoctuanai commited on
Commit
08a7509
1 Parent(s): 1183d7a

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +201 -163
app.py CHANGED
@@ -5,17 +5,70 @@ import random
5
  import os
6
  from PIL import Image
7
 
8
- API_URL = "https://api-inference.huggingface.co/models/runwayml/stable-diffusion-v1-5"
9
- API_TOKEN = os.getenv("HF_READ_TOKEN") # it is free
10
- headers = {"Authorization": f"Bearer {API_TOKEN}"}
11
-
12
- def query(prompt, is_negative=False, steps=1, cfg_scale=6, seed=None):
13
- payload = {
14
- "inputs": prompt,
15
- "is_negative": is_negative,
16
- "steps": steps,
17
- "cfg_scale": cfg_scale,
18
- "seed": seed if seed is not None else random.randint(-1, 2147483647)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  }
20
 
21
  image_bytes = requests.post(API_URL, headers=headers, json=payload).content
@@ -24,164 +77,149 @@ def query(prompt, is_negative=False, steps=1, cfg_scale=6, seed=None):
24
 
25
 
26
  css = """
27
- /* Improve overall layout and styling */
28
- .gradio-container {
29
- font-family: 'IBM Plex Sans', sans-serif;
30
- max-width: 800px; /* Adjusted max-width for better readability */
31
- margin: auto;
32
- padding: 1.5rem;
33
- background-color: #f4f4f4; /* Added a light background color */
34
- border-radius: 10px; /* Added border radius for a softer look */
35
- }
36
-
37
- /* Improve button styling */
38
- .gr-button {
39
- color: #fff;
40
- background: #3498db; /* Changed button color to a shade of blue */
41
- border: 1px solid #2980b9; /* Added a border for contrast */
42
- border-radius: 5px; /* Added border radius for rounded corners */
43
- padding: 10px 20px; /* Increased padding for a better click target */
44
- }
45
-
46
- .gr-button:hover {
47
- background: #217dbb; /* Darker shade on hover for visual feedback */
48
- }
49
-
50
- /* Improve range input styling */
51
- input[type='range'] {
52
- accent-color: #3498db; /* Adjusted accent color for better visibility */
53
- }
54
-
55
- /* Improve gallery styling */
56
- #gallery {
57
- min-height: 300px;
58
- margin: 15px auto; /* Centered the gallery with margin */
59
- border-radius: 10px; /* Added border radius for a softer look */
60
- overflow: hidden; /* Hide overflow for a cleaner appearance */
61
- }
62
-
63
- /* Add box shadow to gallery for depth */
64
- #gallery>div {
65
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
66
- }
67
-
68
- /* Add transition to details for smoother underline effect */
69
- .details {
70
- transition: text-decoration 0.3s ease;
71
- }
72
-
73
- /* Add styling to advanced options button */
74
- #advanced-btn {
75
- font-size: 1rem;
76
- line-height: 24px;
77
- background-color: #27ae60; /* Green color for contrast */
78
- color: #fff;
79
- border-radius: 10px;
80
- padding: 8px 16px;
81
- cursor: pointer;
82
- }
83
-
84
- #advanced-btn:hover {
85
- background-color: #219653; /* Darker green on hover */
86
- }
87
-
88
- /* Show advanced options by default */
89
- #advanced-options {
90
- display: block;
91
- margin-bottom: 20px;
92
- }
93
-
94
- /* Improve footer styling */
95
- .footer {
96
- margin: 35px auto;
97
- text-align: center;
98
- border-top: 1px solid #e5e5e5;
99
- padding: 15px 0;
100
- }
101
-
102
- .footer>p {
103
- font-size: 1rem;
104
- display: inline-block;
105
- padding: 0 10px;
106
- background: #fff;
107
- border-radius: 5px;
108
- margin: 0;
109
- }
110
-
111
- /* Improve acknowledgments heading */
112
- .acknowledgments h4 {
113
- margin: 1em 0 0.25em 0;
114
- font-weight: bold;
115
- font-size: 120%; /* Slightly increased font size */
116
- }
117
-
118
- /* Add a subtle spin animation to the loading spinner */
119
- .animate-spin {
120
- animation: spin 1s linear infinite;
121
- }
122
-
123
- /* Add box shadow to share button container for depth */
124
- #share-btn-container {
125
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
126
- overflow: hidden; /* Hide overflow for a cleaner appearance */
127
- }
128
-
129
- /* Adjust prompt container styles */
130
- #prompt-container {
131
- gap: 10px; /* Increased gap for better spacing */
132
- }
133
-
134
- /* Adjust prompt text input padding */
135
- #prompt-text-input, #negative-prompt-text-input {
136
- padding: 10px;
137
- }
138
-
139
- /* Adjust tab item styles */
140
- .tabitem {
141
- border: 1px solid #ddd; /* Added a subtle border */
142
- border-radius: 5px; /* Added border radius for a softer look */
143
- margin: 5px;
144
- padding: 10px;
145
- cursor: pointer;
146
- }
147
-
148
- .tabitem:hover {
149
- background-color: #f5f5f5; /* Light background color on hover */
150
- }
151
-
152
  """
153
 
154
- with gr.Blocks(css=css, theme="pseudolab/huggingface-korea-theme") as dalle:
155
- gr.HTML(
156
- """
157
- <div style="text-align: center; margin: 0 auto;">
158
- <div
159
- style="
160
- display: inline-flex;
161
- align-items: center;
162
- gap: 0.8rem;
163
- font-size: 1.75rem;
164
- "
165
- >
166
- <h1 style="font-weight: 900; margin-bottom: 7px;margin-top:5px">
167
- Stable Diffusion v1.5 XL
168
- </h1>
169
- </div>
170
- <p style="margin-bottom: 10px; font-size: 94%; line-height: 23px;">
171
- </p>
172
- </div>
173
- """
174
  )
175
-
 
 
 
 
 
 
 
176
  with gr.Row():
177
  image_output = gr.Image(type="pil", label="Output Image", elem_id="gallery")
178
- with gr.Column(elem_id="prompt-container"):
179
- text_prompt = gr.Textbox(label="Prompt", placeholder="a cute dog", lines=1, elem_id="prompt-text-input")
180
- text_button = gr.Button("Generate", variant='primary', elem_id="gen-button")
181
-
182
  with gr.Accordion("Advanced settings", open=False):
183
  negative_prompt = gr.Textbox(label="Negative Prompt", value="text, blurry, fuzziness", lines=1, elem_id="negative-prompt-text-input")
 
184
 
185
- text_button.click(query, inputs=[text_prompt, negative_prompt], outputs=image_output)
186
 
187
- dalle.launch(show_api=False)
 
5
  import os
6
  from PIL import Image
7
 
8
+ list_models = [
9
+ "SD-1.5",
10
+ "SDXL-1.0",
11
+ "OpenJourney-V4",
12
+ "Anything-V4",
13
+ "Disney-Pixar-Cartoon",
14
+ "Pixel-Art-XL",
15
+ "dalle-3-xl",
16
+ ]
17
+
18
+ def generate_txt2img(current_model, prompt, is_negative=False, image_style="None style", steps=50, cfg_scale=7,
19
+ seed=None):
20
+
21
+ if current_model == "SD-1.5":
22
+ API_URL = "https://api-inference.huggingface.co/models/runwayml/stable-diffusion-v1-5"
23
+ elif current_model == "SDXL-1.0":
24
+ API_URL = "https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0"
25
+ elif current_model == "OpenJourney-V4":
26
+ API_URL = "https://api-inference.huggingface.co/models/prompthero/openjourney"
27
+ elif current_model == "Anything-V4":
28
+ API_URL = "https://api-inference.huggingface.co/models/xyn-ai/anything-v4.0"
29
+ elif current_model == "Disney-Pixar-Cartoon":
30
+ API_URL = "https://api-inference.huggingface.co/models/stablediffusionapi/disney-pixar-cartoon"
31
+ elif current_model == "Pixel-Art-XL":
32
+ API_URL = "https://api-inference.huggingface.co/models/nerijs/pixel-art-xl"
33
+ elif current_model == "dalle-3-xl":
34
+ API_URL = "https://api-inference.huggingface.co/models/openskyml/dalle-3-xl"
35
+
36
+
37
+ API_TOKEN = os.environ.get("HF_READ_TOKEN")
38
+ headers = {"Authorization": f"Bearer {API_TOKEN}"}
39
+
40
+
41
+ if image_style == "None style":
42
+ payload = {
43
+ "inputs": prompt + ", 8k",
44
+ "is_negative": is_negative,
45
+ "steps": steps,
46
+ "cfg_scale": cfg_scale,
47
+ "seed": seed if seed is not None else random.randint(-1, 2147483647)
48
+ }
49
+ elif image_style == "Cinematic":
50
+ payload = {
51
+ "inputs": prompt + ", realistic, detailed, textured, skin, hair, eyes, by Alex Huguet, Mike Hill, Ian Spriggs, JaeCheol Park, Marek Denko",
52
+ "is_negative": is_negative + ", abstract, cartoon, stylized",
53
+ "steps": steps,
54
+ "cfg_scale": cfg_scale,
55
+ "seed": seed if seed is not None else random.randint(-1, 2147483647)
56
+ }
57
+ elif image_style == "Digital Art":
58
+ payload = {
59
+ "inputs": prompt + ", faded , vintage , nostalgic , by Jose Villa , Elizabeth Messina , Ryan Brenizer , Jonas Peterson , Jasmine Star",
60
+ "is_negative": is_negative + ", sharp , modern , bright",
61
+ "steps": steps,
62
+ "cfg_scale": cfg_scale,
63
+ "seed": seed if seed is not None else random.randint(-1, 2147483647)
64
+ }
65
+ elif image_style == "Portrait":
66
+ payload = {
67
+ "inputs": prompt + ", soft light, sharp, exposure blend, medium shot, bokeh, (hdr:1.4), high contrast, (cinematic, teal and orange:0.85), (muted colors, dim colors, soothing tones:1.3), low saturation, (hyperdetailed:1.2), (noir:0.4), (natural skin texture, hyperrealism, soft light, sharp:1.2)",
68
+ "is_negative": is_negative,
69
+ "steps": steps,
70
+ "cfg_scale": cfg_scale,
71
+ "seed": seed if seed is not None else random.randint(-1, 2147483647)
72
  }
73
 
74
  image_bytes = requests.post(API_URL, headers=headers, json=payload).content
 
77
 
78
 
79
  css = """
80
+ .gradio-container {
81
+ font-family: 'IBM Plex Sans', sans-serif;
82
+ }
83
+ .gr-button {
84
+ color: white;
85
+ border-color: black;
86
+ background: black;
87
+ }
88
+ input[type='range'] {
89
+ accent-color: black;
90
+ }
91
+ .dark input[type='range'] {
92
+ accent-color: #dfdfdf;
93
+ }
94
+ .gradio-container {
95
+ max-width: 730px !important;
96
+ margin: auto;
97
+ padding-top: 1.5rem;
98
+ }
99
+ #gallery {
100
+ min-height: 22rem;
101
+ margin-bottom: 15px;
102
+ margin-left: auto;
103
+ margin-right: auto;
104
+ border-bottom-right-radius: .5rem !important;
105
+ border-bottom-left-radius: .5rem !important;
106
+ }
107
+ #gallery>div>.h-full {
108
+ min-height: 20rem;
109
+ }
110
+ .details:hover {
111
+ text-decoration: underline;
112
+ }
113
+ .gr-button {
114
+ white-space: nowrap;
115
+ }
116
+ .gr-button:focus {
117
+ border-color: rgb(147 197 253 / var(--tw-border-opacity));
118
+ outline: none;
119
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
120
+ --tw-border-opacity: 1;
121
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
122
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px var(--tw-ring-offset-width)) var(--tw-ring-color);
123
+ --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
124
+ --tw-ring-opacity: .5;
125
+ }
126
+ #advanced-btn {
127
+ font-size: .7rem !important;
128
+ line-height: 19px;
129
+ margin-top: 12px;
130
+ margin-bottom: 12px;
131
+ padding: 2px 8px;
132
+ border-radius: 14px !important;
133
+ }
134
+ #advanced-options {
135
+ display: none;
136
+ margin-bottom: 20px;
137
+ }
138
+ .footer {
139
+ margin-bottom: 45px;
140
+ margin-top: 35px;
141
+ text-align: center;
142
+ border-bottom: 1px solid #e5e5e5;
143
+ }
144
+ .footer>p {
145
+ font-size: .8rem;
146
+ display: inline-block;
147
+ padding: 0 10px;
148
+ transform: translateY(10px);
149
+ background: white;
150
+ }
151
+ .dark .footer {
152
+ border-color: #303030;
153
+ }
154
+ .dark .footer>p {
155
+ background: #0b0f19;
156
+ }
157
+ .acknowledgments h4{
158
+ margin: 1.25em 0 .25em 0;
159
+ font-weight: bold;
160
+ font-size: 115%;
161
+ }
162
+ .animate-spin {
163
+ animation: spin 1s linear infinite;
164
+ }
165
+ @keyframes spin {
166
+ from {
167
+ transform: rotate(0deg);
168
+ }
169
+ to {
170
+ transform: rotate(360deg);
171
+ }
172
+ }
173
+ #share-btn-container {padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; max-width: 13rem; margin-left: auto;}
174
+ div#share-btn-container > div {flex-direction: row;background: black;align-items: center}
175
+ #share-btn-container:hover {background-color: #060606}
176
+ #share-btn {all: initial; color: #ffffff;font-weight: 600; cursor:pointer; font-family: 'IBM Plex Sans', sans-serif; margin-left: 0.5rem !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important;right:0;}
177
+ #share-btn * {all: unset}
178
+ #share-btn-container div:nth-child(-n+2){width: auto !important;min-height: 0px !important;}
179
+ #share-btn-container .wrap {display: none !important}
180
+ #share-btn-container.hidden {display: none!important}
181
+ .gr-form{
182
+ flex: 1 1 50%; border-top-right-radius: 0; border-bottom-right-radius: 0;
183
+ }
184
+ #prompt-container{
185
+ gap: 0;
186
+ }
187
+ #prompt-container .form{
188
+ border-top-right-radius: 0;
189
+ border-bottom-right-radius: 0;
190
+ }
191
+ #gen-button{
192
+ border-top-left-radius:0;
193
+ border-bottom-left-radius:0;
194
+ }
195
+ #prompt-text-input, #negative-prompt-text-input{padding: .45rem 0.625rem}
196
+ #component-16{border-top-width: 1px!important;margin-top: 1em}
197
+ .image_duplication{position: absolute; width: 100px; left: 50px}
198
+ .tabitem{border: 0 !important}
 
 
 
 
 
 
199
  """
200
 
201
+ with gr.Blocks(css=css) as demo:
202
+
203
+ favicon = '<img src="" width="48px" style="display: inline">'
204
+ gr.Markdown(
205
+ f"""<h1><center>{favicon} AI Diffusion</center></h1>
206
+ """
 
 
 
 
 
 
 
 
 
 
 
 
 
 
207
  )
208
+
209
+ with gr.Row(elem_id="prompt-container"):
210
+ current_model = gr.Dropdown(label="Current Model", choices=list_models, value=list_models[1])
211
+
212
+ with gr.Row(elem_id="prompt-container"):
213
+ text_prompt = gr.Textbox(label="Prompt", placeholder="a cute cat", lines=1, elem_id="prompt-text-input")
214
+ text_button = gr.Button("Generate", variant='primary', elem_id="gen-button")
215
+
216
  with gr.Row():
217
  image_output = gr.Image(type="pil", label="Output Image", elem_id="gallery")
218
+
 
 
 
219
  with gr.Accordion("Advanced settings", open=False):
220
  negative_prompt = gr.Textbox(label="Negative Prompt", value="text, blurry, fuzziness", lines=1, elem_id="negative-prompt-text-input")
221
+ image_style = gr.Dropdown(label="Style", choices=["None style", "Cinematic", "Digital Art", "Portrait"], value="None style", allow_custom_value=False)
222
 
223
+ text_button.click(generate_txt2img, inputs=[current_model, text_prompt, negative_prompt, image_style], outputs=image_output)
224
 
225
+ demo.launch(show_api=False)