app.py

import gradio as gr

# Define the pre-stored text snippets
snippet1 = """\n\n|![Hugging Face Logo](https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo-with-title.svg)|
|:--:|
|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 = """|![Hugging Face Logo](https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo-with-title.svg)|
|:--:|
|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()