Features/Visual-dictionary

Functions

(gold VIP members only at first)

• Add, delete, edit images (including WebP)
• Add, delete, edit tags (rectangle, circle, etc.)
• Add, delete, edit tooltip contents (text, image, audio)
• Show shapes of tooltips when mouse is hovering over the image

Resources

• Tag photo (PHP+JQUERY): https://techlister.com/php/simple-photo-tagging-with-php-and-jquery/1176/
• Facebook Image Tagging Tutorial Using jQuery and CSS https://1stwebdesigner.com/image-tagging-tutorial/

Goal

• https://commons.wikimedia.org/wiki/File:Spelterini_Bl%C3%BCemlisalp.jpg

Test objects

When doing geographic maps, use a little circle on its hinterland instead of polygon on its borders.

• Lesser Antilles https://commons.wikimedia.org/wiki/File:Lesser_Antilles_location_map.svg

random thoughts

round 1

• Just to be sure about the meaning of tag and the meaning of toolip: I call tag the point (or area) on the image. The tag contains a tooltip (the word, the definition etc...)
  • G: It can be made sure that points can lead to confusion when two objects are concentric, so rectangle tags are good; I guess “tag” can cause confusions: common people are not familiar with the word “tooltip”, so it's easy to mix “tag” with it up, further more, it has another meaning “keyword” in metadata; my thought: item area. “Tooltip” is literally inaccurate, maybe “note” is better.
  • V: Tooltip and Tag is the precise technical term to use between you and me. for the user, we'll talk about words and their definition that's all
• only the person who adds the image (image creator) can add the tags.
  • G: Pro: easy for administration; con: if the uploader didn't notice some details on the image, then some potential tags would be missing. I guess it can be it. If tags (item areas) are missing, people can leave a comment.
  • V: the administrator can still add missing tags. because if we leave user add tags, it can become a mess
• Any user should be able to attach a tooltip to a tag.
  • G: Actually each tag (item area) has a tooltip (note) already, they are adding tooltip messages (note texts).
• Can anyone correct tooltips ? complicated because it has to work as the wiki. see the different versions and be able to select a version or roll back to an older version, or people can vote for the best version...
  • G: I see Tatoeba only allows the creator to edit the sentence. Administrators can also do some changes, but seems not to include editing the sentence.
• when we add a word to the tag, we must first find out if the word already exists, but what to do in the event of an omonym? I think this will be confusing... also sometimes a tooltip will be specific for an image, so even if it's the same word, the definition might vary according to the image.
  • G: Synonyms could be put into a group: each group of synonyms for a meaning, each word can be in different meaning groups. V: sounds nice on paper but complicated to develop.
• Do the tooltips only contain words or can they also contain verbs or sentences?
  • G: I think allowed parts of speech: noun, noun phrase. The problem with adjectives: colors everywhere, feelings are subjective; problem with verbs and verb phrases: too few words for common images: walk, stand, sit, run, etc. Maybe there can be some verb/verb phrase only, adjective only images.
• who can edit, remove tags? : the image creator, the admin
• who can edit, remove tooltips? : the image creator, the admin, the tooltip creator
• who can remove images? : the image creator and the admin

round 2

• G: What about this: three separate areas of work: image uploading, tagging, tooltip text editing. V : when there is no image yet. display upload button. Once the image is uploaded, it's possible to tag, once the tag exist on the photo, it's possible to add tooltips. the areas do not appear in the same time but appear in sequence.
  • image uploading: upload single image or more for a collage (image grid), input the source, keyword (no title)
  • tagging:
    • Every user can have his/her own layer of tags, the final work is layers of different users' common work. If some users vandalize, then their layers can be voted down. VS : really complicated to develop and to use
    • Layers of part-of-speech: layer of noun/noun phrase is the default; layer of verb/verb phrase is only available for collages; layer of adjective is only available for a set of images in a collage. Sentence only available when there are text on the image and the text is a sentence.
  • tooltip text editing: text has different attributes: language (ISO 639-3), writing system (ISO 15924), synonym group (the most frequent one as the group name; if one word as two group names, add a number of meaning frequency of the word), additional information (noun gender, irregular plural, classifier, etc., each language has specific fields). V: it's a good idea to add a phrase (example of use). Not only the word definition. We must keep in mind that the tooltips (if not automatically imported through API) will not be created by linguists but by simple users who are only able to write a the word definition or an example of use.

round 3

“Simplicity is the ultimate sophistication.” — Leonardo da Vinci.

Make adding content as easy as possible for the user; the more complex things are, the less people will want to contribute. for this you have to limit the number of clicks to add content. Example : if the user has to add several images, it's a comlexity. If after adding a word, the user has to fill up many fields, it's another complexity. The goal is not to be as complete as possible but to be as user friendly as possible. example: why the site PINTEREST is successful? because it's extremely easy to add content.

G: I think the fields are only created once, then people just need to select the existing words. There are dictionary files that contain additional information and can be made available for users to add words. As for collage, it's the only way to demonstrate some words like animals. I think everyone can add images to a collage, each image is automatically a tag, the user just need to find the word in the dictionary file.

V: I think we have to use existing APIs (online dictionnary as a free web service : for that your page on the wiki will be useful). I found that but only English dictionnaries: https://rapidapi.com/blog/dictionary-apis/

There is no need to reinvent the wheel. we must use a dictionnary API already available. The user simply has to tag the photo and find the word using the API. If the word cannot be found, then the user can type the information.

G: Wiktionary is the most completed, just not ideally completed. Maybe something like scrappers: send the quest and extract the useful lines in the HTML file. V: scraping is like stealing, so it's illegal. Using an API is legal.

Have seen Wikidata https://www.wikidata.org/wiki/Wikidata:Main_Page? The problem is always need to uncapitalize words (except some Germanic languages), sometimes have to delete parentheses and its contents, add writing systems that are not the title's. In addition, sometimes the titles are different one another.

There is also a tool https://github.com/ilius/pyglossary for converting dictionary files, a list of conversion tools https://github.com/dbohdan/structured-text-tools. May be useful. V: Thanks I'll look into it.

MVP Features

Add photo

• Upload and Crop photo
• Add title, origin
• Add tags

Photo list

• Filter by topic, language

Photo page

• Add tooltips on existing tags (select language, topic ; type: word, definition)

Full Features

Add photo

• Upload Single image: a photo with cropper; Collage: multiple photos, resize and form a collage, each photo is a tagged area. Then create the image thumbnail (thumbnail must always have the same dimensions). V: too complicated I don't know how to do that; G: Just like that: https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp V: I understand what you mean now. It's not hard to do.
• type photo title in one or more languages (V: in English only, then titles can be translated by the translation system, when you add /translate-french at the end of the URL, the title will be translated), select photo topic, type photo origin URL
• Create new tag by dragging rectangles: an input zone appears.

Photos list

Photo list url:

https://polyglotclub.com/language/french/visual-dictionary

list photos with French words

List of image thumbnails.

Filter :

• topic
• language

Photo page

Url Example : https://polyglotclub.com/french/visual-dictionary/123

one URL per photo and per language

• when click existing tag: tooltip appears

G: Maybe simply hovering over is enough

• • select word in a list if exists, else type it
  • Select language
  • Type the word in that language
  • Type word definition in that language

G: if it's collage, tags could be automatically generated on every little image

Export

Select languages and words, export to TSV, together with images of tagged areas and audios. This is useful for creating flashcards.

Here's how Anki's import works: https://docs.ankiweb.net/importing.html#importing-media. Just add a field of image and a field of audio, put the media into the media folder, then flashcards can be used with those media.

It would be better to set the image as the first field, so it is on the front side by default.

To be noticed

• Encourage using images under public licenses https://commons.wikimedia.org/wiki/Commons:Free_media_resources
• Each image in “single image” mode should have at least 5 initial tags. Examples:
  • https://libreshot.com/car-repair-shop/
  • https://libreshot.com/old-mediteranean-city-house-in-trogir/
• Multiple writing systems for one language
• Synonyms for a tag
• Hierarchy for hyponym & hypernym e.g. tree and birch
• Frames of the tags may have one or more bumps to be easily hovered over (more than one in case two frames have very close bumps)
• Part of speeches (noun, verb, adjective (must be objective))
• Noun gender, irregular plural form
• Text on the picture can also be tagged
• Add audio file
• Link to Forvo and Wiktionary
• If there are multiple same objects in a image, only tag the largest clear one; if multiple same objects are of the same size, only tag the one closest to the center of the image
• Support AVIF? Its loading time is very short (ideal for large images) and it is being widely-supported gradually https://jakearchibald.com/2020/avif-has-landed/
• When the cursor is not on the image, all tags are hidden
• Customize the direction of tooltip

Initial chat

I’m thinking of developing a visual dictionary tool, mentioned at https://polyglotclub.com/wiki/Language/Multiple-languages/Culture/Ideas-about-language-learning#Program_of_visual_dictionary_creation. I have got the idea how to do it: https://www.youtube.com/watch?v=e_jEquJo7y8. I guess the Polyglot Club Collaborative Visual Dictionary can be born then.

hi, excellent idea. only CSS is needed to display the tooltip on the image, so that’s easy; in a database can be stored : the image, the coordinates of the tooltip on the image (top, left), the content of the tooltip. A user interface will have to be developed so that users can easily : upload the image, click and type the tooltip content. On submit, the data is stored in the database.

the harder to do is the user interface : JS language will be needed. the rest is rather simple.

the tooltip content can be translated in any language. this can easily be done using the collaborative tool on the site.

I would say, it is an excellent idea, indeed ;)

for the interface, a image tagging script (as in facebook) can be used, like this example: https://techlister.com/php/simple-photo-tagging-with-php-and-jquery/1176/

Oh, yeah! The selection tool! They are already there!

I guess the images all need metadata about the license. It’s easy to take down an image in wiki and replace with another if the copyright holder send the letter, but the visual dictionary is not the case.

I would not bother about the copyright, but would just add a link to the image author.

Hmm, I guess we can just encourage the users to upload licensed images from sources like https://commons.wikimedia.org/wiki/Special:MyLanguage/Commons:Free_media_resources

yes sure, but the choice will be very limited... I don't know how facebook or pinterest for example allow photos on their website...

OK, I’ll be on that wiki page. It reminds me of the fresh college life.

It has to start very SIMPLE, put something online, then improve gradually. do a Minimum Viable Product (MVO). if we try to develop something very complicated at first, it will be too hard

on the wiki page we can write the final product we want, but we also need to write a step by step thing. start with MVO then complicate gradually