tag:blogger.com,1999:blog-12199804768013261182024-12-19T08:50:56.015+05:30My Revision Web PageMachine Learning is a method of training a machine that learns from experiences to perform better and better.Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.comBlogger55125tag:blogger.com,1999:blog-1219980476801326118.post-28951077191053239632022-01-31T18:02:00.002+05:302022-01-31T18:02:29.626+05:30Creating users (login and logout pages)<p>*Create new project using command</p><p>django-admin startproject userproject</p><p>*Make migrations by running following commands,</p><p>python3 manage.py makemigrations</p><p>python3 manage.py migrate</p><p>* create an app name "home"</p><p>python3 manage.py startapp home</p><p>*Register your app by copying the app name from "app.py" and put it in "settings.py" of userproject.</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><div style="line-height: 19px;"><div><span style="color: #6a9955;"># websites which will use this projects</span></div><div><span style="color: #4fc1ff;">ALLOWED_HOSTS</span> = [<span style="color: #ce9178;">'machlearn1.blogspot.com'</span>]</div><div><br /></div></div></div><div><span style="color: #4fc1ff;">INSTALLED_APPS</span> = [</div><div> <span style="color: #ce9178;">'home.apps.HomeConfig',</span></div><div> <span style="color: #ce9178;">'django.contrib.admin'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.auth'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.contenttypes'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.sessions'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.messages'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.staticfiles'</span>,</div><div>]</div></div><p>Create static and templates folder. Set static dir from <a href="https://docs.djangoproject.com/en/4.0/howto/static-files/" target="_blank">site</a></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #4fc1ff;">STATIC_URL</span> = <span style="color: #ce9178;">'/static/'</span></div><div><span style="color: #6a9955;"># pasted from django website</span></div><div><span style="color: #4fc1ff;">STATICFILES_DIRS</span> = [</div><div> os.path.join(<span style="color: #4fc1ff;">BASE_DIR</span>,<span style="color: #ce9178;">'static'</span>),</div><div>]</div></div><p>Set dir for templates too,</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #4fc1ff;">TEMPLATES</span> = [</div><div> {</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'BACKEND'</span>: <span style="color: #ce9178;">'django.template.backends.django.DjangoTemplates'</span>,</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'DIRS'</span>: [<span style="color: #4ec9b0;">os</span>.<span style="color: #9cdcfe;">path</span>.<span style="color: #dcdcaa;">join</span>(<span style="color: #4fc1ff;">BASE_DIR</span>,<span style="color: #ce9178;">'templates'</span>)],</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'APP_DIRS'</span>: <span style="color: #569cd6;">True</span>,</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'OPTIONS'</span>: {</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'context_processors'</span>: [</div><div> <span style="color: #ce9178;">'django.template.context_processors.debug'</span>,</div><div> <span style="color: #ce9178;">'django.template.context_processors.request'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.auth.context_processors.auth'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.messages.context_processors.messages'</span>,</div><div> ],</div><div> },</div><div> },</div><div>]</div></div><p>Create an index.html file as a template.</p><p>In urls.py file of userproject, </p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #c586c0;">from</span> <span style="color: #4ec9b0;">django</span>.<span style="color: #4ec9b0;">contrib</span> <span style="color: #c586c0;">import</span> <span style="color: #4ec9b0;">admin</span></div><div><span style="color: #c586c0;">from</span> <span style="color: #4ec9b0;">django</span>.<span style="color: #4ec9b0;">urls</span> <span style="color: #c586c0;">import</span> <span style="color: #dcdcaa;">path</span>, <span style="color: #dcdcaa;">include</span></div><br /><div><span style="color: #9cdcfe;">urlpatterns</span> = [</div><div> <span style="color: #dcdcaa;">path</span>(<span style="color: #ce9178;">'admin/'</span>, <span style="color: #4ec9b0;">admin</span>.<span style="color: #9cdcfe;">site</span>.<span style="color: #9cdcfe;">urls</span>),</div><div> <span style="color: #dcdcaa;">path</span>(<span style="color: #ce9178;">''</span>, <span style="color: #dcdcaa;">include</span>(<span style="color: #ce9178;">'home.urls'</span>)),</div><div>]</div></div><p>Create urls.py file in the home folder,</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div style="line-height: 19px;"><div><span style="color: #c586c0;">from</span> <span style="color: #4ec9b0;">django</span>.<span style="color: #4ec9b0;">contrib</span> <span style="color: #c586c0;">import</span> <span style="color: #4ec9b0;">admin</span></div><div><span style="color: #c586c0;">from</span> <span style="color: #4ec9b0;">django</span>.<span style="color: #4ec9b0;">urls</span> <span style="color: #c586c0;">import</span> <span style="color: #dcdcaa;">path</span>, <span style="color: #dcdcaa;">include</span></div><div><span style="color: #c586c0;">from</span> <span style="color: #4ec9b0;">home</span> <span style="color: #c586c0;">import</span> <span style="color: #4ec9b0;">views</span> </div><br /><div><span style="color: #9cdcfe;">urlpatterns</span> = [</div><div> <span style="color: #dcdcaa;">path</span>(<span style="color: #ce9178;">''</span>, <span style="color: #4ec9b0;">views</span>.<span style="color: #dcdcaa;">index</span>, <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">'home'</span>),</div><div> <span style="color: #dcdcaa;">path</span>(<span style="color: #ce9178;">'login'</span>, <span style="color: #4ec9b0;">views</span>.<span style="color: #dcdcaa;">loginuser</span>, <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">'login'</span>),</div><div> <span style="color: #dcdcaa;">path</span>(<span style="color: #ce9178;">'logout'</span>, <span style="color: #4ec9b0;">views</span>.<span style="color: #dcdcaa;">logoutuser</span>, <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">'logout'</span>),</div><div>]</div></div></div><p>create super user using command, "python3 manage.py createsuperuser".</p><p>Now create index.html, login.html and logout.html files. views.py file of home will be as below,</p><p>index.html file</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><!</span>DOCTYPE html<span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">charset</span>=<span style="color: #ce9178;">"utf-8"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">http-equiv</span>=<span style="color: #ce9178;">"X-UA-Compatible"</span> <span style="color: #9cdcfe;">content</span>=<span style="color: #ce9178;">"IE=edge"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span>Logged in User<span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">"description"</span> <span style="color: #9cdcfe;">content</span>=<span style="color: #ce9178;">""</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">"viewport"</span> <span style="color: #9cdcfe;">content</span>=<span style="color: #ce9178;">"width=device-width, initial-scale=1"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">link</span> <span style="color: #9cdcfe;">rel</span>=<span style="color: #ce9178;">"stylesheet"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">""</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div><div> </div><div> Welcome <span style="color: #569cd6;">{{ </span><span style="color: #ce9178;">request</span>.<span style="color: #ce9178;">user</span><span style="color: #569cd6;"> }}</span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> This is the best website in the world.</div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">'/logout'</span> <span style="color: grey;">></span> Logout <span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div></div><p>login.html</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><!</span>doctype html<span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">html</span> <span style="color: #9cdcfe;">lang</span>=<span style="color: #ce9178;">"en"</span><span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">charset</span>=<span style="color: #ce9178;">"utf-8"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">"viewport"</span> <span style="color: #9cdcfe;">content</span>=<span style="color: #ce9178;">"width=device-width, initial-scale=1"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">"description"</span> <span style="color: #9cdcfe;">content</span>=<span style="color: #ce9178;">""</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">"author"</span> <span style="color: #9cdcfe;">content</span>=<span style="color: #ce9178;">"Mark Otto, Jacob Thornton, and Bootstrap contributors"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">"generator"</span> <span style="color: #9cdcfe;">content</span>=<span style="color: #ce9178;">"Hugo 0.88.1"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span>Login<span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #569cd6;">link</span> <span style="color: #9cdcfe;">rel</span>=<span style="color: #ce9178;">"canonical"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"https://getbootstrap.com/docs/5.1/examples/sign-in/"</span><span style="color: grey;">></span></div><br /><div> </div><br /><div> <span style="color: #6a9955;"><!-- Bootstrap core CSS --></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">link</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/docs/5.1/dist/css/bootstrap.min.css"</span> <span style="color: #9cdcfe;">rel</span>=<span style="color: #ce9178;">"stylesheet"</span> </div><div><span style="color: #9cdcfe;">integrity</span>=<span style="color: #ce9178;">"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"</span> <span style="color: #9cdcfe;">crossorigin</span>=<span style="color: #ce9178;">"anonymous"</span><span style="color: grey;">></span></div><br /><div> <span style="color: #6a9955;"><!-- Favicons --></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">link</span> <span style="color: #9cdcfe;">rel</span>=<span style="color: #ce9178;">"apple-touch-icon"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/docs/5.1/assets/img/favicons/apple-touch-icon.png"</span> <span style="color: #9cdcfe;">sizes</span>=<span style="color: #ce9178;">"180x180"</span><span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">link</span> <span style="color: #9cdcfe;">rel</span>=<span style="color: #ce9178;">"icon"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/docs/5.1/assets/img/favicons/favicon-32x32.png"</span> <span style="color: #9cdcfe;">sizes</span>=<span style="color: #ce9178;">"32x32"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"image/png"</span><span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">link</span> <span style="color: #9cdcfe;">rel</span>=<span style="color: #ce9178;">"icon"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/docs/5.1/assets/img/favicons/favicon-16x16.png"</span> <span style="color: #9cdcfe;">sizes</span>=<span style="color: #ce9178;">"16x16"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"image/png"</span><span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">link</span> <span style="color: #9cdcfe;">rel</span>=<span style="color: #ce9178;">"manifest"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/docs/5.1/assets/img/favicons/manifest.json"</span><span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">link</span> <span style="color: #9cdcfe;">rel</span>=<span style="color: #ce9178;">"mask-icon"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/docs/5.1/assets/img/favicons/safari-pinned-tab.svg"</span> <span style="color: #9cdcfe;">color</span>=<span style="color: #ce9178;">"#7952b3"</span><span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">link</span> <span style="color: #9cdcfe;">rel</span>=<span style="color: #ce9178;">"icon"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/docs/5.1/assets/img/favicons/favicon.ico"</span><span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">"theme-color"</span> <span style="color: #9cdcfe;">content</span>=<span style="color: #ce9178;">"#7952b3"</span><span style="color: grey;">></span></div><br /><br /><div> <span style="color: grey;"><</span><span style="color: #569cd6;">style</span><span style="color: grey;">></span></div><div> .bd-placeholder-img {</div><div> font-size: 1.125rem;</div><div> text-anchor: middle;</div><div> -webkit-user-select: none;</div><div> -moz-user-select: none;</div><div> user-select: none;</div><div> }</div><br /><div> @media (min-width: 768px) {</div><div> .bd-placeholder-img-lg {</div><div> font-size: 3.5rem;</div><div> }</div><div> }</div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">style</span><span style="color: grey;">></span></div><br /><div> </div><div> <span style="color: #6a9955;"><!-- Custom styles for this template --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">link</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"signin.css"</span> <span style="color: #9cdcfe;">rel</span>=<span style="color: #ce9178;">"stylesheet"</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">body</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"text-center"</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #569cd6;">main</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"form-signin"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">form</span> <span style="color: #9cdcfe;">method</span>=<span style="color: #ce9178;">'post'</span> <span style="color: #9cdcfe;">action</span>=<span style="color: #ce9178;">'/login'</span><span style="color: grey;">></span></div><div> <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">csrf_token</span><span style="color: #569cd6;"> %}</span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h1</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"h3 mb-3 fw-normal"</span><span style="color: grey;">></span>Please sign in<span style="color: grey;"></</span><span style="color: #569cd6;">h1</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"form-floating"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">input</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"text"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"form-control"</span> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">'username'</span> </div><div><span style="color: #9cdcfe;"><span> </span><span> </span><span> </span>id</span>=<span style="color: #ce9178;">"floatingInput"</span> <span style="color: #9cdcfe;">placeholder</span>=<span style="color: #ce9178;">"name"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">label</span> <span style="color: #9cdcfe;">for</span>=<span style="color: #ce9178;">"floatingInput"</span><span style="color: grey;">></span>User name<span style="color: grey;"></</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"form-floating"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">input</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"password"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"form-control"</span> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">'password'</span> </div><div><span style="color: #9cdcfe;"><span> </span><span> </span><span> </span>id</span>=<span style="color: #ce9178;">"floatingPassword"</span> <span style="color: #9cdcfe;">placeholder</span>=<span style="color: #ce9178;">"Password"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">label</span> <span style="color: #9cdcfe;">for</span>=<span style="color: #ce9178;">"floatingPassword"</span><span style="color: grey;">></span>Password<span style="color: grey;"></</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"checkbox mb-3"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">input</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"checkbox"</span> <span style="color: #9cdcfe;">value</span>=<span style="color: #ce9178;">"remember-me"</span><span style="color: grey;">></span> Remember me</div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"w-100 btn btn-lg btn-primary"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"submit"</span><span style="color: grey;">></span>Sign in<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"mt-5 mb-3 text-muted"</span><span style="color: grey;">></span><span style="color: #569cd6;">&copy;</span> 2017–2021<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">form</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">main</span><span style="color: grey;">></span></div><br /><br /><div> </div><div><span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div></div><p>views.py file</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #c586c0;">from</span> <span style="color: #4ec9b0;">django</span>.<span style="color: #4ec9b0;">shortcuts</span> <span style="color: #c586c0;">import</span> <span style="color: #dcdcaa;">render</span>, <span style="color: #dcdcaa;">redirect</span></div><div><span style="color: #c586c0;">from</span> <span style="color: #4ec9b0;">django</span>.<span style="color: #4ec9b0;">contrib</span>.<span style="color: #4ec9b0;">auth</span>.<span style="color: #4ec9b0;">models</span> <span style="color: #c586c0;">import</span> <span style="color: #4ec9b0;">User</span></div><div><span style="color: #c586c0;">from</span> <span style="color: #4ec9b0;">django</span>.<span style="color: #4ec9b0;">contrib</span>.<span style="color: #4ec9b0;">auth</span> <span style="color: #c586c0;">import</span> <span style="color: #dcdcaa;">logout</span>, <span style="color: #dcdcaa;">authenticate</span>, <span style="color: #dcdcaa;">login</span></div><br /><div><span style="color: #6a9955;"># password for test user divyababy</span></div><br /><div><span style="color: #6a9955;"># Create your views here.</span></div><div><span style="color: #569cd6;">def</span> <span style="color: #dcdcaa;">index</span>(<span style="color: #9cdcfe;">request</span>):</div><div> <span style="color: #c586c0;">if</span> <span style="color: #9cdcfe;">request</span>.user.is_anonymous:</div><div> <span style="color: #c586c0;">return</span> <span style="color: #dcdcaa;">redirect</span>(<span style="color: #ce9178;">'/login'</span>)</div><div> <span style="color: #c586c0;">return</span> <span style="color: #dcdcaa;">render</span>(<span style="color: #9cdcfe;">request</span>,<span style="color: #ce9178;">'index.html'</span>)</div><br /><div><span style="color: #569cd6;">def</span> <span style="color: #dcdcaa;">loginuser</span>(<span style="color: #9cdcfe;">request</span>):</div><div> <span style="color: #c586c0;">if</span> <span style="color: #9cdcfe;">request</span>.method == <span style="color: #ce9178;">'POST'</span>:</div><div> <span style="color: #9cdcfe;">username</span> = <span style="color: #9cdcfe;">request</span>.POST.get(<span style="color: #ce9178;">'username'</span>)</div><div> <span style="color: #9cdcfe;">password</span> = <span style="color: #9cdcfe;">request</span>.POST.get(<span style="color: #ce9178;">'password'</span>)</div><br /><div> <span style="color: #6a9955;"># checking for user details whether details are correct</span></div><div> <span style="color: #9cdcfe;">user</span> = <span style="color: #dcdcaa;">authenticate</span>(<span style="color: #9cdcfe;">username</span>=<span style="color: #9cdcfe;">username</span>,<span style="color: #9cdcfe;">password</span>=<span style="color: #9cdcfe;">password</span>)</div><br /><div> <span style="color: #6a9955;"># details are correct redirect to home page</span></div><div> <span style="color: #c586c0;">if</span> <span style="color: #9cdcfe;">user</span> <span style="color: #569cd6;">is</span> <span style="color: #569cd6;">not</span> <span style="color: #569cd6;">None</span>:</div><div> <span style="color: #dcdcaa;">login</span>(<span style="color: #9cdcfe;">request</span>,<span style="color: #9cdcfe;">user</span>)</div><div> <span style="color: #c586c0;">return</span> <span style="color: #dcdcaa;">redirect</span>(<span style="color: #ce9178;">'/'</span>)</div><div> <span style="color: #c586c0;">else</span>:</div><div> <span style="color: #c586c0;">return</span> <span style="color: #dcdcaa;">render</span>(<span style="color: #9cdcfe;">request</span>,<span style="color: #ce9178;">'login.html'</span>)</div><br /><div> <span style="color: #c586c0;">return</span> <span style="color: #dcdcaa;">render</span>(<span style="color: #9cdcfe;">request</span>, <span style="color: #ce9178;">'login.html'</span>)</div><br /><div><span style="color: #569cd6;">def</span> <span style="color: #dcdcaa;">logoutuser</span>(<span style="color: #9cdcfe;">request</span>):</div><div> <span style="color: #dcdcaa;">logout</span>(<span style="color: #9cdcfe;">request</span>)</div><div> <span style="color: #c586c0;">return</span> <span style="color: #dcdcaa;">redirect</span>(<span style="color: #ce9178;">'/login'</span>)</div></div><p><br /></p>Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-23895371903579003932022-01-15T20:01:00.004+05:302022-01-15T22:05:10.548+05:30Managing Data in Django (Database)<p> Create a model and then use migration.</p><p>The model defines the database.</p><p>In "app" folder, open model.py file and modify it accordingly.</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #c586c0;">from</span> django.db <span style="color: #c586c0;">import</span> models</div><br /><div><span style="color: #6a9955;"># Create your models here.</span></div><div><span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">Contact</span>(<span style="color: #4ec9b0;">models.Model</span>):</div><div> <span style="color: #6a9955;"># use the field of form</span></div><div> <span style="color: #6a9955;"># it is used for connection with dbms</span></div><div> name = models.CharField( <span style="color: #9cdcfe;">max_length</span>=<span style="color: #b5cea8;">122</span>)</div><div> email = models.CharField( <span style="color: #9cdcfe;">max_length</span>=<span style="color: #b5cea8;">122</span>) </div><div> phone = models.CharField(<span style="color: #9cdcfe;">max_length</span>=<span style="color: #b5cea8;">12</span>)</div><div> desc = models.TextField()</div><div> date = models.DateField()</div><br /></div><p> Now make migration, using command</p><p><b>python3 manage.py makemigrations</b></p><p>After that, in admin.py register your model like this, </p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #c586c0;">from</span> django.contrib <span style="color: #c586c0;">import</span> admin</div><div><span style="color: #c586c0;">from</span> home.models <span style="color: #c586c0;">import</span> Contact</div><div><span style="color: #6a9955;"># Register your models here.</span></div><br /><div>admin.site.register(Contact)</div></div><p>From app.py, copy class name and then in settings.py file of main project, put it in installed apps. and save all this.</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div>INSTALLED_APPS = [</div><div> <span style="color: #ce9178;">'home.apps.HomeConfig'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.admin'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.auth'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.contenttypes'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.sessions'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.messages'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.staticfiles'</span>,</div><div>]</div></div><p>Now, make migrations. Now, it will show some changes. Migration is used to store data. Now run the command " <b>python3 manage.py migrate</b> ". It will create a table for you. Use " http://127.0.0.1:8000/admin/ " to check whether the Contact table is created or not. </p><p>Change views.py file to get data from the form,</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #c586c0;">from</span> datetime <span style="color: #c586c0;">import</span> datetime</div><div><span style="color: #c586c0;">from</span> home.models <span style="color: #c586c0;">import</span> Contact</div><div><span style="color: #569cd6;">def</span> <span style="color: #dcdcaa;">contact</span>(<span style="color: #9cdcfe;">request</span>):</div><div> <span style="color: #6a9955;"># if form is posted then use it otherwise it will render</span></div><div> <span style="color: #c586c0;">if</span> request.method == <span style="color: #ce9178;">'POST'</span>:</div><div> name = request.POST.get(<span style="color: #ce9178;">'name'</span>)</div><div> email = request.POST.get(<span style="color: #ce9178;">'email'</span>)</div><div> phone = request.POST.get(<span style="color: #ce9178;">'phone'</span>)</div><div> desc = request.POST.get(<span style="color: #ce9178;">'desc'</span>)</div><div> contact = Contact(<span style="color: #9cdcfe;">name</span>=name,<span style="color: #9cdcfe;">email</span>=email,<span style="color: #9cdcfe;">phone</span>=phone,</div><div><span style="color: #9cdcfe;"><span> </span><span> </span><span> </span>desc</span>=desc,<span style="color: #9cdcfe;">date</span>=datetime.today())</div><div> <span style="color: #6a9955;"># to save data</span></div><div> contact.save()</div><div> <span style="color: #c586c0;">return</span> render(request,<span style="color: #ce9178;">'contactus.html'</span>)</div><div> <span style="color: #6a9955;"># return HttpResponse('This is contact page')</span></div></div><p>Submit a form to see whether data is stored in a table or not using "http://127.0.0.1:8000/admin/home/contact/". </p><p>To get the contact details by name of the object, use the function below in the models.py file.</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">Contact</span>(<span style="color: #4ec9b0;">models.Model</span>):</div><div> <span style="color: #6a9955;"># use the field of form</span></div><div> <span style="color: #6a9955;"># it is used for connection with dbms</span></div><div> name = models.CharField( <span style="color: #9cdcfe;">max_length</span>=<span style="color: #b5cea8;">122</span>)</div><div> email = models.CharField( <span style="color: #9cdcfe;">max_length</span>=<span style="color: #b5cea8;">122</span>) </div><div> phone = models.CharField(<span style="color: #9cdcfe;">max_length</span>=<span style="color: #b5cea8;">12</span>)</div><div> desc = models.TextField()</div><div> date = models.DateField()</div><br /><br /><div> <span style="color: #6a9955;"># it will show contacts by name in http://127.0.0.1:8000/admin/home/contact/</span></div><div> <span style="color: #569cd6;">def</span> <span style="color: #dcdcaa;">__str__</span>(<span style="color: #9cdcfe;">self</span>):</div><div> <span style="color: #c586c0;">return</span> <span style="color: #569cd6;">self</span>.name</div><div></div></div><p>To check whether the form is submitted or not, Copy "<span class="kn" style="color: green; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; font-weight: bold; white-space: pre-wrap;">from</span><span style="color: #0c4b33; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; white-space: pre-wrap;"> </span><span class="nn" style="color: blue; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; font-weight: bold; white-space: pre-wrap;">django.contrib.messages</span><span style="color: #0c4b33; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; white-space: pre-wrap;"> </span><span class="kn" style="color: green; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; font-weight: bold; white-space: pre-wrap;">import</span><span style="color: #0c4b33; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; white-space: pre-wrap;"> </span><span class="n" style="color: #0c4b33; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; white-space: pre-wrap;">constants</span><span style="color: #0c4b33; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; white-space: pre-wrap;"> </span><span class="k" style="color: green; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; font-weight: bold; white-space: pre-wrap;">as</span><span style="color: #0c4b33; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; white-space: pre-wrap;"> </span><span class="n" style="color: #0c4b33; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; white-space: pre-wrap;">messages</span>" and paste it in the settings.py file. </p><p>In the views.py file import messages like " <span class="kn" style="color: green; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; font-weight: bold; white-space: pre-wrap;">from</span><span style="color: #0c4b33; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; white-space: pre-wrap;"> </span><span class="nn" style="color: blue; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; font-weight: bold; white-space: pre-wrap;">django.contrib</span><span style="color: #0c4b33; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; white-space: pre-wrap;"> </span><span class="kn" style="color: green; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; font-weight: bold; white-space: pre-wrap;">import</span><span style="color: #0c4b33; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; white-space: pre-wrap;"> </span><span class="n" style="color: #0c4b33; font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace; font-size: 14px; font-variant-ligatures: no-common-ligatures; white-space: pre-wrap;">messages</span>" then file will be</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #c586c0;">from</span> django.shortcuts <span style="color: #c586c0;">import</span> render, HttpResponse</div><div><span style="color: #c586c0;">from</span> datetime <span style="color: #c586c0;">import</span> datetime</div><div><span style="color: #c586c0;">from</span> home.models <span style="color: #c586c0;">import</span> Contact</div><div><span style="color: #c586c0;">from</span> django.contrib <span style="color: #c586c0;">import</span> messages</div><br /><div><span style="color: #6a9955;"># render for templates</span></div><div><span style="color: #6a9955;"># Create your views here.<br /></span></div><div><span style="color: #569cd6;">def</span> <span style="color: #dcdcaa;">contact</span>(<span style="color: #9cdcfe;">request</span>):</div><div> <span style="color: #6a9955;"># if form is posted then use it otherwise it will render</span></div><div> <span style="color: #c586c0;">if</span> request.method == <span style="color: #ce9178;">'POST'</span>:</div><div> name = request.POST.get(<span style="color: #ce9178;">'name'</span>)</div><div> email = request.POST.get(<span style="color: #ce9178;">'email'</span>)</div><div> phone = request.POST.get(<span style="color: #ce9178;">'phone'</span>)</div><div> desc = request.POST.get(<span style="color: #ce9178;">'desc'</span>)</div><div> contact = Contact(<span style="color: #9cdcfe;">name</span>=name,<span style="color: #9cdcfe;">email</span>=email,<span style="color: #9cdcfe;">phone</span>=phone,</div><div><span style="color: #9cdcfe;"><span> </span><span> </span>desc</span>=desc,<span style="color: #9cdcfe;">date</span>=datetime.today())</div><div> <span style="color: #6a9955;"># to save data</span></div><div> contact.save()</div><div> messages.success(request, <span style="color: #ce9178;">'Your form is submitted'</span>)</div><div> <span style="color: #c586c0;">return</span> render(request,<span style="color: #ce9178;">'contactus.html'</span>)</div><div> <span style="color: #6a9955;"># return HttpResponse('This is contact page')</span></div><br /></div><p>Edit base.html file like this,</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><!</span>doctype html<span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">html</span> <span style="color: #9cdcfe;">lang</span>=<span style="color: #ce9178;">"en"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div><div> <span style="color: #6a9955;"><!-- Required meta tags --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">charset</span>=<span style="color: #ce9178;">"utf-8"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">"viewport"</span> <span style="color: #9cdcfe;">content</span>=<span style="color: #ce9178;">"width=device-width, initial-scale=1"</span><span style="color: grey;">></span></div><br /><div> <span style="color: #6a9955;"><!-- Bootstrap CSS --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">link</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"</span> </div><div> <span style="color: #9cdcfe;">rel</span>=<span style="color: #ce9178;">"stylesheet"</span> <span style="color: #9cdcfe;">integrity</span>=<span style="color: #ce9178;">"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"</span> </div><div> <span style="color: #9cdcfe;">crossorigin</span>=<span style="color: #ce9178;">"anonymous"</span><span style="color: grey;">></span></div><div> </div><div> </div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span></div><div> <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> </div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div><div> </div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">nav</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"navbar navbar-expand-lg navbar-dark bg-dark"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"container-fluid"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"navbar-brand"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"#"</span><span style="color: grey;">></span>Ice-Cream<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"navbar-toggler"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-toggle</span>=<span style="color: #ce9178;">"collapse"</span> </div><div> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#navbarSupportedContent"</span> <span style="color: #9cdcfe;">aria-controls</span>=<span style="color: #ce9178;">"navbarSupportedContent"</span> </div><div> <span style="color: #9cdcfe;">aria-expanded</span>=<span style="color: #ce9178;">"false"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Toggle navigation"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"navbar-toggler-icon"</span><span style="color: grey;">></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"collapse navbar-collapse"</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"navbarSupportedContent"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">ul</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"navbar-nav me-auto mb-2 mb-lg-0"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-item"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-link active"</span> <span style="color: #9cdcfe;">aria-current</span>=<span style="color: #ce9178;">"page"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/"</span><span style="color: grey;">></span>Home<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-item"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-link"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/about"</span><span style="color: grey;">></span>About US<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-item dropdown"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-link dropdown-toggle"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/services"</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"navbarDropdown"</span> </div><div> <span style="color: #9cdcfe;">role</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-toggle</span>=<span style="color: #ce9178;">"dropdown"</span> <span style="color: #9cdcfe;">aria-expanded</span>=<span style="color: #ce9178;">"false"</span><span style="color: grey;">></span></div><div> Services</div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">ul</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"dropdown-menu"</span> <span style="color: #9cdcfe;">aria-labelledby</span>=<span style="color: #ce9178;">"navbarDropdown"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: grey;">><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"dropdown-item"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/services"</span><span style="color: grey;">></span>Ice-Cream<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: grey;">><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"dropdown-item"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"#"</span><span style="color: grey;">></span>Softy<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: grey;">><</span><span style="color: #569cd6;">hr</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"dropdown-divider"</span><span style="color: grey;">></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: grey;">><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"dropdown-item"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"#"</span><span style="color: grey;">></span>Family Pack<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">ul</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: #6a9955;"><!-- </span></div><div><span style="color: #6a9955;"> <li class="nav-item"></span></div><div><span style="color: #6a9955;"> <a class="nav-link disabled">Disabled</a></span></div><div><span style="color: #6a9955;"> </li></span></div><div><span style="color: #6a9955;"> --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-item"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-link"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/contact"</span><span style="color: grey;">></span>Contact US<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">ul</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">form</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-flex"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">input</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"form-control me-2"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"search"</span> <span style="color: #9cdcfe;">placeholder</span>=<span style="color: #ce9178;">"Search"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Search"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-outline-success"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"submit"</span><span style="color: grey;">></span>Search<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">form</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">nav</span><span style="color: grey;">></span></div><br /><div> </div><div> </div><div> </div><div> <span style="color: #6a9955;"><!-- To show success message --></span></div><div> <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">if</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">messages</span><span style="color: #569cd6;"> %}</span></div><div> <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">for</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">message</span><span style="color: #569cd6;"> </span>in<span style="color: #569cd6;"> </span><span style="color: #ce9178;">messages</span><span style="color: #569cd6;"> %}</span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"alert alert-</span><span style="color: #569cd6;">{{ </span><span style="color: #ce9178;">message</span>.<span style="color: #ce9178;">tags</span><span style="color: #569cd6;"> }}</span><span style="color: #ce9178;">"</span> <span style="color: #9cdcfe;">role</span>=<span style="color: #ce9178;">"alert"</span><span style="color: grey;">></span></div><div> <span style="color: #569cd6;">{{ </span><span style="color: #ce9178;">message</span><span style="color: #569cd6;"> }}</span></div><div> <span style="color: #6a9955;"><!--</span></div><div><span style="color: #6a9955;"> <strong>Holy guacamole!</strong> You should check in on some of those fields below.</span></div><div><span style="color: #6a9955;"> --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn-close"</span> <span style="color: #9cdcfe;">data-bs-dismiss</span>=<span style="color: #ce9178;">"alert"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Close"</span><span style="color: grey;">></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endfor</span><span style="color: #569cd6;"> %}</span></div><div> <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endif</span><span style="color: #569cd6;"> %}</span></div><br /><div> <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span> </div><div> <span style="color: #6a9955;"><!-- Optional JavaScript; choose one of the two! --></span></div><br /><div> <span style="color: #6a9955;"><!-- Option 1: Bootstrap Bundle with Popper --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">script</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"</span> </div><div> <span style="color: #9cdcfe;">integrity</span>=<span style="color: #ce9178;">"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"</span> </div><div> <span style="color: #9cdcfe;">crossorigin</span>=<span style="color: #ce9178;">"anonymous"</span><span style="color: grey;">></</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div><br /><div> <span style="color: #6a9955;"><!-- Option 2: Separate Popper and Bootstrap JS --></span></div><div> <span style="color: #6a9955;"><!--</span></div><div><span style="color: #6a9955;"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" </span></div><div><span style="color: #6a9955;"> integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" </span></div><div><span style="color: #6a9955;"> crossorigin="anonymous"></script></span></div><div><span style="color: #6a9955;"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" </span></div><div><span style="color: #6a9955;"> integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" </span></div><div><span style="color: #6a9955;"> crossorigin="anonymous"></script></span></div><div><span style="color: #6a9955;"> --></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div></div><p><br /></p><p><br /></p>Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-31201290540490006462022-01-14T20:04:00.006+05:302022-01-15T18:25:32.301+05:30Django-admin (Template inheritance continued.....)<p>To use a carousel picture from a folder, create a folder "img" in the static folder and save images in .jfif format there.</p><p> In index.html file give src as "/static/img/img_name". Then, index.html file will be as below,</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">extends</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">'base.html'</span><span style="color: #569cd6;"> %}</span></div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> Home <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> </div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span></div><br /><div><span style="color: #6a9955;"><!-- my-4 for margin --></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">'container my-4'</span> <span style="color: grey;">></span> </div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"carouselExampleCaptions"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel slide"</span> <span style="color: #9cdcfe;">data-bs-ride</span>=<span style="color: #ce9178;">"carousel"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-indicators"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide-to</span>=<span style="color: #ce9178;">"0"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"active"</span> <span style="color: #9cdcfe;">aria-current</span>=<span style="color: #ce9178;">"true"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Slide 1"</span><span style="color: grey;">></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide-to</span>=<span style="color: #ce9178;">"1"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Slide 2"</span><span style="color: grey;">></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide-to</span>=<span style="color: #ce9178;">"2"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Slide 3"</span><span style="color: grey;">></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-inner"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-item active"</span><span style="color: grey;">></span></div><div> <span style="color: #6a9955;"><!-- change size of image here 1200x500 --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"/static/img/1.jfif"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-block w-100"</span> <span style="color: #9cdcfe;">alt</span>=<span style="color: #ce9178;">"..."</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-caption d-none d-md-block"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span>First slide label<span style="color: grey;"></</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span>Some representative placeholder content for the first slide.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-item"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"https://source.unsplash.com/1200x500/?river"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-block w-100"</span> <span style="color: #9cdcfe;">alt</span>=<span style="color: #ce9178;">"..."</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-caption d-none d-md-block"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span>Second slide label<span style="color: grey;"></</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span>Some representative placeholder content for the second slide.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-item"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"https://source.unsplash.com/1200x500/?sun"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-block w-100"</span> <span style="color: #9cdcfe;">alt</span>=<span style="color: #ce9178;">"..."</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-caption d-none d-md-block"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span>Third slide label<span style="color: grey;"></</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span>Some representative placeholder content for the third slide.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-control-prev"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide</span>=<span style="color: #ce9178;">"prev"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-control-prev-icon"</span> <span style="color: #9cdcfe;">aria-hidden</span>=<span style="color: #ce9178;">"true"</span><span style="color: grey;">></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"visually-hidden"</span><span style="color: grey;">></span>Previous<span style="color: grey;"></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-control-next"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide</span>=<span style="color: #ce9178;">"next"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-control-next-icon"</span> <span style="color: #9cdcfe;">aria-hidden</span>=<span style="color: #ce9178;">"true"</span><span style="color: grey;">></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"visually-hidden"</span><span style="color: grey;">></span>Next<span style="color: grey;"></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><br /><div><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><br /><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span> </div></div><p>For using thumbnails, use code from <a href="https://getbootstrap.com/docs/5.1/examples/album-rtl/" target="_blank">bootstrap</a> and paste in index.html, which will be,</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">extends</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">'base.html'</span><span style="color: #569cd6;"> %}</span></div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> Home <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> </div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span></div><br /><div><span style="color: #6a9955;"><!-- my-4 for margin --></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">'container my-4'</span> <span style="color: grey;">></span> </div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"carouselExampleCaptions"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel slide"</span> <span style="color: #9cdcfe;">data-bs-ride</span>=<span style="color: #ce9178;">"carousel"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-indicators"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide-to</span>=<span style="color: #ce9178;">"0"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"active"</span> <span style="color: #9cdcfe;">aria-current</span>=<span style="color: #ce9178;">"true"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Slide 1"</span><span style="color: grey;">></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide-to</span>=<span style="color: #ce9178;">"1"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Slide 2"</span><span style="color: grey;">></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide-to</span>=<span style="color: #ce9178;">"2"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Slide 3"</span><span style="color: grey;">></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-inner"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-item active"</span><span style="color: grey;">></span></div><div> <span style="color: #6a9955;"><!-- change size of image here 1200x500 --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"/static/img/1.jfif"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-block w-100"</span> <span style="color: #9cdcfe;">alt</span>=<span style="color: #ce9178;">"..."</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-caption d-none d-md-block"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span>First slide label<span style="color: grey;"></</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span>Some representative placeholder content for the first slide.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-item"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"https://source.unsplash.com/1200x500/?river"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-block w-100"</span> <span style="color: #9cdcfe;">alt</span>=<span style="color: #ce9178;">"..."</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-caption d-none d-md-block"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span>Second slide label<span style="color: grey;"></</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span>Some representative placeholder content for the second slide.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-item"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"https://source.unsplash.com/1200x500/?sun"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-block w-100"</span> <span style="color: #9cdcfe;">alt</span>=<span style="color: #ce9178;">"..."</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-caption d-none d-md-block"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span>Third slide label<span style="color: grey;"></</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span>Some representative placeholder content for the third slide.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-control-prev"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide</span>=<span style="color: #ce9178;">"prev"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-control-prev-icon"</span> <span style="color: #9cdcfe;">aria-hidden</span>=<span style="color: #ce9178;">"true"</span><span style="color: grey;">></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"visually-hidden"</span><span style="color: grey;">></span>Previous<span style="color: grey;"></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-control-next"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide</span>=<span style="color: #ce9178;">"next"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-control-next-icon"</span> <span style="color: #9cdcfe;">aria-hidden</span>=<span style="color: #ce9178;">"true"</span><span style="color: grey;">></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"visually-hidden"</span><span style="color: grey;">></span>Next<span style="color: grey;"></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><br /><div><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><br /><br /><div><span style="color: #6a9955;"><!--Thumb nail from bootstrap --></span></div><br /><div><span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"album py-5 bg-light "</span><span style="color: grey;">></span></div><div> <span style="color: #6a9955;"><!-- my-3 for margin --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"container my-3"</span><span style="color: grey;">></span></div><div> <span style="color: #6a9955;"><!-- text-center to take text at center --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h1</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">'my-2 text-center'</span><span style="color: grey;">></span> Select one from the below one <span style="color: grey;"></</span><span style="color: #569cd6;">h1</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"col"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card shadow-sm"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">svg</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"bd-placeholder-img card-img-top"</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"225"</span> </div><div> <span style="color: #9cdcfe;">xmlns</span>=<span style="color: #ce9178;">"http://www.w3.org/2000/svg"</span> <span style="color: #9cdcfe;">role</span>=<span style="color: #ce9178;">"img"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Placeholder: Thumbnail"</span> </div><div> <span style="color: #9cdcfe;">preserveAspectRatio</span>=<span style="color: #ce9178;">"xMidYMid slice"</span> <span style="color: #9cdcfe;">focusable</span>=<span style="color: #ce9178;">"false"</span><span style="color: grey;">><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span>Placeholder<span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">rect</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#55595c"</span><span style="color: grey;">></</span><span style="color: #569cd6;">rect</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">text</span> <span style="color: #9cdcfe;">x</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">y</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#eceeef"</span> <span style="color: #9cdcfe;">dy</span>=<span style="color: #ce9178;">".3em"</span><span style="color: grey;">></span>Thumbnail<span style="color: grey;"></</span><span style="color: #569cd6;">text</span><span style="color: grey;">></</span><span style="color: #569cd6;">svg</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-body"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-text"</span><span style="color: grey;">></span>This is a wider card with supporting text below as a natural </div><div> lead-in to additional content. This content is a little bit longer.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-flex justify-content-between align-items-center"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn-group"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>View<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>Edit<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">small</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"text-muted"</span><span style="color: grey;">></span>9 mins<span style="color: grey;"></</span><span style="color: #569cd6;">small</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"col"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card shadow-sm"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">svg</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"bd-placeholder-img card-img-top"</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"225"</span> </div><div> <span style="color: #9cdcfe;">xmlns</span>=<span style="color: #ce9178;">"http://www.w3.org/2000/svg"</span> <span style="color: #9cdcfe;">role</span>=<span style="color: #ce9178;">"img"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Placeholder: Thumbnail"</span> </div><div> <span style="color: #9cdcfe;">preserveAspectRatio</span>=<span style="color: #ce9178;">"xMidYMid slice"</span> <span style="color: #9cdcfe;">focusable</span>=<span style="color: #ce9178;">"false"</span><span style="color: grey;">><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span>Placeholder<span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">rect</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#55595c"</span><span style="color: grey;">></</span><span style="color: #569cd6;">rect</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">text</span> <span style="color: #9cdcfe;">x</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">y</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#eceeef"</span> <span style="color: #9cdcfe;">dy</span>=<span style="color: #ce9178;">".3em"</span><span style="color: grey;">></span>Thumbnail<span style="color: grey;"></</span><span style="color: #569cd6;">text</span><span style="color: grey;">></</span><span style="color: #569cd6;">svg</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-body"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-text"</span><span style="color: grey;">></span>This is a wider card with supporting text below as a </div><div> natural lead-in to additional content. This content is a little bit longer.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-flex justify-content-between align-items-center"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn-group"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>View<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>Edit<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">small</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"text-muted"</span><span style="color: grey;">></span>9 mins<span style="color: grey;"></</span><span style="color: #569cd6;">small</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"col"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card shadow-sm"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">svg</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"bd-placeholder-img card-img-top"</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"225"</span> </div><div> <span style="color: #9cdcfe;">xmlns</span>=<span style="color: #ce9178;">"http://www.w3.org/2000/svg"</span> <span style="color: #9cdcfe;">role</span>=<span style="color: #ce9178;">"img"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Placeholder: Thumbnail"</span> </div><div> <span style="color: #9cdcfe;">preserveAspectRatio</span>=<span style="color: #ce9178;">"xMidYMid slice"</span> <span style="color: #9cdcfe;">focusable</span>=<span style="color: #ce9178;">"false"</span><span style="color: grey;">><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span>Placeholder<span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">rect</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#55595c"</span><span style="color: grey;">></</span><span style="color: #569cd6;">rect</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">text</span> <span style="color: #9cdcfe;">x</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">y</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#eceeef"</span> <span style="color: #9cdcfe;">dy</span>=<span style="color: #ce9178;">".3em"</span><span style="color: grey;">></span>Thumbnail<span style="color: grey;"></</span><span style="color: #569cd6;">text</span><span style="color: grey;">></</span><span style="color: #569cd6;">svg</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-body"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-text"</span><span style="color: grey;">></span>This is a wider card with supporting text below as a </div><div> natural lead-in to additional content. This content is a little bit longer.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-flex justify-content-between align-items-center"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn-group"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>View<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>Edit<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">small</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"text-muted"</span><span style="color: grey;">></span>9 mins<span style="color: grey;"></</span><span style="color: #569cd6;">small</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"col"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card shadow-sm"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">svg</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"bd-placeholder-img card-img-top"</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"225"</span> </div><div> <span style="color: #9cdcfe;">xmlns</span>=<span style="color: #ce9178;">"http://www.w3.org/2000/svg"</span> <span style="color: #9cdcfe;">role</span>=<span style="color: #ce9178;">"img"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Placeholder: Thumbnail"</span> </div><div> <span style="color: #9cdcfe;">preserveAspectRatio</span>=<span style="color: #ce9178;">"xMidYMid slice"</span> <span style="color: #9cdcfe;">focusable</span>=<span style="color: #ce9178;">"false"</span><span style="color: grey;">><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span>Placeholder<span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">rect</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#55595c"</span><span style="color: grey;">></</span><span style="color: #569cd6;">rect</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">text</span> <span style="color: #9cdcfe;">x</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">y</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#eceeef"</span> <span style="color: #9cdcfe;">dy</span>=<span style="color: #ce9178;">".3em"</span><span style="color: grey;">></span>Thumbnail<span style="color: grey;"></</span><span style="color: #569cd6;">text</span><span style="color: grey;">></</span><span style="color: #569cd6;">svg</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-body"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-text"</span><span style="color: grey;">></span>This is a wider card with supporting text below as a natural </div><div> lead-in to additional content. This content is a little bit longer.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-flex justify-content-between align-items-center"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn-group"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>View<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>Edit<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">small</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"text-muted"</span><span style="color: grey;">></span>9 mins<span style="color: grey;"></</span><span style="color: #569cd6;">small</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"col"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card shadow-sm"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">svg</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"bd-placeholder-img card-img-top"</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"225"</span> </div><div> <span style="color: #9cdcfe;">xmlns</span>=<span style="color: #ce9178;">"http://www.w3.org/2000/svg"</span> <span style="color: #9cdcfe;">role</span>=<span style="color: #ce9178;">"img"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Placeholder: Thumbnail"</span> </div><div> <span style="color: #9cdcfe;">preserveAspectRatio</span>=<span style="color: #ce9178;">"xMidYMid slice"</span> <span style="color: #9cdcfe;">focusable</span>=<span style="color: #ce9178;">"false"</span><span style="color: grey;">><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span>Placeholder<span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">rect</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#55595c"</span><span style="color: grey;">></</span><span style="color: #569cd6;">rect</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">text</span> <span style="color: #9cdcfe;">x</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">y</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#eceeef"</span> <span style="color: #9cdcfe;">dy</span>=<span style="color: #ce9178;">".3em"</span><span style="color: grey;">></span>Thumbnail<span style="color: grey;"></</span><span style="color: #569cd6;">text</span><span style="color: grey;">></</span><span style="color: #569cd6;">svg</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-body"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-text"</span><span style="color: grey;">></span>This is a wider card with supporting text below as a </div><div> natural lead-in to additional content. This content is a little bit longer.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-flex justify-content-between align-items-center"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn-group"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>View<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>Edit<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">small</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"text-muted"</span><span style="color: grey;">></span>9 mins<span style="color: grey;"></</span><span style="color: #569cd6;">small</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"col"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card shadow-sm"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">svg</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"bd-placeholder-img card-img-top"</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"225"</span> </div><div> <span style="color: #9cdcfe;">xmlns</span>=<span style="color: #ce9178;">"http://www.w3.org/2000/svg"</span> <span style="color: #9cdcfe;">role</span>=<span style="color: #ce9178;">"img"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Placeholder: Thumbnail"</span> </div><div> <span style="color: #9cdcfe;">preserveAspectRatio</span>=<span style="color: #ce9178;">"xMidYMid slice"</span> <span style="color: #9cdcfe;">focusable</span>=<span style="color: #ce9178;">"false"</span><span style="color: grey;">><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span>Placeholder<span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">rect</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#55595c"</span><span style="color: grey;">></</span><span style="color: #569cd6;">rect</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">text</span> <span style="color: #9cdcfe;">x</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">y</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#eceeef"</span> <span style="color: #9cdcfe;">dy</span>=<span style="color: #ce9178;">".3em"</span><span style="color: grey;">></span>Thumbnail<span style="color: grey;"></</span><span style="color: #569cd6;">text</span><span style="color: grey;">></</span><span style="color: #569cd6;">svg</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-body"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-text"</span><span style="color: grey;">></span>This is a wider card with supporting text below as a </div><div> natural lead-in to additional content. This content is a little bit longer.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-flex justify-content-between align-items-center"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn-group"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>View<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>Edit<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">small</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"text-muted"</span><span style="color: grey;">></span>9 mins<span style="color: grey;"></</span><span style="color: #569cd6;">small</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"col"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card shadow-sm"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">svg</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"bd-placeholder-img card-img-top"</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"225"</span> </div><div> <span style="color: #9cdcfe;">xmlns</span>=<span style="color: #ce9178;">"http://www.w3.org/2000/svg"</span> <span style="color: #9cdcfe;">role</span>=<span style="color: #ce9178;">"img"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Placeholder: Thumbnail"</span> </div><div> <span style="color: #9cdcfe;">preserveAspectRatio</span>=<span style="color: #ce9178;">"xMidYMid slice"</span> <span style="color: #9cdcfe;">focusable</span>=<span style="color: #ce9178;">"false"</span><span style="color: grey;">><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span>Placeholder<span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">rect</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#55595c"</span><span style="color: grey;">></</span><span style="color: #569cd6;">rect</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">text</span> <span style="color: #9cdcfe;">x</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">y</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#eceeef"</span> <span style="color: #9cdcfe;">dy</span>=<span style="color: #ce9178;">".3em"</span><span style="color: grey;">></span>Thumbnail<span style="color: grey;"></</span><span style="color: #569cd6;">text</span><span style="color: grey;">></</span><span style="color: #569cd6;">svg</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-body"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-text"</span><span style="color: grey;">></span>This is a wider card with supporting text below as a </div><div> natural lead-in to additional content. This content is a little bit longer.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-flex justify-content-between align-items-center"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn-group"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>View<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>Edit<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">small</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"text-muted"</span><span style="color: grey;">></span>9 mins<span style="color: grey;"></</span><span style="color: #569cd6;">small</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"col"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card shadow-sm"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">svg</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"bd-placeholder-img card-img-top"</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"225"</span> </div><div> <span style="color: #9cdcfe;">xmlns</span>=<span style="color: #ce9178;">"http://www.w3.org/2000/svg"</span> <span style="color: #9cdcfe;">role</span>=<span style="color: #ce9178;">"img"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Placeholder: Thumbnail"</span> </div><div> <span style="color: #9cdcfe;">preserveAspectRatio</span>=<span style="color: #ce9178;">"xMidYMid slice"</span> <span style="color: #9cdcfe;">focusable</span>=<span style="color: #ce9178;">"false"</span><span style="color: grey;">><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span>Placeholder<span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">rect</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#55595c"</span><span style="color: grey;">></</span><span style="color: #569cd6;">rect</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">text</span> <span style="color: #9cdcfe;">x</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">y</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#eceeef"</span> <span style="color: #9cdcfe;">dy</span>=<span style="color: #ce9178;">".3em"</span><span style="color: grey;">></span>Thumbnail<span style="color: grey;"></</span><span style="color: #569cd6;">text</span><span style="color: grey;">></</span><span style="color: #569cd6;">svg</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-body"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-text"</span><span style="color: grey;">></span>This is a wider card with supporting text below as a natural </div><div> lead-in to additional content. This content is a little bit longer.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-flex justify-content-between align-items-center"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn-group"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>View<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>Edit<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">small</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"text-muted"</span><span style="color: grey;">></span>9 mins<span style="color: grey;"></</span><span style="color: #569cd6;">small</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"col"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card shadow-sm"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">svg</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"bd-placeholder-img card-img-top"</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"225"</span> </div><div> <span style="color: #9cdcfe;">xmlns</span>=<span style="color: #ce9178;">"http://www.w3.org/2000/svg"</span> <span style="color: #9cdcfe;">role</span>=<span style="color: #ce9178;">"img"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Placeholder: Thumbnail"</span> </div><div> <span style="color: #9cdcfe;">preserveAspectRatio</span>=<span style="color: #ce9178;">"xMidYMid slice"</span> <span style="color: #9cdcfe;">focusable</span>=<span style="color: #ce9178;">"false"</span><span style="color: grey;">><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span>Placeholder<span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">rect</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"100%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#55595c"</span><span style="color: grey;">></</span><span style="color: #569cd6;">rect</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">text</span> <span style="color: #9cdcfe;">x</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">y</span>=<span style="color: #ce9178;">"50%"</span> <span style="color: #9cdcfe;">fill</span>=<span style="color: #ce9178;">"#eceeef"</span> <span style="color: #9cdcfe;">dy</span>=<span style="color: #ce9178;">".3em"</span><span style="color: grey;">></span>Thumbnail<span style="color: grey;"></</span><span style="color: #569cd6;">text</span><span style="color: grey;">></</span><span style="color: #569cd6;">svg</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-body"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"card-text"</span><span style="color: grey;">></span>This is a wider card with supporting text below as a natural </div><div> lead-in to additional content. This content is a little bit longer.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-flex justify-content-between align-items-center"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn-group"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>View<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-sm btn-outline-secondary"</span><span style="color: grey;">></span>Edit<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">small</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"text-muted"</span><span style="color: grey;">></span>9 mins<span style="color: grey;"></</span><span style="color: #569cd6;">small</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span> </div></div><p>To use the image in a thumbnail, use image src tag in place of "svg" html tag.</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"https://source.unsplash.com/1200x900/?quantum"</span> </div><div><span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-block w-100"</span> <span style="color: #9cdcfe;">alt</span>=<span style="color: #ce9178;">"..."</span><span style="color: grey;">></span> </div><div><br /></div></div><p><b>Designing Contact us page:</b></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">extends</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">'base.html'</span><span style="color: #569cd6;"> %}</span></div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> contact <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span></div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span></div><br /><div><span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">'container'</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"https://source.unsplash.com/1200x400/?contact-us"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-block</span></div><div><span style="color: #ce9178;"> w-100 my-4"</span> <span style="color: #9cdcfe;">alt</span>=<span style="color: #ce9178;">"..."</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h2</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">'text-center'</span><span style="color: grey;">></span></div><div> Contact Us</div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">h2</span><span style="color: grey;">></span></div><div> <span style="color: #6a9955;"><!-- creating a contact form --></span></div><div> <span style="color: #6a9955;"><!-- Handling input data --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">form</span> <span style="color: #9cdcfe;">method</span>=<span style="color: #ce9178;">'POST'</span> <span style="color: #9cdcfe;">action</span>=<span style="color: #ce9178;">'/contact'</span><span style="color: grey;">></span></div><div> <span style="color: #6a9955;"><!-- csrf_token is used to ensure that form is submitted by this webpage only --></span></div><div> <span style="color: #6a9955;"><!-- Form is not accessed by any other person like hackers --></span></div><div> <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">csrf_token</span><span style="color: #569cd6;"> %}</span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"mb-3"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">label</span> <span style="color: #9cdcfe;">for</span>=<span style="color: #ce9178;">"exampleFormControlInput1"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"form-label"</span><span style="color: grey;">></span>Email address<span style="color: grey;"></</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">input</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"email"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"form-control"</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"exampleFormControlInput1"</span> </div><div> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">'email'</span> <span style="color: #9cdcfe;">placeholder</span>=<span style="color: #ce9178;">"name@example.com"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"mb-3"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">label</span> <span style="color: #9cdcfe;">for</span>=<span style="color: #ce9178;">"exampleFormControlInput1"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"form-label"</span><span style="color: grey;">></span>Name<span style="color: grey;"></</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">input</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"name"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"form-control"</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"exampleFormControlInput1"</span> </div><div> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">'name'</span> <span style="color: #9cdcfe;">placeholder</span>=<span style="color: #ce9178;">"Your Name"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"mb-3"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">label</span> <span style="color: #9cdcfe;">for</span>=<span style="color: #ce9178;">"exampleFormControlInput1"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"form-label"</span><span style="color: grey;">></span>Phone Number<span style="color: grey;"></</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">input</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"phone2numeric"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"form-control"</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"exampleFormControlInput1"</span> </div><div> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">'phone'</span> <span style="color: #9cdcfe;">placeholder</span>=<span style="color: #ce9178;">"0123456789"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"mb-3"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">label</span> <span style="color: #9cdcfe;">for</span>=<span style="color: #ce9178;">"exampleFormControlTextarea1"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"form-label"</span><span style="color: grey;">></span>Example</div><div> text area [What u want to contact for....]<span style="color: grey;"></</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">textarea</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"form-control"</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"exampleFormControlTextarea1"</span> </div><div> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">'desc'</span> <span style="color: #9cdcfe;">rows</span>=<span style="color: #ce9178;">"3"</span><span style="color: grey;">></</span><span style="color: #569cd6;">textarea</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">form</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-primary"</span><span style="color: grey;">></span>Submit<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span></div></div><p><br /></p>Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-3288661499714667812022-01-14T20:03:00.003+05:302022-01-14T20:26:13.718+05:30Django-admin (Template inheritance)<p> #creating superuser</p>
<div>
<pre> <code>
<p>python3 manage.py createsuperuser</p>
</code>
</pre>
</div>
<p># it will ask some values as below,</p>
<p>(password is case-sensitive)</p>
<div>
<pre> <code>
<p>Username (leave blank to use 'lakshman'): admin </p>
<p>Email address: </p>
<p>Password: </p>
<p>Password (again): </p>
<p>The password is too similar to the username.</p>
<p>This password is too short. It must contain at least 8 characters.</p>
<p>This password is too common.</p>
<p>Bypass password validation and create user anyway? [y/N]: y</p>
<p>Superuser created successfully.</p>
</code>
</pre>
</div>
<p>
Now, we can login to django-admin using address "http://127.0.0.1:8000/admin/" <br />
To Change django administration text, Use code below in urls.py of main project file.<br />
And change the code according to ur choice
</p><div>
<pre> <code>
<p># to change admin text <br />
admin.site.site_header = "LMJ Ice-cream Admin" <br />
admin.site.site_title = "Ice-cream Admin Portal" <br />
admin.site.index_title = "Welcome to Ice-cream Researcher Portal" <br />
</p>
</code>
</pre>
</div>
<p>
<b>Inheretance in html templates</b><br />
Create a new base.html file in template folder. <br />
Now, copy paste code from index.html code.<br />
Use {% block body %}{% endblock body %} below nav tag, and use {% block title %}{% endblock title %} like below <br />
</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><!</span>doctype html<span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">html</span> <span style="color: #9cdcfe;">lang</span>=<span style="color: #ce9178;">"en"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div><div> <span style="color: #6a9955;"><!-- Required meta tags --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">charset</span>=<span style="color: #ce9178;">"utf-8"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">"viewport"</span> <span style="color: #9cdcfe;">content</span>=<span style="color: #ce9178;">"width=device-width, initial-scale=1"</span><span style="color: grey;">></span></div><br /><div> <span style="color: #6a9955;"><!-- Bootstrap CSS --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">link</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"</span> </div><div> <span style="color: #9cdcfe;">rel</span>=<span style="color: #ce9178;">"stylesheet"</span> </div><div><span style="color: #9cdcfe;"><span> </span>integrity</span>=<span style="color: #ce9178;">"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"</span> </div><div> <span style="color: #9cdcfe;">crossorigin</span>=<span style="color: #ce9178;">"anonymous"</span><span style="color: grey;">></span></div><div> </div><div> </div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span></div><div> <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> </div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div><div> </div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">nav</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"navbar navbar-expand-lg navbar-dark bg-dark"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"container-fluid"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"navbar-brand"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"#"</span><span style="color: grey;">></span>Ice-Cream<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"navbar-toggler"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> </div><div><span style="color: #9cdcfe;"><span> </span><span> </span><span> </span>data-bs-toggle</span>=<span style="color: #ce9178;">"collapse"</span> </div><div> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#navbarSupportedContent"</span> </div><div><span style="color: #9cdcfe;"><span> </span><span> </span><span> </span>aria-controls</span>=<span style="color: #ce9178;">"navbarSupportedContent"</span> </div><div> <span style="color: #9cdcfe;">aria-expanded</span>=<span style="color: #ce9178;">"false"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Toggle navigation"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"navbar-toggler-icon"</span><span style="color: grey;">></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"collapse navbar-collapse"</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"navbarSupportedContent"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">ul</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"navbar-nav me-auto mb-2 mb-lg-0"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-item"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-link active"</span> <span style="color: #9cdcfe;">aria-current</span>=<span style="color: #ce9178;">"page"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/"</span><span style="color: grey;">></span>Home<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-item"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-link"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/about"</span><span style="color: grey;">></span>About US<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-item dropdown"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-link dropdown-toggle"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/services"</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"navbarDropdown"</span> </div><div> <span style="color: #9cdcfe;">role</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-toggle</span>=<span style="color: #ce9178;">"dropdown"</span> <span style="color: #9cdcfe;">aria-expanded</span>=<span style="color: #ce9178;">"false"</span><span style="color: grey;">></span></div><div> Services</div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">ul</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"dropdown-menu"</span> <span style="color: #9cdcfe;">aria-labelledby</span>=<span style="color: #ce9178;">"navbarDropdown"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: grey;">><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"dropdown-item"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/services"</span><span style="color: grey;">></span>Ice-Cream<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: grey;">><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"dropdown-item"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"#"</span><span style="color: grey;">></span>Softy<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: grey;">><</span><span style="color: #569cd6;">hr</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"dropdown-divider"</span><span style="color: grey;">></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: grey;">><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"dropdown-item"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"#"</span><span style="color: grey;">></span>Family Pack<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">ul</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: #6a9955;"><!-- </span></div><div><span style="color: #6a9955;"> <li class="nav-item"></span></div><div><span style="color: #6a9955;"> <a class="nav-link disabled">Disabled</a></span></div><div><span style="color: #6a9955;"> </li></span></div><div><span style="color: #6a9955;"> --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-item"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-link"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/contact"</span><span style="color: grey;">></span>Contact US<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">ul</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">form</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-flex"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">input</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"form-control me-2"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"search"</span> </div><div><span style="color: #9cdcfe;"><span> </span><span> </span><span> </span><span> </span>placeholder</span>=<span style="color: #ce9178;">"Search"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Search"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-outline-success"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"submit"</span><span style="color: grey;">></span>Search<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">form</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">nav</span><span style="color: grey;">></span></div><br /><div> <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span> </div><div> <span style="color: #6a9955;"><!-- Optional JavaScript; choose one of the two! --></span></div><br /><div> <span style="color: #6a9955;"><!-- Option 1: Bootstrap Bundle with Popper --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">script</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"</span> </div><div> <span style="color: #9cdcfe;">integrity</span>=<span style="color: #ce9178;">"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"</span> </div><div> <span style="color: #9cdcfe;">crossorigin</span>=<span style="color: #ce9178;">"anonymous"</span><span style="color: grey;">></</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div><br /><div> <span style="color: #6a9955;"><!-- Option 2: Separate Popper and Bootstrap JS --></span></div><div> <span style="color: #6a9955;"><!--</span></div><div><span style="color: #6a9955;"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" </span></div><div><span style="color: #6a9955;"> integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" </span></div><div><span style="color: #6a9955;"> crossorigin="anonymous"></script></span></div><div><span style="color: #6a9955;"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" </span></div><div><span style="color: #6a9955;"> integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" </span></div><div><span style="color: #6a9955;"> crossorigin="anonymous"></script></span></div><div><span style="color: #6a9955;"> --></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div></div><p>Change index.html file like this</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">extends</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">'base.html'</span><span style="color: #569cd6;"> %}</span></div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> Home <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> </div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span></div><div>This is body bock </div><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span> </div></div><div style="color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; white-space: pre;"><br /></div><p>Create a contactus.html, about.html and services.html file in templates</p><p>contactus.html will look like this,</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">extends</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">'base.html'</span><span style="color: #569cd6;"> %}</span></div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> contact <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> </div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span></div><div>This is contact us page. </div><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span> </div></div><p>about.html will look like this,</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">extends</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">'base.html'</span><span style="color: #569cd6;"> %}</span></div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> About <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> </div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span></div><div>This is About us page. </div><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span> </div></div><p>services.html will look like this,</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">extends</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">'base.html'</span><span style="color: #569cd6;"> %}</span></div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> Services <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> </div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span></div><div>This is Services page. </div><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span> </div></div><p><br /></p><p>Now change the view.py file as shown</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #c586c0;">from</span> django.shortcuts <span style="color: #c586c0;">import</span> render, HttpResponse</div><div><span style="color: #6a9955;"># render for templates</span></div><br /><div><span style="color: #6a9955;"># Create your views here.</span></div><div><span style="color: #569cd6;">def</span> <span style="color: #dcdcaa;">index</span>(<span style="color: #9cdcfe;">request</span>):</div><div> context = {</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'variable'</span>:<span style="color: #ce9178;">'This is sent'</span></div><div> }</div><div> <span style="color: #c586c0;">return</span> render(request,<span style="color: #ce9178;">'index.html'</span>,context)</div><div> <span style="color: #6a9955;"># return HttpResponse('This is home page')</span></div><br /><div><span style="color: #569cd6;">def</span> <span style="color: #dcdcaa;">about</span>(<span style="color: #9cdcfe;">request</span>):</div><div> <span style="color: #c586c0;">return</span> render(request,<span style="color: #ce9178;">'about.html'</span>)</div><div> <span style="color: #6a9955;"># return HttpResponse('This is about page')</span></div><br /><div><span style="color: #569cd6;">def</span> <span style="color: #dcdcaa;">services</span>(<span style="color: #9cdcfe;">request</span>):</div><div> <span style="color: #c586c0;">return</span> render(request,<span style="color: #ce9178;">'services.html'</span>)</div><div> <span style="color: #6a9955;"># return HttpResponse('This is services page')</span></div><br /><div><span style="color: #569cd6;">def</span> <span style="color: #dcdcaa;">contact</span>(<span style="color: #9cdcfe;">request</span>):</div><div> <span style="color: #c586c0;">return</span> render(request,<span style="color: #ce9178;">'contactus.html'</span>)</div><div> <span style="color: #6a9955;"># return HttpResponse('This is contact page')</span></div><br /></div><div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between" style="align-items: center; background-color: white; box-sizing: border-box; color: #212529; display: flex; flex-direction: row-reverse; justify-content: space-between;"><h1 class="bd-title" id="content" style="box-sizing: border-box; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 500; line-height: 1.2; margin-bottom: 0.5rem; margin-top: 0px;"><span style="font-size: small;"><br /></span></h1><h1 class="bd-title" id="content" style="box-sizing: border-box; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 500; line-height: 1.2; margin-bottom: 0.5rem; margin-top: 0px;"><span style="font-size: small;"><br /></span></h1><h1 class="bd-title" id="content" style="box-sizing: border-box; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 500; line-height: 1.2; margin-bottom: 0.5rem; margin-top: 0px;"><span style="font-size: small;"><br /></span></h1><h1 class="bd-title" id="content" style="box-sizing: border-box; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 500; line-height: 1.2; margin-bottom: 0.5rem; margin-top: 0px;"><span style="font-size: small;"><br /></span></h1><h1 class="bd-title" id="content" style="box-sizing: border-box; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 500; line-height: 1.2; margin-bottom: 0.5rem; margin-top: 0px;"><span style="font-size: small;"><br /></span></h1><h1 class="bd-title" id="content" style="box-sizing: border-box; line-height: 1.2; margin-bottom: 0.5rem; margin-top: 0px;"><span style="font-family: inherit; font-size: small; font-weight: normal;"><br /></span></h1><h1 class="bd-title" id="content" style="box-sizing: border-box; line-height: 1.2; margin-bottom: 0.5rem; margin-top: 0px;"><span style="font-family: inherit; font-size: small; font-weight: normal;"><br /></span></h1><h1 class="bd-title" id="content" style="box-sizing: border-box; line-height: 1.2; margin-bottom: 0.5rem; margin-top: 0px;"><span style="font-family: inherit; font-size: small; font-weight: normal;"><br /></span></h1><h1 class="bd-title" id="content" style="box-sizing: border-box; line-height: 1.2; margin-bottom: 0.5rem; margin-top: 0px;"><span style="font-family: inherit; font-size: small; font-weight: normal;"><br /></span></h1><h1 class="bd-title" id="content" style="box-sizing: border-box; line-height: 1.2; margin-bottom: 0.5rem; margin-top: 0px;"><span style="font-family: inherit; font-size: small; font-weight: normal;"><br /></span></h1><h1 class="bd-title" id="content" style="box-sizing: border-box; line-height: 1.2; margin-bottom: 0.5rem; margin-top: 0px;"><span style="font-family: inherit; font-size: small; font-weight: normal;"><br /></span></h1><h1 class="bd-title" id="content" style="box-sizing: border-box; line-height: 1.2; margin-bottom: 0.5rem; margin-top: 0px;"><span style="font-family: inherit; font-size: small; font-weight: normal;"><br /></span></h1><h1 class="bd-title" id="content" style="box-sizing: border-box; line-height: 1.2; margin-bottom: 0.5rem; margin-top: 0px;"><span style="font-family: inherit; font-size: small; font-weight: normal;"><br /></span></h1><h1 class="bd-title" id="content" style="box-sizing: border-box; line-height: 1.2; margin-bottom: 0.5rem; margin-top: 0px;"><span style="font-family: inherit; font-size: small; font-weight: normal;"><br /></span></h1></div><p><br /></p><p>Adding <span style="background-color: white; color: #212529; font-family: inherit;">Carousel: A slideshow component for cycling through elements—images or slides of text—like a carousel. Copy code from <a href="https://getbootstrap.com/docs/5.1/components/carousel/" target="_blank">site</a> and paste it in index.html file. The file will look like this,</span></p><p><span style="background-color: white; color: #212529; font-family: inherit;"></span></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">extends</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">'base.html'</span><span style="color: #569cd6;"> %}</span></div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> Home <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> </div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span></div><br /><div><span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">'container'</span><span style="color: grey;">></span> </div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"carouselExampleCaptions"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel slide"</span> </div><div><span style="color: #9cdcfe;"><span> </span><span> </span>data-bs-ride</span>=<span style="color: #ce9178;">"carousel"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-indicators"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide-to</span>=<span style="color: #ce9178;">"0"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"active"</span> <span style="color: #9cdcfe;">aria-current</span>=<span style="color: #ce9178;">"true"</span> </div><div><span style="color: #9cdcfe;"><span> </span><span> </span><span> </span>aria-label</span>=<span style="color: #ce9178;">"Slide 1"</span><span style="color: grey;">></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide-to</span>=<span style="color: #ce9178;">"1"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Slide 2"</span><span style="color: grey;">></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide-to</span>=<span style="color: #ce9178;">"2"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Slide 3"</span><span style="color: grey;">></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-inner"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-item active"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"..."</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-block w-100"</span> <span style="color: #9cdcfe;">alt</span>=<span style="color: #ce9178;">"..."</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-caption d-none d-md-block"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span>First slide label<span style="color: grey;"></</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span>Some representative placeholder content for the first slide.</div><div><span style="color: grey;"><span> </span><span> </span><span> </span><span> </span></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-item"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"..."</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-block w-100"</span> <span style="color: #9cdcfe;">alt</span>=<span style="color: #ce9178;">"..."</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-caption d-none d-md-block"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span>Second slide label<span style="color: grey;"></</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span>Some representative placeholder content for the second slide.</div><div><span style="color: grey;"><span> </span><span> </span><span> </span></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-item"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"..."</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-block w-100"</span> <span style="color: #9cdcfe;">alt</span>=<span style="color: #ce9178;">"..."</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-caption d-none d-md-block"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span>Third slide label<span style="color: grey;"></</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span>Some representative placeholder content for the third slide.</div><div><span style="color: grey;"><span> </span><span> </span><span> </span><span> </span></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-control-prev"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> </div><div><span style="color: #9cdcfe;"><span> </span><span> </span>data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide</span>=<span style="color: #ce9178;">"prev"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-control-prev-icon"</span> <span style="color: #9cdcfe;">aria-hidden</span>=<span style="color: #ce9178;">"true"</span><span style="color: grey;">></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"visually-hidden"</span><span style="color: grey;">></span>Previous<span style="color: grey;"></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-control-next"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> </div><div><span style="color: #9cdcfe;"><span> </span><span> </span>data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide</span>=<span style="color: #ce9178;">"next"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-control-next-icon"</span> <span style="color: #9cdcfe;">aria-hidden</span>=<span style="color: #ce9178;">"true"</span><span style="color: grey;">></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"visually-hidden"</span><span style="color: grey;">></span>Next<span style="color: grey;"></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><br /><div><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><br /><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span> </div></div><p><span style="color: #212529;"><span style="background-color: white;">Put <a href="https://source.unsplash.com/1200x500/?nature,water" target="_blank">link</a> in src option and give margin so that image can be adjusted. Now, index.html file will look like this one. You can change the link according to urself.</span></span></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">extends</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">'base.html'</span><span style="color: #569cd6;"> %}</span></div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> Home <span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">title</span><span style="color: #569cd6;"> %}</span> </div><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">block</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span></div><br /><div><span style="color: #6a9955;"><!-- my-4 for margin --></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">'container my-4'</span> <span style="color: grey;">></span> </div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"carouselExampleCaptions"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel slide"</span> </div><div><span style="color: #9cdcfe;"><span> </span>data-bs-ride</span>=<span style="color: #ce9178;">"carousel"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-indicators"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide-to</span>=<span style="color: #ce9178;">"0"</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"active"</span> <span style="color: #9cdcfe;">aria-current</span>=<span style="color: #ce9178;">"true"</span> </div><div><span style="color: #9cdcfe;"><span> </span><span> </span><span> </span>aria-label</span>=<span style="color: #ce9178;">"Slide 1"</span><span style="color: grey;">></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide-to</span>=<span style="color: #ce9178;">"1"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Slide 2"</span><span style="color: grey;">></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> </div><div> <span style="color: #9cdcfe;">data-bs-slide-to</span>=<span style="color: #ce9178;">"2"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Slide 3"</span><span style="color: grey;">></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-inner"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-item active"</span><span style="color: grey;">></span></div><div> <span style="color: #6a9955;"><!-- change size of image here 1200x500 --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"https://source.unsplash.com/1200x500/?nature,water"</span> </div><div><span style="color: #9cdcfe;"><span> </span><span> </span><span> </span>class</span>=<span style="color: #ce9178;">"d-block w-100"</span> <span style="color: #9cdcfe;">alt</span>=<span style="color: #ce9178;">"..."</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-caption d-none d-md-block"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span>First slide label<span style="color: grey;"></</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span>Some representative placeholder content for the first slide.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-item"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"https://source.unsplash.com/1200x500/?nature"</span> </div><div><span style="color: #9cdcfe;"><span> </span><span> </span><span> </span>class</span>=<span style="color: #ce9178;">"d-block w-100"</span> <span style="color: #9cdcfe;">alt</span>=<span style="color: #ce9178;">"..."</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-caption d-none d-md-block"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span>Second slide label<span style="color: grey;"></</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span>Some representative placeholder content for the second slide.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-item"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"https://source.unsplash.com/1200x500/?sun"</span> </div><div><span style="color: #9cdcfe;"><span> </span><span> </span><span> </span>class</span>=<span style="color: #ce9178;">"d-block w-100"</span> <span style="color: #9cdcfe;">alt</span>=<span style="color: #ce9178;">"..."</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-caption d-none d-md-block"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span>Third slide label<span style="color: grey;"></</span><span style="color: #569cd6;">h5</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span>Some representative placeholder content for the third slide.<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-control-prev"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> </div><div><span style="color: #9cdcfe;"><span> </span><span> </span>data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> <span style="color: #9cdcfe;">data-bs-slide</span>=<span style="color: #ce9178;">"prev"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-control-prev-icon"</span> <span style="color: #9cdcfe;">aria-hidden</span>=<span style="color: #ce9178;">"true"</span><span style="color: grey;">></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"visually-hidden"</span><span style="color: grey;">></span>Previous<span style="color: grey;"></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-control-next"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> </div><div><span style="color: #9cdcfe;"><span> </span><span> </span>data-bs-target</span>=<span style="color: #ce9178;">"#carouselExampleCaptions"</span> <span style="color: #9cdcfe;">data-bs-slide</span>=<span style="color: #ce9178;">"next"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"carousel-control-next-icon"</span> <span style="color: #9cdcfe;">aria-hidden</span>=<span style="color: #ce9178;">"true"</span><span style="color: grey;">></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"visually-hidden"</span><span style="color: grey;">></span>Next<span style="color: grey;"></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><br /><div><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><br /><br /><div><span style="color: #569cd6;">{% </span><span style="color: #c586c0;">endblock</span><span style="color: #569cd6;"> </span><span style="color: #ce9178;">body</span><span style="color: #569cd6;"> %}</span> </div></div><p><br /></p>
Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-60520451823187776942022-01-14T20:02:00.003+05:302022-01-14T20:02:26.367+05:30Migration<p># create new app </p>
<div>
<pre> <code>
<p><span style="background-color: #f0f0f0; color: #444444; font-family: "Courier New", Courier, monospace; font-size: 12px; text-align: justify; white-space: pre;">django-admin startapp myapp</span></p>
</code>
</pre>
</div>
<p># In myapp folder, create urls.py like this</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #c586c0;">from</span> django.contrib <span style="color: #c586c0;">import</span> admin</div><div><span style="color: #c586c0;">from</span> django.urls <span style="color: #c586c0;">import</span> path</div><div><span style="color: #c586c0;"># home is name of myapp</span></div><div><span style="color: #c586c0;">from</span> home <span style="color: #c586c0;">import</span> views </div><br /><div>urlpatterns = [</div><div> path(<span style="color: #ce9178;">''</span>, views.index, <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">'home'</span>),</div><div> path(<span style="color: #ce9178;">'about'</span>, views.about, <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">'about'</span>),</div><div> path(<span style="color: #ce9178;">'services'</span>, views.services, <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">'services'</span>),</div><div> path(<span style="color: #ce9178;">'contact'</span>, views.contact, <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">'contact'</span>),</div><div>]</div><br /></div><p># In views.py file, create functions as below,</p><p>Use "HttpResponse" for output without using a template</p><p>Use "render" for output using a template </p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #c586c0;">from</span> django.shortcuts <span style="color: #c586c0;">import</span> render, HttpResponse</div><div><span style="color: #6a9955;"># render for templates</span></div><br /><div><span style="color: #6a9955;"># Create your views here.</span></div><div><span style="color: #569cd6;">def</span> <span style="color: #dcdcaa;">index</span>(<span style="color: #9cdcfe;">request</span>):</div><div> context = {</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'variable'</span>:<span style="color: #ce9178;">'This is sent'</span></div><div> }</div><div> <span style="color: #c586c0;">return</span> render(request,<span style="color: #ce9178;">'index.html'</span>,context)</div><div> <span style="color: #6a9955;"># return HttpResponse('This is home page')</span></div><br /><div><span style="color: #569cd6;">def</span> <span style="color: #dcdcaa;">about</span>(<span style="color: #9cdcfe;">request</span>):</div><div> <span style="color: #c586c0;">return</span> HttpResponse(<span style="color: #ce9178;">'This is about page'</span>)</div><br /><div><span style="color: #569cd6;">def</span> <span style="color: #dcdcaa;">services</span>(<span style="color: #9cdcfe;">request</span>):</div><div> <span style="color: #c586c0;">return</span> HttpResponse(<span style="color: #ce9178;">'This is services page'</span>)</div><br /><div><span style="color: #569cd6;">def</span> <span style="color: #dcdcaa;">contact</span>(<span style="color: #9cdcfe;">request</span>):</div><div> <span style="color: #c586c0;">return</span> HttpResponse(<span style="color: #ce9178;">'This is contact page'</span>)</div><br /></div><p>Save all these files.</p><p># Creae a new index.html file that will show some text as output.</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><!</span>DOCTYPE html<span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">charset</span>=<span style="color: #ce9178;">"utf-8"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">"viewport"</span> <span style="color: #9cdcfe;">content</span>=<span style="color: #ce9178;">"width=device-width, initial-scale=1"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span>This is a test Page<span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div><div> Welcome here............................... <span style="color: grey;"><</span><span style="color: #569cd6;">br</span><span style="color: grey;">></span></div><div> Hey how are UUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU? <span style="color: grey;"><</span><span style="color: #569cd6;">br</span><span style="color: grey;">></span></div><div> variable value is <span style="color: grey;"><</span><span style="color: #569cd6;">b</span><span style="color: grey;">></span> <span style="color: #569cd6;">{{ </span><span style="color: #ce9178;">variable</span><span style="color: #569cd6;"> }}</span> <span style="color: grey;"></</span><span style="color: #569cd6;">b</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> lorem455</div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div></div><p># to give better look, use <b>bootstrap </b>from <a href="https://getbootstrap.com/" target="_blank">getbootstrap</a>, </p><p># Follow, Docs --> Components --> nav bar</p><p># simply copy the code from first source code and paste in index.html file.</p><p># Edit html file to get known result like as</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><!</span>doctype html<span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">html</span> <span style="color: #9cdcfe;">lang</span>=<span style="color: #ce9178;">"en"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div><div> <span style="color: #6a9955;"><!-- Required meta tags --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">charset</span>=<span style="color: #ce9178;">"utf-8"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">"viewport"</span> <span style="color: #9cdcfe;">content</span>=<span style="color: #ce9178;">"width=device-width, initial-scale=1"</span><span style="color: grey;">></span></div><br /><div> <span style="color: #6a9955;"><!-- Bootstrap CSS --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">link</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"</span> <span style="color: #9cdcfe;">rel</span>=<span style="color: #ce9178;">"stylesheet"</span> <span style="color: #9cdcfe;">integrity</span>=<span style="color: #ce9178;">"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"</span> <span style="color: #9cdcfe;">crossorigin</span>=<span style="color: #ce9178;">"anonymous"</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span>My Blog<span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div><div> <span style="color: #6a9955;"><!-- <h1>Hello, world!</h1> --></span></div><div> </div><div> <span style="color: #6a9955;"><!-- navigation bar --></span></div><div><span style="color: #6a9955;"><!-- For light theme</span></div><div><span style="color: #6a9955;"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> </span></div><div><span style="color: #6a9955;">--></span></div><div> <span style="color: #6a9955;"><!--For Dark Theme --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">nav</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"navbar navbar-expand-lg navbar-dark bg-dark"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"container-fluid"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"navbar-brand"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"#"</span><span style="color: grey;">></span>Ice-Cream<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"navbar-toggler"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-toggle</span>=<span style="color: #ce9178;">"collapse"</span> <span style="color: #9cdcfe;">data-bs-target</span>=<span style="color: #ce9178;">"#navbarSupportedContent"</span> <span style="color: #9cdcfe;">aria-controls</span>=<span style="color: #ce9178;">"navbarSupportedContent"</span> <span style="color: #9cdcfe;">aria-expanded</span>=<span style="color: #ce9178;">"false"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Toggle navigation"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"navbar-toggler-icon"</span><span style="color: grey;">></</span><span style="color: #569cd6;">span</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"collapse navbar-collapse"</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"navbarSupportedContent"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">ul</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"navbar-nav me-auto mb-2 mb-lg-0"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-item"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-link active"</span> <span style="color: #9cdcfe;">aria-current</span>=<span style="color: #ce9178;">"page"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/"</span><span style="color: grey;">></span>Home<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-item"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-link"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/about"</span><span style="color: grey;">></span>About US<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-item dropdown"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-link dropdown-toggle"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/services"</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"navbarDropdown"</span> <span style="color: #9cdcfe;">role</span>=<span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">data-bs-toggle</span>=<span style="color: #ce9178;">"dropdown"</span> <span style="color: #9cdcfe;">aria-expanded</span>=<span style="color: #ce9178;">"false"</span><span style="color: grey;">></span></div><div> Services</div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">ul</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"dropdown-menu"</span> <span style="color: #9cdcfe;">aria-labelledby</span>=<span style="color: #ce9178;">"navbarDropdown"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: grey;">><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"dropdown-item"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/services"</span><span style="color: grey;">></span>Ice-Cream<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: grey;">><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"dropdown-item"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"#"</span><span style="color: grey;">></span>Softy<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: grey;">><</span><span style="color: #569cd6;">hr</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"dropdown-divider"</span><span style="color: grey;">></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: grey;">><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"dropdown-item"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"#"</span><span style="color: grey;">></span>Family Pack<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">ul</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: #6a9955;"><!-- </span></div><div><span style="color: #6a9955;"> <li class="nav-item"></span></div><div><span style="color: #6a9955;"> <a class="nav-link disabled">Disabled</a></span></div><div><span style="color: #6a9955;"> </li></span></div><div><span style="color: #6a9955;"> --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">li</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-item"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nav-link"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/contact"</span><span style="color: grey;">></span>Contact US<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">ul</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">form</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"d-flex"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">input</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"form-control me-2"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"search"</span> <span style="color: #9cdcfe;">placeholder</span>=<span style="color: #ce9178;">"Search"</span> <span style="color: #9cdcfe;">aria-label</span>=<span style="color: #ce9178;">"Search"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"btn btn-outline-success"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"submit"</span><span style="color: grey;">></span>Search<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">form</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">nav</span><span style="color: grey;">></span></div><br /><div> <span style="color: #6a9955;"><!-- Optional JavaScript; choose one of the two! --></span></div><br /><div> <span style="color: #6a9955;"><!-- Option 1: Bootstrap Bundle with Popper --></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">script</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"</span> <span style="color: #9cdcfe;">integrity</span>=<span style="color: #ce9178;">"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"</span> <span style="color: #9cdcfe;">crossorigin</span>=<span style="color: #ce9178;">"anonymous"</span><span style="color: grey;">></</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div><br /><div> <span style="color: #6a9955;"><!-- Option 2: Separate Popper and Bootstrap JS --></span></div><div> <span style="color: #6a9955;"><!--</span></div><div><span style="color: #6a9955;"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script></span></div><div><span style="color: #6a9955;"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script></span></div><div><span style="color: #6a9955;"> --></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div><div><span style="color: grey;"></html></span><span style="background-color: transparent;"> </span></div></div><p># use to migrate</p><p>python3 manage.py makemigrations</p><p>python3 manage.py migrate</p>
Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-63754438578167547042022-01-14T20:01:00.001+05:302022-01-14T20:01:17.002+05:30Django Commands for creating project and app
<p><b>These commands are for Ubuntu Terminal</b></p><p>To open terminal, use<b> Ctrl+T</b></p><p><b>1. To create project </b></p>
<div>
<pre> <code>
<p>django-admin startproject project_name</p>
</code>
</pre>
</div>
<p>Folder will contain one folder "project_name" and manage.py file.</p><p><b>2. To run the server</b> ( be in the directory where manage.py file exist)</p>
<div>
<pre> <code>
<p>python3 manage.py runserver</p>
</code>
</pre>
</div>
<p>Now, copy address from the terminal and paste in internet browser.</p><p><b>3. To start app </b>( to create app )</p>
<div>
<pre> <code>
<p>django-admin startapp myapp</p>
</code>
</pre>
</div>
<p><b>4. To know django-admin commands</b></p>
<div>
<pre> <code>
<p>python3 manage.py</p>
</code>
</pre>
</div>
<p>It will show these commands:</p><p>Type 'manage.py help <subcommand>' for help on a specific subcommand.</p><p>Available subcommands:</p><p>[auth]</p><p> changepassword</p><p> createsuperuser</p><p>[contenttypes]</p><p> remove_stale_contenttypes</p><p>[django]</p><p> check</p><p> compilemessages</p><p> createcachetable</p><p> dbshell</p><p> diffsettings</p><p> dumpdata</p><p> flush</p><p> inspectdb</p><p> loaddata</p><p> makemessages</p><p> makemigrations</p><p> migrate</p><p> sendtestemail</p><p> shell</p><p> showmigrations</p><p> sqlflush</p><p> sqlmigrate</p><p> sqlsequencereset</p><p> squashmigrations</p><p> startapp</p><p> startproject</p><p> test</p><p> testserver</p><p>[sessions]</p><p> clearsessions</p><p>[staticfiles]</p><p> collectstatic</p><p> findstatic</p><p> runserver </p><p><b>5. Change in setting for template and static files</b></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #c586c0;">from</span> pathlib <span style="color: #c586c0;">import</span> Path</div><div><span style="color: #c586c0;">import</span> os</div><br /><div><span style="color: #6a9955;"># Build paths inside the project like this: BASE_DIR / 'subdir'.</span></div><div>BASE_DIR = Path(<span style="color: #9cdcfe;">__file__</span>).resolve().parent.parent</div><br /><br /><div><span style="color: #6a9955;"># Quick-start development settings - unsuitable for production</span></div><div><span style="color: #6a9955;"># See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/</span></div><br /><div><span style="color: #6a9955;"># SECURITY WARNING: keep the secret key used in production secret!</span></div><div>SECRET_KEY = <span style="color: #ce9178;">'******************************</span><span style="color: #ce9178;">'</span></div><br /><div><span style="color: #6a9955;"># SECURITY WARNING: don't run with debug turned on in production!</span></div><div>DEBUG = <span style="color: #569cd6;">True</span></div><br /><div>ALLOWED_HOSTS = []</div><br /><br /><div><span style="color: #6a9955;"># Application definition</span></div><br /><div>INSTALLED_APPS = [</div><div> <span style="color: #ce9178;">'django.contrib.admin'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.auth'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.contenttypes'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.sessions'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.messages'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.staticfiles'</span>,</div><div>]</div><br /><div>MIDDLEWARE = [</div><div> <span style="color: #ce9178;">'django.middleware.security.SecurityMiddleware'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.sessions.middleware.SessionMiddleware'</span>,</div><div> <span style="color: #ce9178;">'django.middleware.common.CommonMiddleware'</span>,</div><div> <span style="color: #ce9178;">'django.middleware.csrf.CsrfViewMiddleware'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.auth.middleware.AuthenticationMiddleware'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.messages.middleware.MessageMiddleware'</span>,</div><div> <span style="color: #ce9178;">'django.middleware.clickjacking.XFrameOptionsMiddleware'</span>,</div><div>]</div><br /><div>ROOT_URLCONF = <span style="color: #ce9178;">'newproject.urls'</span></div><br /><div>TEMPLATES = [</div><div> {</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'BACKEND'</span>: <span style="color: #ce9178;">'django.template.backends.django.DjangoTemplates'</span>,</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'DIRS'</span>: [os.path.join(BASE_DIR,<span style="color: #ce9178;">'templates'</span>)], <span style="color: #6a9955;"># added manually</span></div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'APP_DIRS'</span>: <span style="color: #569cd6;">True</span>,</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'OPTIONS'</span>: {</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'context_processors'</span>: [</div><div> <span style="color: #ce9178;">'django.template.context_processors.debug'</span>,</div><div> <span style="color: #ce9178;">'django.template.context_processors.request'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.auth.context_processors.auth'</span>,</div><div> <span style="color: #ce9178;">'django.contrib.messages.context_processors.messages'</span>,</div><div> ],</div><div> },</div><div> },</div><div>]</div><br /><div>WSGI_APPLICATION = <span style="color: #ce9178;">'newproject.wsgi.application'</span></div><br /><br /><div><span style="color: #6a9955;"># Database</span></div><div><span style="color: #6a9955;"># https://docs.djangoproject.com/en/3.2/ref/settings/#databases</span></div><br /><div>DATABASES = {</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'default'</span>: {</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'ENGINE'</span>: <span style="color: #ce9178;">'django.db.backends.sqlite3'</span>,</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'NAME'</span>: BASE_DIR / <span style="color: #ce9178;">'db.sqlite3'</span>,</div><div> }</div><div>}</div><br /><br /><div><span style="color: #6a9955;"># Password validation</span></div><div><span style="color: #6a9955;"># https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators</span></div><br /><div>AUTH_PASSWORD_VALIDATORS = [</div><div> {</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'NAME'</span>: <span style="color: #ce9178;">'django.contrib.auth.password_validation.UserAttributeSimilarityValidator'</span>,</div><div> },</div><div> {</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'NAME'</span>: <span style="color: #ce9178;">'django.contrib.auth.password_validation.MinimumLengthValidator'</span>,</div><div> },</div><div> {</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'NAME'</span>: <span style="color: #ce9178;">'django.contrib.auth.password_validation.CommonPasswordValidator'</span>,</div><div> },</div><div> {</div><div><span style="color: #9cdcfe;"> </span><span style="color: #ce9178;">'NAME'</span>: <span style="color: #ce9178;">'django.contrib.auth.password_validation.NumericPasswordValidator'</span>,</div><div> },</div><div>]</div><br /><br /><div><span style="color: #6a9955;"># Internationalization</span></div><div><span style="color: #6a9955;"># https://docs.djangoproject.com/en/3.2/topics/i18n/</span></div><br /><div>LANGUAGE_CODE = <span style="color: #ce9178;">'en-us'</span></div><br /><div>TIME_ZONE = <span style="color: #ce9178;">'UTC'</span></div><br /><div>USE_I18N = <span style="color: #569cd6;">True</span></div><br /><div>USE_L10N = <span style="color: #569cd6;">True</span></div><br /><div>USE_TZ = <span style="color: #569cd6;">True</span></div><br /><br /><div><span style="color: #6a9955;"># Static files (CSS, JavaScript, Images)</span></div><div><span style="color: #6a9955;"># https://docs.djangoproject.com/en/3.2/howto/static-files/</span></div><br /><div>STATIC_URL = <span style="color: #ce9178;">'/static/'</span></div><div><span style="color: #6a9955;"># added manually</span></div><div>STATICFILES_DIRS = [</div><div> os.path.join(BASE_DIR,<span style="color: #ce9178;">'static'</span>)</div><div> ]</div><br /><br /><div><span style="color: #6a9955;"># Default primary key field type</span></div><div><span style="color: #6a9955;"># https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field</span></div><br /><div>DEFAULT_AUTO_FIELD = <span style="color: #ce9178;">'django.db.models.BigAutoField'</span></div></div><p><br /></p> Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-56498284413748515602020-05-19T18:04:00.002+05:302020-05-19T18:04:27.395+05:30Regularization<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal">
<span style="font-family: inherit;"><b>Regularization</b>, in <span style="color: #450000;">mathematics </span>and <span style="color: #450000;">statistics </span>and particularly in the fields of <span style="color: #450000;">machine learning </span>and <span style="color: #450000;">inverse problems</span>, refers to a process of introducing additional information in order to solve an <span style="color: #450000;">ill-posed problem </span>or to prevent <span style="color: #450000;">overfitting</span>. This information is usually in the form of a penalty for complexity, such as restrictions for <span style="color: #450000;">smoothness </span>or bounds on the <span style="color: #450000;">vector space norm</span>. From a <span style="color: #450000;">Bayesian </span>point of view, many regularization techniques correspond to imposing certain <span style="color: #450000;">prior </span>distributions on model parameters. The same idea arose in many fields of <span style="color: #450000;">science</span>. For example, the <span style="color: #450000;">least-squares method </span>can be viewed as a very simple form of regularization. A simple form of regularization applied to <span style="color: #450000;">integral equations</span> generally termed <span style="color: #450000;">Tikhonov regularization </span>after <span style="color: #450000;">Andrey Nikolayevich</span><span style="color: #450000;"> </span><span style="color: #450000;">Tikhonov</span>, is essentially a trade-off between fitting the data and reducing the norm of the solution. More recently, <span style="color: #450000;">non-linear regularization </span>methods, including <span style="color: #450000;">total variation regularization </span>have become popular. <o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: inherit;"><b>Regularization in machine learning: </b><b> </b>In machine learning, the regularization method is used for model selection, in particular, to prevent <span style="color: #450000;">overfitting </span>by penalizing models with extreme parameter values. The most common variants in machine learning are <i>L</i>₁ and <i>L</i>₂ regularization, which can be added to learning algorithms that minimize a <span style="color: #450000;">loss function </span>E(<i>X</i>, <i>Y</i>) by instead minimizing E(<i>X</i>, <i>Y</i>) + α‖<i>w</i>‖, where w is the model’s weight vector, ‖·‖ is either the <i>L</i>₁ norm or the </span><span style="font-family: inherit;">squared </span><i style="font-family: inherit;">L</i><span style="font-family: inherit;">₂ norm, and α is a free parameter that needs </span><span style="font-family: inherit;">to be tuned empirically</span><span style="font-family: inherit;">. This method applies to </span><span style="font-family: inherit;">many models. When applied in </span><span style="color: #450000; font-family: inherit;">linear regression</span><span style="font-family: inherit;">, the resulting </span><span style="font-family: inherit;">models are termed </span><span style="color: #450000; font-family: inherit;">lasso </span><span style="font-family: inherit;">or </span><span style="color: #450000; font-family: inherit;">ridge regression</span><span style="font-family: inherit;">, but </span><span style="font-family: inherit;">regularization is also employed in (binary and </span><span style="color: #450000; font-family: inherit;">multiclass</span><span style="font-family: inherit;">) </span><span style="color: #450000; font-family: inherit;">logistic regression</span><span style="font-family: inherit;">, </span><span style="color: #450000; font-family: inherit;">neural nets</span><span style="font-family: inherit;">, </span><span style="color: #450000; font-family: inherit;">support vector machines</span><span style="font-family: inherit;">, </span><span style="font-family: inherit;"><span style="color: #450000;">conditional random fields, </span>and some <span style="color: #450000;">matrix decomposition </span></span><span style="font-family: inherit;">methods. </span><i style="font-family: inherit;">L</i><span style="font-family: inherit;">₂ regularization may also be called </span><span style="font-family: inherit;">“weight decay”, in particular in the setting of neural nets. </span><i style="font-family: inherit;">L</i><span style="font-family: inherit;">₁ regularization is often preferred because it produces </span><span style="font-family: inherit;">sparse models and thus performs </span><span style="color: #450000; font-family: inherit;">feature selection </span><span style="font-family: inherit;">within </span><span style="font-family: inherit;">the learning algorithm, but since the </span><i style="font-family: inherit;">L</i><span style="font-family: inherit;">₁ norm is not differentiable, </span><span style="font-family: inherit;">it may require changes to learning algorithms, </span><span style="font-family: inherit;">in particular gradient-based learners.</span><span style="color: #000045; font-family: inherit;"> </span><span style="color: #450000; font-family: inherit;">Bayesian learning </span><span style="font-family: inherit;">methods make use of a </span><span style="color: #450000; font-family: inherit;">prior probability </span><span style="font-family: inherit;">that (usually) gives a lower probability to more complex </span><span style="font-family: inherit;">models. Well-known model selection techniques include </span><span style="font-family: inherit;">the </span><span style="color: #450000; font-family: inherit;">Akaike information criterion </span><span style="font-family: inherit;">(AIC), </span><span style="color: #450000; font-family: inherit;">minimum </span><span style="color: #450000; font-family: inherit;">description length </span><span style="font-family: inherit;">(MDL), and the </span><span style="color: #450000; font-family: inherit;">Bayesian information </span><span style="color: #450000; font-family: inherit;">criterion </span><span style="font-family: inherit;">(BIC). Alternative methods of controlling </span><span style="font-family: inherit;">overfitting not involving regularization include <span style="color: #450000;">cross validation</span></span><span style="font-family: inherit;">. </span><span style="font-family: inherit;">Regularization can be used to fine-tune model complexity </span><span style="font-family: inherit;">using an augmented error function with cross-validation. </span><span style="font-family: inherit;">The data sets used in complex models can produce a </span><span style="font-family: inherit;">leveling-off of validation as the complexity of the models increases. </span><span style="font-family: inherit;">Training data sets errors decrease while the validation </span><span style="font-family: inherit;">data set error remains constant. Regularization introduces </span><span style="font-family: inherit;">a second factor that weights the penalty against </span><span style="font-family: inherit;">more complex models with increased variance in the </span><span style="font-family: inherit;">data errors. This gives an increasing penalty as model </span><span style="font-family: inherit;">complexity increases.</span><span style="color: #000045; font-family: inherit;"> </span></div>
<div class="MsoNormal">
<span style="font-family: inherit;">Examples of applications of different methods of regularization </span><span style="font-family: inherit;">to the </span><span style="color: #450000; font-family: inherit;">linear model </span><span style="font-family: inherit;">are: </span><span style="font-family: inherit;">A linear combination of the LASSO and </span><span style="background: rgb(255, 255, 255); font-family: inherit;"><o:p></o:p></span><span style="font-family: inherit;">ridge regression </span><span style="font-family: inherit;">methods is elastic net regularization.</span></div>
</div>
Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com1tag:blogger.com,1999:blog-1219980476801326118.post-38711730513455632992020-05-18T17:18:00.003+05:302020-05-18T21:23:21.627+05:30Data Mining<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><b><span style="color: black;">Data
mining </span></b><span style="color: black;">(the analysis step of
the “Knowledge Discovery in Databases” process, or KDD),</span><span style="color: #000045;"> </span><span style="color: black;">an interdisciplinary subfield of </span><span style="color: #450000;">computer science</span><span style="color: black;">,</span><span style="color: #000045;"> </span><span style="color: black;">is the computational process of
discovering patterns in large </span><span style="color: #450000;">data sets </span><span style="color: black;">involving methods at the intersection of </span><span style="color: #450000;">artificial intelligence</span><span style="color: black;">, </span><span style="color: #450000;">machine learning</span><span style="color: black;">, </span><span style="color: #450000;">statistics</span><span style="color: black;">, and </span><span style="color: #450000;">database systems</span><span style="color: black;">.</span><span style="color: #000045;"> </span><span style="color: black;">The overall goal of the data mining
process is to extract information from a data set and transform it into an
understandable structure for further use.</span><span style="color: #000045;"> </span><span style="color: black;">Aside from the raw
analysis step, it involves database and </span><span style="color: #450000;">data management </span><span style="color: black;">aspects, </span><span style="color: #450000;">data pre-processing</span><span style="color: black;">, </span><span style="color: #450000;">model </span><span style="color: black;">and </span><span style="color: #450000;">inference </span><span style="color: black;">considerations, interestingness metrics, </span><span style="color: #450000;">complexity </span><span style="color: black;">considerations, post-processing of discovered </span></span><span style="font-family: inherit;">structures, </span><span style="color: #450000; font-family: inherit;">visualization</span><span style="font-family: inherit;">, and </span><span style="color: #450000; font-family: inherit;">online updating.</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><b style="mso-bidi-font-weight: normal;"><span style="color: #450000;">Process</span></b><span style="color: #450000;">: </span><span style="color: black;">The </span><span style="color: black;">Knowledge Discovery in
Databases (KDD) process </span><span style="color: black;">is commonly defined with the stages:</span><b><span style="color: black;"><o:p></o:p></span></b></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">(1) Selection<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">(2) Pre-processing<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">(3) Transformation<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span style="color: black;">(4) </span><span style="color: black;">Data Mining<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">(5) Interpretation/Evaluation.<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span style="color: black;">It exists, however, in many variations on this theme,
such as the </span><span style="color: #450000;">Cross Industry
Standard Process for Data Mining </span><span style="color: black;">(CRISP-DM) which defines six phases:<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">(1) Business Understanding<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">(2) Data Understanding<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">(3) Data Preparation<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">(4) Modeling<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">(5) Evaluation<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">(6) Deployment<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span style="color: black;">or a simplified process such as (1) pre-processing,
(2) data mining, and (3) results validation.</span><b style="mso-bidi-font-weight: normal;"><span style="background: white; color: black;"> <span lang="EN-IN"><o:p></o:p></span></span></b></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><b style="mso-bidi-font-weight: normal;"><span lang="EN-IN" style="background: white; color: black;">Pre-Processing: </span></b><span lang="EN-IN" style="background: white; color: black;">It is the first step to be
done in the process of data mining. In pre-processing, we try to look at the
data. The </span>target data set must be
assembled.<b style="mso-bidi-font-weight: normal;"><span style="background: white; color: black;"> </span></b><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span lang="EN-IN" style="background: white; color: black;">The data
mining can only uncover patterns and features (required) present in data, Target
data set must be large enough to contain the features and patterns. </span><span style="color: black;">Pre-processing is essential to analyze the
</span><span style="color: #450000;">multivariate </span><span style="color: black;">data sets before data mining. The target
set is then cleaned. </span><span style="color: #450000;">Data cleaning </span><span style="color: black;">removes the observations containing </span><span style="color: #450000;">noise </span><span style="color: black;">and those with </span><span style="color: #450000;">missing data</span><span style="color: black;">.</span><span style="background: white; color: black;"> <span lang="EN-IN"><o:p></o:p></span></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><b style="mso-bidi-font-weight: normal;"><span lang="EN-IN" style="background: white; color: black;">Data Mining:</span></b><span lang="EN-IN" style="background: white; color: black;"> <span style="mso-spacerun: yes;"> </span>In the data mining task, we simply do six tasks.
Anomaly detection, Association <span style="mso-spacerun: yes;"> </span>Rule
Learning, Clustering, Classification, Regression, and summarization. </span></span><span lang="EN-IN" style="background: white; font-family: inherit;"> </span><span style="color: #450000; font-family: inherit;">Anomaly detection </span><span style="font-family: inherit;">means identification of unusual
data records, that might be interesting or data errors that require further
investigation. In </span><span style="font-family: inherit;"> </span><span style="color: #450000; font-family: inherit;">Association rule learning, simply sear</span><span style="font-family: inherit;">ch for relationships between variables.
For example, a supermarket might gather data on customer purchasing habits. Using association rule learning,
the supermarket can determine which products are frequently bought together and
use this</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">information for marketing purposes. This is sometimes referred
to as market basket analysis.<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span style="color: black;">In <span style="mso-spacerun: yes;"> </span></span><span style="color: #450000;">Clustering,</span><span style="color: black;"> the task of discovering groups and structures
in the data that are in some way or another </span></span><span style="font-family: inherit;">“similar”, without using known structures in the data.
In </span><span style="color: #450000; font-family: inherit;">Classification, </span><span style="font-family: inherit;"> the
task of generalizing known </span><span style="font-family: inherit;">structure to apply to new data. For example, an email program
might attempt to classify an e-mail as </span><span style="font-family: inherit;">“legitimate” or as “spam”. In </span><span style="color: #450000; font-family: inherit;">Regression, </span><span style="font-family: inherit;"> attempts to find a function that models the
data with the least error. Finally in </span><span style="color: #450000; font-family: inherit;">Summarization, </span><span style="font-family: inherit;"> provide a more compact
representation of the data set, including visualization and report generation.</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span lang="EN-IN" style="background: white; color: black;"><b>Result
Verification:</b> </span><span style="color: black;">The final step of
knowledge discovery from data is to verify that the patterns produced by the
data mining algorithms occur in the wider data set. Not all patterns found by
the data mining algorithms are necessarily valid. It is common for the data
mining algorithms to find patterns in the training set which are not present in
the general data set. This is called </span><span style="color: #450000;">overfitting</span><span style="color: black;">. To overcome this, the evaluation uses a </span><span style="color: #450000;">test set </span><span style="color: black;">of data on which the data mining algorithm was not trained. The learned
patterns are </span></span><span style="font-family: inherit;">applied to this test set, and the
resulting output is compared to the desired output.</span><span style="font-family: inherit;"> If the learned patterns do not meet the desired
standards, subsequently it is necessary to re-evaluate and change the pre-processing
and data mining steps. If the learned patterns do meet the desired standards,
then the final step is to interpret the learned patterns and turn them into
knowledge.</span></div>
<br /></div>
Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-70120789436327306112020-05-18T10:30:00.001+05:302020-05-18T21:26:23.636+05:30Multiple regression: Python<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">import numpy as np<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">from sklearn import linear_model<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">import sklearn.metrics as sm<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">from sklearn.preprocessing import PolynomialFeatures<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;"># Input file containing data<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">input_file = 'data_multivar_regr.txt'<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;"># Load the data from the input file<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">data = np.loadtxt(input_file, delimiter=',')<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">X, y = data[:, :-1], data[:, -1]<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;"># Split data into training and testing<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">num_training = int(0.8 * len(X))<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">num_test = len(X) - num_training<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;"># Training data<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">X_train, y_train = X[:num_training], y[:num_training]<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;"># Test data<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">X_test, y_test = X[num_training:], y[num_training:]<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;"># Create the linear regressor model<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">linear_regressor = linear_model.LinearRegression()<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;"># Train the model using the training sets<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">linear_regressor.fit(X_train, y_train)<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><b style="mso-bidi-font-weight: normal;"><span lang="EN-IN" style="background: white; color: black;">LinearRegression(copy_X=True, fit_intercept=True,
n_jobs=None, normalize=False)</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;"><o:p></o:p></span></b></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;"># Predict the output<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">y_test_pred = linear_regressor.predict(X_test)<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;"># Measure performance<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">print("Linear Regressor performance:")<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">print("Mean absolute error =",
round(sm.mean_absolute_error(y_test,<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">y_test_pred), 2))<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">print("Mean squared error =",
round(sm.mean_squared_error(y_test,<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">y_test_pred), 2))<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">print("Median absolute error =",
round(sm.median_absolute_error(y_test,<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">y_test_pred), 2))<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">print("Explained variance score =",<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">round(sm.explained_variance_score(y_test,
y_test_pred), 2))<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">print("R2 score =",
round(sm.r2_score(y_test, y_test_pred), 2))<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><b style="mso-bidi-font-weight: normal;"><span lang="EN-IN" style="background: white; color: black;">Linear Regressor performance: Mean absolute error = 3.58 Mean
squared error = 20.31 Median absolute error = 2.99 Explained variance score =
0.86 R2 score = 0.86</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;"><o:p></o:p></span></b></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;"># Polynomial regression<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">polynomial = PolynomialFeatures(degree=10)<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">X_train_transformed =
polynomial.fit_transform(X_train)<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">datapoint = [[7.75, 6.35, 5.56]]<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">poly_datapoint = polynomial.fit_transform(datapoint)<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">poly_linear_model = linear_model.LinearRegression()<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">poly_linear_model.fit(X_train_transformed, y_train)<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">print("\nLinear regression:\n",
linear_regressor.predict(datapoint))<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;">print("\nPolynomial regression:\n",poly_linear_model.predict(poly_datapoint))<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span lang="EN-IN" style="background: white; color: black;"><span style="font-family: inherit;"><b>Linear
regression: [36.05286276] Polynomial regression: [41.45709521]<o:p></o:p></b></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<br /></div>
Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-35597747056700398962020-05-17T19:05:00.001+05:302020-05-18T21:23:21.564+05:30Dimensionality Reduction<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span style="color: black;">For dimensional
reduction in physics, see </span><span style="color: #450000;">Dimensional </span></span><span style="color: #450000; font-family: inherit;">reduction</span><span style="font-family: inherit;">. </span><span style="font-family: inherit;">In </span><span style="color: #450000; font-family: inherit;">machine learning </span><span style="font-family: inherit;">and </span><span style="color: #450000; font-family: inherit;">statistics</span><span style="font-family: inherit;">, </span><b style="font-family: inherit;">dimensionality </b><b style="font-family: inherit;">reduction </b><span style="font-family: inherit;">or </span><b style="font-family: inherit;">dimension reduction </b><span style="font-family: inherit;">is the process </span><span style="font-family: inherit;">of reducing the number of random variables under </span><span style="font-family: inherit;">consideration</span><span style="color: #000045; font-family: inherit;"> </span><span style="font-family: inherit;">and can be divided
into </span><span style="color: #450000; font-family: inherit;">feature selection </span><span style="font-family: inherit;">and </span><span style="color: #450000; font-family: inherit;">feature extraction</span><span style="font-family: inherit;">.</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><b><span style="color: black;"><br /></span></b></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><b><span style="color: black;">1.Feature selection</span></b></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: #450000; font-family: inherit;">Feature selection </span><span style="font-family: inherit;">approaches try to find a subset of the </span><span style="font-family: inherit;">original variables (also called features or
attributes). Two </span><span style="font-family: inherit;">strategies are </span><span style="font-family: inherit;">filter </span><span style="font-family: inherit;">(e.g. </span><span style="color: #450000; font-family: inherit;">information gain</span><span style="font-family: inherit;">) and </span><span style="font-family: inherit;">wrapper </span><span style="font-family: inherit;">(e.g. search guided by the accuracy) approaches. </span><span style="font-family: inherit;">In some cases, </span><span style="color: #450000; font-family: inherit;">data analysis </span><span style="font-family: inherit;">such as </span><span style="color: #450000; font-family: inherit;">regression </span><span style="font-family: inherit;">or </span><span style="color: #450000; font-family: inherit;">classification </span><span style="font-family: inherit;">can be done in the reduced space more accurately </span><span style="font-family: inherit;">than in the original space.</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><b><span style="color: black;">2. Feature extraction</span></b><span style="color: #450000;"><o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span style="color: #450000;">Feature extraction </span><span style="color: black;">transforms the data in the high-dimensional </span></span><span style="color: #450000; font-family: inherit;">space </span><span style="font-family: inherit;">to a space of fewer </span><span style="color: #450000; font-family: inherit;">dimensions</span><span style="font-family: inherit;">. The </span><span style="font-family: inherit;">data transformation may be linear, as in </span><span style="color: #450000; font-family: inherit;">principal component </span><span style="color: #450000; font-family: inherit;">analysis </span><span style="font-family: inherit;">(PCA), but many </span><span style="color: #450000; font-family: inherit;">nonlinear dimensionalities </span><span style="color: #450000; font-family: inherit;">reduction </span><span style="font-family: inherit;">techniques also exist</span><span style="color: #000045; font-family: inherit;">. </span><span style="font-family: inherit;">For multidimensional </span><span style="font-family: inherit;">data, </span><span style="color: #450000; font-family: inherit;">tensor </span><span style="font-family: inherit;">representation can be
used in dimensionality </span><span style="font-family: inherit;">reduction through </span><span style="color: #450000; font-family: inherit;">multilinear subspace learning</span><span style="font-family: inherit;">.</span><span style="color: #000045; font-family: inherit;"> </span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;">The main linear the technique for dimensionality reduction, </span><span style="font-family: inherit;">principal component analysis performs a linear
mapping </span><span style="font-family: inherit;">of the data to a lower-dimensional space in such a way
that </span><span style="font-family: inherit;">the variance of the data in the low-dimensional
representation </span><span style="font-family: inherit;">is maximized. In practice, the </span><span style="color: #450000; font-family: inherit;">correlation </span><span style="font-family: inherit;">matrix of </span><span style="font-family: inherit;">the data is constructed and the </span><span style="color: #450000; font-family: inherit;">eigenvectors </span><span style="font-family: inherit;">on this matrix are</span><span style="font-family: inherit;"> computed. The eigenvectors that correspond to the </span><span style="font-family: inherit;">largest eigenvalues (the principal components) can now </span><span style="font-family: inherit;">be used to reconstruct a large fraction of the variance of </span><span style="font-family: inherit;">the original data. Moreover, the first few eigenvectors can </span><span style="font-family: inherit;">often be interpreted in terms of the large-scale physical </span><span style="font-family: inherit;">behavior of the system. The original space (with a dimension </span><span style="font-family: inherit;">of the number of points) has been reduced (with data </span><span style="font-family: inherit;">loss, but hopefully retaining the most important variance) </span><span style="font-family: inherit;">to space spanned by a few eigenvectors.</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;">A different approach to nonlinear dimensionality reduc<span style="color: black;">tion is through the use of </span><span style="color: #450000;">autoencoders</span><span style="color: black;">, a special kind of </span></span><span style="font-family: inherit;">feed-forward </span><span style="color: #450000; font-family: inherit;">neural networks </span><span style="font-family: inherit;">with a bottle-neck hidden </span><span style="font-family: inherit;">layer.</span><span style="color: #000045; font-family: inherit;"> </span><span style="font-family: inherit;">The training of deep
encoders are typically performed </span><span style="font-family: inherit;">using a greedy layer-wise pre-training (e.g., using </span><span style="font-family: inherit;">a stack of </span><span style="color: #450000; font-family: inherit;">restricted Boltzmann machines</span><span style="font-family: inherit;">) that is followed </span><span style="font-family: inherit;">by a finetuning stage based on </span><span style="color: #450000; font-family: inherit;">backpropagation</span><span style="font-family: inherit;">.</span></div>
<br /></div>
Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-67903561287451973782020-05-17T18:57:00.000+05:302020-05-18T21:23:22.139+05:30Expectation Maximization EM Algorithm<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span style="color: black;">The EM algorithm is used to
find the (locally) </span><span style="color: #450000;">maximum likelihood </span></span><span style="font-family: inherit;">parameters of a </span><span style="color: #450000; font-family: inherit;">statistical model </span><span style="font-family: inherit;">in cases where </span><span style="font-family: inherit;">the equations cannot be solved directly. Typically
these </span><span style="font-family: inherit;">models involve </span><span style="color: #450000; font-family: inherit;">latent variables </span><span style="font-family: inherit;">in addition to unknown </span><span style="color: #450000; font-family: inherit;">parameters </span><span style="font-family: inherit;">and known data observations. That is, either </span><span style="font-family: inherit;">there are </span><span style="color: #450000; font-family: inherit;">missing values </span><span style="font-family: inherit;">among the data, or the model </span><span style="font-family: inherit;">can be formulated more simply by assuming the
existence </span><span style="font-family: inherit;">of additional unobserved data points. </span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;">For example, </span><span style="font-family: inherit;">a </span><span style="color: #450000; font-family: inherit;">mixture model </span><span style="font-family: inherit;">can be described more simply by </span><span style="font-family: inherit;">assuming that each observed data point has a
corresponding the </span><span style="font-family: inherit;">unobserved data point, or latent variable, specifying </span><span style="font-family: inherit;">the mixture component that each data point belongs to. </span><span style="font-family: inherit;">Finding a maximum likelihood solution typically
requires</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span style="color: black;">taking the </span><span style="color: #450000;">derivatives </span><span style="color: black;">of the </span><span style="color: #450000;">likelihood function
</span><span style="color: black;">with respect </span></span><span style="font-family: inherit;">to all the unknown values: the parameters </span><span style="font-family: inherit;">and the latent variables, and simultaneously solving
the </span><span style="font-family: inherit;">resulting equations. In statistical models with latent
variables, </span><span style="font-family: inherit;">this usually is not possible. Instead, the result is </span><span style="font-family: inherit;">typically a set of interlocking equations in which the
solution </span><span style="font-family: inherit;">to the parameters requires the values of the latent </span><span style="font-family: inherit;">variables and vice versa, but substituting one set of
equations </span><span style="font-family: inherit;">into the other produces an unsolvable equation. </span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;">One
can simply pick arbitrary values for one </span><span style="font-family: inherit;">of the two sets of unknowns, use them to estimate the </span><span style="font-family: inherit;">second set, then use these new values to find a better
estimate </span><span style="font-family: inherit;">of the first set, and then keep alternating between </span><span style="font-family: inherit;">the two until the resulting values both converge to
fixed </span><span style="font-family: inherit;">points. It’s not obvious that this will work at all,
but in fact, </span><span style="font-family: inherit;">it can be proven that in this particular context it
does, and </span><span style="font-family: inherit;">that the derivative of the likelihood is (arbitrarily
close </span><span style="font-family: inherit;">to) zero at that point, which in turn means that the
point </span><span style="font-family: inherit;">is either a maximum or a </span><span style="color: #450000; font-family: inherit;">saddle point</span><span style="font-family: inherit;">. In general, there </span><span style="font-family: inherit;">may be multiple maxima, and there is no guarantee that </span><span style="font-family: inherit;">the global maximum will be found.</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<br /></div>
Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-57298358384582708532020-05-17T18:52:00.003+05:302020-05-18T21:23:21.979+05:30Cross Validation<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><b><span style="color: black;">Cross-validation</span></b><span style="color: black;">, sometimes called </span><b><span style="color: black;">rotation estimation</span></b><span style="color: black;">,</span><span style="color: #000045;"> <span style="mso-spacerun: yes;"> </span></span><span style="color: black;">is a </span><span style="color: #450000;">model validation </span><span style="color: black;">technique for assessing how the results of a </span><span style="color: #450000;">statistical </span><span style="color: black;">analysis will generalize to an independent
data set. It is mainly used in settings where the goal is prediction, and one
wants to estimate how </span><span style="color: #450000;">accurately </span><span style="color: black;">a predictive model will perform in practice. In a prediction problem, a
model is usually given a dataset of </span><span style="color: black;">known data </span><span style="color: black;">on which training is run (</span><span style="color: black;">training dataset</span><span style="color: black;">), and a dataset of </span><span style="color: black;">unknown data </span><span style="color: black;">(or </span><span style="color: black;">first seen </span><span style="color: black;">data) </span></span><span style="font-family: inherit;">against which the model is tested (</span><span style="font-family: inherit;">testing dataset</span><span style="font-family: inherit;">).</span><span style="color: #000045; font-family: inherit;"> </span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;">The goal of cross-validation is to define a dataset to “test” the model in the training phase
(i.e., the </span><span style="font-family: inherit;">validation dataset</span><span style="font-family: inherit;">), in order to limit problems like </span><span style="color: #450000; font-family: inherit;">overfitting</span><span style="font-family: inherit;">, give an insight on how the model will generalize to an independent dataset
(i.e., an unknown dataset, for instance from a real problem), etc. </span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;">One round of
cross-validation involves </span><span style="color: #450000; font-family: inherit;">partitioning </span><span style="font-family: inherit;">a </span><span style="color: #450000; font-family: inherit;">sample </span><span style="font-family: inherit;">of </span><span style="color: #450000; font-family: inherit;">data </span><span style="font-family: inherit;">into </span><span style="color: #450000; font-family: inherit;">complementary </span><span style="font-family: inherit;">subsets, performing the analysis on one subset (called the </span><span style="font-family: inherit;">training set</span><span style="font-family: inherit;">), and validating the analysis on the other subset
(called the </span><span style="font-family: inherit;">validation set </span><span style="font-family: inherit;">or </span><span style="font-family: inherit;">testing set</span><span style="font-family: inherit;">). To reduce </span><span style="color: #450000; font-family: inherit;">variability</span><span style="font-family: inherit;">, multiple rounds of cross-validation are performed using different partitions,
and the validation results are averaged over the </span><span style="font-family: inherit;">rounds. One of the main reasons for using
cross-validation instead of using the conventional validation </span><span style="font-family: inherit;">(e.g. partitioning the data set into two sets of 70%
for training and 30% for the test,) is that the error (e.g. Root </span><span style="font-family: inherit;">Mean Square Error) on the training set in the
conventional validation is not a useful estimator of model performance and thus
the error on the test data set does not properly represent the assessment of
model performance. This may be due to the fact that there is not enough data available
or there is not a good distribution and spread of data to partition it into
separate training and test sets in the conventional validation method. In these
cases, a fair way to properly estimate model prediction performance is </span><span style="font-family: inherit;">to use cross-validation as a powerful general
technique.</span><span style="font-family: inherit;"> In summary, cross-validation
combines (averages) measures of</span><span style="font-family: inherit;"> fit (prediction error)
to correct for the optimistic nature of training error and derive a more accurate
estimate of model prediction performance.</span></div>
<br /></div>
Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-28112455755885618012020-05-17T18:50:00.001+05:302020-05-18T21:23:21.468+05:30Naïve Bayes Classifier<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">In </span><span style="color: #450000; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">machine learning</span><span style="color: black; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">, N</span><b><span style="color: black; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerifBold;">aive Bayes classifiers </span></b><span style="color: black; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">are a family of simple </span><span style="color: #450000; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">probabilistic classifiers </span><span style="color: black; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">based on applying </span><span style="color: #450000; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">Bayes’ theorem </span><span style="color: black; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">with strong (naive) </span><span style="color: #450000; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">independence </span><span style="color: black; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">assumptions between the features.</span><span style="font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;"> Naive Bayes classifiers are highly scalable,
requiring a number of parameters linear in the number of variables (features/predictors)
in a learning problem. <span style="color: black;">Naive Bayes is a simple technique for constructing classifiers: models that assign class labels to
problem instances represented as vectors of </span><span style="color: #450000;">feature
</span><span style="color: black;">values, where the class labels are drawn from
some finite set. It is not a single </span><span style="color: #450000;">algorithm
</span><span style="color: black;">for training such classifiers, but a family of
algorithms based on a common principle: all naive Bayes classifiers assume that
the value of a particular feature is </span><span style="color: #450000;">independent
</span><span style="color: black;">of the value of any other feature, given </span>the
class variable. <o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">For example, a fruit may be considered<span style="mso-spacerun: yes;"> </span>to be an apple if it is red, round, and about
3 cm in diameter. A naive Bayes classifier considers each of these features to
contribute independently to the probability that this fruit is an apple,
regardless of any possible </span><span style="color: #450000; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">correlations </span><span style="color: black; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">between the color, roundness, and diameter </span><span style="font-family: Arial, sans-serif;">features. For some types of probability models, naive
Bayes classifiers can be trained very efficiently in a </span><span style="color: #450000; font-family: Arial, sans-serif;">supervised learning </span><span style="font-family: Arial, sans-serif;">setting. In many practical applications,
parameter estimation for naive Bayes models uses the method of </span><span style="color: #450000; font-family: Arial, sans-serif;">maximum likelihood</span><span style="font-family: Arial, sans-serif;">; in other words, one can work with the
naive Bayes model without accepting </span><span style="color: #450000; font-family: Arial, sans-serif;">Bayesian probability </span><span style="font-family: Arial, sans-serif;">or using any Bayesian methods.</span><span style="font-family: Arial, sans-serif;"> An
advantage of naive Bayes is that it only requires a small amount of training
data to estimate the parameters necessary for classification.</span></div>
<br /></div>
Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-74693785597136273502020-05-16T19:49:00.001+05:302020-05-18T21:23:22.203+05:30Quantities of Information : KL Divergence<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><b style="mso-bidi-font-weight: normal;"><span style="color: black;">4.Kullback-Leibler
divergence ( Information gain ): </span></b><span style="color: black;">The </span><b><span style="color: #450000;">Kullback–Leibler
divergence </span></b><span style="color: black;">(or </span><b><span style="color: black;">information divergence</span></b><span style="color: black;">, </span><b><span style="color: black;">information
gain</span></b><span style="color: black;">, or </span><b><span style="color: black;">relative entropy</span></b><span style="color: black;">) is a way of comparing two distributions:
a “true” </span><span style="color: #450000;">probability distribution
</span><span style="color: black;">p(X)</span><span style="color: black;">, and an arbitrary
probability distribution </span><span style="color: black;">q(X)</span><span style="color: black;">. If we compress data in a manner that assumes </span><span style="color: black;">q(X) </span><span style="color: black;">is the distribution underlying some data,
when, in reality, </span><span style="color: black;">p(X) </span><span style="color: black;">is the correct distribution, the Kullback–Leibler divergence is the number of average additional bits per datum necessary for compression. It is
thus defined <o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: inherit;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnd7tnSEkQjO4HHYneK6TCJRN40MR4bSjf0b-WjSHNk03ESXonuQ6FbDM1OTOGCcnyYheW2EMf3R5oX6_KcpqelqNuiJp1ahGCC8NGEydhSRPLNQcoHVzCRG6cxncw8NtCAoHXYH7KvgEk/s1600/51.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="84" data-original-width="385" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnd7tnSEkQjO4HHYneK6TCJRN40MR4bSjf0b-WjSHNk03ESXonuQ6FbDM1OTOGCcnyYheW2EMf3R5oX6_KcpqelqNuiJp1ahGCC8NGEydhSRPLNQcoHVzCRG6cxncw8NtCAoHXYH7KvgEk/s640/51.PNG" width="640" /></a></span></div>
<br />
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><o:p><span style="font-family: inherit;"><br /></span></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><o:p><span style="font-family: inherit;"><br /></span></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span style="color: black;">Although it is sometimes used as a 'distance metric',
KL divergence is not a true </span><span style="color: #450000;">metric </span><span style="color: black;">since it is not
symmetric and does not satisfy the </span><span style="color: #450000;">triangle inequality </span><span style="color: black;">(making it a semi-quasi metric).<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><b><span style="color: black;">5.Kullback–Leibler divergence of a prior
from the truth: </span></b><span style="color: black;">Another interpretation of KL divergence is this: suppose a number </span><span style="color: black;">X </span><span style="color: black;">is about to be drawn randomly from a
discrete set with probability distribution </span><span style="color: black;">p(x)</span><span style="color: black;">. If Alice knows the true distribution </span><span style="color: black;">p(x)</span><span style="color: black;">, while Bob believes (has a </span><span style="color: #450000;">prior</span><span style="color: black;">) that the distribution is </span><span style="color: black;">q(x)</span><span style="color: black;">, then Bob will be more </span><span style="color: #450000;">surprised </span><span style="color: black;">than Alice, on average, upon seeing the value of </span><span style="color: black;">X</span><span style="color: black;">. The KL divergence is the (objective) the expected value of Bob’s (subjective) </span><span style="color: #450000;">surprisal </span><span style="color: black;">minus Alice’s surprisal, measured in bits if the </span><span style="color: black;">log </span><span style="color: black;">is in base 2. In this way, the extent to
which Bob’s prior is “wrong” can be quantified in terms of how </span></span><span style="font-family: inherit;">“unnecessarily surprised” it’s expected to make him.</span></div>
<br /></div>
Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-34304279553721937232020-05-16T19:46:00.003+05:302020-05-18T21:23:21.532+05:30Quantities of Information : Entropy II<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><b style="mso-bidi-font-weight: normal;"><span style="color: black;">2. Joint
Entropy: </span></b><span style="color: black;">The </span><b><span style="color: #450000;">joint entropy </span></b><span style="color: black;">of two discrete random variables </span><span style="color: black;">X </span><span style="color: black;">and </span><span style="color: black;">Y </span><span style="color: black;">is merely the entropy
of their pairing: (</span><span style="color: black;">X; Y </span><span style="color: black;">). This implies that
if </span><span style="color: black;">X </span><span style="color: black;">and </span><span style="color: black;">Y </span><span style="color: black;">are </span><span style="color: #450000;">independent</span><span style="color: black;">, then their joint entropy is the sum of
their individual entropies.<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span style="color: black;">For example, if (</span><span style="color: black;">X; Y </span><span style="color: black;">) represents the
position of a </span><span style="color: #450000;">chess </span><span style="color: black;">piece — </span><span style="color: black;">X </span><span style="color: black;">the row and </span><span style="color: black;">Y </span><span style="color: black;">the column, then the
joint entropy of the row of the piece and the column of the piece will be the entropy of the position of the piece.<o:p></o:p></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGcDMxI0CxsFmxR7msdJmvkHOyb9Bmqm34a34scf3gfBA3Ak3gm9V-GET5zeY-Sk3BdOVAzAElXR5FLM75FU6Lps4Xsym0cjm2WulAXRrhwDMGPnRM4vqqjTwUDfS0GRMdOKwCFlBmrwHg/s1600/49.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: inherit;"><img border="0" data-original-height="92" data-original-width="525" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGcDMxI0CxsFmxR7msdJmvkHOyb9Bmqm34a34scf3gfBA3Ak3gm9V-GET5zeY-Sk3BdOVAzAElXR5FLM75FU6Lps4Xsym0cjm2WulAXRrhwDMGPnRM4vqqjTwUDfS0GRMdOKwCFlBmrwHg/s640/49.PNG" width="640" /></span></a></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><o:p><span style="font-family: inherit;"> </span></o:p></span><span style="font-family: inherit;">Despite similar notation, joint entropy should not be
confused with </span><b style="font-family: inherit;"><span style="color: #450000;">cross
entropy</span></b><span style="font-family: inherit;">.</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<b style="mso-bidi-font-weight: normal;"><span style="color: black;"><span style="font-family: inherit;"><br /></span></span></b></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><b style="mso-bidi-font-weight: normal;"><span style="color: black;">3. Conditional entropy: </span></b><span style="color: black;">The </span><b><span style="color: #450000;">conditional entropy </span></b><span style="color: black;">or </span><b><span style="color: black;">conditional
uncertainty </span></b><span style="color: black;">of </span><span style="color: black;">X </span><span style="color: black;">given random variable </span><span style="color: black;">Y </span><span style="color: black;">(also called the </span><b><span style="color: black;">equivocation <span style="mso-spacerun: yes;"> </span></span></b><span style="color: black;">of </span><span style="color: black;">X </span><span style="color: black;">about </span><span style="color: black;">Y </span><span style="color: black;">) is the average conditional entropy over </span><span style="color: black;">Y<o:p></o:p></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTVVlawhJNq1qVtMUfHD2rmTZmC9VhyWVw1dL0A2QNde0Qvj60hfj8hM3cfI9hwG6za0vMWjBAwqOFxUVide0sNgDY3Ag_6MEapL6FsLeG1SpVeK3thUtNSkOGwoncIr8-L0JtRK4LAmq8/s1600/50.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="91" data-original-width="540" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTVVlawhJNq1qVtMUfHD2rmTZmC9VhyWVw1dL0A2QNde0Qvj60hfj8hM3cfI9hwG6za0vMWjBAwqOFxUVide0sNgDY3Ag_6MEapL6FsLeG1SpVeK3thUtNSkOGwoncIr8-L0JtRK4LAmq8/s640/50.PNG" width="640" /></a></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;">Because entropy can be conditioned on a
random variable or on that random variable is a certain value, care should
be taken not to confuse these two definitions of conditional entropy, the
former of which is in more common use. A basic property of this form of
conditional entropy is that:</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><b style="mso-bidi-font-weight: normal;"><span style="color: black;"><span style="mso-spacerun: yes;"> </span>H</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">(</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">X</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">|</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">Y </span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">) = </span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">H</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">(</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">X; Y </span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">) </span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">-</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;"> </span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">H</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">(</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">Y </span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">)<o:p></o:p></span></b></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<br /></div>
Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-35975901337912891212020-05-16T19:43:00.001+05:302020-05-18T21:23:21.596+05:30Quantities of Information : Entropy I<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><b style="mso-bidi-font-weight: normal;"><span style="color: black;">Quantities of
Information: </span></b><span style="color: black;">Information theory is based on </span><span style="color: #450000;">probability theory </span><span style="color: black;">and </span><span style="color: #450000;">statistics</span><span style="color: black;">. Information theory often concerns itself
with measures of information of the distributions associated with random
variables. Important quantities of information are </span><span style="color: #450000;">entropy</span><span style="color: black;">, a measure of information in a single </span><span style="color: #450000;">random variable</span><span style="color: black;">, and </span><span style="color: #450000;">mutual information</span><span style="color: black;">, a measure of information in common between two
random variables. <o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black;"><span style="font-family: inherit;"><br /></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><b style="mso-bidi-font-weight: normal;"><span style="color: black;">1. Entropy: </span></b><span style="color: black;">The </span><b><span style="color: #450000;">entropy</span></b><span style="color: black;">, </span><span style="color: black;">H</span><span style="color: black;">, of a discrete random variable </span><span style="color: black;">X </span><span style="color: black;">intuitively is a measure of the amount of </span><span style="color: black;">uncertainty </span><span style="color: black;">associated with the value of </span><span style="color: black;">X </span><span style="color: black;">when only its distribution is known. So,
for example, if the distribution associated with a random variable was a
constant distribution, </span>then
entropy is minimal and equal to 0. Furthermore, in the case of a distribution
restricted to take on a finite number of values, entropy is maximized with a
uniform distribution over the values that the distribution takes on.<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;">If X is the set of all messages <b style="mso-bidi-font-weight: normal;">{</b><b style="mso-bidi-font-weight: normal;">x</b><b style="mso-bidi-font-weight: normal;"><sub>1 </sub></b><b style="mso-bidi-font-weight: normal;">, . . .. ,</b><b style="mso-bidi-font-weight: normal;"> x</b><b style="mso-bidi-font-weight: normal;"><sub>n</sub></b><b style="mso-bidi-font-weight: normal;">}</b> that <b style="mso-bidi-font-weight: normal;">X</b> could be, and p(x) is the
probability of some x ϵ X, then the entropy, H, of X is defined:<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB441m8c81kp2D_JxQaX4Nvd8FB9ZN-5BwG9ZciHgITK8w9iOSq7jlycUqeShkGT3tiXpnFFO-L4-YIU7sP_PJsvOU4FCkuN-1lcS_5ANcmc2MNqSc8_0mkWhqvXMhFafBd8Da0iWqGpdJ/s1600/47.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: inherit;"><img border="0" data-original-height="84" data-original-width="374" height="88" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB441m8c81kp2D_JxQaX4Nvd8FB9ZN-5BwG9ZciHgITK8w9iOSq7jlycUqeShkGT3tiXpnFFO-L4-YIU7sP_PJsvOU4FCkuN-1lcS_5ANcmc2MNqSc8_0mkWhqvXMhFafBd8Da0iWqGpdJ/s400/47.PNG" width="400" /></span></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span style="color: black;">(Here, </span><span style="color: black;">I</span><span style="color: black;">(</span><span style="color: black;">x</span><span style="color: black;">) is the </span><span style="color: #450000;">self-information</span><span style="color: black;">, which is the entropy contribution of an individual message, and E</span><sub><span style="color: black;">X</span></sub><span style="color: black;"> </span><span style="color: black;">is the </span><span style="color: #450000;">expected value</span>.) A property of entropy is that it is maximized when all the messages
in the message space are equiprobable <b>p</b><b>(</b><b>x</b><b>) = 1/</b><b>n</b> ,—i.e., most unpredictable— in which case <b>H</b><b>(</b><b>X</b><b>) = log </b><b>n</b> .</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span style="color: black;"><br /></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span style="color: black;">The special case of information entropy for a random variable
with two outcomes is the </span><b><span style="color: #450000;">binary
entropy function</span></b><span style="color: black;">, usually taken to the logarithmic base 2, thus having the Shannon (Sh)
as unit:<o:p></o:p></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt; text-align: center;">
<span style="font-family: inherit;"><b style="mso-bidi-font-weight: normal;"><span style="color: black;">H</span></b><b style="mso-bidi-font-weight: normal;"><sub><span style="color: black;">b</span></sub></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">(</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">p</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">) = -</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">p </span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">log<sub>2</sub> </span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">p - </span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;"><span style="mso-spacerun: yes;"> </span></span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">(1 - </span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;"><span style="mso-spacerun: yes;"> </span></span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">p</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">) log<sub>2</sub>(1 -</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;"> </span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">p</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;">)</span></b><b style="mso-bidi-font-weight: normal;"><span style="color: black;"><o:p></o:p></span></b></span></div>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">The graph for this equation looks like as</span><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRe5PCKLt_z0fUTWvy4m6GgjIgdebiHNooqLtKGEdgshvnickzsfrAlyFVASaSEUNLLy8fxUSL0hl9zkBzWwkDJPHWPI2rKWv9ZNv14y8hGjw7BcV7dtXPjW1z31Li7nMm5jwapos-d0dT/s1600/48.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="428" data-original-width="474" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRe5PCKLt_z0fUTWvy4m6GgjIgdebiHNooqLtKGEdgshvnickzsfrAlyFVASaSEUNLLy8fxUSL0hl9zkBzWwkDJPHWPI2rKWv9ZNv14y8hGjw7BcV7dtXPjW1z31Li7nMm5jwapos-d0dT/s400/48.PNG" width="400" /></a></div>
Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-22472427828406558282020-05-16T19:38:00.002+05:302020-05-18T21:23:21.340+05:30Information Theory: Overview<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: "arial" , "sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">Information theory studies the transmission,
processing, </span><span style="font-family: "arial" , sans-serif;">utilization, and extraction of information. Abstractly, information can
be thought of as the resolution of uncertainty. </span><span style="font-family: "arial" , sans-serif;">In
the case of communication of information over a noisy channel, this abstract the concept was made concrete in 1948 by </span><span style="color: #450000; font-family: "arial" , sans-serif;">Claude
Shannon </span><span style="font-family: "arial" , sans-serif;">in </span><span style="color: #450000; font-family: "arial" , sans-serif;">A
Mathematical Theory of Communication</span><span style="font-family: "arial" , sans-serif;">, in which
“information” is thought of as a set of possible messages, where the goal is to
send these messages over a noisy channel, and then to have the receiver
reconstruct the message with a low probability of error, in spite of the channel
noise. </span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: "arial" , "sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;"><span style="color: black;"><br /></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: "arial" , "sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;"><span style="color: black;">Information theory is closely associated with a collection of pure and
applied disciplines that have been investigated and reduced to engineering
practice under a variety of </span><span style="color: #450000;">rubrics </span><span style="color: black;">throughout the world over the past half-century or more: </span><span style="color: #450000;">adaptive systems</span><span style="color: black;">, </span><span style="color: #450000;">anticipatory systems</span><span style="color: black;">, </span><span style="color: #450000;">artificial intelligence</span><span style="color: black;">,
</span><span style="color: #450000;">complex systems</span><span style="color: black;">, </span><span style="color: #450000;">complexity science</span><span style="color: black;">, </span><span style="color: #450000;">cybernetics</span><span style="color: black;">, </span><span style="color: #450000;">informatics</span><span style="color: black;">, </span><span style="color: #450000;">machine learning</span><span style="color: black;">, along with</span></span><span style="font-family: "arial" , sans-serif;"> </span><span style="color: #450000; font-family: "arial" , sans-serif;">systems sciences </span><span style="font-family: "arial" , sans-serif;">of any descriptions. Information theory is a broad and deep
mathematical theory, with equally broad and deep applications, amongst which is
the vital field of </span><span style="color: #450000; font-family: "arial" , sans-serif;">coding theory</span><span style="font-family: "arial" , sans-serif;">. Information theory is also used
in </span><span style="color: #450000; font-family: "arial" , sans-serif;">information
retrieval, intelligence gathering</span><span style="font-family: "arial" , sans-serif;">, </span><span style="color: #450000; font-family: "arial" , sans-serif;">gambling</span><span style="font-family: "arial" , sans-serif;">, </span><span style="color: #450000; font-family: "arial" , sans-serif;">statistics</span><span style="font-family: "arial" , sans-serif;">, and even in </span><span style="color: #450000; font-family: "arial" , sans-serif;">musical composition</span><span style="font-family: "arial" , sans-serif;">.</span></div>
<br /></div>
Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-5072125542287784682020-05-15T18:30:00.001+05:302020-05-18T21:23:21.787+05:30Gradient Descent Method II<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;">For the functions discussed in part
I, we must use a concept of partial derivatives. The partial derivate measures
how the function changes as only one variable increases. The gradient of the function contains all partial derivatives. In the case of multi-dimensions,
critical points are points where every element of the gradient is equal to zero.<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;">The <span style="mso-bidi-font-style: italic;">directional derivative </span>in the direction <span style="mso-bidi-font-style: italic;">u </span>(a unit vector) is the slope of the function f in direction u. In other
words, the derivative of the function f (<span style="mso-bidi-font-style: italic;">x </span>+ αu) with respect to α, evaluated at α = 0.<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span style="mso-spacerun: yes;"> </span>Using the chain rule, we can see that this <span style="mso-bidi-font-style: italic;">u<sup>T</sup></span>∇x f (<span style="mso-bidi-font-style: italic;">x</span>). To minimize f, we would
like to find the direction in which f decreases the fastest.<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;">This function is minimized when u
points in the opposite direction of the gradient. In other words, the
gradient points directly uphill, and the negative gradient points directly
downhill. We can decrease f by
moving in the direction of the negative gradient. This is known as the method
of steepest descent or gradient descent.<span style="mso-spacerun: yes;"> </span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;">Steepest descent proposes a new
point<o:p></o:p></span></div>
<div align="center" class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-align: center; text-autospace: none;">
<span style="font-family: inherit;">x’
= <span style="mso-bidi-font-style: italic;">x </span>− <span style="color: black;">ϵ</span> ∇ <sub>x</sub>f (<span style="mso-bidi-font-style: italic;">x</span>)<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;">where <span style="color: black;">ϵ</span> <span style="mso-spacerun: yes;"> </span>is the size of the step. We can choose <span style="color: black;">ϵ </span><span style="mso-spacerun: yes;"> </span>in several different ways. A popular approach is to
set <span style="color: black;">ϵ</span> to a small
constant. Sometimes, we can solve for the step size that makes the directional
derivative vanish. Another approach is to evaluate f (<span style="mso-bidi-font-style: italic;">x </span>− <span style="color: black;">ϵ</span> ∇<sub>x</sub>f (<span style="mso-bidi-font-style: italic;">x</span>)) for several
values of <span style="color: black;">ϵ</span> and choose the
one that results in the smallest objective function value. This last strategy
is called a <span style="mso-bidi-font-style: italic;">line search</span>.<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;">Steepest descent converges when
every element of the gradient is zero (or, in practice, very close to zero). In
some cases, we may be able to avoid running this iterative algorithm, and just
jump directly to the critical point by solving the equation ∇<sub>x</sub>f (x)
= 0 for x.<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;">We are also sometimes interested
in a derivative of a derivative. This is known as a <span style="mso-bidi-font-style: italic;">second derivative</span>. The
second derivative tells us how the first derivative will change as we vary the input.
This means it can be useful for determining whether a critical point is a local
maximum, a local minimum, or a saddle point. </span><span style="font-family: inherit;">When </span><span style="font-family: inherit;">f</span><span style="font-family: inherit;">’’</span><span style="font-family: inherit;">(</span><span style="font-family: inherit;">x</span><span style="font-family: inherit;">) </span><span style="font-family: inherit;">> </span><span style="font-family: inherit;">0</span><span style="font-family: inherit;">,
this means that </span><span style="font-family: inherit;">f</span><span style="font-family: inherit;">’</span><span style="font-family: inherit;">(</span><span style="font-family: inherit;">x</span><span style="font-family: inherit;">)
increases as we move to the right, and </span><span style="font-family: inherit;">f</span><span style="font-family: inherit;">’</span><span style="font-family: inherit;">(</span><span style="font-family: inherit;">x</span><span style="font-family: inherit;">) decreases
as we move to the left.</span></div>
<br /></div>
Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-50996663032584266762020-05-15T17:56:00.004+05:302020-05-18T21:23:21.819+05:30Gradient Descent Algorithm I<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span lang="EN-IN">It
is an optimization technique. Optimization refers to the task of either </span><span style="color: black;">minimizing
or maximizing some function </span><span style="color: black;">f </span><span style="color: black;">(<span style="mso-bidi-font-style: italic;">x</span>) by
altering <span style="mso-bidi-font-style: italic;">x</span>. We usually phrase
most optimization problems in terms of minimizing </span><span style="color: black;">f </span><span style="color: black;">(<span style="mso-bidi-font-style: italic;">x</span>). Maximization may be obtained via
a minimization algorithm by minimizing </span><span style="color: black;">−</span><span style="color: black;">f </span><span style="color: black;">(<span style="mso-bidi-font-style: italic;">x</span>). </span></span><span style="font-family: inherit;">The function we want
to minimize or maximize is called the </span><b style="font-family: inherit;">objective function</b><span style="font-family: inherit;">. </span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><span style="color: black;">When we are
minimizing it, we may also call it the <span style="mso-bidi-font-style: italic;">cost
function</span>, <span style="mso-bidi-font-style: italic;">loss function</span>,
or <span style="mso-bidi-font-style: italic;">error function</span>. For example,
we might say </span><span style="color: black;">x*</span><span style="color: black;"> </span><span style="color: black;">= <span style="mso-spacerun: yes;"> </span>arg min </span><span style="color: black;">f </span><span style="color: black;">(<span style="mso-bidi-font-style: italic;">x</span>)
i.e. find the value of x such that f(x) is minimum at that value. </span></span><span style="font-family: inherit;">The derivative of a function </span><span style="font-family: inherit;">y </span><span style="font-family: inherit;">= </span><span style="font-family: inherit;">f’ </span><span style="font-family: inherit;">(</span><span style="font-family: inherit;">x</span><span style="font-family: inherit;">)
from R to R, denoted as </span><span style="font-family: inherit;">f </span><span style="font-family: inherit;">‘</span><span style="font-family: inherit;">(</span><span style="font-family: inherit;">x</span><span style="font-family: inherit;">)
or (</span><span style="font-family: inherit;">dy/dx) </span><span style="font-family: inherit;">,
gives the slope of </span><span style="font-family: inherit;">f </span><span style="font-family: inherit;">(</span><span style="font-family: inherit;">x</span><span style="font-family: inherit;">) at the point </span><span style="font-family: inherit;">x</span><span style="font-family: inherit;">. It quantifies how
a small change in </span><span style="font-family: inherit;">x </span><span style="font-family: inherit;">gets scaled in order to
obtain a corresponding change in </span><span style="font-family: inherit;">y</span><span style="font-family: inherit;">. The derivative is therefore useful for minimizing a
function because it tells us how to change </span><span style="font-family: inherit;">x </span><span style="font-family: inherit;">in order to make a small improvement in </span><span style="font-family: inherit;">y</span><span style="font-family: inherit;">.
For example, we know that </span><span style="font-family: inherit;">f </span><span style="font-family: inherit;">(</span><span style="font-family: inherit;">x </span><span style="font-family: inherit;">− ϵ</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">sign(</span><span style="font-family: inherit;">f </span><span style="font-family: inherit;">0</span><span style="font-family: inherit;">(</span><span style="font-family: inherit;">x</span><span style="font-family: inherit;">)))
is less than </span><span style="font-family: inherit;">f </span><span style="font-family: inherit;">(</span><span style="font-family: inherit;">x</span><span style="font-family: inherit;">)
for small enough </span><span style="font-family: inherit;">ϵ</span><span style="font-family: inherit;">. We can thus reduce </span><span style="font-family: inherit;">f </span><span style="font-family: inherit;">(</span><span style="font-family: inherit;">x</span><span style="font-family: inherit;">) by moving </span><span style="font-family: inherit;">x </span><span style="font-family: inherit;">in small steps with the opposite sign of the derivative.
This technique is called gradient descent.</span><br />
<span style="font-family: inherit;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinqp9NQ-TwdAb-CwuuFBPoDuM_iCDjXUUJnMxcEKIWi-iF8EoODxL1n_DD5RtYgFkFzPqlfdDK15khMt9eyWicW8ke61p5RbsnqAeqWyNeqGyF-r7AMXoxpQMl_ApYKLoCnPBdmgMNXc8P/s1600/41.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="568" data-original-width="716" height="504" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinqp9NQ-TwdAb-CwuuFBPoDuM_iCDjXUUJnMxcEKIWi-iF8EoODxL1n_DD5RtYgFkFzPqlfdDK15khMt9eyWicW8ke61p5RbsnqAeqWyNeqGyF-r7AMXoxpQMl_ApYKLoCnPBdmgMNXc8P/s640/41.PNG" width="640" /></a></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;">When f 0(x) = 0, the
derivative provides no information about which direction to move. Points where f ‘(x) = 0 are
known as <b>critical</b> points or <b>stationary</b> points. A local minimum is a point where f (x) is lower
than at all neighboring points, so it is no longer possible to decrease f (x) by making
infinitesimal steps. A local maximum is
a point where f (x) is higher
than at all neighboring points, so it is not possible to increase f (x) by making
infinitesimal steps. Some critical points are neither maxima nor minima. These
are known as <b>saddle</b> points.<b style="mso-bidi-font-weight: normal;"><span style="color: black;"><o:p></o:p></span></b></span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAHyXdKeYZqShI4H6zMXlNHKWEPjH4Z9NHUH6pJtl6oZVnmQgGQ0LtabeDvjnOVkVqB-a-3rHgec9nCaAmaYWsLhDOvpyianp5k4XDcSc5l0iFPl3D4d0WHTX8sqOQEPU-mMeE0PnOgsi_/s1600/42.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="238" data-original-width="703" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAHyXdKeYZqShI4H6zMXlNHKWEPjH4Z9NHUH6pJtl6oZVnmQgGQ0LtabeDvjnOVkVqB-a-3rHgec9nCaAmaYWsLhDOvpyianp5k4XDcSc5l0iFPl3D4d0WHTX8sqOQEPU-mMeE0PnOgsi_/s640/42.PNG" width="640" /></a></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="font-family: inherit;">A point that obtains the absolute
lowest value of f (x) is a <span style="mso-bidi-font-style: italic;">global minimum</span>. It is possible for
there to be only one global minimum or multiple global minima of the function.
It is also possible for there to be local minima that are not globally optimal.
In the context of deep learning, we optimize functions that may have many local
minima that are not optimal, and many saddle points surrounded by very flat
regions. All of this makes optimization very difficult, especially when the
input to the function is multidimensional. We therefore usually settle for finding
a value of that is very
low, but not necessarily minimal in any formal sense.<b style="mso-bidi-font-weight: normal;"><span style="color: black;"><o:p></o:p></span></b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgphq-n34Q8fZVeNlAR3sVbs-L1QBcZWUSwszVYJt2mOo0bgvriqkSh94zJbOLpJJ7rfTLaWqYt4_puus8jisEkPnOR0wVVhnB8yCboOPGDWo9eQBkbfm8uDIQKq99H84R3zzvJq5PLabgR/s1600/43.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="558" data-original-width="739" height="482" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgphq-n34Q8fZVeNlAR3sVbs-L1QBcZWUSwszVYJt2mOo0bgvriqkSh94zJbOLpJJ7rfTLaWqYt4_puus8jisEkPnOR0wVVhnB8yCboOPGDWo9eQBkbfm8uDIQKq99H84R3zzvJq5PLabgR/s640/43.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br /></div>
Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-24346436473943367802020-05-15T07:59:00.000+05:302020-05-18T21:26:23.539+05:30Stochastic Gradient Descent : Python<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: inherit;"># Stochastic Gradient Descent method</span><br />
<span style="font-family: inherit;"># dev is for evaluation</span><br />
<span style="font-family: inherit;">from sklearn.datasets import make_classification</span><br />
<span style="font-family: inherit;">from sklearn.metrics import accuracy_score</span><br />
<span style="font-family: inherit;">from sklearn.model_selection import train_test_split</span><br />
<span style="font-family: inherit;">from sklearn.linear_model import SGDClassifier</span><br />
<span style="font-family: inherit;">import numpy as np</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"># function to generate predictors and responses</span><br />
<span style="font-family: inherit;">def get_data():</span><br />
<span style="font-family: inherit;"> """</span><br />
<span style="font-family: inherit;"> Make a sample classification dataset Returns : Independent variable y, dependent variable x</span><br />
<span style="font-family: inherit;"> """</span><br />
<span style="font-family: inherit;"> no_features = 30</span><br />
<span style="font-family: inherit;"> redundant_features = int(0.1*no_features)</span><br />
<span style="font-family: inherit;"> informative_features = int(0.6*no_features)</span><br />
<span style="font-family: inherit;"> repeated_features = int(0.1*no_features)</span><br />
<span style="font-family: inherit;"> x,y = make_classification(n_samples=1000,n_features=no_features,flip_y=0.03,n_informative = informative_features, n_redundant = redundant_features ,n_repeated = repeated_features,random_state=7)</span><br />
<span style="font-family: inherit;"> return x,y</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"># function that will help to build and validate model</span><br />
<span style="font-family: inherit;">def build_model(x,y,x_dev,y_dev):</span><br />
<span style="font-family: inherit;"> estimator = SGDClassifier(shuffle=True,loss="log",learning_rate = "constant",eta0=0.0001,fit_intercept=True,penalty="none")</span><br />
<span style="font-family: inherit;"> estimator.fit(x,y)</span><br />
<span style="font-family: inherit;"> train_predcited = estimator.predict(x)</span><br />
<span style="font-family: inherit;"> train_score = accuracy_score(y,train_predcited)</span><br />
<span style="font-family: inherit;"> dev_predicted = estimator.predict(x_dev)</span><br />
<span style="font-family: inherit;"> dev_score = accuracy_score(y_dev,dev_predicted)</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"> print("Training Accuracy = %0.2f Dev Accuracy = %0.2f"% (train_score,dev_score))</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"># final function to invoke preceeding functions</span><br />
<span style="font-family: inherit;">if __name__ == "__main__":</span><br />
<span style="font-family: inherit;"> x,y = get_data()</span><br />
<span style="font-family: inherit;"> # Divide the data into Train, dev and test</span><br />
<span style="font-family: inherit;"> x_train,x_test_all,y_train,y_test_all = train_test_split(x,y,test_size= 0.3,random_state=9)</span><br />
<span style="font-family: inherit;"> x_dev,x_test,y_dev,y_test = train_test_split(x_test_all,y_test_all,test_size=0.3,random_state=9)</span><br />
<span style="font-family: inherit;"> build_model(x_train,y_train,x_dev,y_dev)</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><b># How model works</b></span><br />
<span style="font-family: inherit;">def get_data():</span><br />
<span style="font-family: inherit;"> """</span><br />
<span style="font-family: inherit;"> Make a sample classification dataset Returns : Independent variable y, dependent variable x</span><br />
<span style="font-family: inherit;"> """</span><br />
<span style="font-family: inherit;"> no_features = 30</span><br />
<span style="font-family: inherit;"> redundant_features = int(0.1*no_features)</span><br />
<span style="font-family: inherit;"> informative_features = int(0.6*no_features)</span><br />
<span style="font-family: inherit;"> repeated_features = int(0.1*no_features)</span><br />
<span style="font-family: inherit;"> x,y = make_classification(n_samples=500,n_features=no_features,flip_y=0.03,n_informative = informative_features, n_redundant = redundant_features ,n_repeated = repeated_features,random_state=7)</span><br />
<span style="font-family: inherit;"> return x,y</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><b>The first parameter is the number of instances required. In this case, we need 500 instances. The </b><b>second parameter is about how many attributes per instance are required. We say that we</b></span><br />
<b><span style="font-family: inherit;">need 30. The third parameter, flip_y, randomly interchanges 3 percent of the instances.</span></b><br />
<b><span style="font-family: inherit;">This is done to introduce noise in our data. The next parameter is about how many out of</span></b><br />
<b><span style="font-family: inherit;">those 30 features should be informative enough to be used in our classification. We</span></b><br />
<b><span style="font-family: inherit;">specified that 60 percent of our features, that is, 18 out of 30, should be informative. The</span></b><br />
<b><span style="font-family: inherit;">next parameter is about redundant features. These are generated as a linear combination of</span></b><br />
<b><span style="font-family: inherit;">the informative features in order to introduce correlation among the features. Finally, the</span></b><br />
<b><span style="font-family: inherit;">repeated features are duplicate features that are drawn randomly from both the informative</span></b><br />
<b><span style="font-family: inherit;">and redundant features.</span></b><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"># split data into training and test sets</span><br />
<span style="font-family: inherit;"># Divide the data into Train, dev and test</span><br />
<span style="font-family: inherit;">x_train,x_test_all,y_train,y_test_all = train_test_split(x,y,test_size= 0.3,random_state=9)</span><br />
<span style="font-family: inherit;">x_dev,x_test,y_dev,y_test = train_test_split(x_test_all,y_test_all,test_size=0.3,random_state=9)</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"># make model</span><br />
<span style="font-family: inherit;">build_model(x_train,y_train,x_dev,y_dev)</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="background-color: white; font-size: inherit; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: inherit; overflow-wrap: break-word; white-space: pre-wrap; word-break: break-all;"><b><span style="font-family: inherit;">Training Accuracy = 0.83 Dev Accuracy = 0.81</span></b></span><br />
<span style="background-color: white; font-size: inherit; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: inherit; overflow-wrap: break-word; white-space: pre-wrap; word-break: break-all;"><b><span style="font-family: inherit;"><br /></span></b></span>
<span style="font-family: inherit;"><span style="background-color: white; white-space: pre-wrap;"><b># In build_model, use scikit-learn’s SGDClassifier class to build </b></span><b style="white-space: pre-wrap;">stochastic gradient </b></span><br />
<b style="white-space: pre-wrap;"><span style="font-family: inherit;"># descent method</span></b><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">estimator = SGDClassifier(shuffle=True,loss="log", learning_rate = "constant",eta0=0.0001,fit_intercept=True,penalty="none")</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><b>The first parameter is shuffle,as in perceptron, after going through all the records once, we need to shuffle our input records when we start the next iteration. The shuffle parameter is used for the </b><b>same. The default value of shuffle is true, we have included it here for explanation purposes. Our loss function is log loss: we want to do a logistic regression and we will specify this using the loss parameter. Our learning rate, eta, is a constant that we will specify with the learning_rate parameter. We will provide the value for our learning rate using the eta0 parameter. We will then proceed to say that we need to fit the intercept, as we have not centered our data by its mean. Finally, the penalty parameter controls the type of shrinkage required. In our case, we will say that we don’t need any shrinkage using the none string.</b></span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"># fit the model and evaluation of model with training and dev dataset:</span><br />
<span style="font-family: inherit;"> estimator.fit(x,y)</span><br />
<span style="font-family: inherit;">train_predcited = estimator.predict(x)</span><br />
<span style="font-family: inherit;">train_score = accuracy_score(y,train_predcited)</span><br />
<span style="font-family: inherit;">dev_predicted = estimator.predict(x_dev)</span><br />
<span style="font-family: inherit;">dev_score = accuracy_score(y_dev,dev_predicted)</span><br />
<span style="font-family: inherit;">print("Training Accuracy = %0.2f Dev Accuracy = %0.2f"%(train_score,dev_score))</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="background-color: white; font-size: inherit; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: inherit; overflow-wrap: break-word; white-space: pre-wrap; word-break: break-all;"><b><span style="font-family: inherit;">Training Accuracy = 0.84 Dev Accuracy = 0.83</span></b></span></div>
Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-86359158158089446892020-05-14T19:38:00.003+05:302020-05-18T21:23:22.365+05:30Principal component analysis (PCA)<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">It is a statistical procedure that uses an </span><span style="color: #450000; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">orthogonal transformation </span><span style="color: black; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">to convert a set of observations of
possibly correlated variables </span><span style="font-family: Arial, sans-serif;">into a set of values of </span><span style="color: #450000; font-family: Arial, sans-serif;">linearly uncorrelated </span><span style="font-family: Arial, sans-serif;">variables </span><span style="font-family: Arial, sans-serif;">called </span><b><span style="font-family: Arial, sans-serif;">principal
components</span></b><span style="font-family: Arial, sans-serif;">. The number of
principal </span><span style="font-family: Arial, sans-serif;">components is less than or equal to the number of
original </span><span style="font-family: Arial, sans-serif;">variables. This transformation is defined in such a
way</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">that the first principal component has the largest
possible </span><span style="color: #450000; font-family: Arial, sans-serif;">variance</span><span style="font-family: Arial, sans-serif;">, and each succeeding
component, in turn,,</span><span style="font-family: Arial, sans-serif;"> has the highest variance possible under the
constraint </span><span style="font-family: Arial, sans-serif;">that it is </span><span style="color: #450000; font-family: Arial, sans-serif;">orthogonal </span><span style="font-family: Arial, sans-serif;">to the preceding components. </span><span style="font-family: Arial, sans-serif;">The resulting vectors are an uncorrelated orthogonal
basis </span><span style="font-family: Arial, sans-serif;">set. The principal components are orthogonal because </span><span style="font-family: Arial, sans-serif;">they are the </span><span style="color: #450000; font-family: Arial, sans-serif;">eigenvectors </span><span style="font-family: Arial, sans-serif;">of the </span><span style="color: #450000; font-family: Arial, sans-serif;">covariance matrix</span><span style="font-family: Arial, sans-serif;">, which </span><span style="font-family: Arial, sans-serif;">is </span><span style="color: #450000; font-family: Arial, sans-serif;">symmetric</span><span style="font-family: Arial, sans-serif;">. PCA is sensitive to the relative scaling of </span><span style="font-family: Arial, sans-serif;">the original variables.</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">PCA can be done by </span><span style="color: #450000; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">eigenvalue decomposition </span><span style="font-family: Arial, sans-serif;">of a data </span><span style="color: #450000; font-family: Arial, sans-serif;">covariance </span><span style="font-family: Arial, sans-serif;">(or </span><span style="color: #450000; font-family: Arial, sans-serif;">correlation</span><span style="font-family: Arial, sans-serif;">) matrix or </span><span style="color: #450000; font-family: Arial, sans-serif;">singular </span><span style="color: #450000; font-family: Arial, sans-serif;">value decomposition </span><span style="font-family: Arial, sans-serif;">of a </span><span style="color: #450000; font-family: Arial, sans-serif;">data matrix</span><span style="font-family: Arial, sans-serif;">, usually after mean </span><span style="font-family: Arial, sans-serif;">centering (and normalizing or using </span><span style="color: #450000; font-family: Arial, sans-serif;">Z-scores</span><span style="font-family: Arial, sans-serif;">) the data </span><span style="font-family: Arial, sans-serif;">matrix for each attribute.</span><span style="color: #000045; font-family: Arial, sans-serif;"> </span><span style="font-family: Arial, sans-serif;">The results of a PCA are</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">usually discussed in terms of component scores,
sometimes </span><span style="font-family: Arial, sans-serif;">called factor scores (the transformed variable values </span><span style="font-family: Arial, sans-serif;">corresponding to a particular data point), and
loadings </span><span style="font-family: Arial, sans-serif;">(the weight by which each standardized original variable </span><span style="font-family: Arial, sans-serif;">should be multiplied to get the component score). </span><span style="font-family: Arial, sans-serif;">PCA is the simplest of the true </span><span style="color: #450000; font-family: Arial, sans-serif;">eigenvector</span><span style="font-family: Arial, sans-serif;">-based multivariate </span><span style="font-family: Arial, sans-serif;">analyses. Often, its operation can be thought of </span><span style="font-family: Arial, sans-serif;">as revealing the internal structure of the data in a
way</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span style="color: black; font-family: "Arial","sans-serif"; mso-ansi-language: EN-US; mso-fareast-font-family: FreeSerif-Identity-H;">that best explains the variance in the data. If a
multivariate </span><span style="font-family: Arial, sans-serif;">dataset is visualized as a set of coordinates in high-dimensional</span><span style="color: #450000; font-family: Arial, sans-serif;"> </span><span style="font-family: Arial, sans-serif;">data space (1 axis per variable), PCA can </span><span style="font-family: Arial, sans-serif;">supply the user with a lower-dimensional picture, a
projection </span><span style="font-family: Arial, sans-serif;">or “shadow” of this object when viewed from its </span><span style="font-family: Arial, sans-serif;">(in some sense; see </span><span style="color: #450000; font-family: Arial, sans-serif;">below</span><span style="font-family: Arial, sans-serif;">) most informative viewpoint. </span><span style="font-family: Arial, sans-serif;">This is done by using only the first few principal
components </span><span style="font-family: Arial, sans-serif;">so that the dimensionality of the transformed data </span><span style="font-family: Arial, sans-serif;">is reduced.</span></div>
<br /></div>
Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-20852530612335412102020-05-12T08:03:00.000+05:302020-05-18T21:23:21.308+05:30 Building Random Forests<p class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;"><span style="font-family: Arial, sans-serif;">To build a random forest model, you need to decide on
the number of trees to build. Let's say we want to build ten trees. These trees
will be built completely independent </span><span style="font-family: Arial, sans-serif;">from each other, and </span><span style="font-family: Arial, sans-serif;">make random choices to make sure they are </span><span style="font-family: Arial, sans-serif;">distinct. </span><span style="font-family: Arial, sans-serif;">To build a tree, we first take what is called a </span><i><span style="font-family: Arial, sans-serif;">bootstrap </span></i><span style="font-family: Arial, sans-serif;">sample of our data. A bootstrap </span><span style="font-family: Arial, sans-serif;">sample means from our </span><span style="font-family: Arial, sans-serif;">n_samples </span><span style="font-family: Arial, sans-serif;">data
points, we repeatedly draw an example randomly </span><span style="font-family: Arial, sans-serif;">with replacement (i.e. the same sample can be picked
multiple times), </span><span style="font-family: Arial, sans-serif;">n_sam</span><span style="font-family: Arial, sans-serif;">ples </span><span style="font-family: Arial, sans-serif;">times.
This will create a dataset that is as big as the original dataset, but some </span><span style="font-family: Arial, sans-serif;">data points will be missing from it, and some will be
repeated. </span><span style="font-family: Arial, sans-serif;">To illustrate, let's say we want to create a bootstrap
sample of the list </span><span style="font-family: Arial, sans-serif;">['a',
'b', 'c', </span><span style="font-family: Arial, sans-serif;">'d']</span><span style="font-family: Arial, sans-serif;">.
A possible bootstrap sample would be </span><span style="font-family: Arial, sans-serif;">['b',
'd', 'd', 'c']</span><span style="font-family: Arial, sans-serif;">. Another possible </span><span style="font-family: Arial, sans-serif;">sample would be </span><span style="font-family: Arial, sans-serif;">['d',
'a', 'd', 'a']</span><span style="font-family: Arial, sans-serif;">.</span></p><p class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;"><span style="font-family: Arial, sans-serif;">Next, a decision tree is built based on this newly
created dataset. However, the algorithm </span><span style="font-family: Arial, sans-serif;">we described for the decision tree is slightly
modified. Instead of looking for </span><span style="font-family: Arial, sans-serif;">the best test for each node, in each node, the
algorithm randomly selects a subset of </span><span style="font-family: Arial, sans-serif;">the features and looks for the best possible test
involving one of these features. The </span><span style="font-family: Arial, sans-serif;">amount of features that are selected is controlled by
the </span><span style="font-family: Arial, sans-serif;">max_features </span><span style="font-family: Arial, sans-serif;">parameter. </span><span style="font-family: Arial, sans-serif;">This selection of a subset of features is repeated
separately in each node so that each </span><span style="font-family: Arial, sans-serif;">node in a tree can make a decision using a different
subset of the features. </span><span style="font-family: Arial, sans-serif;">The bootstrap sampling leads to each decision tree in
the random forest being built </span><span style="font-family: Arial, sans-serif;">on a slightly different dataset. Because of the
selection of features in each node, each </span><span style="font-family: Arial, sans-serif;">split in each tree operates on a different subset of
features. Together these two mechanisms </span><span style="font-family: Arial, sans-serif;">ensure that all the trees in the random forests are
different. </span><span style="font-family: Arial, sans-serif;">A critical parameter in this process is </span><span style="font-family: Arial, sans-serif;">max_features</span><span style="font-family: Arial, sans-serif;">. If we set </span><span style="font-family: Arial, sans-serif;">max_features
</span><span style="font-family: Arial, sans-serif;">to </span><span style="font-family: Arial, sans-serif;">n_fea</span><span style="font-family: Arial, sans-serif;">tures</span><span style="font-family: Arial, sans-serif;">,
that means that each split can look at all features in the dataset, and no
randomness </span><span style="font-family: Arial, sans-serif;">will be injected. If we set </span><span style="font-family: Arial, sans-serif;">max_features </span><span style="font-family: Arial, sans-serif;">to one, that means that the splits </span><span style="font-family: Arial, sans-serif;">have no choice at all on which feature to test, and
can only search over different </span><span style="font-family: Arial, sans-serif;">thresholds for the feature that was selected randomly.</span></p><p class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;"><span style="font-family: Arial, sans-serif;">Therefore, a high </span><span style="font-family: Arial, sans-serif;">max_features </span><span style="font-family: Arial, sans-serif;">means
that the trees in the random forest will be </span><span style="font-family: Arial, sans-serif;">quite similar, and they will be able to fit the data
easily, using the most distinctive features. </span><span style="font-family: Arial, sans-serif;">A low </span><span style="font-family: Arial, sans-serif;">max_features
</span><span style="font-family: Arial, sans-serif;">means that the trees in
the random forest will be quite </span><span style="font-family: Arial, sans-serif;">different and that each tree might need to be very deep
in order to fit the data well. </span><span style="font-family: Arial, sans-serif;">To make a prediction using the random forest, the
algorithm first makes a prediction </span><span style="font-family: Arial, sans-serif;">for every tree in the forest. For regression, we can
average these results to get our final </span><span style="font-family: Arial, sans-serif;">prediction. For classification, the “soft voting” strategy is used. This means each algorithm </span><span style="font-family: Arial, sans-serif;">makes a “soft” prediction, providing a probability for
each possible output </span><span style="font-family: Arial, sans-serif;">label. The probabilities predicted by all the trees
are averaged, and the class with the </span><span style="font-family: Arial, sans-serif;">highest label is predicted.</span></p><br />Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-57616962357635383502020-05-12T07:54:00.001+05:302020-05-18T21:23:22.011+05:30Ensembles of Decision Trees: Random Forests<p class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;"><font face="arial" size="2">As the main drawback of decision trees is that they tend
to overfit the training data. Random forests are one way to address this problem. Random forests
are essentially a collection of decision trees, where each tree is slightly different
from the others. The idea of random forests is that each tree might do
a relatively good job of predicting, but will likely overfit on part of the data. If we build many trees, all of which work well and
overfit in different ways, we can reduce the amount of overfitting by averaging their
results. To implement this strategy, we need to build many
decision trees. Each tree should do an acceptable job of predicting the target, and should
also be different from the other trees. Random forests get their name from injecting
randomness into the tree building to ensure each tree is different. There are two ways
in which the trees in a random forest are randomized: by selecting the data points
used to build a tree and by selecting the features in each split test.</font></p><br />Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-67143068247055774442020-05-11T18:06:00.001+05:302020-05-18T21:23:22.107+05:30Building learning models with Ensemble Learning<p class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;"><span style="font-family: Arial, sans-serif;">When we select a model, the most
commonly used procedure is to choose the one with the smallest error on the
training dataset. The problem with this approach is that it will not always
work. The model might get biased or overfit the training data. Even when we compute
the model using cross-validation, it can perform poorly on unknown data. One of
the main reasons ensemble learning is so effective is because it reduces the
overall risk of making a poor model selection. This enables it to train in a
diverse manner and then </span><span style="font-family: Arial, sans-serif;">perform well on unknown data.
When we build a model using ensemble learning, the individual models need to
exhibit some diversity. This would allow them to capture various nuances in our
data; hence the overall model becomes more accurate. The diversity is achieved
by using different training parameters for each individual model. This allows
individual models to generate different decision boundaries for training data. This
means that each model will use different rules to make an inference, which is a
powerful way of validating the final result. If there is agreement among the
models, then we know that the output is correct.</span></p>
<p class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;"><span style="font-family: "Arial","sans-serif"; mso-ansi-language: EN-US;"><o:p> </o:p></span></p><br />Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0tag:blogger.com,1999:blog-1219980476801326118.post-86246898423939027762020-05-11T18:03:00.001+05:302020-05-18T21:23:22.332+05:30Ensemble Learning<p class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;"><b><span style="font-family: "Arial","sans-serif"; mso-ansi-language: EN-US;">Ensemble
Learning </span></b><span style="font-family: Arial, sans-serif;">refers to the process of building multiple models and then combining them
in a way that can produce better results than individual models. These
individual models can be classifiers, regressors, or anything else that models
data in some way. Ensemble learning is used extensively across multiple fields
including data classification, predictive modeling, anomaly detection, and so
on.</span></p>
<p class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;"><b style="mso-bidi-font-weight: normal;"><span style="font-family: "Arial","sans-serif"; mso-ansi-language: EN-US;">Why
ensemble learning:</span></b><span style="font-family: "Arial","sans-serif"; mso-ansi-language: EN-US;"> In order to understand this, let's take a real-life
example. You want to buy a new TV, but you don't know what the latest models are.
Your goal is to get the best value for your money, but you don't have enough knowledge
on this topic to make an informed decision. When you have to make a decision about
something like this, you go around and try to get the opinions of multiple
experts in </span><span style="font-family: Arial, sans-serif;">the domain. This will help you
make the best decision. More often than not, instead of just relying on a
single opinion, you tend to make a final decision by combining the individual decisions
of those experts. The reason we do that is because we want to minimize the possibility
of a wrong or suboptimal decision.</span></p><br />Lakshman Jangidhttp://www.blogger.com/profile/09240524566513148282noreply@blogger.com0