tchung1970 Claude Opus 4.5 commited on
Commit
1457fa8
·
1 Parent(s): f98eb37

Move UI higher and enlarge prompt field

Browse files

- Reduce container padding from 48px to 16px
- Reduce header margins and font size
- Increase textarea height from 500px to 620px
- Increase lines from 20 to 28
- Reduce font size from 17px to 15px for more text visibility

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Files changed (1) hide show
  1. app.py +11 -11
app.py CHANGED
@@ -248,7 +248,7 @@ css = """
248
  .gradio-container {
249
  max-width: 85vw !important;
250
  margin: 0 auto !important;
251
- padding: 48px 20px !important;
252
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', sans-serif !important;
253
  }
254
 
@@ -261,16 +261,16 @@ css = """
261
  /* Header */
262
  .header-container {
263
  text-align: left;
264
- margin-bottom: 24px;
265
  }
266
 
267
  .main-title {
268
- font-size: 32px !important;
269
  font-weight: 600 !important;
270
  letter-spacing: -0.02em !important;
271
  line-height: 1.07 !important;
272
  color: #f5f5f7 !important;
273
- margin: 0 0 16px 0 !important;
274
  }
275
 
276
  /* Input Section */
@@ -289,7 +289,7 @@ css = """
289
 
290
  /* Textbox */
291
  textarea {
292
- font-size: 17px !important;
293
  line-height: 1.47 !important;
294
  border-radius: 12px !important;
295
  border: 1px solid #424245 !important;
@@ -297,12 +297,12 @@ textarea {
297
  background: #2d2d2f !important;
298
  color: #f5f5f7 !important;
299
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
300
- min-height: 500px !important;
301
- max-height: 700px !important;
302
- height: 500px !important;
303
  resize: vertical !important;
304
  overflow-y: auto !important;
305
- margin-bottom: 16px !important;
306
  }
307
 
308
  textarea:focus {
@@ -588,8 +588,8 @@ with gr.Blocks(
588
  prompt = gr.Textbox(
589
  placeholder="Describe the image you want to create...",
590
  value="Ultra-detailed isometric 3D diorama of a compact AI research lab inside a cutaway cube room. One person seated at a large desk placed directly against the left wall, equipped with exactly three displays, working at a keyboard, wearing large white over-ear headphones, with the mouse positioned next to the person's right hand. A large whiteboard mounted on the left wall directly in front of the desk, filled with technical diagrams and flowcharts. The room is bright, clean, and uncluttered, with a minimalist gray floor and walls.\n\nAlong the right side of the room, arranged from left to right: two tall server racks standing side by side with no gap between them, fully filled from floor to top with dense AI server units and glowing green LED indicator lights; next to the racks, a small snack bar with neatly arranged packaged snacks on shelves and a counter; and at the far right, a clear glass-front refrigerator filled with energy drinks. These are the only server racks in the room. Clean modern lighting, realistic soft shadows, no floating screens or holograms, high realism, sharp focus, professional isometric 3D style.",
591
- lines=20,
592
- max_lines=25,
593
  max_length=2000,
594
  label="Prompt",
595
  show_label=True,
 
248
  .gradio-container {
249
  max-width: 85vw !important;
250
  margin: 0 auto !important;
251
+ padding: 16px 20px !important;
252
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', sans-serif !important;
253
  }
254
 
 
261
  /* Header */
262
  .header-container {
263
  text-align: left;
264
+ margin-bottom: 12px;
265
  }
266
 
267
  .main-title {
268
+ font-size: 28px !important;
269
  font-weight: 600 !important;
270
  letter-spacing: -0.02em !important;
271
  line-height: 1.07 !important;
272
  color: #f5f5f7 !important;
273
+ margin: 0 0 8px 0 !important;
274
  }
275
 
276
  /* Input Section */
 
289
 
290
  /* Textbox */
291
  textarea {
292
+ font-size: 15px !important;
293
  line-height: 1.47 !important;
294
  border-radius: 12px !important;
295
  border: 1px solid #424245 !important;
 
297
  background: #2d2d2f !important;
298
  color: #f5f5f7 !important;
299
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
300
+ min-height: 620px !important;
301
+ max-height: 800px !important;
302
+ height: 620px !important;
303
  resize: vertical !important;
304
  overflow-y: auto !important;
305
+ margin-bottom: 12px !important;
306
  }
307
 
308
  textarea:focus {
 
588
  prompt = gr.Textbox(
589
  placeholder="Describe the image you want to create...",
590
  value="Ultra-detailed isometric 3D diorama of a compact AI research lab inside a cutaway cube room. One person seated at a large desk placed directly against the left wall, equipped with exactly three displays, working at a keyboard, wearing large white over-ear headphones, with the mouse positioned next to the person's right hand. A large whiteboard mounted on the left wall directly in front of the desk, filled with technical diagrams and flowcharts. The room is bright, clean, and uncluttered, with a minimalist gray floor and walls.\n\nAlong the right side of the room, arranged from left to right: two tall server racks standing side by side with no gap between them, fully filled from floor to top with dense AI server units and glowing green LED indicator lights; next to the racks, a small snack bar with neatly arranged packaged snacks on shelves and a counter; and at the far right, a clear glass-front refrigerator filled with energy drinks. These are the only server racks in the room. Clean modern lighting, realistic soft shadows, no floating screens or holograms, high realism, sharp focus, professional isometric 3D style.",
591
+ lines=28,
592
+ max_lines=35,
593
  max_length=2000,
594
  label="Prompt",
595
  show_label=True,