Skip to content

Commit

Permalink
integrate stuffings
Browse files Browse the repository at this point in the history
  • Loading branch information
@egdbear
egdbear committed Dec 16, 2024
1 parent 92b26c2 commit 36a4a39
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 180 deletions.
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,6 @@
"lodash": "^4.17.21",
"luxon": "^3.2.1",
"map-cursor-to-max": "^1.0.0",
"mathjs": "^14.0.0",
"memoize-one": "^5.2.1",
"mime": "2.4.0",
"morgan": "1.10.0",
Expand Down
185 changes: 64 additions & 121 deletions src/Apps/InfiniteDiscovery/InfiniteDiscoveryApp.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,44 @@
import { Flex, Button, Text, Separator } from "@artsy/palette"
import React, { useEffect } from "react"
import { sampleSize, uniq } from "lodash"
import { mean } from "mathjs"

const SEARCH_URL =
"https://vpc-artsy-staging-opensearch2-gfdbifpyvreziqr7r6ewx5zpe4.us-east-1.es.amazonaws.com/artworks_local/_search"

const CURATORS_PICKS_URL =
"https://vpc-artsy-staging-opensearch2-gfdbifpyvreziqr7r6ewx5zpe4.us-east-1.es.amazonaws.com/curators_picks/_search?size=135"

const calculateMeanVector = vectors => {
return mean(vectors, 0)
}

const BUILD_OPEN_SEARCH_QUERY = (lArtworks, dArtworks, cArtworks) => {
const likedArtworks = lArtworks.map(artwork => {
return {
vector_embedding: artwork.vector_embedding,
}
})

const meanVector = calculateMeanVector(
likedArtworks.map(a => a.vector_embedding)
)

const dismissedArtworks = dArtworks.map(artwork => ({
term: {
_id: artwork.id,
},
}))

const ignoreArtworks = lArtworks.map(artwork => ({
term: {
_id: artwork.id,
},
}))

const dismissedAndLiked = uniq([...dismissedArtworks, ...ignoreArtworks])

const query = {
size: 10,
collapse: {
field: "artistName",
},
query: {
bool: {
filter: {
bool: {
must_not: [...(dismissedAndLiked || [])],
},
},
should: [
{
knn: {
vector_embedding: {
vector: meanVector,
k: 10,
},
},
},
],
},
},
import { sampleSize } from "lodash"
import { getMetaphysicsEndpoint } from "System/Relay/getMetaphysicsEndpoint"

const buildMetaphysicsQuery = (likedArtworks, dismissedArtworks) => {
const likedArtworkIds = likedArtworks.map(artwork => artwork.id)
const dismissedArtworkIds = dismissedArtworks.map(artwork => artwork.id)

// Adjust query variables based on conditions
const variables = {
likedArtworkIds: likedArtworkIds.length > 2 ? likedArtworkIds : [],
dismissedArtworkIds:
likedArtworkIds.length < 3
? [...likedArtworkIds, ...dismissedArtworkIds]
: dismissedArtworkIds,
}

console.log("QUERY")
console.log(query)

return query
return {
query: `
query InfiniteDiscoveryAppQuery($likedArtworkIds: [String], $dismissedArtworkIds: [String]) {
discoverArtworks(
useOpenSearch: true,
likedArtworkIds: $likedArtworkIds,
excludeArtworkIds: $dismissedArtworkIds
) {
edges {
node {
id: internalID
title
artistNames
image {
url
}
}
}
}
}
`,
variables,
}
}

const request = async (url, opts) => {
Expand Down Expand Up @@ -98,64 +69,54 @@ export const InfiniteDiscoveryApp = () => {
const [artworks, setArtworks] = React.useState([]) as any
const [likedArtworks, setLikedArtworks] = React.useState([]) as any
const [dismissedArtworks, setDismissedArtworks] = React.useState([]) as any
const [curatedArtworks, setCuratedArtworks] = React.useState([]) as any
const [ca, setCa] = React.useState([]) as any
const [loading, setLoading] = React.useState(false)

const onLike = artwork => {
setLikedArtworks([...likedArtworks, artwork])
// filter out from curated artworks
setCuratedArtworks(curatedArtworks.filter(a => a !== artwork.internalID))
}

const onDismiss = artwork => {
setDismissedArtworks([...dismissedArtworks, artwork])
// filter out from curated artworks
setCuratedArtworks(curatedArtworks.filter(a => a !== artwork))
}

const isCurated = artwork => ca.includes(artwork)
const initialArtworks = async () => {
const response = await request(getMetaphysicsEndpoint(), {
body: JSON.stringify(
buildMetaphysicsQuery(likedArtworks, dismissedArtworks)
),
})

const artworks = response?.data?.discoverArtworks?.edges.map(
edge => edge.node
)
setArtworks(sampleSize(artworks, 10))
setLoading(false)
}

const submitSearch = async () => {
setLoading(true)

// continue showing curated artworks if liked artworks are less than 3
if (likedArtworks.length < 3) {
const sampleArtworks = sampleSize(curatedArtworks, 10)
setArtworks(sampleArtworks)
return setLoading(false)
return initialArtworks()
}

const data = await request(`${SEARCH_URL}`, {
const response = await request(getMetaphysicsEndpoint(), {
body: JSON.stringify(
BUILD_OPEN_SEARCH_QUERY(
likedArtworks,
dismissedArtworks,
curatedArtworks
)
buildMetaphysicsQuery(likedArtworks, dismissedArtworks)
),
})

const artworksResponse = data?.hits?.hits?.map(hit => hit._source)

const aArtworks = artworksResponse.slice(0, 8)
const cArtworks = sampleSize(curatedArtworks, 2)

setArtworks([...aArtworks, ...cArtworks])
const artworks = response?.data?.discoverArtworks?.edges.map(
edge => edge.node
)
setArtworks(artworks)
setLoading(false)
}

useEffect(() => {
const req = async () => {
const response = await request(`${CURATORS_PICKS_URL}`, { method: "GET" })
const curatedPicksArtworks = response?.hits?.hits.map(hit => hit._source)

setArtworks(sampleSize(curatedPicksArtworks, 10))
setCuratedArtworks(curatedPicksArtworks)
setCa(curatedPicksArtworks)
}
req()
}, [])
initialArtworks()
}, []) // eslint-disable-line

if (artworks.length === 0) {
return <h1>Nothing to show</h1>
Expand All @@ -172,7 +133,7 @@ export const InfiniteDiscoveryApp = () => {
preferences.
</Text>
<br />
<div>
<Flex>
<Button
onClick={submitSearch}
loading={loading}
Expand All @@ -187,7 +148,7 @@ export const InfiniteDiscoveryApp = () => {
<br />
<br />
<br />
</div>
</Flex>
</div>
</Flex>
<Flex justifyContent={"space-between"} flexWrap={"wrap"}>
Expand All @@ -196,10 +157,8 @@ export const InfiniteDiscoveryApp = () => {
<Artwork
artworkResource={artwork}
key={artwork.id}
internalID={artwork.id}
onLike={onLike}
onDismiss={onDismiss}
isCurated={isCurated}
/>
)
})}
Expand All @@ -215,10 +174,8 @@ export const InfiniteDiscoveryApp = () => {
<Artwork
artworkResource={artwork}
key={artwork.id + "liked"}
internalID={artwork.id}
onLike={onLike}
onDismiss={onDismiss}
isCurated={isCurated}
viewed
/>
)
Expand All @@ -233,10 +190,8 @@ export const InfiniteDiscoveryApp = () => {
<Artwork
artworkResource={artwork}
key={artwork.id + "dismissed"}
internalID={artwork.id}
onLike={onLike}
onDismiss={onDismiss}
isCurated={isCurated}
viewed
/>
)
Expand All @@ -247,14 +202,7 @@ export const InfiniteDiscoveryApp = () => {
)
}

const Artwork = ({
internalID,
onLike,
onDismiss,
isCurated,
viewed = false,
artworkResource,
}) => {
const Artwork = ({ onLike, onDismiss, viewed = false, artworkResource }) => {
const [artwork, setArtwork] = React.useState(artworkResource) as any

const onLikeEvent = a => {
Expand All @@ -274,7 +222,7 @@ const Artwork = ({
target="_blank"
>
<img
src={`https://d7hftxdivxxvm.cloudfront.net/?src=${artwork?.image_url}&resize_to=fit&width=200&height=200&grow=false`}
src={`https://d7hftxdivxxvm.cloudfront.net/?src=${artwork?.image?.url}&resize_to=fit&width=200&height=200&grow=false`}
alt={artwork?.title || ""}
style={{ cursor: "pointer", width: viewed ? "30%" : "auto" }}
/>
Expand All @@ -283,14 +231,9 @@ const Artwork = ({
<b>{artwork?.title}</b>
</h2>
<h3 style={{ fontSize: "13px" }}>
<i>{artwork?.artistName}</i>
<i>{artwork?.artistNames}</i>
</h3>
<h3 style={{ fontSize: "13px" }}>{artwork.id}</h3>
{isCurated(artwork.id) && (
<Text color="purple" fontSize="10px">
curators-picks
</Text>
)}
{viewed ||
(artwork.title !== "Artwork not available" && (
<>
Expand Down
Loading

0 comments on commit 36a4a39

Please sign in to comment.