File size: 2,183 Bytes
b1be69e c2e2a4f 9df958d b1be69e c2e2a4f b1be69e c2e2a4f 766bba1 c2e2a4f b1be69e c2e2a4f 9df958d c2e2a4f b1be69e c2e2a4f 766bba1 c2e2a4f 766bba1 c2e2a4f |
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import gradio as gr
# Define the pre-stored text snippets
snippet1 = """||
|:--:|
|Figure x: Caption|
"""
snippet2 = """<div style="background-color: #e6f9e6; padding: 16px 32px; outline: 2px solid; border-radius: 10px;">
This is text with a tip format!
</div>
"""
# Function to insert snippet at a given position
def insert_snippet(text, snippet, position):
return text[:position] + snippet + text[position:]
# JavaScript to get and set cursor position
js_code = """
<script>
let position = 0;
function updatePosition() {
let textbox = document.querySelector('textarea');
position = textbox.selectionStart;
}
function insertAtCursor(snippet) {
let textbox = document.querySelector('textarea');
let text = textbox.value;
let newText = text.slice(0, position) + snippet + text.slice(position);
textbox.value = newText;
position += snippet.length;
textbox.focus();
}
document.querySelector('textarea').addEventListener('click', updatePosition);
document.querySelector('textarea').addEventListener('keyup', updatePosition);
document.querySelector('#button1').addEventListener('click', function() { insertAtCursor("This is the first predefined text snippet."); });
document.querySelector('#button2').addEventListener('click', function() { insertAtCursor("This is the second predefined text snippet."); });
</script>
"""
with gr.Blocks() as demo:
gr.Markdown("# Blog Writing Helper")
with gr.Row():
with gr.Column():
text_input = gr.Textbox(lines=10, placeholder="Write your blog here...", label="Text Editor")
button1 = gr.Button("Insert Image Table", elem_id="button1")
button2 = gr.Button("Insert Snippet 2", elem_id="button2")
with gr.Column():
gr.Markdown("**Live Preview**")
markdown_preview = gr.Markdown(label="Live Preview", elem_id="preview-box")
# Live preview update
text_input.change(lambda text: text, inputs=text_input, outputs=markdown_preview)
# Adding JavaScript code to the HTML component
gr.HTML(js_code)
demo.launch()
|