From 8ac93ff2da91afe236586bddc7dc1d5a336e2a76 Mon Sep 17 00:00:00 2001 From: Enrico Ros Date: Thu, 14 Mar 2024 03:28:08 -0700 Subject: [PATCH] Beam: update explainer, with an end --- src/common/beam/BeamExplainer.tsx | 44 ++++++++++----------- src/common/components/ExplainerCarousel.tsx | 17 ++++++-- 2 files changed, 35 insertions(+), 26 deletions(-) diff --git a/src/common/beam/BeamExplainer.tsx b/src/common/beam/BeamExplainer.tsx index 1a89603a0..a4ad8ef01 100644 --- a/src/common/beam/BeamExplainer.tsx +++ b/src/common/beam/BeamExplainer.tsx @@ -35,16 +35,16 @@ Your journey to brilliance continues. Unlock the power of **Beaming** to explore **Beam** allows you to run multiple AI models in parallel, exploring the solution space from different points of view. 1. Reach closer to your goal, faster -2. Tap into multiple AI perspectives -3. Uncover beyond conventional solutions +2. Tap into multiple AI perspectives at once +3. Discover unconventional solutions #### How to Beam (Phase 1/2): -- Define your problem -- Launch multiple AI models, up to 8 -- Keep good responses, discard the noise, repeat +- Clearly define your problem +- Launch up to 8 AI models in parallel +- Keep insightful responses, filter out the noise, and repeat -> Beam until you are satisfied or undecided on a few responses. +> Beam until you are satisfied or have narrowed down to a few promising responses. **Beaming** is the first step. Be curious. `, @@ -55,23 +55,23 @@ Your journey to brilliance continues. Unlock the power of **Beaming** to explore titleSpark: 'MERGE', titleSuffix: ': Convergence', // Synthesis, Convergence mdContent: ` -**Merge** combines the best AI responses into a single one. +**Merge** combines the most valuable AI responses into a single cohesive response. 1. Combine insights into one solution -2. Leverage collective AI wisdom +2. Leverage the collective wisdom of AI #### How to Merge: -Uses all the remaining Beam responses, and lets you choose how to fuse them together. +Utilizes all the remaining Beam responses and allows you to choose how to fuse them. - Select the fusion *LLM* - Choose a Merge *method*, then *start*: - - **✨ Pick**: AI chooses the best response - - **✨ Fusion**: AI combines the best parts of each response - - **✨ Compare**: AI breaks down and compares the responses - - **✨ Custom**: define your own fusion prompt + - **✨ Pick**: AI selects the most promising response + - **✨ Fusion**: AI combines the best elements of each response + - **✨ Compare**: AI analyzes and compares the responses + - **✨ Custom**: Define your own fusion prompt - Review and accept the results, or try again -**Done**, you can now bring the merged message, or any other message, back to the chat. +**Done**. You can now bring the merged message or any other message back to the chat. `, // > Merge until you have a single, high-quality response. Or choose the final response manually, skipping merge. }, { @@ -79,19 +79,19 @@ Uses all the remaining Beam responses, and lets you choose how to fuse them toge stepName: 'Tips', titleSuffix: 'Effectiveness Tips', mdContent: ` -#### Human in the loop -You, the user, provide the creative direction and final judgement. The AI models are justy tools to give you drafts to quickly evaluate. -There are additional deep reasons why this works [in our blog](https://big-agi.com/blog/introducing-beam). +#### Human-in-the-loop · N × GPT-4 -> GPT-5 +You, the user, provide creative direction and final judgement. The AI models are powerful tools that generate drafts for you to quickly evaluate and refine. +There are profound reasons why this approach works, which we explore [in our blog](https://big-agi.com/blog/introducing-beam). #### Best Use -This tool is crafted for the **early stages** of a process, where it delivers unparalleled insights and perspectives precisely **when your -project needs clarity and direction**. +This tool is designed for the **early stages** of a process, where it delivers unparalleled insights and perspectives precisely **when your +project needs clarity and direction**. The diversity of perspectives acts **like the wisdom of a seasoned team**, offering a wide array of solutions and viewpoints. -#### Warnings -The tool **will consume more Tokens** than a regular chat, which is one more reason to use it early on when -a chat history is short and the return of investment is greater. +#### Considerations +The tool **will consume more Tokens** than a regular chat, which is another reason to use it early on when +a chat history is short, and the return on investment is greater. `, }, ] as const; diff --git a/src/common/components/ExplainerCarousel.tsx b/src/common/components/ExplainerCarousel.tsx index a55c7addb..46191e2d7 100644 --- a/src/common/components/ExplainerCarousel.tsx +++ b/src/common/components/ExplainerCarousel.tsx @@ -9,6 +9,7 @@ import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownR import { ChatMessageMemo } from '../../apps/chat/components/message/ChatMessage'; import { AgiSquircleIcon } from '~/common/components/icons/AgiSquircleIcon'; +import { ChatBeamIcon } from '~/common/components/icons/ChatBeamIcon'; import { createDMessage } from '~/common/state/store-chats'; import { useIsMobile } from '~/common/components/useMatchMedia'; @@ -42,6 +43,7 @@ function AllStepsStepper(props: { steps: ExplainerStep[], activeIndex: number, isMobile: boolean, + onStepClicked: (stepIndex: number) => void, }) { return ( @@ -54,6 +56,7 @@ function AllStepsStepper(props: { orientation='vertical' completed={completed} active={active} + onClick={() => props.onStepClicked(stepIndex)} indicator={ {completed ? : active ? : undefined} @@ -99,7 +102,7 @@ export function ExplainerCarousel(props: { const isMobile = useIsMobile(); // derived state - const isDone = stepIndex > props.steps.length - 1; + const isLastPage = stepIndex === props.steps.length - 1; const activeStep = props.steps[stepIndex] ?? null; // handlers @@ -155,6 +158,7 @@ export function ExplainerCarousel(props: { steps={props.steps} activeIndex={stepIndex} isMobile={isMobile} + onStepClicked={setStepIndex} /> @@ -188,14 +192,19 @@ export function ExplainerCarousel(props: { {/* Advance Button */} {/* Back Button */}