Hugging Face's logo

Spaces:
sadiqM
/
Nephroscreen
Sleeping

App Files Community
Nephroscreen
File size: 2,519 Bytes
dc3d345
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bf27edd
 
dc3d345
 
 
42ff43e
dc3d345
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>NephroScreen — Early CKD Screening</title>
  <meta name="description" content="Machine-learning screening tool that estimates chronic kidney disease risk from routine clinical lab values." />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="site-header">
    <div class="brand">
      <span class="logo">◈</span>
      <div>
        <h1>NephroScreen</h1>
        <p class="tagline">Early chronic kidney disease screening from routine labs</p>
      </div>
    </div>
    <div class="model-strip" id="modelStrip"><span class="muted">Loading model…</span></div>
  </header>

  <main>
    <section class="panel form-panel">
      <div class="panel-head">
        <h2>Patient measurements</h2>
        <button type="button" id="exampleBtn" class="btn ghost">Load example patient</button>
      </div>
      <p class="hint">All fields are optional — blanks are imputed by the model. Fill what you have.</p>

      <form id="predictForm">
        <h3 class="group-title">Laboratory values</h3>
        <div class="grid" id="numericFields"></div>

        <h3 class="group-title">Clinical indicators</h3>
        <div class="grid" id="categoricalFields"></div>

        <div class="actions">
          <button type="submit" class="btn primary" id="submitBtn">Estimate CKD risk</button>
          <button type="reset" class="btn ghost">Clear</button>
        </div>
      </form>
    </section>

    <section class="panel result-panel" id="resultPanel" hidden>
      <div class="panel-head"><h2>Screening result</h2></div>
      <div class="result-card" id="resultCard"></div>
      <div class="indicators" id="indicators"></div>
      <p class="disclaimer" id="disclaimer"></p>
    </section>
  </main>

  <footer class="site-footer">
    <p>
      <strong>NephroScreen</strong> · Random Forest on the UCI CKD dataset (400 patients).
      Educational portfolio project — not a medical device.
    </p>
    <p class="muted">
      A solo end-to-end applied ML case study by Sadiq Mansoor —
      model, API, and interface engineered from scratch.
    </p>
  </footer>

  <script src="config.js"></script>
  <script src="app.js"></script>
</body>
</html>