Skip to content

Commit ff4d6e8

Browse files
jiayizxjiayizx
committed
sync new style
1 parent 48b023a commit ff4d6e8

File tree

5 files changed

+114
-115
lines changed

5 files changed

+114
-115
lines changed

‎app/(dashboard)/layout.tsx‎

Lines changed: 3 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,11 @@
11
'use client';
22

3-
import { Github, BookOpen, FileText, NotebookPen } from "lucide-react";
4-
53
import Link from 'next/link';
6-
import { use, useState, Suspense } from 'react';
7-
import { Button } from '@/components/ui/button';
8-
import { CircleIcon, Home, LogOut } from 'lucide-react';
9-
import {
10-
DropdownMenu,
11-
DropdownMenuContent,
12-
DropdownMenuItem,
13-
DropdownMenuTrigger
14-
} from '@/components/ui/dropdown-menu';
15-
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
16-
import { useRouter } from 'next/navigation';
17-
import { User } from '@/lib/db/schema';
18-
import useSWR from 'swr';
19-
20-
const fetcher = (url: string) => fetch(url).then((res) => res.json());
4+
import { Suspense } from 'react';
5+
import { CircleIcon } from 'lucide-react';
216

227
function UserMenu() {
23-
const [isMenuOpen, setIsMenuOpen] = useState(false);
24-
const router = useRouter();
25-
26-
async function handleSignOut() {
27-
router.refresh();
28-
router.push('/');
29-
}
30-
31-
return (
32-
<>
33-
<Link
34-
href="/"
35-
className="text-sm font-medium text-gray-700 hover:text-gray-900"
36-
>
37-
</Link>
38-
<Button asChild className="rounded-full">
39-
<Link href="https://arxiv.org/abs/2510.01171" className="flex items-center gap-2">
40-
<FileText size={16} />
41-
Paper
42-
</Link>
43-
</Button>
44-
<Button asChild className="rounded-full">
45-
<Link href="https://simonucl.notion.site/verbalized-sampling" className="flex items-center gap-2" target="_blank" rel="noopener noreferrer">
46-
<BookOpen size={16} />
47-
Blog
48-
</Link>
49-
</Button>
50-
<Button asChild className="rounded-full">
51-
<Link href="https://github.com/CHATS-lab/verbalized-sampling" className="flex items-center gap-2">
52-
<Github size={16} />
53-
Github
54-
</Link>
55-
</Button>
56-
<Button asChild className="rounded-full">
57-
<Link href="https://x.com/YOUR_X_THREAD_URL" className="flex items-center gap-2">
58-
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
59-
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
60-
</svg>
61-
X Thread
62-
</Link>
63-
</Button>
64-
<DropdownMenu>
65-
<DropdownMenuTrigger asChild>
66-
<Button className="rounded-full flex items-center gap-2">
67-
<NotebookPen size={16} />
68-
Notebooks
69-
</Button>
70-
</DropdownMenuTrigger>
71-
<DropdownMenuContent align="end">
72-
<DropdownMenuItem asChild>
73-
<Link href="https://colab.research.google.com/drive/1UDk4W5w6gF0dQ9Tpu0sPQethEht51GXL#offline=true&sandboxMode=true" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
74-
Direct vs. Verbalized Sampling
75-
</Link>
76-
</DropdownMenuItem>
77-
<DropdownMenuItem asChild>
78-
<Link href="https://colab.research.google.com/drive/1J18VJRnrCjIb6sTivY-znb8C3JsLQCIz#offline=true&sandboxMode=true" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
79-
Image Generation with VS
80-
</Link>
81-
</DropdownMenuItem>
82-
<DropdownMenuItem asChild>
83-
<Link href="https://colab.research.google.com/drive/1eC0nIUVC1kyANxxzhNib44qmPphdWy9o#offline=true&sandboxMode=true" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
84-
Complete Framework Tutorial
85-
</Link>
86-
</DropdownMenuItem>
87-
</DropdownMenuContent>
88-
</DropdownMenu>
89-
</>
90-
);
8+
return null;
919
}
9210

9311
function Header() {

‎app/(dashboard)/page.tsx‎

Lines changed: 94 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,13 @@
33
import React, { useState, useEffect } from 'react';
44
import Link from 'next/link';
55
import { Button } from '@/components/ui/button';
6-
import { ArrowRight, CreditCard, Database, Calendar, User, Clock, Eye, Heart, ThumbsUp, Share2 } from 'lucide-react';
6+
import { ArrowRight, CreditCard, Database, Calendar, User, Clock, Eye, Heart, ThumbsUp, Share2, Github, BookOpen, FileText, NotebookPen } from 'lucide-react';
7+
import {
8+
DropdownMenu,
9+
DropdownMenuContent,
10+
DropdownMenuItem,
11+
DropdownMenuTrigger
12+
} from '@/components/ui/dropdown-menu';
713

814
import { Terminal_Prompt } from './terminal_prompt';
915

@@ -608,6 +614,61 @@ export default function HomePage() {
608614
{/* <div className="text-xl font-bold">
609615
<span className="text-orange-600">ICML 2025 Outstanding Paper</span>
610616
</div> */}
617+
618+
{/* Action Buttons */}
619+
<div className="flex flex-wrap justify-center gap-4 mt-8">
620+
<Button asChild className="rounded-full">
621+
<Link href="https://arxiv.org/abs/2510.01171" className="flex items-center gap-2">
622+
<FileText size={16} />
623+
Paper
624+
</Link>
625+
</Button>
626+
<Button asChild className="rounded-full">
627+
<Link href="https://simonucl.notion.site/verbalized-sampling" className="flex items-center gap-2" target="_blank" rel="noopener noreferrer">
628+
<BookOpen size={16} />
629+
Blog
630+
</Link>
631+
</Button>
632+
<Button asChild className="rounded-full">
633+
<Link href="https://github.com/CHATS-lab/verbalized-sampling" className="flex items-center gap-2">
634+
<Github size={16} />
635+
Github
636+
</Link>
637+
</Button>
638+
<Button asChild className="rounded-full">
639+
<Link href="https://x.com/YOUR_X_THREAD_URL" className="flex items-center gap-2">
640+
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
641+
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
642+
</svg>
643+
X Thread
644+
</Link>
645+
</Button>
646+
<DropdownMenu>
647+
<DropdownMenuTrigger asChild>
648+
<Button className="rounded-full flex items-center gap-2">
649+
<NotebookPen size={16} />
650+
Notebooks
651+
</Button>
652+
</DropdownMenuTrigger>
653+
<DropdownMenuContent align="end">
654+
<DropdownMenuItem asChild>
655+
<Link href="https://colab.research.google.com/drive/1UDk4W5w6gF0dQ9Tpu0sPQethEht51GXL#offline=true&sandboxMode=true" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
656+
Direct vs. Verbalized Sampling
657+
</Link>
658+
</DropdownMenuItem>
659+
<DropdownMenuItem asChild>
660+
<Link href="https://colab.research.google.com/drive/1J18VJRnrCjIb6sTivY-znb8C3JsLQCIz#offline=true&sandboxMode=true" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
661+
Image Generation with VS
662+
</Link>
663+
</DropdownMenuItem>
664+
<DropdownMenuItem asChild>
665+
<Link href="https://colab.research.google.com/drive/1eC0nIUVC1kyANxxzhNib44qmPphdWy9o#offline=true&sandboxMode=true" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
666+
Complete Framework Tutorial
667+
</Link>
668+
</DropdownMenuItem>
669+
</DropdownMenuContent>
670+
</DropdownMenu>
671+
</div>
611672
</div>
612673
</div>
613674
</section>
@@ -643,7 +704,7 @@ export default function HomePage() {
643704
video.load();
644705
}}
645706
>
646-
<source src="/video/Demo.m4v" type="video/mp4" />
707+
<source src="/video/Demo.mp4" type="video/mp4" />
647708
Your browser does not support the video tag.
648709
</video>
649710
<div className="text-sm text-gray-500 mt-2">
@@ -678,8 +739,7 @@ export default function HomePage() {
678739
<div className="lg:grid lg:grid-cols-2 lg:gap-12 lg:items-center">
679740
<div>
680741
<h2 className="text-xl font-bold text-gray-700 tracking-tight sm:text-3xl mb-6">
681-
Make Your LLM Output More Diverse<br />
682-
<span className="text-orange-500">With Verbalized Sampling!</span>
742+
Make Your LLM Output More Diverse <span className="text-orange-500">With Verbalized Sampling</span>
683743
</h2>
684744
<div className="space-y-4 text-base text-gray-600">
685745
<p>
@@ -704,7 +764,7 @@ export default function HomePage() {
704764
<div className="w-full">
705765
{(() => {
706766
const { Terminal } = require("./terminal_package");
707-
return <Terminal />;
767+
return <Terminal height="220px"/>;
708768
})()}
709769
</div>
710770
</div>
@@ -747,7 +807,7 @@ export default function HomePage() {
747807
</div>
748808
</section>
749809

750-
<section className="py-12 bg-gray-50">
810+
{/* <section className="py-12 bg-gray-50">
751811
<div className="max-w-6xl mx-auto px-8 sm:px-12 lg:px-16">
752812
<div className="lg:grid lg:grid-cols-2 lg:gap-12 lg:items-center">
753813
<div className="mt-8 lg:mt-0">
@@ -786,14 +846,16 @@ export default function HomePage() {
786846
</div>
787847
</div>
788848
</div>
789-
</section>
849+
</section> */}
790850

791-
<section className="py-12 bg-white">
851+
<section className="py-12 bg-gray-50">
792852
<div className="max-w-6xl mx-auto px-8 sm:px-12 lg:px-16">
793853
<div className="max-w-6xl mx-auto text-center">
794854
<h2 className="text-xl font-bold text-gray-700 tracking-tight sm:text-3xl mb-6">
795-
Where Verbalized Sampling Works:<br />
796-
<span className="block text-orange-500">Creative Writing, Social Simulation, ..., and Your Task!</span>
855+
{/* Where Verbalized Sampling Works:<br />
856+
<span className="block text-orange-500">Creative Writing, Social Simulation, ..., and Your Task!</span> */}
857+
How to Mitigate Mode Collapse?<br />
858+
<span className="block text-orange-500">Verbalized Sampling</span>
797859
{/* <RollingText /> */}
798860
</h2>
799861
<div className="text-center mb-8">
@@ -803,27 +865,36 @@ export default function HomePage() {
803865
className="w-full max-w-6xl mx-auto rounded-lg shadow-lg"
804866
/>
805867
<p className="text-sm text-gray-500 mt-3 text-center italic">
806-
<strong>Figure 4:</strong> Qualitative and quantitative examples of Verbalized Sampling on creative writing, dialogue simulation, and enumerative open-ended QA.
868+
<strong>Figure 3:</strong> Qualitative and quantitative examples of Verbalized Sampling on creative writing, dialogue simulation, and enumerative open-ended QA.
807869
</p>
808870
</div>
809871
<div className="space-y-4 text-base text-gray-600 text-left max-w-5xl mx-auto xl:max-w-3xl">
810872
<p>
811-
Our comprehensive experiments on multiple tasks demonstrate that Verbalized Sampling significantly improves the diversity-quality trade-off across tasks and model families,
812-
without compromising factual accuracy and safety.
873+
Motivated by the theoretical understanding of mode collapse, we propose Verbalized Sampling (VS).
874+
Through comprehensive experiments across multiple tasks, we demonstrate that this approach significantly improves the diversity-quality trade-off across
875+
model families without compromising factual accuracy and safety.
813876
</p>
814877
<p>
815-
As shown in Figure 4, for <strong>story writing</strong>, VS improves the output diversity.
816-
For <strong>dialogue simulation</strong>, VS simulates the donation amount distribution much closer to the human distribution, and generates more realistic persuasion behaviors.
817-
On the task of <strong>enumerative open-ended QA</strong>, we ask the model to "generate US states". We first query a pretraining corpus (RedPajama) to establish a "reference" distribution of US
818-
state names in the pretraining data. The verbalized probability distribution generated by VS, when averaged over 10 trials, closely aligns with this reference pretraining distribution (KL=0.12).
819-
In contrast, direct prompting collapses into a few modes, repeatedly outputting states like California and Texas.
878+
<ul className="list-disc pl-6 space-y-2">
879+
<li>
880+
For <strong>story writing</strong>, VS improves the output diversity.
881+
</li>
882+
<li>
883+
For <strong>dialogue simulation</strong>, VS simulates the donation amount distribution much closer to the human distribution, and generates more realistic persuasion behaviors.
884+
</li>
885+
<li>
886+
For <strong>enumerative open-ended QA</strong>, we ask the model to "generate US states".
887+
The verbalized probability distribution generated by VS, when averaged over 10 trials, closely aligns with the reference pretraining distribution (queried from RedPajama).
888+
In contrast, direct prompting collapses into a few modes, repeatedly outputting states like California and Texas.
889+
</li>
890+
</ul>
820891
</p>
821892
</div>
822893
</div>
823894
</div>
824895
</section>
825896

826-
<section className="py-12 bg-gray-50">
897+
<section className="py-12 bg-white">
827898
<div className="max-w-6xl mx-auto px-8 sm:px-12 lg:px-16">
828899
<div className="lg:grid lg:grid-cols-2 lg:gap-12 lg:items-center">
829900
<div>
@@ -833,7 +904,7 @@ export default function HomePage() {
833904
</h2>
834905
<div className="space-y-4 text-base text-gray-600">
835906
<p>
836-
We observe an <strong>emergent trend</strong> where larger models benefit more from VS. Figure 5 shows the diversity gain over the direct prompting which suffers from mode collapse.
907+
We also observe an <strong>emergent trend</strong> where larger models benefit more from VS. Figure 5 shows the diversity gain over the direct prompting which suffers from mode collapse.
837908
Across all VS variants, larger models (GPT-4.1, Gemini-2.5-Pro) achieve diversity gains 1.5 to 2 times greater than smaller models (GPT-4.1-Mini, Gemini-2.5-Flash).
838909
</p>
839910
</div>
@@ -853,7 +924,7 @@ export default function HomePage() {
853924
</div>
854925
</section>
855926

856-
<section className="py-12 bg-white">
927+
<section className="py-12 bg-gray-50">
857928
<div className="max-w-6xl mx-auto px-8 sm:px-12 lg:px-16">
858929
<div className="lg:grid lg:grid-cols-2 lg:gap-12 lg:items-center">
859930
<div>
@@ -884,7 +955,7 @@ export default function HomePage() {
884955
</div>
885956
</section>
886957

887-
<section className="py-12 bg-gray-50 w-full">
958+
<section className="py-12 bg-white w-full">
888959
<div className="max-w-6xl mx-auto px-8 sm:px-12 lg:px-16">
889960
<div className="lg:grid lg:grid-cols-12 lg:gap-4">
890961
<div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-7 lg:text-left">
@@ -916,7 +987,7 @@ export default function HomePage() {
916987
</section>
917988

918989
{/* BibTeX Citation */}
919-
<section className="py-12 bg-white">
990+
<section className="py-12 bg-gray-50">
920991
<div className="max-w-6xl mx-auto px-8 sm:px-12 lg:px-16">
921992
<div className="text-center">
922993
<h2 className="text-xl font-bold text-gray-700 sm:text-3xl mb-8">

‎app/(dashboard)/terminal_package.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@
33
import { useState, useEffect } from 'react';
44
import { Copy, Check } from 'lucide-react';
55

6-
export function Terminal() {
6+
interface TerminalProps {
7+
height?: string;
8+
}
9+
10+
export function Terminal({ height = "auto" }: TerminalProps) {
711
const pipCommand = [
812
'pip install verbalized-sampling'
913
];
@@ -124,9 +128,9 @@ export function Terminal() {
124128
};
125129

126130
return (
127-
<div className="w-full min-w-full rounded-lg shadow-lg overflow-hidden bg-gray-900 text-white font-mono text-sm relative">
128-
<div className="p-4">
129-
<div className="flex justify-between items-center mb-4">
131+
<div className="w-full min-w-full rounded-lg shadow-lg overflow-hidden bg-gray-900 text-white font-mono text-sm relative" style={{ height }}>
132+
<div className="p-2">
133+
<div className="flex justify-between items-center mb-2">
130134
<div className="flex space-x-2">
131135
<div className="w-3 h-3 rounded-full bg-red-500"></div>
132136
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
@@ -144,9 +148,9 @@ export function Terminal() {
144148
)}
145149
</button>
146150
</div>
147-
<div className="space-y-4">
151+
<div className="space-y-2">
148152
{/* Pip Install Block */}
149-
<div className="space-y-2">
153+
<div className="space-y-1">
150154
{pipCommand.map((step, index) => (
151155
<div
152156
key={`pip-${index}`}
@@ -158,7 +162,7 @@ export function Terminal() {
158162
</div>
159163

160164
{/* Python Code Block */}
161-
<div className="space-y-2">
165+
<div className="space-y-1">
162166
{pythonCode.map((step, index) => {
163167
const globalIndex = pipCommand.length + 1 + index;
164168
return (

‎app/(dashboard)/terminal_prompt.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@ import { Copy, Check } from 'lucide-react';
66
export function Terminal_Prompt() {
77
const [copied, setCopied] = useState(false);
88

9+
// const terminalSteps = [
10+
// { line: 'Generate 10 responses to the user query, each within a separate <response> tag.', showPrompt: true },
11+
// { line: 'Each <response> tag must include a <text> and a numeric <probability>.', showPrompt: false },
12+
// { line: 'Randomly sample the responses from the full distribution.', showPrompt: false },
13+
// { line: '<user_query>Write a 100-word story about a bear.</user_query>', showPrompt: true },
14+
// ];
915
const terminalSteps = [
1016
{ line: 'Generate 10 responses to the user query, each within a separate <response> tag.', showPrompt: true },
1117
{ line: 'Each <response> tag must include a <text> and a numeric <probability>.', showPrompt: false },

public/video/Demo.m4v renamed to public/video/Demo.mp4

31.3 MB
Binary file not shown.

0 commit comments

Comments
 (0)