140 lines
No EOL
6.5 KiB
HTML
140 lines
No EOL
6.5 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 and Visualizer</title>
|
|
<link rel="stylesheet" href="static/styles.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div id="app-container">
|
|
<h1>DocTags Analyzer and Visualizer</h1>
|
|
|
|
<div class="card">
|
|
<h3>Document Settings</h3>
|
|
<div class="form-group">
|
|
<label for="pdf_file">Select PDF Document:</label>
|
|
<select id="pdf_file" name="pdf_file"></select>
|
|
<div id="pdf-load-status" class="status mt-1"></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 class="checkbox-container">
|
|
<input type="checkbox" id="adjust" name="adjust" checked>
|
|
<span class="checkmark"></span>
|
|
Auto-adjust coordinates
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pipeline-container">
|
|
<div class="step-card">
|
|
<h3>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
|
|
<rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
|
|
<line x1="6" y1="6" x2="6" y2="6"></line>
|
|
<line x1="6" y1="18" x2="6" y2="18"></line>
|
|
</svg>
|
|
Step 1: Analyze PDF
|
|
</h3>
|
|
<p>Extract DocTags structure from the selected PDF page</p>
|
|
<button id="analyzer-btn" onclick="runScript('analyzer')">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
|
|
<polyline points="14 2 14 8 20 8"></polyline>
|
|
<path d="M12 18v-6"></path>
|
|
<path d="M8 18v-1"></path>
|
|
<path d="M16 18v-3"></path>
|
|
</svg>
|
|
Run Analyzer
|
|
</button>
|
|
<div id="analyzer-status" class="status mt-2"></div>
|
|
</div>
|
|
|
|
<div class="step-card">
|
|
<h3>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
<circle cx="8.5" cy="8.5" r="1.5"></circle>
|
|
<polyline points="21 15 16 10 5 21"></polyline>
|
|
</svg>
|
|
Step 2: Generate Visualization
|
|
</h3>
|
|
<p>Create visual representation of the extracted DocTags</p>
|
|
<button id="visualizer-btn" onclick="runScript('visualizer')">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect>
|
|
<path d="M3 9h18"></path>
|
|
<path d="M9 21V9"></path>
|
|
</svg>
|
|
Run Visualizer
|
|
</button>
|
|
<div id="visualizer-status" class="status mt-2"></div>
|
|
</div>
|
|
|
|
<div class="step-card">
|
|
<h3>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
|
|
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
|
|
<line x1="12" y1="22.08" x2="12" y2="12"></line>
|
|
</svg>
|
|
Step 3: Extract Pictures
|
|
</h3>
|
|
<p>Extract images from the document based on DocTags</p>
|
|
<button id="extractor-btn" onclick="runScript('extractor')">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M4 22h16a2 2 0 0 0 2-2V9a1 1 0 0 0-1-1h-6.34a1 1 0 0 1-.7-.29l-3.32-3.3a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v14.93a2 2 0 0 0 2 2z"></path>
|
|
<polyline points="8 17 12 13 16 17"></polyline>
|
|
<line x1="12" y1="13" x2="12" y2="22"></line>
|
|
</svg>
|
|
Run Picture Extractor
|
|
</button>
|
|
<div id="extractor-status" class="status mt-2"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="output" class="hidden"></div>
|
|
|
|
<div id="image-container" class="hidden">
|
|
<h2>Visualization Result</h2>
|
|
<img id="result-image" src="" alt="Visualization">
|
|
</div>
|
|
|
|
<div id="environment-check" class="hidden">
|
|
<h3>Environment Status</h3>
|
|
<div id="env-details"></div>
|
|
</div>
|
|
|
|
<div class="debug-section">
|
|
<button onclick="checkEnvironment()">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
|
<polyline points="15 3 21 3 21 9"></polyline>
|
|
<line x1="10" y1="14" x2="21" y2="3"></line>
|
|
</svg>
|
|
Check Environment
|
|
</button>
|
|
<button onclick="manuallyRunScript()">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="16 18 22 12 16 6"></polyline>
|
|
<polyline points="8 6 2 12 8 18"></polyline>
|
|
</svg>
|
|
Run Manual Command
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="static/app.js"></script>
|
|
</body>
|
|
</html> |