Hugging Face's logo

Spaces:
nomypython
/
the-cognitive-architect
Running

App Files Community
nomypython commited on
Commit
dd7cafb
·
verified ·
1 Parent(s): 40261de

improve: <!DOCTYPE html>

Browse files

<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VistAI - Medical Imaging AI</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<!-- Header -->
<header class="header">
<div class="header-content">
<div class="header-left">
<h1 class="header-title">VistAI</h1>
<p class="header-subtitle">Knowledge-Distilled AI for Medical Imaging</p>
</div>
<div class="offline-badge">
<span class="badge-icon">✔</span>
<span class="badge-text">Running Offline on Jetson Nano</span>
</div>
</div>
</header>

<!-- Main Container -->
<main class="container">
<!-- Left Column: Image Upload & Preview -->
<section class="left-panel">
<div class="card">
<h2 class="section-title">Image Upload</h2>

<div class="upload-section">
<div class="upload-icon">🏥</div>
<input type="file" id="imageInput" accept="image/png,image/jpeg,image/jpg" style="display: none;">
<button class="btn btn-primary" id="uploadBtn">
<span class="btn-icon">📁</span>
Select X-Ray Image
</button>
<p class="help-text">Supported formats: PNG, JPG, JPEG (Max 10MB)</p>
</div>

<div class="image-preview-container" id="previewContainer" style="display: none;">
<h3 class="subsection-title">Image Preview</h3>
<div class="image-preview">
<img id="imagePreview" src="" alt="X-Ray Preview">
</div>
<p class="image-info" id="imageInfo"></p>
</div>

<div class="action-section" id="actionSection" style="display: none;">
<button class="btn btn-success btn-large" id="analyzeBtn" disabled>
<span class="btn-icon">⚡</span>
Run Analysis
</button>
</div>

<!-- Loading Indicator -->
<div class="loading-overlay" id="loadingOverlay" style="display: none;">
<div class="spinner"></div>
<p class="loading-text">Analyzing X-ray… please wait.</p>
</div>
</div>
</section>

<!-- Right Column: Results & VQA -->
<section class="right-panel">
<!-- Results Panel -->
<div class="card">
<h2 class="section-title">Analysis Results</h2>

<div class="results-container" id="resultsContainer">
<div class="empty-state">
<div class="empty-icon">📊</div>
<p class="empty-title">No Analysis Yet</p>
<p class="empty-subtitle">Upload an X-ray image and click "Run Analysis" to begin</p>
</div>
</div>

<div class="results-content" id="resultsContent" style="display: none;">
<!-- Classification and Segmentation Grid -->
<div class="results-grid">
<!-- Classification Result -->
<div class="result-section">
<h3 class="subsection-title">Classification</h3>
<div class="result-box" id="classificationResult">
<p class="result-text">Awaiting analysis...</p>
</div>
</div>

<!-- Segmentation Result -->
<div class="result-section">
<h3 class="subsection-title">Segmentation Overlay</h3>
<div class="result-box segmentation-box" id="segmentationResult">
<div class="segmentation-placeholder">
<p class="result-text">Segmentation map will appear here</p>
</div>
</div>
</div>
</div>

<!-- Report -->
<div class="result-section">
<h3 class="subsection-title">Detailed Report</h3>
<div class="result-box report-box" id="reportResult">
<p class="result-text">Awaiting analysis...</p>
</div>
</div>
</div>
</div>

<!-- VQA Panel -->
<div class="card">
<div class="vqa-header">
<h2 class="section-title">Visual Question Answering</h2>
<div class="language-toggle">
<button class="lang-btn active" id="langEnBtn" data-lang="en">English</button>
<button class="lang-btn" id="langUrBtn" data-lang="ur">اردو</button>
</div>
</div>

<div class="vqa-section">
<label for="vqaInput" class="input-label">Ask a Question</label>
<textarea id="vqaInput" class="vqa-input"
placeholder="e.g., What is the condition shown in this X-ray?" rows="2"></textarea>

<button class="btn btn-secondary" id="askBtn">
<span class="btn-icon">💬</span>
Ask Question
</button>

<div class="answer-section" id="answerSection" style="display: none;">
<h3 class="subsection-title">AI Answer</h3>
<div class="answer-box" id="answerBox">
<p class="answer-text" id="answerText"></p>
</div>
</div>
</div>
</div>
</section>
</main>

<!-- Footer -->
<footer class="footer">
<p>VistAI v1.0 | Offline Medical Imaging AI | NVIDIA Jetson Nano Compatible</p>
</footer>

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

</html>

Files changed (2) hide show
  1. components/medical-navbar.js +97 -0
  2. style.css +178 -17
components/medical-navbar.js ADDED
@@ -0,0 +1,97 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class MedicalNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ background: #2b5876;
9
+ color: white;
10
+ padding: 1rem 2rem;
11
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
12
+ position: sticky;
13
+ top: 0;
14
+ z-index: 1000;
15
+ }
16
+ nav {
17
+ display: flex;
18
+ justify-content: space-between;
19
+ align-items: center;
20
+ max-width: 1400px;
21
+ margin: 0 auto;
22
+ }
23
+ .logo {
24
+ font-size: 1.5rem;
25
+ font-weight: 600;
26
+ color: white;
27
+ text-decoration: none;
28
+ display: flex;
29
+ align-items: center;
30
+ gap: 0.5rem;
31
+ }
32
+ .logo-icon {
33
+ font-size: 1.8rem;
34
+ }
35
+ .nav-links {
36
+ display: flex;
37
+ gap: 2rem;
38
+ }
39
+ .nav-links a {
40
+ color: rgba(255,255,255,0.9);
41
+ text-decoration: none;
42
+ font-weight: 500;
43
+ transition: all 0.3s;
44
+ padding: 0.5rem 0;
45
+ }
46
+ .nav-links a:hover {
47
+ color: white;
48
+ border-bottom: 2px solid #4ecca3;
49
+ }
50
+ .active {
51
+ color: white !important;
52
+ border-bottom: 2px solid #4ecca3;
53
+ }
54
+ .badge {
55
+ background: rgba(255,255,255,0.1);
56
+ padding: 0.3rem 0.8rem;
57
+ border-radius: 20px;
58
+ font-size: 0.9rem;
59
+ display: flex;
60
+ align-items: center;
61
+ gap: 0.5rem;
62
+ }
63
+ .badge-icon {
64
+ color: #4ecca3;
65
+ }
66
+ @media (max-width: 768px) {
67
+ nav {
68
+ flex-direction: column;
69
+ gap: 1rem;
70
+ }
71
+ .nav-links {
72
+ width: 100%;
73
+ justify-content: space-around;
74
+ flex-wrap: wrap;
75
+ }
76
+ }
77
+ </style>
78
+ <nav>
79
+ <a href="/" class="logo">
80
+ <span class="logo-icon">🏥</span>
81
+ <span>VistAI</span>
82
+ </a>
83
+ <div class="nav-links">
84
+ <a href="/" class="active">Analyzer</a>
85
+ <a href="/research.html">Research</a>
86
+ <a href="/models.html">Models</a>
87
+ <a href="/about.html">About</a>
88
+ <div class="badge">
89
+ <span class="badge-icon">✔</span>
90
+ <span>Jetson Nano</span>
91
+ </div>
92
+ </div>
93
+ </nav>
94
+ `;
95
+ }
96
+ }
97
+ customElements.define('medical-navbar', MedicalNavbar);
style.css CHANGED
@@ -1,28 +1,189 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
28
  }
 
1
+
2
+ :root {
3
+ --primary-color: #2b5876;
4
+ --secondary-color: #4ecca3;
5
+ --accent-color: #4e95f7;
6
+ --dark-text: #2d3748;
7
+ --light-text: #f8f9fa;
8
+ --border-radius: 8px;
9
+ --box-shadow: 0 4px 6px rgba(0,0,0,0.1);
10
+ --transition: all 0.3s ease;
11
+ }
12
+
13
  body {
14
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
15
+ line-height: 1.6;
16
+ color: var(--dark-text);
17
+ background-color: #f5f7fa;
18
+ margin: 0;
19
+ padding: 0;
20
  }
21
 
22
+ /* Layout */
23
+ .container {
24
+ display: grid;
25
+ grid-template-columns: 1fr 1.5fr;
26
+ gap: 2rem;
27
+ max-width: 1400px;
28
+ margin: 2rem auto;
29
+ padding: 0 2rem;
30
  }
31
 
32
+ .header {
33
+ background: linear-gradient(135deg, #2b5876 0%, #4e95f7 100%);
34
+ color: white;
35
+ padding: 2rem;
36
+ margin-bottom: 2rem;
37
  }
38
 
39
+ .header-content {
40
+ max-width: 1400px;
41
+ margin: 0 auto;
42
+ display: flex;
43
+ justify-content: space-between;
44
+ align-items: center;
45
+ }
46
+
47
+ .header-title {
48
+ font-size: 2rem;
49
+ margin: 0;
50
+ font-weight: 700;
51
+ }
52
+
53
+ .header-subtitle {
54
+ margin: 0.5rem 0 0;
55
+ opacity: 0.9;
56
+ }
57
+
58
+ /* Cards */
59
  .card {
60
+ background: white;
61
+ border-radius: var(--border-radius);
62
+ box-shadow: var(--box-shadow);
63
+ padding: 1.5rem;
64
+ margin-bottom: 2rem;
65
+ }
66
+
67
+ .section-title {
68
+ font-size: 1.3rem;
69
+ margin-top: 0;
70
+ margin-bottom: 1.5rem;
71
+ color: var(--primary-color);
72
+ border-bottom: 2px solid var(--secondary-color);
73
+ padding-bottom: 0.5rem;
74
+ }
75
+
76
+ /* Buttons */
77
+ .btn {
78
+ display: inline-flex;
79
+ align-items: center;
80
+ gap: 0.5rem;
81
+ padding: 0.75rem 1.5rem;
82
+ border-radius: var(--border-radius);
83
+ border: none;
84
+ font-weight: 500;
85
+ cursor: pointer;
86
+ transition: var(--transition);
87
+ }
88
+
89
+ .btn-primary {
90
+ background: var(--primary-color);
91
+ color: white;
92
+ }
93
+
94
+ .btn-primary:hover {
95
+ background: #1a3a4f;
96
+ transform: translateY(-2px);
97
+ }
98
+
99
+ .btn-success {
100
+ background: var(--secondary-color);
101
+ color: white;
102
+ }
103
+
104
+ .btn-success:hover {
105
+ background: #3aa789;
106
+ transform: translateY(-2px);
107
+ }
108
+
109
+ .btn-secondary {
110
+ background: #e2e8f0;
111
+ color: var(--dark-text);
112
+ }
113
+
114
+ .btn-secondary:hover {
115
+ background: #cbd5e0;
116
+ }
117
+
118
+ .btn-icon {
119
+ font-size: 1.2rem;
120
+ }
121
+
122
+ /* Image Preview */
123
+ .image-preview-container {
124
+ margin: 1.5rem 0;
125
+ }
126
+
127
+ .image-preview {
128
+ border: 1px solid #e2e8f0;
129
+ border-radius: var(--border-radius);
130
+ padding: 0.5rem;
131
+ background: #f8fafc;
132
+ display: flex;
133
+ justify-content: center;
134
+ align-items: center;
135
+ height: 300px;
136
+ overflow: hidden;
137
+ }
138
+
139
+ .image-preview img {
140
+ max-width: 100%;
141
+ max-height: 100%;
142
+ object-fit: contain;
143
+ }
144
+
145
+ /* Results */
146
+ .results-grid {
147
+ display: grid;
148
+ grid-template-columns: 1fr 1fr;
149
+ gap: 1.5rem;
150
+ margin-bottom: 1.5rem;
151
+ }
152
+
153
+ .result-section {
154
+ margin-bottom: 1.5rem;
155
+ }
156
+
157
+ .subsection-title {
158
+ font-size: 1.1rem;
159
+ margin-top: 0;
160
+ color: var(--primary-color);
161
+ }
162
+
163
+ .result-box {
164
+ background: #f8fafc;
165
+ border-radius: var(--border-radius);
166
+ padding: 1rem;
167
+ min-height: 150px;
168
+ }
169
+
170
+ /* Footer */
171
+ .footer {
172
+ text-align: center;
173
+ padding: 1.5rem;
174
+ background: var(--primary-color);
175
+ color: white;
176
+ margin-top: 2rem;
177
  }
178
 
179
+ /* Responsive */
180
+ @media (max-width: 768px) {
181
+ .container {
182
+ grid-template-columns: 1fr;
183
+ padding: 0 1rem;
184
+ }
185
+
186
+ .results-grid {
187
+ grid-template-columns: 1fr;
188
+ }
189
  }