Hugging Face's logo

Spaces:
broadfield-dev
/
grok_test
Running

App Files Community
broadfield-dev commited on
Commit
d0c2354
·
verified ·
1 Parent(s): 70bea74

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +54 -16
templates/index.html CHANGED
@@ -58,6 +58,7 @@
58
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
59
  transition: transform 0.2s;
60
  overflow: hidden;
 
61
  }
62
  .article-tile:hover {
63
  transform: scale(1.05);
@@ -92,6 +93,19 @@
92
  font-size: 0.8em;
93
  color: #95a5a6;
94
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
95
  #loading {
96
  display: block;
97
  position: fixed;
@@ -119,26 +133,12 @@
119
  100% { transform: translate(-50%, -50%) rotate(360deg); }
120
  }
121
  </style>
122
- <script>
123
- document.addEventListener('DOMContentLoaded', () => {
124
- const form = document.querySelector('form');
125
- const loading = document.getElementById('loading');
126
-
127
- form.addEventListener('submit', () => {
128
- loading.style.display = 'block';
129
- });
130
-
131
- window.addEventListener('load', () => {
132
- loading.style.display = 'none';
133
- });
134
- });
135
- </script>
136
  </head>
137
  <body>
138
  <div id="loading"><div class="loader"></div></div>
139
  <h1>News Feed Hub</h1>
140
  <div class="search-container">
141
- <form method="POST">
142
  <input type="text" name="search" class="search-bar" placeholder="Search news semantically...">
143
  </form>
144
  </div>
@@ -159,13 +159,51 @@
159
  </svg>
160
  {% endif %}
161
  <div class="title"><a href="{{ article.link }}" target="_blank">{{ article.title }}</a></div>
162
- <div class="summary">{{ article.summary }}</div>
163
  <div class="sentiment">Sentiment: {{ article.sentiment }}</div>
164
  <div class="published">Published: {{ article.published }}</div>
 
165
  </div>
166
  {% endfor %}
167
  </div>
168
  </div>
169
  {% endfor %}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
170
  </body>
171
  </html>
 
58
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
59
  transition: transform 0.2s;
60
  overflow: hidden;
61
+ position: relative;
62
  }
63
  .article-tile:hover {
64
  transform: scale(1.05);
 
93
  font-size: 0.8em;
94
  color: #95a5a6;
95
  }
96
+ .summarize-btn {
97
+ background-color: #3498db;
98
+ color: white;
99
+ border: none;
100
+ padding: 5px 10px;
101
+ border-radius: 5px;
102
+ cursor: pointer;
103
+ font-size: 0.8em;
104
+ margin-top: 10px;
105
+ }
106
+ .summarize-btn:hover {
107
+ background-color: #2980b9;
108
+ }
109
  #loading {
110
  display: block;
111
  position: fixed;
 
133
  100% { transform: translate(-50%, -50%) rotate(360deg); }
134
  }
135
  </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
136
  </head>
137
  <body>
138
  <div id="loading"><div class="loader"></div></div>
139
  <h1>News Feed Hub</h1>
140
  <div class="search-container">
141
+ <form method="POST" id="searchForm">
142
  <input type="text" name="search" class="search-bar" placeholder="Search news semantically...">
143
  </form>
144
  </div>
 
159
  </svg>
160
  {% endif %}
161
  <div class="title"><a href="{{ article.link }}" target="_blank">{{ article.title }}</a></div>
162
+ <div class="summary" id="summary-{{ loop.index }}-{{ category|replace(' ', '-') }}">{{ article.summary }}</div>
163
  <div class="sentiment">Sentiment: {{ article.sentiment }}</div>
164
  <div class="published">Published: {{ article.published }}</div>
165
+ <button class="summarize-btn" onclick="summarizeArticle('{{ article.original_description|escapejs }}', 'summary-{{ loop.index }}-{{ category|replace(' ', '-') }}')">Summarize</button>
166
  </div>
167
  {% endfor %}
168
  </div>
169
  </div>
170
  {% endfor %}
171
+
172
+ <script>
173
+ document.addEventListener('DOMContentLoaded', () => {
174
+ const form = document.getElementById('searchForm');
175
+ const loading = document.getElementById('loading');
176
+
177
+ form.addEventListener('submit', () => {
178
+ loading.style.display = 'block';
179
+ });
180
+
181
+ window.addEventListener('load', () => {
182
+ loading.style.display = 'none';
183
+ });
184
+ });
185
+
186
+ function summarizeArticle(text, summaryId) {
187
+ const loading = document.getElementById('loading');
188
+ loading.style.display = 'block';
189
+ fetch('/summarize', {
190
+ method: 'POST',
191
+ headers: {
192
+ 'Content-Type': 'application/json',
193
+ },
194
+ body: JSON.stringify({ text: text }),
195
+ })
196
+ .then(response => response.json())
197
+ .then(data => {
198
+ document.getElementById(summaryId).innerText = data.summary;
199
+ loading.style.display = 'none';
200
+ })
201
+ .catch(error => {
202
+ console.error('Error:', error);
203
+ document.getElementById(summaryId).innerText = 'Error summarizing';
204
+ loading.style.display = 'none';
205
+ });
206
+ }
207
+ </script>
208
  </body>
209
  </html>