Spaces:
Sleeping
Sleeping
File size: 6,770 Bytes
2d4edb9 408592d 804518c 2d4edb9 fc052c0 2d4edb9 fc052c0 2d4edb9 1d39837 f45c215 1d39837 2d4edb9 cbdbe97 804518c 05bad08 cbdbe97 a49b54f cbdbe97 fc052c0 2d4edb9 d912461 2d4edb9 f45c215 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 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
<!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">
<input class="form-control" type="password" id="hfToken" rows="10" placeholder="Huggingface Token or .env">
</div>
<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 class="small">Temperature: <span id="temp-val" class="fw-bold">0.7</span></label>
<input type="range" class="form-range" id="temperature" min="0.1" max="1.5" value="0.7" step="0.1" oninput="document.getElementById('temp-val').innerText = this.value">
<label class="small">Top K: <span id="topk-val" class="fw-bold">50</span></label>
<input type="range" class="form-range" id="topk" min="1" max="100" value="50" step="1" oninput="document.getElementById('topk-val').innerText = this.value">
</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').value;
const hfToken = document.getElementById('hfToken');
const temperature = document.getElementById('temperature').value;
const topk = document.getElementById('topk').value;
console.log(model)
if (model === 'custom') {
modelOut = inputModel;
} else {
modelOut = model;
}
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('/summarize/api/summarize', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text: text, model_name: modelOut, hf_token: hfToken, temp: temperature, topk: topk })
});
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> |