From 666837a54ddada0cc3354afcd37ca63f39241dee Mon Sep 17 00:00:00 2001 From: Minoa <57844837+M1noa@users.noreply.github.com> Date: Wed, 1 Oct 2025 11:39:21 -0500 Subject: [PATCH 1/4] fix the shitty vibecoded ui screenshot: https://your-girlfriend.strokes-to-my.pics/u3w0fcmm.png --- .gitignore | 3 +- main.py | 2 +- static/main.js | 29 ++ static/style.css | 321 +++++++++++++++++++ templates/clip_analysis.html | 515 ++++++++---------------------- templates/evaluation.html | 199 ++++-------- templates/evaluation_results.html | 484 +++++++--------------------- templates/index.html | 248 +++++++------- templates/processing.html | 77 ++--- templates/saved_evaluations.html | 229 ++++--------- templates/training.html | 86 ++--- 11 files changed, 883 insertions(+), 1310 deletions(-) create mode 100644 static/main.js create mode 100644 static/style.css diff --git a/.gitignore b/.gitignore index d16b8212..c566e9e9 100644 --- a/.gitignore +++ b/.gitignore @@ -8,4 +8,5 @@ Thumbs.db __pycache__/ *.pyc *.pyo -*.pyd \ No newline at end of file +*.pyd +/.history diff --git a/main.py b/main.py index d7c981c7..dcdd134c 100644 --- a/main.py +++ b/main.py @@ -1226,4 +1226,4 @@ def export_results(process_id): os.makedirs(app.config['MODELS_OUTPUT_FOLDER'], exist_ok=True) os.makedirs(os.path.join(BASE_DIR, 'final_footage'), exist_ok=True) - app.run(debug=True, host='0.0.0.0', port=5000) + app.run(debug=True, host='0.0.0.0', port=5001) diff --git a/static/main.js b/static/main.js new file mode 100644 index 00000000..828131ee --- /dev/null +++ b/static/main.js @@ -0,0 +1,29 @@ +document.addEventListener('DOMContentLoaded', () => { + const interactiveElements = document.querySelectorAll('.card, .panel, .interactive, tr'); + + interactiveElements.forEach(element => { + // Track if mouse is over element + let isHovering = false; + + element.addEventListener('mouseenter', () => { + isHovering = true; + }); + + element.addEventListener('mouseleave', () => { + isHovering = false; + }); + + element.addEventListener('mousemove', (e) => { + const rect = element.getBoundingClientRect(); + const x = e.clientX - rect.left; + const y = e.clientY - rect.top; + + element.style.setProperty('--mouse-x', `${x}px`); + element.style.setProperty('--mouse-y', `${y}px`); + }); + + // Initialize mouse position to center + element.style.setProperty('--mouse-x', '50%'); + element.style.setProperty('--mouse-y', '50%'); + }); +}); \ No newline at end of file diff --git a/static/style.css b/static/style.css new file mode 100644 index 00000000..4cdcc2ce --- /dev/null +++ b/static/style.css @@ -0,0 +1,321 @@ +/* ================================= + 0. THEME DETECTION & CSS VARIABLES + ================================= */ +:root { + color-scheme: light dark; +} + +/* Light mode (default fallback) */ +:root { + --bg-primary: #F8F6F4; + --bg-secondary: #EDE9E6; + --text-primary: #2A2F3D; + --text-secondary: #5A6070; + --rose-primary: #C89499; + --rose-accent: #D4A5AA; + --border-color: #D4D0CC; + --button-bg: rgba(248, 246, 244, 0.6); + --button-border: #C89499; + --success: #6B9968; + --error: #C87878; + --warning: #C89968; + --glow-color: rgba(248, 246, 244, 0.3); + --hover-border-color: #C89499; +} + +/* Dark mode (auto-detected) */ +@media (prefers-color-scheme: dark) { + :root { + --bg-primary: #1A1F2E; + --bg-secondary: #252B3D; + --text-primary: #F5F3F0; + --text-secondary: #B8BCC8; + --rose-primary: #E8B4B8; + --rose-accent: #F0C9CD; + --border-color: #3A4052; + --button-bg: rgba(26, 31, 46, 0.6); + --button-border: #3A4052; + --success: #A8C9A5; + --error: #E5A8A8; + --warning: #E8C4A8; + --glow-color: rgba(37, 43, 61, 0.5); + --hover-border-color: #E8B4B8; + } +} + +/* ================================= + 1. CSS RESET & BASE STYLES + ================================= */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + background: var(--bg-primary); + color: var(--text-primary); + font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + transition: background-color 0.3s ease, color 0.3s ease; +} + +/* ================================= + 2. TYPOGRAPHY & FONTS + ================================= */ +@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap'); + +::selection { + background: rgba(232, 180, 184, 0.3); + color: inherit; +} +::-moz-selection { + background: rgba(232, 180, 184, 0.3); + color: inherit; +} + +h1, h2, h3, h4, h5, h6 { + color: var(--text-primary); +} + +/* ================================= + 3. LAYOUT & CONTAINERS + ================================= */ +.container { + max-width: 85%; + margin-left: auto; + margin-right: auto; + padding: 1rem; +} + +.modal-dialog-max-width { + max-width: 80%; +} + +/* ================================= + 4. COMPONENTS + ================================= */ + +/* Cards and Panels */ +.card, .panel { + background-color: var(--bg-secondary); + border: 1px solid rgba(200, 148, 153, 0.4); + border-radius: 15px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); + transition: border-color 0.3s ease, box-shadow 0.3s ease; + position: relative; + overflow: hidden; +} + +.card:hover, .panel:hover { + border-color: var(--hover-border-color); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); +} + +.card-header { + background-color: transparent; + border-bottom: 1px solid var(--border-color); + border-radius: 15px 15px 0 0 !important; + font-weight: 600; +} + +.card-img-top { + width: 100%; + height: 200px; + object-fit: cover; +} + +.modal-img { + max-width: 100%; + height: auto; + border-radius: 8px; +} + +/* Log containers */ +.log-container, .processing-log, .log-output, #log-output { + height: 450px; + overflow-y: auto; + background-color: var(--bg-primary); + color: var(--text-secondary); + padding: 15px; + border-radius: 8px; + font-family: 'Courier New', monospace; + font-size: 14px; + white-space: pre-wrap; + word-wrap: break-word; + border: 1px solid var(--border-color); +} + +/* Progress and Status */ +.progress { + height: 25px; + border-radius: 15px; + background-color: var(--bg-primary); + border: 1px solid var(--border-color); +} + +.progress-bar { + background-color: var(--rose-primary); +} + +#status-message { + font-weight: 500; + margin-bottom: 10px; + color: var(--text-secondary); +} + +.spinner-border { + width: 1rem; + height: 1rem; + color: var(--rose-primary); +} + +/* ================================= + 5. FORMS & INPUTS + ================================= */ +.form-control, .form-select { + background-color: var(--bg-primary); + color: var(--text-primary); + border: 1px solid var(--border-color); + border-radius: 8px; +} + +.form-control:focus, .form-select:focus { + background-color: var(--bg-primary); + color: var(--text-primary); + border-color: var(--rose-primary); + box-shadow: 0 0 0 0.25rem rgba(232, 180, 184, 0.25); +} + + +/* ================================= + 6. BUTTONS & INTERACTIONS + ================================= */ +.btn { + border-radius: 8px; + padding: 0.6rem 1.2rem; + font-weight: 600; + transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; + position: relative; + overflow: hidden; + background-color: var(--button-bg); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +.btn:active { + box-shadow: 0 2px 4px rgba(0,0,0,0.1); +} + +.btn-primary { + background-color: var(--button-bg); + border: 1px solid var(--rose-primary); + color: var(--text-primary); +} + +.btn-primary:hover { + box-shadow: 0 0 12px rgba(232, 180, 184, 0.7); + color: var(--text-primary); + background-color: var(--button-bg); +} + +.btn-secondary { + background-color: var(--button-bg); + border-color: var(--border-color); + color: var(--text-secondary); +} + +.btn-secondary:hover { + box-shadow: 0 0 12px rgba(232, 180, 184, 0.7); + color: var(--text-secondary); + background-color: var(--button-bg); +} + +.btn-danger { + background-color: var(--button-bg); + border-color: var(--error); + color: var(--text-primary); +} + +.btn-success { + background-color: var(--button-bg); + border-color: var(--rose-primary); + color: var(--text-primary); +} + +/* ================================= + 7. TABLES & DATA DISPLAY + ================================= */ +.table { + margin-top: 20px; + border-radius: 10px; + overflow: hidden; + background-color: var(--bg-secondary); + border: 1px solid var(--border-color); +} + +.table thead { + background-color: var(--bg-primary); +} + +.table th, .table td { + border-color: var(--border-color); + vertical-align: middle; +} + +.table-hover tbody tr:hover { + background-color: var(--bg-primary); + color: var(--text-primary); +} + +/* ================================= + 8. UTILITY CLASSES + ================================= */ +.text-success { color: var(--success) !important; } +.text-danger { color: var(--error) !important; } +.text-warning { color: var(--warning) !important; } + +/* ================================= + 9. ANIMATIONS & TRANSITIONS + ================================= */ +* { + transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease; +} + +/* Mouse Follow Glow */ +.card::before, .panel::before, .table-hover tbody tr::before { + content: ''; + position: absolute; + left: var(--mouse-x, 50%); + top: var(--mouse-y, 50%); + transform: translate(-50%, -50%); + width: 300px; + height: 300px; + background: radial-gradient(circle closest-side, var(--glow-color), transparent); + opacity: 0; + transition: opacity 0.2s ease, left 0.08s ease-out, top 0.08s ease-out; + pointer-events: none; + z-index: 0; +} + +.card:hover::before, .panel:hover::before, .table-hover tbody tr:hover::before { + opacity: 1; +} + +.card > *, .panel > *, .table-hover tbody tr > * { + position: relative; + z-index: 1; +} + + +/* ================================= + 10. RESPONSIVE DESIGN + ================================= */ +@media (max-width: 768px) { + .container { + max-width: 95%; + } +} \ No newline at end of file diff --git a/templates/clip_analysis.html b/templates/clip_analysis.html index f0a837a3..03b57c25 100644 --- a/templates/clip_analysis.html +++ b/templates/clip_analysis.html @@ -1,419 +1,154 @@ - + - - - + + + Clip Analysis - {{ clip.clip_name }} - - - + + + + -