Spaces:
Restarting
Restarting
File size: 7,151 Bytes
180dc07 5631eda 180dc07 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 |
<!DOCTYPE html>
<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> |