Update app.py

app.py

@@ -6,7 +6,6 @@ import gradio as gr
 pipe = pipeline("translation", "guymorlan/TokenizerLabeller")
 
 # download json and open
-# from https://huggingface.co/guymorlan/TokenizerLabeller/raw/main/playaling_words.json
 r = requests.get("https://huggingface.co/guymorlan/TokenizerLabeller/raw/main/playaling_words.json")
 data = json.loads(r.text)
 
@@ -18,7 +17,7 @@ def predict(input):
     out = [x.strip() for x in out.split(" + ")]
 
     output = f"""
-        <div style='direction: rtl; text-align: right; font-size: 20px; font-family: sans-serif; line-height: 1.5'>{raw}<br><br>"""
+    <div style='direction: rtl; text-align: right; font-size: 20px; font-family: sans-serif; line-height: 1.5'>{raw}<br><br>"""
 
     for o in out:
         oo = [x.strip() for x in o.split("+")]
@@ -26,9 +25,8 @@ def predict(input):
         for ooo in oo:
             if ooo in data:
                 newout.append(f"""
-                    <span style='color: green; font-family: "Courier New", Courier, monospace;' 
-                    onmouseover='showCard(event, "{data[ooo]['translation']}", "{data[ooo]['features']}")' 
-                    onmouseout='hideCard(event)'>{data[ooo]['word']}</span>
+                <span style='color: green; font-family: "Courier New", Courier, monospace;'
+                data-toggle='tooltip' data-placement='top' title='{data[ooo]['translation']}\n{data[ooo]['features']}'>{data[ooo]['word']}</span>
                 """)
             else:
                 newout.append(ooo)
@@ -38,26 +36,13 @@ def predict(input):
     output += "</div>"
 
     output += """
-    <div id='hovercard' style='position: absolute; visibility: hidden; background: white; padding: 10px; 
-    border: 1px solid black; border-radius: 5px;'>
-        <h3 id='card_title'></h3>
-        <p id='card_content'></p>
-    </div>
     <script>
-        function showCard(event, title, content) {
-            document.getElementById('hovercard').style.visibility = 'visible';
-            document.getElementById('hovercard').style.top = event.pageY + 'px';
-            document.getElementById('hovercard').style.left = event.pageX + 'px';
-            document.getElementById('card_title').innerText = title;
-            document.getElementById('card_content').innerText = content;
-        }
-
-        function hideCard(event) {
-            document.getElementById('hovercard').style.visibility = 'hidden';
-        }
+    $(document).ready(function(){
+        $('[data-toggle="tooltip"]').tooltip();   
+    });
     </script>
     """
 
     return output
 
-gr.Interface(predict, "textbox", "html", title="Ammiya Tokenizer", description="Tokenize Ammiya text and show Playaling words").launch()
+gr.Interface(predict, "textbox", "html", title="Ammiya Tokenizer", description="Tokenize Ammiya text and show Playaling words").launch()