tywei08 commited on
Commit
0581f3f
·
verified ·
1 Parent(s): 9aa0e03

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +12 -6
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.HTML('''
158
- <h2 style='text-align: center; color: white;'>MoodShaker Cocktail Generator</h2>
159
- <p style='text-align: center; color: white;'>Enter your preferences and let AI create a unique cocktail recipe for you!</p>
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('''