144 lines
No EOL
4.9 KiB
HTML
144 lines
No EOL
4.9 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 Tools</title>
|
|
<link rel="stylesheet" href="static/styles.css">
|
|
</head>
|
|
<body>
|
|
<h1>DocTags Analyzer and Visualizer</h1>
|
|
|
|
<!-- Settings Panel -->
|
|
<div class="settings-panel">
|
|
<div class="settings-row">
|
|
<div class="form-group">
|
|
<label for="pdf_file">PDF File:</label>
|
|
<select id="pdf_file" name="pdf_file"></select>
|
|
<div id="pdf-load-status"></div>
|
|
</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">
|
|
</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')">
|
|
📄 Step 1: Analyze PDF
|
|
</button>
|
|
<button class="tab-button" onclick="switchTab('visualizer')">
|
|
🎨 Step 2: Visualize
|
|
</button>
|
|
<button class="tab-button" onclick="switchTab('extractor')">
|
|
🖼️ Step 3: Extract Pictures
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Contents -->
|
|
<div id="analyzer-tab" class="tab-content active">
|
|
<h3>📄 Analyze PDF</h3>
|
|
<p>Extract DocTags structure from the PDF page using AI-powered document analysis.</p>
|
|
|
|
<button id="analyzer-btn" onclick="runScript('analyzer')">
|
|
🚀 Run Analysis
|
|
</button>
|
|
|
|
<div id="analyzer-status" class="status hidden"></div>
|
|
|
|
<div class="tab-description">
|
|
<strong>What this does:</strong>
|
|
<ul>
|
|
<li>Converts the PDF page to an image</li>
|
|
<li>Uses AI to identify document structure (headers, text, images, tables)</li>
|
|
<li>Generates DocTags with precise coordinate information</li>
|
|
<li>Saves the results to the <code>results/</code> folder</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="visualizer-tab" class="tab-content">
|
|
<h3>🎨 Visualize DocTags</h3>
|
|
<p>Create a visual representation of the extracted DocTags with bounding boxes around detected elements.</p>
|
|
|
|
<button id="visualizer-btn" onclick="runScript('visualizer')" disabled>
|
|
🎨 Generate 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="Visualization">
|
|
</div>
|
|
|
|
<div class="tab-description">
|
|
<strong>What this does:</strong>
|
|
<ul>
|
|
<li>Reads the DocTags file from Step 1</li>
|
|
<li>Overlays colored rectangles on the original PDF page</li>
|
|
<li>Each element type gets a different color (headers, text, images, etc.)</li>
|
|
<li>Saves the visualization as a PNG image</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="extractor-tab" class="tab-content">
|
|
<h3>🖼️ Extract Pictures</h3>
|
|
<p>Extract individual images from the document based on the detected picture regions.</p>
|
|
|
|
<button id="extractor-btn" onclick="runScript('extractor')" disabled>
|
|
🖼️ Extract Images
|
|
</button>
|
|
|
|
<div id="extractor-status" class="status hidden"></div>
|
|
|
|
<div class="tab-description">
|
|
<strong>What this does:</strong>
|
|
<ul>
|
|
<li>Identifies picture regions from the DocTags</li>
|
|
<li>Crops and extracts individual images</li>
|
|
<li>Saves each image as a separate PNG file</li>
|
|
<li>Creates an HTML index of all extracted images</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Output Section -->
|
|
<div id="output" class="output hidden"></div>
|
|
|
|
<!-- Environment Check -->
|
|
<div id="environment-check" class="hidden">
|
|
<h3>Environment Check</h3>
|
|
<div id="env-details"></div>
|
|
</div>
|
|
|
|
<!-- Debug Section -->
|
|
<div class="debug-section">
|
|
<button onclick="checkEnvironment()">🔍 Environment Check</button>
|
|
<button onclick="manuallyRunScript()">⚙️ Manual Command</button>
|
|
</div>
|
|
|
|
<script src="static/app.js"></script>
|
|
</body>
|
|
</html> |