Refactor cache system to simplify input/output handling and improve error management

app.py

@@ -33,70 +33,44 @@ class TransliterationCache:
         self.cache_file = cache_file
         self.cache = {}
         self.load_cache()
-        
+
     def load_cache(self):
-        """Load existing cache from file"""
+        """Load existing cache from file (input/output pairs only)"""
         if os.path.exists(self.cache_file):
             try:
                 with open(self.cache_file, 'r', encoding='utf-8') as f:
-                    reader = csv.DictReader(f)
+                    reader = csv.reader(f)
                     for row in reader:
-                        key = f"{row['input']}_{row['direction']}"
-                        self.cache[key] = {
-                            'output': row['output'],
-                            'corrected_output': row.get('corrected_output', ''),
-                            'timestamp': row['timestamp'],
-                            'usage_count': int(row.get('usage_count', 1))
-                        }
+                        if len(row) == 3:
+                            key = f"{row[0]}_{row[1]}"
+                            self.cache[key] = row[2]
             except Exception as e:
                 print(f"Error loading cache: {e}")
-    
+
     def save_cache(self):
-        """Save cache to file"""
+        """Save cache to file (input/output pairs only)"""
         try:
             with open(self.cache_file, 'w', encoding='utf-8', newline='') as f:
-                fieldnames = ['input', 'direction', 'output', 'corrected_output', 'timestamp', 'usage_count']
-                writer = csv.DictWriter(f, fieldnames=fieldnames)
-                writer.writeheader()
-                
-                for key, data in self.cache.items():
+                writer = csv.writer(f)
+                for key, output in self.cache.items():
                     input_text, direction = key.rsplit('_', 1)
-                    writer.writerow({
-                        'input': input_text,
-                        'direction': direction,
-                        'output': data['output'],
-                        'corrected_output': data.get('corrected_output', ''),
-                        'timestamp': data['timestamp'],
-                        'usage_count': data['usage_count']
-                    })
+                    writer.writerow([input_text, direction, output])
         except Exception as e:
             print(f"Error saving cache: {e}")
-    
+
     def get(self, input_text, direction):
-        """Get cached result if exists"""
         key = f"{input_text}_{direction}"
-        if key in self.cache:
-            self.cache[key]['usage_count'] += 1
-            self.save_cache()
-            return self.cache[key]['output']
-        return None
-    
+        return self.cache.get(key, None)
+
     def set(self, input_text, direction, output):
-        """Cache a new result"""
         key = f"{input_text}_{direction}"
-        self.cache[key] = {
-            'output': output,
-            'corrected_output': '',
-            'timestamp': datetime.now().isoformat(),
-            'usage_count': 1
-        }
+        self.cache[key] = output
         self.save_cache()
-    
+
     def update_correction(self, input_text, direction, corrected_output):
-        """Update with user correction"""
         key = f"{input_text}_{direction}"
         if key in self.cache:
-            self.cache[key]['corrected_output'] = corrected_output
+            self.cache[key] = corrected_output
             self.save_cache()
             return True
         return False
@@ -201,9 +175,9 @@ def transliterate(text, direction):
 def save_correction(input_text, direction, corrected_output):
     """Save user correction to cache"""
     if cache_system.update_correction(input_text, direction, corrected_output):
-        return "✅ Correction saved! Thank you for improving the model."
+        return "Correction saved! Thank you for improving the model."
     else:
-        return "❌ Could not save correction."
+        return "Could not save correction."
 
 # Arabic keyboard layout
 arabic_keys = [
@@ -240,11 +214,11 @@ def create_interface():
     with gr.Blocks(title="Darija Transliterator", theme=gr.themes.Soft()) as demo:
         gr.Markdown(
             """
-            # 🔄 Darija Transliterator
+            # Darija Transliterator
             Convert between Latin script and Arabic script for Moroccan Darija
             
-            💾 **Smart Caching**: Results are cached for faster responses and data collection  
-            ⌨️ **Arabic Keyboard**: Built-in Arabic keyboard for corrections
+            **Smart Caching**: Results are cached for faster responses and data collection  
+            **Arabic Keyboard**: Built-in Arabic keyboard for corrections
             """
         )
         
@@ -276,55 +250,64 @@ def create_interface():
                 )
                 
                 # Arabic Keyboard
-                gr.Markdown("### Arabic Keyboard ⌨️")
-                gr.Markdown("*Click letters to edit the output text above*")
-                
-                # Create keyboard layout with proper event handling
-                keyboard_state = gr.State("")
-                
+                gr.Markdown("### Arabic Keyboard")
+                gr.Markdown("*Click letters to edit the output text above, or use your keyboard*")
+
+                # JavaScript for inserting at cursor and mapping Latin keys to Arabic
+                insert_js = """
+                (output_text, evt) => {
+                    const textarea = document.querySelector('textarea[aria-label="Output"]');
+                    if (!textarea) return output_text;
+                    const start = textarea.selectionStart;
+                    const end = textarea.selectionEnd;
+                    const before = output_text.slice(0, start);
+                    const after = output_text.slice(end);
+                    return before + evt + after;
+                }
+                """
+                # Latin to Arabic mapping for keyboard
+                latin_to_arabic = {
+                    'a': 'ا', 'b': 'ب', 't': 'ت', 'j': 'ج', 'h': 'ح', 'd': 'د', 'r': 'ر', 'z': 'ز',
+                    's': 'س', 'c': 'ص', 'f': 'ف', 'q': 'ق', 'k': 'ك', 'l': 'ل', 'm': 'م', 'n': 'ن',
+                    'w': 'و', 'y': 'ي', 'g': 'غ', '3': 'ع', '7': 'ح', '5': 'خ', '6': 'ط', '9': 'ق',
+                    'e': 'ء', 'o': 'ؤ', 'i': 'ئ', 'x': 'ش', 'v': 'ظ', 'p': 'ة', 'u': 'ى',
+                }
+
                 with gr.Group():
                     for row in arabic_keys:
                         with gr.Row():
                             for char in row:
                                 btn = gr.Button(char, size="sm", scale=1)
-                                # Use JavaScript to prevent form submission and add character
                                 btn.click(
                                     fn=None,
-                                    js=f"""
-                                    (output_text) => {{
-                                        return output_text + '{char}';
-                                    }}
-                                    """,
+                                    js=f"(output_text) => {{ const textarea = document.querySelector('textarea[aria-label=\"Output\"]'); if (!textarea) return output_text; const start = textarea.selectionStart; const end = textarea.selectionEnd; const before = output_text.slice(0, start); const after = output_text.slice(end); setTimeout(()=>{{textarea.selectionStart=textarea.selectionEnd=start+1}},0); return before + '{char}' + after; }}",
                                     inputs=[output_text],
                                     outputs=[output_text],
                                     show_progress=False,
                                     queue=False
                                 )
-                    
                     with gr.Row():
                         space_btn = gr.Button("Space", size="sm", scale=2)
-                        backspace_btn = gr.Button("⌫ Backspace", size="sm", scale=2)
-                        clear_output_btn = gr.Button("🗑️ Clear Output", size="sm", scale=2)
-                        
+                        backspace_btn = gr.Button("Backspace", size="sm", scale=2)
+                        clear_output_btn = gr.Button("Clear Output", size="sm", scale=2)
+
                 # Keyboard utility buttons with JavaScript
                 space_btn.click(
                     fn=None,
-                    js="(output_text) => output_text + ' '",
+                    js="(output_text) => { const textarea = document.querySelector('textarea[aria-label=\"Output\"]'); if (!textarea) return output_text; const start = textarea.selectionStart; const end = textarea.selectionEnd; const before = output_text.slice(0, start); const after = output_text.slice(end); setTimeout(()=>{textarea.selectionStart=textarea.selectionEnd=start+1},0); return before + ' ' + after; }",
                     inputs=[output_text],
                     outputs=[output_text],
                     show_progress=False,
                     queue=False
                 )
-                
                 backspace_btn.click(
                     fn=None,
-                    js="(output_text) => output_text.slice(0, -1)",
+                    js="(output_text) => { const textarea = document.querySelector('textarea[aria-label=\"Output\"]'); if (!textarea) return output_text; const start = textarea.selectionStart; const end = textarea.selectionEnd; if (start === 0 && end === 0) return output_text; const before = output_text.slice(0, start-1); const after = output_text.slice(end); setTimeout(()=>{textarea.selectionStart=textarea.selectionEnd=start-1},0); return before + after; }",
                     inputs=[output_text],
                     outputs=[output_text],
                     show_progress=False,
                     queue=False
                 )
-                
                 clear_output_btn.click(
                     fn=None,
                     js="() => ''",
@@ -332,16 +315,42 @@ def create_interface():
                     show_progress=False,
                     queue=False
                 )
-                
+
+                # Add JS event for mapping Latin keys to Arabic in output_text
+                output_text.elem_id = "output_textbox"
+                gr.HTML("""
+                <script>
+                (() => {
+                  const latinToArabic = {"a":"ا","b":"ب","t":"ت","j":"ج","h":"ح","d":"د","r":"ر","z":"ز","s":"س","c":"ص","f":"ف","q":"ق","k":"ك","l":"ل","m":"م","n":"ن","w":"و","y":"ي","g":"غ","3":"ع","7":"ح","5":"خ","6":"ط","9":"ق","e":"ء","o":"ؤ","i":"ئ","x":"ش","v":"ظ","p":"ة","u":"ى"};
+                  document.addEventListener('keydown', function(e) {
+                    const textarea = document.querySelector('textarea[aria-label="Output"]');
+                    if (!textarea || document.activeElement !== textarea) return;
+                    if (e.ctrlKey || e.altKey || e.metaKey) return;
+                    const key = e.key.toLowerCase();
+                    if (latinToArabic[key]) {
+                      e.preventDefault();
+                      const start = textarea.selectionStart;
+                      const end = textarea.selectionEnd;
+                      const before = textarea.value.slice(0, start);
+                      const after = textarea.value.slice(end);
+                      textarea.value = before + latinToArabic[key] + after;
+                      textarea.selectionStart = textarea.selectionEnd = start + 1;
+                      textarea.dispatchEvent(new Event('input', {bubbles:true}));
+                    }
+                  });
+                })();
+                </script>
+                """)
+
                 # Correction system
                 with gr.Group():
-                    gr.Markdown("### 🔧 Correction System")
+                    gr.Markdown("### Correction System")
                     correction_status = gr.Textbox(
                         label="Status",
                         interactive=False,
                         visible=False
                     )
-                    save_correction_btn = gr.Button("💾 Save Correction", variant="secondary")
+                    save_correction_btn = gr.Button("Save Correction", variant="secondary")
         
         # Event handlers
         translate_btn.click(
@@ -397,10 +406,10 @@ def create_interface():
             This model transliterates Moroccan Darija between Latin and Arabic scripts using a CTC-based neural network.
             
             **Features:**
-            - 💾 **Smart Caching**: Frequently used translations are cached for speed
-            - 📊 **Data Collection**: Your usage helps improve the model
-            - ⌨️ **Arabic Keyboard**: Easy text editing and correction
-            - 🔧 **Correction System**: Help improve translations by saving corrections
+            - **Smart Caching**: Frequently used translations are cached for speed
+            - **Data Collection**: Your usage helps improve the model
+            - **Arabic Keyboard**: Easy text editing and correction
+            - **Correction System**: Help improve translations by saving corrections
             
             **How to help:**
             1. Use the Arabic keyboard to correct outputs