File size: 6,432 Bytes
8078d22 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Segmentation Tools</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
<div class="container mt-4">
<!-- Header -->
<h1 class="text-center mb-4">Segmentation Tools</h1>
<!-- Interactive Segmentation Tool -->
<div class="tool-section mb-4">
<h2 class="text-center">Interactive Segmentation Tool</h2>
<div class="btn-group mb-3 d-flex justify-content-center">
<button id="voidsButton" class="btn btn-outline-primary active">Voids</button>
<button id="chipsButton" class="btn btn-outline-primary">Chips</button>
</div>
<div class="row">
<div class="col-md-6">
<h5 class="text-center">Input Image</h5>
<div class="canvas-container">
<canvas id="inputCanvas"></canvas>
</div>
<button id="clearPoints" class="btn btn-danger mt-3">Clear Points</button>
</div>
<div class="col-md-6">
<h5 class="text-center">Segmented Image</h5>
<div class="canvas-container">
<canvas id="segmentedCanvas"></canvas>
</div>
<div class="d-flex justify-content-end mt-3">
<button id="historyButton" class="btn btn-secondary me-2">History</button>
<button id="saveBothButton" class="btn btn-primary me-2">Save Both</button>
<button id="retrainModelButton" class="btn btn-primary me-2">Retrain Model</button>
<button id="cancelTrainingButton" class="btn btn-danger me-2" style="display: none;">Cancel Training</button>
<button id="clearHistoryButton" class="btn btn-danger">Clear History</button>
</div>
</div>
</div>
<input type="file" id="imageUpload" class="form-control mt-3">
</div>
<!-- Training Progress Indicator -->
<div id="trainingProgress" class="alert alert-info mt-3" style="display: none;">
<strong>Training in Progress:</strong> <span id="progressMessage">Initializing...</span>
<br>
<span id="estimatedTimeLeft">Estimated Time Left: Calculating...</span>
</div>
<!-- Automatic Segmentation Tool -->
<div class="tool-section">
<h2 class="text-center">Automatic Segmentation Tool</h2>
<div class="row">
<div class="col-md-6">
<h5 class="text-center">Input Image</h5>
<input type="file" id="automaticImageUpload" class="form-control">
</div>
<div class="col-md-6">
<h5 class="text-center">Processed Image</h5>
<div class="canvas-container">
<img id="automaticProcessedImage" src="#" alt="Processed Image" style="display: none;">
</div>
</div>
</div>
</div>
<!-- Results Table -->
<div class="tool-section">
<h2 class="text-center">Segmentation Results</h2>
<table class="table">
<thead>
<tr>
<th>Image Name</th>
<th>Chip #</th>
<th>Chip Area</th>
<th>Void %</th>
<th>Max Void %</th>
</tr>
</thead>
<tbody id="resultsTableBody">
<!-- Dynamic rows will be added here -->
</tbody>
</table>
<div class="d-flex justify-content-end mt-3">
<button id="clearTableButton" class="btn btn-primary me-2">Clear Table</button>
<button id="exportTableButton" class="btn btn-primary">Export Table</button>
</div>
</div>
</div>
<!-- History Modal -->
<div class="modal fade" id="historyModal" tabindex="-1" aria-labelledby="historyModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="historyModalLabel">Saved History</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul id="historyList" class="list-group">
<!-- Example List Item -->
<li class="list-group-item">
<span class="filename">11_JPG.rf.3aa3109a1838549cf273cdbe8b2cafeb.jpg</span>
<button class="btn btn-danger">Delete</button>
</li>
<li class="list-group-item">
<span class="filename">15r_jpg.rf.2da1990173346311d3a3555e23a9164a.jpg</span>
<button class="btn btn-danger">Delete</button>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
// Ensure the modal backdrop is properly removed when the modal is closed
document.getElementById('historyModal').addEventListener('hidden.bs.modal', function () {
document.body.classList.remove('modal-open');
const backdrop = document.querySelector('.modal-backdrop');
if (backdrop) {
backdrop.remove();
}
});
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>
|