[RFC004B]:Implementation of TIBcat UI+API calls using react

[tenkus47]

Introduction

This RFC proposes the implementation of the TIBcat frontend using React for the user interface, Axios for API calls, and Tailwind CSS for styling. The frontend provides users with an interactive platform to upload text files, display segmented and translated text, and perform translation actions on-demand.

---

Design

https://www.figma.com/design/Z7JhxbMUQKRTDy5GDTVK12/Tibetan-CAT-Tool?node-id=1-24&t=A9sOGsEq3bSpcouB-1

---

Objectives

1. Provide a user-friendly interface for uploading text files.
2. Display segmented and translated text fetched from the backend.
3. Enable translation functionality for individual text segments.
4. Ensure responsiveness and accessibility using Tailwind CSS.

---

Requirements

Functional Requirements

1. Allow users to upload text files.
2. Display the list of segmented texts after processing.
3. Fetch and display translations for segmented texts.
4. Allow users to manually edit translations.
5. Send updated translations to the backend.

Non-Functional Requirements

1. Use a responsive design to support multiple screen sizes.
2. Ensure secure communication with the backend using HTTPS.
3. Provide seamless user interactions and error handling.

---

Architecture Overview

1. Frontend (React): A single-page application (SPA) that interacts with the backend via RESTful APIs.
2. Backend: As described in the TIBcat Backend RFC, providing endpoints for file upload, segmentation, and translation.
3. Styling Framework: Tailwind CSS for consistent and responsive design.
4. API Interaction: Axios for HTTP requests to the backend.

---

Stepwise Implementation Plan

• Initialize Project Setup
• Design Home Page UI
• Develop Dashboard UI
• Add Pagination Functionality
• Implement Document Search and Sorting
• Delete Selected Documents
• Build Import Document Interface
• Analyze File Content
• Reordering the model using drag and drop
• Handle file error
• Export document
• Create Segmented Text List UI
• Split functionality segmented text
• Develop Translator Editor
• Editor progress status
• Implement User Authentication
• code cleanup (removing duplicates usage of styling and logic (DRY Principle),
• Deploy Application

backend api integration

• User creation
• File upload
• Translate the uploaded file
• Export document
• Fetch list of document
• Document deletion
• Fetch Document details
• Update segment
• Split segment
• Get model translation suggestion
• Translation api to get more suggestions.

Prepare the application for production deployment.

Components Summary

1. FileUpload: Allows users to upload text files.
2. SegmentedTextList: Displays segmented texts from the backend.
3. TranslationEditor: Editable translation fields for each text segment.
4. Notifications: Displays success or error messages for user actions.

---

Future Enhancements

1. Add authentication for user-specific uploads and translations.
2. Implement drag-and-drop functionality for file uploads.
3. Support additional languages and translation models.
4. Integrate real-time translation using WebSockets.

Adidional changes

• update favicon
• Update ui to get source and target language
• Update the same in api
• Update font as per the language of the content

---

Conclusion

This RFC outlines the phased implementation of the TIBcat frontend. Using React ensures a dynamic and interactive user experience, while Axios and Tailwind CSS provide efficient API interaction and modern styling. The design is modular, scalable, and extensible for future enhancements.

card reviewed

• @tenkus47

[Karma-Tsering]

Frontend is deployed
url : https://tib-cat.onrender.com/

[drupchen]

should be "Mitra"