File size: 3,177 Bytes
b1be69e c2e2a4f 78ae771 9df958d f7bea2e 78ae771 9df958d 78ae771 a88f579 6b5ae9d a88f579 78ae771 f7bea2e 1070e06 f7bea2e 766bba1 c2e2a4f 1070e06 c2e2a4f b1be69e 04f384d 9df958d 823c3ea b1be69e c2e2a4f 2fafff2 766bba1 f7bea2e c2e2a4f f7bea2e 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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
import gradio as gr
# Define the pre-stored text snippets
snippet1 = """\n\n||
|:--:|
|Figure x: Caption|
"""
snippet2 = """\n\n<div style="background-color: #e6f9e6; padding: 16px 32px; outline: 2px solid; border-radius: 10px;">
This is text with a tip format! Use sparingly
</div>
"""
snippet3 = """\n\n[[1]](#1)\n\n<a id="1">[1]</a> : Derek Thomas, [Hugging Face Blog Assistant](https://huggingface.co/spaces/derek-thomas/hugging-face-blog-assistant/edit/main/app.py), 2024"""
intro_md = """# Blog Writing Assistant
Easily create and edit your blog posts with our intuitive text editor. Use the buttons to quickly insert predefined snippets for image tables, tip formats, and references, and see your changes in real-time with the live preview on the right.
**How to Use:**
1. Write your blog content in the text editor.
2. Click the buttons to add predefined snippets.
3. View the live preview to see your formatted blog post.
<div style="background-color: #e6f9e6; padding: 16px 32px; outline: 2px solid; border-radius: 10px;">
Note that this is mainly a tool for helping with tricky markdown, but it's a great idea to use the <a href="https://huggingface.co/new-blog">community blog editor</a> for actual visualization.
</div>
Happy blogging!
"""
default_md = """||
|:--:|
|Figure x: Caption|
<div style="background-color: #e6f9e6; padding: 16px 32px; outline: 2px solid; border-radius: 10px;">
This is text with a tip format! Use sparingly
</div>
[[1]](#1)
<a id="1">[1]</a> : Derek Thomas, [Hugging Face Blog Assistant](https://huggingface.co/spaces/derek-thomas/hugging-face-blog-assistant/edit/main/app.py), 2024
"""
# Functions to append snippets at the end of the text
def append_snippet1(text):
return text + snippet1
def append_snippet2(text):
return text + snippet2
def append_snippet3(text):
return text + snippet3
# Function to update live preview
def preview_text(text):
return text
with gr.Blocks() as demo:
gr.Markdown(intro_md)
with gr.Row():
with gr.Column():
text_input = gr.Textbox(value=default_md, lines=10, placeholder="Write your blog here...", label="Text Editor")
button1 = gr.Button("Insert Image Table", elem_id="button1")
button2 = gr.Button("Insert Tip Format", elem_id="button2")
button3 = gr.Button("Insert Reference", elem_id="button3")
with gr.Column():
gr.Markdown("**Live Preview**")
markdown_preview = gr.Markdown(value=default_md, label="Live Preview", elem_id="preview-box")
# Button click actions to append snippets
button1.click(append_snippet1, inputs=text_input, outputs=text_input)
button2.click(append_snippet2, inputs=text_input, outputs=text_input)
button3.click(append_snippet3, inputs=text_input, outputs=text_input)
# Live preview update
text_input.change(preview_text, inputs=text_input, outputs=markdown_preview)
demo.launch()
|