Documentations

README.md

@@ -1,2 +1,41 @@
-# bhashini-web-translator
-Webpage Translator for specialized for Regional Languages. Built using Bhashini APIs
+# Bashini Web Translator
+
+## Bhashini Web Translator
+
+### Overview
+
+Bhashini Web Translator is a versatile translation tool that includes various components for translating content into regional languages. This repository houses different sub-projects, each serving a specific purpose.
+
+### Sub-Projects
+
+1. **Web Server**
+    - **Description:** The web server component translates content into regional languages.
+    - **Folder:** `server`
+    - **Documentation:**
+        - [Web Server Documentation](/server/README.md)
+    - **Usage:**
+        - Run the server and send requests to translate content.
+2. **NPM Package**
+    - **Description:** The npm package provides a convenient way to integrate Bhashini Translator into Node.js projects.
+    - **Folder:** `package`
+    - **Documentation:**
+        - [NPM Package Documentation](/package/README.md)
+    - **Installation:**
+        - Install the npm package using `npm install @scaler-school-of-technology/bhashini-web-translator`.
+3. **Chrome Extension**
+    - **Description:** The Chrome extension allows users to translate web page content using Bhashini Translator.
+    - **Folder:** `extention`
+    - **Documentation:**
+        - [Chrome Extension Documentation](/extention/README.md)
+    - **Installation:**
+        - Install the extension from the Chrome Web Store or by loading an unpacked extension.
+    - **Usage:**
+        - Select source and target languages, then click the "Translate" button on the extension popup.
+
+### Getting Started
+
+To get started with any of the sub-projects, refer to their respective documentation linked above. Each documentation provides detailed information on installation, usage, and configuration.
+
+### License
+
+This project is licensed under the [MIT License](LICENSE).

extention/README.md

@@ -0,0 +1,76 @@
+# Bashini Chrome Extention
+
+### 1. **Overview:**
+
+- **Name:** Bhashini Translator Chrome Extension
+- **Description:** A Chrome extension for translating the content of a webpage using BhashiniTranslator.
+- **Functionality:** Allows users to select source and target languages, then translates the content of the currently active tab.
+
+### 2. **Files:**
+
+- **App.jsx:**
+    - React component for the extension's user interface.
+    - Handles language selection and triggers content translation.
+- **main.jsx:**
+    - Renders the `App` component using ReactDOM.
+
+### 3. **Dependencies:**
+
+- **React:**
+    - Used for building the user interface.
+- **BhashiniTranslator:**
+    - Handles translation using the Bhashini Translator API.
+    - Requires a valid API key and secret during instantiation.
+
+### 4. **Extension Structure:**
+
+- **Manifest File (`manifest.json`):**
+    - Contains metadata and configuration for the extension.
+    - Should include necessary permissions, icons, and scripts.
+- **Content Scripts:**
+    - Utilizes `chrome.scripting.executeScript` to interact with the content of the active tab.
+
+### 5. **User Interface:**
+
+- **Language Selection:**
+    - Provides dropdowns for selecting source and target languages.
+- **Translate Button:**
+    - Triggers the translation process.
+
+### 6. **Translation Process:**
+
+- **BhashiniTranslator Integration:**
+    - Utilizes BhashiniTranslator to translate the content of the webpage.
+    - Source language is determined by the user's selection.
+    - Target language is determined by the user's selection.
+- **ExecuteScript:**
+    - Uses `chrome.scripting.executeScript` to run scripts in the context of the active tab.
+    - Changes the background color of the webpage to red (example action).
+    - Translates the content of the webpage using BhashiniTranslator.
+
+### 7. **Usage:**
+
+- **Installation:**
+    - Install the extension from the Chrome Web Store or by loading an unpacked extension.
+- **Interaction:**
+    - Open a webpage and click the extension icon.
+    - Select source and target languages.
+    - Click the "Translate" button to see the translated content.
+
+### 8. **Configuration:**
+
+- **BhashiniTranslator Credentials:**
+    - Ensure the API key and secret provided to BhashiniTranslator in `App.jsx` are valid.
+- **Manifest Configuration:**
+    - Configure the manifest file with appropriate permissions, icons, and other required settings.
+
+### 9. **Notes:**
+
+- **Error Handling:**
+    - Implement error handling for BhashiniTranslator API calls.
+- **Security:**
+    - Keep API keys and secrets secure.
+
+### Conclusion:
+
+This documentation provides an overview of the Bhashini Translator Chrome Extension, covering its structure, functionality, usage, and configuration. Make sure to integrate this information with your manifest file and any additional scripts to create a fully functional extension.

package/README.md

@@ -0,0 +1,107 @@
+# Bhashini Web Translator
+
+### **Introduction**
+
+The Bhashini Web Translator is a JavaScript package that provides a convenient interface for translating text content within HTML documents or strings. It leverages a pipeline of translation services of Bhashini API to support the translation process.
+
+### **Installation**
+
+To use the Bhashini Web Translator in your project, you need to install it using npm:
+
+```bash
+bashCopy code
+npm install bhashini-translator
+
+```
+
+### **Usage**
+
+To use the Bhashini Translator, you need to create an instance of the **`BhashiniTranslator`** class with valid API credentials. The following sections demonstrate how to use the different translation methods provided by the package.
+
+### 1. Initializing the Translator
+
+```jsx
+javascriptCopy code
+import { BhashiniTranslator } from 'bhashini-translator';
+
+const apiKey = 'your_api_key';
+const userID = 'your_user_id';
+
+const translator = new BhashiniTranslator(apiKey, userID);
+
+```
+
+### 2. Translating DOM Elements
+
+To translate text within a DOM element, use the **`translateDOM`** method. Pass the DOM element, source language, and target language as arguments.
+
+```jsx
+javascriptCopy code
+const sourceLanguage = 'en';
+const targetLanguage = 'fr';
+
+const domElement = document.getElementById('content');
+
+translator.translateDOM(domElement, sourceLanguage, targetLanguage)
+  .then((translatedDOM) => {
+    // Use translatedDOM as needed
+    console.log(translatedDOM);
+  })
+  .catch((error) => {
+    console.error('Translation error:', error.message);
+  });
+
+```
+
+### 3. Translating HTML Strings
+
+To translate an HTML string, use the **`translateHTMLstring`** method. Pass the HTML string, source language, and target language as arguments.
+
+```jsx
+javascriptCopy code
+const sourceLanguage = 'en';
+const targetLanguage = 'fr';
+const htmlString = '<p>Hello, world!</p>';
+
+translator.translateHTMLstring(htmlString, sourceLanguage, targetLanguage)
+  .then((translatedDOM) => {
+    // Use translatedDOM as needed
+    console.log(translatedDOM);
+  })
+  .catch((error) => {
+    console.error('Translation error:', error.message);
+  });
+
+```
+
+### 4. Translating from URL
+
+To translate text content from a URL, use the **`translateUrl`** method. Pass the URL, source language, and target language as arguments.
+
+```jsx
+javascriptCopy code
+const sourceLanguage = 'en';
+const targetLanguage = 'fr';
+const url = 'https://example.com';
+
+translator.translateUrl(url, sourceLanguage, targetLanguage)
+  .then((translatedDOM) => {
+    // Use translatedDOM as needed
+    console.log(translatedDOM);
+  })
+  .catch((error) => {
+    console.error('Translation error:', error.message);
+  });
+
+```
+
+### **Additional Notes**
+
+- Ensure that the provided API key and user ID are valid.
+- The translator handles HTML strings using the **`htmlStringToDOM`** function from the **`convert.js`** module.
+- The translation process is asynchronous, so use promises or async/await syntax when necessary.
+- The translator utilizes Axios for HTTP requests.
+
+### **Conclusion**
+
+The Bhashini Translator simplifies the process of translating text content within HTML documents or strings. By following the provided examples, you can seamlessly integrate translation functionality into your JavaScript applications.

server/README.md

@@ -0,0 +1,103 @@
+# Web Server
+
+## Introduction
+
+This Web Server is a JavaScript web server application that utilizes the Bhashini translation service to translate the content of a given web page from one language to another. This documentation provides an overview of the project structure and key components.
+
+## Project Structure
+
+### 1. `index.js`
+
+This file serves as the main entry point for the Bhashini Web Translator application. It initializes an Express.js server, handles incoming requests, and utilizes the BhashiniTranslator and fetchHTML modules to translate web content.
+
+### Dependencies
+
+- `express`: A web application framework for Node.js.
+- `@scaler-school-of-technology/bhashini-web-translator`: Bhashini translation service client.
+- `dotenv`: Loads environment variables from a `.env` file.
+- `./fetchHTML.js`: Module for fetching the body element content from a given URL.
+
+### 2. `fetchHTML.js`
+
+This module provides functionality to fetch the HTML content of a web page and extract the body element content using Axios for HTTP requests and Cheerio for HTML parsing.
+
+### Dependencies
+
+- `axios`: A promise-based HTTP client for the browser and Node.js.
+- `cheerio`: A fast, flexible, and lean implementation of jQuery for the server.
+
+## Setup and Configuration
+
+1. Install dependencies:
+
+    ```bash
+    npm install
+
+    ```
+
+2. Create a `.env` file in the project root with the following variables:
+
+    ```
+    BHASHINI_API_KEY=<Your Bhashini API Key>
+    BHASHINI_USER_ID=<Your Bhashini User ID>
+
+    ```
+
+
+## Running the Server
+
+Start the Bhashini Web Translator server by running the following command:
+
+```bash
+npm start
+
+```
+
+The server will be accessible at `http://localhost:3000`.
+
+## Endpoints
+
+### 1. `/`
+
+- **Method**: GET
+- **Description**: Welcome message for the Bhashini Web Translator app.
+
+### 2. `/translate`
+
+- **Method**: GET
+- **Description**: Send the URL of the website to translate in the JSON format. The response will be the translated website
+- **Parameters**:
+    - `url` (string): The URL of the web page to be translated.
+
+## Usage
+
+1. Access the homepage:
+
+    ```
+    GET <http://localhost:3000/>
+
+    ```
+
+2. Translate a web page:
+
+    ```
+    GET <http://localhost:3000/translate?url=><URL_OF_WEB_PAGE>
+
+    ```
+
+
+## Limitations
+
+- The web server is not able to translate websites that use client-side rendering
+- The web server is not able to translate websites that use cookies for authentication.
+- The web server is not able to translate websites that use authentication tokens for authentication tokens for authentication.
+- The web server is not able to translate websites that use sessions for authentication.
+
+## Important Notes
+
+- Ensure that the required environment variables (`BHASHINI_API_KEY` and `BHASHINI_USER_ID`) are set in the `.env` file.
+- The server is set to listen on port 3000 by default. Adjust the `app.listen` method in `index.js` if a different port is desired.
+
+## Conclusion
+
+This Web Server translates web page content using the Bhashini translation service. Developers can extend and modify the application to meet specific requirements or integrate it into other projects.