Nutrition input (Tracker)

[teolemon]

Who for

What

Tasks

Beta Give feedback

1. Add a server controlled nutrition-table input
2. It should return the default translated, ordered and filtered list of nutrients based on the language code and the country code, as well as a complete list of known nutrients (translated)
3. This list is also adapted based on the known category of the product (eg: waters, baby milks, alcoholic drinks)
4. This list also has the openfoodfacts-dart nutrient id to call
5. The client does a FOR loop using the API, to display the input
6. Add custom fields to the nutrition input form based on the category (eg for waters, chocolate, alcohol) #5401
   ✏️ Editing - Nutrition input +1
7. Nutrition facts: check values before sending them #4446
   0 of 10
   data quality good first issue nutrition facts ✏️ Editing - Nutrition input 🎯 P1 +5
8. Allow to auto-magically extract nutrition facts from a photo #4896
   ✏️ Editing - Nutrition input 🎨 Mockup required 🎯 P1 🤖 Robotoff +4
9. Nutrition table image not visible to edit values on mobile -> makes completion difficult from an image #5126
   nutrition facts ✏️ Editing - Nutrition input +2
10. New Photo is not visible immediately for nutrition and packaging #3875
    image upload 🐛 bug +2
11. Create a custom Tensorflow model for MLKit to classify Nutrition facts, Packaging instruction, Front and Ingredients photo on device #5010
    On-device ML 🤳 MLKit +2
12. Add a "Clear all" button on Nutritional info #3978
    ✏️ Editing - Nutrition input +1

Tasks

Beta Give feedback

1. Upgrade the nutrition facts input to add support for as sold, and as prepared
2. Offer in-line validation of Robotoff predictions for nutrition facts #3278
   ✏️ Editing - Nutrition input 🎨 Mockups available 🎯 P1 🤖 Robotoff 🤖 blocked on Robotoff +5
3. Add a dual-screen mode for nutrition input to allow for after the fact manual nutrition input
4. Add an educational one-time onboarding screen about Nutri-Score with the result of the computation + showing the points normally granted by the openfoodfacts-events points system (blocked at least on Send edit events to openfoodfacts-events openfoodfacts-server#6259, otherwise, we would just pretend the points were granted)
5. Add screen to explain that the Nutri-Score wasn't computed for that product and why
6. Add server side support for no nutrition facts status: Allow to mention that a field is complete openfoodfacts-server#7612
7. Add a button to mention no nutrition facts are visible
8. Optimize for Nutri-Score success: In Edit Mode, indicate the required nutriments to compute the Nutri-Score by an asterisk openfoodfacts-server#7610
9. Add a "Clear all" button on Nutritional info #3978
   ✏️ Editing - Nutrition input +1

Mockup

• 
• 
• 
• 
  Here's a first mockup, which hasn't been discussed yet

Code pointers

• DART support: feature_2/#210 - add nutrient order and list openfoodfacts-dart#272

Why

Design doc

Part of

• Implement improved contribution flow in app #505
• Contribute (Tracker) #503

[teolemon]

@monsieurtanuki would you take on Nutrition ?

[monsieurtanuki]

I'm afraid not, I cannot use the camera. The camera is the main item here, isn't it? If it's not, I can work on the input of a nutrient list, and someone else would do the camera side later. Tell me if that makes sense.

[teolemon]

No, the photo here is an existing nutrition photo. The layout is immersive and scrollable to make it easy to improve nutrition. The photo retaking is for a later iteration.

[teolemon]

So it's really the input of the nutrients list, with a fancy layout. We can start simpler.

[teolemon]

But to be clear it's a big chew:

• Creating a layout for the nutrition input
  • Layout for the fields
    • Units
    • Values
    • Modifiers <>=
  • Layout for the energy fields
    • Values
  • Layout for the portion size
    • Units
    • Values
    • Text
  • Layout for the nutrition table
    • Displaying the current photo of the nutrition table
    • Make it scrollable
• Building that layout dynamically (using the Nutrient list and order API from openfoodfacts-dart, based on the country selected in the app)
• Getting existing nutrition values for the product
• Populating that layout with existing values
• Gathering all changes made by the users to the fields
• Sending them to the server
• Extra refinements
  • the portion/100G thing
  • no nutrition value
  • Allow to add custom nutrients to the nutrition input (using the Nutrient list API from openfoodfacts-dart)

[monsieurtanuki]

OK, I'll do it step by step.

[monsieurtanuki]

@teolemon How are we supposed to open that page? From product page I guess, but where should one click?

[teolemon]

• The button you added yesterday is a good entry point when nutrition is not there at all.
• When there is nutrition info, it could become "update nutrition information"

[monsieurtanuki]

Now I have a similar problem as with the Android app: I don't know the meaning of the fields, as the meaning is only displayed as a hint:

[teolemon]

We need to find the equivalent of the library we used

[teolemon]

@monsieurtanuki wouldn't the second one do the trick ?
https://docs.flutter.dev/cookbook/forms/text-input

Also: https://stackoverflow.com/questions/49577781/how-to-create-number-input-field-in-flutter

[monsieurtanuki]

@teolemon Indeed:

[monsieurtanuki]

@teolemon Still some questions/remarks:

1. "Modifiers <>=" - what's the point as we cannot save anything but '='
2. "energy" - potential confusion here, as we have "energy-kj", "energy-kcal" and "energy". 3 of them: it's too much! We should display only "energy-kj" and "energy-kcal", populating one of them with the "energy" value if needed, right?
3. "portion size" needs to be added
4. "cancel" / "save" buttons needs to be added
5. what if both per 100g and per serving fields are populated: should we save both?
6. for the moment, except for energy, I considered that all nutrients were weights (g, mg, µg). How can I know which nutrients are not weights? (e.g. alcohol in %age)

[teolemon]

1. "Modifiers <>=" - you pass the modifier directly in the value (concatenate)
2. "energy-kj", "energy-kcal": those 2 only. We do automatic conversion, but we want users to be able to input both values, as indicated on the packaging
   5.show the matching values in each section, as toggled by the portion/100g switch ? Perhaps a warning that this product has values for both ?
3. Default units should be exposed by the dart package normally

[teolemon]

Weird spinner on opening the view

[monsieurtanuki]

Already mentioned by @M123-dev in the code review.

My answer was:

1. I know
2. the target is to pre-load the nutrient list at app init time, not querying the API each time we edit the nutrients. So, in a near future, that will disappear.

[teolemon]

perfect, sorry for my inattention 😅

[monsieurtanuki]

"Modifiers <>=" - you pass the modifier directly in the value (concatenate)

Maybe that's possible on the server side, but that's not possible for the moment in off-dart:

double? vitaminB12Serving
double? vitaminB12;
Unit? vitaminB12Unit;

[monsieurtanuki]

Default units should be exposed by the dart package normally

I'm afraid not.

[teolemon]

https://world.openfoodfacts.org/cgi/nutrients.pl does not have it, but https://static.openfoodfacts.org/data/taxonomies/nutrients.json does

[monsieurtanuki]

The 2 columns thing was really seen as confusing. We already have the same thing in production, albeit radio buttons in lieu toggles, and users and getting it fine.

Of course it's better to see just one column. The problem is in the switch.
Today's suggestion:

• from the product page, go to a "100g" page (like this one with one column)
• in the "100g" page, a button "add nutrition facts per serving" that goes to a dedicated "serving" page (a bit like an "advanced" mode) (which it is)

Let's merge as is and gather feedback.

I guess it should be reviewed first. And #910 has the 2 columns.
But there's something not working 100% with the call to saveProduct, a bit risky to run that in PROD. I should patch it the code if the purpose for the moment is just the UX/UI.
Anyway I was hoping that there was another way to update just the nutrition facts, not the whole product. Is there?

[monsieurtanuki]

Today's suggestion (screenshots):

"100g" page

### serving page

[M123-dev]

Mhhh I understand the thoughts behind the button to the next page where it can be added per portion but I think it's rather confusing and maybe looks like you have to add both for 100g and per portion, what about two radio buttons in a row

[monsieurtanuki]

Mhhh I understand the thoughts behind the button to the next page where it can be added per portion but I think it's rather confusing and maybe looks like you have to add both for 100g and per portion

Maybe if we put it at the bottom of the page, like "Advanced: nutrition facts per portion"?

what about two radio buttons in a row

That would be similar to the Switch.

[M123-dev]

I don't know how it is labeled on products, does every product has both

Also can we generate the product data

5g sugar per 100g; portion=50g so 2,5g sugar per portion. If so it doesn't make sense to put it at the bottom

[monsieurtanuki]

@M123-dev Indeed, that could be a solution:

• letting the user enter all the data for 100g
• add a button "enter serving size"
  • that button would open a dialog where the serving size can be entered
    • when clicking on "ok" on that dialog, we compute the ratio from the serving size text and ask the end-user to confirm if the energy-kj we computed is correct compared to the data printed on the product

I mean, it's not because we have the possibility to enter that many data that it makes sense the ask the end-user to do so, especially:

• on a small device
• potentially in a hostile environment - e.g. supermarket on Saturday
• when we want to make data input a rewarding experience - and typing a second column that is simply a ratio of another column is not a rewarding experience