159 lines
No EOL
6.2 KiB
HTML
159 lines
No EOL
6.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>DocTags Analyzer & Visualizer</title>
|
|
<link rel="stylesheet" href="static/styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>DocTags Analyzer & Visualizer</h1>
|
|
|
|
<!-- 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>
|
|
|
|
<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>
|
|
|
|
<!-- Environment Check -->
|
|
<div id="environment-check" class="hidden">
|
|
<h3>System Environment</h3>
|
|
<div id="env-details"></div>
|
|
</div>
|
|
|
|
<!-- Debug Section -->
|
|
<div class="debug-section">
|
|
<button onclick="checkEnvironment()">System Check</button>
|
|
<button onclick="manuallyRunScript()">Manual Command</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="static/app.js"></script>
|
|
</body>
|
|
</html> |