|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Medical Image Analysis</title> |
|
|
<link rel="stylesheet" href="styles.css"> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>Medical Image Analysis</h1> |
|
|
|
|
|
<div class="input-method-selection"> |
|
|
<label class="radio-label"> |
|
|
<input type="radio" name="inputMethod" value="local" checked> |
|
|
Local File |
|
|
</label> |
|
|
<label class="radio-label"> |
|
|
<input type="radio" name="inputMethod" value="url"> |
|
|
URL |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="input-section"> |
|
|
<div class="input-group" id="localInputGroup"> |
|
|
<label>Upload Image</label> |
|
|
<input type="file" id="fileInput" accept="image/*"> |
|
|
</div> |
|
|
|
|
|
<div class="input-group" id="urlInputGroup" style="display: none;"> |
|
|
<label>Image URL</label> |
|
|
<input type="text" id="urlInput" placeholder="Enter image URL"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="label-section"> |
|
|
|
|
|
<div class="default-labels"> |
|
|
<label class="label-option"> |
|
|
<input type="checkbox" name="default" value="Normal" checked> |
|
|
Normal |
|
|
</label> |
|
|
<label class="label-option"> |
|
|
<input type="checkbox" name="default" value="Unspecified"> |
|
|
Unspecified |
|
|
</label> |
|
|
<p class="helper-text">Best Practice is to select Normal since it will compare it to a healthy state.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="search-container"> |
|
|
<div class="search-wrapper"> |
|
|
<input type="text" id="labelSearch" class="search-input" placeholder="Search labels..."> |
|
|
<button id="showAllLabels" class="show-all-btn">Show All</button> |
|
|
</div> |
|
|
<div id="labelDropdown" class="label-dropdown" style="display: none;"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="selectedLabelsContainer" class="selected-labels-container"> |
|
|
<h3>Selected Labels:</h3> |
|
|
<div id="selectedLabels"></div> |
|
|
</div> |
|
|
|
|
|
<div class="preview-section"> |
|
|
<img id="imagePreview" src="" alt="Image Preview" style="display: none;"> |
|
|
<div class="spinner" id="spinner" style="display: none;"> |
|
|
<div class="spinner-inner"></div> |
|
|
</div> |
|
|
<p id="defaultPreviewMessage" style="display: block;">No image loaded. Please upload an image or enter a URL.</p> |
|
|
</div> |
|
|
|
|
|
<button onclick="analyzeImage()" id="analyzeBtn">Analyze</button> |
|
|
<div class="results-section" id="results"></div> |
|
|
</div> |
|
|
<script src="script.js"></script> |
|
|
</body> |
|
|
</html> |
