app.py

from transformers import pipeline
import requests
import json
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)

# build gradio interface
def predict(input):

    out = pipe(input)[0]['translation_text']
    raw = out
    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>"""

    for o in out:
        oo = [x.strip() for x in o.split("+")]
        newout = []
        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>
                """)
            else:
                newout.append(ooo)

        output += "+".join(newout) + " | "

    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';
        }
    </script>
    """

    return output

gr.Interface(predict, "textbox", "html", title="Ammiya Tokenizer", description="Tokenize Ammiya text and show Playaling words").launch()