From 42783d71220f896aee5998e7d2f1668de67ac160 Mon Sep 17 00:00:00 2001 From: Twin Karmakharm Date: Mon, 10 Jun 2024 13:07:08 +0100 Subject: [PATCH 01/18] Add missing assistant_video_download_action and assistant_video_download_action_description (#525) --- .../components/NavItems/tools/Assistant.json | 113 +++++++++++++++++- 1 file changed, 112 insertions(+), 1 deletion(-) diff --git a/public/locales/en/components/NavItems/tools/Assistant.json b/public/locales/en/components/NavItems/tools/Assistant.json index 539dc943b..b9849d587 100644 --- a/public/locales/en/components/NavItems/tools/Assistant.json +++ b/public/locales/en/components/NavItems/tools/Assistant.json @@ -1 +1,112 @@ -{"assistant_title": "Assistant", "assistant_intro": "The assistant will help you to analyse a webpage, an image or a video file and suggest which WeVerify tools are useful for each case", "assistant_choose": "Choose what you want to analyse", "assistant_webpage_header": "Webpage link", "assistant_webpage_text": "Insert the link of a webpage, and the assistant will suggest the most useful tools for the contents of the given page.", "assistant_file_header": "Local file", "assistant_file_text": "The assistant will suggest the most useful tools depending on if the file is a video or image", "assistant_choose_tool": "Choose the tool you want to use", "upload_video": "Video", "upload_image": "Image", "assistant_urlbox": "URL", "assistant_give_url": "Give the URL of the page to analyse", "assistant_paste_url": "Paste the URL here", "please_give_a_correct_link": "The link provided is incorrect or not supported.", "button_analyse": "Analyse", "button_clean": "Remove", "save": "Save", "source_credibility_title": "Source Credibility", "source_credibility_byline": "The source has been found as part of a credibility check", "link_explorer_title": "Link Explorer", "link_explorer_byline": "The following URLs have been extracted from the page, and their domains have been checked for credibility", "text_title": "Text", "text_intro": "The following text has been found on the page", "dbkf_title": "DBKF Check", "expand_text": "Expand Text", "dbkf_error": "An issue has occurred when trying to connect to the database of known fakes. Some results may be omitted from this page. If the problem persists, please contact support.", "sc_failed": "The source credibility check has failed. Some results may not be displayed. If the problem persists, please contact support.", "link_tooltip": "What is this?
The scores displayed in this section give an indication of how reliable the web source listed can be considered. Scores range from 0-100.

In most cases, the source checked for credibility will be the URL domain. In some cases where this is not useful a more relevant part of the URL has been checked against. In all cases, the full URL and the domain against which the source credibility check was carried on are listed in the form URL : domain-for-check.

How are these calculated?
Various institutions analyse sources (particularly domains) across the web to evaluate how reliable they are likely to be based on various metrics.
Here, datasets assessing web domain reliability have been pulled mainly from Open Sources and the WeVerify DBKF database.
Since the metrics or scores from each of these sources do not necessarily overlap and cannot easily be compared, all scores from any given institution are mapped to a single number between 0-100.
For any URL, a list of all institutions which gave the relevant domain a score has been listed, along with the (mapped) results they gave.
The final result displayed for any domain is the lowest score from the various sources.
", "media_title": "Media", "images_label": "Images", "videos_label": "Videos", "media_found": "The following media has been found on the page", "media_below": "Select the media you would like to verify", "media_to_process": "Media to Process", "assistant_error": "An unexpected assistant error has occurred. If the problem persists, contact support.", "things_you_can_do_header": "Potential Tools", "things_you_can_do": "Below are the tools you can use on this media type", "navbar_analysis_image": "Image Analysis", "navbar_analysis_video": "Video Analysis", "navbar_keyframes": "Keyframes", "navbar_thumbnails": "Thumbnails", "navbar_twitter": "Tw. search", "navbar_magnifier": "Magnifier", "navbar_metadata": "Metadata", "navbar_rights": "Video rights", "navbar_forensic": "Forensic", "navbar_ocr": "OCR", "navbar_twitter_sna": "Fact Check", "navbar_assistant": "Assistant", "assistant_help_title": "Assistant Help", "assistant_help_1": "The WeVerify toolkit (this plugin) has multiple tools which can help in the verification of content on social networks, designed to help journalists save time and be more efficient in their fact checking tasks.
A full list of these tools can be found in the tutorial section of this plugin.
Given the multiple tools and services available, the weverify assistant has been designed to guide users to the services available to them given the nature of the content they would like to check.

", "assistant_help_2": "How does the assistant work?
Users can choose to upload their own media to be checked (an image or a video), in which case verification tools on the plugin which support media upload will be listed.
An alternative option is to enter a URL which needs verification or fact checking.
Once a URL in entered, the assistant attempts to extract any text, images or videos it can find on the page.
Any extracted text or media are then used to suggest the potential actions which can be carried out. Currently, there are three major components to this:More information on each of these can be found in the links below.

", "assistant_help_3": "Which URLS are supported?
Currently, there is dedicated support for links for the following types of URLs: Other generic links can also be entered and the assistant will attempt to retrieve what it can. However, any results (particularly on the extraction of images and text) on generic links may be much more generalised.

", "assistant_help_4": "More information
For a detailed breakdown of the type of URLs supported by the assistant, see this page
For a detailed breakdown of the tools and checks run by the assistant, see: this page", "enter_url": "Enter URL", "mode_label": "URL mode", "url_text": "URL Text", "url_media": "URL Media", "media_text": "Extracted Media Text", "download_video": "The video has been extracted but cannot be processed using the direct URL. Please open it in a new tab using the link below, download it, and use the assistant to see which tools can be used on the downloaded video.", "text_warning": "Warnings found against text. See warning box.", "image_warning": "Warnings found against image. See warning box.", "warning_title": "Warning", "warning_subtitle": "Some elements of this content have been flagged", "status_title": "Status", "status_subtitle": "Note: one or more of the automated checks have resulted in an error. Some results may be omitted from this page.", "named_entity_title": "Text entities", "dbkf_image_warning": "The image from this URL has matched against the following from the database of known fakes with a similarity score of", "dbkf_video_warning": "The video from this URL has matched against the following from the database of known fakes with a similarity score of", "dbkf_text_warning": "The text from this URL has matched against the following from the database of known fakes", "labelled_as": "It has been labelled as:", "commented_as": "with the following comment :", "hp_warning": "The text from this URL has returned an unusually high hyperpartisan score of", "image_analysis_text": "Retrieve contextual information about the image", "video_analysis_text": "Retrieve contextual information about the video", "keyframes_text": "Fragment the video", "thumbnails_text": "Reverse search on thumbnails from the video", "magnifier_text": "Examine the image thoroughly", "metadata_text": "Retrieve image/video metadata", "rights_text": "Retrieve information solely about video rights", "forensic_text": "Detect any image manipulation", "ocr_text": "Extract any text from the image", "hyperpartisan_title": "Hyperpartisan service", "dbkf_text_title": "Database of known fakes text search", "dbkf_media_title": "Database of known fakes media search", "ne_title": "Named entity search", "ocr_title": "OCR search", "source_cred_title": "Source credibility service", "mt_title": "Machine translation service", "translate": "Translate (beta)", "copy_link": "Copy link", "archive_link": "Archive", "source_credibility_warning": "The domain or account has been mentioned in a lookup against:", "text_tooltip": "What is this?
Any text which can be extracted from the given URL is displayed here

How is this used?
Various text processing tools are run against this text: For more information, see: this page", "media_tooltip": "What is this?
Any images or videos which can be extracted from the URL have been displayed here.

What can I do with these?
For any selected image/video, a list of relevant tools from the plugin which can process this media are given. Selecting any of these will redirect the media to the selected tool.
Alongside this, the assistant will reverse search the media against the database of known fakes. If any results are found, these will be displayed in the Warnings section.

For more information, see: this page", "sc_tooltip": "What is this?
For every URL entered, we run either the domain (if this is a non social media URL) or the account (if this is a social media URL) against our URL domain analysis service. The results of this check are shown here.

What can I do with these?
The domain analysis service intends to collect information about a domain/account from multiple sources. From here, we intend to inform the user whether any of the sources we collect from hold information on the domain/account of the URL entered. The result is split into three types: Since this is information collected from multiple sources, we have given the source we have taken the details from and if provided, any evidence the source itself has given so users can check the validity of claims made about a domain. For more information on sources and data collection, see this page", "source_cred_popup_header": "The domain/account has been found in the following reports listed by:", "url_domain_analysis": "URL Domain Analysis", "fact_checker": "Fact checker", "warning": "Warning", "mentions": "Mentions", "assistant_error_instagram": "The assistant has failed to retrieve this instagram post. Please open this URL in a new tab (you may need to log in to instagram), then use the ASSISTANT FOR CURRENT PAGE button to retry.", "assistant_error_server_error": "The assistant could not process the link provided due to a problem with the server, please try again later. If the problem persists please contact support.", "assistant_error_connection_error": "The assistant is having issues connecting to the server, please try again later.", "extracted_urls": "Extracted URLs", "extracted_urls_url_domain_analysis": "Extracted URLs with URL Domain Analysis", "extracted_urls_url_domain_analysis_failed": "Extracted URLs with URL Domain Analysis has failed.", "extracted_urls_tooltip": "What is this?
For every URL extracted from the original URL, we run either the domain (if this is a non social media URL) or the account (if this is a social media URL) against our URL domain analysis service. The results of this check are shown here.

What can I do with these?
The domain analysis service intends to collect information about a domain/account from multiple sources. From here, we intend to inform the user whether any of the sources we collect from hold information on the domain/account of the URL entered. The result is split into three types: Since this is information collected from multiple sources, we have given the source we have taken the details from and if provided, any evidence the source itself has given so users can check the validity of claims made about a domain. For more information on sources and data collection, see this page"} \ No newline at end of file +{ + "assistant_title": "Assistant", + "assistant_intro": "The assistant will help you to analyse a webpage, an image or a video file and suggest which WeVerify tools are useful for each case", + "assistant_choose": "Choose what you want to analyse", + "assistant_webpage_header": "Webpage link", + "assistant_webpage_text": "Insert the link of a webpage, and the assistant will suggest the most useful tools for the contents of the given page.", + "assistant_file_header": "Local file", + "assistant_file_text": "The assistant will suggest the most useful tools depending on if the file is a video or image", + "assistant_choose_tool": "Choose the tool you want to use", + "upload_video": "Video", + "upload_image": "Image", + "assistant_urlbox": "URL", + "assistant_give_url": "Give the URL of the page to analyse", + "assistant_paste_url": "Paste the URL here", + "please_give_a_correct_link": "The link provided is incorrect or not supported.", + "button_analyse": "Analyse", + "button_clean": "Remove", + "save": "Save", + "source_credibility_title": "Source Credibility", + "source_credibility_byline": "The source has been found as part of a credibility check", + "link_explorer_title": "Link Explorer", + "link_explorer_byline": "The following URLs have been extracted from the page, and their domains have been checked for credibility", + "text_title": "Text", + "text_intro": "The following text has been found on the page", + "dbkf_title": "DBKF Check", + "expand_text": "Expand Text", + "dbkf_error": "An issue has occurred when trying to connect to the database of known fakes. Some results may be omitted from this page. If the problem persists, please contact support.", + "sc_failed": "The source credibility check has failed. Some results may not be displayed. If the problem persists, please contact support.", + "link_tooltip": "What is this?
The scores displayed in this section give an indication of how reliable the web source listed can be considered. Scores range from 0-100.

In most cases, the source checked for credibility will be the URL domain. In some cases where this is not useful a more relevant part of the URL has been checked against. In all cases, the full URL and the domain against which the source credibility check was carried on are listed in the form URL : domain-for-check.

How are these calculated?
Various institutions analyse sources (particularly domains) across the web to evaluate how reliable they are likely to be based on various metrics.
Here, datasets assessing web domain reliability have been pulled mainly from Open Sources and the WeVerify DBKF database.
Since the metrics or scores from each of these sources do not necessarily overlap and cannot easily be compared, all scores from any given institution are mapped to a single number between 0-100.
For any URL, a list of all institutions which gave the relevant domain a score has been listed, along with the (mapped) results they gave.
The final result displayed for any domain is the lowest score from the various sources.
", + "media_title": "Media", + "images_label": "Images", + "videos_label": "Videos", + "media_found": "The following media has been found on the page", + "media_below": "Select the media you would like to verify", + "media_to_process": "Media to Process", + "assistant_error": "An unexpected assistant error has occurred. If the problem persists, contact support.", + "things_you_can_do_header": "Potential Tools", + "things_you_can_do": "Below are the tools you can use on this media type", + "navbar_analysis_image": "Image Analysis", + "navbar_analysis_video": "Video Analysis", + "navbar_keyframes": "Keyframes", + "navbar_thumbnails": "Thumbnails", + "navbar_twitter": "Tw. search", + "navbar_magnifier": "Magnifier", + "navbar_metadata": "Metadata", + "navbar_rights": "Video rights", + "navbar_forensic": "Forensic", + "navbar_ocr": "OCR", + "navbar_twitter_sna": "Fact Check", + "navbar_assistant": "Assistant", + "assistant_help_title": "Assistant Help", + "assistant_help_1": "The WeVerify toolkit (this plugin) has multiple tools which can help in the verification of content on social networks, designed to help journalists save time and be more efficient in their fact checking tasks.
A full list of these tools can be found in the tutorial section of this plugin.
Given the multiple tools and services available, the weverify assistant has been designed to guide users to the services available to them given the nature of the content they would like to check.

", + "assistant_help_2": "How does the assistant work?
Users can choose to upload their own media to be checked (an image or a video), in which case verification tools on the plugin which support media upload will be listed.
An alternative option is to enter a URL which needs verification or fact checking.
Once a URL in entered, the assistant attempts to extract any text, images or videos it can find on the page.
Any extracted text or media are then used to suggest the potential actions which can be carried out. Currently, there are three major components to this:More information on each of these can be found in the links below.

", + "assistant_help_3": "Which URLS are supported?
Currently, there is dedicated support for links for the following types of URLs: Other generic links can also be entered and the assistant will attempt to retrieve what it can. However, any results (particularly on the extraction of images and text) on generic links may be much more generalised.

", + "assistant_help_4": "More information
For a detailed breakdown of the type of URLs supported by the assistant, see this page
For a detailed breakdown of the tools and checks run by the assistant, see: this page", + "enter_url": "Enter URL", + "mode_label": "URL mode", + "url_text": "URL Text", + "url_media": "URL Media", + "media_text": "Extracted Media Text", + "download_video": "The video has been extracted but cannot be processed using the direct URL. Please open it in a new tab using the link below, download it, and use the assistant to see which tools can be used on the downloaded video.", + "text_warning": "Warnings found against text. See warning box.", + "image_warning": "Warnings found against image. See warning box.", + "warning_title": "Warning", + "warning_subtitle": "Some elements of this content have been flagged", + "status_title": "Status", + "status_subtitle": "Note: one or more of the automated checks have resulted in an error. Some results may be omitted from this page.", + "named_entity_title": "Text entities", + "dbkf_image_warning": "The image from this URL has matched against the following from the database of known fakes with a similarity score of", + "dbkf_video_warning": "The video from this URL has matched against the following from the database of known fakes with a similarity score of", + "dbkf_text_warning": "The text from this URL has matched against the following from the database of known fakes", + "labelled_as": "It has been labelled as:", + "commented_as": "with the following comment :", + "hp_warning": "The text from this URL has returned an unusually high hyperpartisan score of", + "image_analysis_text": "Retrieve contextual information about the image", + "video_analysis_text": "Retrieve contextual information about the video", + "keyframes_text": "Fragment the video", + "thumbnails_text": "Reverse search on thumbnails from the video", + "magnifier_text": "Examine the image thoroughly", + "metadata_text": "Retrieve image/video metadata", + "rights_text": "Retrieve information solely about video rights", + "forensic_text": "Detect any image manipulation", + "ocr_text": "Extract any text from the image", + "hyperpartisan_title": "Hyperpartisan service", + "dbkf_text_title": "Database of known fakes text search", + "dbkf_media_title": "Database of known fakes media search", + "ne_title": "Named entity search", + "ocr_title": "OCR search", + "source_cred_title": "Source credibility service", + "mt_title": "Machine translation service", + "translate": "Translate (beta)", + "copy_link": "Copy link", + "archive_link": "Archive", + "source_credibility_warning": "The domain or account has been mentioned in a lookup against:", + "text_tooltip": "What is this?
Any text which can be extracted from the given URL is displayed here

How is this used?
Various text processing tools are run against this text: For more information, see: this page", + "media_tooltip": "What is this?
Any images or videos which can be extracted from the URL have been displayed here.

What can I do with these?
For any selected image/video, a list of relevant tools from the plugin which can process this media are given. Selecting any of these will redirect the media to the selected tool.
Alongside this, the assistant will reverse search the media against the database of known fakes. If any results are found, these will be displayed in the Warnings section.

For more information, see: this page", + "sc_tooltip": "What is this?
For every URL entered, we run either the domain (if this is a non social media URL) or the account (if this is a social media URL) against our URL domain analysis service. The results of this check are shown here.

What can I do with these?
The domain analysis service intends to collect information about a domain/account from multiple sources. From here, we intend to inform the user whether any of the sources we collect from hold information on the domain/account of the URL entered. The result is split into three types: Since this is information collected from multiple sources, we have given the source we have taken the details from and if provided, any evidence the source itself has given so users can check the validity of claims made about a domain. For more information on sources and data collection, see this page", + "source_cred_popup_header": "The domain/account has been found in the following reports listed by:", + "url_domain_analysis": "URL Domain Analysis", + "fact_checker": "Fact checker", + "warning": "Warning", + "mentions": "Mentions", + "assistant_error_instagram": "The assistant has failed to retrieve this instagram post. Please open this URL in a new tab (you may need to log in to instagram), then use the ASSISTANT FOR CURRENT PAGE button to retry.", + "assistant_error_server_error": "The assistant could not process the link provided due to a problem with the server, please try again later. If the problem persists please contact support.", + "assistant_error_connection_error": "The assistant is having issues connecting to the server, please try again later.", + "extracted_urls": "Extracted URLs", + "extracted_urls_url_domain_analysis": "Extracted URLs with URL Domain Analysis", + "extracted_urls_url_domain_analysis_failed": "Extracted URLs with URL Domain Analysis has failed.", + "extracted_urls_tooltip": "What is this?
For every URL extracted from the original URL, we run either the domain (if this is a non social media URL) or the account (if this is a social media URL) against our URL domain analysis service. The results of this check are shown here.

What can I do with these?
The domain analysis service intends to collect information about a domain/account from multiple sources. From here, we intend to inform the user whether any of the sources we collect from hold information on the domain/account of the URL entered. The result is split into three types: Since this is information collected from multiple sources, we have given the source we have taken the details from and if provided, any evidence the source itself has given so users can check the validity of claims made about a domain. For more information on sources and data collection, see this page", + "assistant_video_download_action": "Download video", + "assistant_video_download_action_description": "Click here to download the video, to your machine. The download video can then be used in the assistant to access a wider range of video analysis services." +} From c63c1af6b52deec1d89bb1e6d6da31e27cfc953d Mon Sep 17 00:00:00 2001 From: Robin Farkas <165783228+robfrks@users.noreply.github.com> Date: Tue, 11 Jun 2024 12:15:01 +0200 Subject: [PATCH 02/18] added translations for fake annotation on checkGIF (#527) --- src/components/NavItems/tools/Gif/AnimatedGif.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/NavItems/tools/Gif/AnimatedGif.jsx b/src/components/NavItems/tools/Gif/AnimatedGif.jsx index 224b1faf5..f4a3d5986 100644 --- a/src/components/NavItems/tools/Gif/AnimatedGif.jsx +++ b/src/components/NavItems/tools/Gif/AnimatedGif.jsx @@ -265,7 +265,7 @@ const AnimatedGif = ({ Date: Tue, 11 Jun 2024 16:31:02 +0200 Subject: [PATCH 03/18] 454 metadata form refactoring (#528) * moved metadata tip * metadata form changed to be different for images and videos * changed json files back * video and image for metadata section * Synthetic image detection UX improvements * refactoring + updated offline translations * 465 checkgif labels (#503) * functional fake text on check gif and gif download * functional checkGif with moveable "Fake" label * clean up tests * better Fake text * can toggle fake image text and change its color * can add and remove "Fake" annotation * user can change text size, more intuitive interactions for adding fake annotation and customizing it * language keywords added * added comments, removed useless code * made gifs bigger * comment * removed fragments and corrected type error * updated translation * Revert "video and image for metadata section" This reverts commit 9189891ec0a5de7bbfc73edc2d93dd50dd3c0c74. * Revert "changed json files back" This reverts commit 977d603966f3cdb234ef42ba0b6eba478d68ea83. * Revert "metadata form changed to be different for images and videos" This reverts commit 98e06a46fa79dc032f1be051ef6de5e3feada8de. * correct file input button * cleaned up code --------- Co-authored-by: Valentin Porcellini --- .../NavItems/tools/Metadata/Metadata.jsx | 142 +++++++----------- 1 file changed, 54 insertions(+), 88 deletions(-) diff --git a/src/components/NavItems/tools/Metadata/Metadata.jsx b/src/components/NavItems/tools/Metadata/Metadata.jsx index 0dbc573e9..1d0461d02 100644 --- a/src/components/NavItems/tools/Metadata/Metadata.jsx +++ b/src/components/NavItems/tools/Metadata/Metadata.jsx @@ -1,15 +1,10 @@ import React, { useEffect, useState } from "react"; import Box from "@mui/material/Box"; import { useSelector } from "react-redux"; -import TextField from "@mui/material/TextField"; -import Button from "@mui/material/Button"; //import 'tui-image-editor/dist/tui-image-editor.css' -import FolderOpenIcon from "@mui/icons-material/FolderOpen"; -import Typography from "@mui/material/Typography"; import FormControlLabel from "@mui/material/FormControlLabel"; import Radio from "@mui/material/Radio"; import RadioGroup from "@mui/material/RadioGroup"; -import Grid from "@mui/material/Grid"; import MetadataImageResult from "./Results/MetadataImageResult"; import MetadataVideoResult from "./Results/MetadataVideoResult"; import useImageTreatment from "./Hooks/useImageTreatment"; @@ -30,6 +25,9 @@ import HeaderTool from "../../../Shared/HeaderTool/HeaderTool"; import { useDispatch } from "react-redux"; import { setMetadataMediaType } from "../../../../redux/reducers/tools/metadataReducer"; +import { Alert, Stack } from "@mui/material"; +import StringFileUploadField from "components/Shared/StringFileUploadField"; + const Metadata = ({ mediaType }) => { const { url, type } = useParams(); const location = useLocation(); @@ -50,6 +48,7 @@ const Metadata = ({ mediaType }) => { mediaType === "video" ? false : true, ); const [input, setInput] = useState(resultUrl ? resultUrl : ""); + const [fileInput, setFileInput] = useState(null); const [imageUrl, setImageurl] = useState(null); const [videoUrl, setVideoUrl] = useState(null); const [urlDetected, setUrlDetected] = useState(false); @@ -91,6 +90,12 @@ const Metadata = ({ mediaType }) => { } else { setVideoUrl(input); } + } else if (fileInput) { + if (radioImage) { + setImageurl(URL.createObjectURL(fileInput)); + } else { + setVideoUrl(URL.createObjectURL(fileInput)); + } } }; @@ -149,6 +154,10 @@ const Metadata = ({ mediaType }) => { setInput(""); }; + const handleCloseFile = () => { + setFileInput(null); + }; + return (
{ /> } /> + + {keyword("description_limitations")} + + + { /> -
- - - setInput(e.target.value)} - /> - - - setRadioImage(!radioImage)} - row - > - } - label={keyword("metadata_radio_image")} - labelPlacement="end" - /> - } - label={keyword("metadata_radio_video")} - labelPlacement="end" - /> - - - - - - -
- - - - setRadioImage(!radioImage)} + row > - - - * {keyword("description_limitations")} - - - - - - - + } + label={keyword("metadata_radio_image")} + labelPlacement="end" + /> + } + label={keyword("metadata_radio_video")} + labelPlacement="end" + /> + + + + + From c30f84d8d20bcc8aafb7a7491319e2e1d2e6f4a8 Mon Sep 17 00:00:00 2001 From: Rosanna Milner <44234896+rosannamilner@users.noreply.github.com> Date: Tue, 11 Jun 2024 16:27:06 +0100 Subject: [PATCH 04/18] Fix bug with assistant help tooltip Bug with assistant help tooltip not appearing and crashing when clicked - changed from `HelpDialog` to `Tooltip` in `AssistantIntroduction.jsx` --- .../Assistant/AssistantIntroduction.jsx | 31 +++++++++++-------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/src/components/NavItems/Assistant/AssistantIntroduction.jsx b/src/components/NavItems/Assistant/AssistantIntroduction.jsx index c371e5bed..38d8b2941 100644 --- a/src/components/NavItems/Assistant/AssistantIntroduction.jsx +++ b/src/components/NavItems/Assistant/AssistantIntroduction.jsx @@ -5,7 +5,8 @@ import { Box, CardHeader } from "@mui/material"; import Card from "@mui/material/Card"; import CardContent from "@mui/material/CardContent"; import Grid from "@mui/material/Grid"; -import HelpDialog from "../../Shared/HelpDialog/HelpDialog"; +import Tooltip from "@mui/material/Tooltip"; +import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined"; import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile"; import LinkIcon from "@mui/icons-material/Link"; import Typography from "@mui/material/Typography"; @@ -89,20 +90,24 @@ const AssistantIntroduction = (props) => { } action={ -
- { - } -
- } + classes={{ tooltip: classes.assistantTooltip }} + > + + /> From 6f390fe1af6e5d3760e1f7fc9f2e00e23e7b3ff5 Mon Sep 17 00:00:00 2001 From: Valentin Date: Wed, 12 Jun 2024 16:38:48 +0200 Subject: [PATCH 05/18] Loccus chart + refactoring (#530) * Tools Refactoring (#519) * Synthetic image detection UX improvements * refactoring + updated offline translations * wip * Refactored footer types and Footer, Navbar, DrawerItem, AllTools. Highlight the tool used in the side menu * Added missing package, fixed scroll bars and enhanced general layout * Improved naming to have TopMenu, MainContentMenu, and SideMenu, fixed some variables, code cleanup * Improved alignment * Fixed RTL padding * Fixed RTL chevron * Improved naming * Fixed lint warning * Added jsdoc * Cleanup * Fixed error * add v0.81 manifest * Added chartJs, added chart with detection percentage over time * Removed console.log * Added chart gradient based on detection score * Updated packages * Moved variables * Fixed lint warnings --------- Co-authored-by: Bertrand Goupil --- package-lock.json | 55 +- package.json | 4 + .../locales/en/components/NavItems/About.json | 2 +- public/manifest.json | 2 +- .../NavBar/DrawerItem/DrawerItem.jsx | 53 +- .../MainContentMenuTabItems.jsx} | 27 +- src/components/NavBar/NavBar.jsx | 1636 ++++++++--------- .../{AllTools.jsx => MainContentMenu.jsx} | 109 +- .../{ToolCard.jsx => MainContentMenuItem.jsx} | 14 +- .../NavItems/tools/Loccus/index.jsx | 31 +- .../NavItems/tools/Loccus/loccusResults.jsx | 188 +- src/components/Shared/Footer/Footer.jsx | 36 +- .../Shared/MaterialUiStyles/useMyStyles.jsx | 8 +- 13 files changed, 1204 insertions(+), 961 deletions(-) rename src/components/NavBar/{TabItem/TabItem.jsx => MainContentMenuTabItems/MainContentMenuTabItems.jsx} (75%) rename src/components/NavItems/tools/Alltools/{AllTools.jsx => MainContentMenu.jsx} (77%) rename src/components/NavItems/tools/Alltools/{ToolCard.jsx => MainContentMenuItem.jsx} (92%) diff --git a/package-lock.json b/package-lock.json index 0526795cb..0d686883e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,9 @@ "@types/chrome": "^0.0.266", "@wavesurfer/react": "^1.0.4", "axios": "^1.5.1", + "chart.js": "^4.4.3", + "chartjs-adapter-dayjs-4": "^1.0.4", + "clsx": "^2.1.1", "d3-selection": "^3.0.0", "dateformat": "^5.0.3", "dayjs": "^1.11.10", @@ -40,6 +43,7 @@ "mp4box": "^0.5.2", "prop-types": "^15.8.1", "react": "^18.2.0", + "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", "react-gauge-chart": "^0.5.1", "react-hook-form": "^7.47.0", @@ -2813,6 +2817,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@kurkle/color": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", + "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" + }, "node_modules/@leichtgewicht/ip-codec": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz", @@ -5243,12 +5252,12 @@ } }, "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "dev": true, "dependencies": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" }, "engines": { "node": ">=8" @@ -5471,6 +5480,29 @@ "node": ">=0.8.0" } }, + "node_modules/chart.js": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz", + "integrity": "sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=8" + } + }, + "node_modules/chartjs-adapter-dayjs-4": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/chartjs-adapter-dayjs-4/-/chartjs-adapter-dayjs-4-1.0.4.tgz", + "integrity": "sha512-yy9BAYW4aNzPVrCWZetbILegTRb7HokhgospPoC3b5iZ5qdlqNmXts2KdSp6AqnjkPAp/YWyHDxLvIvwt5x81w==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "chart.js": ">=4.0.1", + "dayjs": "^1.9.7" + } + }, "node_modules/check-more-types": { "version": "2.24.0", "resolved": "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz", @@ -8352,9 +8384,9 @@ "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==" }, "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "dev": true, "dependencies": { "to-regex-range": "^5.0.1" @@ -12580,6 +12612,15 @@ "node": ">=0.10.0" } }, + "node_modules/react-chartjs-2": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz", + "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==", + "peerDependencies": { + "chart.js": "^4.1.1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", diff --git a/package.json b/package.json index 8add323b8..0c0948456 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,9 @@ "@types/chrome": "^0.0.266", "@wavesurfer/react": "^1.0.4", "axios": "^1.5.1", + "chart.js": "^4.4.3", + "chartjs-adapter-dayjs-4": "^1.0.4", + "clsx": "^2.1.1", "d3-selection": "^3.0.0", "dateformat": "^5.0.3", "dayjs": "^1.11.10", @@ -48,6 +51,7 @@ "mp4box": "^0.5.2", "prop-types": "^15.8.1", "react": "^18.2.0", + "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", "react-gauge-chart": "^0.5.1", "react-hook-form": "^7.47.0", diff --git a/public/locales/en/components/NavItems/About.json b/public/locales/en/components/NavItems/About.json index a8d0d936c..00d2e4bde 100644 --- a/public/locales/en/components/NavItems/About.json +++ b/public/locales/en/components/NavItems/About.json @@ -1 +1 @@ -{"about_title": "InVID-WeVerify toolkit", "source_part_1": "This verification toolkit is provided in open source (under a ", "mit_licence_link": "license.html", "mit_licence_link_label": "MIT Licence)", "source_part_2": " by the AFP Medialab. It has been developed during the european projects InVID (2016-2018), WeVerify (2018-2021; both H2020) and YouCheck! (2019-2021; media literacy) as well as through the IFCN EnVisu4 project (2021) to help journalists and fact-checkers verify content on social networks (Disclaimer: please note that some external services used through web services via this interface, such as those presented under the Analysis and Keyframes tabs, are not open-sourced). This browser extension is currently being improved as part of the European project vera.ai (2022-2025; Verification Assisted by Artificial Intelligence).", "description": "It has been designed as a verification Swiss army knife helping journalists to save time and be more efficient in their fact-checking tasks. This is a beta version and we will update it regularly thanks to your feedback.", "feedBack_part_1": "For any feedback (bugs, enhancement, suggestions) please use first the feedback button at the bottom right of your screen. In case of trouble, you can email us at ", "invid_email": "invid-verification-plugin@iti.gr", "feedBack_part_2": ", or leave us a direct message through the ", "feedback_widget": "feedback widget", "feedback_part_3": " at the bottom right.", "disclaimer": "Disclaimer", "disclaimer_text": "This software is provided ''as is'', without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.", "privacy": "Privacy", "privacy_text": "This plugin does not gather any personal data or browsing data. We implemented Matomo only to get feedback and statistics about the tool usage, in order to improve the next releases. Some new tools (TwitterSNA, CheckGIF, GIF export of Forensic, Beta tools) need registration and are reserved to journalists, fact-checkers and researchers.", "info_invid_part_1": "WeVerify was a Horizon 2020 innovation action funded by the European Union under grant agreement 825297 (2018-2021). InVID was a Horizon 2020 innovation action funded by the European Union under grant agreement 687786 (2016-2018). For more information, visit the ", "info_invid_website": "InVID website", "info_invid_link_website": "http://www.invid-project.eu/", "info_invid_part_2": " or follow us on ", "twitter": "X/Twitter", "info_invid_link_twitter": "https://twitter.com/InVID_EU", "info_invid_part_3": ".", "info_weverify_part_1": "Vera.ai is a Horizon Research and Innovation Action funded by the European Union under grant agreement 101070093 (2022-2025). For more information, visit our ", "info_weverify_website": "vera.ai website", "info_weverify_link_website": "https://veraai.eu/", "info_weverify_part_2": " or follow us on ", "info_weverify_link_twitter": "https://twitter.com/veraai_eu", "developed_text_part_1": "The initial versions (0.1-0.7) of this plugin have been developed by ", "medialab_link_label": "AFP Medialab", "medialab_link": "https://www.afp.com/en/medialab/", "developed_text_part_2": " (Denis TEYSSOU, Bertrand GOUPIL, Dominique FERRANDINI, Valentin PORCELLINI) with the help of many developers in the last four years (Laurent LACROIX, Eric SCHAEFFER, Jean-Michel LEUNG, Nathan GOYAT, Axel VIGNY, Juliette CASTERAN, Thibault LHUILLIER, Duyen THI DO, Anatole ROULET, Marius POPARASCU, Enrique NIETO ARRANZ, Muneerah PATEL and Robin FARKAS). The underlying services are provided by ", "iti_link": "http://mklab.iti.gr/", "iti_link_label": "Thessaloniki Information Technologies Institute", "developed_text_part_3": " (ITI, CERTH), ", "lleida_link": "http://griho.udl.cat/", "lleida_link_label": "the University de Lleida (Spain) ", "borelli_link": "https://ens-paris-saclay.fr/en/research/research-laboratories/centre-borelli", "borelli_link_label": " and Borelli Center", "developed_text_part_4": ". The Assistant feature is developed by ", "usfd_link": "https://gate.ac.uk/", "usfd_link_label": "the University of Sheffield.", "about_human_rights": "For Human Rights defenders", "quiz_unlock_explanations": "Unlock Interactive explanations", "cookies_usage": "Accept Matomo", "storage_usage": "Keep my preferences", "arabic_translation_part_1": "", "afcn_link": "", "afcn_link_label": "", "arabic_translation_part_2": "", "arij_link": "", "arij_link_label": ""} \ No newline at end of file +{"about_title": "InVID-WeVerify toolkit", "source_part_1": "This verification toolkit is provided in open source (under a ", "mit_licence_link": "license.html", "mit_licence_link_label": "MIT Licence)", "source_part_2": " by the AFP Medialab. It has been developed during the european projects InVID (2016-2018), WeVerify (2018-2021; both H2020) and YouCheck! (2019-2021; media literacy) as well as through the IFCN EnVisu4 project (2021) to help journalists and fact-checkers verify content on social networks (Disclaimer: please note that some external services used through web services via this interface, such as those presented under the Analysis and Keyframes tabs, are not open-sourced). This browser extension is currently being improved as part of the European project vera.ai (2022-2025; Verification Assisted by Artificial Intelligence).", "description": "It has been designed as a verification Swiss army knife helping journalists to save time and be more efficient in their fact-checking tasks. This is a beta version and we will update it regularly thanks to your feedback.", "feedBack_part_1": "For any feedback (bugs, enhancement, suggestions) please use first the feedback button at the bottom right of your screen. In case of trouble, you can email us at ", "invid_email": "invid-verification-plugin@iti.gr", "feedBack_part_2": ", or leave us a direct message through the ", "feedback_widget": "feedback widget", "feedback_part_3": " at the bottom right.", "disclaimer": "Disclaimer", "disclaimer_text": "This software is provided ''as is'', without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.", "privacy": "Privacy", "privacy_text": "This plugin does not gather any personal data or browsing data. We implemented Matomo only to get feedback and statistics about the tool usage, in order to improve the next releases. Some new tools (TwitterSNA, CheckGIF, GIF export of Forensic, Beta tools) need registration and are reserved to journalists, fact-checkers and researchers.", "info_invid_part_1": "WeVerify was a Horizon 2020 innovation action funded by the European Union under grant agreement 825297 (2018-2021). InVID was a Horizon 2020 innovation action funded by the European Union under grant agreement 687786 (2016-2018). For more information, visit the ", "info_invid_website": "InVID website", "info_invid_link_website": "http://www.invid-project.eu/", "info_invid_part_2": " or follow us on ", "twitter": "X/Twitter", "info_invid_link_twitter": "https://twitter.com/InVID_EU", "info_invid_part_3": ".", "info_weverify_part_1": "Vera.ai is a Horizon Research and Innovation Action funded by the European Union under grant agreement 101070093 (2022-2025). For more information, visit our ", "info_weverify_website": "vera.ai website", "info_weverify_link_website": "https://veraai.eu/", "info_weverify_part_2": " or follow us on ", "info_weverify_link_twitter": "https://twitter.com/veraai_eu", "developed_text_part_1": "The initial versions (0.1-0.7) of this plugin have been developed by ", "medialab_link_label": "AFP Medialab", "medialab_link": "https://www.afp.com/en/medialab/", "developed_text_part_2": " (Denis TEYSSOU, Bertrand GOUPIL, Dominique FERRANDINI, Valentin PORCELLINI) with the help of many developers in the last four years (Laurent LACROIX, Eric SCHAEFFER, Jean-Michel LEUNG, Nathan GOYAT, Axel VIGNY, Juliette CASTERAN, Thibault LHUILLIER, Duyen THI DO, Anatole ROULET, Marius POPARASCU, Enrique NIETO ARRANZ and Muneerah PATEL). The underlying services are provided by ", "iti_link": "http://mklab.iti.gr/", "iti_link_label": "Thessaloniki Information Technologies Institute", "developed_text_part_3": " (ITI, CERTH), ", "lleida_link": "http://griho.udl.cat/", "lleida_link_label": "the University de Lleida (Spain) ", "borelli_link": "https://ens-paris-saclay.fr/en/research/research-laboratories/centre-borelli", "borelli_link_label": " and Borelli Center", "developed_text_part_4": ". The Assistant feature is developed by ", "usfd_link": "https://gate.ac.uk/", "usfd_link_label": "the University of Sheffield.", "about_human_rights": "For Human Rights defenders", "quiz_unlock_explanations": "Unlock Interactive explanations", "cookies_usage": "Accept Matomo", "storage_usage": "Keep my preferences", "arabic_translation_part_1": "", "afcn_link": "", "afcn_link_label": "", "arabic_translation_part_2": "", "arij_link": "", "arij_link_label": ""} \ No newline at end of file diff --git a/public/manifest.json b/public/manifest.json index 7865053ec..b2e68fb63 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "Fake news debunker by InVID & WeVerify", - "version": "0.80.1", + "version": "0.81", "description": "InVID WeVerify extension", "short_name": "Verification Plugin", "action": { diff --git a/src/components/NavBar/DrawerItem/DrawerItem.jsx b/src/components/NavBar/DrawerItem/DrawerItem.jsx index 2a85bf376..842bc5b10 100644 --- a/src/components/NavBar/DrawerItem/DrawerItem.jsx +++ b/src/components/NavBar/DrawerItem/DrawerItem.jsx @@ -4,7 +4,7 @@ import { Container } from "@mui/material"; import Fade from "@mui/material/Fade"; import { useDispatch, useSelector } from "react-redux"; import { selectTool } from "../../../redux/reducers/tools/toolReducer"; -import AllTools from "../../NavItems/tools/Alltools/AllTools"; +import MainContentMenu from "../../NavItems/tools/Alltools/MainContentMenu"; import Analysis from "../../NavItems/tools/Analysis/Analysis"; import Keyframes from "../../NavItems/tools/Keyframes/Keyframes"; import Thumbnails from "../../NavItems/tools/Thumbnails/Thumbnails"; @@ -14,7 +14,7 @@ import Metadata from "../../NavItems/tools/Metadata/Metadata"; import VideoRights from "../../NavItems/tools/VideoRights/VideoRights"; import Forensic from "../../NavItems/tools/Forensic/Forensic"; import { Route, Routes, useLocation } from "react-router-dom"; -import Footer from "../../Shared/Footer/Footer"; +import { Footer, FOOTER_TYPES } from "../../Shared/Footer/Footer"; import TwitterSna from "../../NavItems/tools/TwitterSna/TwitterSna"; import OCR from "../../NavItems/tools/OCR/OCR"; import CheckGif from "../../NavItems/tools/Gif/CheckGif"; @@ -31,92 +31,92 @@ import Archive from "../../NavItems/tools/Archive"; import SemanticSearch from "../../NavItems/tools/SemanticSearch"; import Loccus from "../../NavItems/tools/Loccus"; -const DrawerItem = ({ drawerItems }) => { +const DrawerItem = ({ toolsList }) => { const drawerItemsContent = [ { - content: , + content: , footer:
, }, { content: , - footer: