Skip to content

Improve webpage styling #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
JavaZeroo wants to merge 4 commits into from
Closed

Improve webpage styling #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cb5bfad
Enhance UI styling
JavaZeroo Jul 25, 2025
3b7f74b
Fix layout width and refine chart colors
JavaZeroo Jul 25, 2025
9fd4f40
fix: ensure layout spans full screen
JavaZeroo Jul 25, 2025
c822e0f
Refine chart line colors and style
JavaZeroo Jul 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Noto+Sans+SC:wght@400;700&display=swap"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="大模型日志分析工具 - 分析和可视化机器学习训练日志中的损失函数和梯度范数数据" />
<meta name="keywords" content="机器学习,日志分析,数据可视化,损失函数,梯度范数" />
Expand Down
28 changes: 21 additions & 7 deletions src/components/ChartContainer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,17 @@ export default function ChartContainer({
onMaxStepChange(maxStep);
}, [parsedData, onMaxStepChange]);

const colors = ['#ef4444', '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#f97316'];
// Color-blind friendly palette for chart lines
const colors = [
'#377eb8',
'#e41a1c',
'#4daf4a',
'#984ea3',
'#ff7f00',
'#ffff33',
'#a65628',
'#f781bf'
];
const createChartData = dataArray => ({
datasets: dataArray.map((item, index) => {
const color = colors[index % colors.length];
Expand All @@ -175,9 +185,11 @@ export default function ChartContainer({
backgroundColor: `${color}33`,
borderWidth: 2,
fill: false,
tension: 0,
tension: 0.3,
cubicInterpolationMode: 'monotone',
borderDash: index % 2 ? [4, 3] : [],
pointRadius: 0,
pointHoverRadius: 4,
pointHoverRadius: 5,
pointBackgroundColor: color,
pointBorderColor: color,
pointBorderWidth: 1,
Expand Down Expand Up @@ -371,9 +383,10 @@ export default function ChartContainer({
backgroundColor: '#dc2626',
borderWidth: 2,
fill: false,
tension: 0,
tension: 0.3,
cubicInterpolationMode: 'monotone',
pointRadius: 0,
pointHoverRadius: 4,
pointHoverRadius: 5,
pointBackgroundColor: '#dc2626',
pointBorderColor: '#dc2626',
pointBorderWidth: 1,
Expand All @@ -394,9 +407,10 @@ export default function ChartContainer({
borderWidth: 2,
borderDash: [5, 5],
fill: false,
tension: 0,
tension: 0.3,
cubicInterpolationMode: 'monotone',
pointRadius: 0,
pointHoverRadius: 4,
pointHoverRadius: 5,
pointBackgroundColor: '#10b981',
pointBorderColor: '#10b981',
pointBorderWidth: 1,
Expand Down
10 changes: 10 additions & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,16 @@
border: 0;
}

html,
body,
#root {
@apply w-full min-h-screen;
}

body {
@apply font-sans bg-gray-50 text-gray-800 antialiased;
}

/* Focus styles for better keyboard navigation */
:focus {
outline: 2px solid #3b82f6;
Expand Down
12 changes: 11 additions & 1 deletion tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,17 @@ export default {
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
extend: {
fontFamily: {
sans: [
'Inter',
'Noto Sans SC',
'ui-sans-serif',
'system-ui',
'sans-serif'
]
}
},
},
plugins: [],
}