Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Image Interpretation - SmartDoc AI</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link rel="shortcut icon" href="static/assets/favicon.ico" type="image/x-icon"> | |
| <link rel="stylesheet" href="static/styles/notification.css"> | |
| <link rel="stylesheet" href="static/styles/functions.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <nav class="container"> | |
| <div class="logo"> | |
| <a href="/">SmartDoc AI</a> | |
| </div> | |
| </nav> | |
| </header> | |
| <section class="hero "> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <h1>Unlock the Meaning Behind <br> | |
| Your Images</h1> | |
| <p>Unlock the insights hidden in your images with our advanced AI technology. From charts and graphs to complex | |
| diagrams, our system analyzes and explains visual content with remarkable accuracy.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="reasons"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Why Choose Our Image Interpretation AI</h2> | |
| <div class="underline"></div> | |
| </div> | |
| <div class="reasons-grid"> | |
| <div class="reason-card"> | |
| <div class="reason-icon">🔍</div> | |
| <h3>Deep Visual Analysis</h3> | |
| <p>Our AI can identify objects, patterns, and relationships within images, extracting meaningful data from | |
| charts, graphs, and visual content in documents.</p> | |
| </div> | |
| <div class="reason-card"> | |
| <div class="reason-icon">📊</div> | |
| <h3>Data Extraction</h3> | |
| <p>Convert visual data from charts and graphs into actionable insights and structured data that you can use | |
| for analysis and decision-making.</p> | |
| </div> | |
| <div class="reason-card"> | |
| <div class="reason-icon">🧩</div> | |
| <h3>Context Understanding</h3> | |
| <p>Our system doesn't just identify what's in an image—it understands the context and relationships between | |
| elements to provide meaningful interpretations.</p> | |
| </div> | |
| <div class="reason-card"> | |
| <div class="reason-icon">⚡</div> | |
| <h3>Time-Saving</h3> | |
| <p>Automate the tedious process of manually analyzing visual content, allowing you to focus on applying the | |
| insights rather than extracting them.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="steps"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>How It Works</h2> | |
| <div class="underline"></div> | |
| </div> | |
| <div class="steps-container"> | |
| <div class="step"> | |
| <div class="step-number">1</div> | |
| <div class="step-line"></div> | |
| <div class="step-content"> | |
| <h3>Upload Your Image</h3> | |
| <p>Select and upload the image you want to analyze. We support various formats including JPG, PNG, GIF, and | |
| more.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">2</div> | |
| <div class="step-line"></div> | |
| <div class="step-content"> | |
| <h3>AI Processing</h3> | |
| <p>Our advanced computer vision algorithms analyze your image, identifying objects, patterns, text, and | |
| relationships between visual elements.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">3</div> | |
| <div class="step-line"></div> | |
| <div class="step-content"> | |
| <h3>Review Interpretation</h3> | |
| <p>Receive a detailed interpretation of your image, including descriptions of content, data extraction from | |
| charts, and contextual analysis.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">4</div> | |
| <div class="step-content"> | |
| <h3>Download or Share</h3> | |
| <p>Save the interpretation as a text file or share it directly with colleagues. All your data is processed | |
| securely and never stored without your permission.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="upload"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Upload Your Image</h2> | |
| <div class="underline"></div> | |
| </div> | |
| <div class="upload-container"> | |
| <form class="upload-box"> | |
| <div class="upload-icon">🖼️</div> | |
| <div class="upload-text"> | |
| <h3>Select an Image to Interpret</h3> | |
| <p>Upload a JPG, PNG, or GIF file (max 5MB)</p> | |
| </div> | |
| <div class="file-input-container"> | |
| <label for="image-upload" class="file-input-label">Choose Image</label> | |
| <input type="file" id="image-upload" class="file-input" accept="image/*"> | |
| <div class="file-name" id="file-name">No image chosen</div> | |
| </div> | |
| <div class="image-preview-container" id="image-preview-container"> | |
| <img src="" alt="Image Preview" class="image-preview" id="image-preview"> | |
| </div> | |
| <button class="btn-primary" id="interpret-btn">Interpret Image</button> | |
| <div class="loading-container" id="loading-container"> | |
| <div class="loading-spinner"></div> | |
| <div class="loading-text">Analyzing image and generating interpretation...</div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="results" id="results-section"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Your Image Interpretation</h2> | |
| <div class="underline"></div> | |
| </div> | |
| <div class="results-container"> | |
| <div class="results-box"> | |
| <div class="results-header"> | |
| <div class="results-title"> | |
| <h3>Image Analysis</h3> | |
| </div> | |
| </div> | |
| <div class="results-image-container"> | |
| <img src="" alt="Analyzed Image" class="results-image" id="results-image"> | |
| </div> | |
| <div class="results-content" id="interpretation-content"> | |
| </div> | |
| <div class="results-actions"> | |
| <button class="btn-secondary" id="new-interpretation-btn">New Interpretation</button> | |
| <button class="btn-primary" id="download-btn">Download Interpretation</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-logo"> | |
| <a href="/">SmartDoc AI</a> | |
| <p>Intelligent Document Processing</p> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2025 SmartDoc AI.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <div class="notification-container"></div> | |
| <script src="static/scripts/notifcation.js"></script> | |
| <script src="static/scripts/ImageInterpretation.js"></script> | |
| </body> | |
| </html> |