Upload folder using huggingface_hub

app.py

@@ -52,16 +52,29 @@ def load_readme_as_html():
         html = re.sub(r'^## (.+)$', r'<h2>\1</h2>', html, flags=re.MULTILINE)
         html = re.sub(r'^# (.+)$', r'<h1>\1</h1>', html, flags=re.MULTILINE)
 
-        # Code blocks (remove extra newlines)
+        # Code blocks - preserve content without adding extra newlines
         def format_code_block(match):
             code = match.group(2).strip()
-            return f'<pre><code>{code}</code></pre>'
+            # Replace internal newlines with a placeholder, then restore after processing
+            # This prevents the paragraph logic from adding extra breaks
+            code_escaped = code.replace('\n', '<!-- NEWLINE -->')
+            return f'<pre><code>{code_escaped}</code></pre>'
         html = re.sub(r'```(\w*)\n(.*?)```', format_code_block, html, flags=re.DOTALL)
 
-        # Images
-        html = re.sub(r'<img src="([^"]+)"[^>]*>', r'<img src="\1" style="max-width:100%; height:auto; border-radius:8px;">', html)
+        # Images - convert relative paths to HuggingFace raw file URLs
+        # Handle both <img> tags and markdown image syntax
+        HF_BASE_URL = "https://huggingface.co/spaces/MCP-1st-Birthday/voicekit/resolve/main"
 
-        # Inline code
+        def convert_image_path(match):
+            src = match.group(1)
+            # If it's a relative path (not starting with http), convert to HF URL
+            if not src.startswith('http'):
+                src = f"{HF_BASE_URL}/{src}"
+            return f'<img src="{src}" style="max-width:100%; height:auto; border-radius:8px; margin:12px 0;">'
+
+        html = re.sub(r'<img src="([^"]+)"[^>]*>', convert_image_path, html)
+
+        # Inline code (but not inside <pre><code> blocks)
         html = re.sub(r'`([^`]+)`', r'<code>\1</code>', html)
 
         # Bold
@@ -99,14 +112,14 @@ def load_readme_as_html():
             else:
                 if in_table:
                     table_html.append('</tbody></table>')
-                    new_lines.append('\n'.join(table_html))
+                    new_lines.append(''.join(table_html))
                     table_html = []
                     in_table = False
                 new_lines.append(line)
 
         if in_table:
             table_html.append('</tbody></table>')
-            new_lines.append('\n'.join(table_html))
+            new_lines.append(''.join(table_html))
 
         html = '\n'.join(new_lines)
 
@@ -114,7 +127,7 @@ def load_readme_as_html():
         html = re.sub(r'^- (.+)$', r'<li>\1</li>', html, flags=re.MULTILINE)
         html = re.sub(r'(<li>.*</li>\n?)+', r'<ul>\g<0></ul>', html)
 
-        # Paragraphs
+        # Paragraphs - skip lines that are inside pre/code blocks
         lines = html.split('\n')
         result = []
         for line in lines:
@@ -124,8 +137,11 @@ def load_readme_as_html():
             else:
                 result.append(line)
 
-        # Escape curly braces for f-string compatibility
+        # Join and restore newlines in code blocks
         final_html = '\n'.join(result)
+        final_html = final_html.replace('<!-- NEWLINE -->', '\n')
+
+        # Escape curly braces for f-string compatibility
         final_html = final_html.replace('{', '{{').replace('}', '}}')
         return final_html
     except Exception as e:
@@ -1238,10 +1254,7 @@ footer,
 .docs-modal-overlay {
     display: none;
     position: fixed !important;
-    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
+    inset: 0 !important;
     width: 100vw !important;
     height: 100vh !important;
     background: rgba(0, 0, 0, 0.85) !important;
@@ -1249,8 +1262,9 @@ footer,
     z-index: 99999 !important;
     justify-content: center !important;
     align-items: center !important;
-    padding: 20px !important;
     box-sizing: border-box !important;
+    /* Ensure modal is centered on viewport regardless of scroll position */
+    overflow: hidden !important;
 }
 
 .docs-modal-overlay.active {
@@ -1258,16 +1272,19 @@ footer,
 }
 
 .docs-modal {
+    position: relative !important;
     background: #0d0d1a !important;
     border: 2px solid #7c3aed !important;
     border-radius: 20px !important;
-    width: calc(100vw - 40px) !important;
-    max-width: 1800px !important;
-    height: auto !important;
-    max-height: 55vh !important;
+    width: calc(100vw - 80px) !important;
+    max-width: 1200px !important;
+    max-height: 80vh !important;
     overflow: hidden !important;
     box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9) !important;
-    margin: 0 auto !important;
+    /* Remove margin that could affect centering */
+    margin: 0 !important;
+    /* Prevent any transform inheritance issues */
+    transform: none !important;
 }
 
 .docs-modal-header {
@@ -1309,7 +1326,7 @@ footer,
 .docs-modal-content {
     padding: 24px !important;
     overflow-y: auto !important;
-    max-height: calc(55vh - 80px) !important;
+    max-height: calc(80vh - 80px) !important;
     color: #c7d2fe !important;
     font-size: 15px !important;
     line-height: 1.7 !important;
@@ -1323,8 +1340,8 @@ footer,
 .docs-modal-content ul, .docs-modal-content ol { margin: 12px 0; padding-left: 24px; }
 .docs-modal-content li { margin: 6px 0; }
 .docs-modal-content code { background: rgba(124, 58, 237, 0.2); padding: 2px 6px; border-radius: 4px; font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; font-size: 13px; color: #c4b5fd; }
-.docs-modal-content pre { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(124, 58, 237, 0.2); border-radius: 12px; padding: 16px; overflow-x: auto; margin: 16px 0; }
-.docs-modal-content pre code { background: transparent; padding: 0; color: #a5b4fc; }
+.docs-modal-content pre { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(124, 58, 237, 0.2); border-radius: 12px; padding: 16px; overflow-x: auto; margin: 16px 0; white-space: pre; }
+.docs-modal-content pre code { background: transparent; padding: 0; color: #a5b4fc; white-space: pre; display: block; }
 .docs-modal-content table { width: 100%; border-collapse: collapse; margin: 16px 0; }
 .docs-modal-content th, .docs-modal-content td { padding: 10px 12px; text-align: left; border: 1px solid rgba(124, 58, 237, 0.2); }
 .docs-modal-content th { background: rgba(124, 58, 237, 0.15); color: #e0e7ff; font-weight: 600; }