Using better examples and adding intro

app.py

@@ -1,15 +1,27 @@
 import gradio as gr
 
 # Define the pre-stored text snippets
-snippet1 = """\n\n|![Link Text](www.example.com)|
+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!
+This is text with a tip format! Use sparingly
 </div>
 """
-snippet3 = """\n\n[[1]](#1)\n\n<a id="1">[1]</a> : First Last, [Example](www.example.com), 2021"""
+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.
+
+Happy blogging!
+"""
 
 # Functions to append snippets at the end of the text
 def append_snippet1(text):
@@ -26,7 +38,7 @@ def preview_text(text):
     return text
 
 with gr.Blocks() as demo:
-    gr.Markdown("# Blog Writing Helper")
+    gr.Markdown()
     
     with gr.Row():
         with gr.Column():