try and fix image rendering

README.md

@@ -21,7 +21,7 @@ Provided a Romansh text, the lemmatizer splits it into words and looks up each w
 
 For example, if a Romansh text contains the word _lavuraiva_, the lemmatizer traces the word back to the Vallader and Puter dictionaries:
 
-![illustration](https://huggingface.co/spaces/ZurichNLP/rumlem/resolve/main/illustration.png)
+IMAGE_PLACEHOLDER
 
 Typical use cases for the lemmatizer include:
 

app.py

@@ -19,7 +19,6 @@ def load_readme():
     
     # Strip YAML frontmatter (content between --- markers)
     if content.startswith("---"):
-        # Find the second occurrence of ---
         lines = content.split("\n")
         frontmatter_end = None
         for index, line in enumerate(lines[1:], start=1):
@@ -28,13 +27,16 @@ def load_readme():
                 break
         
         if frontmatter_end is not None:
-            # Return content after frontmatter, skipping the blank line if present
             content = "\n".join(lines[frontmatter_end + 1:]).lstrip("\n")
     
     return content
 
+IMAGE_URL = "https://huggingface.co/spaces/ZurichNLP/rumlem/resolve/main/illustration.png"
+IMAGE_PLACEHOLDER = "IMAGE_PLACEHOLDER"
 
 readme_content = load_readme()
+readme_before_image, readme_after_image = readme_content.split(IMAGE_PLACEHOLDER, 1)
+
 
 if gr.NO_RELOAD:
     lemmatizer = Lemmatizer(learned_et=False)
@@ -250,7 +252,9 @@ with gr.Blocks(
     )
 
     with gr.Accordion("About This Demo", open=False):
-        gr.Markdown(readme_content)
+        gr.Markdown(readme_before_image)
+        gr.Image(IMAGE_URL, width=400, show_label=False, show_download_button=False)
+        gr.Markdown(readme_after_image)
 
     # === Top Row: Input & Chart ===
     with gr.Row():