|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>Smart Analyzer</title> |
|
|
<style> |
|
|
:root { |
|
|
--primary-color: #4A90E2; |
|
|
--secondary-color: #f4f6f8; |
|
|
--text-color: #333; |
|
|
--btn-color: #4A90E2; |
|
|
--btn-hover: #357ABD; |
|
|
--card-bg: #fff; |
|
|
--card-shadow: rgba(0, 0, 0, 0.1); |
|
|
--border-radius: 8px; |
|
|
--transition: 0.3s; |
|
|
--max-width: 900px; |
|
|
} |
|
|
* { box-sizing: border-box; } |
|
|
body { |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
color: var(--text-color); |
|
|
background: var(--secondary-color); |
|
|
margin: 0; |
|
|
padding: 20px; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
} |
|
|
.container { |
|
|
width: 100%; |
|
|
max-width: var(--max-width); |
|
|
} |
|
|
h1 { |
|
|
text-align: center; |
|
|
color: var(--primary-color); |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
.section { |
|
|
background: var(--card-bg); |
|
|
padding: 20px; |
|
|
margin-bottom: 30px; |
|
|
border-radius: var(--border-radius); |
|
|
box-shadow: 0 2px 8px var(--card-shadow); |
|
|
transition: transform var(--transition); |
|
|
} |
|
|
.section:hover { transform: translateY(-3px); } |
|
|
h2 { |
|
|
margin-top: 0; |
|
|
color: var(--primary-color); |
|
|
border-bottom: 2px solid var(--secondary-color); |
|
|
padding-bottom: 5px; |
|
|
} |
|
|
label { |
|
|
display: block; |
|
|
margin-top: 15px; |
|
|
font-weight: bold; |
|
|
} |
|
|
input[type="file"], input[type="text"], button, textarea { |
|
|
width: 100%; |
|
|
padding: 10px; |
|
|
margin-top: 8px; |
|
|
border: 1px solid #ccc; |
|
|
border-radius: var(--border-radius); |
|
|
font-size: 1rem; |
|
|
} |
|
|
button { |
|
|
background: var(--btn-color); |
|
|
color: #fff; |
|
|
border: none; |
|
|
margin-top: 20px; |
|
|
padding: 12px; |
|
|
font-size: 1rem; |
|
|
border-radius: var(--border-radius); |
|
|
cursor: pointer; |
|
|
transition: background var(--transition); |
|
|
} |
|
|
button:hover { background: var(--btn-hover); } |
|
|
.results { |
|
|
margin-top: 20px; |
|
|
padding: 15px; |
|
|
background: var(--secondary-color); |
|
|
border-radius: var(--border-radius); |
|
|
border: 1px solid #ddd; |
|
|
min-height: 60px; |
|
|
} |
|
|
@media (min-width: 768px) { |
|
|
.grid { display: flex; gap: 20px; } |
|
|
.grid > div { flex: 1; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>Smart Analyzer</h1> |
|
|
<div class="grid"> |
|
|
<div class="section"> |
|
|
<h2>Summarize a Document</h2> |
|
|
<input type="file" id="summary-file" accept=".pdf,.docx,.txt"> |
|
|
<button id="summarize-btn">Summarize</button> |
|
|
<div id="summary-result" class="results">Your summary will appear here.</div> |
|
|
</div> |
|
|
<div class="section"> |
|
|
<h2>Ask a Question</h2> |
|
|
<input type="file" id="qa-file" accept=".pdf,.docx,.txt,image/*"> |
|
|
<input type="text" id="qa-question" placeholder="Type your question here..."> |
|
|
<button id="qa-btn">Ask</button> |
|
|
<div id="qa-result" class="results">Answer will appear here.</div> |
|
|
</div> |
|
|
<div class="section"> |
|
|
<h2>Interpret an Image</h2> |
|
|
<input type="file" id="image-file" accept="image/*"> |
|
|
<button id="image-btn">Describe</button> |
|
|
<div id="image-result" class="results">Image description will appear here.</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
async function sendData(url, fileInputId, extraData, resultId) { |
|
|
const fileInput = document.getElementById(fileInputId); |
|
|
const file = fileInput.files[0]; |
|
|
if (!file) { |
|
|
document.getElementById(resultId).textContent = 'Please select a file.'; |
|
|
return; |
|
|
} |
|
|
const formData = new FormData(); |
|
|
formData.append(fileInputId.includes('image') ? 'image' : 'file', file); |
|
|
if (extraData) { |
|
|
for (const [key, value] of Object.entries(extraData)) { |
|
|
formData.append(key, value); |
|
|
} |
|
|
} |
|
|
document.getElementById(resultId).textContent = 'Processing...'; |
|
|
try { |
|
|
const res = await fetch(url, { method: 'POST', body: formData }); |
|
|
const data = await res.json(); |
|
|
document.getElementById(resultId).textContent = data.summary || data.answer || data.description || data.error || JSON.stringify(data); |
|
|
} catch (err) { |
|
|
document.getElementById(resultId).textContent = 'Error: ' + err.message; |
|
|
} |
|
|
} |
|
|
|
|
|
document.getElementById('summarize-btn').addEventListener('click', () => { |
|
|
sendData('/analyze', 'summary-file', null, 'summary-result'); |
|
|
}); |
|
|
|
|
|
document.getElementById('qa-btn').addEventListener('click', () => { |
|
|
const question = document.getElementById('qa-question').value.trim(); |
|
|
if (!question) { |
|
|
document.getElementById('qa-result').textContent = 'Please enter a question.'; |
|
|
return; |
|
|
} |
|
|
sendData('/ask', 'qa-file', { question }, 'qa-result'); |
|
|
}); |
|
|
|
|
|
document.getElementById('image-btn').addEventListener('click', () => { |
|
|
sendData('/interpret_image', 'image-file', null, 'image-result'); |
|
|
}); |
|
|
</script> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
|
