|
32 | 32 |
|
33 | 33 | See CodeTranslateAI work seamlessly on any webpage. Select code, and the translated version appears right beside it in a clean, tabbed interface with syntax highlighting. |
34 | 34 |
|
| 35 | +### 🎯 Key Features |
| 36 | + |
| 37 | +- ✅ **Real-time Code Translation** - Translate code snippets instantly with AI |
| 38 | +- ✅ **14+ Programming Languages** - Support for C, C++, C#, Java, Python, JavaScript, TypeScript, Go, Rust, Swift, Kotlin, PHP, Ruby, Visual Basic |
| 39 | +- ✅ **Syntax Highlighting** - Beautiful code display with Prism.js |
| 40 | +- ✅ **Dark/Light Mode** - Seamless theme switching |
| 41 | +- ✅ **Tabbed Interface** - View multiple translations in tabs |
| 42 | +- ✅ **One-Click Copy** - Copy translated code to clipboard |
| 43 | +- ✅ **👍👎 User Feedback** - Rate translation quality and help improve AI (NEW!) |
| 44 | +- ✅ **Cached Translations** - Faster loading with smart caching |
| 45 | + |
35 | 46 | ##  |
36 | 47 |
|
37 | 48 | ##  |
@@ -113,6 +124,24 @@ You must have **Node.js** and **npm** installed on your machine. |
113 | 124 |
|
114 | 125 | - After deployment, **copy the URL** that Wrangler provides. |
115 | 126 |
|
| 127 | +7. **Set Up Feedback Storage (Optional)** |
| 128 | + |
| 129 | + - For the user feedback feature, create a KV namespace to store feedback data: |
| 130 | + |
| 131 | + <!-- end list --> |
| 132 | + |
| 133 | + ```sh |
| 134 | + npx wrangler kv:namespace create "FEEDBACK_STORE" |
| 135 | + npx wrangler kv:namespace create "FEEDBACK_STORE" --preview |
| 136 | + ``` |
| 137 | + |
| 138 | + - Update the KV namespace IDs in `wrangler.jsonc`: |
| 139 | + - Replace `<your_feedback_kv_id>` with the production namespace ID |
| 140 | + - Replace `<your_feedback_preview_kv_id>` with the preview namespace ID |
| 141 | + - Redeploy the worker: `npx wrangler deploy` |
| 142 | + |
| 143 | + For more details, see [FEEDBACK_FEATURE.md](FEEDBACK_FEATURE.md). |
| 144 | + |
116 | 145 | ### 🖥️ Part 2: Frontend Setup (Chrome Extension) |
117 | 146 |
|
118 | 147 | 1. **Navigate to the Frontend Directory** |
@@ -207,6 +236,20 @@ The **CodeTranslateAI** icon should now appear in your Chrome toolbar\! |
207 | 236 | 4. Your cursor will change to a crosshair. Click on any code block on a webpage. |
208 | 237 | 5. A "Translating..." message will appear, followed by the translated code in a new UI. |
209 | 238 |
|
| 239 | +### 👍👎 Providing Feedback |
| 240 | +
|
| 241 | +Help us improve translation quality by rating the AI-generated code: |
| 242 | +
|
| 243 | +- Click **👍** if the translation is good |
| 244 | +- Click **👎** if the translation needs improvement |
| 245 | + - A modal will appear asking what was wrong |
| 246 | + - Optionally provide detailed feedback |
| 247 | + - Your feedback helps us improve the AI prompts |
| 248 | +
|
| 249 | +**All feedback is stored securely and used solely to enhance translation quality.** |
| 250 | +
|
| 251 | +For more details about the feedback feature, see [FEEDBACK_FEATURE.md](FEEDBACK_FEATURE.md). |
| 252 | +
|
210 | 253 | --- |
211 | 254 |
|
212 | 255 | ## 🐛 Debugging the Backend |
|
0 commit comments