Features/Visual-dictionary

random thoughts to classify

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 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 rool 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
• 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
  • image uploading: upload single image or more for a collage (image grid), input the title, source, keyword
  • 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.
    • 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.
  • 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, etc.)

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
• 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/

Resources

• Display image and tooltips in CSS : https://www.youtube.com/watch?v=e_jEquJo7y8.
• Tag photo (PHP+JQUERY): https://techlister.com/php/simple-photo-tagging-with-php-and-jquery/1176/

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