Add webui App (#30)

* Add webui App

* enable indepent model for reflection

* fix

* fix

* fix

* Use simplemma(mit) tokenizer for diff to support multilingual.

* Update UI

* update preview screen

* Update UI to use pure CSS menu icon

* Add: Export func. Export the final translation to txt file.

* Add: language switch button, RPM settings.

* Add: Translation progress bar

* Add: Stop button to cancel translation progress, llm error notification, fix Readme

* Update

* Update to use base url

* fix

* fix

* style and formatting changes

* formatting

* Fix the components error

* changed default text and error still exists if OPENAI key not found at start, but traces back to ta source

---------

Co-authored-by: Joaquin Dominguez <[email protected]>

.gitignore

@@ -6,3 +6,4 @@ poetry.lock
 floresp-v2.0-rc.3
 *cache
 wmt
+outputs

app/README.md

@@ -0,0 +1,89 @@
+
+## Translation Agent WebUI
+
+This repository contains a Gradio web UI for a translation agent that utilizes various language models for translation.
+
+### Preview
+
+![webui](image.png)
+
+**Features:**
+
+- **Tokenized Text:**  Displays translated text with tokenization, highlighting differences between original and translated words.
+- **Document Upload:** Supports uploading various document formats (PDF, TXT, DOC, etc.) for translation.
+- **Multiple API Support:**  Integrates with popular language models like:
+    - Groq
+    - OpenAI
+    - Ollama
+    - Together AI
+    ...
+- **Different LLM for reflection**: Now you can enable second Endpoint to use another LLM for reflection.
+
+
+**Getting Started**
+
+1. **Install Dependencies:**
+
+    **Linux**
+    ```bash
+        git clone https://github.com/andrewyng/translation-agent.git
+        cd translation-agent
+        poetry install --with app
+        poetry shell
+    ```
+    **Windows**
+    ```bash
+        git clone https://github.com/andrewyng/translation-agent.git
+        cd translation-agent
+        poetry install --with app
+        poetry shell
+    ```
+
+2. **Set API Keys:**
+   - Rename `.env.sample` to `.env`, you can add your API keys for each service:
+
+     ```
+     OPENAI_API_KEY="sk-xxxxx" # Keep this field
+     GROQ_API_KEY="xxxxx"
+     TOGETHER_API_KEY="xxxxx"
+     ```
+    - Then you can also set the API_KEY in webui.
+
+3. **Run the Web UI:**
+
+    **Linux**
+    ```bash
+    python app/app.py
+    ```
+    **Windows**
+    ```bash
+    python .\app\app.py
+    ```
+
+4. **Access the Web UI:**
+   Open your web browser and navigate to `http://127.0.0.1:7860/`.
+
+**Usage:**
+
+1. Select your desired translation API from the Endpoint dropdown menu.
+2. Input the source language, target language, and country(optional).
+3. Input the source text or upload your document file.
+4. Submit and get translation, the UI will display the translated text with tokenization and highlight differences.
+5. Enable Second Endpoint, you can add another endpoint by different LLMs for reflection.
+6. Using a custom endpoint, you can enter an OpenAI compatible API base url.
+
+**Customization:**
+
+- **Add New LLMs:**  Modify the `patch.py` file to integrate additional LLMs.
+
+**Contributing:**
+
+Contributions are welcome! Feel free to open issues or submit pull requests.
+
+**License:**
+
+This project is licensed under the MIT License.
+
+**DEMO:**
+
+[Huggingface Demo](https://huggingface.co/spaces/vilarin/Translation-Agent-WebUI)