176 lines
No EOL
7.2 KiB
HTML
176 lines
No EOL
7.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>SCUB-Doc Intelligence Suite - Professional Document Analysis</title>
|
||
<link rel="stylesheet" href="static/styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- Professional Enterprise-Style Title -->
|
||
<div class="title-enterprise">
|
||
<div class="brand-icon">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="brand-text">
|
||
<h1>
|
||
DocTags Intelligence Suite
|
||
<span class="pro-badge">AI powered</span>
|
||
</h1>
|
||
<p class="tagline">Enterprise-grade document processing and analysis</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Settings Panel -->
|
||
<div class="settings-panel">
|
||
<div class="settings-row">
|
||
<div class="form-group pdf-group">
|
||
<div><label for="pdf_file">PDF Document</label><div id="pdf-load-status"></div></div>
|
||
<select id="pdf_file" name="pdf_file">
|
||
<option value="">Select a PDF file...</option>
|
||
</select>
|
||
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="page_num">Page Number</label>
|
||
<input type="number" id="page_num" name="page_num" value="1" min="1" placeholder="1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="adjust">
|
||
<input type="checkbox" id="adjust" name="adjust" checked>
|
||
Auto-adjust coordinates
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Progress Indicator -->
|
||
<div class="progress-indicator">
|
||
<div class="step-indicator" id="step-1">1</div>
|
||
<div class="step-connector" id="connector-1"></div>
|
||
<div class="step-indicator" id="step-2">2</div>
|
||
<div class="step-connector" id="connector-2"></div>
|
||
<div class="step-indicator" id="step-3">3</div>
|
||
</div>
|
||
|
||
<!-- Tabs Container -->
|
||
<div class="tabs-container">
|
||
<!-- Tab Buttons -->
|
||
<div class="tab-buttons">
|
||
<button class="tab-button active" onclick="switchTab('analyzer')">
|
||
Analyze Document
|
||
</button>
|
||
<button class="tab-button" onclick="switchTab('visualizer')">
|
||
Visualize Structure
|
||
</button>
|
||
<button class="tab-button" onclick="switchTab('extractor')">
|
||
Extract Images
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Tab Contents -->
|
||
<div id="analyzer-tab" class="tab-content active">
|
||
<h3>Document Analysis</h3>
|
||
<p>Extract comprehensive document structure from your PDF using advanced AI-powered analysis. This process identifies headers, paragraphs, images, tables, and other document elements with precise coordinate information.</p>
|
||
|
||
<button id="analyzer-btn" onclick="runScript('analyzer')">
|
||
Start Analysis
|
||
</button>
|
||
|
||
<div id="analyzer-status" class="status hidden"></div>
|
||
|
||
<!-- PDF Preview -->
|
||
<div id="pdf-preview-container" class="hidden">
|
||
<h4>PDF Preview - Page <span id="preview-page-num">1</span></h4>
|
||
<div class="preview-controls">
|
||
<button class="nav-btn" onclick="changePreviewPage(-1)">❮ Previous</button>
|
||
<div class="page-selector">
|
||
<label>Page:</label>
|
||
<input type="number" id="preview-page-input" min="1" value="1" class="page-input">
|
||
<button class="go-btn" onclick="goToPreviewPage()">Go</button>
|
||
</div>
|
||
<button class="nav-btn" onclick="changePreviewPage(1)">Next ❯</button>
|
||
</div>
|
||
<img id="pdf-preview-image" src="" alt="PDF Preview">
|
||
</div>
|
||
|
||
<div class="tab-description">
|
||
<strong>Analysis Process:</strong>
|
||
<ul>
|
||
<li>Converts your PDF page into a high-resolution image</li>
|
||
<li>Applies machine learning to identify document structure</li>
|
||
<li>Maps elements with precise pixel coordinates</li>
|
||
<li>Generates structured DocTags format output</li>
|
||
<li>Saves results to the <code>results/</code> directory</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="visualizer-tab" class="tab-content">
|
||
<h3>Structure Visualization</h3>
|
||
<p>Generate a visual representation of the analyzed document structure with color-coded bounding boxes around each detected element type.</p>
|
||
|
||
<button id="visualizer-btn" onclick="runScript('visualizer')" disabled>
|
||
Create Visualization
|
||
</button>
|
||
|
||
<div id="visualizer-status" class="status hidden"></div>
|
||
|
||
<div id="image-container" class="hidden">
|
||
<h4>Visualization Result</h4>
|
||
<img id="result-image" src="" alt="Document Structure Visualization">
|
||
</div>
|
||
|
||
<div class="tab-description">
|
||
<strong>Visualization Features:</strong>
|
||
<ul>
|
||
<li>Color-coded element boundaries (headers, text, images, tables)</li>
|
||
<li>Element type labels for easy identification</li>
|
||
<li>Accurate coordinate mapping and scaling</li>
|
||
<li>High-quality PNG output for documentation</li>
|
||
<li>Interactive overlay on original document</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="extractor-tab" class="tab-content">
|
||
<h3>Image Extraction</h3>
|
||
<p>Automatically extract and save individual images from your document based on the detected picture regions, complete with metadata and captions.</p>
|
||
|
||
<button id="extractor-btn" onclick="runScript('extractor')" disabled>
|
||
Extract All Images
|
||
</button>
|
||
|
||
<div id="extractor-status" class="status hidden"></div>
|
||
|
||
<!-- Extracted Images Gallery -->
|
||
<div id="extracted-images-container" class="hidden">
|
||
<h4>Extracted Images</h4>
|
||
<div id="extracted-images-gallery" class="images-gallery">
|
||
<!-- Images will be loaded here dynamically -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-description">
|
||
<strong>Extraction Capabilities:</strong>
|
||
<ul>
|
||
<li>Precise image boundary detection and cropping</li>
|
||
<li>Caption and metadata preservation</li>
|
||
<li>Organized file naming and directory structure</li>
|
||
<li>HTML index page for easy browsing</li>
|
||
<li>Automatic quality optimization and resizing</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Output Section -->
|
||
<div id="output" class="output hidden"></div>
|
||
</div>
|
||
|
||
<script src="static/app.js"></script>
|
||
</body>
|
||
</html> |