Difference between revisions of "Knowledge panels"

From Open Food Facts wiki
Jump to navigation Jump to search
(link to documentation)
m (links to other knowledge panels pages)
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
[[Category:Knowledge panels]]
 
[[Category:Knowledge panels]]
Knowledge panels are json data that describe content to be displayed to the user.
+
Knowledge panels are an extensible way to convey data, knowledge and recommendations to users when they view a product page or a facet page (e.g. a category page). They are used on the Open Food Facts website ([[Product Opener]]) and mobile app ([[Project Smoothie|Flutter application]]), and could be used in the future in 3rd party apps.
  
They are currently used on the [[Project Smoothie|new smoothie flutter application]] and on the [[Product Opener]] web platform.
+
== Characteristics ==
 +
Knowledge panels:
  
 +
* are generated server side by [[Product Opener]] and sent to clients through the API
 +
* turn structured raw data (e.g. nutrition data) into structured ready-to-display data (e.g. a nutrition table), knowledge (e.g. why it's important to reduce salt) and recommendations (e.g. how to reduce salt)
 +
* contain a limited set of display elements (e.g. titles, icons, images, tables etc.)
 +
* are hierarchical (panels can contain subpanels that can be shown opened or that users can drilldown on)
 +
 +
== Reference ==
 
Introduction: https://openfoodfacts.github.io/openfoodfacts-server/introduction/knowledge-panels/
 
Introduction: https://openfoodfacts.github.io/openfoodfacts-server/introduction/knowledge-panels/
  
 
Reference documentation: https://openfoodfacts.github.io/openfoodfacts-server/reference/api/#get-/api/v2/product/-barcode--fields-knowledge_panels
 
Reference documentation: https://openfoodfacts.github.io/openfoodfacts-server/reference/api/#get-/api/v2/product/-barcode--fields-knowledge_panels
  
== Testing it ==
+
== Existing and proposed new knowledge panels ==
 +
Most of the product page on the OFF website and mobile app is generated through knowledge panels (with the exception of product images and [[Product Attributes]]).
 +
 
 +
*[[Knowledge panels for Open Food Facts]]
 +
*[[Knowledge panels for Open Beauty Facts]]
 +
*[[Knowledge panels for Open Pet Food Facts]]
 +
*[[Knowledge panels for Open Products Facts]]
 +
 
 +
==Technical issues and questions==
 +
 
 +
===Testing it===
 
Knowledge panels are already deployed for every body !
 
Knowledge panels are already deployed for every body !
  
Line 17: Line 34:
 
'''FIXME:''' eventually move this part of this to https://openfoodfacts.github.io/openfoodfacts-server/introduction/api/
 
'''FIXME:''' eventually move this part of this to https://openfoodfacts.github.io/openfoodfacts-server/introduction/api/
  
== The flexibility of a static page ? ==
+
===The flexibility of a static page ?===
* Use the same system as for static pages, with much more Q&A ?
+
*Use the same system as for static pages, with much more Q&A ?
* Add a mode to get the raw file without the Product Opener UI
+
*Add a mode to get the raw file without the Product Opener UI
* https://fr.openfoodfacts.org/nutriscore?nochrome=1
+
*https://fr.openfoodfacts.org/nutriscore?nochrome=1
* https://fr.openfoodfacts.org/knol/label/organic?nochrome=1
+
*https://fr.openfoodfacts.org/knol/label/organic?nochrome=1
* Would allow to display them on the web as well
+
*Would allow to display them on the web as well
  
== What should we do with the native Wikidata integration on Android ? ==
+
=== What should we do with the native Wikidata integration on Android ?===
 
* Move the logic on the server, with caching, and let iOS and other apps benefit as well ?
 
* Move the logic on the server, with caching, and let iOS and other apps benefit as well ?
* Blend the Wikidata info with our own
+
*Blend the Wikidata info with our own
* System to add Wikidata IDs to categories, labels… (working as a special language, using the existing translation system ?)
+
*System to add Wikidata IDs to categories, labels… (working as a special language, using the existing translation system ?)
 +
 
 +
===When should network calls be made ? ===
 +
*The apps would attempt to call all labels at setup, and then refresh on some heuristic
 +
*On demand call when clicking on an attribute or a label
  
== When should network calls be made ? ==
+
===Support for HTML embedding on Android===
* The apps would attempt to call all labels at setup, and then refresh on some heuristic
+
*https://stackoverflow.com/questions/2116162/how-to-display-html-in-textview
* On demand call when clicking on an attribute or a label
+
*https://github.com/openfoodfacts/openfoodfacts-androidapp/issues/2205
 +
*https://github.com/openfoodfacts/openfoodfacts-androidapp/pull/2208
 +
*Authorized HTML tags
 +
*Support for images (svg, png)
 +
*Support for webviews
  
== Support for HTML embedding on Android ==
+
===Support for HTML embedding on iOS===
* https://stackoverflow.com/questions/2116162/how-to-display-html-in-textview
+
*https://github.com/openfoodfacts/openfoodfacts-ios/pull/192/files
* https://github.com/openfoodfacts/openfoodfacts-androidapp/issues/2205
+
*Authorized HTML tags
* https://github.com/openfoodfacts/openfoodfacts-androidapp/pull/2208
+
*Support for images (svg, png)
* Authorized HTML tags
+
*Support for webviews
* Support for images (svg, png)
 
* Support for webviews
 
  
== Support for HTML embedding on iOS ==
+
===Support for HTML embedding on Flutter ===
* https://github.com/openfoodfacts/openfoodfacts-ios/pull/192/files
+
*https://pub.dev/packages/flutter_html
* Authorized HTML tags
+
*https://pub.dev/packages/flutter_widget_from_html
* Support for images (svg, png)
 
* Support for webviews
 
  
== Support for HTML embedding on Flutter ==
+
==Get in touch==
* https://pub.dev/packages/flutter_html
+
{{Box
* https://pub.dev/packages/flutter_widget_from_html
+
| 1    =  Slack channel
*
+
| 2    =  [https://openfoodfacts.slack.com/messages/C03LFRKLVBQ/ #knowledge-panels]
 +
}}

Latest revision as of 10:13, 22 August 2024

Knowledge panels are an extensible way to convey data, knowledge and recommendations to users when they view a product page or a facet page (e.g. a category page). They are used on the Open Food Facts website (Product Opener) and mobile app (Flutter application), and could be used in the future in 3rd party apps.

Characteristics

Knowledge panels:

  • are generated server side by Product Opener and sent to clients through the API
  • turn structured raw data (e.g. nutrition data) into structured ready-to-display data (e.g. a nutrition table), knowledge (e.g. why it's important to reduce salt) and recommendations (e.g. how to reduce salt)
  • contain a limited set of display elements (e.g. titles, icons, images, tables etc.)
  • are hierarchical (panels can contain subpanels that can be shown opened or that users can drilldown on)

Reference

Introduction: https://openfoodfacts.github.io/openfoodfacts-server/introduction/knowledge-panels/

Reference documentation: https://openfoodfacts.github.io/openfoodfacts-server/reference/api/#get-/api/v2/product/-barcode--fields-knowledge_panels

Existing and proposed new knowledge panels

Most of the product page on the OFF website and mobile app is generated through knowledge panels (with the exception of product images and Product Attributes).

Technical issues and questions

Testing it

Knowledge panels are already deployed for every body !

To see the knowledge panels jsons, use the api, that is, from a product page, you can add /api/v2 before /product/, and append fields=knowledge_panels as query parameters.

Eg: http://world.openfoodfacts.org/api/v2/product/7804659650035/not-mayo-notco?fields=knowledge_panels

FIXME: eventually move this part of this to https://openfoodfacts.github.io/openfoodfacts-server/introduction/api/

The flexibility of a static page ?

What should we do with the native Wikidata integration on Android ?

  • Move the logic on the server, with caching, and let iOS and other apps benefit as well ?
  • Blend the Wikidata info with our own
  • System to add Wikidata IDs to categories, labels… (working as a special language, using the existing translation system ?)

When should network calls be made ?

  • The apps would attempt to call all labels at setup, and then refresh on some heuristic
  • On demand call when clicking on an attribute or a label

Support for HTML embedding on Android

Support for HTML embedding on iOS

Support for HTML embedding on Flutter

Get in touch

Slack channel