<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>7段数码管数字识别神经网络--分类任务</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36D399',
neutral: '#3D4451',
'neutral-light': '#F3F4F6',
error: '#F87171',
'digit-on': '#FF3A2E',
'digit-off': '#374151'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.segment {
transition: all 0.3s ease;
}
.digit-display {
perspective: 111px;
}
.digit-container {
transform-style: preserve-3d;
transition: transform 0.5s;
}
.chart-container {
position: relative;
height: 250px;
width: 100%;
}
.btn-hover {
@apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}
.checkbox-lg {
width: 24px;
height: 24px;
}
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-5xl">
<header class="text-center mb-10">
<h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-neutral mb-4">7段数码管数字识别神经网络--分类任务</h1>
<p class="text-gray-600 max-w-2xl mx-auto">使用神经网络识别7段数码管显示的数字，通过调整各段的开关状态，观察神经网络的识别结果，抖音号码938129762索要课件资料。</p>
</header>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- 左侧：数码管控制和显示 -->
<div class="bg-white rounded-xl shadow-md p-6 transform transition-all duration-300 hover:shadow-lg">
<h2 class="text-xl font-semibold text-neutral mb-4 flex items-center">
<i class="fa fa-calculator mr-2 text-primary"></i>7段数码管控制器
</h2>
<div class="flex flex-col items-center">
<!-- 数码管显示 -->
<div class="digit-display bg-gray-100 p-8 rounded-lg mb-6 w-full max-w-xs">
<div class="digit-container flex justify-center">
<svg width="120" height="200" viewBox="0 0 120 200" class="bg-gray-900 rounded-lg p-6">
<defs>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="3" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<!-- 线段A (顶部) -->
<path d="M25,30 L95,30 L90,40 L30,40 Z" id="segment-a" class="segment" fill="var(--digit-off, #374151)" />
<!-- 线段B (右上) -->
<path d="M100,40 L110,50 L110,120 L100,130 Z" id="segment-b" class="segment" fill="var(--digit-off, #374151)" />
<!-- 线段C (右下) -->
<path d="M100,130 L110,140 L110,210 L100,220 Z" id="segment-c" class="segment" fill="var(--digit-off, #374151)" />
<!-- 线段D (底部) -->
<path d="M25,220 L95,220 L90,230 L30,230 Z" id="segment-d" class="segment" fill="var(--digit-off, #374151)" />
<!-- 线段E (左下) -->
<path d="M10,130 L20,140 L20,210 L10,220 Z" id="segment-e" class="segment" fill="var(--digit-off, #374151)" />
<!-- 线段F (左上) -->
<path d="M10,40 L20,50 L20,120 L10,130 Z" id="segment-f" class="segment" fill="var(--digit-off, #374151)" />
<!-- 线段G (中间) -->
<path d="M25,120 L95,120 L90,130 L30,130 Z" id="segment-g" class="segment" fill="var(--digit-off, #374151)" />
<!-- 新增文字 -->
</svg>
</div>
<!-- 线段控制开关 -->
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4 w-full mt-4">
<div class="flex items-center justify-center">
<label for="seg-a" class="mr-2 font-medium text-neutral">A(顶)</label>
<input type="checkbox" id="seg-a" class="checkbox-lg accent-primary" onchange="updateDisplay()">
</div>
<div class="flex items-center justify-center">
<label for="seg-b" class="mr-2 font-medium text-neutral">B(右上)</label>
<input type="checkbox" id="seg-b" class="checkbox-lg accent-primary" onchange="updateDisplay()">
</div>
<div class="flex items-center justify-center">
<label for="seg-c" class="mr-2 font-medium text-neutral">C(右下)</label>
<input type="checkbox" id="seg-c" class="checkbox-lg accent-primary" onchange="updateDisplay()">
</div>
最低0.47元/天 解锁文章
扫一扫
评论 3
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
