add Hypothesis generation

AstraZeneca · May 24, 2024 · 710c316 · 710c316
1 parent a0161f4
commit 710c316
Show file tree

Hide file tree

Showing 150 changed files with 166 additions and 11 deletions.
diff --git a/docs/chest_xray_cos/chest_xray_demo.png b/docs/chest_xray_cos/chest_xray_demo.png
diff --git a/docs/chest_xray_cos/cxrayl_0.jpg b/docs/chest_xray_cos/cxrayl_0.jpg
diff --git a/docs/chest_xray_cos/cxrayl_1.jpg b/docs/chest_xray_cos/cxrayl_1.jpg
diff --git a/docs/chest_xray_cos/cxrayl_10.jpg b/docs/chest_xray_cos/cxrayl_10.jpg
diff --git a/docs/chest_xray_cos/cxrayl_11.jpg b/docs/chest_xray_cos/cxrayl_11.jpg
diff --git a/docs/chest_xray_cos/cxrayl_12.jpg b/docs/chest_xray_cos/cxrayl_12.jpg
diff --git a/docs/chest_xray_cos/cxrayl_13.jpg b/docs/chest_xray_cos/cxrayl_13.jpg
diff --git a/docs/chest_xray_cos/cxrayl_14.jpg b/docs/chest_xray_cos/cxrayl_14.jpg
diff --git a/docs/chest_xray_cos/cxrayl_15.jpg b/docs/chest_xray_cos/cxrayl_15.jpg
diff --git a/docs/chest_xray_cos/cxrayl_16.jpg b/docs/chest_xray_cos/cxrayl_16.jpg
diff --git a/docs/chest_xray_cos/cxrayl_17.jpg b/docs/chest_xray_cos/cxrayl_17.jpg
diff --git a/docs/chest_xray_cos/cxrayl_18.jpg b/docs/chest_xray_cos/cxrayl_18.jpg
diff --git a/docs/chest_xray_cos/cxrayl_19.jpg b/docs/chest_xray_cos/cxrayl_19.jpg
diff --git a/docs/chest_xray_cos/cxrayl_2.jpg b/docs/chest_xray_cos/cxrayl_2.jpg
diff --git a/docs/chest_xray_cos/cxrayl_20.jpg b/docs/chest_xray_cos/cxrayl_20.jpg
diff --git a/docs/chest_xray_cos/cxrayl_21.jpg b/docs/chest_xray_cos/cxrayl_21.jpg
diff --git a/docs/chest_xray_cos/cxrayl_22.jpg b/docs/chest_xray_cos/cxrayl_22.jpg
diff --git a/docs/chest_xray_cos/cxrayl_23.jpg b/docs/chest_xray_cos/cxrayl_23.jpg
diff --git a/docs/chest_xray_cos/cxrayl_24.jpg b/docs/chest_xray_cos/cxrayl_24.jpg
diff --git a/docs/chest_xray_cos/cxrayl_25.jpg b/docs/chest_xray_cos/cxrayl_25.jpg
diff --git a/docs/chest_xray_cos/cxrayl_26.jpg b/docs/chest_xray_cos/cxrayl_26.jpg
diff --git a/docs/chest_xray_cos/cxrayl_27.jpg b/docs/chest_xray_cos/cxrayl_27.jpg
diff --git a/docs/chest_xray_cos/cxrayl_28.jpg b/docs/chest_xray_cos/cxrayl_28.jpg
diff --git a/docs/chest_xray_cos/cxrayl_29.jpg b/docs/chest_xray_cos/cxrayl_29.jpg
diff --git a/docs/chest_xray_cos/cxrayl_3.jpg b/docs/chest_xray_cos/cxrayl_3.jpg
diff --git a/docs/chest_xray_cos/cxrayl_30.jpg b/docs/chest_xray_cos/cxrayl_30.jpg
diff --git a/docs/chest_xray_cos/cxrayl_31.jpg b/docs/chest_xray_cos/cxrayl_31.jpg
diff --git a/docs/chest_xray_cos/cxrayl_32.jpg b/docs/chest_xray_cos/cxrayl_32.jpg
diff --git a/docs/chest_xray_cos/cxrayl_33.jpg b/docs/chest_xray_cos/cxrayl_33.jpg
diff --git a/docs/chest_xray_cos/cxrayl_34.jpg b/docs/chest_xray_cos/cxrayl_34.jpg
diff --git a/docs/chest_xray_cos/cxrayl_35.jpg b/docs/chest_xray_cos/cxrayl_35.jpg
diff --git a/docs/chest_xray_cos/cxrayl_36.jpg b/docs/chest_xray_cos/cxrayl_36.jpg
diff --git a/docs/chest_xray_cos/cxrayl_37.jpg b/docs/chest_xray_cos/cxrayl_37.jpg
diff --git a/docs/chest_xray_cos/cxrayl_38.jpg b/docs/chest_xray_cos/cxrayl_38.jpg
diff --git a/docs/chest_xray_cos/cxrayl_39.jpg b/docs/chest_xray_cos/cxrayl_39.jpg
diff --git a/docs/chest_xray_cos/cxrayl_4.jpg b/docs/chest_xray_cos/cxrayl_4.jpg
diff --git a/docs/chest_xray_cos/cxrayl_40.jpg b/docs/chest_xray_cos/cxrayl_40.jpg
diff --git a/docs/chest_xray_cos/cxrayl_41.jpg b/docs/chest_xray_cos/cxrayl_41.jpg
diff --git a/docs/chest_xray_cos/cxrayl_42.jpg b/docs/chest_xray_cos/cxrayl_42.jpg
diff --git a/docs/chest_xray_cos/cxrayl_43.jpg b/docs/chest_xray_cos/cxrayl_43.jpg
diff --git a/docs/chest_xray_cos/cxrayl_44.jpg b/docs/chest_xray_cos/cxrayl_44.jpg
diff --git a/docs/chest_xray_cos/cxrayl_45.jpg b/docs/chest_xray_cos/cxrayl_45.jpg
diff --git a/docs/chest_xray_cos/cxrayl_46.jpg b/docs/chest_xray_cos/cxrayl_46.jpg
diff --git a/docs/chest_xray_cos/cxrayl_5.jpg b/docs/chest_xray_cos/cxrayl_5.jpg
diff --git a/docs/chest_xray_cos/cxrayl_6.jpg b/docs/chest_xray_cos/cxrayl_6.jpg
diff --git a/docs/chest_xray_cos/cxrayl_7.jpg b/docs/chest_xray_cos/cxrayl_7.jpg
diff --git a/docs/chest_xray_cos/cxrayl_8.jpg b/docs/chest_xray_cos/cxrayl_8.jpg
diff --git a/docs/chest_xray_cos/cxrayl_9.jpg b/docs/chest_xray_cos/cxrayl_9.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_0.jpg b/docs/melanoma_skin_3d/ms_3d_0.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_1.jpg b/docs/melanoma_skin_3d/ms_3d_1.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_10.jpg b/docs/melanoma_skin_3d/ms_3d_10.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_11.jpg b/docs/melanoma_skin_3d/ms_3d_11.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_12.jpg b/docs/melanoma_skin_3d/ms_3d_12.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_13.jpg b/docs/melanoma_skin_3d/ms_3d_13.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_14.jpg b/docs/melanoma_skin_3d/ms_3d_14.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_15.jpg b/docs/melanoma_skin_3d/ms_3d_15.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_16.jpg b/docs/melanoma_skin_3d/ms_3d_16.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_17.jpg b/docs/melanoma_skin_3d/ms_3d_17.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_18.jpg b/docs/melanoma_skin_3d/ms_3d_18.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_19.jpg b/docs/melanoma_skin_3d/ms_3d_19.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_2.jpg b/docs/melanoma_skin_3d/ms_3d_2.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_20.jpg b/docs/melanoma_skin_3d/ms_3d_20.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_21.jpg b/docs/melanoma_skin_3d/ms_3d_21.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_22.jpg b/docs/melanoma_skin_3d/ms_3d_22.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_23.jpg b/docs/melanoma_skin_3d/ms_3d_23.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_24.jpg b/docs/melanoma_skin_3d/ms_3d_24.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_25.jpg b/docs/melanoma_skin_3d/ms_3d_25.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_26.jpg b/docs/melanoma_skin_3d/ms_3d_26.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_27.jpg b/docs/melanoma_skin_3d/ms_3d_27.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_28.jpg b/docs/melanoma_skin_3d/ms_3d_28.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_29.jpg b/docs/melanoma_skin_3d/ms_3d_29.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_3.jpg b/docs/melanoma_skin_3d/ms_3d_3.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_30.jpg b/docs/melanoma_skin_3d/ms_3d_30.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_31.jpg b/docs/melanoma_skin_3d/ms_3d_31.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_32.jpg b/docs/melanoma_skin_3d/ms_3d_32.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_33.jpg b/docs/melanoma_skin_3d/ms_3d_33.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_34.jpg b/docs/melanoma_skin_3d/ms_3d_34.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_35.jpg b/docs/melanoma_skin_3d/ms_3d_35.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_36.jpg b/docs/melanoma_skin_3d/ms_3d_36.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_37.jpg b/docs/melanoma_skin_3d/ms_3d_37.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_38.jpg b/docs/melanoma_skin_3d/ms_3d_38.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_39.jpg b/docs/melanoma_skin_3d/ms_3d_39.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_4.jpg b/docs/melanoma_skin_3d/ms_3d_4.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_40.jpg b/docs/melanoma_skin_3d/ms_3d_40.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_41.jpg b/docs/melanoma_skin_3d/ms_3d_41.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_42.jpg b/docs/melanoma_skin_3d/ms_3d_42.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_43.jpg b/docs/melanoma_skin_3d/ms_3d_43.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_44.jpg b/docs/melanoma_skin_3d/ms_3d_44.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_45.jpg b/docs/melanoma_skin_3d/ms_3d_45.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_46.jpg b/docs/melanoma_skin_3d/ms_3d_46.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_47.jpg b/docs/melanoma_skin_3d/ms_3d_47.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_48.jpg b/docs/melanoma_skin_3d/ms_3d_48.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_5.jpg b/docs/melanoma_skin_3d/ms_3d_5.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_6.jpg b/docs/melanoma_skin_3d/ms_3d_6.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_7.jpg b/docs/melanoma_skin_3d/ms_3d_7.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_8.jpg b/docs/melanoma_skin_3d/ms_3d_8.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_9.jpg b/docs/melanoma_skin_3d/ms_3d_9.jpg
diff --git a/docs/melanoma_skin_3d/ms_3d_demo.png b/docs/melanoma_skin_3d/ms_3d_demo.png
diff --git a/docs/melanoma_skin_real/ms_real_0.jpg b/docs/melanoma_skin_real/ms_real_0.jpg
diff --git a/docs/melanoma_skin_real/ms_real_1.jpg b/docs/melanoma_skin_real/ms_real_1.jpg
diff --git a/docs/melanoma_skin_real/ms_real_10.jpg b/docs/melanoma_skin_real/ms_real_10.jpg
diff --git a/docs/melanoma_skin_real/ms_real_11.jpg b/docs/melanoma_skin_real/ms_real_11.jpg
diff --git a/docs/melanoma_skin_real/ms_real_12.jpg b/docs/melanoma_skin_real/ms_real_12.jpg
diff --git a/docs/melanoma_skin_real/ms_real_13.jpg b/docs/melanoma_skin_real/ms_real_13.jpg
diff --git a/docs/melanoma_skin_real/ms_real_14.jpg b/docs/melanoma_skin_real/ms_real_14.jpg
diff --git a/docs/melanoma_skin_real/ms_real_15.jpg b/docs/melanoma_skin_real/ms_real_15.jpg
diff --git a/docs/melanoma_skin_real/ms_real_16.jpg b/docs/melanoma_skin_real/ms_real_16.jpg
diff --git a/docs/melanoma_skin_real/ms_real_17.jpg b/docs/melanoma_skin_real/ms_real_17.jpg
diff --git a/docs/melanoma_skin_real/ms_real_18.jpg b/docs/melanoma_skin_real/ms_real_18.jpg
diff --git a/docs/melanoma_skin_real/ms_real_19.jpg b/docs/melanoma_skin_real/ms_real_19.jpg
diff --git a/docs/melanoma_skin_real/ms_real_2.jpg b/docs/melanoma_skin_real/ms_real_2.jpg
diff --git a/docs/melanoma_skin_real/ms_real_20.jpg b/docs/melanoma_skin_real/ms_real_20.jpg
diff --git a/docs/melanoma_skin_real/ms_real_21.jpg b/docs/melanoma_skin_real/ms_real_21.jpg
diff --git a/docs/melanoma_skin_real/ms_real_22.jpg b/docs/melanoma_skin_real/ms_real_22.jpg
diff --git a/docs/melanoma_skin_real/ms_real_23.jpg b/docs/melanoma_skin_real/ms_real_23.jpg
diff --git a/docs/melanoma_skin_real/ms_real_24.jpg b/docs/melanoma_skin_real/ms_real_24.jpg
diff --git a/docs/melanoma_skin_real/ms_real_25.jpg b/docs/melanoma_skin_real/ms_real_25.jpg
diff --git a/docs/melanoma_skin_real/ms_real_26.jpg b/docs/melanoma_skin_real/ms_real_26.jpg
diff --git a/docs/melanoma_skin_real/ms_real_27.jpg b/docs/melanoma_skin_real/ms_real_27.jpg
diff --git a/docs/melanoma_skin_real/ms_real_28.jpg b/docs/melanoma_skin_real/ms_real_28.jpg
diff --git a/docs/melanoma_skin_real/ms_real_29.jpg b/docs/melanoma_skin_real/ms_real_29.jpg
diff --git a/docs/melanoma_skin_real/ms_real_3.jpg b/docs/melanoma_skin_real/ms_real_3.jpg
diff --git a/docs/melanoma_skin_real/ms_real_30.jpg b/docs/melanoma_skin_real/ms_real_30.jpg
diff --git a/docs/melanoma_skin_real/ms_real_31.jpg b/docs/melanoma_skin_real/ms_real_31.jpg
diff --git a/docs/melanoma_skin_real/ms_real_32.jpg b/docs/melanoma_skin_real/ms_real_32.jpg
diff --git a/docs/melanoma_skin_real/ms_real_33.jpg b/docs/melanoma_skin_real/ms_real_33.jpg
diff --git a/docs/melanoma_skin_real/ms_real_34.jpg b/docs/melanoma_skin_real/ms_real_34.jpg
diff --git a/docs/melanoma_skin_real/ms_real_35.jpg b/docs/melanoma_skin_real/ms_real_35.jpg
diff --git a/docs/melanoma_skin_real/ms_real_36.jpg b/docs/melanoma_skin_real/ms_real_36.jpg
diff --git a/docs/melanoma_skin_real/ms_real_37.jpg b/docs/melanoma_skin_real/ms_real_37.jpg
diff --git a/docs/melanoma_skin_real/ms_real_38.jpg b/docs/melanoma_skin_real/ms_real_38.jpg
diff --git a/docs/melanoma_skin_real/ms_real_39.jpg b/docs/melanoma_skin_real/ms_real_39.jpg
diff --git a/docs/melanoma_skin_real/ms_real_4.jpg b/docs/melanoma_skin_real/ms_real_4.jpg
diff --git a/docs/melanoma_skin_real/ms_real_40.jpg b/docs/melanoma_skin_real/ms_real_40.jpg
diff --git a/docs/melanoma_skin_real/ms_real_41.jpg b/docs/melanoma_skin_real/ms_real_41.jpg
diff --git a/docs/melanoma_skin_real/ms_real_42.jpg b/docs/melanoma_skin_real/ms_real_42.jpg
diff --git a/docs/melanoma_skin_real/ms_real_43.jpg b/docs/melanoma_skin_real/ms_real_43.jpg
diff --git a/docs/melanoma_skin_real/ms_real_44.jpg b/docs/melanoma_skin_real/ms_real_44.jpg
diff --git a/docs/melanoma_skin_real/ms_real_45.jpg b/docs/melanoma_skin_real/ms_real_45.jpg
diff --git a/docs/melanoma_skin_real/ms_real_46.jpg b/docs/melanoma_skin_real/ms_real_46.jpg
diff --git a/docs/melanoma_skin_real/ms_real_47.jpg b/docs/melanoma_skin_real/ms_real_47.jpg
diff --git a/docs/melanoma_skin_real/ms_real_5.jpg b/docs/melanoma_skin_real/ms_real_5.jpg
diff --git a/docs/melanoma_skin_real/ms_real_6.jpg b/docs/melanoma_skin_real/ms_real_6.jpg
diff --git a/docs/melanoma_skin_real/ms_real_7.jpg b/docs/melanoma_skin_real/ms_real_7.jpg
diff --git a/docs/melanoma_skin_real/ms_real_8.jpg b/docs/melanoma_skin_real/ms_real_8.jpg
diff --git a/docs/melanoma_skin_real/ms_real_9.jpg b/docs/melanoma_skin_real/ms_real_9.jpg
diff --git a/docs/melanoma_skin_real/ms_real_demo.png b/docs/melanoma_skin_real/ms_real_demo.png
diff --git a/index.html b/index.html
@@ -23,7 +23,8 @@ <h1>An Image is Worth Multiple Words: Learning Object Level Concepts using Multi
   <font size="+2">
         <p style="text-align: center;">
           <a href="https://arxiv.org/abs/2310.12274" target="_blank">Paper</a> &nbsp;&nbsp;&nbsp;&nbsp;
-          <a href="https://github.com/lxasqjc/MCPL" target="_blank">Code</a>
+          <a href="https://github.com/AstraZeneca/MCPL/tree/master" target="_blank">Code</a> &nbsp;&nbsp;&nbsp;&nbsp;
+          <a href="https://github.com/AstraZeneca/MCPL/tree/master/dataset" target="_blank">Dataset</a>
         </p>
   </font>
   <br>
@@ -124,7 +125,44 @@ <h3>chest X-ray example</h3>
     </div>
   </div>
 </div>
-
+
+<div class="content">
+  <h2>Hypothesis generation of disease progression</h2>
+  <p>Our method can also help experts/non-experts learn unfamiliar concepts from picture(s) and explore their impacts.</p>
+    <div class="skin3d-main">
+         <img class="dev-img-demo" id="skin3d-img-ori" src="./docs/melanoma_skin_3d/ms_3d_demo.png">
+         <img class="dev-img" id="skin3d-img" src="./docs/melanoma_skin_3d/ms_3d_25.jpg">
+         <div class="dev-text">
+
+            <span style="display: block; text-align: center">Human: "how <span id ="skincancer" style="background-color: #f88000;">skin cancer</span> may develop?" </span><br>
+            <input type="range" min="1" max="48" value="26" class="slider" id="range_skin3d">
+
+            </div>
+    </div>
+  <br>
+  <div class="skinreal-main">
+      <img class="dev-img-demo" id="skinreal-img-ori" src="./docs/melanoma_skin_real/ms_real_demo.png">
+      <img class="dev-img" id="skinreal-img" src="./docs/melanoma_skin_real/ms_real_25.jpg">
+      <div class="dev-text">
+
+        <span style="display: block; text-align: center">Human: "how <span id ="skincancer_real" style="background-color: #f88000;">skin cancer</span> may develop?" </span><br>
+        <input type="range" min="0" max="47" value="25" class="slider2" id="range_skinreal">
+
+        </div>
+  </div>
+  <br>
+  <div class="cxray-main">
+      <img class="dev-img-demo" id="cxray-img-ori" src="./docs/chest_xray_cos/chest_xray_demo.png">
+      <img class="dev-img" id="cxray-img" src="./docs/chest_xray_cos/cxrayl_25.jpg">
+      <div class="dev-text">
+
+        <span style="display: block; text-align: center">Human: "how <span id ="cxray_real" style="background-color: #f88000;">lung consolidation</span> may develop?" </span><br>
+        <input type="range" min="0" max="46" value="25" class="slider2" id="range_cxray">
+
+        </div>
+  </div>
+  <br>
+</div>
 
 <div class="content">
   <h2>Method overview</h2>

diff --git a/jscript.js b/jscript.js
@@ -191,12 +191,12 @@ function modifyImg_ms(i){
     return inner_
 }
 
-function set_alpha(slider, fluffy){
+function set_alpha(slider, skincancer){
     let alpha = 1 - (slider.value - 16) / 52;
     let red = Math.round(248 + 7 * alpha);
     let green = Math.round(128 + 127 * alpha);
     let blue = Math.round(255 * alpha);
-    fluffy.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
+    skincancer.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
 }
 
 function init() {
@@ -254,17 +254,41 @@ function init() {
     }
 
 
-    let slider = document.getElementById("range_bunny");
-    let image_bunny = document.getElementById("bunny-img");
-    let fluffy  = document.getElementById("fluffy");
-    set_alpha(slider, fluffy)
+    let slider = document.getElementById("range_skin3d");
+    let image_skin3d = document.getElementById("skin3d-img");
+    let skincancer  = document.getElementById("skincancer");
+    set_alpha(slider, skincancer)
     slider.oninput = function() {
         // 248, 128, 0
-     image_bunny.src = "./docs/teddybear_timesquare/teddybear_timesquare_" + String(slider.value).padStart(2, '0') + ".png";
-     set_alpha(slider, fluffy)
+     image_skin3d.src = "./docs/melanoma_skin_3d/ms_3d_" + String(slider.value) + ".jpg";
+     set_alpha(slider, skincancer)
 
     }
 
+    let slider2 = document.getElementById("range_skinreal");
+    let image_skinreal = document.getElementById("skinreal-img");
+    let skincancer_real  = document.getElementById("skincancer_real");
+    set_alpha(slider2, skincancer_real)
+    slider2.oninput = function() {
+        // 248, 128, 0
+        image_skinreal.src = "./docs/melanoma_skin_real/ms_real_" + String(slider2.value) + ".jpg";
+     set_alpha(slider2, skincancer_real)
+
+    }
+
+    let slider3 = document.getElementById("range_cxray");
+    let image_cxray = document.getElementById("cxray-img");
+    let cxray_real  = document.getElementById("cxray_real");
+    set_alpha(slider3, cxray_real)
+    slider3.oninput = function() {
+        // 248, 128, 0
+        image_cxray.src = "./docs/chest_xray_cos/cxrayl_" + String(slider3.value) + ".jpg";
+     set_alpha(slider3, cxray_real)
+
+    }
+
+
+
 
 }
 document.addEventListener("DOMContentLoaded", () => {

diff --git a/style.css b/style.css
@@ -267,6 +267,36 @@ p code {
   margin-right: 2.5%;
 }
 
+.dev-img-demo {
+  /*vertical-align: middle;*/
+   /*vertical-align: middle;*/
+  width: 40%;
+  /*flex-basis: 40%*/
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.dev-img {
+  /*vertical-align: middle;*/
+   /*vertical-align: middle;*/
+   width: 25%;
+  /*flex-basis: 40%*/
+  margin-left: 2.5%;
+  margin-right: auto;
+}
+
+.dev-text {
+  font-style: italic;
+  float: right;
+  font-size: 24px;
+  width: 25%;
+  margin-left: 0%;
+  margin-right: auto;
+  align-items: center; /* Centers items vertically */
+  margin-top: 5%;
+}
+
+
 .intro-text {
   float: right;
   font-size: 18px;
@@ -474,4 +504,67 @@ p code {
   height: 25px;
   background: #04AA6D;
   cursor: pointer;
-}
+}
+
+.slider2 {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 25px;
+  background: #d3d3d3;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+}
+
+.slider2:hover {
+  opacity: 1;
+}
+
+.slider2::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  background: #04AA6D;
+  cursor: pointer;
+}
+
+.slider2::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  background: #04AA6D;
+  cursor: pointer;
+}
+
+.slider3 {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 25px;
+  background: #d3d3d3;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+}
+
+.slider3:hover {
+  opacity: 1;
+}
+
+.slider3::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  background: #04AA6D;
+  cursor: pointer;
+}
+
+.slider3::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  background: #04AA6D;
+  cursor: pointer;
+}
+