Hugging Face's logo

Spaces:
broadfield-dev
/
grok_test
Running

App Files Community
broadfield-dev commited on
Commit
6c20801
·
verified ·
1 Parent(s): 9a3bd4a

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +50 -25
templates/index.html CHANGED
@@ -96,7 +96,7 @@
96
  margin-top: 10px;
97
  }
98
  #loading {
99
- display: none; /* Initially hidden, shown during new feed loading or search */
100
  position: fixed;
101
  top: 0;
102
  left: 0;
@@ -127,51 +127,76 @@
127
  color: #2c3e50;
128
  font-size: 1em;
129
  }
 
 
 
 
 
 
130
  </style>
131
  </head>
132
  <body>
133
  <div id="loading"><div class="loader"></div></div>
134
  <h1>News Feed Hub</h1>
135
  <div class="search-container">
136
- <form method="POST" id="searchForm">
137
  <input type="text" name="search" class="search-bar" placeholder="Search news semantically...">
138
  </form>
139
  </div>
140
  {% if loading_new_feeds %}
141
  <div class="loading-message">Loading new RSS feeds in the background...</div>
142
  {% endif %}
143
- {% for category, articles in categorized_articles.items() %}
144
- <div class="category-section">
145
- <div class="category-title">{{ category }}</div>
146
- <div class="tiles">
147
- {% for article in articles %}
148
- <div class="article-tile">
149
- {% if article.image != "svg" %}
150
- <img src="{{ article.image }}" alt="Article Image">
151
- {% else %}
152
- <svg width="100%" height="150" viewBox="0 0 300 150" xmlns="http://www.w3.org/2000/svg">
153
- <rect width="300" height="150" fill="#e0e0e0"/>
154
- <text x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="20" fill="#666">
155
- No Image Available
156
- </text>
157
- </svg>
158
- {% endif %}
159
- <div class="title"><a href="{{ article.link }}" target="_blank">{{ article.title }}</a></div>
160
- <div class="description">{{ article.description }}</div>
161
- <div class="published">Published: {{ article.published }}</div>
 
 
 
162
  </div>
163
- {% endfor %}
164
  </div>
165
- </div>
166
- {% endfor %}
 
 
167
 
168
  <script>
169
  document.addEventListener('DOMContentLoaded', () => {
170
  const form = document.getElementById('searchForm');
171
  const loading = document.getElementById('loading');
172
 
173
- form.addEventListener('submit', () => {
 
174
  loading.style.display = 'block';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
175
  });
176
 
177
  // Poll until new feeds are loaded
 
96
  margin-top: 10px;
97
  }
98
  #loading {
99
+ display: none; /* Initially hidden, shown during search */
100
  position: fixed;
101
  top: 0;
102
  left: 0;
 
127
  color: #2c3e50;
128
  font-size: 1em;
129
  }
130
+ .no-articles {
131
+ text-align: center;
132
+ color: #2c3e50;
133
+ font-size: 1.2em;
134
+ margin-top: 20px;
135
+ }
136
  </style>
137
  </head>
138
  <body>
139
  <div id="loading"><div class="loader"></div></div>
140
  <h1>News Feed Hub</h1>
141
  <div class="search-container">
142
+ <form method="POST" action="/search" id="searchForm">
143
  <input type="text" name="search" class="search-bar" placeholder="Search news semantically...">
144
  </form>
145
  </div>
146
  {% if loading_new_feeds %}
147
  <div class="loading-message">Loading new RSS feeds in the background...</div>
148
  {% endif %}
149
+ {% if has_articles %}
150
+ {% for category, articles in categorized_articles.items() %}
151
+ <div class="category-section">
152
+ <div class="category-title">{{ category }}</div>
153
+ <div class="tiles">
154
+ {% for article in articles %}
155
+ <div class="article-tile">
156
+ {% if article.image != "svg" %}
157
+ <img src="{{ article.image }}" alt="Article Image">
158
+ {% else %}
159
+ <svg width="100%" height="150" viewBox="0 0 300 150" xmlns="http://www.w3.org/2000/svg">
160
+ <rect width="300" height="150" fill="#e0e0e0"/>
161
+ <text x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="20" fill="#666">
162
+ No Image Available
163
+ </text>
164
+ </svg>
165
+ {% endif %}
166
+ <div class="title"><a href="{{ article.link }}" target="_blank">{{ article.title }}</a></div>
167
+ <div class="description">{{ article.description }}</div>
168
+ <div class="published">Published: {{ article.published }}</div>
169
+ </div>
170
+ {% endfor %}
171
  </div>
 
172
  </div>
173
+ {% endfor %}
174
+ {% else %}
175
+ <div class="no-articles">No articles available. New RSS feeds are loading in the background...</div>
176
+ {% endif %}
177
 
178
  <script>
179
  document.addEventListener('DOMContentLoaded', () => {
180
  const form = document.getElementById('searchForm');
181
  const loading = document.getElementById('loading');
182
 
183
+ form.addEventListener('submit', (event) => {
184
+ event.preventDefault();
185
  loading.style.display = 'block';
186
+ fetch('/search', {
187
+ method: 'POST',
188
+ body: new FormData(form)
189
+ })
190
+ .then(response => response.text())
191
+ .then(html => {
192
+ document.documentElement.innerHTML = html;
193
+ loading.style.display = 'none';
194
+ })
195
+ .catch(error => {
196
+ console.error('Error:', error);
197
+ loading.style.display = 'none';
198
+ alert('Failed to perform search. Please try again.');
199
+ });
200
  });
201
 
202
  // Poll until new feeds are loaded