ibm / libras-ui

User interface for the Libras translation service

Libras UI

User interface for the Libras translation service between a spoken and a signed language.

Prerequisites

• Node.js

Setup

Install project dependencies:

npm install

Create an .env file to mock the Libras service or specify the API URL:

REACT_APP_API_MOCK=FALSE
REACT_APP_API_SERVICE_URL=http://localhost:3000

Customize

Create an .env file to update the application running port. The variable name and default value is:

PORT=3000

Run

Start the application in the development mode:

npm start

Test

Launch the test runner in the interactive watch mode:

npm test

See the section about running tests for more information.

Build

Build the app for production to the build folder:

npm run build

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.

libras-ui's Issues

Change to camelCase on iframe element

Describe the bug
React is reporting the lack of camelCase in iframe

To Reproduce
Steps to reproduce the behavior:

1. Open the browser
2. Check dev logs
3. See error

Expected behavior
The logs should be free of React errors

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• OS: [Windows 10]
• Browser [Edge]
• Version [v85]

Implement loading

Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.

https://react.carbondesignsystem.com/?path=/story/loading--default

Implement copy to clipboard button

Is your feature request related to a problem? Please describe.
I'm always frustrated when I need to select all text to copy it to the clipboard.

Describe the solution you'd like
I would like to have a button (copiar texto) that allows me to easily copy the revised text to the clipboard.

Additional context

• If the text area is empty, the button should be disabled
• If there's text in the text area, the button should be enabled

Translate UI to English

Is your feature request related to a problem? Please describe.
External collaborators are having some difficulties with the Portuguese layout.

Describe the solution you'd like
The UI should be translated to English for the MVP.

Describe alternatives you've considered
#29

Connect to the Libras service

Describe the bug
The existing code needs to connect to the refactored Libras service.

To Reproduce
Steps to reproduce the behavior:

1. Go to the home page;
2. Try to translate a text like "Cap I need because sun strong very.";
3. See error.

Expected behavior
This UI must be able to connect to a local instance of the Libras service.

Screenshots

Desktop (please complete the following information):

• OS: macOs
• Browser: Chrome

Design for people with low vision

We will bring a white box to write the sentences and a gray box for the text translated by the tool:

Perform user tests - 2

• Create test script
• Schedule test with users
• Perform test with users
• Compile results
• Adjust mockup
• Validate with the team

Buttons disappears after clicking

Describe the bug
There's a problem with buttons style that are making them disappear after clicked.

To Reproduce
Steps to reproduce the behavior:

1. Write any text on the left text area;
2. Click on 'revisar texto' button;
3. See error.

Expected behavior
After clicked, the buttons should return to its initial state following Carbon's guidelines.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 85.0.4183.83

Activate and deactivate buttons

Before the user type any text into the left text box, the "Revise Text", "Clear" and "Copy" ("Revisar Texto", "Limpar Texto" e "Copiar Texto") should be read-only displayed (disabled), in gray:

When the user start typing int left text box, the "Revise Text" ( "Revisar Texto") button turns blue (#0F62FE), the "Clear" ("Limpar Texto") turns blue (#78A9FF) and the "Copy" "Copiar Texto" button remain gray:

After the user clicks on "Revise Text" ("Revisar texto") and the revised text appears into right box, the "Copy" ("Copiar Texto") button turns blue (#78A9FF):

After the user clicks on "Clear" ("Limpar texto"), the "Revise" ("Revisar Texto") button and even the "Clear" ("Limpar Texto") are read-only again(disabled).

Loading blur needs to cover entire page

Steps:

1. Open Libras app
2. Enter a text to be translated and hit "Review" button

Actual Result: Blur with loading doesn't cover entire page
Expected Result: Blur should be covering the entire page (at the bottom)

User Research

Missing placeholder on "Revised text" textarea

Describe the bug
There must be a placeholder under the "Revised text" textarea

To Reproduce
Steps to reproduce the behavior:

1. Open Libras app
2. Verify placeholder in read-only textarea

Expected behavior
There must be a placeholder "Your revised text will appear here" on "Revided text" textarea

Example of the file structure in the placeholder and an information icon to help

(curadoria)
-Update in placeholder
-give some help (video, document, download example json etc)

https://ibm.invisionapp.com/d/main?redirHash=#/console/15359913/319489561/preview?scrollOffset=538

Add A flag for the reviewed text

Deaf people will be able to understand if the review is right for their context if they see the signs of the review
-still being designed

Corrections to the translated labels

Describe the bug
We need better wording the Libras app

To Reproduce
Steps to reproduce the behavior:

1. Open Libras app
2. Verify English translations

Expected behavior
"Your text (sign language)" should be "Your text" - sign language is not how they call its writing, they are writing in Portuguese or English, they just dont have proper grammar. Sign language is done with their hands =)

"Review" button should be "Review Text" for more clarity of purpose
"Clear" button should be "Clear Text" for more clarity of purpose
"Copy" button should be "Copy Text" for more clarity of purpose

Screenshots

How to handle duplicate phrases in the database

(curadoria)

Text color makes it unreadable

Describe the bug
The color that the text is using makes it unreadable in the right text area.

To Reproduce
Steps to reproduce the behavior:

1. Write any text on the left text area;
2. Click on 'revisar texto' button;
3. See error.

Expected behavior
The text should be using the recommended color theme from Carbon design. For light themes the text color should be black.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 85.0.4183.83

Perform user tests

• Create test script
• Schedule test with users
• Perform test with users
• Compile results
• Adjust mockup
• Validate with the team

Carbon colors import is failing

Describe the bug
Carbon colors SCSS import is failing during React build.

To Reproduce
Steps to reproduce the behavior:

1. Run npm run build
2. See error:

Failed to compile.

./src/App.scss
@import "@carbon/colors/scss/colors";
^
      File to import not found or unreadable: @carbon/colors/scss/colors.

Expected behavior
React build should run without errors.

Nice-to have - ignore accentuation, as the translation is not performed correctly if the user forgets the score

Update Libras API instructions

Describe the bug
README doesn't contain correct instructions to connect this UI with the Libras service API.

Implement UI localization

Is your feature request related to a problem? Please describe.
As a user, I would like to be able to change the UI to other languages like English, Spanish, Portuguese...

Describe the solution you'd like
The application should be able to detect my system/ browser preferred language and update itself to reflect it.

UX Design

Box folder with Design:
https://ibm.ent.box.com/folder/108535855575

Developers should have a way of mocking the API

Is your feature request related to a problem? Please describe.
I'm always frustrated when the API is mandatory to run the project for local development.

Describe the solution you'd like
Developers should have a way of mocking the API if they're only developing the UI.

Find an way to Insert new phrases into the system, maybe from a file

(curadoria)
-json files
-csv files
-documentation / help for curators in making the file

https://ibm.invisionapp.com/d/main?redirHash=#/console/15359913/319489561/preview?scrollOffset=538

Scroll texts together at the same time

Add button to clear text area

Is your feature request related to a problem? Please describe.
As a user, I'm always frustrated that I need to select all text and delete it to start over.

Describe the solution you'd like
It would be good to have a way of clearing the text area with a single click:

1. The user inserts text in left text area;
2. The user clicks on 'limpar texto' button;
3. The text area returns to its initial state (without any text in).

Additional context

https://ibm.invisionapp.com/d/main?redirHash=#/console/15359913/319489561/preview?scrollOffset=538

Remove HKBase dependency

The API has an external database dependency. We need to remove it and use our own database as a service.

The tool will give an option that allows the user to send the sentence so that it can be analysed and translated later if it is not translated / corrected in real time - user asks for translation

• Have an option on the screen where none of the translations meets the expectations - user requires translation
• Create endpoint for the new translation submission.
• Have a list of submissions / requests for someone to approve

https://ibm.invisionapp.com/d/main?redirHash=#/console/15359913/319489570/preview?scrollOffset=538

<iframe> elements must have a unique title property

Help icon to give tips for those unfamiliar with the tool.

Help icon to give tips for those unfamiliar with the tool including explanation, can be video with translation in libras.

The tool will give an option that allows the user to rewrite the sentence if it is not understood by the tool - user suggests translation

• Have an option on the screen where none of the translations meets the expectations - user sends translation
• Create endpoint for the new translation submission
• Have a list of submissions / requests for someone to approve

https://ibm.invisionapp.com/d/main?redirHash=#/console/15359913/319489570/preview?scrollOffset=538

Create mid or hi-fi mockups

• Analyze test results
• Re-define feature list
• Design mid-fi or hi-fi mockups
• Validate with team
• Update navigable prototype