Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Processed Results</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet"> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" /> | |
| <style> | |
| :root { | |
| --primary: #ee4410; | |
| --secondary: #ff9f0a; | |
| --bg-dark: #0a0a0c; | |
| --card-bg: rgba(30, 30, 35, 0.7); | |
| --text-glow: 0 0 10px rgba(238, 68, 16, 0.5); | |
| } | |
| body { | |
| background-color: var(--bg-dark); | |
| font-family: 'Outfit', sans-serif; | |
| color: #f5f5f7; | |
| overflow-x: hidden; | |
| background: radial-gradient(circle at 50% 50%, #1a1a1f 0%, #0a0a0c 100%); | |
| min-height: 100vh; | |
| } | |
| .glass-card { | |
| background: var(--card-bg); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 20px; | |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| padding: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .glass-card:hover { | |
| transform: translateY(-5px); | |
| border-color: rgba(238, 68, 16, 0.3); | |
| box-shadow: 0 20px 45px rgba(238, 68, 16, 0.1); | |
| } | |
| .premium-title { | |
| background: linear-gradient(135deg, #fff 0%, #aaa 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| font-weight: 600; | |
| letter-spacing: -1px; | |
| text-shadow: var(--text-glow); | |
| margin-bottom: 1.5rem; | |
| } | |
| .section-title { | |
| color: var(--primary); | |
| font-size: 1.1rem; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| margin-bottom: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| flex: 1; | |
| height: 1px; | |
| background: linear-gradient(90deg, var(--primary), transparent); | |
| margin-left: 1rem; | |
| } | |
| .data-item { | |
| margin-bottom: 1.5rem; | |
| border-left: 3px solid var(--primary); | |
| padding-left: 1rem; | |
| animation: fadeIn 0.6s ease-out forwards; | |
| opacity: 0; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateX(-10px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| .data-label { | |
| color: #8e8e93; | |
| font-size: 0.85rem; | |
| margin-bottom: 0.2rem; | |
| } | |
| .data-value { | |
| font-size: 1.1rem; | |
| color: #fff; | |
| list-style: none; | |
| padding: 0; | |
| } | |
| .data-value li { | |
| margin-bottom: 0.4rem; | |
| } | |
| .result-img-container { | |
| border-radius: 15px; | |
| overflow: hidden; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| position: relative; | |
| } | |
| .result-img-container img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| transition: transform 0.5s ease; | |
| } | |
| .result-img-container:hover img { | |
| transform: scale(1.05); | |
| } | |
| .btn-premium { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| border: none; | |
| color: white; | |
| padding: 0.8rem 2rem; | |
| border-radius: 30px; | |
| font-weight: 600; | |
| box-shadow: 0 5px 15px rgba(238, 68, 16, 0.3); | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| display: inline-block; | |
| } | |
| .btn-premium:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 8px 25px rgba(238, 68, 16, 0.5); | |
| color: #fff; | |
| } | |
| .alert-premium { | |
| background: rgba(40, 40, 45, 0.9); | |
| border: 1px solid var(--primary); | |
| color: #fff; | |
| border-radius: 12px; | |
| padding: 1rem; | |
| animation: slideDown 0.5s cubic-bezier(0.19, 1, 0.22, 1); | |
| } | |
| @keyframes slideDown { | |
| from { transform: translateY(-50px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .debug-panel { | |
| margin-top: 4rem; | |
| padding: 2rem; | |
| background: rgba(0, 0, 0, 0.3); | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| font-family: monospace; | |
| font-size: 0.8rem; | |
| color: #666; | |
| } | |
| </style> | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container py-5"> | |
| {% with messages = get_flashed_messages() %} | |
| {% if messages %} | |
| <div class="alert-premium mb-4" id="flash-message"> | |
| {{ messages[0] }} | |
| </div> | |
| {% endif %} | |
| {% endwith %} | |
| <div class="d-flex align-items-center justify-content-between mb-5"> | |
| <h1 class="premium-title mb-0">Extraction Analysis <small style="font-size: 0.4em; color: var(--primary); letter-spacing: 2px; font-weight: 400; display: block; text-align: left;">v2.1 GOLD</small></h1> | |
| <a href="{{ url_for('reset_upload') }}" class="btn-premium" style="width: auto;">Process New Image</a> | |
| </div> | |
| {% if data %} | |
| <div class="row g-4"> | |
| <!-- Source Image Column --> | |
| <div class="col-lg-5"> | |
| <div class="glass-card"> | |
| <h3 class="section-title">Source Image</h3> | |
| {% if Img %} | |
| {% for filename, result_path in Img.items() %} | |
| <div class="result-img-container mb-3"> | |
| <img src="{{ result_path }}" alt="Analyzed Document" /> | |
| </div> | |
| <p class="text-muted small">File: {{ filename | basename }}</p> | |
| {% endfor %} | |
| {% else %} | |
| <div class="p-4 text-center text-muted">No image path available</div> | |
| {% endif %} | |
| </div> | |
| </div> | |
| <!-- Extracted Details Column --> | |
| <div class="col-lg-7"> | |
| <div class="glass-card"> | |
| <h3 class="section-title">Verified Details</h3> | |
| <div class="row"> | |
| <!-- Left Data Sub-col --> | |
| <div class="col-md-6"> | |
| {% if data.name %} | |
| <div class="data-item" style="animation-delay: 0.1s"> | |
| <div class="data-label">Full Name</div> | |
| <ul class="data-value"> | |
| {% for val in data.name %}<li>{{ val }}</li>{% endfor %} | |
| </ul> | |
| </div> | |
| {% endif %} | |
| {% if data.Designation %} | |
| <div class="data-item" style="animation-delay: 0.2s"> | |
| <div class="data-label">Designation</div> | |
| <ul class="data-value"> | |
| {% for val in data.Designation %}<li>{{ val }}</li>{% endfor %} | |
| </ul> | |
| </div> | |
| {% endif %} | |
| {% if data.Company %} | |
| <div class="data-item" style="animation-delay: 0.3s"> | |
| <div class="data-label">Organization</div> | |
| <ul class="data-value"> | |
| {% for val in data.Company %}<li>{{ val }}</li>{% endfor %} | |
| </ul> | |
| </div> | |
| {% endif %} | |
| </div> | |
| <!-- Right Data Sub-col --> | |
| <div class="col-md-6"> | |
| {% if data.contact_number %} | |
| <div class="data-item" style="animation-delay: 0.4s"> | |
| <div class="data-label">Phone Numbers</div> | |
| <ul class="data-value"> | |
| {% for val in data.contact_number %}<li>{{ val }}</li>{% endfor %} | |
| </ul> | |
| </div> | |
| {% endif %} | |
| {% if data.email %} | |
| <div class="data-item" style="animation-delay: 0.5s"> | |
| <div class="data-label">Email Addresses</div> | |
| <ul class="data-value"> | |
| {% for val in data.email %}<li>{{ val }}</li>{% endfor %} | |
| </ul> | |
| </div> | |
| {% endif %} | |
| {% if data.Location %} | |
| <div class="data-item" style="animation-delay: 0.6s"> | |
| <div class="data-label">Address</div> | |
| <ul class="data-value"> | |
| {% for val in data.Location %}<li>{{ val }}</li>{% endfor %} | |
| </ul> | |
| </div> | |
| {% endif %} | |
| {% if data.Link %} | |
| <div class="data-item" style="animation-delay: 0.7s"> | |
| <div class="data-label">Social/Web Links</div> | |
| <ul class="data-value"> | |
| {% for val in data.Link %}<li>{{ val }}</li>{% endfor %} | |
| </ul> | |
| </div> | |
| {% endif %} | |
| </div> | |
| </div> | |
| {% if data.status_message %} | |
| <div class="mt-4 pt-3 border-top border-secondary text-end"> | |
| <span class="badge rounded-pill bg-dark text-muted" style="font-size: 0.65rem; border: 1px solid rgba(255,255,255,0.05)">{{ data.status_message }}</span> | |
| </div> | |
| {% endif %} | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Debug / Raw Output Panel --> | |
| <div class="debug-panel rounded"> | |
| <h5 class="mb-3" style="color: #444; font-size: 0.9rem">SYSTEM_LOG :: RAW_EXTRACTION_BUFFER</h5> | |
| {% for filename, raw in data.extracted_text.items() %} | |
| <div class="mb-4"> | |
| <div class="mb-1 text-primary">>> {{ filename | basename }}</div> | |
| <div class="p-3 bg-black rounded" style="color: #0f0; opacity: 0.8; font-size: 0.85rem"> | |
| {{ raw }} | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| {% else %} | |
| <div class="text-center glass-card py-5"> | |
| <h2 class="premium-title">Waiting for Data...</h2> | |
| <p class="text-muted">No analysis results found in session.</p> | |
| <a href="{{ url_for('index') }}" class="btn-premium mt-3">Back to Upload</a> | |
| </div> | |
| {% endif %} | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| // Auto-remove flash messages | |
| setTimeout(function () { | |
| let flashMessage = document.getElementById("flash-message"); | |
| if (flashMessage) { | |
| flashMessage.style.transition = "all 0.8s ease"; | |
| flashMessage.style.opacity = 0; | |
| flashMessage.style.transform = "translateY(-20px)"; | |
| setTimeout(() => flashMessage.remove(), 800); | |
| } | |
| }, 4000); | |
| </script> | |
| </body> | |
| </html> | |
| </html> | |