Skip to content

Commit b167890

Browse files
TMHSDigitalTMHSDigital
committed
Add markdown debugging and rendering tests
- Introduced `debug_markdown.html` for testing various markdown rendering scenarios using marked.js. - Created `test_ui_improvements.py` to automate tests for markdown features in the DeepSeek-Wrapper UI. - Updated `web-ui-guide.md` to include details about the new non-flashing "Thinking…" indicator and its accessibility features. - Enhanced `style.css` with new styles for markdown content and improved transitions during streaming. - Modified `chat.html` to implement the new thinking indicator and ensure proper markdown rendering during content updates.
1 parent 5ff1a96 commit b167890

6 files changed

Lines changed: 779 additions & 106 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,7 @@ Then open [http://localhost:8000](http://localhost:8000) in your browser.
156156
- Timestamps, avatars, and chat bubbles
157157
- **Markdown rendering in assistant responses**
158158
- Loading indicator while waiting for LLM
159+
- **Non‑flashing "Thinking…" indicator with progress bar and optional expandable live details (accessibility-friendly)**
159160
- Error banner for API issues
160161
- **Tool configuration in settings panel with API key management**
161162

‎debug_markdown.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Markdown Debug Test</title>
5+
<script src="https://cdn.jsdelivr.net/npm/marked@12.0.0/lib/marked.umd.min.js"></script>
6+
</head>
7+
<body>
8+
<h1>Markdown Debug Test</h1>
9+
<div id="test-results"></div>
10+
11+
<script>
12+
function testMarkdownRendering() {
13+
const testCases = [
14+
"# Heading 1",
15+
"## Heading 2",
16+
"### Heading 3",
17+
"**Bold text**",
18+
"*Italic text*",
19+
"1. First item\n2. Second item",
20+
"- Bullet item\n- Another bullet",
21+
"Normal paragraph with **bold** and *italic* text."
22+
];
23+
24+
const resultsDiv = document.getElementById('test-results');
25+
let html = '<h2>Test Results:</h2>';
26+
27+
testCases.forEach((test, index) => {
28+
html += `<h3>Test ${index + 1}: "${test.replace(/\n/g, '\\n')}"</h3>`;
29+
30+
try {
31+
// Test with default marked.js
32+
const defaultResult = marked.parse(test);
33+
html += `<p><strong>Default marked.js:</strong> ${defaultResult}</p>`;
34+
35+
// Test with custom renderer
36+
const renderer = new marked.Renderer();
37+
38+
renderer.heading = function(text, level) {
39+
return `<h${level}>${text}</h${level}>\n`;
40+
};
41+
42+
renderer.list = function(token, body) {
43+
const ordered = token.ordered;
44+
const tag = ordered ? 'ol' : 'ul';
45+
return `<${tag}>\n${body}</${tag}>\n`;
46+
};
47+
48+
renderer.listitem = function(text) {
49+
return `<li>${text}</li>\n`;
50+
};
51+
52+
renderer.strong = function(text) {
53+
return `<strong>${text}</strong>`;
54+
};
55+
56+
renderer.em = function(text) {
57+
return `<em>${text}</em>`;
58+
};
59+
60+
marked.setOptions({ renderer });
61+
const customResult = marked.parse(test);
62+
html += `<p><strong>Custom renderer:</strong> ${customResult}</p>`;
63+
64+
} catch (error) {
65+
html += `<p><strong>Error:</strong> ${error.message}</p>`;
66+
}
67+
68+
html += '<hr>';
69+
});
70+
71+
resultsDiv.innerHTML = html;
72+
}
73+
74+
// Run test when page loads
75+
window.onload = testMarkdownRendering;
76+
</script>
77+
</body>
78+
</html>

‎docs/web-ui-guide.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,25 @@ Code snippets are displayed with syntax highlighting for better readability. You
3939
- Copy code blocks with a single click on the copy button
4040
- See the language identified in the top-right of each code block
4141

42+
### Streaming UX: Safe Thinking Indicator (New)
43+
44+
To reduce flashing and improve readability while the model is generating a response, the UI now uses a non-flashing "Thinking…" indicator:
45+
46+
- A subtle progress bar communicates activity without strobing effects
47+
- A "Show details" toggle lets you expand a collapsible panel to view the live, streaming content
48+
- When expanded, all animations inside the details area are disabled to avoid visual flicker
49+
- On completion, the details panel auto-expands once, the bar fills, and animations remain off
50+
51+
How to use:
52+
1. Send a message as usual
53+
2. While the model is thinking, click "Show details" to watch the response stream in real-time
54+
3. Click "Hide details" to collapse the panel and keep the conversation compact
55+
56+
Accessibility notes:
57+
- The previous blinking cursor and animated dots have been removed to minimize potential seizure risks
58+
- The progress bar uses a gentle slide animation that is disabled when the details area is expanded
59+
- The indicator and controls are keyboard- and screen-reader-friendly (progressbar, aria-expanded)
60+
4261
### Uploading Files
4362

4463
To provide context from a document:

0 commit comments

Comments
 (0)