Skip to content

Commit 4951066

Browse files
akashzcoderakashzcoder
committed
blog update
1 parent 8b65950 commit 4951066

File tree

1 file changed

+168
-152
lines changed

1 file changed

+168
-152
lines changed

‎blogs/machine_learning.html

Lines changed: 168 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,155 +1,171 @@
11
<!DOCTYPE html>
22
<html>
3-
<title>W3.CSS Template</title>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
7-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
8-
<style>
9-
body, html {
10-
height: 100%;
11-
font-family: "Inconsolata", sans-serif;
12-
}
13-
14-
.bgimg {
15-
background-position: center;
16-
background-size: cover;
17-
background-image: url("./img/ml.jpg");
18-
min-height: 75%;
19-
}
20-
21-
.menu {
22-
display: none;
23-
}
24-
</style>
25-
<body>
26-
27-
<!-- Links (sit on top) -->
28-
<div class="w3-top">
29-
<div class="w3-row w3-padding w3-black">
30-
<div class="w3-col s3">
31-
<a href="https://akashzcoder.github.io" class="w3-button w3-block w3-black">HOME</a>
32-
</div>
33-
<div class="w3-col s3">
34-
<a href="https://akashzcoder.github.io/#about" class="w3-button w3-block w3-black">ABOUT</a>
35-
</div>
36-
<div class="w3-col s3">
37-
<a href="https://akashzcoder.github.io/#resume" class="w3-button w3-block w3-black">RESUME</a>
38-
</div>
39-
<div class="w3-col s3">
40-
<a href="https://akashzcoder.github.io/#academicWriting" class="w3-button w3-block w3-black">BLOGS</a>
41-
</div>
42-
</div>
43-
</div>
44-
45-
<!-- Header with image -->
46-
<header class="bgimg w3-display-container w3-grayscale-min" id="home">
47-
<div class="w3-display-bottomleft w3-center w3-padding-large w3-hide-small">
48-
<span class="w3-tag">Machine Learning Pipeline</span>
49-
</div>
50-
<div class="w3-display-middle w3-center">
51-
<span class="w3-text-white" style="font-size:90px"><br>Machine Learning Pipeline</span>
52-
</div>
53-
</header>
54-
55-
<!-- Add a background color and large text to the whole page -->
56-
<div class="w3-grayscale w3-large">
57-
58-
<!-- About Container -->
59-
<div class="w3-container" id="about">
60-
<div class="w3-content" style="max-width:1000px">
61-
<h5 class="w3-center w3-padding-64"><span class="w3-tag w3-wide">ARCHITECTURE OF MACHINE LEARNING PIPELINE</span></h5>
62-
<p>The Cafe was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
63-
<p>In addition to our full espresso and brew bar menu, we serve fresh made-to-order breakfast and lunch sandwiches, as well as a selection of sides and salads and other good stuff.</p>
64-
<div class="w3-panel w3-leftbar w3-light-grey">
65-
<p><i>"Use products from nature for what it's worth - but never too early, nor too late." Fresh is the new sweet.</i></p>
66-
<p>Chef, Coffeeist and Owner: Liam Brown</p>
67-
</div>
68-
<img src="/img/ml.jpg" style="width:100%;max-width:1000px" class="w3-margin-top">
69-
<p><strong>Opening hours:</strong> everyday from 6am to 5pm.</p>
70-
<p><strong>Address:</strong> 15 Adr street, 5015, NY</p>
71-
</div>
72-
</div>
73-
74-
<!-- Menu Container -->
75-
<div class="w3-container" id="menu">
76-
<div class="w3-content" style="max-width:700px">
77-
78-
<h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide">FLASH CARDS</span></h5>
79-
80-
<div class="w3-row w3-center w3-card w3-padding">
81-
<a href="javascript:void(0)" onclick="openMenu(event, 'Eat');" id="myLink">
82-
<div class="w3-col s6 tablink">Questions</div>
83-
</a>
84-
<a href="javascript:void(0)" onclick="openMenu(event, 'Drinks');">
85-
<div class="w3-col s6 tablink">Answers</div>
86-
</a>
87-
</div>
88-
89-
<div id="Eat" class="w3-container menu w3-padding-48 w3-card">
90-
<h5>Bread Basket</h5>
91-
<p class="w3-text-grey">Assortment of fresh baked fruit breads and muffins 5.50</p><br>
92-
93-
<h5>Honey Almond Granola with Fruits</h5>
94-
<p class="w3-text-grey">Natural cereal of honey toasted oats, raisins, almonds and dates 7.00</p><br>
95-
96-
<h5>Belgian Waffle</h5>
97-
<p class="w3-text-grey">Vanilla flavored batter with malted flour 7.50</p><br>
98-
99-
<h5>Scrambled eggs</h5>
100-
<p class="w3-text-grey">Scrambled eggs, roasted red pepper and garlic, with green onions 7.50</p><br>
101-
102-
<h5>Blueberry Pancakes</h5>
103-
<p class="w3-text-grey">With syrup, butter and lots of berries 8.50</p>
104-
</div>
105-
106-
<div id="Drinks" class="w3-container menu w3-padding-48 w3-card">
107-
<h5>Coffee</h5>
108-
<p class="w3-text-grey">Regular coffee 2.50</p><br>
109-
110-
<h5>Chocolato</h5>
111-
<p class="w3-text-grey">Chocolate espresso with milk 4.50</p><br>
112-
113-
<h5>Corretto</h5>
114-
<p class="w3-text-grey">Whiskey and coffee 5.00</p><br>
115-
116-
<h5>Iced tea</h5>
117-
<p class="w3-text-grey">Hot tea, except not hot 3.00</p><br>
118-
119-
<h5>Soda</h5>
120-
<p class="w3-text-grey">Coke, Sprite, Fanta, etc. 2.50</p>
121-
</div>
122-
</div>
123-
</div>
124-
125-
<!-- End page content -->
126-
</div>
127-
128-
<!-- Footer -->
129-
<footer class="w3-center w3-light-grey w3-padding-48 w3-large">
130-
<p>
131-
Copyright &#x000A9;&nbsp;2020 &#x000B7; Akash Singh
3+
<title>Akash Singh</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
7+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
8+
<style>
9+
body, html {
10+
height: 100%;
11+
font-family: "Inconsolata", sans-serif;
12+
}
13+
.bgimg {
14+
background-position: center;
15+
background-size: cover;
16+
background-image: url("./img/ml.jpg");
17+
min-height: 75%;
18+
}
19+
.menu {
20+
display: none;
21+
}
22+
</style>
23+
<body>
24+
<!-- Links (sit on top) -->
25+
<div class="w3-top">
26+
<div class="w3-row w3-padding w3-black">
27+
<div class="w3-col s3">
28+
<a href="https://akashzcoder.github.io" class="w3-button w3-block w3-black">HOME</a>
29+
</div>
30+
<div class="w3-col s3">
31+
<a href="https://akashzcoder.github.io/#about" class="w3-button w3-block w3-black">ABOUT</a>
32+
</div>
33+
<div class="w3-col s3">
34+
<a href="https://akashzcoder.github.io/#resume" class="w3-button w3-block w3-black">RESUME</a>
35+
</div>
36+
<div class="w3-col s3">
37+
<a href="https://akashzcoder.github.io/#academicWriting" class="w3-button w3-block w3-black">BLOGS</a>
38+
</div>
39+
</div>
40+
</div>
41+
<!-- Header with image -->
42+
<header class="bgimg w3-display-container w3-grayscale-min" id="home">
43+
<div class="w3-display-bottomleft w3-center w3-padding-large w3-hide-small">
44+
<span class="w3-tag">Machine Learning Pipeline</span>
45+
</div>
46+
<div class="w3-display-middle w3-center">
47+
<span class="w3-text-white" style="font-size:90px"><br>Machine Learning Pipeline</span>
48+
</div>
49+
</header>
50+
<!-- Add a background color and large text to the whole page -->
51+
<div class="w3-grayscale w3-large">
52+
<!-- About Container -->
53+
<div class="w3-container" id="about">
54+
<p class="w3-content" style="max-width:800px">
55+
<h5 class="w3-center w3-padding-64"><span class="w3-tag w3-wide">ARCHITECTURE OF MACHINE LEARNING PIPELINE</span></h5>
56+
<p>Writing a working machine learning code does not guarantee a production ready system. This blog is about designing a machine learning prototype through the engineering road map. What you need is a team of professional Software Engineers by your side to take your (disposable) proof of concept and turn it into a performant, reliable, loosely coupled and scalable system!</p>
57+
<p>Given below is the roster of objectives that we need to build a production ready system:
58+
<ul style="list-style-type:circle;">
59+
<li>Reduces latency;</li>
60+
<li>Is integrated but loosely coupled with the other parts of the system, e.g. data stores, reporting, graphical user interface;</li>
61+
<li>Can scale both horizontally and vertically;</li>
62+
<li>Is message driven i.e. the system communicates via asynchronous, non-blocking message passing;</li>
63+
<li>Provides efficient computation with regards to workload management;</li>
64+
<li>Is fault-tolerant and self healing i.e. breakdown management;</li>
65+
<li>Supports batch and real-time processing.</li>
66+
</ul>
13267
</p>
133-
</footer>
134-
135-
<script>
136-
// Tabbed Menu
137-
function openMenu(evt, menuName) {
138-
var i, x, tablinks;
139-
x = document.getElementsByClassName("menu");
140-
for (i = 0; i < x.length; i++) {
141-
x[i].style.display = "none";
142-
}
143-
tablinks = document.getElementsByClassName("tablink");
144-
for (i = 0; i < x.length; i++) {
145-
tablinks[i].className = tablinks[i].className.replace(" w3-dark-grey", "");
146-
}
147-
document.getElementById(menuName).style.display = "block";
148-
evt.currentTarget.firstElementChild.className += " w3-dark-grey";
149-
}
150-
document.getElementById("myLink").click();
151-
</script>
152-
153-
</body>
154-
</html>
155-
68+
<p>I will start-off by writing some of the most commonly used design architectures:
69+
<ul>
70+
<li>
71+
<b>Reactive Style:</b>
72+
<p>Properties of a reactive system: <br>
73+
<ul>
74+
<li><i>Responsive:</i> A responsive system provides rapid and consistent response times, establishing reliable upper bounds so they deliver reliable quality product.</li>
75+
<li><i>Resilient:</i> The system stays responsive in case of failure. Resilience is achieved by replication, containment, isolation and delegation. Failures are contained within each component, isolating components from each other and thereby ensuring that parts of the system can fail and recover without compromising the system as a whole. Recovery of each component is delegated to another (external) component and high-availability is ensured by replication where necessary. The client of a component is not burdened with handling its failures.</li>
76+
<li><i>Elastic:</i> The system stays responsive under varying workload. </li>
77+
<li><i>Message Driven:</i> Reactive Systems rely on asynchronous message-passing to establish a boundary between components that ensures loose coupling, isolation and location transparency. This boundary also provides the means to delegate failures as messages. Employing explicit message-passing enables load management, elasticity, and flow control by shaping and monitoring the message queues in the system and applying back-pressure when necessary. Location transparent messaging as a means of communication makes it possible for the management of failure to work with the same constructs and semantics across a cluster or within a single host. Non-blocking communication allows recipients to only consume resources while active, leading to less system overhead.</li>
78+
</ul>
79+
</p>
80+
</li>
81+
<li>
82+
<b>Service Oriented Architecture (SOA):</b>
83+
<p>SOA centres around the concept of decomposing business problems into services. The services share information via the network and they also share code (i.e. common components) to maintain consistency and reduce development effort. <br>
84+
</li>
85+
<li>
86+
<b>Streaming Architecture: </b>
87+
</li>
88+
</ul>
89+
</p>
90+
<div class="w3-panel w3-leftbar w3-light-grey">
91+
<p><i>"Use products from nature for what it's worth - but never too early, nor too late." Fresh is the new sweet.</i></p>
92+
<p>Chef, Coffeeist and Owner: Liam Brown</p>
93+
</div>
94+
<img src="/img/ml.jpg" style="width:100%;max-width:1000px" class="w3-margin-top">
95+
<p><strong>Opening hours:</strong> everyday from 6am to 5pm.</p>
96+
<p><strong>Address:</strong> 15 Adr street, 5015, NY</p>
97+
</div>
98+
</div>
99+
<!-- Menu Container -->
100+
<div class="w3-container" id="menu">
101+
<div class="w3-content" style="max-width:700px">
102+
<h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide">FLASH CARDS</span></h5>
103+
<div class="w3-row w3-center w3-card w3-padding">
104+
<a href="javascript:void(0)" onclick="openMenu(event, 'Eat');" id="myLink">
105+
<div class="w3-col s6 tablink">Questions</div>
106+
</a>
107+
<a href="javascript:void(0)" onclick="openMenu(event, 'Drinks');">
108+
<div class="w3-col s6 tablink">Answers</div>
109+
</a>
110+
</div>
111+
<div id="Eat" class="w3-container menu w3-padding-48 w3-card">
112+
<h5>Bread Basket</h5>
113+
<p class="w3-text-grey">Assortment of fresh baked fruit breads and muffins 5.50</p>
114+
<br>
115+
<h5>Honey Almond Granola with Fruits</h5>
116+
<p class="w3-text-grey">Natural cereal of honey toasted oats, raisins, almonds and dates 7.00</p>
117+
<br>
118+
<h5>Belgian Waffle</h5>
119+
<p class="w3-text-grey">Vanilla flavored batter with malted flour 7.50</p>
120+
<br>
121+
<h5>Scrambled eggs</h5>
122+
<p class="w3-text-grey">Scrambled eggs, roasted red pepper and garlic, with green onions 7.50</p>
123+
<br>
124+
<h5>Blueberry Pancakes</h5>
125+
<p class="w3-text-grey">With syrup, butter and lots of berries 8.50</p>
126+
</div>
127+
<div id="Drinks" class="w3-container menu w3-padding-48 w3-card">
128+
<h5>Coffee</h5>
129+
<p class="w3-text-grey">Regular coffee 2.50</p>
130+
<br>
131+
<h5>Chocolato</h5>
132+
<p class="w3-text-grey">Chocolate espresso with milk 4.50</p>
133+
<br>
134+
<h5>Corretto</h5>
135+
<p class="w3-text-grey">Whiskey and coffee 5.00</p>
136+
<br>
137+
<h5>Iced tea</h5>
138+
<p class="w3-text-grey">Hot tea, except not hot 3.00</p>
139+
<br>
140+
<h5>Soda</h5>
141+
<p class="w3-text-grey">Coke, Sprite, Fanta, etc. 2.50</p>
142+
</div>
143+
</div>
144+
</div>
145+
<!-- End page content -->
146+
</div>
147+
<!-- Footer -->
148+
<footer class="w3-center w3-light-grey w3-padding-48 w3-large">
149+
<p>
150+
Copyright &#x000A9;&nbsp;2020 &#x000B7; Akash Singh
151+
</p>
152+
</footer>
153+
<script>
154+
// Tabbed Menu
155+
function openMenu(evt, menuName) {
156+
var i, x, tablinks;
157+
x = document.getElementsByClassName("menu");
158+
for (i = 0; i < x.length; i++) {
159+
x[i].style.display = "none";
160+
}
161+
tablinks = document.getElementsByClassName("tablink");
162+
for (i = 0; i < x.length; i++) {
163+
tablinks[i].className = tablinks[i].className.replace(" w3-dark-grey", "");
164+
}
165+
document.getElementById(menuName).style.display = "block";
166+
evt.currentTarget.firstElementChild.className += " w3-dark-grey";
167+
}
168+
document.getElementById("myLink").click();
169+
</script>
170+
</body>
171+
</html>

0 commit comments

Comments
 (0)