Merge pull request #525 from bristiHalder/master

Added Background Remover Extension
Sulagna-Dutta-Roy · May 28, 2024 · 1af532b · 1af532b
2 parents 111839f + f1b2eeb
commit 1af532b
Show file tree

Hide file tree

Showing 11 changed files with 291 additions and 45 deletions.
diff --git a/Background Remover Extension/logo.png b/Background Remover Extension/logo.png
diff --git a/Background Remover Extension/manifest.json b/Background Remover Extension/manifest.json
@@ -0,0 +1,21 @@
+{
+    "name": "Background Remover",
+    "version": "0.0.1",
+    "manifest_version": 3,
+    "action": {
+        "default_popup": "popup.html",
+        "default_icon": "logo.png"
+    },
+    "content_scripts": [
+        {
+            "matches": ["http://www.google.com/*"],
+            "css": ["styles.css"],
+            "js": ["script.js"],
+            "all_frames": true
+        }
+    ],
+    "icons": {
+        "128": "logo.png"
+    }
+}
+
diff --git a/Background Remover Extension/popup.html b/Background Remover Extension/popup.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+    <title>Background Remover</title>
+  </head>
+  <body>
+    <div class="card">
+      <p id="upload">Enter the url of the image to remove background</p>
+      <label class="input">
+        <input id="input" class="input__field" type="text" placeholder=" " />
+        <span class="input__label">Image URL</span>
+      </label>
+      <div>
+        <button id="enterText" class="button" style="background-color: #f1bb4e">
+          Submit
+        </button>
+      </div>
+
+      <p id="prediction"></p>
+
+      <br />
+    </div>
+
+    <br />
+    <img id="upload_img" alt="" width="250" height="250" />
+    <div id="background">
+      <img id="download_img" alt="" width="250" height="250" />
+    </div>
+    <div class="card">
+      <p id="upload">Enter the url of the Background image</p>
+      <label class="input">
+        <input
+          id="input_download"
+          class="input__field"
+          type="text"
+          placeholder=" "
+        />
+        <span class="input__label">BackgroundImage URL</span>
+      </label>
+      <div>
+        <button id="enterText" class="button" style="background-color: #f1bb4e">
+          Submit
+        </button>
+      </div>
+
+      <p id="prediction"></p>
+
+      <br />
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Background Remover Extension/script.js b/Background Remover Extension/script.js
@@ -0,0 +1,59 @@
+const inputText = document.getElementById("input");
+const upload = document.getElementById("upload");
+
+const prediction = document.getElementById("prediction");
+var upload_img = document.getElementById("upload_img");
+var download_img = document.getElementById("download_img");
+var background = document.getElementById("background");
+const backgroundText = document.getElementById("input_download");
+let newUrl;
+let bgUrl;
+
+inputText.onchange = function () {
+  console.log(inputText.value);
+  let url = inputText.value;
+  upload_img.src = url;
+  upload.innerHTML = "Image URL Entered Successfully!";
+
+  prediction.innerHTML = "Removing background ...";
+
+  const encodedParams = new URLSearchParams();
+  encodedParams.append("image_url", url);
+
+  const options = {
+    method: "POST",
+    headers: {
+      "content-type": "application/x-www-form-urlencoded",
+      "X-RapidAPI-Host": "background-removal.p.rapidapi.com",
+      "X-RapidAPI-Key": "8e8b0875e1msh3b60b0d6d24c50ap1f267ejsn6a95b9a0b89d",
+    },
+    body: encodedParams,
+  };
+
+  fetch("https://background-removal.p.rapidapi.com/remove", options)
+    .then((response) => response.json())
+    .then((response) => {
+      console.log(response);
+      if (response.error) {
+        prediction.innerHTML = response.message;
+      } else {
+        prediction.innerHTML = "Background Removed";
+        newUrl = response.response.image_url;
+        console.log(newUrl);
+        download_img.src = newUrl;
+      }
+    })
+    .catch((err) => console.error(err));
+};
+
+backgroundText.onchange = function () {
+  bgUrl = backgroundText.value;
+  upload_img.src = bgUrl;
+  upload.innerHTML = "Background Image URL Entered Successfully!";
+
+  prediction.innerHTML = "Adding new background ...";
+
+  background.style.backgroundImage = `url(${bgUrl})`;
+  download_img.style.border = "none";
+};
+
diff --git a/Background Remover Extension/styles.css b/Background Remover Extension/styles.css
@@ -0,0 +1,149 @@
+body {
+    width: 500px;
+    height: 800px;
+
+    text-align: center;
+    align-items: center;
+    background: #ffffff; /* fallback for old browsers */
+
+    color: #1d1f20;
+    font-family: "Raleway", sans-serif;
+  }
+  :root {
+    --color-light: white;
+    --color-dark: #212121;
+    --color-signal: #fab700;
+    --color-background: var(--color-light);
+    --color-text: var(--color-dark);
+    --color-accent: var(--color-signal);
+    --size-bezel: 0.5rem;
+    --size-radius: 4px;
+    line-height: 1.4;
+    font-family: "Inter", sans-serif;
+    font-size: calc(0.6rem + 0.4vw);
+    color: var(--color-text);
+    background: var(--color-background);
+    font-weight: 300;
+    padding: 0 calc(var(--size-bezel) * 3);
+  }
+  .card {
+    background: var(--color-background);
+    padding: calc(4 * var(--size-bezel));
+    margin-top: calc(4 * var(--size-bezel));
+    border-radius: var(--size-radius);
+    border: 3px solid var(--color-shadow, currentColor);
+    box-shadow: 0.5rem 0.5rem 0 var(--color-shadow, currentColor);
+  }
+  .input {
+    position: relative;
+  }
+  .input__label {
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: calc(var(--size-bezel) * 0.75) calc(var(--size-bezel) * 0.5);
+    margin: calc(var(--size-bezel) * 0.75 + 3px) calc(var(--size-bezel) * 0.5);
+    background: pink;
+    white-space: nowrap;
+    transform: translate(0, 0);
+    transform-origin: 0 0;
+    background: var(--color-background);
+    transition: transform 120ms ease-in;
+    font-weight: bold;
+    line-height: 1.2;
+  }
+  .button {
+    display: inline-block;
+    padding: 0.3em 1.2em;
+    margin: 0 0.1em 0.1em 0;
+    border: 0.16em solid rgba(255, 255, 255, 0);
+    border-radius: 2em;
+    box-sizing: border-box;
+    text-decoration: none;
+    font-family: "Roboto", sans-serif;
+    font-weight: 300;
+    color: #070707;
+    text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);
+    text-align: center;
+    transition: all 0.2s;
+    width: fit-content;
+  }
+
+  .button:hover {
+    border-color: rgba(255, 255, 255, 1);
+  }
+
+  .input__field {
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    border: 3px solid currentColor;
+    padding: calc(var(--size-bezel) * 1.5) var(--size-bezel);
+    color: currentColor;
+    background: transparent;
+    border-radius: var(--size-radius);
+  }
+  .input__field:not(:-moz-placeholder-shown) + .input__label {
+    transform: translate(0.25rem, -65%) scale(0.8);
+    color: var(--color-accent);
+  }
+  .input__field:not(:-ms-input-placeholder) + .input__label {
+    transform: translate(0.25rem, -65%) scale(0.8);
+    color: var(--color-accent);
+  }
+  .input__field:focus + .input__label,
+  .input__field:not(:placeholder-shown) + .input__label {
+    transform: translate(0.25rem, -65%) scale(0.8);
+    color: var(--color-accent);
+  }
+  /*** FONTS ***/
+  @import url(https://fonts.googleapis.com/css?family=Montserrat:900|Raleway:400,400i,700,700i);
+  /*** VARIABLES ***/
+  /* Colors */
+  /*** EXTEND ***/
+  /* box-shadow */
+  ul.gradient-list > li::before,
+  ul.gradient-list > li {
+    box-shadow: 0.25rem 0.25rem 0.6rem rgba(0, 0, 0, 0.05),
+      0 0.5rem 1.125rem rgba(75, 0, 0, 0.05);
+    width: 350px;
+  }
+  ul {
+    text-align: center;
+    display: none;
+  }
+  li {
+    display: inline-block;
+    font-weight: bold;
+  }
+  ul.gradient-list {
+    list-style: none;
+    margin: 1.75rem 0;
+    padding-left: 1rem;
+  }
+  ul.gradient-list > li {
+    background: whitesmoke;
+    border-radius: 0 0.5rem 0.5rem 0.5rem;
+    margin-top: 1rem;
+    min-height: 3rem;
+    padding: 1rem 1rem 1rem 3rem;
+    position: relative;
+  }
+
+  ul.gradient-list > li::before {
+    align-items: flex-end;
+
+    color: #1d1f20;
+    display: flex;
+    font: 900 1.5em/1 "Montserrat";
+    justify-content: flex-end;
+    padding: 0.125em 0.25em;
+    z-index: 1;
+  }
+
+  ul.gradient-list > li + li {
+    margin-top: 2rem;
+  }
+  #background {
+    background-size: cover;
+  }
diff --git a/Weight Calculator/icon.png → Weight Calculator/icon_renamed.png b/Weight Calculator/icon.png → Weight Calculator/icon_renamed.png
diff --git a/Weight Calculator/manifest.json → Weight Calculator/manifest_renamed.json b/Weight Calculator/manifest.json → Weight Calculator/manifest_renamed.json
diff --git a/Weight Calculator/popup.html → Weight Calculator/popup_renamed.html b/Weight Calculator/popup.html → Weight Calculator/popup_renamed.html
diff --git a/Weight calculator/icon.png b/Weight calculator/icon.png
diff --git a/Weight calculator/manifest.json b/Weight calculator/manifest.json
diff --git a/Weight calculator/popup.html b/Weight calculator/popup.html