Spaces:
Sleeping
Sleeping
Update app.py
Browse files
app.py
CHANGED
@@ -112,6 +112,13 @@ with gr.Blocks(css='''
|
|
112 |
.gradio-container {
|
113 |
background: url('https://images.unsplash.com/photo-1514361726087-38371321b5cd?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
|
114 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
115 |
.generate-button {
|
116 |
background: linear-gradient(to right, #F0E68C, #E0FFFF, #FF6347);
|
117 |
color: black;
|
@@ -125,7 +132,6 @@ with gr.Blocks(css='''
|
|
125 |
transition: all 0.3s ease;
|
126 |
outline: none; /* Removes the outline on focus for some browsers */
|
127 |
}
|
128 |
-
|
129 |
.generate-button:hover, .generate-button:active {
|
130 |
background: linear-gradient(to right, #E0FFFF, #FF6347, #F0E68C);
|
131 |
/* Combines the glow from each color in the gradient */
|
@@ -138,7 +144,6 @@ with gr.Blocks(css='''
|
|
138 |
0 0 25px rgba(255, 99, 71, 0.7);
|
139 |
transform: translateY(2px); /* Optional: Slightly push the button down on active */
|
140 |
}
|
141 |
-
|
142 |
.generate-button:active {
|
143 |
/* You may want to add an extra inset shadow to give a sense of depth when clicked */
|
144 |
box-shadow:
|
@@ -154,10 +159,11 @@ with gr.Blocks(css='''
|
|
154 |
''') as demo:
|
155 |
|
156 |
with gr.Row():
|
157 |
-
gr.
|
158 |
-
|
159 |
-
<
|
160 |
-
''
|
|
|
161 |
|
162 |
with gr.Row():
|
163 |
# mood = gr.HTML('''
|
|
|
112 |
.gradio-container {
|
113 |
background: url('https://images.unsplash.com/photo-1514361726087-38371321b5cd?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
|
114 |
}
|
115 |
+
.centered-image {
|
116 |
+
display: block;
|
117 |
+
margin-left: auto;
|
118 |
+
margin-right: auto;
|
119 |
+
max-width: 500px; /* Maximum width of the image */
|
120 |
+
width: 100%;
|
121 |
+
}
|
122 |
.generate-button {
|
123 |
background: linear-gradient(to right, #F0E68C, #E0FFFF, #FF6347);
|
124 |
color: black;
|
|
|
132 |
transition: all 0.3s ease;
|
133 |
outline: none; /* Removes the outline on focus for some browsers */
|
134 |
}
|
|
|
135 |
.generate-button:hover, .generate-button:active {
|
136 |
background: linear-gradient(to right, #E0FFFF, #FF6347, #F0E68C);
|
137 |
/* Combines the glow from each color in the gradient */
|
|
|
144 |
0 0 25px rgba(255, 99, 71, 0.7);
|
145 |
transform: translateY(2px); /* Optional: Slightly push the button down on active */
|
146 |
}
|
|
|
147 |
.generate-button:active {
|
148 |
/* You may want to add an extra inset shadow to give a sense of depth when clicked */
|
149 |
box-shadow:
|
|
|
159 |
''') as demo:
|
160 |
|
161 |
with gr.Row():
|
162 |
+
gr.Image(value="MoodShaker_Logo.png", elem_id="centered-image")
|
163 |
+
# gr.HTML('''
|
164 |
+
# <h2 style='text-align: center; color: white;'>MoodShaker Cocktail Generator</h2>
|
165 |
+
# <p style='text-align: center; color: white;'>Enter your preferences and let AI create a unique cocktail recipe for you!</p>
|
166 |
+
# ''')
|
167 |
|
168 |
with gr.Row():
|
169 |
# mood = gr.HTML('''
|