/
skinpredict.html
91 lines (83 loc) · 5.34 KB
/
skinpredict.html
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
<!DOCTYPE html>
<html>
<head>
<title>Skin Lesion Analyzer App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="shortcut icon" type="image/x-icon" href="favicon1.ico" />
</head>
<body>
<main>
<div class="jumbotron text-center">
<h1>Skin Lesion Analyzer App</h1>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-12">
<div class="progress progress-bar progress-bar-striped progress-bar-animated mb-2" style="display:none">
Loading Model
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<select id="model-selector" class="custom-select">
<option selected disabled>Select Model</option>
<option>Cancer</option>
</select>
</div>
<div class="col-8">
<input id="image-selector" class="form-control border-0" type="file">
</div>
<div class="col-1">
<button id="predict-button" class="btn btn-primary float-right">Predict</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-6">
<h2 class="ml-3">Predictions</h2>
<ol id="prediction-list"></ol>
</div>
<div class="col-6">
<h2 class="ml-3">Image</h2>
<img id="selected-image" class="ml-3" src="" />
</div>
</div>
<hr>
<div class="row">
<h2></h2>
</div>
<div class="row">
<div class="col-6">
<h2 class="ml-3">Sample Images</h2>
<p>
<a class="list-group-item" download="image1.jpg" href="images/sample/image1.jpg">Image 1</a></br>
<a class="list-group-item" download="image2.jpg" href="images/sample/image2.jpg">Image 2</a></br>
<a class="list-group-item" download="image3.jpg" href="images/sample/image3.jpg">Image 3</a></br>
<a class="list-group-item" download="image5.jpg" href="images/sample/image5.jpg">Image 4</a></br>
<a class="list-group-item" download="image6.jpg" href="images/sample/image6.jpg">Image 5</a></br>
<a class="list-group-item" download="image7.jpg" href="images/sample/image7.jpg">Image 6</a></br>
<a class="list-group-item" download="image8.jpg" href="images/sample/image8.jpg">Image 7</a></br>
<p>
</div>
<div class="col-6">
<h2 class="ml-3">Key Words</h2>
<ul>
<li><h4>Actinic Keratoses(akiecc)</h4><p>Actinic keratoses describes lesions on the outer skin layer caused by too much exposure to the ultraviolet rays of sunlight. They are also the beginnings of skin cancer, most often appearing after age 40. (WebMD)</p></li>
<li><h4>Basal Cell Carcinoma(bcc)</h4><p>Basal cell carcinoma is a cancer that grows on parts of your skin that get a lot of sun. It's the least risky type of skin cancer and is unlikely to spread to other parts of your body. (WebMD)</p></li>
<li><h4>Seborrheic Keratosis(bkl)</h4><p>Seborrheic keratoses are noncancerous skin growths that some people develop as they age. They often appear on the back or chest, but can occur on any part of the body. (WebMD)</p></li>
<li><h4>Dermatofibroma(df)</h4><p>Dermatofibromas are harmless round, red-brownish skin growths that are most commonly found on the arms and legs. Dermatofibromas contains scar tissue and feel like hard lumps in the skin. (WebMD)</p></li>
<li><h4>Malignant Melanoma(mel)</h4><p>Melanoma, the most serious type of skin cancer, develops in the cells (melanocytes) that produce melanin — the pigment that gives your skin its color. Melanoma can also form in your eyes and, rarely, in internal organs, such as your intestines. (MayoClinic)</p></li>
<li><h4>Melanocytic Nevi(nv)</h4><p> Melanocytic nevi are benign neoplasms or hamartomas composed of melanocytes, the pigment-producing cells that constitutively colonize the epidermis. (eMedicine)</p></li>
<li><h4>Vascular Lesions(vasc)</h4><p>The most common vascular lesions in childhood are the hemangiomas of infancy and, in adulthood, the cherry angiomas. Hemangiomas and angiomas are benign proliferations of blood vessels. (Dermoscopedia)</p></li>
</ul>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.13.3/dist/tf.min.js"></script>
<script src="cancer_classes.js"></script>
<script src="predict.js"></script>
</body>
</html>