Merge branch 'release-1.16.0'

enricoros · May 8, 2024 · 2894e16 · 2894e16
2 parents 60e4620 + c2340f3
commit 2894e16
Show file tree

Hide file tree

Showing 13 changed files with 161 additions and 69 deletions.
diff --git a/README.md b/README.md
@@ -17,18 +17,23 @@ Or fork & run on Vercel
 
 ## 👉 [roadmap](https://github.com/users/enricoros/projects/4/views/2) 👉 [installation](docs/installation.md) 👉 [documentation](docs/README.md)
 
-[//]: # (big-AGI is an open book; see the **[ready-to-ship and future ideas]&#40;https://github.com/users/enricoros/projects/4/views/2&#41;** in our open roadmap)
+> Note: bigger better features (incl. Beam-2) are being cooked outside of `main`.
 
-#### What's New in 1.15.1 · April 10, 2024 (minor release, models support)
+[//]: # (big-AGI is an open book; see the **[ready-to-ship and future ideas]&#40;https://github.com/users/enricoros/projects/4/views/2&#41;** in our open roadmap)
 
-- Support for the newly released Gemini Pro 1.5 models
-- Support for the new OpenAI 2024-04-09 Turbo models
-- Ctrl+S and Ctrl+O to save/load chats on desktop
-- Resilience fixes after the large success of 1.15.0
+### What's New in 1.16.0 · May 9, 2024 · Crystal Clear
 
-> Note: Beam-2 and new larger features are being cooked outside of `main`.
+- [Beam](https://big-agi.com/blog/beam-multi-model-ai-reasoning) core and UX improvements based on user feedback
+- Chat cost estimation 💰 (enable it in Labs / hover the token counter)
+- Major enhancements to the Auto-Diagrams tool
+- Save/load chat files with Ctrl+S / Ctrl+O on desktop
+- YouTube Transcriber Persona for chatting with video content, [#500](https://github.com/enricoros/big-AGI/pull/500)
+- Improved formula rendering (LaTeX), and dark-mode diagrams, [#508](https://github.com/enricoros/big-AGI/issues/508), [#520](https://github.com/enricoros/big-AGI/issues/520)
+- More: code soft-wrap, chat text selection toolbar, 3x faster on Apple silicon, [#517](https://github.com/enricoros/big-AGI/issues/517), [507](https://github.com/enricoros/big-AGI/pull/507)
+- Update Anthropic, Groq, Ollama, OpenAI, OpenRouter, Perplexity models
+- Developers: update the LLMs data structures
 
-### 3,000 Commits Milestone · April 7, 2024
+#### 3,000 Commits Milestone · April 7, 2024
 
 ![big-AGI Milestone](https://github.com/enricoros/big-AGI/assets/32999/47fddbb1-9bd6-4b58-ace4-781dfcb80923)
 
@@ -42,6 +47,7 @@ Or fork & run on Vercel
 - Message **Starring ⭐**: star important messages within chats, to attach them later. [#476](https://github.com/enricoros/big-AGI/issues/476)
 - Enhanced the default Persona
 - Fixes to Gemini models and SVGs, improvements to UI and icons
+- 1.15.1: Support for Gemini Pro 1.5 and OpenAI Turbo models
 - Beast release, over 430 commits, 10,000+ lines changed: [release notes](https://github.com/enricoros/big-AGI/releases/tag/v1.15.0), and changes [v1.14.1...v1.15.0](https://github.com/enricoros/big-AGI/compare/v1.14.1...v1.15.0)
 
 ### What's New in 1.14.1 · March 7, 2024 · Modelmorphic

diff --git a/docs/changelog.md b/docs/changelog.md
@@ -10,6 +10,24 @@ by release.
 - milestone: [1.16.0](https://github.com/enricoros/big-agi/milestone/16)
 - work in progress: [big-AGI open roadmap](https://github.com/users/enricoros/projects/4/views/2), [help here](https://github.com/users/enricoros/projects/4/views/4)
 
+### What's New in 1.16.0 · May 9, 2024 · Crystal Clear
+
+- [Beam](https://big-agi.com/blog/beam-multi-model-ai-reasoning) core and UX improvements based on user feedback
+- Chat cost estimation 💰 (enable it in Labs / hover the token counter)
+- Major enhancements to the Auto-Diagrams tool
+- Save/load chat files with Ctrl+S / Ctrl+O on desktop
+- YouTube Transcriber Persona for chatting with video content, [#500](https://github.com/enricoros/big-AGI/pull/500)
+- Improved formula rendering (LaTeX), and dark-mode diagrams, [#508](https://github.com/enricoros/big-AGI/issues/508), [#520](https://github.com/enricoros/big-AGI/issues/520)
+- More: code soft-wrap, chat text selection toolbar, 3x faster on Apple silicon, [#517](https://github.com/enricoros/big-AGI/issues/517), [507](https://github.com/enricoros/big-AGI/pull/507)
+- Update Anthropic, Groq, Ollama, OpenAI, OpenRouter, Perplexity models
+- Developers: update the LLMs data structures
+
+### What's New in 1.15.1 · April 10, 2024 (minor release, models support)
+
+- Support for the newly released Gemini Pro 1.5 models
+- Support for the new OpenAI 2024-04-09 Turbo models
+- Resilience fixes after the large success of 1.15.0
+
 ### What's New in 1.15.0 · April 1, 2024 · Beam
 
 - ⚠️ [**Beam**: the multi-model AI chat](https://big-agi.com/blog/beam-multi-model-ai-reasoning). find better answers, faster - a game-changer for brainstorming, decision-making, and creativity. [#443](https://github.com/enricoros/big-AGI/issues/443)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "big-agi",
-  "version": "1.15.1",
+  "version": "1.16.0",
   "private": true,
   "author": "Enrico Ros <[email protected]>",
   "repository": "https://github.com/enricoros/big-agi",

diff --git a/public/images/covers/release-cover-v1.16.0.png b/public/images/covers/release-cover-v1.16.0.png
diff --git a/src/apps/chat/components/composer/Composer.tsx b/src/apps/chat/components/composer/Composer.tsx
@@ -117,9 +117,10 @@ export function Composer(props: {
 
   // external state
   const { openPreferencesTab /*, setIsFocusedMode*/ } = useOptimaLayout();
-  const { labsAttachScreenCapture, labsCameraDesktop } = useUXLabsStore(useShallow(state => ({
+  const { labsAttachScreenCapture, labsCameraDesktop, labsShowCost } = useUXLabsStore(useShallow(state => ({
     labsAttachScreenCapture: state.labsAttachScreenCapture,
     labsCameraDesktop: state.labsCameraDesktop,
+    labsShowCost: state.labsShowCost,
   })));
   const timeToShowTips = useAppStateStore(state => state.usageCount > 2);
   const { novel: explainShiftEnter, touch: touchShiftEnter } = useUICounter('composer-shift-enter');
@@ -675,8 +676,8 @@ export function Composer(props: {
                   <TokenProgressbarMemo direct={tokensComposer} history={tokensHistory} responseMax={tokensReponseMax} limit={tokenLimit} tokenPriceIn={tokenPriceIn} tokenPriceOut={tokenPriceOut} />
                 )}
 
-                {!showChatReplyTo && !!tokenLimit && (
-                  <TokenBadgeMemo direct={tokensComposer} history={tokensHistory} responseMax={tokensReponseMax} limit={tokenLimit} tokenPriceIn={tokenPriceIn} tokenPriceOut={tokenPriceOut} showExcess absoluteBottomRight />
+                {!showChatReplyTo && tokenLimit > 0 && (
+                  <TokenBadgeMemo direct={tokensComposer} history={tokensHistory} responseMax={tokensReponseMax} limit={tokenLimit} tokenPriceIn={tokenPriceIn} tokenPriceOut={tokenPriceOut} showCost={labsShowCost} showExcess absoluteBottomRight />
                 )}
 
               </Box>

diff --git a/src/apps/chat/components/composer/TokenBadge.tsx b/src/apps/chat/components/composer/TokenBadge.tsx
@@ -8,8 +8,20 @@ function alignRight(value: number, columnSize: number = 8) {
   return str.padStart(columnSize);
 }
 
+function formatCost(cost: number) {
+  return cost < 1
+    ? (cost * 100).toFixed(cost < 0.010 ? 2 : 1) + ' ¢'
+    : '$ ' + cost.toFixed(2);
+}
+
 
-export function tokensPrettyMath(tokenLimit: number | 0, directTokens: number, historyTokens?: number, responseMaxTokens?: number, tokenPriceIn?: number, tokenPriceOut?: number): { color: ColorPaletteProp; message: string; remainingTokens: number } {
+export function tokensPrettyMath(tokenLimit: number | 0, directTokens: number, historyTokens?: number, responseMaxTokens?: number, tokenPriceIn?: number, tokenPriceOut?: number): {
+  color: ColorPaletteProp,
+  message: string,
+  remainingTokens: number,
+  costMax?: number,
+  costMin?: number,
+} {
   const usedInputTokens = directTokens + (historyTokens || 0);
   const usedMaxTokens = usedInputTokens + (responseMaxTokens || 0);
   const remainingTokens = tokenLimit - usedMaxTokens;
@@ -18,6 +30,10 @@ export function tokensPrettyMath(tokenLimit: number | 0, directTokens: number, h
   // message
   let message: string = gteLimit ? '⚠️ ' : '';
 
+  // costs
+  let costMax: number | undefined = undefined;
+  let costMin: number | undefined = undefined;
+
   // no limit: show used tokens only
   if (!tokenLimit) {
     message += `Requested: ${usedMaxTokens.toLocaleString()} tokens`;
@@ -33,24 +49,26 @@ export function tokensPrettyMath(tokenLimit: number | 0, directTokens: number, h
 
     // add the price, if available
     if (tokenPriceIn || tokenPriceOut) {
-      const costIn = tokenPriceIn ? usedInputTokens * tokenPriceIn / 1E6 : undefined;
+      costMin = tokenPriceIn ? usedInputTokens * tokenPriceIn / 1E6 : undefined;
       const costOutMax = (tokenPriceOut && responseMaxTokens) ? responseMaxTokens * tokenPriceOut / 1E6 : undefined;
-      if (costIn || costOutMax) {
+      if (costMin || costOutMax) {
         message += `\n\n\n▶ Chat Turn Cost (max, approximate)\n`;
 
-        if (costIn) message += '\n' +
+        if (costMin) message += '\n' +
           `       Input tokens: ${alignRight(usedInputTokens)}\n` +
           `    Input Price $/M: ${tokenPriceIn!.toFixed(2).padStart(8)}\n` +
-          `         Input cost: ${('$' + costIn!.toFixed(3)).padStart(8)}\n`;
+          `         Input cost: ${('$' + costMin!.toFixed(4)).padStart(8)}\n`;
 
         if (costOutMax) message += '\n' +
           `  Max output tokens: ${alignRight(responseMaxTokens!)}\n` +
           `   Output Price $/M: ${tokenPriceOut!.toFixed(2).padStart(8)}\n` +
-          `    Max output cost: ${('$' + costOutMax!.toFixed(3)).padStart(8)}\n`;
+          `    Max output cost: ${('$' + costOutMax!.toFixed(4)).padStart(8)}\n`;
 
-        const costMax = costIn && costOutMax ? costIn + costOutMax : undefined;
+        if (costMin) message += '\n' +
+          `    > Min turn cost: ${formatCost(costMin).padStart(8)}`;
+        costMax = (costMin && costOutMax) ? costMin + costOutMax : undefined;
         if (costMax) message += '\n' +
-          `    = Max turn cost: ${('$' + costMax.toFixed(4)).padStart(8)}`;
+          `    < Max turn cost: ${formatCost(costMax).padStart(8)}`;
       }
     }
   }
@@ -69,11 +87,11 @@ export function tokensPrettyMath(tokenLimit: number | 0, directTokens: number, h
         ? 'warning'
         : 'primary';
 
-  return { color, message, remainingTokens };
+  return { color, message, remainingTokens, costMax, costMin };
 }
 
 
-export const TokenTooltip = (props: { message: string | null, color: ColorPaletteProp, placement?: 'top' | 'top-end', children: React.JSX.Element }) =>
+export const TokenTooltip = (props: { message: string | null, color: ColorPaletteProp, placement?: 'top' | 'top-end', children: React.ReactElement }) =>
   <Tooltip
     placement={props.placement}
     variant={props.color !== 'primary' ? 'solid' : 'soft'} color={props.color}
@@ -104,41 +122,57 @@ function TokenBadge(props: {
   tokenPriceIn?: number,
   tokenPriceOut?: number,
 
+  showCost?: boolean
   showExcess?: boolean,
   absoluteBottomRight?: boolean,
   inline?: boolean,
 }) {
 
-  const { message, color, remainingTokens } = tokensPrettyMath(props.limit, props.direct, props.history, props.responseMax, props.tokenPriceIn, props.tokenPriceOut);
+  const { message, color, remainingTokens, costMax, costMin } =
+    tokensPrettyMath(props.limit, props.direct, props.history, props.responseMax, props.tokenPriceIn, props.tokenPriceOut);
+
+  let badgeValue: string;
+
+  const showAltCosts = !!props.showCost && !!costMax && costMin !== undefined;
+  if (showAltCosts) {
+    badgeValue = '< ' + formatCost(costMax);
+  } else {
 
-  // show the direct tokens, unless we exceed the limit and 'showExcess' is enabled
-  const value = (props.showExcess && (props.limit && remainingTokens <= 0))
-    ? Math.abs(remainingTokens)
-    : props.direct;
+    // show the direct tokens, unless we exceed the limit and 'showExcess' is enabled
+    const value = (props.showExcess && (props.limit && remainingTokens <= 0))
+      ? Math.abs(remainingTokens)
+      : props.direct;
+
+    badgeValue = value.toLocaleString();
+  }
+
+  const shallHide = !props.direct && remainingTokens >= 0 && !showAltCosts;
+  if (shallHide) return null;
 
   return (
-    <Badge
-      variant='solid' color={color} max={100000}
-      invisible={!props.direct && remainingTokens >= 0}
-      badgeContent={
-        <TokenTooltip color={color} message={message} placement='top-end'>
-          <span>{value.toLocaleString()}</span>
-        </TokenTooltip>
-      }
-      sx={{
-        ...((props.absoluteBottomRight) && { position: 'absolute', bottom: 8, right: 8 }),
-        cursor: 'help',
-      }}
-      slotProps={{
-        badge: {
-          sx: {
-            // the badge (not the tooltip)
-            fontFamily: 'code',
-            fontSize: 'sm',
-            ...((props.absoluteBottomRight || props.inline) && { position: 'static', transform: 'none' }),
+    <TokenTooltip color={color} message={message} placement='top-end'>
+      <Badge
+        variant='soft' color={color} max={1000000}
+        // invisible={shallHide}
+        badgeContent={badgeValue}
+        slotProps={{
+          root: {
+            sx: {
+              ...((props.absoluteBottomRight) && { position: 'absolute', bottom: 8, right: 8 }),
+              cursor: 'help',
+            },
+          },
+          badge: {
+            sx: {
+              // the badge (not the tooltip)
+              // boxShadow: 'sm',
+              fontFamily: 'code',
+              fontSize: 'xs',
+              ...((props.absoluteBottomRight || props.inline) && { position: 'static', transform: 'none' }),
+            },
           },
-        },
-      }}
-    />
+        }}
+      />
+    </TokenTooltip>
   );
 }
diff --git a/src/apps/news/AppNews.tsx b/src/apps/news/AppNews.tsx
@@ -111,7 +111,7 @@ export function AppNews() {
             return <React.Fragment key={idx}>
 
               {/* Inject the Beam item here*/}
-              {idx === 0 && (
+              {idx === 2 && (
                 <Box sx={{ mb: 3 }}>
                   {beamNewsCallout}
                 </Box>
@@ -191,7 +191,7 @@ export function AppNews() {
               onClick={() => setLastNewsIdx(index => index + NEWS_LOAD_STEP)}
               endDecorator={<ExpandMoreIcon />}
             >
-              Load Previous News
+              Previous News
             </Button>
           )}
 

diff --git a/src/apps/news/beam.data.tsx b/src/apps/news/beam.data.tsx
@@ -14,7 +14,7 @@ export const beamNewsCallout =
   <Card variant='solid' invertedColors>
     <CardContent sx={{ gap: 2 }}>
       <Typography level='title-lg'>
-        Beam - just launched in 1.15
+        Beam - launched in 1.15
       </Typography>
       <Typography level='body-sm'>
         Beam is a world-first, multi-model AI chat modality that accelerates the discovery of superior solutions by leveraging the collective strengths of diverse LLMs.