TomLii Claude Sonnet 4.6 commited on
Commit
c2362ea
Β·
1 Parent(s): d6a02bb

UI polish: rename Space to Quest, harder examples, clean dropdown, hide progress bar

Browse files

- README frontmatter title goes from "DeepResearch Space Starter" to
"Quest" so the public Space listing matches the in-app header.
- First two examples are now well-known but detail-heavy questions
(Apollo 11 call signs + lunar surface duration; current 100m men's
world record with the next-fastest legal time).
- Memory Strategy dropdown: flatten the inner .wrap/.container/.single-
select so there's only one outer frame, matching the Model textbox.
- Hide .progress, .progress-level, .progress-bar and .generating on the
Markdown/Code panel β€” that's the orange bar that was showing up above
"Researching…" while the agent streamed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Files changed (2) hide show
  1. README.md +1 -1
  2. app.py +42 -6
README.md CHANGED
@@ -1,5 +1,5 @@
1
  ---
2
- title: DeepResearch Space Starter
3
  emoji: πŸ”Ž
4
  colorFrom: blue
5
  colorTo: indigo
 
1
  ---
2
+ title: Quest
3
  emoji: πŸ”Ž
4
  colorFrom: blue
5
  colorTo: indigo
app.py CHANGED
@@ -533,14 +533,18 @@ gradio-app > div {
533
  [class*="gradio-container"] [data-testid="dropdown"] .secondary-wrap,
534
  [class*="gradio-container"] [data-testid="dropdown"] .wrap-inner,
535
  [class*="gradio-container"] [data-testid="dropdown"] .input-container,
 
536
  [class*="gradio-container"] .gradio-dropdown .wrap,
537
  [class*="gradio-container"] .gradio-dropdown .wrap-inner,
538
  [class*="gradio-container"] .gradio-dropdown .secondary-wrap,
 
 
539
  [class*="gradio-container"] [class*="dropdown"] .wrap {
540
  background: transparent !important;
541
- border: none !important;
 
542
  box-shadow: none !important;
543
- border-radius: 10px !important;
544
  width: 100% !important;
545
  min-height: 44px !important;
546
  padding: 0 14px !important;
@@ -549,15 +553,32 @@ gradio-app > div {
549
  box-sizing: border-box !important;
550
  }
551
  [class*="gradio-container"] [data-testid="dropdown"] input,
552
- [class*="gradio-container"] .gradio-dropdown input {
 
 
553
  background: transparent !important;
554
- border: none !important;
 
555
  box-shadow: none !important;
556
  padding: 0 !important;
557
  height: 44px !important;
558
  line-height: 44px !important;
559
  font-size: 0.95rem !important;
560
  width: 100% !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
561
  }
562
  /* The little caret/arrow icon container β€” vertically center it */
563
  [class*="gradio-container"] [data-testid="dropdown"] .icon-wrap,
@@ -650,6 +671,21 @@ gradio-app > div {
650
  }
651
  [class*="gradio-container"] .tab-wrapper button.selected { color: var(--q-accent) !important; }
652
  [class*="gradio-container"] .tab-wrapper button.selected::after { background: var(--q-accent) !important; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
653
  /* Kill any stray orange/thick separator that Gradio paints above the tab
654
  panel content (border-top or ::before on the tab content wrapper). */
655
  [class*="gradio-container"] .tabitem,
@@ -1622,12 +1658,12 @@ EXAMPLES = [
1622
  {
1623
  "category": "Fixed facts",
1624
  "icon": "🎯",
1625
- "text": "Who wrote the novel 1984, and when was it first published?",
1626
  },
1627
  {
1628
  "category": "Time-varying",
1629
  "icon": "πŸ“ˆ",
1630
- "text": "Who is the current CEO of Tesla, and what is the company's latest stock price?",
1631
  },
1632
  {
1633
  "category": "Multi-constraints",
 
533
  [class*="gradio-container"] [data-testid="dropdown"] .secondary-wrap,
534
  [class*="gradio-container"] [data-testid="dropdown"] .wrap-inner,
535
  [class*="gradio-container"] [data-testid="dropdown"] .input-container,
536
+ [class*="gradio-container"] [data-testid="dropdown"] .single-select,
537
  [class*="gradio-container"] .gradio-dropdown .wrap,
538
  [class*="gradio-container"] .gradio-dropdown .wrap-inner,
539
  [class*="gradio-container"] .gradio-dropdown .secondary-wrap,
540
+ [class*="gradio-container"] .gradio-dropdown .input-container,
541
+ [class*="gradio-container"] .gradio-dropdown .single-select,
542
  [class*="gradio-container"] [class*="dropdown"] .wrap {
543
  background: transparent !important;
544
+ border: 0 !important;
545
+ outline: 0 !important;
546
  box-shadow: none !important;
547
+ border-radius: 0 !important;
548
  width: 100% !important;
549
  min-height: 44px !important;
550
  padding: 0 14px !important;
 
553
  box-sizing: border-box !important;
554
  }
555
  [class*="gradio-container"] [data-testid="dropdown"] input,
556
+ [class*="gradio-container"] .gradio-dropdown input,
557
+ [class*="gradio-container"] [data-testid="dropdown"] select,
558
+ [class*="gradio-container"] .gradio-dropdown select {
559
  background: transparent !important;
560
+ border: 0 !important;
561
+ outline: 0 !important;
562
  box-shadow: none !important;
563
  padding: 0 !important;
564
  height: 44px !important;
565
  line-height: 44px !important;
566
  font-size: 0.95rem !important;
567
  width: 100% !important;
568
+ border-radius: 0 !important;
569
+ }
570
+ /* Force-remove any nested pill/rounded background that makes the dropdown
571
+ look like it has two concentric frames. */
572
+ [class*="gradio-container"] [data-testid="dropdown"] .container,
573
+ [class*="gradio-container"] [data-testid="dropdown"] .wrap > .wrap,
574
+ [class*="gradio-container"] .gradio-dropdown .container,
575
+ [class*="gradio-container"] .gradio-dropdown .wrap > .wrap {
576
+ border: 0 !important;
577
+ outline: 0 !important;
578
+ box-shadow: none !important;
579
+ background: transparent !important;
580
+ border-radius: 0 !important;
581
+ padding: 0 !important;
582
  }
583
  /* The little caret/arrow icon container β€” vertically center it */
584
  [class*="gradio-container"] [data-testid="dropdown"] .icon-wrap,
 
671
  }
672
  [class*="gradio-container"] .tab-wrapper button.selected { color: var(--q-accent) !important; }
673
  [class*="gradio-container"] .tab-wrapper button.selected::after { background: var(--q-accent) !important; }
674
+ /* Hide the orange streaming-progress bar that Gradio paints at the top of
675
+ the Markdown/Code panel while a run is in flight. */
676
+ [class*="gradio-container"] .progress,
677
+ [class*="gradio-container"] .progress-level,
678
+ [class*="gradio-container"] .progress-level-inner,
679
+ [class*="gradio-container"] .progress-bar,
680
+ [class*="gradio-container"] .progress-text,
681
+ [class*="gradio-container"] [class*="progress-level"],
682
+ [class*="gradio-container"] .generating,
683
+ [class*="gradio-container"] div[class*="progress-bar"] {
684
+ display: none !important;
685
+ background: transparent !important;
686
+ border: 0 !important;
687
+ height: 0 !important;
688
+ }
689
  /* Kill any stray orange/thick separator that Gradio paints above the tab
690
  panel content (border-top or ::before on the tab content wrapper). */
691
  [class*="gradio-container"] .tabitem,
 
1658
  {
1659
  "category": "Fixed facts",
1660
  "icon": "🎯",
1661
+ "text": "On the Apollo 11 mission, what were the exact call signs of the command module and the lunar module, who piloted each one, and how many hours did the lunar module spend on the Moon's surface before ascent?",
1662
  },
1663
  {
1664
  "category": "Time-varying",
1665
  "icon": "πŸ“ˆ",
1666
+ "text": "Who currently holds the men's 100m world record, what is the exact time, and when and where was it set? Also give the next-fastest legal time ever recorded and by whom.",
1667
  },
1668
  {
1669
  "category": "Multi-constraints",