Skip to content

Commit e5969a3

Browse files
shubhang98shubhang98
authored
Add files via upload
0 parents  commit e5969a3

File tree

1 file changed

+275
-0
lines changed

1 file changed

+275
-0
lines changed

‎index_2.html

Lines changed: 275 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,275 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Disease Q&A Knowledge Card</title>
7+
<style>
8+
/* Base styling */
9+
body {
10+
font-family: Helvetica, Arial, sans-serif;
11+
background-color: #F7F7F8; /* Light background */
12+
color: #333;
13+
margin: 0;
14+
padding: 0;
15+
}
16+
.container {
17+
max-width: 800px;
18+
margin: 2rem auto;
19+
padding: 1rem;
20+
}
21+
h1 {
22+
text-align: center;
23+
color: #111;
24+
margin-bottom: 1rem;
25+
}
26+
/* Form styling */
27+
#qaForm {
28+
display: flex;
29+
justify-content: center;
30+
margin-bottom: 1.5rem;
31+
}
32+
#question {
33+
flex: 1;
34+
padding: 0.75rem;
35+
font-size: 1.2rem;
36+
border: 1px solid #ccc;
37+
border-radius: 4px;
38+
margin-right: 0.5rem;
39+
}
40+
#askButton {
41+
padding: 0.75rem 1rem;
42+
font-size: 1.2rem;
43+
background-color: #10a37f; /* Accent color */
44+
border: none;
45+
color: #fff;
46+
border-radius: 4px;
47+
cursor: pointer;
48+
transition: background-color 0.2s ease;
49+
}
50+
#askButton:hover {
51+
background-color: #0d8a66;
52+
}
53+
/* Knowledge card and citations styling */
54+
#knowledgeCard, #citationsCard {
55+
background: #fff;
56+
border: 1px solid #e0e0e0;
57+
border-radius: 8px;
58+
padding: 1rem;
59+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
60+
margin-top: 1.5rem;
61+
display: none;
62+
}
63+
table {
64+
width: 100%;
65+
border-collapse: collapse;
66+
}
67+
th, td {
68+
text-align: left;
69+
padding: 0.75rem;
70+
border-bottom: 1px solid #e0e0e0;
71+
}
72+
th {
73+
background-color: #fafafa;
74+
width: 25%;
75+
}
76+
/* Citations list styling */
77+
#citationsList {
78+
list-style-type: disc;
79+
padding-left: 20px;
80+
}
81+
#citationsList li {
82+
margin-bottom: 0.5rem;
83+
}
84+
#citationsList a {
85+
color: #10a37f;
86+
text-decoration: none;
87+
}
88+
#citationsList a:hover {
89+
text-decoration: underline;
90+
}
91+
/* Loading overlay styling */
92+
#loadingOverlay {
93+
position: fixed;
94+
top: 0;
95+
left: 0;
96+
width: 100%;
97+
height: 100%;
98+
background: rgba(255, 255, 255, 0.8);
99+
display: flex;
100+
justify-content: center;
101+
align-items: center;
102+
z-index: 9999;
103+
display: none;
104+
}
105+
.spinner {
106+
border: 8px solid #f3f3f3;
107+
border-top: 8px solid #10a37f;
108+
border-radius: 50%;
109+
width: 60px;
110+
height: 60px;
111+
animation: spin 1s linear infinite;
112+
}
113+
@keyframes spin {
114+
0% { transform: rotate(0deg); }
115+
100% { transform: rotate(360deg); }
116+
}
117+
</style>
118+
</head>
119+
<body>
120+
<!-- Loading Overlay -->
121+
<div id="loadingOverlay">
122+
<div class="spinner"></div>
123+
</div>
124+
125+
<div class="container">
126+
<h1>Disease Q&A</h1>
127+
<form id="qaForm">
128+
<input type="text" id="question" placeholder="Ask a question about a disease (e.g., 'What is stroke?')" required>
129+
<button type="submit" id="askButton">Ask</button>
130+
</form>
131+
132+
<!-- Knowledge card container -->
133+
<div id="knowledgeCard">
134+
<h2>Knowledge Card</h2>
135+
<table>
136+
<tr>
137+
<th>Overview</th>
138+
<td id="overview"></td>
139+
</tr>
140+
<tr>
141+
<th>Causes</th>
142+
<td id="causes"></td>
143+
</tr>
144+
<tr>
145+
<th>Treatments</th>
146+
<td id="treatments"></td>
147+
</tr>
148+
</table>
149+
</div>
150+
151+
<!-- Citations container -->
152+
<div id="citationsCard">
153+
<h2>Citations</h2>
154+
<ul id="citationsList"></ul>
155+
</div>
156+
</div>
157+
158+
<script>
159+
// Replace with your actual API key.
160+
const API_KEY = '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';
161+
// API endpoint as per Perplexity's documentation.
162+
const API_ENDPOINT = 'https://api.perplexity.ai/chat/completions';
163+
164+
async function askDiseaseQuestion(question) {
165+
// Construct a prompt instructing the API to output only valid JSON
166+
// with exactly four keys: "overview", "causes", "treatments", and "citations".
167+
const prompt = `
168+
You are a medical assistant. Please answer the following question about a disease and provide only valid JSON output.
169+
The JSON object must have exactly four keys: "overview", "causes", "treatments", and "citations".
170+
For example:
171+
{
172+
"overview": "A brief description of the disease.",
173+
"causes": "The causes of the disease.",
174+
"treatments": "Possible treatments for the disease.",
175+
"citations": ["https://example.com/citation1", "https://example.com/citation2"]
176+
}
177+
Now answer this question:
178+
"${question}"
179+
`.trim();
180+
181+
// Build the payload.
182+
const payload = {
183+
model: 'sonar-pro',
184+
messages: [
185+
{ role: 'user', content: prompt }
186+
]
187+
};
188+
189+
try {
190+
const response = await fetch(API_ENDPOINT, {
191+
method: 'POST',
192+
headers: {
193+
'Authorization': `Bearer ${API_KEY}`,
194+
'Content-Type': 'application/json'
195+
},
196+
body: JSON.stringify(payload)
197+
});
198+
199+
if (!response.ok) {
200+
throw new Error(`Error: ${response.status} - ${response.statusText}`);
201+
}
202+
203+
const result = await response.json();
204+
205+
// The answer is expected in the first choice's message content.
206+
if (result.choices && result.choices.length > 0) {
207+
const content = result.choices[0].message.content;
208+
try {
209+
const structuredOutput = JSON.parse(content);
210+
return structuredOutput;
211+
} catch (jsonErr) {
212+
throw new Error('Failed to parse JSON output from API. Raw output: ' + content);
213+
}
214+
} else {
215+
throw new Error('No answer provided in the response.');
216+
}
217+
} catch (error) {
218+
console.error(error);
219+
alert(error);
220+
}
221+
}
222+
223+
// Utility to show/hide the loading overlay.
224+
function setLoading(isLoading) {
225+
document.getElementById('loadingOverlay').style.display = isLoading ? 'flex' : 'none';
226+
}
227+
228+
// Handle form submission.
229+
document.getElementById('qaForm').addEventListener('submit', async (event) => {
230+
event.preventDefault();
231+
232+
// Hide previous results.
233+
document.getElementById('knowledgeCard').style.display = 'none';
234+
document.getElementById('citationsCard').style.display = 'none';
235+
236+
// Show loading overlay.
237+
setLoading(true);
238+
239+
const question = document.getElementById('question').value;
240+
const data = await askDiseaseQuestion(question);
241+
242+
// Hide loading overlay once done.
243+
setLoading(false);
244+
245+
if (data) {
246+
// Update the knowledge card with structured data.
247+
document.getElementById('overview').textContent = data.overview || 'N/A';
248+
document.getElementById('causes').textContent = data.causes || 'N/A';
249+
document.getElementById('treatments').textContent = data.treatments || 'N/A';
250+
document.getElementById('knowledgeCard').style.display = 'block';
251+
252+
// Update the citations section.
253+
const citationsList = document.getElementById('citationsList');
254+
citationsList.innerHTML = ''; // Clear previous citations.
255+
if (Array.isArray(data.citations) && data.citations.length > 0) {
256+
data.citations.forEach(citation => {
257+
const li = document.createElement('li');
258+
const link = document.createElement('a');
259+
link.href = citation;
260+
link.textContent = citation;
261+
link.target = '_blank';
262+
li.appendChild(link);
263+
citationsList.appendChild(li);
264+
});
265+
} else {
266+
const li = document.createElement('li');
267+
li.textContent = 'No citations provided.';
268+
citationsList.appendChild(li);
269+
}
270+
document.getElementById('citationsCard').style.display = 'block';
271+
}
272+
});
273+
</script>
274+
</body>
275+
</html>

0 commit comments

Comments
 (0)