README.md aktualisiert

Reviewed-on: #1

README.md

@@ -1,193 +1,77 @@
-<p align="center"><a
-href="https://www.flaticon.com/free-icons/mortarboard" target="_blank" rel="noopener noreferrer"
-title="Mortarboard icons created by itim2101 - Flaticon" ><img src="./extension/icon.png" alt="Mortarboard icons created by itim2101 - Flaticon" width="150" style="display:block; margin:auto;"></a></p>
+# MoodleGPT (SparkAssist)
 
-# SparkAssist 2.0.0
+MoodleGPT is a powerful AI-powered study assistant designed as a Chrome extension. It seamlessly integrates with your learning management system to provide intelligent assistance for your quizzes and study materials. 
 
-This extension allows you to hide CHAT-GPT in a Moodle quiz. You just need to click on the question you want to solve, and CHAT-GPT will automatically provide the answer. However, one needs to be careful because as we know, CHAT-GPT can make errors especially in calculations.
+## Features
 
-## Chrome Webstore
+- **AI-Powered Assistance:** Get help with quizzes and study material directly within your browser.
+- **Customizable Models:** Bring your own API key (BYOK) and use the AI models of your choice.
+- **Modern Interface:** A clean, fast, and responsive popup interface built with Preact and Tailwind CSS.
 
-Find the extension on the Chrome Webstore right [here](https://chrome.google.com/webstore/detail/moodlegpt/fgiepdkoifhpcgdhbiikpgdapjdoemko)
+## Functionality Overview
 
-## Summary
+MoodleGPT is built to understand the structure of Moodle quizzes and provide context-aware solutions. Key capabilities include:
 
-- [SparkAssist 2.0.0](#sparkassist-200)
-  - [Chrome Webstore](#chrome-webstore)
-  - [Summary](#summary)
-  - [Disclaimer !](#disclaimer-)
-  - [Donate](#donate)
-  - [Update](#update)
-  - [Set up](#set-up)
-  - [Settings](#settings)
-  - [Advanced Settings](#advanced-settings)
-  - [Mode](#mode)
-  - [Options](#options)
-  - [Internal other features](#internal-other-features)
-    - [Support table](#support-table)
-  - [Supported questions type](#supported-questions-type)
-    - [Select](#select)
-    - [Put in order question](#put-in-order-question)
-    - [Resolve equation](#resolve-equation)
-    - [One response (radio button)](#one-response-radio-button)
-    - [Multiples responses (checkbox)](#multiples-responses-checkbox)
-    - [True or false](#true-or-false)
-    - [Number](#number)
-    - [Text](#text)
-    - [Atto](#atto)
-  - [What about if the question can't be autocompleted ?](#what-about-if-the-question-cant-be-autocompleted-)
-  - [Test](#test)
-  - [Beta version with advanced features](#beta-version-with-advanced-features)
+- **Comprehensive Question Support:** It automatically parses a wide variety of Moodle question types, including:
+  - Multiple Choice (Radio Buttons & Checkboxes)
+  - Select / Dropdowns
+  - Drag and Drop (Gap Select, DDWTOS)
+  - Matching and Ordering
+  - Numerical and Text Inputs
+  - Atto and ContentEditable Rich Text areas
+- **Operating Modes:**
+  - **Autocomplete Mode:** Automatically applies the AI-generated answers directly into the Moodle interface where possible.
+  - **Clipboard Mode:** Copies the generated answers to your clipboard for manual input.
+- **Context-Aware AI Parsing:** It reads the full history and context of the quiz page to provide highly accurate, tailored responses based on the prompt structure.
 
-## Disclaimer !
+## Installation
 
-I hereby declare that I am not responsible for any misuse or illegal activities carried out using my program. The code is provided for educational and research purposes only, and any use of it outside of these purposes is at the user's own risk.
+1. Clone this repository to your local machine:
+   ```bash
+   git clone https://git.lucida.ee/blackicedbear/MoodleGPT
+   ```
+2. Navigate to the project directory:
+   ```bash
+   cd MoodleGPT
+   ```
+3. Install the required dependencies:
+   ```bash
+   npm install
+   ```
+4. Build the extension:
+   ```bash
+   npm run build
+   ```
+5. Open Chrome and navigate to `chrome://extensions/`.
+6. Enable **Developer mode** in the top right corner.
+7. Click **Load unpacked** and select the `extension` directory from the cloned repository.
 
-## Donate
+## Configuration & Model Setup
 
-Will be a pleasure if you want to support this project :). I'm alone working on this project and I'm still a student.
-<br/>
-<a href="https://www.buymeacoffee.com/yoannchbpro" target="_blank" rel="noopener noreferrer"><img src="./assets/bmc-button.png" alt="Mortarboard icons created by itim2101 - Flaticon" width="150"></a>
+MoodleGPT allows you to configure your preferred AI model. We highly recommend using **OpenRouter** as it gives you access to a wide variety of models and supports a "Bring Your Own Key" (BYOK) approach.
 
-## Update
+### Setting up OpenRouter
 
-See the [changelog](./CHANGELOG.md) to see every updates !
+1. **Get an API Key:** Sign up at [OpenRouter.ai](https://openrouter.ai/) and generate your API key.
+2. **Open the Extension Settings:** Click on the MoodleGPT extension icon in your browser toolbar to open the popup. Navigate to the settings or configuration area.
+3. **Configure the API:**
+   - **API Key:** Enter your OpenRouter API key.
+   - **Base URL:** Due to browser extension CORS restrictions with OpenRouter, you should use our dedicated CORS proxy. Enter the following URL into the Base URL field:
+     ```text
+     https://openrouter-proxy.lucida.ee/api/v1
+     ```
+   - **Model:** Specify the OpenRouter model you wish to use (e.g., `google/gemini-3.1-pro-preview`, `anthropic/claude-opus-4.7`, `openai/gpt-5.5`, etc.).
 
-## Set up
+Once configured, the extension will route your requests securely through the proxy to OpenRouter, allowing you to seamlessly use any of their available models.
 
-> NOTE: This extension only works on Chromium-based browsers like Edge, Chrome, etc.
+## Development
 
-<p align="center">
-<img src="./assets/setup.png" alt="Popup" width="300">
-</p>
+- `npm run build` - Full build (lints, formats, builds CSS, and bundles JS)
+- `npm run build:css` - Compiles the Tailwind CSS
+- `npm run fastBuild` - Bundles the JavaScript using Rollup
+- `npm run lint` - Lints the codebase
+- `npm run prettier` - Formats the codebase
 
-Go to <b>"Manage my extensions"</b> on your browser, then click on <b>"Load unpacked extension"</b> and select the <b>"extension"</b> folder. Afterwards, click on the extension icon and enter the ApiKey obtained from [openai api](https://platform.openai.com/api-keys). Finally, select a [gpt model](https://platform.openai.com/docs/models) (ensure it work with completion api).
+## License
 
-## Settings
-
-- <b>API KEY\*</b>: Your openai [API KEY](https://platform.openai.com/api-keys)
-- <b>GPT MODEL\*</b>: The [gpt model](https://platform.openai.com/docs/models) (you can click on the play button to ensure the model work with the extension)
-
-## Advanced Settings
-
-- <b>CODE</b>: A code you will need to type on your keyboard to inject/remove the extension code from the moodle page. It allow you to be more discret and control the injection so it's recommended.
-- <b>BASE URL</b>: The API endpoint if you need to use your own llm.
-- <b>MAX TOKENS</b>: The max tokens length you want the api to respond with.
-
-## Mode
-
-<p align="center">
-<img src="./assets/mode.png" alt="Popup" width="300">
-</p>
-
-- <b>Autocomplete:</b> The extension will complete the question for you by selecting the correct(s) answer(s).
-- <b>Clipboard:</b> The response is copied into the clipboard.
-- <b>Question to answer:</b> The question is converted to the answer and you can click on it to show back the question (or show back the answer).
-  <br/><img src="./assets/question-to-answer.gif" alt="Question to Answer">
-
-## Options
-
-<p align="center">
-<img src="./assets/settings.png" alt="Popup" width="300">
-</p>
-
-- <b>Api key\*</b>: the [openai api key](https://platform.openai.com/api-keys) from your account (Note you have to put credits by entering a credit card onto your account).
-- <b>GPT Model\*</b>: the [gpt model](https://platform.openai.com/docs/models) you want to use.
-- <b>Code</b>: a code to be more discret for injecting/removing the extension from the page. Simply type your code you entered into the configuration on the keyboard when you are on your moodle quiz and the extension will be inject. If you want to remove the injection just simply type back the code on your keyboard.
-- <b>Cursor indication</b>: show a pointer cursor and a hourglass to know when the request is finished.
-- <b>Title indication</b>: show some informations into the title to know for example if the code have been injected.
-  <br/> ![Injected](./assets/title-injected.png)
-- <b>Console logs</b>: show logs into the console for the question, chatgpt answer and which response has been chosen.
-  <br/><img src="./assets/logs.png" alt="Logs" width="250">
-- <b>Request timeout</b>: if the request is too long it will be abort after 20 seconds.
-- <b>Typing effect</b>: create a typing effect for text. Type any text and it will be replaced by the correct one. If you want to stop it press <b>Backspace</b> key.
-  <br/> ![Typing](./assets/typing.gif)
-- <b>Mouseover effect</b>: you will need to hover (or click for select) the question response to complete it automaticaly.
-  <br/> ![Mouseover](./assets/mouseover.gif)
-  <br/> ![Mouseover2](./assets/mouseover2.gif)
-- <b>Infinite try</b>: click as much as you want on the question (don't forget to reset the question).
-- <b>Save history</b>: allows you to create a conversation with ChatGPT by saving the previous question with its answer. However, note that it can consume a significant number of tokens.
-- <b>Include images</b> (only work with gpt-4): allows you to include the images from the question to be send to the chatgpt api. The quality is reduced to 75% to use less tokens. However, note that it can consume a significant number of tokens.
-  <br/> ![Images](./assets/images.gif)
-
-## Internal other features
-
-### Support table
-
-Table are formated from the question to make it more readable for CHAT-GPT. Example of formatted table output:
-
-```
-id       | name  | birthDate  | cars
-------------------------------------
-Person 1 | Yvick | 15/08/1999 | yes 
-Person 2 | Yann  | 19/01/2000 | no
-```
-
-![Table](./assets/table.gif)
-
-## Supported questions type
-
-MoodleGPT now utilizes strict strongly-typed JSON schema generation. Complex question logic is mapped directly from the Moodle DOM structure to the LLM backend for perfect, index-matched interaction.
-
-### Calculated Questions (Numerical / Multi)
-
-![Calculated](./assets/equations.gif)
-
-### Select (Missing Words / Gapselect)
-
-![Select](./assets/select.gif)
-
-### Match Questions
-
-Extracts options seamlessly per row.
-
-### Drag and Drop Into Text
-
-Under the hood matching using native `.placeinput` tags for accurate invisible placement dropping.
-
-### Put in order question
-
-![Order](./assets/order.gif)
-
-### Resolve equation
-
-![Equations](./assets/equations.gif)
-
-### One response (radio button)
-
-![Radio](./assets/radio.gif)
-
-### Multiples responses (checkbox)
-
-![Checkbox](./assets/checkbox.gif)
-
-### True or false
-
-![True-false](./assets/true-false.gif)
-
-### Number
-
-![Number](./assets/number.gif)
-
-### Text
-
-![Text](./assets/text.gif)
-
-### Atto
-
-![Atto](./assets/atto.gif)
-
-## What about if the question can't be autocompleted ?
-
-To know if the answer has been copied to the clipboard, you can look at the title of the page which will become <b>"Copied to clipboard"</b> for 3 seconds if `Title indication` is on.
-
-![Clipboard](./assets/clipboard.gif)
-
-## Test
-
-- <b>Solution 1</b>: Go on this [moodle demo page](https://moodle.org/demo).
-- <b>Solution 2</b>: Run the `index.html` file located in the `test/fake-moodle` folder.
-
-## Beta version with advanced features
-
-If you're interested in accessing advanced features ahead of their official release, please consider downloading the extension from the [dev branch](https://github.com/yoannchb-pro/MoodleGPT/tree/dev). However, please be aware that this branch is under development and may contain bugs. If you encounter any issues, don't hesitate to contact me or create an issue on GitHub. Your feedback is invaluable in helping us improve the extension.
+This project is licensed under the MIT License.