Update app.py

app.py

@@ -93,6 +93,18 @@ def md_to_html(text: str) -> str:
         return md.markdown(text, extensions=exts, extension_configs=cfg, output_format="html5")
 
 def render_article(md_path: str, inserts: dict[str, callable]):
+    raw = Path(md_path).read_text(encoding="utf-8") if Path(md_path).exists() else f"**Missing article**: `{md_path}`."
+    parts = re.split(r"\{\{([A-Z_]+)\}\}", raw)
+    with gr.Column():
+        for i, part in enumerate(parts):
+            if i % 2 == 0:
+                # Wrap prose in an article container for scoped CSS
+                gr.HTML(f'<div class="article">{md_to_html(part)}</div>')
+            else:
+                (inserts.get(part) or (lambda: gr.HTML(f"<p><em>Unknown insert: {part}</em></p>")))()
+
+
+def old_render_article(md_path: str, inserts: dict[str, callable]):
     raw = ""
     path = Path(md_path)
     if path.exists():
@@ -315,178 +327,82 @@ INSERTS = {
 # ---------------------------
 
 CSS = """
-/* Import Inter font like HF blog */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-
-:root { 
-  --toc-w: 280px; 
-  --text-color: #374151;
-  --heading-color: #111827;
-  --link-color: #2563eb;
+/* Force light theme and readable defaults */
+:root {
+  color-scheme: light;
+  --body-background-fill: #ffffff;
+  --body-text-color: #111827;      /* near-black */
+  --heading-text-color: #0b1021;
+  --link-text-color: #1d4ed8;
   --border-color: #e5e7eb;
 }
 
-/* Main layout */
-#layout { display: grid; grid-template-columns: var(--toc-w) 1fr; gap: 2rem; }
-#toc { 
-  position: sticky; 
-  top: 1rem; 
-  height: calc(100vh - 2rem); 
-  overflow: auto; 
-  padding-right: 1rem; 
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-}
-#toc a { 
-  text-decoration: none; 
-  display: block; 
-  padding: 0.5rem 0; 
-  color: var(--text-color);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-#toc a:hover { color: var(--link-color); }
-
-/* Container styling */
-.gradio-container { 
-  max-width: 1200px !important; 
-  margin: 0 auto !important;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
-}
-
-/* Typography - matching HF blog style */
-.gradio-container h1 {
-  font-size: 2.25rem !important;
-  line-height: 2.5rem !important;
-  font-weight: 700 !important;
-  color: var(--heading-color) !important;
-  margin: 2rem 0 1.5rem 0 !important;
-  font-family: 'Inter', sans-serif !important;
-}
-
-.gradio-container h2 {
-  font-size: 1.875rem !important;
-  line-height: 2.25rem !important;
-  font-weight: 600 !important;
-  color: var(--heading-color) !important;
-  margin: 2.5rem 0 1rem 0 !important;
-  font-family: 'Inter', sans-serif !important;
-}
-
-.gradio-container h3 {
-  font-size: 1.5rem !important;
-  line-height: 2rem !important;
-  font-weight: 600 !important;
-  color: var(--heading-color) !important;
-  margin: 2rem 0 0.75rem 0 !important;
-  font-family: 'Inter', sans-serif !important;
-}
-
-.gradio-container h4 {
-  font-size: 1.25rem !important;
-  line-height: 1.75rem !important;
-  font-weight: 600 !important;
-  color: var(--heading-color) !important;
-  margin: 1.5rem 0 0.5rem 0 !important;
-  font-family: 'Inter', sans-serif !important;
+/* Load Inter; if Google Fonts is blocked, the @font-face fallback is used */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@font-face {
+  font-family: 'Inter var';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('https://rsms.me/inter/font-files/Inter.var.woff2?v=3.19') format('woff2');
 }
 
-/* Body text */
-.gradio-container p {
-  font-size: 1rem !important;
-  line-height: 1.75rem !important;
-  font-weight: 400 !important;
-  color: var(--text-color) !important;
-  margin: 1.25rem 0 !important;
-  font-family: 'Inter', sans-serif !important;
+html, body, .gradio-container { background: #fff !important; }
+.gradio-container { font-family: 'Inter', 'Inter var', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important; }
+
+/* Layout (don’t clamp all nested divs) */
+#layout { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; }
+#toc { position: sticky; top: 1rem; height: calc(100vh - 2rem); overflow: auto; padding-right: 1rem; }
+#toc a { display: block; padding: .5rem 0; color: #374151; font-size: .875rem; text-decoration: none; }
+#toc a:hover { color: var(--link-text-color); }
+
+/* Scope ALL article typography to .article to beat Gradio’s prose opacity */
+.article,
+.article :where(p, li, code, pre, blockquote, h1, h2, h3, h4, h5, h6, a, strong, em) {
+  color: var(--body-text-color) !important;
+  opacity: 1 !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-/* Lists */
-.gradio-container ul, .gradio-container ol {
-  font-size: 1rem !important;
-  line-height: 1.75rem !important;
-  color: var(--text-color) !important;
-  margin: 1.25rem 0 !important;
-  padding-left: 1.5rem !important;
+/* Article width and centering */
+.article { max-width: 72ch; margin: 0 auto; }
+
+/* Headings */
+.article h1 { font-weight: 700; font-size: 2.25rem; line-height: 2.6rem; color: var(--heading-text-color) !important; margin: 2rem 0 1.25rem; }
+.article h2 { font-weight: 600; font-size: 1.875rem; line-height: 2.25rem; color: var(--heading-text-color) !important; margin: 2rem 0 1rem; }
+.article h3 { font-weight: 600; font-size: 1.5rem; line-height: 2rem; color: var(--heading-text-color) !important; margin: 1.5rem 0 .75rem; }
+
+/* Body text and lists */
+.article p, .article li { font-size: 1.02rem; line-height: 1.8rem; }
+.article ul, .article ol { padding-left: 1.5rem; margin: 1rem 0; }
+.article a { color: var(--link-text-color) !important; text-decoration: underline; }
+.article a:hover { text-decoration: none; }
+
+/* Code blocks and inline code */
+.article pre {
+  background: #f8fafc; border: 1px solid var(--border-color); border-radius: 8px;
+  padding: 1rem; margin: 1.25rem 0; overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: .92rem; line-height: 1.6rem;
 }
-
-.gradio-container li {
-  margin: 0.5rem 0 !important;
-}
-
-/* Links */
-.gradio-container a {
-  color: var(--link-color) !important;
-  text-decoration: underline !important;
-}
-
-.gradio-container a:hover {
-  text-decoration: none !important;
-}
-
-/* Code blocks */
-.gradio-container pre {
-  background-color: #f8fafc !important;
-  border: 1px solid var(--border-color) !important;
-  border-radius: 0.5rem !important;
-  padding: 1rem !important;
-  margin: 1.5rem 0 !important;
-  overflow-x: auto !important;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace !important;
-  font-size: 0.875rem !important;
-  line-height: 1.5rem !important;
-}
-
-.gradio-container code {
-  background-color: #f1f5f9 !important;
-  color: #475569 !important;
-  padding: 0.125rem 0.375rem !important;
-  border-radius: 0.25rem !important;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace !important;
-  font-size: 0.875rem !important;
+.article code {
+  background: #f1f5f9; color: #111827; padding: .15rem .35rem; border-radius: .25rem;
 }
 
 /* Blockquotes */
-.gradio-container blockquote {
-  border-left: 4px solid var(--link-color) !important;
-  padding-left: 1rem !important;
-  margin: 1.5rem 0 !important;
-  font-style: italic !important;
-  color: #64748b !important;
-}
+.article blockquote { border-left: 4px solid var(--link-text-color); padding-left: 1rem; margin: 1.25rem 0; color: #334155; }
 
-/* Images - add some spacing */
-.gradio-container img {
-  margin: 1.5rem 0 !important;
-  border-radius: 0.5rem !important;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
-}
+/* Images inside article */
+.article img { display: block; max-width: 100%; height: auto; margin: 1.25rem auto; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
 
-/* Horizontal rules */
-hr { 
-  border: none !important; 
-  border-top: 1px solid var(--border-color) !important; 
-  margin: 2rem 0 !important; 
-}
+/* Horizontal rule and anchor offset */
+hr { border: 0; border-top: 1px solid var(--border-color); margin: 2rem 0; }
+.section { scroll-margin-top: 80px; }
 
-/* Scroll margins for anchor links */
-.section { 
-  scroll-margin-top: 80px; 
-}
+/* Keep widgets full width; don’t inherit article max-width */
+.gr-form, .gr-panel, .gr-block { max-width: none; }
 
-/* Improve readability with better max-width for text */
-.gradio-container > div > div {
-  max-width: 65ch;
-}
-
-/* Interactive components styling */
-.gradio-container .gr-form {
-  margin: 2rem 0 !important;
-}
-
-.gradio-container button {
-  font-family: 'Inter', sans-serif !important;
-  font-weight: 500 !important;
-}
 """
 
 with gr.Blocks(css=CSS, fill_height=True, title="Interactive Blog — Transformers Feature Showcase") as demo: