gradio_samples/gradio_hover.py

# import gradio as gr

# def generate_hoverable_html(text):
#     # 分割文本为单词
#     words = text.split()
    
#     # 为每个单词创建一个带有悬停信息的 HTML span 元素
#     html_words = [
#         f'<span class="hoverable-word" data-info="Information about {word}">{word}</span>'
#         for word in words
#     ]
    
#     # 将单词合并回字符串
#     hoverable_html = ' '.join(html_words)
    
#     # 添加 CSS 和 JavaScript
#     custom_html = f"""
#     <style>
#         .hoverable-word {{
#             color: blue;
#             cursor: pointer;
#         }}
#         .hoverable-word:hover::after {{
#             content: attr(data-info);
#             color: white;
#             background-color: black;
#             padding: 4px;
#             margin-left: 8px;
#             position: absolute;
#         }}
#     </style>
#     <div>{hoverable_html}</div>
#     """
    
#     return custom_html

# # 创建 Gradio 界面
# with gr.Blocks() as demo:
#     with gr.Row():
#         text_input = gr.Textbox(label="Input Text", placeholder="Type here...")
#     output_html = gr.HTML()
    
#     # 连接输入、处理函数和输出
#     text_input.change(generate_hoverable_html, text_input, output_html)

# demo.launch()

import gradio as gr

def generate_hoverable_html(text):
    # 分割文本为单词
    words = text.split()
    prob_dic={'a':{'b':0.1,'c':0.2},'b':{'a':0.1,'c':0.2}}
    # 为每个单词创建一个带有悬停信息的 HTML span 元素
    html_words = [
        f'<span class="hoverable-word" data-info="{prob_dic[word]}">{word}</span>'
        for word in words
    ]
    
    # 将单词合并回字符串
    hoverable_html = ' '.join(html_words)
    
    # 添加 CSS 和 JavaScript
    custom_html = f"""
    <style>
        .hoverable-word {{
            color: blue;
            cursor: pointer;
        }}
        .hoverable-word:hover::after {{
            content: attr(data-info);
            color: white;
            background-color: black;
            padding: 4px;
            margin-left: 8px;
            position: absolute;
        }}
    </style>
    <div>{hoverable_html}</div>
    """
    
    return custom_html

# 创建 Gradio 界面
with gr.Blocks() as demo:
    with gr.Row():
        text_input = gr.Textbox(label="Input Text", placeholder="Type here...")
    output_html = gr.HTML()
    
    # 连接输入、处理函数和输出
    text_input.change(generate_hoverable_html, text_input, output_html)

demo.launch(debug=True)