Fix image path for Gradio rendering

app.py

@@ -1,6 +1,8 @@
 import gradio as gr
+import markdown
+import re
 
-def load_markdown():
+def convert_markdown_to_html():
     with open("README.md", "r", encoding="utf-8") as f:
         content = f.read()
     
@@ -10,9 +12,28 @@ def load_markdown():
         if len(parts) >= 3:
             content = parts[2].strip()
     
-    return content
+    # 修复图片路径为绝对URL
+    def fix_image_paths(match):
+        alt_text = match.group(1) or ""
+        path = match.group(2)
+        
+        if not path.startswith(("http://", "https://")):
+            path = f"https://huggingface.co/spaces/feifeinoban/shell/resolve/main/{path.lstrip('./')}"
+        
+        return f'![{alt_text}]({path})'
+    
+    content = re.sub(r'!\[(.*?)\]\((.*?)\)', fix_image_paths, content)
+    
+    # 将Markdown转换为HTML
+    html_content = markdown.markdown(content, extensions=['tables', 'fenced_code'])
+    
+    return html_content
 
 with gr.Blocks() as demo:
-    gr.Markdown(load_markdown())
+    gr.HTML("""
+    <div style="max-width: 900px; margin: 0 auto; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;">
+    """)
+    gr.HTML(convert_markdown_to_html())
+    gr.HTML("</div>")
 
 demo.launch()