Spaces:
Paused
Paused
File size: 5,572 Bytes
2d4edb9 fc052c0 2d4edb9 fc052c0 2d4edb9 fc052c0 2d4edb9 | 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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Summarizer</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { background-color: #f8f9fa; padding-top: 50px; }
.container { max-width: 900px; }
.card { box-shadow: 0 4px 6px rgba(0,0,0,0.1); border: none; }
.loader { display: none; }
</style>
</head>
<body>
<div class="container">
<div class="text-center mb-5">
<h1 class="display-5 fw-bold text-primary">Summarization Inference</h1>
<p class="lead">Running via Flask Blueprint & HuggingFace Transformers</p>
</div>
<div class="row">
<!-- Input Column -->
<div class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-header bg-primary text-white">Input Text</div>
<div class="card-body">
<div class="mb-3">
<label for="modelSelect" class="form-label">Choose Model</label>
<select class="form-select" id="modelSelect">
<option value="custom" selected>Custom</option>
<option value="facebook/bart-large-cnn">facebook/bart-large-cnn</option>
<option value="google/pegasus-xsum">google/pegasus-xsum</option>
<option value="sshleifer/distilbart-cnn-12-6">sshleifer/distilbart-cnn-12-6 (Faster)</option>
</select>
<input class="form-control" id="inputModel" rows="10" placeholder="custom HF model id user/model">
</div>
<div class="mb-3">
<label for="inputText" class="form-label">Text to Summarize</label>
<textarea class="form-control" id="inputText" rows="10" placeholder="Paste your long text here..."></textarea>
</div>
<button id="submitBtn" class="btn btn-primary w-100">Summarize</button>
</div>
</div>
</div>
<!-- Output Column -->
<div class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-header bg-success text-white">Summary Result</div>
<div class="card-body position-relative">
<!-- Loading Spinner -->
<div id="loader" class="loader position-absolute top-50 start-50 translate-middle text-center">
<div class="spinner-border text-primary" role="status"></div>
<p class="mt-2">Loading model &<br>generating...</p>
</div>
<!-- Output Text -->
<div id="resultContainer">
<p class="text-muted" id="placeholderText">The summary will appear here.</p>
<p id="outputText" class="fw-medium"></p>
</div>
<!-- Error Alert -->
<div id="errorAlert" class="alert alert-danger d-none mt-3"></div>
</div>
</div>
</div>
</div>
</div>
<script>
document.getElementById('submitBtn').addEventListener('click', async () => {
const text = document.getElementById('inputText').value;
const model = document.getElementById('modelSelect').value;
const outputText = document.getElementById('outputText');
const placeholder = document.getElementById('placeholderText');
const loader = document.getElementById('loader');
const resultContainer = document.getElementById('resultContainer');
const errorAlert = document.getElementById('errorAlert');
const inputModel = document.getElementById('inputModel');
if (model === 'Custom') {
model = inputModel;
}
if (!text.trim()) {
alert("Please enter some text!");
return;
}
// UI Updates
loader.style.display = 'block';
resultContainer.style.opacity = '0.3';
errorAlert.classList.add('d-none');
document.getElementById('submitBtn').disabled = true;
try {
const response = await fetch('/api/summarize', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text: text, model_name: model })
});
const data = await response.json();
loader.style.display = 'none';
resultContainer.style.opacity = '1';
document.getElementById('submitBtn').disabled = false;
if (response.ok) {
placeholder.style.display = 'none';
outputText.innerText = data.output;
} else {
errorAlert.innerText = "Error: " + (data.error || "Unknown error");
errorAlert.classList.remove('d-none');
}
} catch (err) {
console.error(err);
loader.style.display = 'none';
resultContainer.style.opacity = '1';
document.getElementById('submitBtn').disabled = false;
errorAlert.innerText = "Network Error or Server Timeout";
errorAlert.classList.remove('d-none');
}
});
</script>
</body>
</html> |