|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Lesion Detection</title> |
|
|
<link rel="stylesheet" href="{{ url_for('static', path='css/detect.css') }}"> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap" |
|
|
rel="stylesheet"> |
|
|
<link rel="icon" type="image/x-icon" href="{{ url_for('static', path='image/production.png') }}"> |
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" |
|
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> |
|
|
<style> |
|
|
:root { |
|
|
--primary-color: #1da2e0; |
|
|
--secondary-color: #c8e5fa; |
|
|
} |
|
|
body { |
|
|
box-sizing: border-box; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
font-family: 'IBM Plex Sans Thai', sans-serif; |
|
|
} |
|
|
.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1060; display: flex; justify-content: center; align-items: center; } |
|
|
.spinner-container { color: white; } |
|
|
.spinner { animation: rotate 2s linear infinite; width: 50px; height: 50px; } |
|
|
.path { stroke: #93d3f4; stroke-linecap: round; animation: dash 1.5s ease-in-out infinite; } |
|
|
@keyframes rotate { 100% { transform: rotate(360deg); } } |
|
|
@keyframes dash { |
|
|
0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } |
|
|
50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } |
|
|
100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } |
|
|
} |
|
|
|
|
|
#symptomTextArea::placeholder { |
|
|
color: #adb5bd; |
|
|
opacity: 1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-white"> |
|
|
<div class="container-fluid"> |
|
|
<a class="navbar-brand" href="/"> |
|
|
<img src="{{ url_for('static', path='image/Logo.png') }}" alt="Logo" class="img-fluid logo" |
|
|
style="max-width: 100px; height: auto;" /> |
|
|
</a> |
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> |
|
|
<span class="navbar-toggler-icon"></span> |
|
|
</button> |
|
|
<div class="collapse navbar-collapse" id="navbarNav"> |
|
|
<ul class="navbar-nav ms-auto"> |
|
|
<li class="nav-item"><a class="nav-link" href="/detect">ตรวจจับรอยโรค</a></li> |
|
|
<li class="nav-item"><a class="nav-link" href="#">ติดต่อสนับสนุน</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="detect-section flex-grow-1 background-color"> |
|
|
<div class="container py-4"> |
|
|
<div class="row justify-content-center"> |
|
|
<div class="col-md-8"> |
|
|
<div class="input-card shadow-lg p-4"> |
|
|
<h2 class="text-center mb-4">ตรวจจับรอยโรคในช่องปาก</h2> |
|
|
<form id="sectionForm" method="post" enctype="multipart/form-data" action="/uploaded"> |
|
|
<div class="mb-4"> |
|
|
<label for="file" class="form-label">อัปโหลดรูปภาพ</label> |
|
|
<input class="form-control" type="file" id="file" name="file" required accept="image/*"> |
|
|
</div> |
|
|
<div class="d-flex flex-row"> |
|
|
<h3>ประวัติ/อาการผู้ป่วย</h3> |
|
|
<p class="ms-2 mt-1">(เลือกจากรายการ หรือพิมพ์เพิ่มเติม)</p> |
|
|
</div> |
|
|
<div class="row"> |
|
|
<div class="col-md-6"> |
|
|
<div class="form-check"><input class="form-check-input symptom-checkbox" type="checkbox" id="check6" name="checkboxes" value="noSymptoms"><label class="form-check-label" for="check6">ไม่มีอาการผิดปกติ</label></div> |
|
|
<div class="form-check"><input class="form-check-input symptom-checkbox" type="checkbox" id="check1" name="checkboxes" value="drinkAlcohol"><label class="form-check-label" for="check1">ดื่มเครื่องดื่มแอลกอฮอล์</label></div> |
|
|
<div class="form-check"><input class="form-check-input symptom-checkbox" type="checkbox" id="check2" name="checkboxes" value="smoking"><label class="form-check-label" for="check2">สูบบุหรี่</label></div> |
|
|
<div class="form-check"><input class="form-check-input symptom-checkbox" type="checkbox" id="check3" name="checkboxes" value="chewBetelNut"><label class="form-check-label" for="check3">เคี้ยวหมาก</label></div> |
|
|
</div> |
|
|
<div class="col-md-6"> |
|
|
<div class="form-check"><input class="form-check-input symptom-checkbox" type="checkbox" id="check4" name="checkboxes" value="eatSpicyFood"><label class="form-check-label" for="check4">รับประทานอาหารเผ็ดแล้วรู้สึกระคายเคือง</label></div> |
|
|
<div class="form-check"><input class="form-check-input symptom-checkbox" type="checkbox" id="check5" name="checkboxes" value="wipeOff"><label class="form-check-label" for="check5">คราบขาวที่สามารถลอกออก</label></div> |
|
|
<div class="form-check"><input class="form-check-input symptom-checkbox" type="checkbox" id="check7" name="checkboxes" value="alwaysHurts"><label class="form-check-label" for="check7">มีอาการเจ็บหรือระคายเคืองตลอดเวลา</label></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<label for="symptomTextArea" class="form-label">รายละเอียดอาการเพิ่มเติม:</label> |
|
|
<textarea class="form-control" id="symptomTextArea" name="symptom_text" rows="4" placeholder="ข้อความจากรายการที่เลือกจะปรากฏที่นี่ หรือคุณสามารถพิมพ์อาการเพิ่มเติมได้เอง"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="d-grid gap-2 mt-4"> |
|
|
<button class="btn btn-primary" type="submit">Submit</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="loading" class="loading-overlay d-none"> |
|
|
<div class="spinner-container text-center"> |
|
|
<svg class="spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"> |
|
|
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle> |
|
|
</svg> |
|
|
<p class="mt-2">Processing, please wait...</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
{% if image_output %} |
|
|
<div class="modal fade" id="outputModal" tabindex="-1"> |
|
|
<div class="modal-dialog modal-lg modal-dialog-centered"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"> |
|
|
<h5 class="modal-title">ผลการตรวจจับรอยโรค</h5> |
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<div class="row g-2"> |
|
|
<div class="col-md-6"> |
|
|
<img src="{{ image_output }}" alt="Processed Image" class="img-fluid rounded"> |
|
|
</div> |
|
|
<div class="col-md-6"> |
|
|
<img src="{{ image_output }}" alt="Processed Image" class="img-fluid rounded"> |
|
|
</div> |
|
|
<div class="d-flex flex-column justify-content-center"> |
|
|
<p class="fs-5">ผลการวิเคราะห์รอยโรคจากภาพสามารถสรุปผลการวิเคราะห์รอยโรคร่วมกับประวัติผู้ป่วย</p> |
|
|
<h4>โอกาสเป็นรอยโรค: <span class="fs-5 text-danger">{{ eva_output }}%</span></h4> |
|
|
<h4>ประเภทรอยโรค: <span class="fs-5 text-primary">{{ name_out }}</span></h4> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ปิด</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="result-image-data" data-url="{{ image_output or '' }}" style="display: none;"></div> |
|
|
{% endif %} |
|
|
|
|
|
<footer class="footer bg-dark text-white p-4 text-center"> |
|
|
© 2025 MYCompany. All Rights Reserved. |
|
|
</footer> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> |
|
|
<script src="{{ url_for('static', path='js/index.js') }}"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
