Hugging Face's logo

Spaces:
Agents-MCP-Hackathon
/
Personalized-Movie-Recommender-Assistant
Sleeping

App Files Community
Kim Juwon commited on
Commit
830b72b
Β·
1 Parent(s): 99db5a6

update UI/UX

Browse files
Files changed (1) hide show
  1. app.py +92 -31
app.py CHANGED
@@ -83,17 +83,30 @@ For information on how to customize the ChatInterface, peruse the gradio docs: h
83
 
84
  # μ»€μŠ€ν…€ CSS μŠ€νƒ€μΌ
85
  custom_css = """
 
 
 
 
 
 
 
 
 
 
 
 
86
  .gradio-container {
87
  font-family: 'Helvetica Neue', Arial, sans-serif;
88
  max-width: 1200px;
89
  margin: auto;
90
- padding: 20px;
 
91
  }
92
 
93
  .container {
94
  max-width: 800px;
95
  margin: auto;
96
- padding: 20px;
97
  }
98
 
99
  /* μ±„νŒ… μ»¨ν…Œμ΄λ„ˆ μŠ€νƒ€μΌ */
@@ -101,16 +114,17 @@ custom_css = """
101
  display: flex;
102
  flex-direction: column;
103
  height: 100%;
104
- background: #ffffff;
105
- border-radius: 10px;
106
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 
107
  }
108
 
109
  /* μ±„νŒ… λ©”μ‹œμ§€ μŠ€νƒ€μΌ */
110
  .chat-message {
111
- padding: 20px;
112
- margin: 10px;
113
- border-radius: 10px;
114
  max-width: 85%;
115
  line-height: 1.5;
116
  position: relative;
@@ -124,50 +138,53 @@ custom_css = """
124
 
125
  /* μ‚¬μš©μž λ©”μ‹œμ§€ μŠ€νƒ€μΌ */
126
  .user-message {
127
- background-color: #f0f2f5;
128
  margin-left: auto;
129
- border-bottom-right-radius: 0;
130
  }
131
 
132
  /* 봇 λ©”μ‹œμ§€ μŠ€νƒ€μΌ */
133
  .bot-message {
134
- background-color: #e3f2fd;
135
  margin-right: auto;
136
- border-bottom-left-radius: 0;
137
  }
138
 
139
  /* μž…λ ₯ μ˜μ—­ μŠ€νƒ€μΌ */
140
  .input-container {
141
  display: flex;
142
- gap: 10px;
143
- padding: 20px;
144
- background: #ffffff;
145
- border-top: 1px solid #e0e0e0;
146
  position: sticky;
147
  bottom: 0;
 
 
148
  }
149
 
150
  /* μž…λ ₯ ν•„λ“œ μŠ€νƒ€μΌ */
151
  input[type="text"] {
152
  flex: 1;
153
- padding: 12px;
154
- border: 1px solid #e0e0e0;
155
  border-radius: 8px;
156
  font-size: 16px;
157
  transition: border-color 0.3s ease;
 
158
  }
159
 
160
  input[type="text"]:focus {
161
- border-color: #2196f3;
162
  outline: none;
163
  }
164
 
165
  /* λ²„νŠΌ μŠ€νƒ€μΌ */
166
  button {
167
- padding: 12px 24px;
168
  border: none;
169
  border-radius: 8px;
170
- background-color: #2196f3;
171
  color: white;
172
  font-weight: 600;
173
  cursor: pointer;
@@ -175,30 +192,74 @@ button {
175
  }
176
 
177
  button:hover {
178
- background-color: #1976d2;
179
  }
180
 
181
  /* μ„€μ • νŒ¨λ„ μŠ€νƒ€μΌ */
182
  .settings-panel {
183
- background: #ffffff;
184
- padding: 20px;
185
- border-radius: 10px;
186
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 
187
  }
188
 
189
  /* λ“œλ‘­λ‹€μš΄ μŠ€νƒ€μΌ */
190
  select {
191
  width: 100%;
192
- padding: 8px;
193
- border: 1px solid #e0e0e0;
194
- border-radius: 6px;
195
- margin-bottom: 10px;
 
196
  }
197
 
198
  /* μŠ¬λΌμ΄λ” μŠ€νƒ€μΌ */
199
  input[type="range"] {
200
  width: 100%;
201
- margin: 10px 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
202
  }
203
  """
204
 
 
83
 
84
  # μ»€μŠ€ν…€ CSS μŠ€νƒ€μΌ
85
  custom_css = """
86
+ :root {
87
+ --primary-color: #2196f3;
88
+ --primary-hover: #1976d2;
89
+ --background-color: #f8f9fa;
90
+ --text-color: #333333;
91
+ --border-color: #e0e0e0;
92
+ --chat-user-bg: #e3f2fd;
93
+ --chat-bot-bg: #f5f5f5;
94
+ --panel-bg: #ffffff;
95
+ --spacing-unit: 16px;
96
+ }
97
+
98
  .gradio-container {
99
  font-family: 'Helvetica Neue', Arial, sans-serif;
100
  max-width: 1200px;
101
  margin: auto;
102
+ padding: var(--spacing-unit);
103
+ background-color: var(--background-color);
104
  }
105
 
106
  .container {
107
  max-width: 800px;
108
  margin: auto;
109
+ padding: var(--spacing-unit);
110
  }
111
 
112
  /* μ±„νŒ… μ»¨ν…Œμ΄λ„ˆ μŠ€νƒ€μΌ */
 
114
  display: flex;
115
  flex-direction: column;
116
  height: 100%;
117
+ background: var(--panel-bg);
118
+ border-radius: 12px;
119
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
120
+ margin-bottom: var(--spacing-unit);
121
  }
122
 
123
  /* μ±„νŒ… λ©”μ‹œμ§€ μŠ€νƒ€μΌ */
124
  .chat-message {
125
+ padding: var(--spacing-unit);
126
+ margin: calc(var(--spacing-unit) / 2);
127
+ border-radius: 12px;
128
  max-width: 85%;
129
  line-height: 1.5;
130
  position: relative;
 
138
 
139
  /* μ‚¬μš©μž λ©”μ‹œμ§€ μŠ€νƒ€μΌ */
140
  .user-message {
141
+ background-color: var(--chat-user-bg);
142
  margin-left: auto;
143
+ border-bottom-right-radius: 4px;
144
  }
145
 
146
  /* 봇 λ©”μ‹œμ§€ μŠ€νƒ€μΌ */
147
  .bot-message {
148
+ background-color: var(--chat-bot-bg);
149
  margin-right: auto;
150
+ border-bottom-left-radius: 4px;
151
  }
152
 
153
  /* μž…λ ₯ μ˜μ—­ μŠ€νƒ€μΌ */
154
  .input-container {
155
  display: flex;
156
+ gap: var(--spacing-unit);
157
+ padding: var(--spacing-unit);
158
+ background: var(--panel-bg);
159
+ border-top: 1px solid var(--border-color);
160
  position: sticky;
161
  bottom: 0;
162
+ border-bottom-left-radius: 12px;
163
+ border-bottom-right-radius: 12px;
164
  }
165
 
166
  /* μž…λ ₯ ν•„λ“œ μŠ€νƒ€μΌ */
167
  input[type="text"] {
168
  flex: 1;
169
+ padding: calc(var(--spacing-unit) * 0.75);
170
+ border: 1px solid var(--border-color);
171
  border-radius: 8px;
172
  font-size: 16px;
173
  transition: border-color 0.3s ease;
174
+ background-color: var(--panel-bg);
175
  }
176
 
177
  input[type="text"]:focus {
178
+ border-color: var(--primary-color);
179
  outline: none;
180
  }
181
 
182
  /* λ²„νŠΌ μŠ€νƒ€μΌ */
183
  button {
184
+ padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5);
185
  border: none;
186
  border-radius: 8px;
187
+ background-color: var(--primary-color);
188
  color: white;
189
  font-weight: 600;
190
  cursor: pointer;
 
192
  }
193
 
194
  button:hover {
195
+ background-color: var(--primary-hover);
196
  }
197
 
198
  /* μ„€μ • νŒ¨λ„ μŠ€νƒ€μΌ */
199
  .settings-panel {
200
+ background: var(--panel-bg);
201
+ padding: var(--spacing-unit);
202
+ border-radius: 12px;
203
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
204
+ margin-bottom: var(--spacing-unit);
205
  }
206
 
207
  /* λ“œλ‘­λ‹€μš΄ μŠ€νƒ€μΌ */
208
  select {
209
  width: 100%;
210
+ padding: calc(var(--spacing-unit) * 0.5);
211
+ border: 1px solid var(--border-color);
212
+ border-radius: 8px;
213
+ margin-bottom: calc(var(--spacing-unit) * 0.5);
214
+ background-color: var(--panel-bg);
215
  }
216
 
217
  /* μŠ¬λΌμ΄λ” μŠ€νƒ€μΌ */
218
  input[type="range"] {
219
  width: 100%;
220
+ margin: calc(var(--spacing-unit) * 0.5) 0;
221
+ }
222
+
223
+ /* λ§ˆν¬λ‹€μš΄ μŠ€νƒ€μΌ */
224
+ .markdown {
225
+ color: var(--text-color);
226
+ margin-bottom: var(--spacing-unit);
227
+ }
228
+
229
+ /* κ·Έλ£Ή μŠ€νƒ€μΌ */
230
+ .group {
231
+ margin-bottom: var(--spacing-unit);
232
+ }
233
+
234
+ /* 라벨 μŠ€νƒ€μΌ */
235
+ label {
236
+ color: var(--text-color);
237
+ margin-bottom: calc(var(--spacing-unit) * 0.5);
238
+ font-weight: 500;
239
+ }
240
+
241
+ /* 헀더 μŠ€νƒ€μΌ */
242
+ h1, h2, h3 {
243
+ color: var(--text-color);
244
+ margin-bottom: var(--spacing-unit);
245
+ }
246
+
247
+ /* μŠ€ν¬λ‘€λ°” μŠ€νƒ€μΌ */
248
+ ::-webkit-scrollbar {
249
+ width: 8px;
250
+ }
251
+
252
+ ::-webkit-scrollbar-track {
253
+ background: var(--background-color);
254
+ }
255
+
256
+ ::-webkit-scrollbar-thumb {
257
+ background: var(--border-color);
258
+ border-radius: 4px;
259
+ }
260
+
261
+ ::-webkit-scrollbar-thumb:hover {
262
+ background: var(--primary-color);
263
  }
264
  """
265