import gradio as gr
import pandas as pd


# Read the lexicon
def read_lexicon(lexicon_file):
    df = pd.read_csv(lexicon_file, sep='\t')
    df['keyword_no_cat'] = df['lemma'].str.split(' #').str[0].str.strip().str.replace(' ', '_')
    return df

lexicon = read_lexicon("lexicon.csv")


# Get the ARASAAC pictogram ID from the lexicon
def get_id_picto_from_predicted_lemma(df_lexicon, lemma):
    lemma = lemma.strip().lower()
    if lemma.endswith("!"):
        lemma = lemma[:-1]
    id_picto = df_lexicon.loc[df_lexicon['keyword_no_cat'] == lemma, 'id_picto'].tolist()
    return (id_picto[0], lemma) if id_picto else (0, lemma)


# HTML content to show the pictogram images
def generate_html(ids):
    html_content = '''
    <style>
        figure {
            display: inline-block;
            text-align: center;
            font-family: Arial, sans-serif;
            margin: 10px;
        }
        figcaption {
            color: black;
            background-color: white;
            margin-top: 5px;
            padding: 2px;
        }
        img {
            background-color: white;
            margin: 0;
            padding: 0;
            border-radius: 6px;
        }
    </style>
    '''
    for picto_id, lemma in ids:
        if picto_id != 0:  # pictogram id exists
            img_url = f"https://static.arasaac.org/pictograms/{picto_id}/{picto_id}_500.png"
            html_content += f'''
            <figure>
                <img src="{img_url}" alt="{lemma}" width="180" height="180"/>
                <figcaption>{lemma}</figcaption>
            </figure>
            '''
        else:  # not found pictogram
            html_content += f'''
            <figure>
                <figcaption>"{lemma}" is not in the lexicon</figcaption>
            </figure>
            '''
    return html_content


# Process the input of the user
def process_text(input_text):
    tokens = input_text.strip().split()  # cut the sequence into tokens
    pictogram_ids = [get_id_picto_from_predicted_lemma(lexicon, token) for token in tokens]
    return generate_html(pictogram_ids)


# Configuration de l'interface Gradio
with gr.Blocks() as demo:
    gr.Markdown("# Visualize Pictograms")
    
    input_text = gr.Textbox(label="Enter a sequence of pictogram tokens:", placeholder="Example : bonjour je appeler plan_taille")

    submit_btn = gr.Button("Generate", variant="secondary")
    
    output_html = gr.HTML(label="ARASAAC Pictograms")
    submit_btn.click(process_text, inputs=input_text, outputs=output_html)

    

# Lancer l'application
demo.launch()