如何在Plotly Dash中实现可编辑Madlib功能并支持Prompt更新？

你当前的实现把dcc.Textarea组件直接转为字符串插入dcc.Markdown，导致输入框变成不可编辑的文本链接——这是因为Markdown组件只能渲染纯文本和HTML，无法识别Dash的交互式组件。要实现可编辑的Madlib输入框，需要用Dash的HTML组件拼接文本和输入框，而非依赖Markdown。

解决方案 #

• 使用正则表达式准确提取句子中括号包裹的内容，同时保留原文本的结构。
• 将原句子拆分为普通文本段和需替换的输入框段，用html.Div和html.Span拼接这些元素，确保输入框是可交互的Dash组件。
• 配合Dash回调实现点击按钮切换不同Madlib模板的功能。

修正后的Madlib生成函数 #

import re
from dash import html, dcc

def generate_madlib(sentence):
    # 用正则分割句子，保留普通文本和括号内的内容
    parts = re.split(r'(\[.*?\])', sentence)
    elements = []
    
    for part in parts:
        if part.startswith('[') and part.endswith(']'):
            # 提取括号内的占位符文本
            placeholder = part.strip('[]')
            # 创建textarea输入框，根据占位符长度调整宽度
            textarea = dcc.Textarea(
                placeholder=placeholder,
                style={
                    'margin': '0 8px',
                    'width': f'{len(placeholder)*10}px',
                    'height': '40px',
                    'padding': '4px'
                }
            )
            elements.append(textarea)
        else:
            # 普通文本用Span包裹，保持排版
            elements.append(html.Span(part))
    
    # 把所有元素放到一个Div里，用flex布局对齐
    return html.Div(elements, style={'display': 'flex', 'align-items': 'center', 'flex-wrap': 'wrap'})

完整Dash应用示例（含按钮切换模板） #

from dash import Dash, Input, Output, html, dcc, callback_context

app = Dash(__name__)

# 定义不同的Madlib模板
madlib_templates = {
    "template1": "今天我去了[形容词]的[地点]，看到了一只[颜色]的[动物]，它正在[动词]。",
    "template2": "在[季节]的一个[时间]，我和[朋友名字]一起做了[有趣的事情]，感觉非常[心情]。"
}

app.layout = html.Div([
    html.H3("Madlib 游戏"),
    # 切换模板的按钮组
    html.Div([
        html.Button("模板1", id="btn-template1", n_clicks=0),
        html.Button("模板2", id="btn-template2", n_clicks=0),
    ], style={'margin-bottom': '20px'}),
    # 显示Madlib的区域
    html.Div(id="madlib-container")
])

@app.callback(
    Output("madlib-container", "children"),
    Input("btn-template1", "n_clicks"),
    Input("btn-template2", "n_clicks"),
    prevent_initial_call=False
)
def update_madlib(btn1_clicks, btn2_clicks):
    ctx = callback_context
    if not ctx.triggered:
        # 初始加载显示第一个模板
        return generate_madlib(madlib_templates["template1"])
    else:
        button_id = ctx.triggered[0]["prop_id"].split(".")[0]
        if button_id == "btn-template1":
            return generate_madlib(madlib_templates["template1"])
        elif button_id == "btn-template2":
            return generate_madlib(madlib_templates["template2"])

if __name__ == "__main__":
    app.run_server(debug=True)

代码说明 #

• 正则分割re.split(r'(\[.*?\])', sentence)会保留括号包裹的内容作为独立片段，确保原句子结构不被破坏。
• 用flex布局让文本和输入框横向对齐，避免排版混乱。
• 回调函数通过监听按钮点击事件，动态切换并渲染对应的Madlib模板。

内容的提问来源于stack exchange，提问作者acciolurker