Hugging Face's logo

Spaces:
kimhyunwoo
/
826-10
Running

App Files Community
kimhyunwoo commited on
Commit
8ea9d4c
Β·
verified Β·
1 Parent(s): 1f89bea

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +50 -39
index.html CHANGED
@@ -3,11 +3,11 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Device API Overview & Design Purpose</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
9
  <link rel="preconnect" href="https://fonts.googleapis.com">
10
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
12
  <style>
13
  body {
@@ -21,7 +21,7 @@
21
  .slide {
22
  width: 1280px;
23
  height: 720px;
24
- background: linear-gradient(135deg, #334155, #64748b);
25
  color: white;
26
  display: flex;
27
  flex-direction: column;
@@ -35,52 +35,63 @@
35
  <div class="slide">
36
  <!-- Slide Header -->
37
  <div class="text-center mb-8">
38
- <h1 class="text-5xl font-bold">Device API: ν•˜λ“œμ›¨μ–΄μ™€ μ„œλΉ„μŠ€μ˜ 연결고리</h1>
39
- <p class="text-2xl mt-3 text-slate-300">μ†Œν”„νŠΈμ›¨μ–΄μ™€ ν•˜λ“œμ›¨μ–΄μ˜ μ™„λ²½ν•œ 뢄리λ₯Ό μœ„ν•œ 섀계</p>
40
  </div>
41
 
42
  <!-- Main Content Grid -->
43
- <div class="flex-grow grid grid-cols-2 gap-12">
 
44
  <!-- Left Column: Details -->
45
- <div class="flex flex-col justify-center space-y-6">
46
- <div>
47
- <h3 class="text-3xl font-semibold mb-3 text-slate-200"><i class="fas fa-plug mr-3"></i>Device API μ •μ˜</h3>
48
- <p class="text-xl bg-black/20 p-4 rounded-lg">물리적인 ν•˜λ“œμ›¨μ–΄ μž₯치(μ„Όμ„œ, 앑좔에이터 λ“±)의 λ™μž‘μ„ ν‘œμ€€ν™”ν•˜κ³ , μƒμœ„μ˜ Atomic Service API와 μ—°κ²°ν•˜λŠ” <strong class="font-bold text-white">ν•˜λ“œμ›¨μ–΄ 좔상화 μΈν„°νŽ˜μ΄μŠ€</strong></p>
 
 
 
 
49
  </div>
50
- <div>
51
- <h3 class="text-3xl font-semibold mb-3 text-slate-200"><i class="fas fa-cogs mr-3"></i>섀계 λͺ©μ  및 μ—­ν• </h3>
52
- <ul class="space-y-3 pl-5 list-disc list-inside text-xl">
53
- <li><strong class="font-bold">ν•˜λ“œμ›¨μ–΄μ™€ μ„œλΉ„μŠ€ 둜직의 뢄리:</strong> ν•˜λ“œμ›¨μ–΄ ꡐ체 μ‹œ μƒμœ„ μ„œλΉ„μŠ€ μ½”λ“œ μˆ˜μ • λΆˆν•„μš”</li>
54
- <li><strong class="font-bold">이기쒅 μž₯치 톡합:</strong> λ‹€μ–‘ν•œ μ œμ‘°μ‚¬μ˜ ECU 및 μž₯μΉ˜μ— λŒ€ν•œ λ‹¨μΌν™”λœ μ œμ–΄ μΈν„°νŽ˜μ΄μŠ€ 제곡</li>
55
- <li><strong class="font-bold">μž¬μ‚¬μš©μ„± 및 ν”Œλž«νΌ 독립성 확보:</strong> νŠΉμ • ν•˜λ“œμ›¨μ–΄μ— μ’…μ†λ˜μ§€ μ•ŠλŠ” μ†Œν”„νŠΈμ›¨μ–΄ 개발 κ°€λŠ₯</li>
56
- <li><strong class="font-bold">κΈ°λŠ₯ 맀핑:</strong> Atomic API의 논리적 κΈ°λŠ₯ λͺ…령을 μ‹€μ œ ν•˜λ“œμ›¨μ–΄ ꡬ동 μ‹ ν˜Έλ‘œ λ³€ν™˜ 및 맀핑</li>
57
  </ul>
58
  </div>
59
  </div>
60
 
61
- <!-- Right Column: Architecture Diagram -->
62
- <div class="flex flex-col items-center justify-center bg-black/20 p-8 rounded-xl backdrop-blur-sm border border-white/20">
63
- <h3 class="text-3xl font-bold mb-6">μ•„ν‚€ν…μ²˜ λ‚΄ μ—­ν• </h3>
64
- <div class="w-full flex flex-col items-center text-center space-y-4">
65
- <!-- Service Layer -->
66
- <div class="w-full bg-blue-500/80 py-4 px-6 rounded-lg shadow-lg">
67
- <p class="text-2xl font-bold">Atomic Service API</p>
68
- <p class="text-lg font-light">(μ°¨λŸ‰ κΈ°λŠ₯ μ •μ˜)</p>
69
- </div>
70
- <i class="fas fa-arrow-down text-4xl text-slate-300 my-2"></i>
71
- <!-- Device API Layer -->
72
- <div class="w-full bg-emerald-600/90 py-4 px-6 rounded-lg shadow-lg border-2 border-emerald-300">
73
- <p class="text-2xl font-bold">Device API</p>
74
- <p class="text-lg font-light">(ν•˜λ“œμ›¨μ–΄ 좔상화 및 맀핑)</p>
75
- </div>
76
- <i class="fas fa-arrow-down text-4xl text-slate-300 my-2"></i>
77
- <!-- Hardware Layer -->
78
- <div class="w-full grid grid-cols-3 gap-4">
79
- <div class="bg-gray-700 py-4 rounded-lg"><i class="fas fa-camera-retro text-2xl"></i><p>μ„Όμ„œ</p></div>
80
- <div class="bg-gray-700 py-4 rounded-lg"><i class="fas fa-robot text-2xl"></i><p>앑좔에이터</p></div>
81
- <div class="bg-gray-700 py-4 rounded-lg"><i class="fas fa-microchip text-2xl"></i><p>ECU</p></div>
82
- </div>
83
  </div>
 
 
 
 
 
 
 
84
  </div>
85
  </div>
86
  </div>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SDV Layered Architecture</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
9
  <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic" com" crossorigin>
11
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
12
  <style>
13
  body {
 
21
  .slide {
22
  width: 1280px;
23
  height: 720px;
24
+ background: linear-gradient(135deg, #0f172a, #334155);
25
  color: white;
26
  display: flex;
27
  flex-direction: column;
 
35
  <div class="slide">
36
  <!-- Slide Header -->
37
  <div class="text-center mb-8">
38
+ <h1 class="text-5xl font-bold">SDV μ†Œν”„νŠΈμ›¨μ–΄ 계측 ꡬ쑰</h1>
39
+ <p class="text-2xl mt-3 text-slate-300">좔상화λ₯Ό ν†΅ν•œ μœ μ—°ν•˜κ³  ν™•μž₯ κ°€λŠ₯ν•œ μ•„ν‚€ν…μ²˜</p>
40
  </div>
41
 
42
  <!-- Main Content Grid -->
43
+ <div class="flex-grow grid grid-cols-5 gap-6 items-center">
44
+
45
  <!-- Left Column: Details -->
46
+ <div class="col-span-2 flex flex-col justify-center h-full">
47
+ <div class="bg-black/20 p-6 rounded-lg">
48
+ <h3 class="text-2xl font-semibold mb-3 text-slate-200"><i class="fas fa-layer-group mr-3"></i>ꡬ성 계측</h3>
49
+ <ul class="space-y-2 text-lg">
50
+ <li class="font-bold text-blue-300">Service Layer (μ• ν”Œλ¦¬μΌ€μ΄μ…˜)</li>
51
+ <li class="font-bold text-emerald-300">Abstract Device API (ν‘œμ€€ μΈν„°νŽ˜μ΄μŠ€)</li>
52
+ <li class="font-bold text-gray-400">ECU / Sensor / Actuator (물리 μž₯치)</li>
53
+ </ul>
54
  </div>
55
+ <div class="bg-black/20 p-6 rounded-lg mt-6">
56
+ <h3 class="text-2xl font-semibold mb-3 text-slate-200"><i class="fas fa-project-diagram mr-3"></i>핡심 νŠΉμ§•</h3>
57
+ <ul class="space-y-3 pl-5 list-disc list-inside text-lg">
58
+ <li>각 ECU의 고유 κΈ°λŠ₯을 ν‘œμ€€ν™”λœ <strong class="text-white">좔상 객체</strong>둜 μ •μ˜</li>
59
+ <li>Service APIκ°€ Abstract Deviceλ₯Ό ν˜ΈμΆœν•˜μ—¬ ν•˜λ“œμ›¨μ–΄λ₯Ό κ°„μ ‘ μ œμ–΄</li>
60
+ <li>ν•˜λ“œμ›¨μ–΄μ˜ λ³΅μž‘μ„±μ„ 숨기고 μ†Œν”„νŠΈμ›¨μ–΄ κ°œλ°œμ„ λ‹¨μˆœν™”</li>
 
61
  </ul>
62
  </div>
63
  </div>
64
 
65
+ <!-- Right Column: Visualization -->
66
+ <div class="col-span-3 flex flex-col items-center justify-center bg-black/20 p-8 rounded-xl h-full">
67
+ <h3 class="text-3xl font-bold mb-6">데이터 및 μ œμ–΄ 흐름</h3>
68
+
69
+ <!-- Service Layer -->
70
+ <div class="w-full bg-blue-600/80 py-4 px-6 rounded-lg shadow-lg text-center">
71
+ <p class="text-2xl font-bold">Service Layer</p>
72
+ <p class="text-md font-light">μƒμœ„ μ• ν”Œλ¦¬μΌ€μ΄μ…˜ / μ„œλΉ„μŠ€ 둜직</p>
73
+ </div>
74
+ <div class="text-center my-3">
75
+ <p class="text-sm text-slate-400">"창문을 50% μ—΄μ–΄μ€˜"</p>
76
+ <i class="fas fa-arrow-down text-4xl text-slate-300 mt-1"></i>
77
+ </div>
78
+
79
+ <!-- Abstract Device API -->
80
+ <div class="w-full bg-emerald-600/80 py-4 px-6 rounded-lg shadow-lg text-center">
81
+ <p class="text-2xl font-bold">Abstract Device API</p>
82
+ <p class="text-md font-light">ν‘œμ€€ν™”λœ μž₯치 μ œμ–΄ μΈν„°νŽ˜μ΄μŠ€</p>
83
+ </div>
84
+ <div class="text-center my-3">
85
+ <p class="text-sm text-slate-400">`setOper(direction: UP, duty: 50%)`</p>
86
+ <i class="fas fa-arrow-down text-4xl text-slate-300 mt-1"></i>
87
  </div>
88
+
89
+ <!-- Hardware Layer -->
90
+ <div class="w-full bg-gray-700/80 py-4 px-6 rounded-lg shadow-lg text-center">
91
+ <p class="text-2xl font-bold">ECU / Sensor / Actuator</p>
92
+ <p class="text-md font-light">물리적 ν•˜λ“œμ›¨μ–΄ μž₯치</p>
93
+ </div>
94
+
95
  </div>
96
  </div>
97
  </div>