Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

[Store Customization MVP] Add image alts to the ai prompt if available #11101

Merged
merged 9 commits into from Oct 13, 2023

Conversation

albarin
Copy link
Contributor

@albarin albarin commented Oct 3, 2023

What

Uses the alt available in some of the Verticals API images to build the prompt so the content makes sense with the image.

Also includes a pattern update which was not loading the right content.

Fixes #11084

Why

Since content is AI-generated, we need to avoid some images not matching the image displayed as much as possible.

Testing Instructions

Please consider any edge cases this change may have, and also other areas of the product this may impact.

  1. Create a new JN install with both Jetpack and Woocommerce installed and activated.

  2. Install and activate WooCommerce Blocks from this zip file: woocommerce-gutenberg-products-block.zip.

  3. In your wp-admin, set up the JetPack connection, make sure it's successful.

  4. From your admin screen, click on Tools > Plugin editor:

    Select the WooCommerce Blocks plugin and add the following within your woocommerce-blocks/woocommerce-gutenberg-products-block.php file and save:

function connect_to_endpoint() {
	update_option( 'woocommerce_blocks_allow_ai_connection', true );

	$request = new WP_REST_Request( 'POST', '/wc/store/patterns' );

	$request->set_param( 'business_description', 'A store that sells organic food' );

	$response = rest_do_request( $request )->get_data();

	error_log( print_r( $response, true ) );
}

add_action( 'admin_init', 'connect_to_endpoint' );
  1. Create a new post.
  2. Insert the Featured Category Triple pattern (or any other you want with at least one image).
  3. Make sure the images and content on the pattern match the business description you provided: 'A store that sells organic food'.
  4. Go back to the plugin editor and update the business description over there to something else (e.g. books, clothes, sports gear etc.) and save.
  5. Return to your post editor, save it, and refresh the page.
  6. Test other patterns and make sure the images and their associated content makes sense.
  • Do not include in the Testing Notes
  • Should be tested by the development team exclusively

Screenshots or screencast

Before After

WooCommerce Visibility

Required:

  • WooCommerce Core
  • Feature plugin
  • Experimental
  • N/A

Checklist

Required:

  • This PR has either a [type] label or a [skip-changelog] label.
  • This PR is assigned to a milestone.

Conditional:

  • This PR has a changelog description (if [skip-changelog] label is not present).
  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces, and I've updated this doc.
  • This PR has been accessibility tested.
  • This PR has had any necessary documentation added/updated.

Changelog

Add suggested changelog entry here.

@github-actions
Copy link
Contributor

github-actions bot commented Oct 3, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-11101.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 521
  • Total errors: 2320

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Oct 3, 2023

Size Change: +11 kB (+1%)

Total Size: 1.48 MB

Filename Size Change
build/cart-rtl.css 9.92 kB +17 B (0%)
build/cart.css 9.91 kB +16 B (0%)
build/checkout-blocks/billing-address-frontend.js 13.2 kB +3.45 kB (+35%) 🚨
build/checkout-blocks/billing-address-style.js 626 B +53 B (+9%) 🔍
build/checkout-blocks/shipping-address-frontend.js 13.1 kB +3.39 kB (+35%) 🚨
build/checkout-blocks/shipping-address-style.js 515 B +1 B (0%)
build/checkout-frontend.js 30.5 kB +13 B (0%)
build/checkout-rtl.css 9.61 kB +231 B (+2%)
build/checkout.css 9.6 kB +232 B (+2%)
build/checkout.js 43.4 kB +591 B (+1%)
build/collection-filters.js 1.63 kB +16 B (+1%)
build/featured-category.js 13.5 kB -2 B (0%)
build/featured-product.js 13.7 kB -4 B (0%)
build/product-best-sellers.js 7.04 kB -2 B (0%)
build/product-category.js 7.97 kB -3 B (0%)
build/product-gallery-rtl.css 1.08 kB +37 B (+4%)
build/product-gallery.css 1.08 kB +37 B (+4%)
build/product-new.js 7.3 kB -2 B (0%)
build/product-on-sale.js 7.29 kB -4 B (0%)
build/product-top-rated.js 7.57 kB -2 B (0%)
build/reviews-by-category.js 11.4 kB -4 B (0%)
build/wc-blocks-vendors.js 67 kB +2.97 kB (+5%) 🔍
ℹ️ View Unchanged
Filename Size
build/1796-frontend.js 23.2 kB
build/4124-frontend.js 23.9 kB
build/7138-frontend.js 24.2 kB
build/8280-frontend.js 8.48 kB
build/active-filters-frontend.js 7.03 kB
build/active-filters-rtl.css 2 kB
build/active-filters-wrapper-frontend.js 7.39 kB
build/active-filters-wrapper-rtl.css 1.86 kB
build/active-filters-wrapper.css 1.86 kB
build/active-filters.css 2 kB
build/active-filters.js 6.5 kB
build/add-to-cart-form-rtl.css 375 B
build/add-to-cart-form.css 373 B
build/all-products-frontend.js 9.88 kB
build/all-products-rtl.css 4.56 kB
build/all-products.css 4.56 kB
build/all-products.js 40.1 kB
build/all-reviews-rtl.css 1.79 kB
build/all-reviews.css 1.79 kB
build/all-reviews.js 7.84 kB
build/attribute-filter-frontend.js 20.4 kB
build/attribute-filter-rtl.css 4.16 kB
build/attribute-filter-wrapper-frontend.js 21.6 kB
build/attribute-filter-wrapper-rtl.css 1.65 kB
build/attribute-filter-wrapper.css 1.65 kB
build/attribute-filter.css 4.15 kB
build/attribute-filter.js 11.7 kB
build/base-components-stock-filter-wrapper~attribute-filter-wrapper~rating-filter-wrapper-style.scss-rtl.css 3.12 kB
build/base-components-stock-filter-wrapper~attribute-filter-wrapper~rating-filter-wrapper-style.scss.css 3.12 kB
build/blocks-checkout.js 33.9 kB
build/breadcrumbs-rtl.css 234 B
build/breadcrumbs.css 234 B
build/breadcrumbs.js 2.03 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.4 kB
build/cart-blocks/cart-accepted-payment-methods-style.js 153 B
build/cart-blocks/cart-cross-sells-frontend.js 268 B
build/cart-blocks/cart-cross-sells-products-frontend.js 10.9 kB
build/cart-blocks/cart-cross-sells-products-style.js 153 B
build/cart-blocks/cart-cross-sells-style.js 269 B
build/cart-blocks/cart-express-payment-frontend.js 5.36 kB
build/cart-blocks/cart-express-payment-style.js 155 B
build/cart-blocks/cart-items-frontend.js 273 B
build/cart-blocks/cart-items-style.js 240 B
build/cart-blocks/cart-line-items-frontend.js 14.4 kB
build/cart-blocks/cart-line-items-style.js 153 B
build/cart-blocks/cart-order-summary-frontend.js 3.5 kB
build/cart-blocks/cart-order-summary-style.js 341 B
build/cart-blocks/cart-totals-frontend.js 290 B
build/cart-blocks/cart-totals-style.js 253 B
build/cart-blocks/empty-cart-frontend.js 367 B
build/cart-blocks/empty-cart-style.js 365 B
build/cart-blocks/filled-cart-frontend.js 605 B
build/cart-blocks/filled-cart-style.js 333 B
build/cart-blocks/order-summary-coupon-form-frontend.js 3.88 kB
build/cart-blocks/order-summary-coupon-form-style.js 155 B
build/cart-blocks/order-summary-discount-frontend.js 3.98 kB
build/cart-blocks/order-summary-discount-style.js 155 B
build/cart-blocks/order-summary-fee-frontend.js 288 B
build/cart-blocks/order-summary-fee-style.js 153 B
build/cart-blocks/order-summary-heading-frontend.js 346 B
build/cart-blocks/order-summary-heading-style.js 351 B
build/cart-blocks/order-summary-shipping-frontend.js 3.53 kB
build/cart-blocks/order-summary-shipping-style.js 204 B
build/cart-blocks/order-summary-subtotal-frontend.js 291 B
build/cart-blocks/order-summary-subtotal-style.js 154 B
build/cart-blocks/order-summary-taxes-frontend.js 456 B
build/cart-blocks/order-summary-taxes-style.js 202 B
build/cart-blocks/proceed-to-checkout-frontend.js 7.59 kB
build/cart-blocks/proceed-to-checkout-style.js 1.08 kB
build/cart-frontend.js 28.9 kB
build/cart.js 39.9 kB
build/catalog-sorting-rtl.css 259 B
build/catalog-sorting.css 259 B
build/catalog-sorting.js 1.69 kB
build/checkout-blocks/actions-frontend.js 8.11 kB
build/checkout-blocks/actions-style.js 1.01 kB
build/checkout-blocks/contact-information-frontend.js 2.08 kB
build/checkout-blocks/contact-information-style.js 651 B
build/checkout-blocks/express-payment-frontend.js 5.89 kB
build/checkout-blocks/fields-frontend.js 297 B
build/checkout-blocks/fields-style.js 271 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 11.8 kB
build/checkout-blocks/order-summary-cart-items-style.js 153 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 3.97 kB
build/checkout-blocks/order-summary-coupon-form-style.js 155 B
build/checkout-blocks/order-summary-discount-frontend.js 4.06 kB
build/checkout-blocks/order-summary-discount-style.js 154 B
build/checkout-blocks/order-summary-fee-frontend.js 291 B
build/checkout-blocks/order-summary-fee-style.js 155 B
build/checkout-blocks/order-summary-frontend.js 3.58 kB
build/checkout-blocks/order-summary-shipping-frontend.js 3.53 kB
build/checkout-blocks/order-summary-shipping-style.js 154 B
build/checkout-blocks/order-summary-style.js 341 B
build/checkout-blocks/order-summary-subtotal-frontend.js 289 B
build/checkout-blocks/order-summary-subtotal-style.js 155 B
build/checkout-blocks/order-summary-taxes-frontend.js 456 B
build/checkout-blocks/order-summary-taxes-style.js 201 B
build/checkout-blocks/payment-frontend.js 15.6 kB
build/checkout-blocks/payment-style.js 504 B
build/checkout-blocks/pickup-options-frontend.js 17.4 kB
build/checkout-blocks/pickup-options-style.js 476 B
build/checkout-blocks/shipping-method-frontend.js 2.65 kB
build/checkout-blocks/shipping-method-style.js 1.41 kB
build/checkout-blocks/shipping-methods-frontend.js 25.3 kB
build/checkout-blocks/shipping-methods-style.js 450 B
build/checkout-blocks/terms-frontend.js 1.55 kB
build/checkout-blocks/terms-style.js 1.02 kB
build/checkout-blocks/totals-frontend.js 334 B
build/checkout-blocks/totals-style.js 301 B
build/classic-shortcode-rtl.css 242 B
build/classic-shortcode.css 241 B
build/classic-shortcode.js 4.4 kB
build/customer-account-rtl.css 410 B
build/customer-account.css 409 B
build/customer-account.js 3.17 kB
build/featured-category-rtl.css 974 B
build/featured-category.css 973 B
build/featured-product-rtl.css 1.02 kB
build/featured-product.css 1.02 kB
build/filter-wrapper-frontend.js 14.5 kB
build/filter-wrapper-rtl.css 378 B
build/filter-wrapper.css 378 B
build/filter-wrapper.js 2.37 kB
build/handpicked-products.js 7.22 kB
build/legacy-template-rtl.css 240 B
build/legacy-template.css 240 B
build/legacy-template.js 7.72 kB
build/mini-cart-component-frontend.js 30.7 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.86 kB
build/mini-cart-contents-block/cart-button-style.js 1.23 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.95 kB
build/mini-cart-contents-block/checkout-button-style.js 1.43 kB
build/mini-cart-contents-block/empty-cart-frontend.js 374 B
build/mini-cart-contents-block/empty-cart-style.js 378 B
build/mini-cart-contents-block/filled-cart-frontend.js 284 B
build/mini-cart-contents-block/filled-cart-style.js 288 B
build/mini-cart-contents-block/footer-frontend.js 3.87 kB
build/mini-cart-contents-block/footer-style.js 1.95 kB
build/mini-cart-contents-block/items-frontend.js 247 B
build/mini-cart-contents-block/items-style.js 251 B
build/mini-cart-contents-block/products-table-frontend.js 13.8 kB
build/mini-cart-contents-block/shopping-button-frontend.js 501 B
build/mini-cart-contents-block/shopping-button-style.js 361 B
build/mini-cart-contents-block/title-frontend.js 2.04 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.74 kB
build/mini-cart-contents-block/title-items-counter-style.js 1.2 kB
build/mini-cart-contents-block/title-label-frontend.js 1.68 kB
build/mini-cart-contents-block/title-label-style.js 1.14 kB
build/mini-cart-contents-block/title-style.js 1.38 kB
build/mini-cart-contents-rtl.css 3.23 kB
build/mini-cart-contents.css 3.21 kB
build/mini-cart-contents.js 16.1 kB
build/mini-cart-frontend.js 2.25 kB
build/mini-cart-rtl.css 2.44 kB
build/mini-cart.css 2.45 kB
build/mini-cart.js 5.98 kB
build/order-confirmation-additional-information-rtl.css 365 B
build/order-confirmation-additional-information.css 364 B
build/order-confirmation-additional-information.js 1.57 kB
build/order-confirmation-billing-address-rtl.css 398 B
build/order-confirmation-billing-address.css 397 B
build/order-confirmation-billing-address.js 1.55 kB
build/order-confirmation-billing-wrapper.js 1.5 kB
build/order-confirmation-downloads-rtl.css 478 B
build/order-confirmation-downloads-wrapper.js 1.57 kB
build/order-confirmation-downloads.css 479 B
build/order-confirmation-downloads.js 1.9 kB
build/order-confirmation-shipping-address-rtl.css 399 B
build/order-confirmation-shipping-address.css 397 B
build/order-confirmation-shipping-address.js 1.55 kB
build/order-confirmation-shipping-wrapper.js 1.5 kB
build/order-confirmation-status-rtl.css 280 B
build/order-confirmation-status.css 280 B
build/order-confirmation-status.js 1.54 kB
build/order-confirmation-summary-rtl.css 461 B
build/order-confirmation-summary.css 460 B
build/order-confirmation-summary.js 1.75 kB
build/order-confirmation-totals-rtl.css 595 B
build/order-confirmation-totals-wrapper.js 1.79 kB
build/order-confirmation-totals.css 594 B
build/order-confirmation-totals.js 2.16 kB
build/packages-style-rtl.css 3.59 kB
build/packages-style.css 3.59 kB
build/page-content-wrapper.js 1.85 kB
build/price-filter-frontend.js 13.1 kB
build/price-filter-rtl.css 2.68 kB
build/price-filter-wrapper-frontend.js 13.3 kB
build/price-filter-wrapper-rtl.css 2.54 kB
build/price-filter-wrapper.css 2.54 kB
build/price-filter.css 2.68 kB
build/price-filter.js 7.77 kB
build/price-format.js 913 B
build/product-add-to-cart-frontend.js 8.11 kB
build/product-add-to-cart-rtl.css 1.38 kB
build/product-add-to-cart.css 1.38 kB
build/product-add-to-cart.js 8.35 kB
build/product-average-rating-frontend.js 1.88 kB
build/product-average-rating.js 1.4 kB
build/product-button-frontend.js 4.93 kB
build/product-button-interactivity-frontend.js 8.48 kB
build/product-button-rtl.css 1.14 kB
build/product-button.css 1.14 kB
build/product-button.js 4.64 kB
build/product-categories-rtl.css 654 B
build/product-categories.css 654 B
build/product-categories.js 2.58 kB
build/product-collection.js 13.6 kB
build/product-details-rtl.css 397 B
build/product-details.css 394 B
build/product-gallery-frontend.js 392 B
build/product-gallery-large-image-frontend.js 416 B
build/product-gallery-large-image-next-previous.js 4.14 kB
build/product-gallery-large-image.js 2.36 kB
build/product-gallery-pager.js 3.39 kB
build/product-gallery-thumbnails.js 3.81 kB
build/product-gallery.js 9.31 kB
build/product-image-frontend.js 2.89 kB
build/product-image-gallery-rtl.css 307 B
build/product-image-gallery.css 306 B
build/product-image-rtl.css 997 B
build/product-image.css 995 B
build/product-image.js 2.68 kB
build/product-price-frontend.js 8.1 kB
build/product-price-rtl.css 678 B
build/product-price.css 677 B
build/product-price.js 2.65 kB
build/product-query-rtl.css 350 B
build/product-query.css 349 B
build/product-query.js 11.4 kB
build/product-rating-counter-frontend.js 2.19 kB
build/product-rating-counter.js 1.71 kB
build/product-rating-frontend.js 2.53 kB
build/product-rating-rtl.css 247 B
build/product-rating-stars-frontend.js 2.43 kB
build/product-rating-stars-rtl.css 899 B
build/product-rating-stars.css 900 B
build/product-rating-stars.js 1.95 kB
build/product-rating.css 246 B
build/product-rating.js 2.05 kB
build/product-results-count-rtl.css 230 B
build/product-results-count.css 230 B
build/product-results-count.js 1.65 kB
build/product-reviews-rtl.css 458 B
build/product-reviews.css 458 B
build/product-sale-badge-frontend.js 2.01 kB
build/product-sale-badge-rtl.css 438 B
build/product-sale-badge.css 437 B
build/product-sale-badge.js 1.69 kB
build/product-search-rtl.css 419 B
build/product-search.css 417 B
build/product-search.js 2.6 kB
build/product-sku-frontend.js 2.02 kB
build/product-sku-rtl.css 240 B
build/product-sku.css 239 B
build/product-sku.js 1.53 kB
build/product-stock-indicator-frontend.js 2.19 kB
build/product-stock-indicator-rtl.css 232 B
build/product-stock-indicator.css 232 B
build/product-stock-indicator.js 1.71 kB
build/product-summary-frontend.js 2.35 kB
build/product-summary-rtl.css 549 B
build/product-summary.css 549 B
build/product-summary.js 1.87 kB
build/product-tag.js 7.5 kB
build/product-template-rtl.css 423 B
build/product-template.css 422 B
build/product-template.js 2.8 kB
build/product-title-frontend.js 2.31 kB
build/product-title-rtl.css 693 B
build/product-title.css 694 B
build/product-title.js 2.04 kB
build/products-by-attribute.js 8.02 kB
build/rating-filter-frontend.js 19.3 kB
build/rating-filter-rtl.css 4.22 kB
build/rating-filter-wrapper-frontend.js 20.3 kB
build/rating-filter-wrapper-rtl.css 1.73 kB
build/rating-filter-wrapper.css 1.73 kB
build/rating-filter.css 4.21 kB
build/rating-filter.js 6.33 kB
build/reviews-by-category-rtl.css 1.79 kB
build/reviews-by-category.css 1.79 kB
build/reviews-by-product-rtl.css 1.79 kB
build/reviews-by-product.css 1.79 kB
build/reviews-by-product.js 12.7 kB
build/reviews-frontend.js 6.52 kB
build/single-product-rtl.css 378 B
build/single-product.css 378 B
build/single-product.js 11 kB
build/stock-filter-frontend.js 19.4 kB
build/stock-filter-rtl.css 4.01 kB
build/stock-filter-wrapper-frontend.js 20.5 kB
build/stock-filter-wrapper-rtl.css 1.49 kB
build/stock-filter-wrapper.css 1.49 kB
build/stock-filter.css 4 kB
build/stock-filter.js 6.95 kB
build/store-notices.js 1.67 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css 240 B
build/wc-blocks-classic-template-revert-button-style.css 239 B
build/wc-blocks-classic-template-revert-button.js 1.18 kB
build/wc-blocks-data.js 19.6 kB
build/wc-blocks-editor-style-rtl.css 7.07 kB
build/wc-blocks-editor-style.css 7.07 kB
build/wc-blocks-google-analytics.js 1.16 kB
build/wc-blocks-middleware.js 735 B
build/wc-blocks-registry.js 2.74 kB
build/wc-blocks-rtl.css 2.47 kB
build/wc-blocks-shared-context.js 850 B
build/wc-blocks-shared-hocs.js 1.4 kB
build/wc-blocks.css 2.47 kB
build/wc-blocks.js 2.61 kB
build/wc-interactivity.js 10.7 kB
build/wc-payment-method-bacs.js 406 B
build/wc-payment-method-cheque.js 401 B
build/wc-payment-method-cod.js 508 B
build/wc-payment-method-paypal.js 437 B
build/wc-settings.js 2.4 kB
build/wc-shipping-method-pickup-location.js 29.3 kB

compressed-size-action

@albarin albarin changed the title Add image alts to the ai prompt if available [Store Customization MVP] Add image alts to the ai prompt if available Oct 3, 2023
@albarin albarin added the focus: patterns WooCommerce patterns label Oct 3, 2023
@albarin albarin requested a review from nefeline October 3, 2023 14:16
@albarin albarin marked this pull request as ready for review October 3, 2023 14:16
@woocommercebot woocommercebot requested a review from a team October 3, 2023 14:18
@albarin albarin added the type: enhancement The issue is a request for an enhancement. label Oct 5, 2023
@albarin albarin self-assigned this Oct 6, 2023
@tjcafferkey
Copy link
Contributor

tjcafferkey commented Oct 6, 2023

Thanks @albarin. I can see the problem we're trying to solve here but I am wondering what other approaches we have considered? I'm not sure what I'm about to suggest is the right way but I was wondering do you think it would be worth moving the ALT text to the dictionary file and using that text to build the prompt & the image alt. In the case of woocommerce-blocks/featured-category-focus the alt text isn't really describing the image so I'm unsure on how this would benefit the returned result "Placeholder image used to represent products being showcased in a featured category section."

What about if we did the following:

{
	"name": "Featured Category Focus",
	"slug": "woocommerce-blocks/featured-category-focus",
	"images_total": 1,
	"images_format": "landscape",
	"content": {
		"titles": [
			{
				"default": "Announcing our newest collection",
				"ai_prompt": "The title of the featured category: {image.0}"
			}
		],
		"image_description": [
			"An image of a cosy living room showing contemporary decoration with a fireplace"
		]
	}
}

We could then use the image_description that to generate the prompt $content['titles'][0]['ai_prompt'] . $content[image_description][0]

And the alt text: 'Placeholder image used to represent '. $content[image_description][0]

Again I'm not saying my suggestion is the right one, but it feels a little bit more intuitive. What do you think?

@tjcafferkey
Copy link
Contributor

After Step 8 I updated the business description to A store that sells sports gear and when I inserted another pattern it produced accurate images but the associated content remained similar to the previous description.

Screenshot 2023-10-09 at 11 10 00

Copy link
Member

@nefeline nefeline left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@albarin I think we will have to fine-tune the logic here a bit. Here are the test results on my end:

I'm selling merchandise with branding by local breweries. I have a small catalogue of about 10 products. I plan to sell to people who like craft beer. My business is all about beer.

  • And in this particular case, since the Verticals API doesn't have any specific images for beers, this was the output received:
Screenshot 2023-10-09 at 15 45 34
  • The "alt" description does exist for all of these images within the verticals API:
Screenshot 2023-10-09 at 16 16 16

Ref: https://public-api.wordpress.com/wpcom/v2/site-verticals/1512/images

But because we are concatenating these with the store description within the PatternsUpdater class, get_patterns_with_content method, the output is still related to the breweries or beers (in this particular example), rather than the images.

As a workaround I would suggest that: for all patterns that display products, if the provided images have an alt description, rely exclusively on those to generate the content rather than a combination between store description + image description to ensure better accuracy. WDYT?

@albarin
Copy link
Contributor Author

albarin commented Oct 10, 2023

As a workaround I would suggest that: for all patterns that display products, if the provided images have an alt description, rely exclusively on those to generate the content rather than a combination between store description + image description to ensure better accuracy. WDYT?

I agree it's not ideal, but when the Verticals API returns an unrelated vertical, even if we only use the image alt it will feel unrelated to the actual store. My thinking is: is it better to show a text related to the store description even if the images do not correspond or a text that matches the image but is unrelated to the store description? 🤔

For example, with the current implementation, I used as a description: "A store that sells drugs and medicines" and got this:
Screenshot 2023-10-10 at 14 55 12
Would it make more sense to get something related to the images as text when the images are that random and unrelated? I'm not sure at all which is the best option tbh 😅

@nefeline
Copy link
Member

I agree it's not ideal, but when the Verticals API returns an unrelated vertical, even if we only use the image alt it will feel unrelated to the actual store. My thinking is: is it better to show a text related to the store description even if the images do not correspond or a text that matches the image but is unrelated to the store description? 🤔

Would it make more sense to get something related to the images as text when the images are that random and unrelated? I'm not sure at all which is the best option tbh 😅

Yeah, you are right; this is a very tricky scenario, especially considering our limitations regarding the number of images available. Let's keep the logic as-is for now and work on additional fine-tuning as part of a separate task so we can spend more time discussing/brainstorming before implementing and unblock this work :)

Copy link
Member

@nefeline nefeline left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working on this @albarin , LGTM! 🚀

✅ Confirmed patterns are working as expected with these changes in place and descriptions are more accurate whenever the alt description is available for the image.

@github-actions github-actions bot added this to the 11.4.0 milestone Oct 13, 2023
@albarin albarin merged commit 07aec7c into trunk Oct 13, 2023
34 checks passed
@albarin albarin deleted the 11084/text-related-to-images branch October 13, 2023 07:32
@danieldudzic danieldudzic added the skip-changelog PRs that you don't want to appear in the changelog. label Oct 23, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: patterns WooCommerce patterns skip-changelog PRs that you don't want to appear in the changelog. type: enhancement The issue is a request for an enhancement.
Projects
None yet
4 participants