File size: 1,610 Bytes
b1be69e 766bba1 b1be69e 766bba1 b1be69e 766bba1 d2d7392 766bba1 b1be69e 766bba1 b1be69e d2d7392 766bba1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import gradio as gr
# Predefined snippets
snippet1 = "Here's a helpful tip for your blog post: "
snippet2 = "Conclusion: Always remember to summarize your key points."
def update_preview(text):
return text
def insert_snippet(text, editor_content, cursor_position):
# Insert the snippet at the current cursor position
new_content = (
editor_content[:cursor_position] + text + editor_content[cursor_position:]
)
return new_content, new_content, cursor_position + len(text)
# Create the interface with customized styles
with gr.Blocks(css=".preview-box {border: 1px solid black; padding: 10px;}") as app:
gr.Markdown("### Blog Editor with Live Preview")
with gr.Row():
with gr.Column():
text_editor = gr.TextArea(label="Write your blog here", placeholder="Start typing...", lines=10, elem_id="editor")
with gr.Row():
insert_button1 = gr.Button("Insert Snippet 1")
insert_button2 = gr.Button("Insert Snippet 2")
with gr.Column():
preview_box = gr.HTML(label="Live Preview", elem_id="preview", visible=True, className="preview-box")
# Interactivity
text_editor.change(fn=update_preview, inputs=text_editor, outputs=preview_box)
insert_button1.click(fn=insert_snippet, inputs=[snippet1, text_editor, text_editor.cursor_position], outputs=[text_editor, preview_box, text_editor.cursor_position])
insert_button2.click(fn=insert_snippet, inputs=[snippet2, text_editor, text_editor.cursor_position], outputs=[text_editor, preview_box, text_editor.cursor_position])
app.launch()
|