Skip to content

Commit

Permalink
Loccus chart + refactoring (#530)
Browse files Browse the repository at this point in the history
* 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 <[email protected]>
  • Loading branch information
Sallaa and AFPMedialab authored Jun 12, 2024
1 parent ad5f37c commit 6f390fe
Show file tree
Hide file tree
Showing 13 changed files with 1,204 additions and 961 deletions.
55 changes: 48 additions & 7 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion public/locales/en/components/NavItems/About.json
Original file line number Diff line number Diff line change
@@ -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": "[email protected]", "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": ""}
{"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": "[email protected]", "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": ""}
2 changes: 1 addition & 1 deletion public/manifest.json
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
53 changes: 26 additions & 27 deletions src/components/NavBar/DrawerItem/DrawerItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";
Expand All @@ -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: <AllTools tools={drawerItems} />,
content: <MainContentMenu tools={toolsList} />,
footer: <div />,
},
{
content: <Analysis />,
footer: <Footer type={"iti"} />,
footer: <Footer type={FOOTER_TYPES.ITI} />,
},
{
content: <Keyframes />,
footer: <Footer type={"iti"} />,
footer: <Footer type={FOOTER_TYPES.ITI} />,
},
{
content: <Thumbnails />,
footer: <Footer type={"afp"} />,
footer: <Footer type={FOOTER_TYPES.AFP} />,
},
{
content: <VideoRights />,
footer: <Footer type={"GRIHO"} />,
footer: <Footer type={FOOTER_TYPES.GRIHO} />,
},
{
content: <Metadata mediaType={"video"} />,
footer: <Footer type={"afp"} />,
footer: <Footer type={FOOTER_TYPES.AFP} />,
},
{
content: <DeepfakeVideo />,
footer: <Footer type={"iti"} />,
footer: <Footer type={FOOTER_TYPES.ITI} />,
},
{
content: <AnalysisImg />,
footer: <Footer type={"iti"} />,
footer: <Footer type={FOOTER_TYPES.ITI} />,
},
{
content: <Magnifier />,
footer: <Footer type={"afp"} />,
footer: <Footer type={FOOTER_TYPES.AFP} />,
},
{
content: <Metadata mediaType={"image"} />,
footer: <Footer type={"afp"} />,
footer: <Footer type={FOOTER_TYPES.AFP} />,
},

{
content: <Forensic />,
footer: <Footer type={"iti-borelli-afp"} />,
footer: <Footer type={FOOTER_TYPES.ITI_BORELLI_AFP} />,
},
{
content: <OCR />,
footer: <Footer type={"usfd"} />,
footer: <Footer type={FOOTER_TYPES.USFD} />,
},
{
content: <CheckGif />,
footer: <Footer type={"borelli-afp"} />,
footer: <Footer type={FOOTER_TYPES.BORELLI_AFP} />,
},
{
content: <SyntheticImageDetection />,
footer: <Footer type={"iti-unina"} />,
footer: <Footer type={FOOTER_TYPES.ITI_UNINA} />,
},
{
content: <DeepfakeImage />,
footer: <Footer type={"iti"} />,
footer: <Footer type={FOOTER_TYPES.ITI} />,
},
{
content: <Geolocation />,
footer: <Footer type={"afp"} />,
footer: <Footer type={FOOTER_TYPES.AFP} />,
},
{
content: <Loccus />,
footer: <Footer type={"loccus"} />,
footer: <Footer type={FOOTER_TYPES.LOCCUS} />,
},
{
content: <TwitterAdvancedSearch />,
footer: <Footer type={"afp"} />,
footer: <Footer type={FOOTER_TYPES.AFP} />,
},
{
content: <SemanticSearch />,
footer: <Footer type={"kinit"} />,
footer: <Footer type={FOOTER_TYPES.KINIT} />,
},
{
content: <TwitterSna />,
footer: <Footer type={"afp-usfd-eudisinfolab"} />,
footer: <Footer type={FOOTER_TYPES.USFD_AFP_EU_DISINFOLAB} />,
},
{
content: <Archive />,
footer: <Footer type={"afp"} />,
footer: <Footer type={FOOTER_TYPES.AFP} />,
},
];

Expand All @@ -128,8 +128,7 @@ const DrawerItem = ({ drawerItems }) => {
<DrawerItemContent index={0} drawContent={drawerItemsContent} />
}
/>
{drawerItems.map((item) => {
let index = item.id - 1;
{toolsList.map((item, index) => {
if (item.path) {
return (
<Route path={item.path} key={index}>
Expand Down Expand Up @@ -242,7 +241,7 @@ const DrawerItemContent = ({ index, drawContent }) => {
};

DrawerItem.propTypes = {
drawerItems: PropTypes.any,
toolsList: PropTypes.any,
};

DrawerItemContent.propTypes = {
Expand Down
Loading

0 comments on commit 6f390fe

Please sign in to comment.