Multilingual images

[monsieurtanuki]

Problem

There are pending issues about multilingual ingredients and packagings.
Both rely on OCR.
That means we need multilingual images in Smoothie too. Currently it's not the case, e.g. with a single imageFrontUrl product field with no language.
The UX would be similar to #3890, with a language selector. In a first approach that language selector would only be implemented in "edit" pages (ingredients, packaging).
The typical use-case is for multilingual countries like Belgium or Canada, or products with several languages.

Proposed solution

In the images product field, we have multilingual data, like front_fr and front_es.

cf. https://fr.openfoodfacts.org/api/v3/product/5010477348678?fields=images:

"front_es":{
  "angle":"0","coordinates_image_size":"full","geometry":"0x0-0-0","normalize":"false","white_magic":"false","x1":"0","x2":"0","y1":"0","y2":"0",
  "imgid":"75",
  "rev":"219",
  "sizes":{"100":{"h":100,"w":71},"200":{"h":200,"w":142},"400":{"h":400,"w":285},"full":{"h":1200,"w":854}}  
},
"front_fr":{
  "angle":"0","coordinates_image_size":"full","geometry":"2658x3684-156-108","white_magic":"false","x1":"156.76359039190896","x2":"2814.979140328698","y1":"108.72313527180783","y2":"3792.5094816687733"},"normalize":"false",
  "imgid":"80",
  "rev":"211",
  "sizes":{"100":{"h":100,"w":72},"200":{"h":200,"w":144},"400":{"h":400,"w":289},"full":{"h":3684,"w":2658}
},

The solution is to:

• use images in order to build multilingual image URLs
  • barcode 5010477348678
  • front es
  • rev 219
  • full size
    => https://images.openfoodfacts.org/images/products/501/047/734/8678/front_es.219.full.jpg
    => https://images.openfoodfacts.org/images/products/501/047/734/8678/front_fr.211.full.jpg
• use imageFrontUrl as a fallback (typically if there's no specific image in that language)

Currently we always use imageFrontUrl, regardless of the language.
That makes sense when we're in a country with a single language.

Additional context

in France	in Spain

Part of

• (Edit) Make it possible to edit the ingredients, product name, and packaging text in several languages #2422

[teolemon]

• There's an old mockup available for the photo manager: Add a language switcher to make it possible to see photos selected in other languages in the expanded view accessible from the carousel #2428

[monsieurtanuki]

Thank you @teolemon!

I don't know yet which path I'm going to take first.
Probably, I'll replace imageFrontUrl with a sort of ProductHelper.getImageUrl(product, front, full, french) method, that would solve the "read" access.
Then, I'll focus on OCR pages.
And then, on the edit image pages.

[monsieurtanuki]

@teolemon I guess the following would be OK in a first approach, but the image itself is getting smaller.

before	after

[teolemon]

LGTM

[teolemon]

The app is mapping a new Romanian ingredients crop to French ingredients field, when I pop up the gallery from a French ingredients image, and then click on the language droppown to add Romanian

[monsieurtanuki]

The app is mapping a new Romanian ingredients crop to French ingredients field, when I pop up the gallery from a French ingredients image, and then click on the language droppown to add Romanian

@teolemon That's why I labeled the PR as "READ-ONLY"...

How are we supposed to let the user add image in a new language?
Let's focus on 5010477348678:

1. In French, all 4 image fields are populated.
2. In Spanish, only the FRONT image field is populated, for the other 3 the French images are displayed.
3. In the app, we display the image for the selected language, or the default image.
4. Let's say that the app is in French, and I want to add an INGREDIENT image in Spanish.
5. I go to the product.
6. I go to the image gallery.
7. I go to the INGREDIENT image: I see the French image and the language selector set to "French"
8. What is supposed to happen if I select "Spanish"? An empty image?
9. But if I go to the gallery I see that there's a (default) INGREDIENT image (in French).
10. I think that the confusion is between the gallery, that is supposed to display the best possible image (my language or fallback), and the swipeable page where I'm more in EDIT mode (and I should see "the truth": the INGREDIENT image is not available in Spanish, and I see the French version) (and if I see an empty image for Spanish I can add a new picture in Spanish)
11. Removing the language selector from the gallery would make things slightly more understandable - the gallery is what I see, the swipeable page is what is behind.

What do you think of that?

[teolemon]

How about getting rid of the gallery alltogether and arriving directly on the swipeable version ?

[monsieurtanuki]

How about getting rid of the gallery alltogether and arriving directly on the swipeable version ?

The gallery is currently called from two places:

• the "edit product page" / edit photo button
• the carousel pictures

In both cases, that would be possible to go directly to the swipeable page without too much trouble.
But:

• in the gallery we also have a floating action button to add "other" pictures, that we don't have in the swipeable page
  • we should therefore put that "add other" feature somehow in the swipeable page, that is already super crowded
  • or get rid of that feature
• that wouldn't solve the discrepancy between the carousel (that displays the same images as the gallery) and the swipeable page

I'm not against the concept of getting rid of the gallery (especially this one that does not look at all like a "gallery" with such little thumbnails).

Let me try first something at the swipeable page level:

• what we display here is the image that match the language (language selector, with app language as default)
• if there's no image at all, we add an explicit message stating so
• if there's no image for this language, we add an explicit message stating so
• and we get rid of the language selector in the gallery, in order to avoid confusion

[monsieurtanuki]

If you select a language with no image yet, you would get an empty image with (to be confirmed) an explicit message:

no message	case 1: with images for other languages	no image in any language

This doesn't change for swipeable and image that have a translation:

French	selector	Spanish

Gallery without language selector, in order to avoid confusion

[teolemon]

ok, let's go this way and see how it goes 👍