Hugging Face's logo

Spaces:
deepset
/
post-conference-report
Sleeping

App Files Community
Kacper Łukawski commited on
Commit
de1cc73
Β·
1 Parent(s): 65a9b89

Improve UI responses

Browse files
Files changed (2) hide show
  1. app/static/index.html +20 -16
  2. app/static/styles.css +83 -28
app/static/index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Post-Conference Report Generator β€” deepset</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
9
  <link rel="stylesheet" href="/static/styles.css" />
@@ -16,14 +16,14 @@
16
  <div class="ds-mark">d</div>
17
  <span class="brand-name">deepset</span>
18
  <span class="brand-sep">|</span>
19
- <span class="brand-subtitle">Post-Conference Report Generator</span>
20
 
21
  <div id="header-status" class="hidden ml-auto flex items-center gap-2">
22
  <div id="header-spinner" class="w-4 h-4 rounded-full border-2 spinner header-spinner"></div>
23
  <span id="header-status-text" class="status-text"></span>
24
  <button id="new-report-btn"
25
  class="hidden ml-4 px-3 py-1 rounded-lg text-xs font-medium transition-colors">
26
- ← New Report
27
  </button>
28
  </div>
29
  </header>
@@ -32,11 +32,11 @@
32
  <div id="input-section">
33
  <div class="hero-text">
34
  <h1 class="hero-title">
35
- Post-Conference Report Generator
36
  </h1>
37
  <p class="hero-desc">
38
- Enter a conference theme. The agent searches your Google Drive, reads relevant files,
39
- and synthesizes a structured research report.
40
  </p>
41
  <p class="hero-powered">
42
  Powered by <code class="hero-model">nvidia/nemotron-3-super-120b-a12b</code>
@@ -47,10 +47,10 @@
47
  <input
48
  type="text"
49
  id="theme-input"
50
- placeholder="e.g. AI Safety, DevOps Best Practices, Q1 Planning…"
51
  autocomplete="off"
52
  />
53
- <button id="generate-btn">Generate Report</button>
54
  </div>
55
 
56
  <div class="flow-indicators">
@@ -66,12 +66,12 @@
66
  <div class="flow-arrow">β†’</div>
67
  <div class="flow-step">
68
  <div class="flow-icon">✍️</div>
69
- <div class="flow-label">Write Report</div>
70
  </div>
71
  <div class="flow-arrow">β†’</div>
72
  <div class="flow-step">
73
  <div class="flow-icon">βœ…</div>
74
- <div class="flow-label">Review</div>
75
  </div>
76
  </div>
77
  </div>
@@ -370,19 +370,23 @@
370
  let icon = 'βš™οΈ', detail = '';
371
  if (isSearch) {
372
  icon = 'πŸ”';
373
- const q = args.query || args.q || args.search || args.name || '';
374
  detail = q ? `"${esc(String(q))}"` : '';
375
  } else if (isRead) {
376
  icon = 'πŸ“–';
377
- const fid = args.file_id || args.fileId || args.id || args.document_id || '';
378
  if (fid) {
379
  activeReadFileId = String(fid);
380
  setFileStatus(activeReadFileId, 'reading');
381
  const known = files.get(activeReadFileId);
382
  detail = known ? esc(known.name) : esc(String(fid));
 
 
 
 
383
  }
384
  } else {
385
- detail = esc(JSON.stringify(args).slice(0, 120));
386
  }
387
 
388
  const pill = document.createElement('div');
@@ -458,8 +462,8 @@
458
 
459
  // ── Generate ──────────────────────────────────────────────────────
460
  async function generate() {
461
- const theme = themeInput.value.trim();
462
- if (!theme) return;
463
 
464
  resetState();
465
 
@@ -476,7 +480,7 @@
476
  const res = await fetch('/agent', {
477
  method: 'POST',
478
  headers: { 'Content-Type': 'application/json' },
479
- body: JSON.stringify({ theme }),
480
  });
481
  if (!res.ok) throw new Error(`Server error: ${res.status}`);
482
 
 
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Conference Intelligence β€” deepset</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
9
  <link rel="stylesheet" href="/static/styles.css" />
 
16
  <div class="ds-mark">d</div>
17
  <span class="brand-name">deepset</span>
18
  <span class="brand-sep">|</span>
19
+ <span class="brand-subtitle">Conference Intelligence</span>
20
 
21
  <div id="header-status" class="hidden ml-auto flex items-center gap-2">
22
  <div id="header-spinner" class="w-4 h-4 rounded-full border-2 spinner header-spinner"></div>
23
  <span id="header-status-text" class="status-text"></span>
24
  <button id="new-report-btn"
25
  class="hidden ml-4 px-3 py-1 rounded-lg text-xs font-medium transition-colors">
26
+ ← Ask again
27
  </button>
28
  </div>
29
  </header>
 
32
  <div id="input-section">
33
  <div class="hero-text">
34
  <h1 class="hero-title">
35
+ Your colleagues already know what happened.
36
  </h1>
37
  <p class="hero-desc">
38
+ Missed a talk? Need a recap before tomorrow's standup? Ask anything about the conference β€”
39
+ the agent searches our Google Drive with conference materials and gets you up to speed in seconds.
40
  </p>
41
  <p class="hero-powered">
42
  Powered by <code class="hero-model">nvidia/nemotron-3-super-120b-a12b</code>
 
47
  <input
48
  type="text"
49
  id="theme-input"
50
+ placeholder="e.g. What were the main themes? Summarise the RAG talk. Which tools should I try?"
51
  autocomplete="off"
52
  />
53
+ <button id="generate-btn">Ask</button>
54
  </div>
55
 
56
  <div class="flow-indicators">
 
66
  <div class="flow-arrow">β†’</div>
67
  <div class="flow-step">
68
  <div class="flow-icon">✍️</div>
69
+ <div class="flow-label">Write Answer</div>
70
  </div>
71
  <div class="flow-arrow">β†’</div>
72
  <div class="flow-step">
73
  <div class="flow-icon">βœ…</div>
74
+ <div class="flow-label">Done</div>
75
  </div>
76
  </div>
77
  </div>
 
370
  let icon = 'βš™οΈ', detail = '';
371
  if (isSearch) {
372
  icon = 'πŸ”';
373
+ const q = args.query || args.q || args.search || args.searchQuery || args.name || '';
374
  detail = q ? `"${esc(String(q))}"` : '';
375
  } else if (isRead) {
376
  icon = 'πŸ“–';
377
+ const fid = args.file_id || args.fileId || args.documentId || args.document_id || args.id || '';
378
  if (fid) {
379
  activeReadFileId = String(fid);
380
  setFileStatus(activeReadFileId, 'reading');
381
  const known = files.get(activeReadFileId);
382
  detail = known ? esc(known.name) : esc(String(fid));
383
+ } else {
384
+ // Fallback: show first string arg value so pill is never blank
385
+ const firstVal = Object.values(args).find(v => typeof v === 'string');
386
+ if (firstVal) detail = esc(String(firstVal));
387
  }
388
  } else {
389
+ detail = esc(JSON.stringify(args));
390
  }
391
 
392
  const pill = document.createElement('div');
 
462
 
463
  // ── Generate ──────────────────────────────────────────────────────
464
  async function generate() {
465
+ const input = themeInput.value.trim();
466
+ if (!input) return;
467
 
468
  resetState();
469
 
 
480
  const res = await fetch('/agent', {
481
  method: 'POST',
482
  headers: { 'Content-Type': 'application/json' },
483
+ body: JSON.stringify({ input }),
484
  });
485
  if (!res.ok) throw new Error(`Server error: ${res.status}`);
486
 
app/static/styles.css CHANGED
@@ -30,35 +30,82 @@ body {
30
 
31
  /* ── Prose ─────────────────────────────────────────────────────────── */
32
  .prose { color: var(--text); }
33
- .prose h1 { font-size: 1.5rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }
34
- .prose h2 { font-size: 1.2rem; font-weight: 700; margin: 1.25rem 0 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); }
35
- .prose h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.375rem; color: var(--blue); }
36
- .prose ul { list-style: disc; padding-left: 1.5rem; margin: 0.5rem 0; }
 
 
 
 
 
 
 
 
37
  .prose ol { list-style: decimal; padding-left: 1.5rem; margin: 0.5rem 0; }
38
- .prose li { margin-bottom: 0.3rem; line-height: 1.6; }
39
- .prose p { margin-bottom: 0.75rem; line-height: 1.7; }
40
- .prose strong { font-weight: 600; }
41
  .prose em { color: var(--muted); font-style: italic; }
42
  .prose code {
43
  background: var(--surface2);
44
- border: 1px solid var(--border);
45
  border-radius: 4px;
46
- padding: 0.1em 0.4em;
47
- font-size: 0.8em;
48
  font-family: "SF Mono", Consolas, monospace;
 
49
  }
50
- .prose pre { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; overflow-x: auto; }
51
- .prose pre code { background: none; border: none; padding: 0; }
52
- .prose a { color: var(--blue); text-decoration: underline; }
53
- .prose blockquote { border-left: 3px solid var(--blue); padding-left: 1rem; margin: 0.75rem 0; color: var(--muted); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
 
55
- .prose-report h1 { font-size: 1.6rem; }
 
 
 
 
 
 
 
 
 
 
 
56
  .prose-report h2 { font-size: 1.3rem; }
57
- .prose-report p { line-height: 1.8; }
 
58
 
59
  .prose-sm { font-size: 0.8rem; }
60
- .prose-lg { font-size: 0.9rem; }
61
- .prose-block { margin: 8px 0; }
 
 
 
 
 
 
62
 
63
  /* ── Animations ────────────────────────────────────────────────────── */
64
  @keyframes spin {
@@ -220,7 +267,7 @@ body {
220
  /* ── Tool pills ────────────────────────────────────────────────────── */
221
  .tool-pill {
222
  display: inline-flex;
223
- align-items: center;
224
  gap: 6px;
225
  padding: 4px 10px;
226
  background: var(--surface2);
@@ -230,10 +277,10 @@ body {
230
  font-family: "SF Mono", Consolas, monospace;
231
  margin: 4px 0;
232
  max-width: 100%;
233
- overflow: hidden;
234
  }
235
- .tool-name { color: #A0A8FF; font-weight: 600; }
236
- .tool-arg { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
237
 
238
  .result-pill {
239
  display: flex;
@@ -290,7 +337,7 @@ body {
290
 
291
  /* ── Input styling ─────────────────────���───────────────────────────── */
292
  #theme-input {
293
- width: 100%;
294
  background: var(--surface);
295
  border: 1px solid var(--border2);
296
  border-radius: 12px;
@@ -311,11 +358,12 @@ body {
311
  color: #fff;
312
  border: none;
313
  border-radius: 10px;
314
- padding: 11px 24px;
315
  font-size: 0.875rem;
316
  font-weight: 600;
317
  cursor: pointer;
318
- align-self: flex-end;
 
319
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
320
  }
321
  #generate-btn:hover:not(:disabled) {
@@ -389,13 +437,19 @@ body {
389
  gap: 2.5rem;
390
  overflow: hidden;
391
  }
392
- .hero-text { text-align: center; }
 
 
 
 
 
393
  .hero-title {
394
  font-size: 2rem;
395
  font-weight: 700;
396
  color: var(--text);
397
  margin: 0 0 0.75rem;
398
  letter-spacing: -0.5px;
 
399
  }
400
  .hero-desc {
401
  color: var(--muted);
@@ -419,8 +473,9 @@ body {
419
  width: 100%;
420
  max-width: 540px;
421
  display: flex;
422
- flex-direction: column;
423
- gap: 12px;
 
424
  }
425
  .flow-indicators {
426
  display: flex;
 
30
 
31
  /* ── Prose ─────────────────────────────────────────────────────────── */
32
  .prose { color: var(--text); }
33
+ .prose h1 { font-size: 1.5rem; font-weight: 700; margin: 1.5rem 0 0.75rem; letter-spacing: -0.3px; }
34
+ .prose h2 { font-size: 1.2rem; font-weight: 700; margin: 1.5rem 0 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--border2); }
35
+ .prose h3 { font-size: 1rem; font-weight: 600; margin: 1.1rem 0 0.375rem; color: var(--blue); }
36
+ .prose ul { list-style: none; padding-left: 1.25rem; margin: 0.5rem 0; }
37
+ .prose ul > li { position: relative; }
38
+ .prose ul > li::before {
39
+ content: "–";
40
+ position: absolute;
41
+ left: -1.25rem;
42
+ color: var(--blue);
43
+ font-weight: 700;
44
+ }
45
  .prose ol { list-style: decimal; padding-left: 1.5rem; margin: 0.5rem 0; }
46
+ .prose li { margin-bottom: 0.4rem; line-height: 1.65; }
47
+ .prose p { margin-bottom: 0.8rem; line-height: 1.8; }
48
+ .prose strong { font-weight: 700; color: var(--text); }
49
  .prose em { color: var(--muted); font-style: italic; }
50
  .prose code {
51
  background: var(--surface2);
52
+ border: 1px solid var(--border2);
53
  border-radius: 4px;
54
+ padding: 0.1em 0.45em;
55
+ font-size: 0.82em;
56
  font-family: "SF Mono", Consolas, monospace;
57
+ color: #A0A8FF;
58
  }
59
+ .prose pre {
60
+ background: var(--surface2);
61
+ border: 1px solid var(--border2);
62
+ border-radius: 8px;
63
+ padding: 1rem;
64
+ overflow-x: auto;
65
+ }
66
+ .prose pre code { background: none; border: none; padding: 0; color: inherit; }
67
+ .prose a {
68
+ color: var(--blue);
69
+ text-decoration: none;
70
+ border-bottom: 1px solid rgba(0,110,255,0.35);
71
+ transition: color 0.15s, border-color 0.15s;
72
+ }
73
+ .prose a:hover { color: #3395ff; border-bottom-color: rgba(0,110,255,0.75); }
74
+ .prose blockquote {
75
+ border-left: 3px solid var(--blue);
76
+ padding: 0.5rem 1rem;
77
+ margin: 0.85rem 0;
78
+ color: var(--muted);
79
+ background: var(--blue-dim);
80
+ border-radius: 0 6px 6px 0;
81
+ }
82
+ .prose hr { border: none; border-top: 1px solid var(--border2); margin: 1.5rem 0; }
83
 
84
+ .prose-report {
85
+ max-width: 700px;
86
+ margin: 0 auto;
87
+ }
88
+ .prose-report h1 {
89
+ font-size: 1.75rem;
90
+ letter-spacing: -0.5px;
91
+ background: linear-gradient(100deg, var(--text) 60%, #8888cc);
92
+ -webkit-background-clip: text;
93
+ -webkit-text-fill-color: transparent;
94
+ background-clip: text;
95
+ }
96
  .prose-report h2 { font-size: 1.3rem; }
97
+ .prose-report h3 { font-size: 1.1rem; }
98
+ .prose-report p { line-height: 1.85; }
99
 
100
  .prose-sm { font-size: 0.8rem; }
101
+ .prose-lg { font-size: 0.92rem; }
102
+ .prose-block {
103
+ margin: 10px 0;
104
+ padding: 14px 16px;
105
+ background: rgba(255,255,255,0.015);
106
+ border-radius: 8px;
107
+ border: 1px solid var(--border);
108
+ }
109
 
110
  /* ── Animations ────────────────────────────────────────────────────── */
111
  @keyframes spin {
 
267
  /* ── Tool pills ────────────────────────────────────────────────────── */
268
  .tool-pill {
269
  display: inline-flex;
270
+ align-items: flex-start;
271
  gap: 6px;
272
  padding: 4px 10px;
273
  background: var(--surface2);
 
277
  font-family: "SF Mono", Consolas, monospace;
278
  margin: 4px 0;
279
  max-width: 100%;
280
+ flex-wrap: wrap;
281
  }
282
+ .tool-name { color: #A0A8FF; font-weight: 600; flex-shrink: 0; }
283
+ .tool-arg { color: var(--muted); word-break: break-word; }
284
 
285
  .result-pill {
286
  display: flex;
 
337
 
338
  /* ── Input styling ─────────────────────���───────────────────────────── */
339
  #theme-input {
340
+ flex: 1;
341
  background: var(--surface);
342
  border: 1px solid var(--border2);
343
  border-radius: 12px;
 
358
  color: #fff;
359
  border: none;
360
  border-radius: 10px;
361
+ padding: 14px 22px;
362
  font-size: 0.875rem;
363
  font-weight: 600;
364
  cursor: pointer;
365
+ flex-shrink: 0;
366
+ white-space: nowrap;
367
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
368
  }
369
  #generate-btn:hover:not(:disabled) {
 
437
  gap: 2.5rem;
438
  overflow: hidden;
439
  }
440
+ .hero-text {
441
+ display: flex;
442
+ flex-direction: column;
443
+ align-items: center;
444
+ text-align: center;
445
+ }
446
  .hero-title {
447
  font-size: 2rem;
448
  font-weight: 700;
449
  color: var(--text);
450
  margin: 0 0 0.75rem;
451
  letter-spacing: -0.5px;
452
+ max-width: 560px;
453
  }
454
  .hero-desc {
455
  color: var(--muted);
 
473
  width: 100%;
474
  max-width: 540px;
475
  display: flex;
476
+ flex-direction: row;
477
+ gap: 10px;
478
+ align-items: flex-start;
479
  }
480
  .flow-indicators {
481
  display: flex;