From 786af2a01efc3785b012cd6e5c41320e31d42ac6 Mon Sep 17 00:00:00 2001 From: Valentin Date: Thu, 20 Jun 2024 10:49:13 +0200 Subject: [PATCH 1/8] Offline translation + readme (#546) * Add missing assistant_video_download_action and assistant_video_download_action_description (#525) * added translations for fake annotation on checkGIF (#527) * 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 * 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` * 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 * Loccus enhancements (#532) * 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 * Bumped version, added missing keyword, added rtl support --------- Co-authored-by: Bertrand Goupil * Loccus enhancements (#533) * Added missing controller + fixed warning * #534 update detector names * #526 Fix error message for 404 * navbar and all tool use category keys instead of translated label * fix assistant help * Loccus enhancements (#539) * 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 * Bumped version, added missing keyword, added rtl support * Added missing controller * Added missing controller + fixed warning * Removed console.log * Improved error handling * Added scale modal to Loccus, refactoring, added download buttons to loccus * Refactoring --------- Co-authored-by: Bertrand Goupil * Updated translation * 0.81 (#542) (#543) * Add missing assistant_video_download_action and assistant_video_download_action_description (#525) * added translations for fake annotation on checkGIF (#527) * 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 --------- * 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` * 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 --------- * Loccus enhancements (#532) * 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 * Bumped version, added missing keyword, added rtl support --------- * Loccus enhancements (#533) * Added missing controller + fixed warning * #534 update detector names * #526 Fix error message for 404 * navbar and all tool use category keys instead of translated label * fix assistant help * Loccus enhancements (#539) * 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 * Bumped version, added missing keyword, added rtl support * Added missing controller * Added missing controller + fixed warning * Removed console.log * Improved error handling * Added scale modal to Loccus, refactoring, added download buttons to loccus * Refactoring --------- * Updated translation --------- Co-authored-by: Goupil Conseil Co-authored-by: Twin Karmakharm Co-authored-by: Robin Farkas <165783228+robfrks@users.noreply.github.com> Co-authored-by: Rosanna Milner <44234896+rosannamilner@users.noreply.github.com> Co-authored-by: Bertrand Goupil * Readme update (#544) * Updated README.md * Update README.md * Updated README.md * Updated offline translation --------- Co-authored-by: Goupil Conseil Co-authored-by: Twin Karmakharm Co-authored-by: Robin Farkas <165783228+robfrks@users.noreply.github.com> Co-authored-by: Rosanna Milner <44234896+rosannamilner@users.noreply.github.com> Co-authored-by: Bertrand Goupil --- README.md | 422 ++++-------------- public/locales/ar/components/NavBar.json | 2 +- .../components/NavItems/tools/Alltools.json | 2 +- .../components/NavItems/tools/Assistant.json | 2 +- .../components/NavItems/tools/CheckGIF.json | 2 +- .../components/NavItems/tools/Keyframes.json | 2 +- .../ar/components/NavItems/tools/Loccus.json | 2 +- .../ar/components/Shared/OnWarningInfo.json | 2 +- .../components/NavItems/tools/Alltools.json | 2 +- .../components/NavItems/tools/Assistant.json | 2 +- .../components/NavItems/tools/CheckGIF.json | 2 +- .../components/NavItems/tools/Deepfake.json | 2 +- .../components/NavItems/tools/Keyframes.json | 2 +- .../en/components/NavItems/tools/Loccus.json | 2 +- .../components/NavItems/tools/TwitterSna.json | 2 +- .../en/components/Shared/OnWarningInfo.json | 2 +- 16 files changed, 114 insertions(+), 338 deletions(-) diff --git a/README.md b/README.md index 455896f94..0871f86cd 100644 --- a/README.md +++ b/README.md @@ -1,49 +1,85 @@ # Fake news debunker by InVID, WeVerify and vera.ai -This plugin has been designed as a verification “Swiss army knife” helping journalists to save time and be more efficient in their fact-checking and debunking tasks on social networks especially when verifying videos and images. +This plugin is a verification “Swiss army knife” helping journalists to save time and be more +efficient in their fact-checking and debunking tasks on social networks especially when verifying videos and images. -The provided tools allow you to quickly get contextual information on Facebook and YouTube videos, perform a reverse image search on Google, Baidu or Yandex search engines, to fragment videos from various platforms (Facebook, Instagram, YouTube, Twitter, Daily Motion) into keyframes, to enhance and explore keyframes and images through a magnifying lens, to query Twitter more efficiently through time intervals and many other filters, to read video and image metadata, and to apply forensic filters on still images. +The provided tools allow you to quickly get contextual information on Facebook and YouTube videos, perform a reverse +image search on Google, Baidu or Yandex search engines, to fragment videos from various platforms (Facebook, Instagram, +YouTube, Twitter, Daily Motion) into keyframes, to enhance and explore keyframes and images through a magnifying lens, +to query Twitter more efficiently through time intervals and many other filters, to read video and image metadata, and +to apply forensic filters on still images. -For further details about the tool and the already released versions, please visit the plugin page on our latest project [website](https://www.veraai.eu/category/verification-plugin/). +For further details about the tool and the already released versions, please visit the plugin page on our latest +project [website](https://www.veraai.eu/category/verification-plugin/). -For any feedback (bugs, enhancement, suggestions), please use the feedback tool within the plugin (on the bottom right). +**For any feedback (bugs, enhancement, suggestions), please use the feedback tool within the plugin (on the bottom +right) or file an issue on GitHub.** -This plugin was initially developed by the InVID European project (2016-2018), a Horizon 2020 Innovation Action funded by the European Union under Grant Agreement 687786. It has been enhanced by the WeVerify European project (2018-2021), a Horizon 2020 Innovation Action funded by the European Union under Grant Agreement 825297. Since September 2022, it is improved within the [vera.ai project](https://veraai.eu) under Grant Agreement 101070093. +This plugin was initially developed by the InVID European project (2016-2018), a Horizon 2020 Innovation Action funded +by the European Union under Grant Agreement 687786. It has been enhanced by the WeVerify European project (2018-2021), a +Horizon 2020 Innovation Action funded by the European Union under Grant Agreement 825297. Since September 2022, it is +improved within the [vera.ai project](https://veraai.eu) under Grant Agreement 101070093. -For more information about those three projects, visit the [vera.ai website](https://veraai.eu), the [WeVerify website](https://weverify.eu/), and [InVID website](http://www.invid-project.eu) or follow us on [veraai_eu](https://twitter.com/veraai_eu), [InVID_EU](https://twitter.com/InVID_EU) or on [WeVerify](https://twitter.com/WeVerify). +For more information about those three projects, visit the [vera.ai website](https://veraai.eu), +the [WeVerify website](https://weverify.eu/), and [InVID website](http://www.invid-project.eu) or follow us +on [veraai_eu](https://twitter.com/veraai_eu), [InVID_EU](https://twitter.com/InVID_EU) or +on [WeVerify](https://twitter.com/WeVerify). -**Disclaimer:** 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 non-infringement. 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. +**Disclaimer:** 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 non-infringement. 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. -## Project setup +## Getting Started -To setup this project you need to run: +The Verification plugin is a browser based plugin built with React and Redux. -### `npm install` or `yarn install` +1. To install the dependencies run + ``` + npm install + ``` + or + ``` + yarn install + ``` -#### You will also need a `.env` File containing : +3. Add an `.env` file at the root containing + ``` + REACT_APP_ELK_URL=/twinttweets/_search + REACT_APP_TWINT_WRAPPER_URL= + REACT_APP_FACEBOOK_APP_ID= + REACT_APP_TRANSLATION_GITHUB=https://raw.githubusercontent.com/AFP-Medialab/InVID-Translations/react/ + REACT_APP_KEYFRAME_TOKEN= + REACT_APP_MY_WEB_HOOK_URL= + REACT_APP_GOOGLE_ANALYTICS_KEY= + REACT_APP_MAP_TOKEN= + REACT_APP_BASEURL= + ``` - REACT_APP_ELK_URL=/twinttweets/_search - REACT_APP_TWINT_WRAPPER_URL= - REACT_APP_FACEBOOK_APP_ID= - REACT_APP_TRANSLATION_GITHUB=https://raw.githubusercontent.com/AFP-Medialab/InVID-Translations/react/ - REACT_APP_KEYFRAME_TOKEN= - REACT_APP_MY_WEB_HOOK_URL= - REACT_APP_GOOGLE_ANALYTICS_KEY= - REACT_APP_MAP_TOKEN= - REACT_APP_BASEURL= +## Build the project -####Then you need to load the extension in your browser: +- Run the `dev` script to build the React app in development mode + ``` + npm run dev + ``` -Build the extension using the available scripts to generate the file `dev` or `build`. (#some-markdown-heading) +- Run the `build` to build the React app for production + ``` + npm run build + ``` -#### For Chrome : -- In chrome menu go to `More tools` then click `Extentions` -- Activate the `Developer mode` toggle -- The click the `Load Unpacked` button -- Select the `dev` or `build` file you generated earlier. +## Load the extension on the browser -#### For Firefox : +#### Google Chrome / Chromium-based browsers + +[Chrome for Developers documentation](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked) + +- Go to the Extensions page by entering [chrome://extensions/](chrome://extensions/) in a new tab. +- Enable **Developer Mode** by clicking the toggle switch next to Developer mode. +- Click the **Load unpacked** button and select the extension directory (go inside the `build` folder). + +#### Firefox ( ⚠️ deprecated) - In firefox menu click on `Add-ons` - Then click on the gear button `⚙⌄` @@ -51,301 +87,39 @@ Build the extension using the available scripts to generate the file `dev` or `b - Then click on `Load TEmporary Add-on...` - Select the `manifest.json` in the `dev` or `build` file you generated earlier. -## Available Scripts - -In the project directory, you can run: - -### `npm run dev` or `yarn dev` - -Runs the app in the development mode.
-This will run on port [3000](http://localhost:3000). - -The extension will reload if you make edits.
-You will also see any lint errors in the console. - -### `npm run build` or `yarn build` - -Builds the app for production to the `build` folder.
-It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
-Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -##Project structure - -`public` : Contains the basic files for an extension (manifest.json etc) and the root htlm file (popup.html) - -`src/background` : Contains the srcipts that are executed in the web browser background by the extension. The right click menu for example. - -`src/contentScript` : Contains the srcipts executed in the visited pages.(Now empty) - -`src/Hooks` : Contains react custom hooks used in this project. - -`src/LocalDictionary` : Contains the `components` file from this [github repository](https://github.com/AFP-Medialab/InVID-Translations/tree/react) (This is used as a local backup for the extension if the github is unavailable) - -`src/redux` : Contains react-redux actions and reducers. [Documentation](https://react-redux.js.org/) [basic Tutorial](https://www.youtube.com/watch?v=CVpUuw9XSjY) - -####`src/components` - -This file contains all the different components that are used in this project. - -`src/components/Shared` : Contains all the components that are reused in multiple different components. - -`src/components/FeedBack`: The FeedBack tool - -`src/components/PopUp`: The PopUp of the extension. - -`src/components/MySnackBar`: The little arrow that enable you to get back to the top of the page quickly. - -`src/components/Navbar`: The NavBar and its Drawer (for tools) - -`src/components/NavItems`: All components that the navBar can display. - -`src/components/NavItems/tools`: All components that the `tools drawer` can display. - -## How do I add an item to the `Navbar` of this project ? - -- First go to `src/components/Navbar/Navbar.js` file. Add an object to the `tabItems` list like so : - -``` -import yourImage from "./path/to/your/image"; - -const tabItems = [ - { - title: "navbar_tools", - icon: - - - , - content:
, - path: "tools", - footer:
, - }, - //(...) - { - title: "navbar_factCheck", - icon: , - content: , - path: "factCheck", - footer: