| """Review UI copy and CSS.""" |
|
|
| APP_TITLE = "Cat Image Review" |
| PRIMARY_INSTRUCTION = ( |
| "Tap **Select** on every image you consider acceptable, then continue." |
| ) |
| CAT_SUBTEXT = "Pick any number of images (including none)." |
|
|
| BTN_SELECT = "Select" |
| BTN_CONTINUE = "Continue" |
| BTN_PREVIOUS = "Previous images" |
| BTN_ALL_DONE = "All done" |
| BTN_GO_BACK = "Go back to previous images" |
| COMPLETE_HEADING = "## All done. Thank you!" |
| ACCEPTED_COUNT_INITIAL = "Accepted so far — **0 / 4**" |
|
|
| |
| |
| CUSTOM_CSS = """ |
| .gradio-container { |
| max-width: 1000px !important; margin: 0 auto !important; |
| padding: 1.25rem 1rem 2rem !important; |
| } |
| .review-header { text-align: center; margin-bottom: 0.25rem !important; } |
| .review-header p { margin: 0.35rem 0 !important; color: #4b5563; } |
| .error-banner { |
| background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; |
| padding: 1rem; color: #991b1b; text-align: center; |
| } |
| .review-body { max-width: 920px; margin: 0 auto; } |
| .cat-block { text-align: center; margin-bottom: 0.5rem !important; } |
| .cat-block h3 { margin: 0.25rem 0 !important; font-size: 1.5rem !important; } |
| .cat-block p { margin: 0.15rem 0 0.75rem !important; color: #6b7280 !important; font-size: 0.95rem !important; } |
| .progress { text-align: center; letter-spacing: 0.4em; color: #9ca3af; margin: 0 0 1.25rem; font-size: 1rem; } |
| .progress .done { color: #22c55e; } |
| .progress .here { color: #2563eb; } |
| .grid-row { gap: 1rem !important; align-items: start !important; } |
| .card-col { |
| border: 3px solid #e5e7eb !important; border-radius: 12px !important; |
| padding: 0.75rem !important; background: #fafafa !important; |
| box-shadow: none !important; |
| } |
| .card-col.selected { |
| border: 5px solid #16a34a !important; background: #f0fdf4 !important; |
| box-shadow: 0 0 0 3px #bbf7d0 !important; |
| } |
| .card-col .block, .card-col .form { |
| background: transparent !important; border: none !important; |
| box-shadow: none !important; padding: 0 !important; margin: 0 !important; |
| } |
| .candidate-label { text-align: center; font-weight: 600; color: #374151; margin: 0 0 0.35rem !important; } |
| .candidate-label .block, .candidate-label .prose { margin: 0 !important; padding: 0 !important; } |
| .candidate-photo .image-container { |
| height: auto !important; min-height: 0 !important; min-width: 0 !important; |
| } |
| .candidate-photo .image-container button { |
| height: auto !important; min-height: 0 !important; padding: 0 !important; |
| } |
| .candidate-photo .image-frame { |
| height: auto !important; width: 100% !important; |
| } |
| .candidate-photo .image-frame img { |
| max-height: 280px !important; width: auto !important; height: auto !important; |
| max-width: 100% !important; object-fit: scale-down !important; |
| border-radius: 8px !important; display: block !important; margin: 0 auto !important; |
| } |
| .select-btn { margin-top: 0.5rem !important; } |
| .select-btn button { |
| width: 100% !important; min-height: 2.6rem !important; font-weight: 600 !important; |
| border-radius: 8px !important; font-size: 0.95rem !important; |
| } |
| .select-btn-off button { |
| background: #f0f9ff !important; border: 1px solid #60a5fa !important; color: #1d4ed8 !important; |
| } |
| .select-btn-on button { |
| background: #22c55e !important; border: 1px solid #16a34a !important; color: white !important; |
| } |
| .accepted-count { |
| text-align: center; font-size: 1.05rem; margin: 1.25rem 0 0.5rem; color: #374151; |
| } |
| .status-message { text-align: center; min-height: 1.25rem; font-weight: 600; margin-bottom: 0.25rem; } |
| .status-ok { color: #166534; } |
| .status-error { color: #b91c1c; } |
| .actions-row { |
| justify-content: center !important; gap: 0.75rem !important; |
| max-width: 560px !important; margin: 0.75rem auto 0 !important; |
| } |
| .actions-row > div { flex: 1 1 0 !important; min-width: 0 !important; } |
| .actions-row button { width: 100% !important; min-height: 2.75rem !important; border-radius: 8px !important; } |
| .primary-btn button { |
| background: #2563eb !important; border-color: #1d4ed8 !important; color: white !important; |
| font-weight: 600 !important; |
| } |
| .secondary-btn button { |
| background: white !important; border: 1px solid #d1d5db !important; color: #374151 !important; |
| font-weight: 500 !important; |
| } |
| .all-done-row { max-width: 560px !important; margin: 0.5rem auto 0 !important; } |
| .all-done-row button { |
| width: 100% !important; background: transparent !important; border: none !important; |
| color: #6b7280 !important; text-decoration: underline !important; box-shadow: none !important; |
| } |
| .complete-box { text-align: center; padding: 2.5rem 1rem; } |
| .complete-actions { max-width: 280px !important; margin: 1rem auto 0 !important; } |
| """ |
|
|
