Spaces:

Luigi
/

VoxSum

Sleeping

Luigi commited on Sep 26, 2025

Commit

b498cb0

1 Parent(s): ae778ed

feat: add Markdown rendering support for summaries

- Add Marked.js library for proper Markdown-to-HTML conversion
- Replace manual regex-based Markdown parser with robust library
- Update CSS styling for rendered HTML elements (headers, lists, code blocks)
- Configure Marked.js with secure options (breaks, GFM, no header IDs)
- Create test file demonstrating Markdown rendering capabilities

The summary output now properly renders Markdown formatting including:
- Headers (# ## ###)
- Bold and italic text
- Lists (ordered/unordered)
- Code blocks and inline code
- Links
- Proper HTML structure with styling

Files changed (4) hide show

frontend/app.js +15 -1
frontend/index.html +2 -1
frontend/styles.css +64 -1
test_markdown.html +77 -0

frontend/app.js CHANGED Viewed

@@ -65,6 +65,20 @@ const SUMMARY_FORMATS = ['Markdown', 'Plain Text'];
 let activeTab = 'podcast-tab';
 let activeUtteranceIndex = -1;
 function setStatus(message, tone = 'info') {
   elements.statusText.textContent = message;
   elements.statusText.dataset.tone = tone;
@@ -508,7 +522,7 @@ async function handleSummaryGeneration() {
         if (!line.trim()) continue;
         const event = JSON.parse(line);
         if (event.type === 'partial' && event.content) {
-          elements.summaryOutput.textContent = event.content;
         }
       }
     }

 let activeTab = 'podcast-tab';
 let activeUtteranceIndex = -1;
+// Configuration de Marked pour un rendu sécurisé
+marked.setOptions({
+  breaks: true,        // Convertir les sauts de ligne simples en <br>
+  gfm: true,          // GitHub Flavored Markdown
+  headerIds: false,   // Pas d'IDs automatiques sur les headers
+  mangle: false,      // Pas de mangling des emails
+});
+// Fonction simple pour convertir Markdown en HTML
+function renderMarkdown(markdown) {
+  if (!markdown) return '';
+  return marked.parse(markdown);
+}
 function setStatus(message, tone = 'info') {
   elements.statusText.textContent = message;
   elements.statusText.dataset.tone = tone;
         if (!line.trim()) continue;
         const event = JSON.parse(line);
         if (event.type === 'partial' && event.content) {
+          elements.summaryOutput.innerHTML = renderMarkdown(event.content);
         }
       }
     }

frontend/index.html CHANGED Viewed

@@ -4,7 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>VoxSum Studio</title>
-  <link rel="stylesheet" href="/styles.css" />
   </head>
   <body>
     <header class="app-header">

     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>VoxSum Studio</title>
+    <link rel="stylesheet" href="/styles.css" />
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   </head>
   <body>
     <header class="app-header">

frontend/styles.css CHANGED Viewed

@@ -406,7 +406,70 @@ button:hover {
   border-radius: 12px;
   padding: 1rem;
   border: 1px solid rgba(148, 163, 184, 0.15);
-  white-space: pre-wrap;
 }
 .export-grid {

   border-radius: 12px;
   padding: 1rem;
   border: 1px solid rgba(148, 163, 184, 0.15);
+  line-height: 1.6;
+}
+.summary h1, .summary h2, .summary h3 {
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+  color: #e2e8f0;
+}
+.summary h1 { font-size: 1.5rem; }
+.summary h2 { font-size: 1.25rem; }
+.summary h3 { font-size: 1.1rem; }
+.summary p {
+  margin-bottom: 1rem;
+}
+.summary strong {
+  font-weight: 600;
+  color: #f1f5f9;
+}
+.summary em {
+  font-style: italic;
+  color: #cbd5e1;
+}
+.summary code {
+  background: rgba(100, 116, 139, 0.3);
+  padding: 0.125rem 0.25rem;
+  border-radius: 4px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.9em;
+}
+.summary pre {
+  background: rgba(15, 23, 42, 0.8);
+  padding: 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+.summary pre code {
+  background: none;
+  padding: 0;
+}
+.summary ul, .summary ol {
+  margin: 1rem 0;
+  padding-left: 1.5rem;
+}
+.summary li {
+  margin-bottom: 0.25rem;
+}
+.summary a {
+  color: #60a5fa;
+  text-decoration: underline;
+}
+.summary a:hover {
+  color: #93c5fd;
 }
 .export-grid {

test_markdown.html ADDED Viewed

	@@ -0,0 +1,77 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Test Markdown Rendering with Marked.js</title>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <style>
+        .summary {
+            min-height: 120px;
+            background: rgba(15, 23, 42, 0.5);
+            border-radius: 12px;
+            padding: 1rem;
+            border: 1px solid rgba(148, 163, 184, 0.15);
+            line-height: 1.6;
+            color: white;
+        }
+        .summary h1, .summary h2, .summary h3 {
+            margin-top: 1.5rem;
+            margin-bottom: 0.5rem;
+            color: #e2e8f0;
+        }
+        .summary strong { font-weight: 600; color: #f1f5f9; }
+        .summary em { font-style: italic; color: #cbd5e1; }
+        .summary code {
+            background: rgba(100, 116, 139, 0.3);
+            padding: 0.125rem 0.25rem;
+            border-radius: 4px;
+        }
+        .summary pre {
+            background: rgba(15, 23, 42, 0.8);
+            padding: 1rem;
+            border-radius: 8px;
+            overflow-x: auto;
+        }
+        .summary ul, .summary ol { margin: 1rem 0; padding-left: 1.5rem; }
+        .summary a { color: #60a5fa; text-decoration: underline; }
+    </style>
+</head>
+<body style="background: #0f172a; padding: 20px;">
+    <h1 style="color: white;">Test du rendu Markdown avec Marked.js</h1>
+    <div id="summary-output" class="summary"></div>
+    <script>
+        // Configuration de Marked
+        marked.setOptions({
+            breaks: true,
+            gfm: true,
+            headerIds: false,
+            mangle: false,
+        });
+        // Test avec du contenu Markdown
+        const testMarkdown = `# Résumé du Podcast
+Voici un **résumé important** avec du *texte en italique*.
+## Points clés
+- Premier point important
+- **Deuxième point** en gras
+- \`Code inline\` et blocs de code:
+\`\`\`python
+def hello():
+    print("Hello World!")
+\`\`\`
+## Conclusion
+Le podcast traite de sujets intéressants. [Lien vers plus d'infos](https://example.com)`;
+        document.getElementById('summary-output').innerHTML = marked.parse(testMarkdown);
+    </script>
+</body>
+</html>