Kaggle NB starter

PHOTO

Wed Dec 15 2021 06:30:39 GMT+0000 (Coordinated Universal Time)

Saved by @somuSan #markdown #html

<h1 style="text-align: center; font-family: Verdana; font-size: 32px; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; font-variant: small-caps; letter-spacing: 3px; color: #468282; background-color: #ffffff;">Tensorflow - Help Protect the Great Barrier Reef</h1>
<h2 style="text-align: center; font-family: Verdana; font-size: 24px; font-style: normal; font-weight: bold; text-decoration: underline; text-transform: none; letter-spacing: 2px; color: navy; background-color: #ffffff;">Look-sea: Underwater img enhancement</h2>


<p align="center">
    <img src="https://i.imgur.com/tTOe7cV.png">
</p>


# 📌**Introduction:**
<!-- <h1 style="font-family: times-new-roman">📌Introduction</h1> -->
> <p style="font-family: times-new-roman">Seems like <b>Patrick</b> the Star is lost, and <b>Spongebob, Mr. Krabs, Squidward, and the others</b> need our help to find him. To help them out <b>Kaggle</b> is also trying their best and has put together a very informative dataset the dataset is created based on the places where Patrick most certainly be going, and we need to take the help of AI and computer vision and perform Object detection to find him from that dataset. We still don't know whether Patrick is lost or has left the city because of the last night's argument between him and Spongebob. Well, this will stay as a mystery until we find Patrik. Spongebob, Mr. Krabs, Squidward, and Sandy are all very concerned and doing their best to find Patrick. So let's do our best too, and get Patrick back to his friends.</p>

# 📑 **About the Notebook:**
> <p style="font-family: times-new-roman">As per the Discussion thread I posted earlier, I said that I will post the results. So, to do that Im creating this NB. The discussion thred is listed just right below. After playing with data for a bit it was clear that the images were extreamly hezzy because of the thickness of the water, and most of the data are colored in greenish blue. After seeing a Disussion thread on this, I started searching some techniques for underwater image enhancement. After sometime, I stumbled upon this repo which talks about some techiques for Underwater color restoration and color enhancement, there were total 8 methods for image color Enhancement.Don't know how important Color Restoration would be [please let me know if you think color restoration is also important] but Image Enhancement would be very much required. The mentioned techniques are,</p>

> - [8 Methods on Underwater Image Enhancement and Color Restoration, With Code](https://www.kaggle.com/c/tensorflow-great-barrier-reef/discussion/291063)

> ## ⭕ **Underwater Image Enhancement**
> > - **CLAHE**: Contrast limited adaptive histogram equalization (1994)
> > - **Fusion-Matlab**: Enhancing underwater images and videos by fusion (2012)
> > - **GC**: Gamma Correction
> > - **HE**: Image enhancement by histogram transformation (2011)
> > - **ICM**: Underwater Image Enhancement Using an Integrated Colour Model (2007)
> > - **UCM**: Enhancing the low-quality images using Unsupervised Colour Correction Method (2010)
> > - **RayleighDistribution**: Underwater image quality enhancement through composition of dual-intensity images and Rayleigh-stretching (2014)
> > - **RGHS**: Shallow-Water Image Enhancement Using Relative Global Histogram Stretching Based on Adaptive Parameter Acquisition (2018)




> > <p style="font-family: times-new-roman"> From these 8 methods I was able to perform, 4 and 3 of them are implemented in two different ways, one is done using the repo's code and the other is implemetnted by me. Results are good but not too good. Because there are papers like <b>sea-thru</b>, <b>FUnIE-GAN</b> and <b>Water-GAN</b> which yields much better results. Check about the GANs <a style="font-family: times-new-roman" href="https://github.com/xahidbuffon/FUnIE-GAN">here</a></p>

> ## 👀 **Sea-thru**:
> > <p style="font-family: times-new-roman">This is a great paper, not only because of its good results, also the way the problem is tackled. Most of the time people ends up training large model with a huge pile of data for days to get a decent result. but this paper tries to break down the problem to its core components and solves it. This paper has a extensive use of depth map. Itried to find the trained wights but it seems like its not available. the main concept this paper goes like this,</p>

> > - <p style="font-family: times-new-roman"><b><i>As a result of their research, Akkaynak and Treibitz contend that wavelengths of observed colors depend on speed, distance, and the original color of objects. As with the speed of light through water, the source hue is constant. In this case, if we know the color of an object and its distance from us, we can reverse-engineer the formula that produces the observed color.</i></b></p>


> > To know more check out these two links,
> > - Article: [Sea-Thru: Removing Water from Underwater Images](https://towardsdatascience.com/sea-thru-removing-water-from-underwater-images-935288e13f7d)
> >- Paper: [Sea-Thru: A Method for Removing Water From Underwater Images](https://openaccess.thecvf.com/content_CVPR_2019/html/Akkaynak_Sea-Thru_A_Method_for_Removing_Water_From_Underwater_Images_CVPR_2019_paper.html)
> > - Github: https://github.com/hainh/sea-thru
> > - Dataset: http://csms.haifa.ac.il/profiles/tTreibitz/datasets/sea_thru/index.html

> > <p align="center">
    <img width="600" src="https://i.postimg.cc/6qpZCTFK/sea-thru3.jpg">
</p>



> ## 🧪 **Importance of image Pre-processing:**
> > <p style="font-family: times-new-roman"> Image preprocessing in one of the most important part of a Model building pipeline. It helps to improve the quality of your image, we apply different kind of filters and methods to enhance sertain aspect of the image, may be the given image is very blurry, or may be the image in very noisy, or maybe the image size across the data is not similar, or may be the labeled data is not accurate etc. In these cases we need to use Image preprocessing to clean the data. In some cases it also helps by decreasing model training time and increasing model inference speed. One of the incredible image preprocessing that I saw, was the hair removal in the Melanoma Classification comp. </p>

> ## 🎁 **Main aim of this Notebook:**
> > - <p style="font-family: times-new-roman"> I tried doing EDA for the provided dataset. I plan to dig much dipper and understand the data in a much better way.</p>
> > - <p style="font-family: times-new-roman"> I tried different approaches to get a decent preprocessed image as mentioned above. The best preprocessed Images this Notebook offers are shown below. We will go through all the methods(except few) and then look into the working code. <b>This is certainly not my work, it is taken from <b><a href="https://www.kaggle.com/ipythonx">@M.Innat's</a></b> comment from</p></b>

> > > <li> <a href="https://www.kaggle.com/c/tensorflow-great-barrier-reef/discussion/290584#1599835">Fast underwater image enhancement for Improved Visual Perception [github+Paper]</a></li>

> > > <p align="center">
    <img src="https://i.imgur.com/wc9rY2J.png">
</p>

> > > <p align="center">
    <img src="https://i.imgur.com/ho1D0Ye.png">
</p>

> > > <p align="center">
    <img src="https://i.imgur.com/pwBNYJr.png">
</p>

https://www.kaggle.com/soumya9977/learning-to-sea-underwater-img-enhancement-eda

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

Markdown snippets

@somuSan

Kaggle NB starter

#html #javascript #nodejs

How to Save HTML Form Data in JSON - Express

<form action="/new" method="post">
 
  <input name="title" type="text">
  <input name="description" type="text">
  <button type="submit">Submit Form</button>
 
</form>

> More steps

#html #javascript #jsfunctions #dom #dommanipulation

getAttribute() - how to get the value of any attribute of HTML element

<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>

#html #jquery #css #navbar

Underline active navbar link

// in css:
/* Display line under clicked navbar link */
.active {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  color: rgb(20, 19, 19);
}

//in html: 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        // Underline to remain in navbar after click using URL
        jQuery(function ($) {
          var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
          $('.nav-link').each(function () {
            if (this.href === path) {
              $(this).addClass('active');
            }
          });
        });
      });
    </script>

//Note class in link should be nav-link

C:/Users/intel/Desktop/dig%20fest/Mohd%20Midhlaj%20A%20A%206E%20Website%20Building/index.html

Bootstrap Starter Template

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Background Image That Doesn't Scroll on Webpage

body{
    background-image: url("img_tree.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

How to Create a Table in HTML

<table>
  <tr>
    <th>Name</th>
    <th>Phone</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Khan</td>
    <td>12345</td>
    <td>23</td>
  </tr>
  <tr>
    <td>Jamal</td>
    <td>54321</td>
    <td>45</td>
  </tr>
</table>

#html #javascript

Stop YouTube Embedded Video from Playing with Javascript

<main>
	<iframe src="https://www.youtube.com/embed/KQetemT1sWc"></iframe>   
    <a href="#!" onclick="stopThis()">Stop Playing</a>
</main>

<script>
  function stopThis(){
      var iframe = container.getElementsByTagName("iframe")[0];
      var url = iframe.getAttribute('src');
      iframe.setAttribute('src', '');
      iframe.setAttribute('src', url);
  }
</script>

HTML : Responsive Navbar

<!DOCTYPE html>
<!-- Created By TopArchives - www.toparchives.us -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Responsive Navbar | TopArchives</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  </head>
  <body>
    <nav>
      <input type="checkbox" id="check">
      <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>
      <label class="logo">TopArchives</label>
      <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Feedback</a></li>
      </ul>
    </nav>
    <section></section>
  </body>
</html>
<!-- DON'T REMOVE CREDITS -->

Bootstrap Fixed Floating Buttons

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
  <a class="btn-floating btn-lg red">
    <i class="fas fa-pencil-alt"></i>
  </a>

  <ul class="list-unstyled">
    <li><a class="btn-floating red"><i class="fas fa-star"></i></a></li>
    <li><a class="btn-floating yellow darken-1"><i class="fas fa-user"></i></a></li>
    <li><a class="btn-floating green"><i class="fas fa-envelope"></i></a></li>
    <li><a class="btn-floating blue"><i class="fas fa-shopping-cart"></i></a></li>
  </ul>
</div>

#javascript #eventos #mouse #css #html

mover un elemento junto al mouse, dentro de un div (eventos de mouse)

let hijo = document.querySelector('.hijo');
let etiqueta = document.querySelectorAll('.etiqueta');
//El metodo .getBoundingClientRect() nos da 
//la posicion de un elemento con respecto al viewport(en numeros).
// tomare la posicion constante del elemento .hijo 
const coords = hijo.getBoundingClientRect();
const j = coords.top; // estamos obteniendo la posicion top en numero
const k = coords.left;

// se aplica forEach para obtener posicion de cada movimiento del mouse
etiqueta.forEach(link => {
// se obtiene la posicion del mouse con la funcion  mover(e)
    function mover(e){
// se calcula la posicion top y left del mouse al cual le restamos
// la posicion del elemento "hijo"; resultado: mouse e "hijo" juntos 
	 let m = e.pageY ;
	 let n = e.pageX ;

	 let t = m - j;
	 let l = n - k;
	 hijo.style.top = t + "px"; // agregando px a los numeros
	 hijo.style.left = l + "px";
    };
// mouseover dice que entro en elemento etiqueta
    link.addEventListener("mouseover",() => {
	hijo.classList.add("edd1");// solo agrega un class que le da color red

	 window.addEventListener("mousemove",mover);// agrega el evento junto a la funcion 
    });

    link.addEventListener("mouseleave",() => {// mouseleave dice que salio del elemento etiqueta
	hijo.classList.remove("edd1"); // le quita un class, que le quita color red
	 window.removeEventListener("mousemove", mover);// remuev el evento
    });
});

/* Simples estilos para delimitar los div*/
.box{
width: 300px;
height: 300px;
border: solid 1px black;
}
.etiqueta{
width:100px;
height:100px;
position: absolute;
left:50px;
top:50px;
background: green;
overflow: hidden;
position:relative;
}
.hijo{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
transform: scale(0); /*desaparece el elemento hijo*/
}
.edd1{
background-color: red;
transform: scale(1); /*reaparece el elemento hijo con el mause al centro*/
} 

// un ejemplo con html
<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div>

Component library css link

<link rel="stylesheet" href="https://grapheneui.netlify.app/Components/components.css" />

#html #alpinejs

Set boolean to true after scrolling on page using Alpine.js

<div
    class="justify-between py-6 md:flex"
    x-data="{
        open: false,
        hasScrolled: false,
        reactOnScroll() {
            if (this.$el.getBoundingClientRect().top < 120 && window.scrollY > 120) {
                this.hasScrolled = true;
            } else {
                this.hasScrolled = false;
            }
        } 
    }"
    x-init="reactOnScroll()"
    @scroll.window="reactOnScroll()"
>

#html #javascript #jsfunctions #dom #dommanipulation

How to change any attribute of a HTML element

<html>	
   
   <input id="contact" name="address">
 
 <script>

    document.getElementById("contact").attribute = "phone";
	
    //ALTERNATIVE METHOD TO CHANGE
    document.getElementById("contact").setAttribute('name', 'phone');	

  </script>

</html>

#html #javascript

Display Date Objects in Shorter Format - MMM DD YYY HH:MM

<p id="date-stamp">Sat Dec 14 2019 16:58:20 GMT+0500 (Pakistan Standard Time)</p>

<script>
        var dateStamp = document.getElementById("date-stamp");
        var date = dateStamp.innerHTML;
        var date2 = date.substr(4, 17);
        dateStamp.innerHTML = date2;
    
</script>

Browse more snippets >>