-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathslide_16.html
More file actions
192 lines (182 loc) · 10.1 KB
/
slide_16.html
File metadata and controls
192 lines (182 loc) · 10.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算机视觉在智慧仓储中的应用 - 未来展望 (2/2)</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="navigation.css">
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
.slide {
width: 100vw;
height: 100vh;
background-color: #F5F5F5;
position: relative;
overflow: hidden;
font-family: 'Open Sans', 'Noto Sans SC', sans-serif;
display: flex;
flex-direction: column;
}
.title {
font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
font-weight: 700;
color: #1A1A1A;
}
.accent {
color: #FF6B00;
}
.background-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.07;
background-image: radial-gradient(circle, #FF6B00 1px, transparent 1px);
background-size: 30px 30px;
}
.header {
padding: 40px 80px 20px 80px;
}
.content {
flex: 1;
padding: 0 80px;
display: flex;
align-items: center;
justify-content: center; /* Center content horizontally */
}
/* Remove left/right column styles for this slide */
.case-study-content {
font-size: 1.5rem;
line-height: 1.6;
color: #4A5568;
max-width: 900px; /* Limit width for better readability */
width: 100%; /* Ensure it takes full width up to max-width */
}
/* Remove image placeholder styles as it's not needed */
.footer {
padding: 20px 80px 40px 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
</head>
<body>
<div class="slide">
<!-- Background pattern -->
<div class="background-pattern"></div>
<!-- Header -->
<div class="header">
<div class="flex items-center">
<i class="fas fa-lightbulb text-2xl accent mr-4"></i>
<h1 class="title text-4xl">挑战与对策 <span class="text-3xl text-gray-500">(2/2)</span> - 实时处理与系统集成挑战</h1>
</div>
<div class="h-1 w-32 bg-gradient-to-r from-transparent via-orange-500 to-transparent mt-2"></div>
</div>
<!-- Main content -->
<div class="content">
<div class="flex w-full h-full items-start gap-12">
<!-- Text Content Column -->
<div class="w-1/2">
<div class="case-study-content">
<h2 class="text-2xl font-bold mb-4">实时性要求与系统集成复杂性</h2>
<p class="mb-4">智慧仓储中的计算机视觉应用往往需要实时或近实时的处理能力，以支持快速决策和自动化操作。同时，需要与现有仓储管理系统（WMS）、设备控制系统等进行复杂集成。</p>
<ul class="list-disc list-inside mb-4">
<li>高并发数据流处理</li>
<li>低延迟图像分析与识别</li>
<li>多源数据融合与协同</li>
<li>异构系统接口兼容性</li>
<li>系统稳定性与可靠性保障</li>
</ul>
<p>实时处理对计算资源要求高，系统集成涉及多方协作和技术难题，是推广应用的关键瓶颈。</p>
</div>
</div>
<!-- Visual Element Placeholder Column -->
<div class="w-1/2 flex items-center justify-center bg-gray-200 rounded-lg p-8">
<svg viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
<style>
.challenge-text { font-family: 'Open Sans', 'Noto Sans SC', sans-serif; font-size: 10px; fill: #1A1A1A; text-anchor: middle; }
</style>
<defs>
<marker id="dataArrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#FF6B00"/>
</marker>
</defs>
<!-- Central Hub: Real-time Processing -->
<g transform="translate(250, 200)">
<circle cx="0" cy="0" r="40" fill="#1A1A1A"/>
<path d="M-10 -15 l20 15 l-20 15" fill="none" stroke="#FF6B00" stroke-width="4" stroke-linecap="round"/>
<circle cx="0" cy="0" r="30" fill="none" stroke="#FF6B00" stroke-width="2" stroke-dasharray="4,4">
<animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="5s" repeatCount="indefinite"/>
</circle>
<text y="55" class="challenge-text" font-weight="bold">实时处理</text>
</g>
<!-- High Concurrency (Top-Left) -->
<g transform="translate(100, 80)">
<path d="M0 20 L20 0 L40 20 M20 0 L20 40" fill="none" stroke="#FF6B00" stroke-width="2" marker-start="url(#dataArrow)" marker-end="url(#dataArrow)"/>
<path d="M-10 25 L20 10 L50 25 M20 10 L20 40" fill="none" stroke="#FF6B00" stroke-width="1.5" opacity="0.6" marker-start="url(#dataArrow)" marker-end="url(#dataArrow)"/>
<text y="55" class="challenge-text">高并发数据流</text>
</g>
<path d="M220 175 Q 170 140 120 105" stroke="#4A5568" stroke-width="1.5" fill="none"/>
<!-- Low Latency (Top-Right) -->
<g transform="translate(400, 80)">
<rect x="-20" y="10" width="40" height="20" rx="3" fill="#1A1A1A"/>
<path d="M-15 20 l5 -5 l15 0 l5 5" fill="none" stroke="#FF6B00" stroke-width="2"/>
<path d="M25 10 L25 30 M30 15 L20 25 M30 25 L20 15" stroke="#FF6B00" stroke-width="1.5"/>
<text y="55" class="challenge-text">低延迟识别</text>
</g>
<path d="M280 175 Q 330 140 380 105" stroke="#4A5568" stroke-width="1.5" fill="none"/>
<!-- Multi-source Fusion (Left-Center) -->
<g transform="translate(80, 200)">
<circle cx="-10" cy="-10" r="10" fill="#FF6B00" opacity="0.7"/>
<rect x="5" y="-20" width="15" height="15" fill="#1A1A1A" opacity="0.7"/>
<polygon points="-10,15 0,5 10,15" fill="#FF6B00" opacity="0.7"/>
<path d="M-5 -5 L20 0 M5 10 L20 0 M0 20 L20 0" stroke="#1A1A1A" stroke-width="1.5" marker-end="url(#dataArrow)"/>
<rect x="20" y="-10" width="10" height="20" fill="#1A1A1A"/>
<text y="40" class="challenge-text">多源融合</text>
</g>
<path d="M210 200 Q 150 200 100 200" stroke="#4A5568" stroke-width="1.5" fill="none"/>
<!-- Heterogeneous Integration (Right-Center) -->
<g transform="translate(420, 200)">
<rect x="-25" y="-10" width="20" height="20" rx="3" fill="#FF6B00"/>
<circle cx="15" cy="0" r="10" fill="#1A1A1A"/>
<path d="M-5 0 L5 0 M-2.5 -13 L-2.5 23 M15 -13 L15 23" fill="none" stroke="#4A5568" stroke-width="2"/>
<path d="M-2.5 5 L-10 0 L-2.5 -5 M15 5 L22 0 L15 -5" stroke="#4A5568" stroke-width="1.5" fill="none"/>
<text y="40" class="challenge-text">异构系统集成</text>
</g>
<path d="M290 200 Q 350 200 400 200" stroke="#4A5568" stroke-width="1.5" fill="none"/>
<!-- Stability (Bottom-Center) -->
<g transform="translate(250, 320)">
<path d="M-30 20 L30 20 L20 0 L-20 0 Z" fill="#1A1A1A"/>
<rect x="-15" y="-15" width="30" height="15" fill="#FF6B00"/>
<line x1="0" y1="0" x2="0" y2="-15" stroke="#1A1A1A" stroke-width="3"/>
<text y="40" class="challenge-text">稳定性保障</text>
</g>
<path d="M250 240 Q 250 280 250 300" stroke="#4A5568" stroke-width="1.5" fill="none"/>
</svg>
</div>
</div>
</div>
<!-- Footer with page number -->
<div class="footer">
<div class="flex items-center">
<div class="w-6 h-6 rounded-full bg-gray-300 flex items-center justify-center mr-2">
<i class="fas fa-microchip text-xs text-gray-600"></i>
</div>
<span class="text-sm text-gray-500">视觉融合新力量</span>
</div>
<div class="footer-placeholder text-sm text-gray-500">16 / 18</div>
</div>
</div>
<script src="navigation.js"></script>
</body>
</html>