mirror of
https://github.com/hanzoai/papers.git
synced 2026-10-29 07:34:31 +00:00
94 lines
3.4 KiB
TeX
94 lines
3.4 KiB
TeX
\section{Generative UI}
|
|
|
|
\label{sec:genui}
|
|
|
|
\subsection{Component System}
|
|
|
|
Hanzo Search renders answers using a library of 12 generative UI components, selected based on query intent:
|
|
|
|
\begin{table}[H]
|
|
\centering
|
|
\small
|
|
\begin{tabular}{lll}
|
|
\toprule
|
|
\textbf{Component} & \textbf{Intent} & \textbf{Description} \\
|
|
\midrule
|
|
AnswerCard & Factual & Concise answer with sources \\
|
|
StepList & How-to & Numbered steps with details \\
|
|
CompareTable & Comparison & Side-by-side feature table \\
|
|
Timeline & Historical & Chronological event display \\
|
|
CodeBlock & Technical & Syntax-highlighted code \\
|
|
Calculator & Computational & Interactive calculator \\
|
|
Chart & Data & Bar/line/pie chart rendering \\
|
|
MapView & Location & Geographic visualization \\
|
|
ProductCard & Shopping & Product info with pricing \\
|
|
PerspectiveCards & Opinion & Multiple viewpoint display \\
|
|
LinkCard & Navigational & Direct link with preview \\
|
|
FreeForm & Creative & Unrestricted rich text \\
|
|
\bottomrule
|
|
\end{tabular}
|
|
\caption{Generative UI component library.}
|
|
\label{tab:components}
|
|
\end{table}
|
|
|
|
\subsection{Component Selection}
|
|
|
|
The intent classifier (\S\ref{sec:query}) determines the primary component. A secondary pass by the LLM may add supplementary components (e.g., a factual answer with a chart).
|
|
|
|
\begin{algorithm}[H]
|
|
\caption{Generative UI Rendering}
|
|
\label{alg:genui}
|
|
\begin{algorithmic}[1]
|
|
\Require Answer $a$, citations $\mathcal{C}$, intent $c$, data $\mathcal{D}$
|
|
\State $\text{primary} \gets \text{IntentToComponent}(c)$
|
|
\State $\text{structured} \gets \text{LLM.Structure}(a, \text{primary})$
|
|
\State \Comment{Extract structured data for rich components}
|
|
\If{$c = \text{comparison}$}
|
|
\State $\text{table} \gets \text{LLM.ExtractTable}(a)$
|
|
\State $\text{structured.table} \gets \text{table}$
|
|
\ElsIf{$c = \text{computational}$}
|
|
\State $\text{chart\_data} \gets \text{LLM.ExtractData}(a, \mathcal{D})$
|
|
\State $\text{structured.chart} \gets \text{chart\_data}$
|
|
\EndIf
|
|
\State $\text{UI} \gets \text{React.Render}(\text{structured}, \mathcal{C})$
|
|
\State \Return $\text{UI}$
|
|
\end{algorithmic}
|
|
\end{algorithm}
|
|
|
|
\subsection{Streaming Architecture}
|
|
|
|
Hanzo Search streams both text and UI components to the user using Server-Sent Events (SSE). The streaming protocol supports three event types:
|
|
|
|
\begin{enumerate}[leftmargin=1.4em]
|
|
\item \textbf{text\_delta}: Incremental text tokens for the answer body.
|
|
\item \textbf{component}: A complete UI component (table, chart) sent when ready.
|
|
\item \textbf{citation}: A source citation with URL, title, and snippet.
|
|
\end{enumerate}
|
|
|
|
This enables progressive rendering: users see the text answer streaming in real-time while structured components (tables, charts) appear as soon as the relevant data is extracted.
|
|
|
|
\subsection{User Engagement Results}
|
|
|
|
A/B testing with 50K users over 30 days (25K per condition):
|
|
|
|
\begin{table}[H]
|
|
\centering
|
|
\small
|
|
\begin{tabular}{lcc}
|
|
\toprule
|
|
\textbf{Metric} & \textbf{Text-only} & \textbf{Generative UI} \\
|
|
\midrule
|
|
Time on page & 42s & 67s (+59\%) \\
|
|
Follow-up queries & 2.3 & 1.2 ($-$48\%) \\
|
|
Task completion & 61\% & 82\% (+34\%) \\
|
|
User satisfaction & 3.8/5 & 4.4/5 (+16\%) \\
|
|
Click-through to sources & 34\% & 52\% (+53\%) \\
|
|
\bottomrule
|
|
\end{tabular}
|
|
\caption{A/B test results: generative UI vs text-only answers.}
|
|
\label{tab:ab_test}
|
|
\end{table}
|
|
|
|
The reduction in follow-up queries ($-$48\%) indicates that generative UI answers are more self-contained, reducing the need for refinement.
|
|
|