Extension:GrowthExperiments/Technical documentation/Structured tasks/Add an image

Project page: https://www.mediawiki.org/wiki/Growth/Personalized_first_day/Structured_tasks/Add_an_image

Figma specs: https://www.figma.com/file/ULhJr1isDstRbGE5vjYDsr/Add-images-structured-task?node-id=4029%3A51683


At a high level, users are prompted to match images suggested by an algorithm with articles on Wikipedia; users can accept, reject or skip the suggestions. Accepting a suggestion prompts the user to write a caption for the image, and the final step involves publishing an edit to the article with the image and caption (the interactive prototype can be found here).

Add a section image edit

Project page: https://www.mediawiki.org/wiki/Growth/Personalized_first_day/Structured_tasks/Add_a_section_image

Figma specs: https://www.figma.com/file/2SONd8P1tsexIB5coMOp8h/Add-links-structured-task-v1.0 (draft)

How are the image suggestions generated? edit

There is an algorithm that generates a list of suggested images for unillustrated articles across all Wikipedias. For details on the algorithm, see https://www.mediawiki.org/wiki/Growth/Personalized_first_day/Structured_tasks/Add_an_image#Algorithm. The quick summary is:

  • Look at the Wikidata item for the article. If it has an image (P18), choose that image.
  • Look at the Wikidata item for the article. If it has a Commons category associated (P373), choose an image from the category.
  • Look at the articles about the same topic in other language Wikipedias. Choose a lead image from those articles.

The output of the algorithm is a CSV file with this data, which was then loaded one-time into the ElasticSearch index for each wiki. Using hasrecommendation:image on a wiki allows one to find information about which articles have suggestions.

How do we access the image suggestions? edit

Having found an article that has an image suggestion using hasrecommendation:image, you can then call the image suggestion API on WMCS here.

What happens when the user accepts an image suggestion? edit

  • Temporarily disable readonly mode of the surface (so that the image can be added)
  • Walk through the linear model to find the first position that is a content offset, and the next item is not a transclusion or a hidden/meta object or whitespace followed by one of those things
  • Insert the linear model representation of the thumbnail with an empty string as the caption
  • Show the caption flow and set contenteditable to true; since the caption is initially set in the previous step, the default inline caption editing experience is shown (rather than the default caption entry experience which occurs in a dialog rather than inline)

Local development edit

The following should be included in LocalSettings.php:

// Allow retrieval of Commons file from local environment
$wgUseInstantCommons = true;
$wgGEImageRecommendationApiHandler = 'actionapi';
$wgGEImageRecommendationServiceUrl = 'https://cs.wikipedia.org/w/api.php';
// register an owner-only OAuth app (with default settings) at
// https://meta.wikimedia.org/wiki/Special:OAuthConsumerRegistration/propose/oauth2
// then set
$wgGEImageRecommendationServiceAccessToken = '{token};

Optionally, CLDR extension should be installed in order for the suggestion reason to show up correctly (CLDR is used to retrieve the localized language name so we can show the language names in the suggestion reason (for example: "Used in the same article in 2 other languages: English, French"). To tag an article to appear in the search index:

# section-image-recommendation
php maintenance/run.php ./extensions/GrowthExperiments/maintenance/UnInvalidateImageSuggestion.php --task-type=section-image-recommendation --title=$pageTitle && php maintenance/run.php runJobs
# image-recommendation
php maintenance/run.php ./extensions/GrowthExperiments/maintenance/UnInvalidateImageSuggestion.php --task-type=image-recommendation --title=$pageTitle && php maintenance/run.php runJobs

You can find articles that have image recommendations with hasrecommendation:image_section keyword in Special:Search.