Update app.py

app.py

@@ -13,123 +13,86 @@ MODELS = {
     "Algerian": "BounharAbdelaziz/ModernBERT-Arabic-base-stage-3-decay-mx8192-ALGERIAN",
 }
 
-TOKEN = os.environ["HF_TOKEN"]
+TOKEN = os.environ.get("HF_TOKEN", "")
 device = "cuda:0" if torch.cuda.is_available() else "cpu"
 
-# Load the pipeline dynamically based on the selected dialect
 def load_model(dialect):
-    model_path = MODELS.get(dialect, MODELS["Arabic"])  # Default to Arabic if dialect not found
-    pipe = pipeline(
-        task="fill-mask",
-        model=model_path,
-        token=TOKEN,
-        device=device
-    )
-    return pipe
+    model_path = MODELS.get(dialect, MODELS["Arabic"])
+    return pipeline(task="fill-mask", model=model_path, token=TOKEN, device=device)
 
-# Store the pipeline globally
 pipe = None
 
-# Define examples for each dialect
-EXAMPLES = {
-    "Moroccan": [
-        "الدار البيضاء [MASK]", 
-        "المغرب بلاد [MASK]", 
-        "كناكل [MASK] فالمغرب",
-        "العاصمة د [MASK] هي الرباط",
-        "المغرب [MASK] زوين",
-        "انا سميتي مريم، و كنسكن ف[MASK] العاصمة دفلسطين"
-    ],
-    "Arabic": [
-        "العاصمة الرسمية لمصر هي [MASK].",
-        "أطول نهر في العالم هو نهر [MASK].",
-        "الشاعر العربي المشهور [MASK] كتب قصيدة 'أراك عصي الدمع'.",
-        "عندما أستيقظ في الصباح، أشرب فنجان من [MASK].",
-        "في التأني [MASK] وفي العجلة الندامة.",
-        "معركة [MASK] كانت من أهم المعارك في تاريخ الإسلام.",
-        "يعتبر [MASK] من أهم العلماء في مجال الفيزياء.",
-        "تقع جبال [MASK] في شمال إفريقيا.",
-        "يعتبر [MASK] من أركان الإسلام الخمسة."
-    ],
-    "Egyptian": ["القاهرة مدينة [MASK]", "مصر بلاد [MASK]", "بنحب [MASK] فمصر"],
-    "Tunisian": ["تونس بلاد [MASK]", "المنستير مدينة [MASK]", "عيشتي في [MASK]"],
-    "Algerian": ["الجزائر بلاد [MASK]", "قسنطينة مدينة [MASK]", "نحبو [MASK] ف الجزائر"],
-}
-
-# Predict function
 @spaces.GPU
 def predict(text, dialect):
     global pipe
-    if pipe is None or dialect != predict.current_dialect:  # Reload model if dialect changes
+    if pipe is None or dialect != predict.current_dialect:
         pipe = load_model(dialect)
         predict.current_dialect = dialect
     outputs = pipe(text)
-    scores = [x["score"] for x in outputs]
-    tokens = [x["token_str"] for x in outputs]
-    return {label: float(prob) for label, prob in zip(tokens, scores)}
+    return {x["token_str"]: float(x["score"]) for x in outputs}
 
-# Initialize current dialect
 predict.current_dialect = None
 
-# Create Gradio interface
+# Create the app
 with gr.Blocks() as demo:
     with gr.Row():
         with gr.Column():
-            # Dropdown for dialect selection
             dialect_dropdown = gr.Dropdown(
                 choices=["Arabic", "Tunisian", "Moroccan", "Algerian", "Egyptian"],
-                label="Select Dialect",
-                value="Arabic"
+                value="Arabic",
+                label="Select Dialect"
             )
             
-            # Input text box
             input_text = gr.Textbox(
                 label="Input",
-                placeholder="Enter text here...",
+                placeholder="Enter text with <mask>...",
                 rtl=True
             )
             
-            # Button row
+            # Use a HTML component to display clickable examples
+            examples_html = gr.HTML(
+                value="<div id='examples'>Examples: " + 
+                      " | ".join([f"<a href='#' onclick='return false;'>{ex}</a>" for ex in EXAMPLES["Arabic"]]) + 
+                      "</div>"
+            )
+            
             with gr.Row():
                 clear_btn = gr.Button("Clear")
                 submit_btn = gr.Button("Submit", variant="primary")
-            
-            # Examples section (dynamic based on dialect)
-            examples = gr.Examples(
-                examples=EXAMPLES["Arabic"],  # Default to Arabic examples
-                inputs=input_text,
-                label="Examples"
-            )
-        
+
         with gr.Column():
-            # Output probabilities
-            output_labels = gr.Label(
-                label="Prediction Results",
-                show_label=False
-            )
+            output_labels = gr.Label(label="Predictions")
+
+    # JavaScript to handle example clicks
+    demo.load(
+        None,
+        None,
+        None,
+        _js="""
+        () => {
+            document.querySelectorAll('#examples a').forEach(a => {
+                a.addEventListener('click', (e) => {
+                    const text = e.target.textContent;
+                    document.querySelector('textarea[data-testid="textbox"]').value = text;
+                });
+            });
+        }
+        """
+    )
 
     # Update examples when dialect changes
     def update_examples(dialect):
-        return EXAMPLES.get(dialect, EXAMPLES["Arabic"])
+        examples = EXAMPLES.get(dialect, EXAMPLES["Arabic"])
+        html = "<div id='examples'>Examples: " + " | ".join([f"<a href='#' onclick='return false;'>{ex}</a>" for ex in examples]) + "</div>"
+        return gr.HTML.update(value=html)
 
-    # Update examples dynamically
     dialect_dropdown.change(
-        fn=lambda dialect: gr.Examples(examples=EXAMPLES.get(dialect, EXAMPLES["Arabic"]), inputs=input_text),
+        update_examples,
         inputs=dialect_dropdown,
-        outputs=examples
+        outputs=examples_html
     )
 
-    # Button actions
-    submit_btn.click(
-        predict,
-        inputs=[input_text, dialect_dropdown],
-        outputs=output_labels
-    )
-    
-    clear_btn.click(
-        lambda: "",
-        outputs=input_text
-    )
+    submit_btn.click(predict, inputs=[input_text, dialect_dropdown], outputs=output_labels)
+    clear_btn.click(lambda: "", outputs=input_text)
 
-# Launch the app
 demo.launch()