67 lines
2.1 KiB
HTML
67 lines
2.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>vibe: Article Summarization & TTS Pipeline</title>
|
||
|
|
<style>
|
||
|
|
body { font-family: Arial, sans-serif; margin: 40px; }
|
||
|
|
.container { max-width: 600px; margin: auto; }
|
||
|
|
input[type="text"], textarea { width: 100%; padding: 10px; margin: 8px 0; }
|
||
|
|
button { padding: 10px 20px; font-size: 16px; }
|
||
|
|
.hidden { display: none; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>Welcome to vibe</h1>
|
||
|
|
<p>Enter your interests below to generate a summary MP3 of the latest Computer Science research articles.</p>
|
||
|
|
<form id="interestForm">
|
||
|
|
<label for="user_info">Your Interests:</label>
|
||
|
|
<textarea id="user_info" name="user_info" rows="4" required></textarea>
|
||
|
|
<br>
|
||
|
|
<button type="submit">Submit</button>
|
||
|
|
</form>
|
||
|
|
<div id="status" class="hidden">
|
||
|
|
<p>Processing your request, please wait...</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
document.getElementById('interestForm').addEventListener('submit', async function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
const userInfo = document.getElementById('user_info').value;
|
||
|
|
document.getElementById('status').classList.remove('hidden');
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch('/process', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
},
|
||
|
|
body: JSON.stringify({
|
||
|
|
user_info: userInfo,
|
||
|
|
max_articles: 5,
|
||
|
|
new_only: false
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
if (response.ok) {
|
||
|
|
const blob = await response.blob();
|
||
|
|
const url = window.URL.createObjectURL(blob);
|
||
|
|
const a = document.createElement('a');
|
||
|
|
a.style.display = 'none';
|
||
|
|
a.href = url;
|
||
|
|
a.download = 'summary.mp3';
|
||
|
|
document.body.appendChild(a);
|
||
|
|
a.click();
|
||
|
|
window.URL.revokeObjectURL(url);
|
||
|
|
} else {
|
||
|
|
alert('Error processing your request.');
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
alert('An error occurred: ' + error);
|
||
|
|
}
|
||
|
|
document.getElementById('status').classList.add('hidden');
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|