From f1616183eb896bdbceac5372c641524a55cbae38 Mon Sep 17 00:00:00 2001 From: Jamie Rasmussen <112953339+jamie-rasmussen@users.noreply.github.com> Date: Thu, 30 Jan 2025 10:16:58 -0600 Subject: [PATCH 01/43] feat(ui): lightbox for images (#3503) --- .../Browse3/datasets/EditableDatasetView.tsx | 2 +- .../PIL.Image.Image/PILImageImage.tsx | 240 ++++++++++++++++-- 2 files changed, 214 insertions(+), 28 deletions(-) diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/EditableDatasetView.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/EditableDatasetView.tsx index a6764e3d389e..f468dec3dafc 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/EditableDatasetView.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/EditableDatasetView.tsx @@ -409,7 +409,7 @@ export const EditableDatasetView: FC = ({ renderCell: (params: GridRenderCellParams) => { if (!isEditing) { return ( - + ); diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/typeViews/PIL.Image.Image/PILImageImage.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/typeViews/PIL.Image.Image/PILImageImage.tsx index b26453e4adce..11d52e8d171e 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/typeViews/PIL.Image.Image/PILImageImage.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/typeViews/PIL.Image.Image/PILImageImage.tsx @@ -1,5 +1,10 @@ -import React from 'react'; +import React, {useEffect, useMemo, useState} from 'react'; +import {AutoSizer} from 'react-virtualized'; +import Lightbox from 'yet-another-react-lightbox'; +import Fullscreen from 'yet-another-react-lightbox/plugins/fullscreen'; +import Zoom from 'yet-another-react-lightbox/plugins/zoom'; +import {StyledTooltip, TooltipHint} from '../../../../../DraggablePopups'; import {LoadingDots} from '../../../../../LoadingDots'; import {NotApplicable} from '../../NotApplicable'; import {useWFHooks} from '../../pages/wfReactInterface/context'; @@ -10,57 +15,238 @@ type PILImageImageTypePayload = CustomWeaveTypePayload< {'image.jpg': string} | {'image.png': string} >; -export const PILImageImage: React.FC<{ +type PILImageImageProps = { entity: string; project: string; data: PILImageImageTypePayload; -}> = props => { - const {useFileContent} = useWFHooks(); +}; + +export const PILImageImage = (props: PILImageImageProps) => ( + + {({width, height}) => { + if (width === 0 || height === 0) { + return null; + } + return ( + + ); + }} + +); + +type PILImageImageWithSizeProps = PILImageImageProps & { + containerWidth: number; + containerHeight: number; +}; +const PILImageImageWithSize = ({ + entity, + project, + data, + containerWidth, + containerHeight, +}: PILImageImageWithSizeProps) => { + const {useFileContent} = useWFHooks(); const imageTypes = { 'image.jpg': 'jpg', 'image.png': 'png', } as const; - const imageKey = Object.keys(props.data.files).find( - key => key in imageTypes - ) as keyof PILImageImageTypePayload['files'] | undefined; + const imageKey = Object.keys(data.files).find(key => key in imageTypes) as + | keyof PILImageImageTypePayload['files'] + | undefined; const imageBinary = useFileContent( - props.entity, - props.project, - imageKey ? props.data.files[imageKey] : '', + entity, + project, + imageKey ? data.files[imageKey] : '', {skip: !imageKey} ); - if (!imageKey) { return ; - } - const imageFileExt = imageTypes[imageKey as keyof typeof imageTypes]; - - if (imageBinary.loading) { + } else if (imageBinary.loading) { return ; } else if (imageBinary.result == null) { return ; } + const fileExt = imageTypes[imageKey as keyof typeof imageTypes]; + + return ( + + ); +}; + +const loadImage = (setImageDim: any, imageUrl: string) => { + const img = new Image(); + img.src = imageUrl; + + img.onload = () => { + setImageDim({ + height: img.height, + width: img.width, + }); + }; + img.onerror = err => { + console.log('img error'); + console.error(err); + }; +}; + +type PILImageImageWithDataProps = { + fileExt: 'jpg' | 'png'; + buffer: ArrayBuffer; + containerWidth: number; + containerHeight: number; +}; + +const PILImageImageWithData = ({ + fileExt, + buffer, + containerWidth, + containerHeight, +}: PILImageImageWithDataProps) => { + const url = useMemo(() => { + const blob = new Blob([buffer], { + type: `image/${fileExt}`, + }); + return URL.createObjectURL(blob); + }, [buffer, fileExt]); - const arrayBuffer = imageBinary.result as any as ArrayBuffer; - const blob = new Blob([arrayBuffer], { - type: `image/${imageFileExt}`, + const [imageDim, setImageDim] = useState({ + width: -1, + height: -1, }); - const url = URL.createObjectURL(blob); + useEffect(() => { + setImageDim({width: -1, height: -1}); + loadImage(setImageDim, url); + }, [url]); - // TODO: It would be nice to have a more general image render - similar to the - // ValueViewImage that does things like light box, general scaling, - // downloading, etc.. + if (imageDim.width === -1 || imageDim.height === -1) { + return ; + } return ( + + ); +}; + +type PILImageImageLoadedProps = { + url: string; + fileExt: 'jpg' | 'png'; + imageWidth: number; + imageHeight: number; + containerWidth: number; + containerHeight: number; +}; + +const previewWidth = 300; +const previewHeight = 300; + +const PILImageImageLoaded = ({ + url, + fileExt, + imageWidth, + imageHeight, + containerWidth, + containerHeight, +}: PILImageImageLoadedProps) => { + const [lightboxOpen, setLightboxOpen] = useState(false); + const onClick = () => setLightboxOpen(true); + + let image = ( Custom ); + + const hasPreview = + containerWidth < previewWidth || containerHeight < previewHeight; + + if (hasPreview) { + const preview = ( +
+
+ Custom +
+ + {imageWidth}x{imageHeight}, {fileExt} - Click for more details + +
+ ); + image = ( + + {image} + + ); + } + + return ( + <> +
+ {image} +
+ setLightboxOpen(false)} + controller={{ + closeOnBackdropClick: true, + }} + slides={[{src: url}]} + render={{ + // Hide previous and next buttons because we only have one image. + buttonPrev: () => null, + buttonNext: () => null, + }} + carousel={{finite: true}} + /> + + ); }; From 9a559b7158248653de00e097a975e136cbf50b73 Mon Sep 17 00:00:00 2001 From: Martin Mark Date: Thu, 30 Jan 2025 11:23:29 -0500 Subject: [PATCH 02/43] chore(ui): playground: added background large system prompt, smaller spacing between trials / message panel (#3533) * Show more button - system prompt background * Tighten up spacing * Lint --- .../Home/Browse3/pages/ChatView/ChoicesDrawer.tsx | 2 +- .../Home/Browse3/pages/ChatView/MessagePanel.tsx | 3 ++- .../Browse3/pages/ChatView/ShowMoreButton.tsx | 15 ++++++++++++--- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesDrawer.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesDrawer.tsx index 87d81e86934d..89e4378a6a34 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesDrawer.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesDrawer.tsx @@ -97,7 +97,7 @@ export const ChoicesDrawer = ({
-
+
{choices.map((c, index) => (
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessagePanel.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessagePanel.tsx index 560585fd10da..1f4e79ae3169 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessagePanel.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessagePanel.tsx @@ -72,7 +72,7 @@ export const MessagePanel = ({ return (
@@ -172,6 +172,7 @@ export const MessagePanel = ({ {isOverflowing && !hasToolCalls && !editorHeight && ( diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ShowMoreButton.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ShowMoreButton.tsx index c23527643edd..a681112cbb17 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ShowMoreButton.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ShowMoreButton.tsx @@ -6,19 +6,28 @@ type ShowMoreButtonProps = { isShowingMore: boolean; setIsShowingMore: Dispatch>; isUser?: boolean; + isSystemPrompt?: boolean; }; + export const ShowMoreButton = ({ isShowingMore, setIsShowingMore, isUser, + isSystemPrompt, }: ShowMoreButtonProps) => { return (