Hugging Face's logo

Spaces:
broadfield-dev
/
noding
Sleeping

App Files Community
broadfield-dev commited on
Commit
2d4edb9
·
verified ·
1 Parent(s): 4f0879f

Create inference.html

Browse files
Files changed (1) hide show
  1. templates/inference.html +126 -0
templates/inference.html ADDED
@@ -0,0 +1,126 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>AI Summarizer</title>
7
+ <!-- Bootstrap CSS -->
8
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
9
+ <style>
10
+ body { background-color: #f8f9fa; padding-top: 50px; }
11
+ .container { max-width: 900px; }
12
+ .card { box-shadow: 0 4px 6px rgba(0,0,0,0.1); border: none; }
13
+ .loader { display: none; }
14
+ </style>
15
+ </head>
16
+ <body>
17
+
18
+ <div class="container">
19
+ <div class="text-center mb-5">
20
+ <h1 class="display-5 fw-bold text-primary">Summarization Inference</h1>
21
+ <p class="lead">Running via Flask Blueprint & HuggingFace Transformers</p>
22
+ </div>
23
+
24
+ <div class="row">
25
+ <!-- Input Column -->
26
+ <div class="col-md-6 mb-4">
27
+ <div class="card h-100">
28
+ <div class="card-header bg-primary text-white">Input Text</div>
29
+ <div class="card-body">
30
+ <div class="mb-3">
31
+ <label for="modelSelect" class="form-label">Choose Model</label>
32
+ <select class="form-select" id="modelSelect">
33
+ <option value="facebook/bart-large-cnn" selected>facebook/bart-large-cnn</option>
34
+ <option value="google/pegasus-xsum">google/pegasus-xsum</option>
35
+ <option value="sshleifer/distilbart-cnn-12-6">sshleifer/distilbart-cnn-12-6 (Faster)</option>
36
+ </select>
37
+ </div>
38
+ <div class="mb-3">
39
+ <label for="inputText" class="form-label">Text to Summarize</label>
40
+ <textarea class="form-control" id="inputText" rows="10" placeholder="Paste your long text here..."></textarea>
41
+ </div>
42
+ <button id="submitBtn" class="btn btn-primary w-100">Summarize</button>
43
+ </div>
44
+ </div>
45
+ </div>
46
+
47
+ <!-- Output Column -->
48
+ <div class="col-md-6 mb-4">
49
+ <div class="card h-100">
50
+ <div class="card-header bg-success text-white">Summary Result</div>
51
+ <div class="card-body position-relative">
52
+
53
+ <!-- Loading Spinner -->
54
+ <div id="loader" class="loader position-absolute top-50 start-50 translate-middle text-center">
55
+ <div class="spinner-border text-primary" role="status"></div>
56
+ <p class="mt-2">Loading model &<br>generating...</p>
57
+ </div>
58
+
59
+ <!-- Output Text -->
60
+ <div id="resultContainer">
61
+ <p class="text-muted" id="placeholderText">The summary will appear here.</p>
62
+ <p id="outputText" class="fw-medium"></p>
63
+ </div>
64
+
65
+ <!-- Error Alert -->
66
+ <div id="errorAlert" class="alert alert-danger d-none mt-3"></div>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </div>
72
+
73
+ <script>
74
+ document.getElementById('submitBtn').addEventListener('click', async () => {
75
+ const text = document.getElementById('inputText').value;
76
+ const model = document.getElementById('modelSelect').value;
77
+ const outputText = document.getElementById('outputText');
78
+ const placeholder = document.getElementById('placeholderText');
79
+ const loader = document.getElementById('loader');
80
+ const resultContainer = document.getElementById('resultContainer');
81
+ const errorAlert = document.getElementById('errorAlert');
82
+
83
+ if (!text.trim()) {
84
+ alert("Please enter some text!");
85
+ return;
86
+ }
87
+
88
+ // UI Updates
89
+ loader.style.display = 'block';
90
+ resultContainer.style.opacity = '0.3';
91
+ errorAlert.classList.add('d-none');
92
+ document.getElementById('submitBtn').disabled = true;
93
+
94
+ try {
95
+ const response = await fetch('/api/summarize', {
96
+ method: 'POST',
97
+ headers: { 'Content-Type': 'application/json' },
98
+ body: JSON.stringify({ text: text, model_name: model })
99
+ });
100
+
101
+ const data = await response.json();
102
+
103
+ loader.style.display = 'none';
104
+ resultContainer.style.opacity = '1';
105
+ document.getElementById('submitBtn').disabled = false;
106
+
107
+ if (response.ok) {
108
+ placeholder.style.display = 'none';
109
+ outputText.innerText = data.output;
110
+ } else {
111
+ errorAlert.innerText = "Error: " + (data.error || "Unknown error");
112
+ errorAlert.classList.remove('d-none');
113
+ }
114
+ } catch (err) {
115
+ console.error(err);
116
+ loader.style.display = 'none';
117
+ resultContainer.style.opacity = '1';
118
+ document.getElementById('submitBtn').disabled = false;
119
+ errorAlert.innerText = "Network Error or Server Timeout";
120
+ errorAlert.classList.remove('d-none');
121
+ }
122
+ });
123
+ </script>
124
+
125
+ </body>
126
+ </html>