harvey h

harvey h

1662990688

Laravel Performance Optimization Tips

Do you know Laravel has been used to build 459,818 #websites😎 and among all #webframework #technologies, Laravel gains 8% of the market.👍 Organizations today prefer to utilize #Laravel for a variety of #ITdevelopment projects as a result of its growing popularity,😃 it is becoming crucial to understand the finest Laravel Performance Optimization tips and tricks. Want to learn more about them? Click here👇🏻

https://aglowiditsolutions.com/blog/laravel-performance-optimization/

Laravel Performance Optimization Tips

StaticWebPages.jl: A Black-box Generator for Static Websites

StaticWebPages.jl

A user-friendly static website generator written in Julia. No programming nor webdev skills required!!! Entirely Open-Source (GPLv2 licence)!

Although this generator originally targets academicians, it works out well for personal webpage and any static usage (front-end only) A more advanced static framework in Julia is available (cf Franklin.jl). For a full-stack web framework, please look at the great Genie.jl.

This generator is for you if

  • you want something simple to update and manage
  • responsive design (looks good on most devices)
  • want light load on the server and/or low bandwidth use
  • have no time/interest in making your own website by "hand"
  • new item/gadget access with a simple update in the julia command line

The beta only uses text files and command lines, but the first stable release will also integrate a graphical user interface (GUI).

I deeply apologize for those that tested the versions v0.1.x, as, from v0.2.0, the syntax has changed a lot. The reason is to add options to most components. It should not change drastically from now on.

How does it work

The user provides the content (text, images, files) and select which Items will display it. As simple as that. A full working example is provided here (or in the example folder). The result is available as http://baffier.fr

Installation

The only requirement is to install Julia and this package (preferably through the package interface of Julia). Please install the last stable release of Julia on the official download page.

In the Julia REPL (that you can launch as a standalone or call within a console), please enter Pkg REPL. To quote the package manager documentation:

Pkg comes with a REPL. Enter the Pkg REPL by pressing ] from the Julia REPL. To get back to the Julia REPL, press backspace or ^C.

The following code snippet update the general registry of Julia's packages, then install the StaticWebPages.jl package.

(@v1.5) pkg> up
(@v1.5) pkg> add StaticWebPages

You can check that the installation is complete and trigger a precompilation of the package (usually take a few minutes) by using the following command.

import StaticWebPages

Please note that precompilation occurs at first use after installation and updates.

The package can be use from the REPL, but we recommend it to be used through a script file as the run.jl presented below. Running the script should be as simple as writing the following command line.

julia run.jl

or in the REPL

include("run.jl")

Files organization

A compressed template can be found in the example/ folder as either template.tar or template.zip.

The two first following files are the only requirement. However, most users will prefer to provide some images/pictures and additional files such as a cv, a bibliography, and some downloadable content.

Local script file: run.jl

# import the website generator functions
import StaticWebPages
import StaticWebPages: local_info

## private information (local folders, connection infos, etc.)
# content and site paths are always required
local_info["content"] = "path/to/content_folder"
local_info["site"] = "path/to/site_folder"

# necessary only if using the upload_site function
local_info["protocol"] = "ftp"
local_info["user"] = "user"
local_info["password"] = "password"
local_info["server"] = "server_address"

# `rm_dir = true` will clean up the site folder before generating it again. Default to false.
# `opt_in = true` will add a link to this generator website in the side menu. Default to false.
StaticWebPages.export_site(d=local_info, rm_dir = true, opt_in = true)

## upload website (comment/delete if not needed)
# unfortunately does not work yet on windows system, please sync manually for the moment
StaticWebPages.upload_site(local_info)

Content folder

It must contain a content.jl file, and both an img and a files folders. Other content files, such as BibTeX bibliographic file should be put at the root of the folder (alongside content.jl). Please check the provided example if necessary.

## content.jl
######################################
# General information
######################################

# The pic.jpg file needs to be put in the img folder
info["avatar"] = "pic.jpg"

# The cv.pdf file needs to be put in the files folder
info["cv"] = "cv.pdf"

info["lang"] = "en"
info["name"] = "Jean-François BAFFIER"
info["title"] = "Baffier"

# The email is obfuscated using a reverse email writing. The email appear normally (re-reverse) through CSS.
# Although this is an effective technique against bots, it probably won't eventually.
# The user is free to add additional security such as replacing '@' by 'at'.
info["email"] = "jf@baffier.fr"

## icons to social networks in the side menu
# comment/delete the unwanted entries
info["researchgate"] = "https://www.researchgate.net/profile/Jean_Francois_Baffier"
info["googlescholar"] = "https://scholar.google.fr/citations?user=zo7FgSIAAAAJ&hl=fr"
info["orcid"] = "https://orcid.org/0000-0002-8800-6356"
info["dblp"] = "https://dblp.org/pid/139/8142"
info["linkedin"] = "https://www.linkedin.com/in/jeanfrancoisbaffier/"
info["github"] = "https://github.com/Azzaare"
info["twitter"] = "https://twitter.com/bioazzaare"

# The navigation side-bard default to 250px. If the content above doesn't fit, it be set to another length (in px)
info["nav_width"] = "300"

######################################
# publications.html
######################################
page(
    title="publications",
    sections=[
        Section(
            title="Publications",
            items=Publications("publications.bib")
        )
    ]
)

Themes

The only available theme for the moment is using Zurb foundation responsive front-end. Customization of this theme and addition of other themes are expected in a near future (contributions/suggestions/requests are welcome).

Items

Items are guaranteed to be compatible with the main theme (and hopefully new ones will be too).

Publications : a bibliography based on a bibliography file (uses Bibliography.jl)

# Simply provide a BibTeX file (usually .bib)
# Path is based on the root of the content folder
Publications("publications.bib")

To add labels to the publications entries, please add a swp-labels field to your entries. A labels field is also accepted, but will also appear in the bibTeX citation generated for that article. For instance,

@inproceedings{parmentier2019introducing,
    title={Introducing multilayer stream graphs and layer centralities},
    author={Parmentier, Pimprenelle and Viard, Tiphaine and Renoust, Benjamin and Baffier, Jean-Francois},
    booktitle={International Conference on Complex Networks and Their Applications},
    pages={684--696},
    year={2019},
    organization={Springer},
    doi = {10.1007/978-3-030-36683-4_55},
    swp-labels = {conference, preprint, software}
}

Image of a Publication Item

The attribution of colors is done automatically (within the limit of 22 labels, please issue a request if you need more ...)

Deck of Cards : a list of ordered and clearly separate cards

Deck( # Start of the list
    Card( # generic
        "Left",
        "Right",
        "Title",
        "Content"
    ),
    Card( # example
        "2019",
        "current",
        "Postdoctoral Researcher",
        "RIKEN Center for Advanced Intelligence (AIP)"
    )
 ) # End of the list

Image of Card Items

GitRepo : a list of GitHub repository displayed similarly to BibTeX entries

gitrepo = GitRepo( # currently work only with GitHub
    "Azzaare/CompressedStacks.cpp",
    "Humans-of-Julia/StaticWebPages.jl",
    "Humans-of-Julia/Bibliography.jl",
    "Humans-of-Julia/BibParser.jl",
    "Humans-of-Julia/BibInternal.jl",
    "JuliaGraphs/LightGraphs.jl",
    "JuliaGraphs/LightGraphsExtras.jl",
    "JuliaGraphs/SNAPDatasets.jl",
    "Azzaare/PackageStream.jl"
)

Image of a Git Item

Please note that GitHub will restrict unidentified requests to a certain amount per IP within a time limit (that I don't know the value). If it happens, a message error from GitHub API will be returned.

To circumvent this issue, you can uncomment the line local_info["auth_tokens"] = "PATH/TO/token.jl' in run.jl (or add it if necessary) and edit the token.jl by updating your Personnal Access Token.

token.jl aims to store all authentication tokens (for now, just GitHub). It content must be as follow (it is a simple variable containing your PAT):

# WARNING!
# YOUR TOKENS SHOULD NEVER BE SHARED! IF YOU USE GIT, DON'T FORGET TO ADD `token.jl` TO YOUR `.gitignore` FILE!
# YOU CAN ALSO STORE `token.jl` OUTSIDE OF THE STATICWEBPAGES FOLDER!

github_pat = "YOUR_PERSONAL_ACCESS_TOKEN" 

If the token is not valid, a 401: Bad Creditential error from GitHUb API will be returned.

As the comment states, take care not to push your token to your git repo! A good practice could be to store token.jl outside of your git project.

Block : Block of paragraphs with optional images on the side

# Examples with and without images
biography = Block(
    paragraphs(
    """
   Jean-François Baffier is an academic researcher at the RIKEN Center for Advanced Intelligence Project (AIP), and a consultant in Artificial Intelligence, Big Data Science, Data Structures, and Algorithms. As an academic, he gives back to society through fundamental research in computer science supplemented by open source libraries and softwares.
    """,
    """
    paragraph 2
    """,
    """
    paragraph 3
    """,
    """
    Jean-François implemented the StaticWebPages.jl package that was used to generate this website using a simple content file. This is a dummy email: $(email("dummy@example.purpose"))
    """
    ),
    images(
        Image("cs.png", "Compressed Stack"),
        Image("knowledge.png", "Flow of Knowledge")
    )
)

research = Block(
    paragraphs(
        """
        Principal Research Projects: Network Interdiction, Compressed Data Structures, Modern Academics, Explainable AI. Other research interest includes Graph Theory, Geometry, Optimization, and Games.
        """,
        """
        All of this research is supported by Open-Source Softwares and published as peer-review academic papers. 
        """
    ),
    images()
)

Image of a Block Item

TimeLines : a list of continuous items

grants = TimeLine(
    Dot(
        "Top",
        "Title",
        "Content"
    ),
    Dot(
        "2012-2015",
        "MEXT Scholarship",
        "The Monbukagakusho Scholarship is an academic scholarship offered by the Japanese Ministry of Education, Culture, Sports, Science and Technology (MEXT)."
    )
)

Image of a TimeLine Item

Nest! A container to list several items within the same section

# Nest will take a tuple of any Items (except itself)
positions_grants = Double(
    Section(
        title="Positions and grants",
        items=Nest(work_cards, grants)
    ),
    Section(title="Research Topics", items=research)
)

Pages

A page is composed of a name and a list of sections which can each be either single or double column. Each section is either a single Item or a pair of Items.

A publication page with only one single column section (by default, publications spread over two columns on large screens)

######################################
# publications.html
#   option 1: background for the page is set to start with white to emphasize the bibliographic items
######################################
page(
    title="publications",
    background=bg_white,
    sections=[
        Section(
            title="Publications",
            items=Publications("publications.bib")
        )
    ]
)

An index page with a TextSection and a double column (Card, TimeLine)

######################################
# index.html
# biography
# academic positions | honors, awards, and grants
######################################

# using previously defined items, we can define sections
section_biography = Section(title="Biography", items=biography)
positions_grants = Double(
    Section(title="Positions", items=work_cards),
    Section(title="Grants", items=grants)
)

# the next line will add the index page to the generated content
page(
    title="index",
    sections=[section_biography, positions_grants]
)

The hide option for page and Section

# Both page() and Section() can take the hide option
# If a page is hidden, it will not be generated, but it will still appear in the side menu
# If a section is hidden, it will just not appear (and the content will not be generated, including request to external API, such as GitHub)

page(
    title="software",
    background=bg_white,
    sections=[
        Section(
            title="Software",
            hide=true, # default to false
            items=github,
        )
    ]
)

Inline components

Some components can be inserted within the content of usual Items, such as Block, Card, Dot. Currently, only link and email are supported.

Email can obfuscated (default), or not ...

email("dummy@example.purpose") # obfuscated
email(
    "dummy@example.purpose";
    content = "content that appears as the email link", # ignored if obfuscated
    obfuscated = false
    )

Link can be an internal or an external link

link("research project", "research.hmtl") # inner link
link("StaticWebPages.jl", "https://github.com/Humans-of-Julia/StaticWebPages.jl")

The main theme, and some items (BibTeX, Card, TimeLine) are inspired by the Word Press Faculty template of owwwlab, also under GPLv2. All elements inspired from that template can be found in the HTML/CSS code associated with those items.

Download Details:

Author: Humans-of-Julia
Source Code: https://github.com/Humans-of-Julia/StaticWebPages.jl 
License: GPL-2.0 license

#julia #generator #websites 

StaticWebPages.jl: A Black-box Generator for Static Websites

Detect and Blur Human Faces on Your Website Using JavaScript

Content moderation is very necessary for a website. If you are developing a website where users can upload images, then you have to be extra cautious. You can’t trust your users. If they upload some objectionable content, then sometimes you as a creator of the site, become the victim of it.

In every modern web 2.0 application, a content moderation system is present. Some popular websites like Facebook, Instagram, and Twitter have both automatic and manual content moderation systems in place.

But for a small team and individual developer, manual content moderation is not feasible and not very economical. Therefore we can use artificial intelligence (AI) based automation to detect any objectionable content and blur it out.

See more at: https://betterprogramming.pub/detect-and-blur-human-faces-on-your-website-8c4a2d69a538

#websites #css #javascript 

Detect and Blur Human Faces on Your Website Using JavaScript
曾 俊

曾 俊

1659262200

使用 JavaScript 在您的网站上检测和模糊人脸

内容审核对于网站来说是非常必要的。如果您正在开发一个用户可以上传图片的网站,那么您必须格外小心。你不能信任你的用户。如果他们上传了一些令人反感的内容,那么有时您作为网站的创建者,就会成为它的受害者。

在每个现代 Web 2.0 应用程序中,都存在内容审核系统。一些流行的网站,如 Facebook、Instagram 和 Twitter,都有自动和手动内容审核系统。

但是对于小团队和个人开发者来说,手动内容审核是不可行的,也不是很经济。因此,我们可以使用基于人工智能 (AI) 的自动化来检测任何令人反感的内容并将其模糊化。

构建基于人工智能的自动化并不容易。您必须聘请有才华的开发人员,并且应该拥有大量数据来训练您的 AI 模型。但我们可以在这里走捷径。市场上有很多软件即服务 (SaaS) 平台,可以在这方面为我们提供帮助。

Pixlab是一个 SaaS 平台,可以为其最先进的 AI 模型提供用户友好的应用程序编程接口 (API)。您可以轻松地将这些服务集成到您的应用程序中。查看此链接了解更多信息。

议程

在本文中,我们将使用 P ixlab API制作一个 Web 应用程序。我将使用香草 JavaScript。

您可以对任何框架使用相同的逻辑,如 react、Vue、Angular 等。由于我们大量使用 Pixlab API,请确保获取API 密钥以进行后续操作。

在 Web 应用程序中,首先,我们从用户那里获取图像输入。然后我们检测图像中存在的人脸。最后,我们模糊了图像的面并在我们的应用程序中渲染最终图像。

我们将使用facedetectAPI 端点来检测图像中的人脸。然后我们发出另一个请求,用我们从API 接收到的面部坐标来修改端点,以模糊我们的图像。facedetect

我们项目的最终版本将如下所示。

现场视频演示

当我们正在制作一个网络应用程序时,由于 CORS 限制,我们无法直接向 Pixlab 服务器发出请求。CORS 限制是为了保护用户。您可以在此处了解有关CORS 的更多信息。因此,我们使用 Nodejs 制作代理服务器并在那里启用 CORS。然后我们从前端向代理服务器发出所有请求,并将这些请求路由到 Pixlab API 以绕过 CORS 限制。

话不多说,让我们来制作我们的 Web 应用程序。

项目设置

在深入学习本教程之前,让我们为我们的项目搭建脚手架。我们需要在这个项目中同时制作前端和后端(作为代理服务器)。frontend因此,backend在项目根目录中创建 2 个命名目录。

在您的前端目录中,创建 3 个名为index.html, style.css, index.js. 在您的 VSCode 中安装 live-server 以提供这些静态文件。

在您的后端目录中,通过运行此命令启动一个 npm 项目。

cd backend
npm init -y

当我们将 express.js 应用程序作为代理服务器时,让我们一次性安装所有依赖项。

npm install axios cors dotenv express express-fileupload form-data
npm install — save-dev nodemon

package.json现在使用这 2 个命令更改文件的脚本部分。

"scripts": {
    "dev": "nodemon server.js",
    "start": "node server.js"
  },

现在在您的后端目录中创建server.js文件。

完成所有这些设置后,项目结构将如下所示。

.
├── backend
│   ├── package.json
│   ├── package-lock.json
│   └── server.js
└── frontend
    ├── index.html
    ├── index.js
    └── style.css

让我们快速了解一下我们项目中所有这些 npm 包的用途。

  1. axios: Axios 是一个在 Node.js 世界中非常流行的 http 客户端。它可以帮助我们非常轻松地编写复杂的查询。
  2. cors: cors 库用于在对我们服务器的每个请求中添加 CORS 标头。您还可以使用此包在 CORS 策略中进行大量自定义。
  3. dotenv: 这个包帮助我们在 Node.js 项目中创建和使用环境变量。这是隐藏您不想推送到 GitHub 的 API 密钥或其他机密所必需的。
  4. express: 这个库不需要解释。这是 Node.js 世界中非常流行的具有中间件功能的服务器库。
  5. express-fileupload:这个库作为中间件工作,让我们可以访问从客户端上传的所有文件。
  6. form-data: 这个包在 Nodejs 环境中提供浏览器FormData对象。为了向某些 API 发出 multipart/form-data 请求,我在这个项目中使用了这个包。
  7. nodemon:这是一个开发依赖项,当您的 javascript 文件中的某些代码发生更改时,它会自动重新启动您的服务器。

让我们制作我们的代理 NodeJs 服务器

正如我之前提到的,由于浏览器 CORS 政策,我们不能直接从我们的前端应用程序调用 Pixlab API。因此,我们将创建一个 Node.js 服务器,将我们的请求代理到 Pixlab API。

在本节中,我交替使用了客户端和前端。请记住这一点。

代理用户上传图片到 Pixlab API

这是我们项目中代理上传图像的最棘手的部分。Pixlab 更愿意接受在线图片链接来处理我们的请求。为了将我们的本地图像上传到存储桶,Pixlab 还提供了一个名为store的开发人员友好 API 。

此 API 接受 POST 请求。请求的主体应该是 multipart/form-data ,其中包含用户上传的图像和 API 密钥。如果请求成功,API 会获取您的图像并将其上传到在线存储桶,并为您提供指向该图像的链接。

在我们的代理服务器中,我们在/upload路由中输入用户文件。我们使用包访问用户上传的图像express-fileupload。将此包添加为中间件后,我们可以使用 justreq.files方法访问用户上传文件。

form-data 然后我们使用我之前提到的包构建我们的 multipart/form-data 请求。在表单数据中附加用户上传的图像和 API 密钥。您可以dotenv在此处使用包来隐藏您的 API 密钥并将其作为环境变量进行访问。

multipart/form-data 构建完成后,我们将请求提交给 Pixlab API。然后无论我们得到什么响应,如果它是 200,我们将其作为对用户的响应进行管道传输。

我们/upload路径的代码如下所示。


app.post("/upload", (req, res) => {
  try {
    if (!req.files || Object.keys(req.files).length === 0) {
      return res.status(400).send("No files were uploaded.");
    }
    let image = req.files.image;// If you want to save the image
    // image.mv(__dirname + "/uploads/" + image.name);const form = new FormData();
    form.append("file", image.data, image.name);
    form.append("key", process.env.PIXLAB_KEY);form.submit(
      {
        protocol: "https:",
        host: "api.pixlab.io",
        path: "/store",
        method: "POST",
        headers: {
          "Content-Type": `multipart/form-data; boundary=${form.getBoundary()}`,
        },
      },
      (err, resp) => {
        if (err) {
          res.status(503).send("File server is currently unavailable");
        }
        resp.pipe(res);
      }
    );
  } catch (error) {
    res.status(500).send(error);
  }
});

如果此请求成功,那么我们将获得指向用户上传图像的链接。我们保留与我们的链接以在facedetect和mogrifyAPI 请求中使用。

代理 facedetect API(人脸检测)

现在让我们使用 Node.js 制作一个Facedetect API 代理。我们使用/facedetect路径来代理这个 API。要读取用户发送的 JSON 数据,请express.json()在我们的服务器中使用中间件。

首先,我们获取用户发送的图像 URL(来自我们之前的请求)并使用此图像 URL 和 Pixlab API 密钥向 Pixlab API 发出获取请求。然后我们只需将响应从服务器发送到客户端。

路径的代码/facedetect如下所示。

app.post("/facedetect", (req, res) => {
  axios
    .get("https://api.pixlab.io/facedetect", {
      params: {
        img: req.body.url,
        key: process.env.PIXLAB_KEY,
      },
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

请求成功后,我们从服务器获取人脸坐标列表。我们将这些坐标发送给客户。我们需要在mogrifyAPI 中使用这些坐标来模糊人脸。

代理 mogrify API(人脸模糊)

我们使用/mogrify服务器的路径来调用 Pixlab 的mogrifyAPI。客户端提供我们从上述 2 个请求中获得的图像 URL 和面部坐标。解析用户提供的数据后,我们向 Pixlab mogrifyAPI 发出 POST 请求。

里面的代码/mogrify是这样的。


app.post("/mogrify", (req, res) => {
  axios
    .post("https://api.pixlab.io/mogrify", {
      img: req.body.url,
      key: process.env.PIXLAB_KEY,
      cord: req.body.coord,
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

请求成功后,它会返回我们之前上传的图像的模糊人脸版本。

然后我们将新的模糊图像链接传递给客户端。现在客户端可以使用这个链接来显示图像。

构建前端部分

从用户的角度来看,添加一个直观的前端是非常必要的。在本节中,我们将这个前端部分作为应用程序的一部分。为了简单起见,我尽量减少前端。

获取用户文件输入

首先,用最少的 HTML 标记填充“index.html”文件。供您参考,这是我的这个项目的起始 HTML 模板。


<!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" />
    <title>Pixlab web</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

在上面的 HTML 代码中,我们将 CSS 和 javascript 文件与 HTML 链接起来,并构建了我们网站的基本结构。

现在,要从用户那里获取文件输入,我们必须在 HTML 文件中添加一个输入标签。确保添加accept属性以仅接受 jpg 和 png 图像。


<input
 type="file"
    accept="image/jpeg,image/png"
    id="imageinput"
/>

现在在您的 HTML 标记中添加 2 个图像标签。一种用于显示用户上传的图像,另一种用于从 Pixlab API 服务器渲染处理过的模糊人脸图像。


<img id="image" />
<img id="finalimage" />

最后,添加一个按钮来调用图像处理。

<button id="btn-process">Process</button>

让我们的前端交互

在index.js文件中,首先,我们定义了我们在这个过程中需要的所有 DOM 节点。这包括imageInput来自用户的图像 ( ) 的输入标签、用于显示初始 (图像) 和最终 ( finalImage) 结果的 2 个图像标签以及一个按钮 ( processBtn) 以启动该过程。


const imageInput = document.getElementById("imageinput");
const image = document.getElementById("image");
const finalImage = document.getElementById("finalimage");
const processBtn = document.getElementById("btn-process");

现在,当用户使用我们的文件选择器选择新图像时,我们将该图像读取为 DataURL,然后将该图像呈现给我们的初始图像标签。

function readFileAsync(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}imageInput.addEventListener("change", async (e) => {
  const fileList = e.target.files;
  if (fileList.length > 0) {
    let data = await readFileAsync(fileList[0]);
    image.src = data;
    file = fileList[0];
  }
});

现在我们手中有了用户选择的图像。因此,现在是向我们的代理服务器发送请求以开始图像处理的时候了。

使用 Pixlab API 进行图像处理

在这个过程中,用户每上传一张图片,我们一共向服务器发起了 3 次请求。这些请求是连续的,所以我们必须严格按顺序进行查询。

  1. 将图像上传到远程服务器:要将图像上传到代理服务器,我们使用用户选择的图像向代理服务器的路由发出 POST 请求/upload。我们制作了一个辅助函数来简化这个过程。
async function uploadToStore(image) {
  const formData = new FormData();
  formData.append("image", image);
  try {
    let response = await fetch("http://localhost:5000/upload", {
      method: "POST",
      body: formData,
    });
    return await response.json();
  } catch (error) {
    throw "Fetch request give some error";
  }
}

2.调用人脸检测API:通过使用我们从上一个请求中得到的远程图像链接,我们调用人脸检测API。/facedetect我们向代理服务器的路由发出 POST 请求。

async function facedetect(imageurl) {
  try {
    let faceDetectionResult = await fetch("http://localhost:5000/facedetect", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageurl,
      }),
    });let tempjson = await faceDetectionResult.json();
    return tempjson.faces;
  } catch (error) {
    throw "Face detection not working";
  }
}

3.模糊检测到的人脸:我们从之前的查询中获取我们上传的图像的人脸坐标。现在我们调用/mogrify代理路由来模糊我们的图像。我们再次使用面部坐标和图像链接发出 POST 请求。

async function blurImage(faceCoordinate, imageUrl) {
  try {
    let blurimageResponse = await fetch("http://localhost:5000/mogrify", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageUrl,
        coord: faceCoordinate,
      }),
    });return blurimageResponse.json();
  } catch (error) {
    throw "Blur image function is not working";
  }
}

作为回报,我们从这个查询中获得了模糊图像链接。我们将使用此 URL 在用户面前显示图像。

管理所有这些功能的按钮

所有这些流程都由我们之前定义的流程按钮管理。它向每个端点逐一发出请求,并将所需值从一个函数传递到另一个函数。处理按钮是我们前端部分的管理器。


processBtn.onclick = async () => {
  if (file) {
    let imageUploadResponse = await uploadToStore(file);
    if (imageUploadResponse["ssl_link"]) {
      let faceCoordinates = await facedetect(imageUploadResponse["ssl_link"]);
      if (faceCoordinates) {
        let blurimage = await blurImage(
          faceCoordinates,
          imageUploadResponse["ssl_link"]
        );
        finalImage.src = blurimage["ssl_link"];
      }
    }
  } else {
    throw "No file present to process";
  }
};

奖金

如果你读到这里,这是你的GitHub 项目链接。我必须在这里和那里进行一些更改以使我们的网络应用程序看起来更好。此外,您可以查看本文未包含的 CSS 部分。

资料来源:https ://betterprogramming.pub/detect-and-blur-human-faces-on-your-website-8c4a2d69a538

 #websites #css #javascript 

使用 JavaScript 在您的网站上检测和模糊人脸

JavaScript を使用して Web サイト上の人間の顔を検出してぼかします

コンテンツのモデレーションは、Web サイトにとって非常に必要です。ユーザーが画像をアップロードできる Web サイトを開発している場合は、特に注意する必要があります。ユーザーを信頼することはできません。彼らが不快なコンテンツをアップロードした場合、サイトの作成者であるあなたが被害者になることがあります.

最新のすべての Web 2.0 アプリケーションには、コンテンツ モデレーション システムが存在します。Facebook、Instagram、Twitter などの一部の人気のある Web サイトでは、自動および手動のコンテンツ モデレート システムが導入されています。

しかし、小規模なチームと個々の開発者にとって、手動によるコンテンツ モデレーションは実現不可能であり、あまり経済的ではありません。そのため、人工知能 (AI) ベースの自動化を使用して、不快なコンテンツを検出し、それをぼかすことができます。

AI ベースの自動化を構築するのは簡単ではありません。有能な開発者を雇う必要があり、AI モデルをトレーニングするための大量のデータが必要です。しかし、ここで近道をすることができます。市場には多くのサービスとしてのソフトウェア (SaaS) プラットフォームがあり、この点で私たちを助けることができます。

Pixlabは、最先端の AI モデルに使いやすいアプリケーション プログラミング インターフェイス (API) を提供できる SaaS プラットフォームです。これらのサービスをアプリに簡単に統合できます。詳細については、このリンクを参照してください。

議題

この記事では、P ixlab APIを使用して Web アプリを作成します。バニラ JavaScript を使用します。

同じロジックを、react、Vue、Angular などの任意のフレームワークに使用できます。Pixlab API を頻繁に使用しているため、必ずAPI キーを取得して従うようにしてください。

Web アプリでは、まず、ユーザーから画像入力を受け取ります。次に、画像に写っている人物の顔を検出します。最後に、画像の顔をぼかして、アプリで最終的な画像をレンダリングします。

API エンドポイントを使用してfacedetect、画像内の人間の顔を検出します。次に、 API から受け取った顔座標を使用してエンドポイントをmogrifyする別のリクエストを行い、画像をぼかします。facedetect

プロジェクトの最終バージョンは次のようになります。

ライブビデオデモ

Web アプリを作成しているため、CORS の制限により、Pixlab サーバーに直接リクエストを行うことはできません。CORS 制限は、ユーザーを保護するためにあります。CORSの詳細については、こちらをご覧ください。そのため、Nodejs を使用してプロキシ サーバーを作成し、そこで CORS を有効にします。次に、フロント エンドからそのプロキシ サーバーへのすべてのリクエストを作成し、これらのリクエストを Pixlab API にルーティングして、CORS 制限をバイパスします。

話はもう十分です。Web アプリケーションを作成しましょう。

プロジェクトのセットアップ

チュートリアルを深く掘り下げる前に、プロジェクトを足場にしましょう。このプロジェクトでは、フロントエンドとバックエンド (プロキシ サーバーとして) の両方を作成する必要があります。したがって、プロジェクト ルート内に2 つのディレクトリfrontendを作成します。backend

フロントエンド ディレクトリ内に、、、という名前の 3 つのファイルを作成しindex.htmlます。これらの静的ファイルを提供するために、VSCode に live-server をインストールします。style.cssindex.js

バックエンド ディレクトリ内で、次のコマンドを実行して npm プロジェクトを開始します。

cd backend
npm init -y

プロキシ サーバーとして express.js アプリを作成しているので、すべての依存関係を一度にインストールしましょう。

npm install axios cors dotenv express express-fileupload form-data
npm install — save-dev nodemon

package.jsonこれらの 2 つのコマンドを使用して、ファイルのスクリプト セクションを変更します。

"scripts": {
    "dev": "nodemon server.js",
    "start": "node server.js"
  },

server.jsバックエンド ディレクトリ内にファイルを作成します。

これらすべてのセットアップの後、プロジェクト構造は次のようになります。

.
├── backend
│   ├── package.json
│   ├── package-lock.json
│   └── server.js
└── frontend
    ├── index.html
    ├── index.js
    └── style.css

プロジェクトでこれらすべての npm パッケージがどのように使用されているかを簡単に学びましょう。

  1. axios: Axios は、Node.js の世界で非常に人気のある HTTP クライアントです。複雑なクエリを非常に簡単に作成するのに役立ちます。
  2. cors: cors ライブラリは、サーバーへのすべてのリクエストに CORS ヘッダーを追加するために使用されます。このパッケージを使用して、CORS ポリシーで多くのカスタマイズを行うこともできます。
  3. dotenv: このパッケージは、Node.js プロジェクトで環境変数を作成して使用するのに役立ちます。これは、GitHub にプッシュしたくない API キーまたはその他のシークレットを非表示にするために必要です。
  4. express: このライブラリは説明不要です。これは、Node.js の世界でミドルウェア機能を備えた非常に人気のあるサーバー ライブラリです。
  5. express-fileupload: このライブラリはミドルウェアとして機能し、クライアントからアップロードされたすべてのファイルにアクセスできます。
  6. form-data: このパッケージは、Nodejs 環境でブラウザの FormDataオブジェクトを提供します。いくつかの API に対して multipart/form-data リクエストを行うために、このプロジェクトでこのパッケージを使用します。
  7. nodemon: これは、javascript ファイル内のコードが変更されるたびにサーバーを自動的に再起動する開発依存関係です。

プロキシ NodeJs サーバーを作成しましょう

前述したように、ブラウザの CORS ポリシーにより、フロントエンド アプリから Pixlab API を直接呼び出すことはできません。したがって、リクエストを Pixlab API にプロキシする Node.js サーバーを作成します。

このセクションでは、クライアントとフロントエンドの両方を同じ意味で使用しました。このことを覚えておいてください。

プロキシ ユーザーが画像を Pixlab API にアップロード

これは、アップロードされた画像をプロキシするプロジェクトの最も難しい部分です。Pixlab は、リクエストを処理するためにオンラインの画像リンクを受け入れることを好みます。ローカル イメージをストレージ バケットにアップロードするために、Pixlab はストアと呼ばれる開発者向けの API も提供しています。

この API は POST リクエストを受け入れます。リクエストの本文は、ユーザーがアップロードした画像と API キーを含む multipart/form-data である必要があります。リクエストが成功すると、API は画像を取得してオンラインのストレージ バケットにアップロードし、その画像へのリンクを提供します。

私たちのプロキシ サーバーでは、/uploadルートでユーザー ファイルの入力を受け取ります。express-fileuploadパッケージを使用して、ユーザーがアップロードした画像にアクセスします。このパッケージをミドルウェアとして追加すると、メソッドのみを使用してユーザー アップロード ファイルにアクセスできますreq.files。

form-data 次に、前述のパッケージを使用して multipart/form-data リクエストを作成します。ユーザーがアップロードした画像と API キーを form-data に追加します。dotenvここで packageを使用して API キーを非表示にし、環境変数としてアクセスできます。

multipart/form-data の構築後、リクエストを Pixlab API に送信します。次に、受け取った応答が何であれ、それが 200 の場合は、それをユーザーへの応答としてパイプします。

パスのコードは/upload次のようになります。


app.post("/upload", (req, res) => {
  try {
    if (!req.files || Object.keys(req.files).length === 0) {
      return res.status(400).send("No files were uploaded.");
    }
    let image = req.files.image;// If you want to save the image
    // image.mv(__dirname + "/uploads/" + image.name);const form = new FormData();
    form.append("file", image.data, image.name);
    form.append("key", process.env.PIXLAB_KEY);form.submit(
      {
        protocol: "https:",
        host: "api.pixlab.io",
        path: "/store",
        method: "POST",
        headers: {
          "Content-Type": `multipart/form-data; boundary=${form.getBoundary()}`,
        },
      },
      (err, resp) => {
        if (err) {
          res.status(503).send("File server is currently unavailable");
        }
        resp.pipe(res);
      }
    );
  } catch (error) {
    res.status(500).send(error);
  }
});

このリクエストが成功すると、ユーザーがアップロードした画像へのリンクが取得されます。API リクエストfacedetectで使用するためのリンクを保持します。mogrify

プロキシ facedetect API (顔検出)

それでは、Node.js を使用してFacedetect API プロキシを作成しましょう。pathを使用/facedetectして、この API をプロキシします。ユーザーが送信した JSON データを読み取るexpress.json()には、サーバーでミドルウェアを使用します。

まず、ユーザーが送信した画像の URL を (前のリクエストから) 取得し、この画像の URL と Pixlab API キーを使用して Pixlab API に get リクエストを行います。次に、サーバーからクライアントに応答を送信します。

パスのコードは/facedetect次のようになります。

app.post("/facedetect", (req, res) => {
  axios
    .get("https://api.pixlab.io/facedetect", {
      params: {
        img: req.body.url,
        key: process.env.PIXLAB_KEY,
      },
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

リクエストが成功すると、サーバーから顔座標のリストを取得します。これらの座標をクライアントに送信します。mogrify人の顔をぼかすために API で使用するには、これらの座標が必要です。

プロキシ mogrify API (顔ぼかし)

サーバーのパスを使用/mogrifyして、Pixlab のmogrifyAPI を呼び出します。クライアントは、上記の 2 つの要求から取得した画像の URL と顔の座標を提供します。ユーザーが提供したデータを解析した後、Pixlab mogrifyAPI に POST リクエストを送信します。

中のコード/mogrifyはこんな感じ。


app.post("/mogrify", (req, res) => {
  axios
    .post("https://api.pixlab.io/mogrify", {
      img: req.body.url,
      key: process.env.PIXLAB_KEY,
      cord: req.body.coord,
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

リクエストが成功すると、以前にアップロードした画像のぼやけた顔バージョンが返されます。

次に、新しいぼやけた画像のリンクをクライアントに渡します。これで、クライアントはこのリンクを使用して画像を表示できます。

フロントエンド部分の構築

直感的なフロントエンドを追加することは、ユーザーの観点から非常に重要です。このセクションでは、このフロントエンドをアプリケーションの一部にします。シンプルにするために、フロントエンドは最小限に抑えています。

ユーザーファイル入力を取得する

最初に、最低限の HTML マークアップを「index.html」ファイルに入力します。参考までに、これはこのプロジェクトの最初の HTML テンプレートです。


<!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" />
    <title>Pixlab web</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

上記の HTML コードでは、CSS と JavaScript ファイルを HTML にリンクし、Web サイトの必要最小限の構造を作成します。

ここで、ユーザーからファイル入力を取得するには、HTML ファイル内に入力タグを追加する必要があります。acceptjpg および png 画像のみを受け入れるように、帰属表示を必ず追加してください。


<input
 type="file"
    accept="image/jpeg,image/png"
    id="imageinput"
/>

ここで、HTML マークアップに 2 つのイメージ タグを追加します。1 つはユーザーがアップロードした画像を表示するためのもので、もう 1 つは Pixlab API サーバーから処理されたぼかした顔画像をレンダリングするためのものです。


<img id="image" />
<img id="finalimage" />

最後に、画像処理を呼び出すボタンを追加します。

<button id="btn-process">Process</button>

フロントエンドをインタラクティブにする

ファイル内index.jsで、まず、このプロセスで必要なすべての DOM ノードを定義します。これにはimageInput、ユーザーからの画像の入力タグ ( )、初期 (画像) と最終 ( ) の結果を表示するための 2 つの画像タグ、プロセスを開始するためのfinalImage1 つのボタン ( ) が含まれます。processBtn


const imageInput = document.getElementById("imageinput");
const image = document.getElementById("image");
const finalImage = document.getElementById("finalimage");
const processBtn = document.getElementById("btn-process");

ユーザーがファイル ピッカーを使用して新しい画像を選択すると、この画像を DataURL として読み取り、この画像を最初の画像タグにレンダリングします。

function readFileAsync(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}imageInput.addEventListener("change", async (e) => {
  const fileList = e.target.files;
  if (fileList.length > 0) {
    let data = await readFileAsync(fileList[0]);
    image.src = data;
    file = fileList[0];
  }
});

これで、ユーザーが選択した画像が手に入りました。したがって、ここでプロキシ サーバーにリクエストを送信して、画像処理を開始します。

Pixlab API を使用した画像処理

このプロセスでは、ユーザーが画像をアップロードするたびに、合計 3 つのリクエストをサーバーに送信します。これらのリクエストは連続しているため、厳密に順番にクエリを作成する必要があります。

  1. リモート サーバー/uploadへの画像のアップロード: 画像をプロキシ サーバーにアップロードするには、ユーザーが選択した画像を使用してプロキシ サーバーをルーティングする POST 要求を行います。このプロセスを簡単にするヘルパー関数を作成します。
async function uploadToStore(image) {
  const formData = new FormData();
  formData.append("image", image);
  try {
    let response = await fetch("http://localhost:5000/upload", {
      method: "POST",
      body: formData,
    });
    return await response.json();
  } catch (error) {
    throw "Fetch request give some error";
  }
}

2.顔検出 API の呼び出し: 前の要求から取得したリモート画像リンクを使用して、顔検出 API を呼び出します。/facedetectプロキシ サーバーのルートにPOST リクエストを送信します。

async function facedetect(imageurl) {
  try {
    let faceDetectionResult = await fetch("http://localhost:5000/facedetect", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageurl,
      }),
    });let tempjson = await faceDetectionResult.json();
    return tempjson.faces;
  } catch (error) {
    throw "Face detection not working";
  }
}

3.検出された顔をぼかす: 前のクエリからアップロードした画像の顔の座標を取得します。次に、プロキシ ルートを呼び出して/mogrify画像をぼかします。ここでも、顔座標と画像リンクを使用して POST リクエストを作成しています。

async function blurImage(faceCoordinate, imageUrl) {
  try {
    let blurimageResponse = await fetch("http://localhost:5000/mogrify", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageUrl,
        coord: faceCoordinate,
      }),
    });return blurimageResponse.json();
  } catch (error) {
    throw "Blur image function is not working";
  }
}

代わりに、このクエリからぼかし画像リンクを取得します。この URL を使用して、ユーザーの前に画像を表示します。

これらすべての機能を管理するボタン

これらのプロセスはすべて、前に定義したプロセス ボタンによって管理されます。各エンドポイントに 1 つずつリクエストを行い、ある関数から別の関数に必要な値を渡します。処理ボタンは、フロントエンド部分のマネージャーです。


processBtn.onclick = async () => {
  if (file) {
    let imageUploadResponse = await uploadToStore(file);
    if (imageUploadResponse["ssl_link"]) {
      let faceCoordinates = await facedetect(imageUploadResponse["ssl_link"]);
      if (faceCoordinates) {
        let blurimage = await blurImage(
          faceCoordinates,
          imageUploadResponse["ssl_link"]
        );
        finalImage.src = blurimage["ssl_link"];
      }
    }
  } else {
    throw "No file present to process";
  }
};

ボーナス

ここまで読んでいる場合、これはGitHub プロジェクトのリンクです。Web アプリの見栄えを良くするために、あちこちにいくつかの変更を加える必要があります。また、この記事に含まれていない CSS の部分を確認することもできます。

ソース: https://betterprogramming.pub/detect-and-blur-human-faces-on-your-website-8c4a2d69a538

 #websites #css #javascript 

JavaScript を使用して Web サイト上の人間の顔を検出してぼかします
Rui  Silva

Rui Silva

1659258240

Detecte E Desfoque Rostos Humanos Em Seu Site Usando JavaScript

A moderação de conteúdo é muito necessária para um site. Se você está desenvolvendo um site onde os usuários podem fazer upload de imagens, você deve ser extremamente cauteloso. Você não pode confiar em seus usuários. Se eles enviarem algum conteúdo censurável, às vezes você, como criador do site, se tornará vítima dele.

Em todos os aplicativos modernos da Web 2.0, um sistema de moderação de conteúdo está presente. Alguns sites populares como Facebook, Instagram e Twitter têm sistemas de moderação de conteúdo automáticos e manuais.

Mas para uma equipe pequena e um desenvolvedor individual, a moderação manual de conteúdo não é viável e não é muito econômica. Portanto, podemos usar a automação baseada em inteligência artificial (IA) para detectar qualquer conteúdo censurável e desfocá-lo.

Construir automação baseada em IA não é muito fácil. Você precisa contratar um desenvolvedor talentoso e deve ter muitos dados para treinar seu modelo de IA. Mas podemos pegar um atalho aqui. Existem muitas plataformas de software como serviço (SaaS) presentes no mercado, que podem nos ajudar nesse aspecto.

Pixlab é uma plataforma SaaS, que pode fornecer uma interface de programação de aplicativos (API) amigável para seus modelos de IA de última geração. Você pode integrar facilmente esses serviços ao seu aplicativo. Confira este link para mais informações.

Agenda

Neste artigo, vamos fazer um aplicativo da web usando a API do P ixlab . Vou usar o JavaScript de baunilha.

Você pode usar a mesma lógica para qualquer framework como react, Vue, Angular, etc. Como estamos usando muito a API do Pixlab, certifique-se de obter uma chave de API para acompanhar.

No aplicativo da Web, primeiro, recebemos uma entrada de imagem do usuário. Em seguida, detectamos os rostos das pessoas presentes na imagem. Por fim, desfocamos as faces da imagem e renderizamos a imagem final em nosso aplicativo.

Usaremos o facedetectendpoint da API para detectar rostos humanos em uma imagem. Em seguida, fazemos outra solicitação para mogrificar o endpoint com as coordenadas de rosto que recebemos da facedetectAPI para desfocar nossa imagem.

A versão final do nosso projeto ficará assim.

Demonstração em vídeo ao vivo

Como estamos fazendo um aplicativo web, não podemos fazer uma solicitação direta aos servidores Pixlab devido às restrições do CORS. As restrições CORS existem para proteger o usuário. Você pode aprender mais sobre CORS aqui . Portanto, fazemos um servidor proxy usando Nodejs e habilitamos o CORS lá. Em seguida, fazemos todas as solicitações do nosso front-end para esse servidor proxy e roteamos essas solicitações para as APIs do Pixlab para contornar as restrições do CORS.

Chega de falar, vamos fazer nossa aplicação web.

Configuração do projeto

Antes de mergulhar fundo no tutorial, vamos montar nosso projeto. Precisamos fazer o front-end e o back-end (como um servidor proxy) neste projeto. Portanto, crie 2 diretórios nomeados frontende backenddentro da raiz do seu projeto.

Dentro do seu diretório frontend, crie 3 arquivos chamados index.html, style.css, index.js. Instale o live-server em seu VSCode para servir esses arquivos estáticos.

Dentro do seu diretório de back-end, inicie um projeto npm executando este comando.

cd backend
npm init -y

Como estamos fazendo um aplicativo express.js como nosso servidor proxy, vamos instalar todas as dependências de uma vez.

npm install axios cors dotenv express express-fileupload form-data
npm install — save-dev nodemon

Agora altere a seção de script do seu package.jsonarquivo com esses 2 comandos.

"scripts": {
    "dev": "nodemon server.js",
    "start": "node server.js"
  },

Agora crie server.jso arquivo dentro do seu diretório de back-end.

Após todas essas configurações, a estrutura do projeto ficará mais ou menos assim.

.
├── backend
│   ├── package.json
│   ├── package-lock.json
│   └── server.js
└── frontend
    ├── index.html
    ├── index.js
    └── style.css

Vamos aprender rapidamente qual é o uso de todos esses pacotes npm em nosso projeto.

  1. axios: Axios é um cliente http muito popular no mundo Node.js. Ele nos ajuda a escrever consultas complexas com muita facilidade.
  2. cors: a biblioteca cors é usada para adicionar cabeçalhos CORS em cada solicitação ao nosso servidor. Você também pode fazer muitas customizações na política CORS usando este pacote.
  3. dotenv: Este pacote nos ajuda a criar e usar variáveis ​​de ambiente em nosso projeto Node.js. Isso é necessário para ocultar sua chave de API ou outros segredos que você não deseja enviar para o GitHub.
  4. express: Esta biblioteca não precisa de explicação. Esta é uma biblioteca de servidor muito popular com capacidade de middleware no mundo Node.js.
  5. express-fileupload: Esta biblioteca funciona como middleware e nos dá acesso a todos os arquivos carregados do cliente.
  6. form-data: Este pacote fornece o objeto FormData do navegador no ambiente Nodejs. Para fazer uma solicitação multipart/form-data para alguma API, eu uso este pacote neste projeto.
  7. nodemon: Esta é uma dependência de desenvolvimento que reinicia automaticamente seu servidor sempre que algum código é alterado em seus arquivos javascript.

Vamos fazer nosso servidor proxy NodeJs

Como mencionei anteriormente, devido à política CORS do navegador, não podemos chamar diretamente a API Pixlab de nosso aplicativo front-end. Portanto, faremos um servidor Node.js que proxy nossa solicitação para a API Pixlab.

Nesta seção, usei cliente e front-end de forma intercambiável. Por favor, tenha isso em mente.

Imagem enviada pelo usuário proxy para a API Pixlab

Esta é a parte mais complicada do nosso projeto para fazer o proxy da imagem carregada. A Pixlab prefere aceitar um link de imagem online para processar nossa solicitação. Para carregar nossa imagem local em um bucket de armazenamento, o Pixlab também fornece uma API amigável ao desenvolvedor chamada store .

Esta API aceita uma solicitação POST. O corpo da solicitação deve ser multipart/form-data que contém a imagem enviada pelo usuário e a chave de API. Se a solicitação for bem-sucedida, a API pega sua imagem e a carrega para um bucket de armazenamento online e fornece o link para essa imagem.

Em nosso servidor proxy, pegamos a entrada do arquivo do usuário em /uploadroute. Acessamos a imagem enviada pelo usuário usando o express-fileuploadpacote. Após adicionar este pacote como middleware, podemos acessar o arquivo de upload do usuário usando o req.filesmétodo just.

Em seguida, construímos nossa solicitação multipart/form-data usando o form-data pacote que mencionei anteriormente. Anexe a imagem carregada pelo usuário e a chave de API em form-data. Você pode usar dotenvo pacote aqui para ocultar sua chave de API e acessá-la como uma variável de ambiente.

Após a construção de multipart/form-data, enviamos a solicitação para a API Pixlab. Então, qualquer que seja a resposta que obtivermos, se for 200, nós a canalizamos como uma resposta ao usuário.

O código do nosso /uploadcaminho se parece com isso.


app.post("/upload", (req, res) => {
  try {
    if (!req.files || Object.keys(req.files).length === 0) {
      return res.status(400).send("No files were uploaded.");
    }
    let image = req.files.image;// If you want to save the image
    // image.mv(__dirname + "/uploads/" + image.name);const form = new FormData();
    form.append("file", image.data, image.name);
    form.append("key", process.env.PIXLAB_KEY);form.submit(
      {
        protocol: "https:",
        host: "api.pixlab.io",
        path: "/store",
        method: "POST",
        headers: {
          "Content-Type": `multipart/form-data; boundary=${form.getBoundary()}`,
        },
      },
      (err, resp) => {
        if (err) {
          res.status(503).send("File server is currently unavailable");
        }
        resp.pipe(res);
      }
    );
  } catch (error) {
    res.status(500).send(error);
  }
});

Se essa solicitação for bem-sucedida, obteremos um link para a imagem enviada pelo usuário. Mantemos o link conosco para usar em solicitações facedetectde mogrifyAPI.

API de detecção de rosto de proxy (detecção de rosto)

Agora vamos fazer um proxy de API Facedetect usando Node.js. Usamos /facedetecto caminho para fazer proxy desta API. Para ler dados JSON enviados pelo usuário, use express.json()middleware em nosso servidor.

Primeiro, pegamos a URL da imagem enviada pelo usuário (de nossa solicitação anterior) e fazemos uma solicitação get para a API Pixlab com esta URL da imagem e a chave da API Pixlab. Em seguida, apenas enviamos a resposta do servidor para o cliente.

O código para o /facedetectcaminho se parece com isso.

app.post("/facedetect", (req, res) => {
  axios
    .get("https://api.pixlab.io/facedetect", {
      params: {
        img: req.body.url,
        key: process.env.PIXLAB_KEY,
      },
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

Após uma solicitação bem-sucedida, obtemos uma lista de coordenadas de face do servidor. Enviamos essas coordenadas para o cliente. Precisamos dessas coordenadas para usar na mogrifyAPI para desfocar os rostos das pessoas.

API de mogrify proxy (Face Blur)

Usamos /mogrifyo caminho do nosso servidor para chamar a mogrifyAPI do Pixlab. O cliente fornece o URL da imagem e as coordenadas do rosto que recebemos das 2 solicitações acima. Depois de analisar os dados fornecidos pelo usuário, fazemos uma solicitação POST para a mogrifyAPI Pixlab.

O código dentro /mogrifyse parece com isso.


app.post("/mogrify", (req, res) => {
  axios
    .post("https://api.pixlab.io/mogrify", {
      img: req.body.url,
      key: process.env.PIXLAB_KEY,
      cord: req.body.coord,
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

Após uma solicitação bem-sucedida, ele retorna uma versão de rosto desfocado da imagem que enviamos anteriormente.

Em seguida, passamos o novo link de imagem borrada para o cliente. Agora o cliente pode usar este link para exibir a imagem.

Construindo a parte de front-end

Adicionar um front-end intuitivo é muito necessário para a perspectiva do usuário. Nesta seção, tornamos esse front-end parte de nosso aplicativo. Por uma questão de simplicidade, mantenho o front-end o mínimo possível.

Obter entrada de arquivo do usuário

Primeiramente, preencha seu arquivo “index.html” com a marcação HTML mínima. Para sua referência, este é o meu modelo HTML inicial para este projeto.


<!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" />
    <title>Pixlab web</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

No código HTML acima, vinculamos nosso arquivo CSS e javascript com HTML e criamos uma estrutura básica do nosso site.

Agora, para receber uma entrada de arquivo do usuário, temos que adicionar uma tag de entrada dentro do arquivo HTML. Certifique-se de adicionar acceptatribuição para aceitar apenas imagens jpg e png.


<input
 type="file"
    accept="image/jpeg,image/png"
    id="imageinput"
/>

Agora adicione 2 tags de imagem em sua marcação HTML. Um é para mostrar imagens carregadas pelo usuário, outro é para renderizar imagens de rosto desfocadas processadas do servidor da API Pixlab.


<img id="image" />
<img id="finalimage" />

Por fim, adicione um botão para invocar o processamento da imagem.

<button id="btn-process">Process</button>

Torne nosso front-end interativo

Dentro do index.jsarquivo, primeiro, definimos todos os nós DOM que precisamos nesse processo. Isso inclui a tag de entrada para a imagem ( imageInput) do usuário, 2 tags de imagem para exibir o resultado inicial (imagem) e final ( finalImage) e um botão ( processBtn) para iniciar o processo.


const imageInput = document.getElementById("imageinput");
const image = document.getElementById("image");
const finalImage = document.getElementById("finalimage");
const processBtn = document.getElementById("btn-process");

Agora, quando um usuário escolhe uma nova imagem usando nosso seletor de arquivos, lemos essa imagem como um DataURL e depois renderizamos essa imagem para nossa tag de imagem inicial.

function readFileAsync(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}imageInput.addEventListener("change", async (e) => {
  const fileList = e.target.files;
  if (fileList.length > 0) {
    let data = await readFileAsync(fileList[0]);
    image.src = data;
    file = fileList[0];
  }
});

Agora temos a imagem escolhida pelo usuário em nossas mãos. Portanto, este é o momento de enviar a solicitação ao nosso servidor proxy para iniciar o processamento da imagem.

Processamento de imagem usando a API Pixlab

Nesse processo, fazemos um total de 3 solicitações ao servidor toda vez que o usuário faz upload de uma imagem. Essas solicitações são consecutivas, portanto, temos que fazer a consulta estritamente em ordem.

  1. Fazendo upload da imagem para o servidor remoto : Para fazer upload de uma imagem para o servidor proxy, fazemos uma solicitação POST para /uploadrotear o servidor proxy com a imagem escolhida pelo usuário. Criamos uma função auxiliar para facilitar esse processo.
async function uploadToStore(image) {
  const formData = new FormData();
  formData.append("image", image);
  try {
    let response = await fetch("http://localhost:5000/upload", {
      method: "POST",
      body: formData,
    });
    return await response.json();
  } catch (error) {
    throw "Fetch request give some error";
  }
}

2. Chamando a API de detecção de rosto : Usando o link de imagem remota que recebemos da solicitação anterior, chamamos a API de detecção de rosto. Fazemos uma solicitação POST para a /facedetectrota do nosso servidor proxy.

async function facedetect(imageurl) {
  try {
    let faceDetectionResult = await fetch("http://localhost:5000/facedetect", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageurl,
      }),
    });let tempjson = await faceDetectionResult.json();
    return tempjson.faces;
  } catch (error) {
    throw "Face detection not working";
  }
}

3. Desfocar os rostos detectados : Obtemos as coordenadas dos rostos da imagem que carregamos da consulta anterior. Agora chamamos a /mogrifyrota do proxy para desfocar nossa imagem. Novamente estamos fazendo uma solicitação POST com as coordenadas da face e o link da imagem.

async function blurImage(faceCoordinate, imageUrl) {
  try {
    let blurimageResponse = await fetch("http://localhost:5000/mogrify", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageUrl,
        coord: faceCoordinate,
      }),
    });return blurimageResponse.json();
  } catch (error) {
    throw "Blur image function is not working";
  }
}

Em troca, obtemos o link da imagem desfocada dessa consulta. Usaremos esse URL para exibir a imagem na frente de nossos usuários.

O botão que gerencia todas essas funções

Todos esses processos são gerenciados pelo botão de processo que definimos anteriormente. Ele faz a solicitação um por um para cada endpoint e passa os valores necessários de uma função para outra. O botão de processamento é o gerenciador de nossa parte front-end.


processBtn.onclick = async () => {
  if (file) {
    let imageUploadResponse = await uploadToStore(file);
    if (imageUploadResponse["ssl_link"]) {
      let faceCoordinates = await facedetect(imageUploadResponse["ssl_link"]);
      if (faceCoordinates) {
        let blurimage = await blurImage(
          faceCoordinates,
          imageUploadResponse["ssl_link"]
        );
        finalImage.src = blurimage["ssl_link"];
      }
    }
  } else {
    throw "No file present to process";
  }
};

Bônus

Se você está lendo até aqui, este é o link do projeto GitHub para você. Eu tenho que fazer algumas mudanças aqui e ali para deixar nosso aplicativo da web mais bonito. Além disso, você pode conferir a parte CSS que não incluí neste artigo.

Fonte: https://betterprogramming.pub/detect-and-blur-human-faces-on-your-website-8c4a2d69a538

 #websites #css #javascript 

Detecte E Desfoque Rostos Humanos Em Seu Site Usando JavaScript
Trung  Nguyen

Trung Nguyen

1659258120

Phát Hiện Và Làm Mờ Khuôn Mặt Người Trên Web Bằng JavaScript

Kiểm duyệt nội dung là rất cần thiết cho một trang web. Nếu bạn đang phát triển một trang web nơi người dùng có thể tải lên hình ảnh, thì bạn phải hết sức thận trọng. Bạn không thể tin tưởng người dùng của mình. Nếu họ tải lên một số nội dung phản cảm, thì đôi khi bạn với tư cách là người tạo ra trang web, trở thành nạn nhân của nó.

Trong mọi ứng dụng web 2.0 hiện đại đều có hệ thống kiểm duyệt nội dung. Một số trang web phổ biến như Facebook, Instagram và Twitter có cả hệ thống kiểm duyệt nội dung tự động và thủ công.

Nhưng đối với một nhóm nhỏ và nhà phát triển cá nhân, việc kiểm duyệt nội dung thủ công là không khả thi và không mang lại hiệu quả kinh tế cao. Do đó, chúng tôi có thể sử dụng tự động hóa dựa trên trí tuệ nhân tạo (AI) để phát hiện bất kỳ nội dung phản cảm nào và làm mờ nội dung đó.

Xây dựng tự động hóa dựa trên AI không phải là rất dễ dàng. Bạn phải thuê một nhà phát triển tài năng và phải có nhiều dữ liệu để đào tạo mô hình AI của bạn. Nhưng chúng ta có thể đi đường tắt ở đây. Có rất nhiều phần mềm như một nền tảng dịch vụ (SaaS) có mặt trên thị trường, có thể giúp chúng tôi về khía cạnh này.

Pixlab là một nền tảng SaaS, có thể cung cấp giao diện lập trình ứng dụng (API) thân thiện với người dùng cho các mô hình AI hiện đại của họ. Bạn có thể dễ dàng tích hợp các dịch vụ đó vào ứng dụng của mình. Kiểm tra liên kết này để biết thêm thông tin.

Chương trình nghị sự

Trong bài viết này, chúng ta sẽ tạo một ứng dụng web bằng API P ixlab . Tôi sẽ sử dụng JavaScript vani.

Bạn có thể sử dụng cùng một logic cho bất kỳ khung công tác nào như react, Vue, Angular, v.v. Vì chúng tôi đang sử dụng Pixlab API rất nhiều, nên hãy đảm bảo có được khóa API để làm theo.

Trong ứng dụng web, trước tiên, chúng tôi lấy đầu vào hình ảnh từ người dùng. Sau đó, chúng tôi phát hiện khuôn mặt của mọi người hiện diện trong hình ảnh. Cuối cùng, chúng tôi làm mờ các khuôn mặt của hình ảnh và hiển thị hình ảnh cuối cùng trong ứng dụng của chúng tôi.

Chúng tôi sẽ sử dụng facedetectđiểm cuối API để phát hiện khuôn mặt người trong hình ảnh. Sau đó, chúng tôi thực hiện một yêu cầu khác để xác minh điểm cuối bằng tọa độ khuôn mặt mà chúng tôi nhận được từ facedetectAPI để làm mờ hình ảnh của chúng tôi.

Phiên bản cuối cùng của dự án của chúng tôi sẽ trông như thế này.

Bản giới thiệu video trực tiếp

Vì chúng tôi đang tạo ứng dụng web, chúng tôi không thể đưa ra yêu cầu trực tiếp đến máy chủ Pixlab do các hạn chế của CORS. Có các hạn chế CORS để bảo vệ người dùng. Bạn có thể tìm hiểu thêm về CORS tại đây . Do đó, chúng tôi tạo một máy chủ proxy bằng Nodejs và kích hoạt CORS ở đó. Sau đó, chúng tôi thực hiện tất cả các yêu cầu từ giao diện người dùng của mình tới máy chủ proxy đó và định tuyến các yêu cầu này tới API Pixlab để vượt qua các hạn chế của CORS.

Nói đủ rồi, hãy làm ứng dụng web của chúng ta.

Thiết lập dự án

Trước khi đi sâu vào hướng dẫn, hãy để chúng tôi mở đầu cho dự án của mình. Chúng ta cần tạo cả front-end và back-end (như một máy chủ proxy) trong dự án này. Do đó, Tạo 2 thư mục có tên frontendvà backendbên trong gốc dự án của bạn.

Bên trong thư mục giao diện người dùng của bạn, tạo 3 tệp có tên là index.html,. Cài đặt máy chủ trực tiếp trong VSCode của bạn để phân phát các tệp tĩnh này.style.cssindex.js

Bên trong thư mục phụ trợ của bạn, bắt đầu một dự án npm bằng cách chạy lệnh này.

cd backend
npm init -y

Vì chúng tôi đang tạo ứng dụng express.js làm máy chủ proxy của mình, hãy cài đặt tất cả các phần phụ thuộc cùng một lúc.

npm install axios cors dotenv express express-fileupload form-data
npm install — save-dev nodemon

Bây giờ hãy thay đổi phần script trong package.jsontệp của bạn bằng 2 lệnh này.

"scripts": {
    "dev": "nodemon server.js",
    "start": "node server.js"
  },

Bây giờ hãy tạo server.jstệp bên trong thư mục phụ trợ của bạn.

Sau tất cả các thiết lập này, cấu trúc dự án sẽ trông giống như thế này.

.
├── backend
│   ├── package.json
│   ├── package-lock.json
│   └── server.js
└── frontend
    ├── index.html
    ├── index.js
    └── style.css

Hãy nhanh chóng tìm hiểu công dụng của tất cả các gói npm đó trong dự án của chúng ta.

  1. axios: Axios là một ứng dụng khách http rất phổ biến trong thế giới Node.js. Nó giúp chúng ta viết các truy vấn phức tạp rất dễ dàng.
  2. cors: thư viện cors được sử dụng để thêm tiêu đề CORS trong mọi yêu cầu tới máy chủ của chúng tôi. Bạn cũng có thể thực hiện nhiều tùy chỉnh trong chính sách CORS bằng cách sử dụng gói này.
  3. dotenv: Gói này giúp chúng tôi tạo và sử dụng các biến môi trường trong dự án Node.js của chúng tôi. Điều này là bắt buộc để ẩn khóa API của bạn hoặc các bí mật khác mà bạn không muốn đưa lên GitHub.
  4. express: Thư viện này không cần giải thích. Đây là một thư viện máy chủ rất phổ biến với khả năng phần mềm trung gian trong thế giới Node.js.
  5. express-fileupload: Thư viện này hoạt động như phần mềm trung gian và cung cấp cho chúng tôi quyền truy cập vào tất cả các tệp được tải lên từ máy khách.
  6. form-data: Gói này cung cấp đối tượng FormData của trình duyệt trong môi trường Nodejs. Để thực hiện yêu cầu đa phần / biểu mẫu-dữ liệu tới một số API, tôi sử dụng gói này trong dự án này.
  7. nodemon: Đây là phần phụ thuộc phát triển tự động khởi động lại máy chủ của bạn bất cứ khi nào một số mã thay đổi trong các tệp javascript của bạn.

Hãy tạo máy chủ proxy NodeJs của chúng tôi

Như tôi đã đề cập trước đó rằng do chính sách CORS của trình duyệt, chúng tôi không thể gọi trực tiếp API Pixlab từ ứng dụng giao diện người dùng của chúng tôi. Do đó, chúng tôi sẽ tạo một máy chủ Node.js ủy quyền yêu cầu của chúng tôi tới API Pixlab.

Trong phần này, tôi đã sử dụng thay thế cho cả client và front-end. Hãy ghi nhớ điều này.

Người dùng proxy đã tải hình ảnh lên API Pixlab

Đây là phần khó nhất trong dự án của chúng tôi để ủy quyền cho hình ảnh được tải lên. Pixlab thích chấp nhận một liên kết hình ảnh trực tuyến để xử lý yêu cầu của chúng tôi. Để tải hình ảnh cục bộ của chúng tôi lên bộ lưu trữ, Pixlab cũng cung cấp một API thân thiện với nhà phát triển được gọi là cửa hàng .

API này chấp nhận một yêu cầu ĐĂNG. Nội dung của yêu cầu phải là nhiều phần / biểu mẫu-dữ liệu chứa hình ảnh do người dùng tải lên và khóa API. Nếu yêu cầu thành công, API sẽ lấy hình ảnh của bạn và tải nó lên bộ lưu trữ trực tuyến, đồng thời cung cấp cho bạn liên kết đến hình ảnh đó.

Trong máy chủ proxy của chúng tôi, chúng tôi nhận dữ liệu đầu vào của tệp người dùng trong /uploadtuyến. Chúng tôi truy cập hình ảnh do người dùng tải lên bằng cách sử dụng express-fileuploadgói. Sau khi thêm gói này làm phần mềm trung gian, chúng tôi có thể truy cập tệp tải lên của người dùng chỉ bằng req.filesphương pháp.

Sau đó, chúng tôi xây dựng yêu cầu đa phần / biểu mẫu-dữ liệu của mình bằng cách sử dụng form-data gói mà tôi đã đề cập trước đó. Nối hình ảnh do người dùng tải lên và khóa API trong dữ liệu biểu mẫu. Bạn có thể sử dụng dotenvgói ở đây để ẩn khóa API của mình và truy cập nó như một biến môi trường.

Sau khi xây dựng nhiều phần / dữ liệu biểu mẫu, chúng tôi gửi yêu cầu tới API Pixlab. Sau đó, bất kỳ phản hồi nào chúng tôi nhận được, nếu đó là 200, chúng tôi coi đó là phản hồi cho người dùng.

Mã của /uploadđường dẫn của chúng tôi trông như thế này.


app.post("/upload", (req, res) => {
  try {
    if (!req.files || Object.keys(req.files).length === 0) {
      return res.status(400).send("No files were uploaded.");
    }
    let image = req.files.image;// If you want to save the image
    // image.mv(__dirname + "/uploads/" + image.name);const form = new FormData();
    form.append("file", image.data, image.name);
    form.append("key", process.env.PIXLAB_KEY);form.submit(
      {
        protocol: "https:",
        host: "api.pixlab.io",
        path: "/store",
        method: "POST",
        headers: {
          "Content-Type": `multipart/form-data; boundary=${form.getBoundary()}`,
        },
      },
      (err, resp) => {
        if (err) {
          res.status(503).send("File server is currently unavailable");
        }
        resp.pipe(res);
      }
    );
  } catch (error) {
    res.status(500).send(error);
  }
});

Nếu yêu cầu này thành công, thì chúng tôi sẽ nhận được một liên kết đến hình ảnh do người dùng tải lên. Chúng tôi giữ liên kết với chúng tôi để sử dụng trong facedetectvà mogrifycác yêu cầu API.

API phát hiện khuôn mặt proxy (Nhận diện khuôn mặt)

Bây giờ, hãy tạo proxy API Facedetect bằng Node.js. Chúng tôi sử dụng /facedetectđường dẫn để ủy quyền API này. Để đọc dữ liệu JSON do người dùng gửi, hãy sử dụng express.json()phần mềm trung gian trong máy chủ của chúng tôi.

Lúc đầu, chúng tôi lấy URL hình ảnh do người dùng gửi (từ yêu cầu trước đó của chúng tôi) và thực hiện yêu cầu nhận API Pixlab bằng URL hình ảnh này và khóa API Pixlab. Sau đó, chúng tôi chỉ gửi phản hồi từ máy chủ đến máy khách.

Mã cho /facedetectđường dẫn trông như thế này.

app.post("/facedetect", (req, res) => {
  axios
    .get("https://api.pixlab.io/facedetect", {
      params: {
        img: req.body.url,
        key: process.env.PIXLAB_KEY,
      },
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

Sau khi yêu cầu thành công, chúng tôi nhận được danh sách tọa độ khuôn mặt từ máy chủ. Chúng tôi gửi các tọa độ này cho khách hàng. Chúng tôi cần các tọa độ này để sử dụng trong mogrifyAPI để làm mờ khuôn mặt của mọi người.

API proxy mogrify (Làm mờ khuôn mặt)

Chúng tôi sử dụng /mogrifyđường dẫn máy chủ của mình để gọi API của Pixlab mogrify. Khách hàng cung cấp URL hình ảnh và tọa độ khuôn mặt mà chúng tôi nhận được từ 2 yêu cầu trên. Sau khi phân tích cú pháp dữ liệu do người dùng cung cấp, chúng tôi thực hiện yêu cầu ĐĂNG tới mogrifyAPI Pixlab.

Mã bên trong /mogrifytrông như thế này.


app.post("/mogrify", (req, res) => {
  axios
    .post("https://api.pixlab.io/mogrify", {
      img: req.body.url,
      key: process.env.PIXLAB_KEY,
      cord: req.body.coord,
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

Sau khi yêu cầu thành công, nó sẽ trả về một phiên bản mặt mờ của hình ảnh mà chúng tôi đã tải lên trước đó.

Sau đó, chúng tôi chuyển liên kết hình ảnh mờ mới cho khách hàng. Bây giờ khách hàng có thể sử dụng liên kết này để hiển thị hình ảnh.

Xây dựng phần front-end

Thêm một giao diện người dùng trực quan là rất cần thiết cho góc nhìn của người dùng. Trong phần này, chúng tôi làm cho phần giao diện người dùng của ứng dụng của chúng tôi. Vì mục đích đơn giản, tôi giữ giao diện người dùng tối thiểu nhất có thể.

Nhận đầu vào tệp người dùng

Đầu tiên, hãy điền tệp “index.html” của bạn bằng đánh dấu HTML tối thiểu. Để bạn tham khảo, đây là mẫu HTML khởi đầu của tôi cho dự án này.


<!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" />
    <title>Pixlab web</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

Trong đoạn mã HTML ở trên, chúng tôi liên kết CSS và tệp javascript của chúng tôi với HTML và tạo một cấu trúc cơ bản cho trang web của chúng tôi.

Bây giờ, để lấy đầu vào tệp từ người dùng, chúng ta phải thêm thẻ đầu vào bên trong tệp HTML. Đảm bảo thêm acceptthuộc tính để chỉ chấp nhận hình ảnh jpg và png.


<input
 type="file"
    accept="image/jpeg,image/png"
    id="imageinput"
/>

Bây giờ hãy thêm 2 thẻ hình ảnh vào đánh dấu HTML của bạn. Một là để hiển thị hình ảnh do người dùng tải lên, một là để hiển thị hình ảnh khuôn mặt mờ đã qua xử lý từ máy chủ API Pixlab.


<img id="image" />
<img id="finalimage" />

Cuối cùng, thêm một nút để gọi xử lý hình ảnh.

<button id="btn-process">Process</button>

Làm cho giao diện người dùng của chúng tôi tương tác

Bên trong index.jstệp, trước tiên, chúng tôi xác định tất cả các nút DOM mà chúng tôi cần trong quá trình này. Điều này bao gồm thẻ đầu vào cho hình ảnh ( imageInput) từ người dùng, 2 thẻ hình ảnh để hiển thị kết quả ban đầu (hình ảnh) và cuối cùng ( finalImage) và một nút ( processBtn) để bắt đầu quá trình.


const imageInput = document.getElementById("imageinput");
const image = document.getElementById("image");
const finalImage = document.getElementById("finalimage");
const processBtn = document.getElementById("btn-process");

Bây giờ khi người dùng chọn một hình ảnh mới bằng bộ chọn tệp của chúng tôi, chúng tôi đọc hình ảnh này dưới dạng DataURL và sau đó kết xuất hình ảnh này thành thẻ hình ảnh ban đầu của chúng tôi.

function readFileAsync(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}imageInput.addEventListener("change", async (e) => {
  const fileList = e.target.files;
  if (fileList.length > 0) {
    let data = await readFileAsync(fileList[0]);
    image.src = data;
    file = fileList[0];
  }
});

Bây giờ chúng tôi có hình ảnh do người dùng chọn trong tay. Do đó, đây là thời điểm để gửi yêu cầu đến máy chủ proxy của chúng tôi để bắt đầu xử lý hình ảnh.

Xử lý hình ảnh bằng API Pixlab

Trong quá trình này, chúng tôi thực hiện tổng cộng 3 yêu cầu đến máy chủ mỗi khi người dùng tải lên hình ảnh. Các yêu cầu này liên tiếp nhau, vì vậy chúng tôi phải thực hiện truy vấn theo thứ tự nghiêm ngặt.

  1. Tải hình ảnh lên máy chủ từ xa : Để tải hình ảnh lên máy chủ proxy, chúng tôi thực hiện yêu cầu ĐĂNG để /uploadđịnh tuyến máy chủ proxy với hình ảnh do người dùng chọn. Chúng tôi tạo ra một chức năng trợ giúp để làm cho quá trình này dễ dàng hơn.
async function uploadToStore(image) {
  const formData = new FormData();
  formData.append("image", image);
  try {
    let response = await fetch("http://localhost:5000/upload", {
      method: "POST",
      body: formData,
    });
    return await response.json();
  } catch (error) {
    throw "Fetch request give some error";
  }
}

2. Gọi API nhận diện khuôn mặt : Bằng cách sử dụng liên kết hình ảnh từ xa mà chúng tôi nhận được từ yêu cầu trước đó, chúng tôi gọi là API phát hiện khuôn mặt. Chúng tôi thực hiện một yêu cầu ĐĂNG tới /facedetectđường dẫn của máy chủ proxy của chúng tôi.

async function facedetect(imageurl) {
  try {
    let faceDetectionResult = await fetch("http://localhost:5000/facedetect", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageurl,
      }),
    });let tempjson = await faceDetectionResult.json();
    return tempjson.faces;
  } catch (error) {
    throw "Face detection not working";
  }
}

3. Làm mờ các khuôn mặt được phát hiện : Chúng tôi nhận được tọa độ của các khuôn mặt của hình ảnh mà chúng tôi đã tải lên từ truy vấn trước đó. Bây giờ chúng tôi gọi là /mogrifytuyến proxy để làm mờ hình ảnh của chúng tôi. Một lần nữa, chúng tôi đang thực hiện yêu cầu ĐĂNG với tọa độ khuôn mặt và liên kết hình ảnh.

async function blurImage(faceCoordinate, imageUrl) {
  try {
    let blurimageResponse = await fetch("http://localhost:5000/mogrify", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageUrl,
        coord: faceCoordinate,
      }),
    });return blurimageResponse.json();
  } catch (error) {
    throw "Blur image function is not working";
  }
}

Đổi lại, chúng tôi nhận được liên kết hình ảnh mờ từ truy vấn này. Chúng tôi sẽ sử dụng URL này để hiển thị hình ảnh trước mặt người dùng của chúng tôi.

Nút quản lý tất cả các chức năng này

Tất cả các quy trình này được quản lý bởi nút quy trình mà chúng tôi đã xác định trước đó. Nó thực hiện yêu cầu lần lượt đến từng điểm cuối và chuyển các giá trị cần thiết từ chức năng này sang chức năng khác. Nút xử lý là trình quản lý phần giao diện người dùng của chúng tôi.


processBtn.onclick = async () => {
  if (file) {
    let imageUploadResponse = await uploadToStore(file);
    if (imageUploadResponse["ssl_link"]) {
      let faceCoordinates = await facedetect(imageUploadResponse["ssl_link"]);
      if (faceCoordinates) {
        let blurimage = await blurImage(
          faceCoordinates,
          imageUploadResponse["ssl_link"]
        );
        finalImage.src = blurimage["ssl_link"];
      }
    }
  } else {
    throw "No file present to process";
  }
};

Thưởng

Nếu bạn đang đọc đến đây, đây là liên kết dự án GitHub dành cho bạn. Tôi phải thực hiện một vài thay đổi ở đây và ở đó để làm cho ứng dụng web của chúng tôi trông đẹp hơn. Ngoài ra, bạn có thể kiểm tra phần CSS mà tôi chưa đưa vào bài viết này.

Nguồn: https://betterprogramming.pub/detect-and-blur-human-faces-on-your-website-8c4a2d69a538

 #websites #css #javascript 

Phát Hiện Và Làm Mờ Khuôn Mặt Người Trên Web Bằng JavaScript
Saul  Alaniz

Saul Alaniz

1659254700

Detecta Y Desenfoca Rostros Humanos En Tu Sitio Web Usando JavaScript

La moderación del contenido es muy necesaria para un sitio web. Si está desarrollando un sitio web donde los usuarios pueden cargar imágenes, entonces debe tener mucho cuidado. No puedes confiar en tus usuarios. Si cargan algún contenido objetable, a veces usted, como creador del sitio, se convierte en víctima de él.

En cada aplicación web 2.0 moderna, está presente un sistema de moderación de contenido. Algunos sitios web populares como Facebook, Instagram y Twitter tienen sistemas de moderación de contenido automáticos y manuales.

Pero para un equipo pequeño y un desarrollador individual, la moderación manual de contenido no es factible y no es muy económica. Por lo tanto, podemos utilizar la automatización basada en inteligencia artificial (IA) para detectar cualquier contenido objetable y difuminarlo.

Construir una automatización basada en IA no es muy fácil. Debe contratar a un desarrollador talentoso y debe tener una gran cantidad de datos para entrenar su modelo de IA. Pero podemos tomar un atajo aquí. Hay muchas plataformas de software como servicio (SaaS) presentes en el mercado, que nos pueden ayudar en este aspecto.

Pixlab es una plataforma SaaS, que puede proporcionar una interfaz de programación de aplicaciones (API) fácil de usar para sus modelos de IA de última generación. Puede integrar fácilmente esos servicios en su aplicación. Echa un vistazo a este enlace para obtener más información.

Agenda

En este artículo, vamos a crear una aplicación web utilizando la API de P ixlab . Usaré JavaScript vainilla.

Puede usar la misma lógica para cualquier marco como reaccionar, Vue, Angular, etc. Como estamos usando mucho la API de Pixlab, asegúrese de obtener una clave de API para seguir.

En la aplicación web, primero, tomamos una entrada de imagen del usuario. Entonces detectamos los rostros de las personas presentes en la imagen. Por último, borramos las caras de la imagen y renderizamos la imagen final en nuestra aplicación.

Usaremos el facedetectextremo de la API para detectar rostros humanos en una imagen. Luego hacemos otra solicitud para modificar el punto final con las coordenadas de la cara que recibimos de facedetectla API para desenfocar nuestra imagen.

La versión final de nuestro proyecto se verá así.

Demostración de video en vivo

Como estamos creando una aplicación web, no podemos realizar una solicitud directa a los servidores de Pixlab debido a las restricciones de CORS. Las restricciones de CORS existen para proteger al usuario. Puede obtener más información sobre CORS aquí . Por lo tanto, creamos un servidor proxy usando Nodejs y habilitamos el CORS allí. Luego, hacemos todas las solicitudes desde nuestro front-end a ese servidor proxy y enrutamos estas solicitudes a las API de Pixlab para evitar las restricciones de CORS.

Basta de hablar, hagamos nuestra aplicación web.

configuración del proyecto

Antes de profundizar en el tutorial, hagamos un andamiaje en nuestro proyecto. Necesitamos hacer tanto el front-end como el back-end (como un servidor proxy) en este proyecto. Por lo tanto, haga 2 directorios con nombre frontendy backenddentro de la raíz de su proyecto.

Dentro de su directorio frontend, cree 3 archivos llamados index.html, style.css, index.js. Instale el servidor en vivo en su VSCode para servir estos archivos estáticos.

Dentro de su directorio back-end, inicie un proyecto npm ejecutando este comando.

cd backend
npm init -y

Como estamos creando una aplicación express.js como nuestro servidor proxy, instalemos todas las dependencias de una sola vez.

npm install axios cors dotenv express express-fileupload form-data
npm install — save-dev nodemon

Ahora cambie la sección de script de su package.jsonarchivo con estos 2 comandos.

"scripts": {
    "dev": "nodemon server.js",
    "start": "node server.js"
  },

Ahora cree server.jsun archivo dentro de su directorio backend.

Después de todas estas configuraciones, la estructura del proyecto se verá así.

.
├── backend
│   ├── package.json
│   ├── package-lock.json
│   └── server.js
└── frontend
    ├── index.html
    ├── index.js
    └── style.css

Aprendamos rápidamente cuál es el uso de todos esos paquetes npm en nuestro proyecto.

  1. axios: Axios es un cliente http muy popular en el mundo de Node.js. Nos ayuda a escribir consultas complejas muy fácilmente.
  2. cors: la biblioteca cors se usa para agregar encabezados CORS en cada solicitud a nuestro servidor. También puede realizar muchas personalizaciones en la política de CORS con este paquete.
  3. dotenv: Este paquete nos ayuda a crear y usar variables de entorno en nuestro proyecto Node.js. Esto es necesario para ocultar su clave de API u otros secretos que no desea enviar a GitHub.
  4. express: Esta biblioteca no necesita explicación. Esta es una biblioteca de servidor muy popular con capacidad de middleware en el mundo de Node.js.
  5. express-fileupload: Esta librería funciona como middleware y nos da acceso a todos los archivos subidos desde el cliente.
  6. form-data: este paquete proporciona el objeto FormData del navegador en el entorno Nodejs. Para realizar una solicitud de datos de formulario/varias partes a alguna API, uso este paquete en este proyecto.
  7. nodemon: Esta es una dependencia de desarrollo que reinicia automáticamente su servidor cada vez que cambia algún código en sus archivos javascript.

Hagamos nuestro servidor proxy NodeJs

Como mencioné anteriormente, debido a la política CORS del navegador, no podemos llamar directamente a la API de Pixlab desde nuestra aplicación de front-end. Por lo tanto, crearemos un servidor Node.js que envíe nuestra solicitud a la API de Pixlab.

En esta sección, he usado tanto el cliente como el front-end indistintamente. Por favor tenga esto en cuenta.

Imagen cargada por el usuario proxy a la API de Pixlab

Esta es la parte más complicada de nuestro proyecto para representar la imagen cargada. Pixlab prefiere aceptar un enlace de imagen en línea para procesar nuestra solicitud. Para cargar nuestra imagen local en un depósito de almacenamiento, Pixlab también proporciona una API fácil de usar para desarrolladores llamada store .

Esta API acepta una solicitud POST. El cuerpo de la solicitud debe ser multipart/form-data que contenga la imagen cargada por el usuario y la clave API. Si la solicitud es exitosa, la API toma su imagen y la carga en un depósito de almacenamiento en línea y le brinda el enlace a esa imagen.

En nuestro servidor proxy, tomamos la entrada del archivo de usuario en /uploadruta. Accedemos a la imagen cargada por el usuario usando el express-fileuploadpaquete. Después de agregar este paquete como un middleware, podemos acceder al archivo de carga del usuario usando solo el req.filesmétodo.

Luego, construimos nuestra solicitud de datos de formulario/multiparte utilizando el form-data paquete que mencioné anteriormente. Agregue la imagen cargada por el usuario y la clave API en los datos del formulario. Puede usar dotenvel paquete aquí para ocultar su clave API y acceder a ella como una variable de entorno.

Después de la construcción de multipart/form-data, enviamos la solicitud a la API de Pixlab. Luego, sea cual sea la respuesta que obtengamos, si es 200, la canalizamos como respuesta al usuario.

El código de nuestra /uploadruta se ve así.


app.post("/upload", (req, res) => {
  try {
    if (!req.files || Object.keys(req.files).length === 0) {
      return res.status(400).send("No files were uploaded.");
    }
    let image = req.files.image;// If you want to save the image
    // image.mv(__dirname + "/uploads/" + image.name);const form = new FormData();
    form.append("file", image.data, image.name);
    form.append("key", process.env.PIXLAB_KEY);form.submit(
      {
        protocol: "https:",
        host: "api.pixlab.io",
        path: "/store",
        method: "POST",
        headers: {
          "Content-Type": `multipart/form-data; boundary=${form.getBoundary()}`,
        },
      },
      (err, resp) => {
        if (err) {
          res.status(503).send("File server is currently unavailable");
        }
        resp.pipe(res);
      }
    );
  } catch (error) {
    res.status(500).send(error);
  }
});

Si esta solicitud tiene éxito, obtenemos un enlace a la imagen cargada por el usuario. Mantenemos el enlace con nosotros para usar en facedetecty mogrifysolicitudes de API.

API de detección de rostros de proxy (detección de rostros)

Ahora hagamos un proxy API de Facedetect usando Node.js. Usamos /facedetectla ruta para representar esta API. Para leer los datos JSON enviados por el usuario, use express.json()el middleware en nuestro servidor.

Al principio, tomamos la URL de la imagen enviada por el usuario (de nuestra solicitud anterior) y hacemos una solicitud de obtención a la API de Pixlab con esta URL de imagen y la clave de la API de Pixlab. Luego simplemente enviamos la respuesta del servidor al cliente.

El código para la /facedetectruta se ve así.

app.post("/facedetect", (req, res) => {
  axios
    .get("https://api.pixlab.io/facedetect", {
      params: {
        img: req.body.url,
        key: process.env.PIXLAB_KEY,
      },
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

Después de una solicitud exitosa, obtenemos una lista de coordenadas faciales del servidor. Enviamos estas coordenadas al cliente. Necesitamos estas coordenadas para usar en mogrifyAPI para desenfocar las caras de las personas.

Proxy mogrify API (Face Blur)

Usamos /mogrifyla ruta de nuestro servidor para solicitar la mogrifyAPI de Pixlab. El cliente proporciona la URL de la imagen y las coordenadas de la cara que obtuvimos de las 2 solicitudes anteriores. Después de analizar los datos proporcionados por el usuario, hacemos una solicitud POST a la mogrifyAPI de Pixlab.

El código interior /mogrifyse ve así.


app.post("/mogrify", (req, res) => {
  axios
    .post("https://api.pixlab.io/mogrify", {
      img: req.body.url,
      key: process.env.PIXLAB_KEY,
      cord: req.body.coord,
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

Después de una solicitud exitosa, devuelve una versión de cara borrosa de la imagen que hemos subido anteriormente.

Luego le pasamos el enlace de la nueva imagen borrosa al cliente. Ahora el cliente puede usar este enlace para mostrar la imagen.

Construyendo la parte delantera

Agregar un front-end intuitivo es muy necesario para la perspectiva del usuario. En esta sección, hacemos que este front-end sea parte de nuestra aplicación. En aras de la simplicidad, mantengo la parte delantera lo más mínima posible.

Obtener entrada de archivo de usuario

Al principio, complete su archivo "index.html" con el marcado HTML mínimo. Para su referencia, esta es mi plantilla HTML inicial para este proyecto.


<!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" />
    <title>Pixlab web</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

En el código HTML anterior, vinculamos nuestro archivo CSS y javascript con HTML y creamos una estructura básica de nuestro sitio web.

Ahora, para tomar una entrada de archivo del usuario, tenemos que agregar una etiqueta de entrada dentro del archivo HTML. Asegúrese de agregar acceptatribución para aceptar solo imágenes jpg y png.


<input
 type="file"
    accept="image/jpeg,image/png"
    id="imageinput"
/>

Ahora agregue 2 etiquetas de imagen en su marcado HTML. Uno es para mostrar imágenes cargadas por el usuario, otro es para renderizar imágenes de caras borrosas procesadas desde el servidor API de Pixlab.


<img id="image" />
<img id="finalimage" />

Finalmente, agregue un botón para invocar el procesamiento de imágenes.

<button id="btn-process">Process</button>

Haz que nuestro front-end sea interactivo

Dentro del index.jsarchivo, primero, definimos todos los nodos DOM que necesitamos en este proceso. Esto incluye la etiqueta de entrada para la imagen ( imageInput) del usuario, 2 etiquetas de imagen para mostrar el finalImageresultado inicial (imagen) y final ( ), y un botón ( processBtn) para iniciar el proceso.


const imageInput = document.getElementById("imageinput");
const image = document.getElementById("image");
const finalImage = document.getElementById("finalimage");
const processBtn = document.getElementById("btn-process");

Ahora, cuando un usuario elige una nueva imagen usando nuestro selector de archivos, leemos esta imagen como DataURL y luego representamos esta imagen en nuestra etiqueta de imagen inicial.

function readFileAsync(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}imageInput.addEventListener("change", async (e) => {
  const fileList = e.target.files;
  if (fileList.length > 0) {
    let data = await readFileAsync(fileList[0]);
    image.src = data;
    file = fileList[0];
  }
});

Ahora tenemos la imagen seleccionada por el usuario en nuestra mano. Por lo tanto, este es el momento de enviar la solicitud a nuestro servidor proxy para comenzar con el procesamiento de imágenes.

Procesamiento de imágenes usando la API de Pixlab

En este proceso, hacemos un total de 3 solicitudes al servidor cada vez que el usuario sube una imagen. Estas solicitudes son consecutivas, por lo que tenemos que realizar la consulta estrictamente en orden.

  1. Carga de la imagen en el servidor remoto : para cargar una imagen en el servidor proxy, hacemos una solicitud POST para /uploadenrutar el servidor proxy con la imagen seleccionada por el usuario. Hacemos una función auxiliar para facilitar este proceso.
async function uploadToStore(image) {
  const formData = new FormData();
  formData.append("image", image);
  try {
    let response = await fetch("http://localhost:5000/upload", {
      method: "POST",
      body: formData,
    });
    return await response.json();
  } catch (error) {
    throw "Fetch request give some error";
  }
}

2. Llamar a la API de detección de rostros : al usar el enlace de imagen remota que obtenemos de la solicitud anterior, llamamos a la API de detección de rostros. Realizamos una solicitud POST a la /facedetectruta de nuestro servidor proxy.

async function facedetect(imageurl) {
  try {
    let faceDetectionResult = await fetch("http://localhost:5000/facedetect", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageurl,
      }),
    });let tempjson = await faceDetectionResult.json();
    return tempjson.faces;
  } catch (error) {
    throw "Face detection not working";
  }
}

3. Desenfocar los rostros detectados : Obtenemos coordenadas de los rostros de la imagen que hemos subido de la consulta anterior. Ahora llamamos a la /mogrifyruta proxy para desenfocar nuestra imagen. Nuevamente estamos haciendo una solicitud POST con las coordenadas de la cara y el enlace de la imagen.

async function blurImage(faceCoordinate, imageUrl) {
  try {
    let blurimageResponse = await fetch("http://localhost:5000/mogrify", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageUrl,
        coord: faceCoordinate,
      }),
    });return blurimageResponse.json();
  } catch (error) {
    throw "Blur image function is not working";
  }
}

Obtenemos el enlace de la imagen borrosa de esta consulta a cambio. Usaremos esta URL para mostrar la imagen frente a nuestros usuarios.

El botón que gestiona todas estas funciones

Todos estos procesos son administrados por el botón de proceso que definimos anteriormente. Realiza solicitudes una por una a cada punto final y pasa los valores requeridos de una función a otra. El botón de procesamiento es el administrador de nuestra parte frontal.


processBtn.onclick = async () => {
  if (file) {
    let imageUploadResponse = await uploadToStore(file);
    if (imageUploadResponse["ssl_link"]) {
      let faceCoordinates = await facedetect(imageUploadResponse["ssl_link"]);
      if (faceCoordinates) {
        let blurimage = await blurImage(
          faceCoordinates,
          imageUploadResponse["ssl_link"]
        );
        finalImage.src = blurimage["ssl_link"];
      }
    }
  } else {
    throw "No file present to process";
  }
};

Prima

Si estás leyendo hasta aquí, este es el enlace del proyecto GitHub para ti. Tengo que hacer un par de cambios aquí y allá para que nuestra aplicación web se vea mejor. Además, puede consultar la parte de CSS que no he incluido en este artículo.

Fuente: https://betterprogramming.pub/detect-and-blur-human-faces-on-your-website-8c4a2d69a538

#websites #css #javascript 

Detecta Y Desenfoca Rostros Humanos En Tu Sitio Web Usando JavaScript

Détectez Et Floutez Les Visages Humains Sur Votre Site Web à L'aide De

La modération de contenu est très nécessaire pour un site Web. Si vous développez un site Web où les utilisateurs peuvent télécharger des images, vous devez être extrêmement prudent. Vous ne pouvez pas faire confiance à vos utilisateurs. S'ils téléchargent du contenu répréhensible, alors parfois, en tant que créateur du site, vous en devenez la victime.

Dans chaque application Web 2.0 moderne, un système de modération de contenu est présent. Certains sites Web populaires comme Facebook, Instagram et Twitter ont mis en place des systèmes de modération de contenu automatiques et manuels.

Mais pour une petite équipe et un développeur individuel, la modération manuelle du contenu n'est pas faisable et pas très économique. Par conséquent, nous pouvons utiliser l'automatisation basée sur l'intelligence artificielle (IA) pour détecter tout contenu répréhensible et le brouiller.

Construire une automatisation basée sur l'IA n'est pas très facile. Vous devez embaucher un développeur talentueux et disposer de beaucoup de données pour former votre modèle d'IA. Mais nous pouvons prendre un raccourci ici. Il existe de nombreuses plates-formes de logiciel en tant que service (SaaS) présentes sur le marché, qui peuvent nous aider dans cet aspect.

Pixlab est une plate-forme SaaS, qui peut fournir une interface de programmation d'application (API) conviviale à leurs modèles d'IA de pointe. Vous pouvez facilement intégrer ces services dans votre application. Consultez ce lien pour plus d'informations.

Ordre du jour

Dans cet article, nous allons créer une application Web à l'aide de l'API P ixlab . Je vais utiliser du JavaScript vanille.

Vous pouvez utiliser la même logique pour n'importe quel framework comme réagir, Vue, Angular, etc. Comme nous utilisons beaucoup l'API Pixlab, assurez-vous d'obtenir une clé API à suivre.

Dans l'application Web, nous prenons d'abord une entrée d'image de l'utilisateur. Ensuite, nous détectons les visages des personnes présentes dans l'image. Enfin, nous floutons les visages de l'image et rendons l'image finale dans notre application.

Nous utiliserons le facedetectpoint de terminaison API pour détecter les visages humains dans une image. Ensuite, nous faisons une autre demande pour mogrifier le point de terminaison avec les coordonnées du visage que nous avons reçues de facedetectl'API pour brouiller notre image.

La version finale de notre projet ressemblera à ceci.

Démo vidéo en direct

Comme nous créons une application Web, nous ne pouvons pas faire de demande directe aux serveurs Pixlab en raison des restrictions CORS. Les restrictions CORS sont là pour protéger l'utilisateur. Vous pouvez en savoir plus sur CORS ici . Par conséquent, nous créons un serveur proxy en utilisant Nodejs et y activons le CORS. Ensuite, nous faisons toutes les requêtes de notre frontal vers ce serveur proxy et acheminons ces requêtes vers les API Pixlab pour contourner les restrictions CORS.

Assez parlé, faisons notre application web.

Configuration du projet

Avant de plonger dans le didacticiel, échafaudons notre projet. Nous devons créer à la fois le front-end et le back-end (en tant que serveur proxy) dans ce projet. Par conséquent, créez 2 répertoires nommés frontendet backendà l'intérieur de la racine de votre projet.

Dans votre répertoire frontend, créez 3 fichiers nommés index.html, style.css, index.js. Installez live-server dans votre VSCode pour servir ces fichiers statiques.

Dans votre répertoire principal, lancez un projet npm en exécutant cette commande.

cd backend
npm init -y

Comme nous créons une application express.js comme serveur proxy, installons toutes les dépendances en une seule fois.

npm install axios cors dotenv express express-fileupload form-data
npm install — save-dev nodemon

Modifiez maintenant la section script de votre package.jsonfichier avec ces 2 commandes.

"scripts": {
    "dev": "nodemon server.js",
    "start": "node server.js"
  },

Créez maintenant un server.jsfichier dans votre répertoire principal.

Après toutes ces configurations, la structure du projet ressemblera à ceci.

.
├── backend
│   ├── package.json
│   ├── package-lock.json
│   └── server.js
└── frontend
    ├── index.html
    ├── index.js
    └── style.css

Apprenons rapidement à quoi servent tous ces packages npm dans notre projet.

  1. axios: Axios est un client http très populaire dans le monde Node.js. Cela nous aide à écrire des requêtes complexes très facilement.
  2. cors: la bibliothèque cors est utilisée pour ajouter des en-têtes CORS dans chaque requête adressée à notre serveur. Vous pouvez également effectuer de nombreuses personnalisations dans la politique CORS à l'aide de ce package.
  3. dotenv: Ce package nous aide à créer et à utiliser des variables d'environnement dans notre projet Node.js. Ceci est nécessaire pour masquer votre clé API ou d'autres secrets que vous ne souhaitez pas transmettre à GitHub.
  4. express: Cette bibliothèque n'a pas besoin d'explication. Il s'agit d'une bibliothèque de serveur très populaire avec une capacité de middleware dans le monde Node.js.
  5. express-fileupload: Cette bibliothèque fonctionne comme middleware et nous donne accès à tous les fichiers téléchargés depuis le client.
  6. form-data: Ce package fournit l'objet FormData du navigateur dans l'environnement Nodejs. Pour faire une requête multipart/form-data à une API, j'utilise ce package dans ce projet.
  7. nodemon: Il s'agit d'une dépendance de développement qui redémarre automatiquement votre serveur chaque fois que du code change dans vos fichiers javascript.

Créons notre serveur proxy NodeJs

Comme je l'ai mentionné plus tôt, en raison de la politique CORS du navigateur, nous ne pouvons pas appeler directement l'API Pixlab à partir de notre application frontale. Par conséquent, nous allons créer un serveur Node.js qui transmettra notre requête à l'API Pixlab.

Dans cette section, j'ai utilisé indifféremment le client et le frontal. Veuillez garder cela à l'esprit.

L'utilisateur proxy a téléchargé l'image sur l'API Pixlab

C'est la partie la plus délicate de notre projet pour proxy l'image téléchargée. Pixlab préfère accepter un lien d'image en ligne pour traiter notre demande. Pour télécharger notre image locale dans un bucket de stockage, Pixlab fournit également une API conviviale pour les développeurs appelée le magasin .

Cette API accepte une requête POST. Le corps de la demande doit être multipart/form-data qui contient l'image téléchargée par l'utilisateur et la clé API. Si la demande aboutit, l'API prend votre image et la télécharge dans un compartiment de stockage en ligne, et vous donne le lien vers cette image.

Dans notre serveur proxy, nous prenons l'entrée du fichier utilisateur en /uploadroute. Nous accédons à l'image téléchargée par l'utilisateur à l'aide du express-fileuploadpackage. Après avoir ajouté ce package en tant que middleware, nous pouvons accéder au fichier de téléchargement de l'utilisateur en utilisant juste la req.filesméthode.

Ensuite, nous construisons notre requête multipart/form-data en utilisant le form-data package que j'ai mentionné plus tôt. Ajoutez l'image téléchargée par l'utilisateur et la clé API dans form-data. Vous pouvez utiliser dotenvpackage ici pour masquer votre clé API et y accéder en tant que variable d'environnement.

Après la construction de multipart/form-data, nous soumettons la requête à l'API Pixlab. Ensuite, quelle que soit la réponse que nous obtenons, si c'est 200, nous la transmettons en réponse à l'utilisateur.

Le code de notre /uploadchemin ressemble à ceci.


app.post("/upload", (req, res) => {
  try {
    if (!req.files || Object.keys(req.files).length === 0) {
      return res.status(400).send("No files were uploaded.");
    }
    let image = req.files.image;// If you want to save the image
    // image.mv(__dirname + "/uploads/" + image.name);const form = new FormData();
    form.append("file", image.data, image.name);
    form.append("key", process.env.PIXLAB_KEY);form.submit(
      {
        protocol: "https:",
        host: "api.pixlab.io",
        path: "/store",
        method: "POST",
        headers: {
          "Content-Type": `multipart/form-data; boundary=${form.getBoundary()}`,
        },
      },
      (err, resp) => {
        if (err) {
          res.status(503).send("File server is currently unavailable");
        }
        resp.pipe(res);
      }
    );
  } catch (error) {
    res.status(500).send(error);
  }
});

Si cette demande aboutit, nous obtenons un lien vers l'image téléchargée par l'utilisateur. Nous gardons le lien avec nous pour utiliser dans facedetectet les mogrifydemandes d'API.

API proxy facetect (détection de visage)

Créons maintenant un proxy d'API Facedetect à l' aide de Node.js. Nous utilisons /facedetectle chemin pour proxy cette API. Pour lire les données JSON envoyées par l'utilisateur, utilisez le express.json()middleware de notre serveur.

Dans un premier temps, nous récupérons l'URL de l'image envoyée par l'utilisateur (à partir de notre requête précédente) et faisons une demande d'obtention à l'API Pixlab avec cette URL d'image et la clé API Pixlab. Ensuite, nous envoyons simplement la réponse du serveur au client.

Le code du /facedetectchemin ressemble à ceci.

app.post("/facedetect", (req, res) => {
  axios
    .get("https://api.pixlab.io/facedetect", {
      params: {
        img: req.body.url,
        key: process.env.PIXLAB_KEY,
      },
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

Après une requête réussie, nous obtenons une liste des coordonnées des visages du serveur. Nous envoyons ces coordonnées au client. Nous avons besoin de ces coordonnées à utiliser dans mogrifyl'API pour flouter les visages des gens.

API mogrify proxy (flou du visage)

Nous utilisons le /mogrifychemin de notre serveur pour appeler l' mogrifyAPI de Pixlab. Le client fournit l'URL de l'image et les coordonnées du visage que nous avons obtenues des 2 demandes ci-dessus. Après avoir analysé les données fournies par l'utilisateur, nous envoyons une requête POST à ​​l' mogrifyAPI Pixlab.

Le code à l'intérieur /mogrifyressemble à ceci.


app.post("/mogrify", (req, res) => {
  axios
    .post("https://api.pixlab.io/mogrify", {
      img: req.body.url,
      key: process.env.PIXLAB_KEY,
      cord: req.body.coord,
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

Après une requête réussie, il renvoie une version floue de l'image que nous avons téléchargée précédemment.

Ensuite, nous transmettons le nouveau lien d'image floue au client. Le client peut maintenant utiliser ce lien pour afficher l'image.

Construire la partie frontale

L'ajout d'un front-end intuitif est très nécessaire pour la perspective de l'utilisateur. Dans cette section, nous faisons de cette partie frontale de notre application. Par souci de simplicité, je garde le front-end aussi minimal que possible.

Obtenir l'entrée du fichier utilisateur

Dans un premier temps, remplissez votre fichier "index.html" avec le minimum de balisage HTML. Pour votre information, ceci est mon modèle HTML de départ pour ce projet.


<!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" />
    <title>Pixlab web</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

Dans le code HTML ci-dessus, nous lions notre fichier CSS et javascript avec HTML et créons une structure simple de notre site Web.

Maintenant, pour prendre une entrée de fichier de l'utilisateur, nous devons ajouter une balise d'entrée à l'intérieur du fichier HTML. Assurez-vous d'ajouter une acceptattribution pour n'accepter que les images jpg et png.


<input
 type="file"
    accept="image/jpeg,image/png"
    id="imageinput"
/>

Ajoutez maintenant 2 balises d'image dans votre balisage HTML. L'une sert à afficher les images téléchargées par l'utilisateur, l'autre à rendre les images de visage floues traitées à partir du serveur API Pixlab.


<img id="image" />
<img id="finalimage" />

Enfin, ajoutez un bouton pour invoquer le traitement d'image.

<button id="btn-process">Process</button>

Rendre notre front-end interactif

Dans le index.jsfichier, nous définissons d'abord tous les nœuds DOM dont nous avons besoin dans ce processus. Cela inclut la balise d'entrée pour l'image ( imageInput) de l'utilisateur, 2 balises d'image pour afficher le résultat initial (image) et final ( finalImage) et un bouton ( processBtn) pour démarrer le processus.


const imageInput = document.getElementById("imageinput");
const image = document.getElementById("image");
const finalImage = document.getElementById("finalimage");
const processBtn = document.getElementById("btn-process");

Désormais, lorsqu'un utilisateur sélectionne une nouvelle image à l'aide de notre sélecteur de fichiers, nous lisons cette image en tant que DataURL, puis nous rendons cette image dans notre balise d'image initiale.

function readFileAsync(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}imageInput.addEventListener("change", async (e) => {
  const fileList = e.target.files;
  if (fileList.length > 0) {
    let data = await readFileAsync(fileList[0]);
    image.src = data;
    file = fileList[0];
  }
});

Nous avons maintenant l'image choisie par l'utilisateur dans notre main. C'est donc le moment d'envoyer la requête à notre serveur proxy pour commencer le traitement de l'image.

Traitement d'image à l'aide de l'API Pixlab

Dans ce processus, nous faisons un total de 3 requêtes au serveur chaque fois que l'utilisateur télécharge une image. Ces requêtes sont consécutives, nous devons donc faire la requête strictement dans l'ordre.

  1. Téléchargement de l'image sur un serveur distant : Pour télécharger une image sur le serveur proxy, nous effectuons une requête POST pour /uploadrouter le serveur proxy avec l'image choisie par l'utilisateur. Nous créons une fonction d'assistance pour faciliter ce processus.
async function uploadToStore(image) {
  const formData = new FormData();
  formData.append("image", image);
  try {
    let response = await fetch("http://localhost:5000/upload", {
      method: "POST",
      body: formData,
    });
    return await response.json();
  } catch (error) {
    throw "Fetch request give some error";
  }
}

2. Appel de l'API de détection de visage : En utilisant le lien d'image distant que nous obtenons de la requête précédente, nous appelons l'API de détection de visage. Nous faisons une requête POST à ​​la /facedetectroute de notre serveur proxy.

async function facedetect(imageurl) {
  try {
    let faceDetectionResult = await fetch("http://localhost:5000/facedetect", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageurl,
      }),
    });let tempjson = await faceDetectionResult.json();
    return tempjson.faces;
  } catch (error) {
    throw "Face detection not working";
  }
}

3. Flou les visages détectés : Nous obtenons les coordonnées des visages de l'image que nous avons téléchargée à partir de la requête précédente. Nous appelons maintenant la /mogrifyroute proxy pour brouiller notre image. Encore une fois, nous faisons une demande POST avec les coordonnées du visage et le lien de l'image.

async function blurImage(faceCoordinate, imageUrl) {
  try {
    let blurimageResponse = await fetch("http://localhost:5000/mogrify", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageUrl,
        coord: faceCoordinate,
      }),
    });return blurimageResponse.json();
  } catch (error) {
    throw "Blur image function is not working";
  }
}

Nous obtenons en retour le lien image flou de cette requête. Nous utiliserons cette URL pour afficher l'image devant nos utilisateurs.

Le bouton qui gère toutes ces fonctions

Tous ces processus sont gérés par le bouton de processus que nous avons défini précédemment. Il effectue une demande une par une à chaque point de terminaison et transmet les valeurs requises d'une fonction à une autre. Le bouton de traitement est le gestionnaire de notre partie frontale.


processBtn.onclick = async () => {
  if (file) {
    let imageUploadResponse = await uploadToStore(file);
    if (imageUploadResponse["ssl_link"]) {
      let faceCoordinates = await facedetect(imageUploadResponse["ssl_link"]);
      if (faceCoordinates) {
        let blurimage = await blurImage(
          faceCoordinates,
          imageUploadResponse["ssl_link"]
        );
        finalImage.src = blurimage["ssl_link"];
      }
    }
  } else {
    throw "No file present to process";
  }
};

Prime

Si vous lisez jusqu'ici, c'est le lien du projet GitHub pour vous. Je dois apporter quelques modifications ici et là pour rendre notre application Web plus agréable. Vous pouvez également consulter la partie CSS que je n'ai pas incluse dans cet article.

Source : https://betterprogramming.pub/detect-and-blur-human-faces-on-your-website-8c4a2d69a538

 #websites #css #javascript 

Détectez Et Floutez Les Visages Humains Sur Votre Site Web à L'aide De
Reid  Rohan

Reid Rohan

1658543220

Wappalyzer: Identify Technology on Websites

Wappalyzer

Wappalyzer identifies technologies on websites, such as CMS, web frameworks, ecommerce platforms, JavaScript libraries, analytics tools and more.

If you don't have time to configure, host, debug and maintain your own infrastructure to analyse websites at scale, we offer a SaaS solution that has all the same capabilities and a lot more. Our apps and APIs not only reveal the technology stack a website uses but also company and contact details, social media profiles, keywords and metadata.

Quick start

git clone https://github.com/wappalyzer/wappalyzer.git
cd wappalyzer
yarn install
yarn run link

Usage

Command line

node src/drivers/npm/cli.js https://example.com

Chrome extension

  • Go to about:extensions
  • Enable 'Developer mode'
  • Click 'Load unpacked'
  • Select src/drivers/webextension

Firefox extension

  • Go to about:debugging#/runtime/this-firefox
  • Click 'Load Temporary Add-on'
  • Select src/drivers/webextension/manifest.json

Specification

A long list of regular expressions is used to identify technologies on web pages. Wappalyzer inspects HTML code, as well as JavaScript variables, response headers and more.

Patterns (regular expressions) are kept in src/technologies/. The following is an example of an application fingerprint.

Example

"Example": {
  "description": "A short description of the technology.",
  "cats": [
    "1"
  ],
  "cookies": {
    "cookie_name": "Example"
  },
  "dom": {
    "#example-id": {
      "exists": "",
      "attributes": {
        "class": "example-class"
      },
      "properties": {
        "example-property": ""
      },
      "text": "Example text content"
    }
  },
  "dns": {
    "MX": [
      "example\\.com"
    ]
  },
  "js": {
    "Example.method": ""
  },
  "excludes": "Example",
  "headers": {
    "X-Powered-By": "Example"
  },
  "html": "<link[^>]example\\.css",
  "text": "\bexample\b",
  "css": "\\.example-class",
  "robots": "Disallow: /unique-path/",
  "implies": "PHP\\;confidence:50",
  "requires": "WordPress",
  "requiresCategory": "Ecommerce",
  "meta": {
    "generator": "(?:Example|Another Example)"
  },
  "scriptSrc": "example-([0-9.]+)\\.js\\;confidence:50\\;version:\\1",
  "scripts": "function webpackJsonpCallback\\(data\\) {",
  "url": "example\\.com",
  "xhr": "example\\.com",
  "oss": true,
  "saas": true,
  "pricing": ["mid", "freemium", "recurring"],
  "website": "https://example.com",
}

JSON fields

Find the JSON schema at schema.json.

Required properties

FieldTypeDescriptionExample
catsArrayOne or more category IDs.[1, 6]
websiteStringURL of the application's website."https://example.com"

Optional properties

FieldTypeDescriptionExample
descriptionStringA short description of the technology in British English (max. 250 characters). Write in a neutral, factual tone; not like an ad."A short description."
iconStringApplication icon filename."WordPress.svg"
cpeStringThe CPE is a structured naming scheme for applications, see the specification."cpe:/a:apache:http_server"
saasBooleanThe technology is offered as a Software-as-a-Service (SaaS), i.e. hosted or cloud-based.true
ossBooleanThe technology has an open-source license.true
pricingArray

Cost indicator (based on a typical plan or average monthly price) and available pricing models. For paid products only.

One of:

  • lowLess than US $100 / mo
  • midBetween US $100 - $1,000 / mo
  • highMore than US $1,000 / mo

Plus any of:

  • freemium Free plan available
  • onetime One-time payments accepted
  • recurring Subscriptions available
  • poa Price on asking
  • payg Pay as you go (e.g. commissions or usage-based fees)
["low", "freemium"]

Implies, requires and excludes (optional)

FieldTypeDescriptionExample
impliesString | ArrayThe presence of one application can imply the presence of another, e.g. WordPress means PHP is also in use."PHP"
requiresString | ArraySimilar to implies but detection only runs if the required technology has been identified. Useful for themes for a specific CMS."WordPress"
requiresCategoryString | ArraySimilar to requires; detection only runs if a technology in the required category has been identified."Ecommerce"
excludesString | ArrayOpposite of implies. The presence of one application can exclude the presence of another."Apache"

Patterns (optional)

FieldTypeDescriptionExample
cookiesObjectCookies.{ "cookie_name": "Cookie value" }
domString | Array | ObjectUses a query selector to inspect element properties, attributes and text content.{ "#example-id": { "property": { "example-prop": "" } } }
dnsObjectDNS records: supports MX, TXT, SOA and NS (NPM driver only).{ "MX": "example\\.com" }
jsObjectJavaScript properties (case sensitive). Avoid short property names to prevent matching minified code.{ "jQuery.fn.jquery": "" }
headersObjectHTTP response headers.{ "X-Powered-By": "^WordPress$" }
htmlString | ArrayHTML source code. Patterns must include an HTML opening tag to avoid matching plain text. For performance reasons, avoid html where possible and use dom instead."<a [^>]*href=\"index.html"
textString | ArrayMatches plain text. Should only be used in very specific cases where other methods can't be used.\bexample\b
cssString | ArrayCSS rules. Unavailable when a website enforces a same-origin policy. For performance reasons, only a portion of the available CSS rules are used to find matches."\\.example-class"
robotsString | ArrayRobots.txt contents."Disallow: /unique-path/"
urlString | ArrayFull URL of the page."^https?//.+\\.wordpress\\.com"
xhrString | ArrayHostnames of XHR requests."cdn\\.netlify\\.com"
metaObjectHTML meta tags, e.g. generator.{ "generator": "^WordPress$" }
scriptSrcString | ArrayURLs of JavaScript files included on the page."jquery\\.js"
scriptsString | ArrayJavaScript source code. Inspects inline and external scripts. For performance reasons, avoid scripts where possible and use js instead."function webpackJsonpCallback\\(data\\) {"

Patterns

Patterns are essentially JavaScript regular expressions written as strings, but with some additions.

Quirks and pitfalls

  • Because of the string format, the escape character itself must be escaped when using special characters such as the dot (\\.). Double quotes must be escaped only once (\"). Slashes do not need to be escaped (/).
  • Flags are not supported. Regular expressions are treated as case-insensitive.
  • Capture groups (()) are used for version detection. In other cases, use non-capturing groups ((?:)).
  • Use start and end of string anchors (^ and $) where possible for optimal performance.
  • Short or generic patterns can cause applications to be identified incorrectly. Try to find unique strings to match.

Tags

Tags (a non-standard syntax) can be appended to patterns (and implies and excludes, separated by \\;) to store additional information.

TagDescriptionExample
confidenceIndicates a less reliable pattern that may cause false positives. The aim is to achieve a combined confidence of 100%. Defaults to 100% if not specified."js": { "Mage": "\\;confidence:50" }
versionGets the version number from a pattern match using a special syntax."scriptSrc": "jquery-([0-9.]+)\.js\\;version:\\1"

Version syntax

Application version information can be obtained from a pattern using a capture group. A condition can be evaluated using the ternary operator (?:).

ExampleDescription
\\1Returns the first match.
\\1?a:Returns a if the first match contains a value, nothing otherwise.
\\1?a:bReturns a if the first match contains a value, b otherwise.
\\1?:bReturns nothing if the first match contains a value, b otherwise.
foo\\1Returns foo with the first match appended.

Prerequisites

Author: Wappalyzer
Source Code: https://github.com/wappalyzer/wappalyzer 
License: MIT license

#javascript #websites #devtools 

Wappalyzer: Identify Technology on Websites
Saul  Alaniz

Saul Alaniz

1655216520

Crear Un Formulario Sin Servidor Para Un Sitio Web Sin Servidor

S3 + CloudFront es una solución simple y de bajo costo para alojar un sitio web estático. Sin embargo, ¿qué sucede cuando necesita un formulario HTML? ¡Repasaremos la implementación de un back-end sin servidor simple para este propósito!

Introducción

AWS S3 + Cloudfront lo convierte en una opción escalable y de bajo costo para alojar un sitio web estático, como la página de inicio para una startup o una página de registro para un boletín informativo. Sin embargo, ¿cómo se puede implementar un formulario sin un servidor?

En este artículo, repasaremos un backend sin servidor para un formulario que usa Lambda y API Gateway de AWS para activar el envío de un correo electrónico con la información completada del formulario a un correo electrónico predeterminado usando AWS SES .

requisitos previos

Antes de sumergirnos en el código de Lambda, debemos configurar el entorno de desarrollo y nuestra cuenta de AWS, incluidos los puntos a continuación:

  1. Las herramientas de desarrollo local del Modelo de aplicación sin servidor (SAM) de AWS se instalan según las instrucciones aquí .
  2. AWS SES está configurado en modo de producción (no en sandbox) y el dominio se verificó según las instrucciones aquí .
  3. Tenga un sitio web con un formulario HTML que se pueda configurar para enviar datos al extremo de la puerta de enlace API que se creará más adelante en este artículo.

Implementación

Usaremos SAM para implementar Lambda y sus recursos dependientes. Para obtener una introducción más profunda a SAM , consulte el artículo a continuación.

API REST privadas sin servidor con AWS Lambda mediante SAM

Comencemos con la estructura de carpetas. Tendremos un directorio para los archivos de origen de la aplicación, uno para los scripts que se pueden usar para implementar la aplicación y archivos de nivel superior como los template.yamlque usa SAM.

my-serverless-form/
├── cmd/
│   └── deploy.sh
├── src/
|   ├── package.json
│   └── index.js
├── .gitignore 
└── template.yaml

Se template.yamlverá como el siguiente:

AWSTemplateFormatVersion: "2010-09-09"
Transform: AWS::Serverless-2016-10-31
Description: >
  serverless-form
  SAM project for serverless-form
Parameters:
  LambdaVersion:
    Default: "not-specified"
    Description: "What is the current code version?"
    Type: String

Resources:
  FormSubmissionFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: src/
      Handler: index.handler
      Runtime: nodejs12.x
      MemorySize: 128
      Timeout: 3
      Environment:
        Variables:
          LAMBDA_VERSION: !Ref LambdaVersion
      Policies:
        - AWSLambdaBasicExecutionRole
        - Version: "2012-10-17" # Policy Document
          Statement:
            - Effect: Allow
              Action:
                - ses:SendEmail
                - ses:SendRawEmail
              Resource: "*"
      Events:
        APIRoot:
          Type: Api
          Properties:
            Path: /
            Method: POST
            RestApiId: !Ref FormSubmissionApi

  FormSubmissionApi:
    Type: AWS::Serverless::Api
    Properties:
      StageName: Prod
      Cors:
        AllowMethods: "'POST'"
        AllowOrigin: "'https://my-domain.com'"
        AllowHeaders: "'x-requested-with'"

Outputs:
  FormSubmissionApi:
    Description: "API Gateway endpoint URL"
    Value: !Sub "https://${FormSubmissionApi}.execute-api.${AWS::Region}.amazonaws.com/Prod/"
  FormSubmissionFunction:
    Description: "Lambda Function ARN"
    Value: !GetAtt FormSubmissionFunction.Arn

La plantilla anterior define dos recursos:

  1. FormSubmissionFunction: Lambda que, cuando se activa, enviará un correo electrónico.
  2. FormSubmissionApi: API Gateway que recibirá solicitudes públicas de Internet y activará Lambda.

El código lambda se especificará en el index.jsarchivo como el que se muestra a continuación:

const aws = require("aws-sdk"); // Library to interact with AWS resources
const ses = new aws.SES({ region: "us-east-1" });

exports.handler = async (eventObject, context, callback) => {
  // Log event data to ease debugging
  console.log(
    "Received event:",
    JSON.stringify(eventObject, context, callback)
  );

  const emailParams = {
    Destination: {
      ToAddresses: ["admin@my-domain.com"],
    },
    Message: {
      Body: {
        Text: {
          Data:
            JSON.stringify(eventObject, context, callback) // TODO: Format your data for email here
        },
      },

      Subject: { Data: "Contact Us Website Form" },
    },
    Source: "admin@my-domain.com",
  };

  // Send the email
  await ses.sendEmail(emailParams).promise();

  // API response
  const response = {
    statusCode: 204,
    headers: {
      "Access-Control-Allow-Headers": "Content-Type",
      "Access-Control-Allow-Origin": "https://my-domain.com",
      "Access-Control-Allow-Methods": "OPTIONS,POST",
    },
    isBase64Encoded: false,
    body: null,
  };

  return response;
};

En él, enviamos un correo electrónico utilizando SES que contiene los datos eventObjectque contendrán el cuerpo y el encabezado de la solicitud que se utilizó para activar Lambda. Puede formatear el cuerpo del correo electrónico como desee.

Para analizar datos de formularios en Lambda, recomiendo usar la biblioteca a continuación:

GitHub - francismeynard/lambda-multipart-parser

Para implementar Lambda, puede ejecutar el script.sharchivo (que se muestra a continuación) y seguir las instrucciones en pantalla:

#!/bin/bash

# exit when any command fails
set -e

script_path=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )

sam deploy \
  --template-file ${script_path}/../template.yaml \
  --stack-name serverless-website-form-production \
  --capabilities CAPABILITY_IAM \
  --guided 

Conclusión

Hemos repasado cómo crear un backend sin servidor que se puede usar para aceptar datos de formulario entrantes (u otros datos de solicitudes de API) y enviar un correo electrónico que contiene los datos.

Sin embargo, antes de implementar algo como esto en producción, puede ser conveniente implementar reCaptcha (o similar) para evitar que los bots descubran su punto final y envíen datos falsos (no desea que se le cobre el tiempo de ejecución de Lambda por enviar correos electrónicos de bots) .

¡Espero que hayas encontrado esto útil!

Esta historia se publicó originalmente en https://betterprogramming.pub/create-a-serverless-form-for-a-serverless-website-69b1a62c4eeb

#serverless #websites #programming #aws 

Crear Un Formulario Sin Servidor Para Un Sitio Web Sin Servidor
Scott Hann

Scott Hann

1654597680

Complete Responsive Food / Restaurant Website Design Using HTML / CSS / JAVASCRIPT - From Scratch

Complete Responsive Food / Restaurant Website Design Using HTML / CSS / JAVASCRIPT - From Scratch.

"KDS Coder" is our first guest tutor. Today he will show us about how to create a responsive website using HTML CSS & JavaScript.
 

21+ Amazing Full Website Tutorial In Our YouTube channel: https://www.youtube.com/c/Tech2etc

Visit Our website for Free Courses & Articles: https://tech2etc.com/

 

#html #css #web-development #websites #responsive 

Complete Responsive Food / Restaurant Website Design Using HTML / CSS / JAVASCRIPT - From Scratch
Ned  Erdman

Ned Erdman

1654146000

Full Course - How to Build a Ecommerce Website

In this tutorial, we will learn How to Build a Ecommerce Website.  
--------------------------------------------------------------------------------
💗💗 Please! Subscribe, Like and follow. 
💗💗Thanks for watching video!
💗💗Have you good day!

#ecommerce #websites 

Full Course - How to Build a Ecommerce Website
Brandon  Schumm

Brandon Schumm

1653669971

Top 5 Hosting Web Tips You Need Know

Building and Launching Websites is fun, the less fun part is the web hosting part. In this video I talk about all things web hosting. What should you be looking for for a good web hosting company? Probably one that offers you the best performance and bang for your buck, but you have to know the basics of web hosting first. Let's chat about Domains, DNS, Server types, Bandwidth and SSL. 

#host #websites 

Top 5 Hosting Web Tips You Need Know

Twitter Emoji – Cómo Usar Twemoji En Tu Sitio Web

En este artículo, explicaré qué son los Twitter Emoji, o Twemoji, y por qué es posible que desee usarlos.

¿Por qué deberías usar emojis de Twitter?

Hace un par de meses, comencé a trabajar en un proyecto mío y necesitaba permitir que los usuarios seleccionaran diferentes íconos para su entrada.

Después de pensarlo un poco, decidí usar emojis en lugar de íconos, ya que todos los conocen y están disponibles en casi todas partes.

Marco-448

Ejemplo de aplicación web con emojis nativos

Bastante fácil, ¿verdad? Bueno en realidad no. Como todo lo demás, los emojis vienen con sus propios problemas que quizás no conozcas hasta que pases un tiempo trabajando con ellos.

Uno de los problemas más comunes con los emojis es que son muy inconsistentes en diseño y soporte en diferentes sistemas operativos e incluso en diferentes navegadores.

Por ejemplo, si selecciona un emoji específico en su teléfono, puede verse muy diferente en su computadora portátil, o puede terminar mostrándose como un cuadrado o un cuadro si su sistema operativo no tiene la última compatibilidad con Unicode.

Si tiene muchos emojis en todo su proyecto, esto podría convertirse en un problema importante en la experiencia del usuario y comenzar a molestar a sus usuarios. Así que era hora de encontrar una manera de solucionarlo antes de que comenzara a alejar a los usuarios del proyecto.

Después de investigar un poco, ¡me encontré con el conjunto de emojis de Twitter! Twemoji es una biblioteca de código abierto que proporciona compatibilidad con emoji estándar en todas las plataformas. Hace que sea muy fácil admitir todos los emojis más recientes en diferentes sistemas operativos y navegadores y hacer que todos tengan el mismo aspecto.

Esto es todo lo que necesitaba, así que no dudé ni un minuto en integrarlo a mi proyecto y resolvió todos mis problemas.

Marco-447

Ejemplo de aplicación web con emojis de Twitter

Muy bien, esa es más o menos la historia de fondo. Ensuciémonos las manos con algo de código ahora y veamos cómo funciona Twemoji.

¿Cómo funciona Twemoji?

En resumen, Twemoji tiene un SVG y PNG alternativos para cada emoji Unicode. Nos permite importarlos desde su CDN o localmente y representar cada uno como una imagen en lugar de texto Unicode.

Esto significa que son compatibles en todas partes y siempre tenemos acceso a los emojis más recientes.

Marco-449

Ejemplos de Twemoji

Cómo comenzar con Twemoji

Para comenzar, debemos importar Twemoji a nuestro documento HTML. Para hacerlo, copiemos y peguemos lo siguiente en la <head>etiqueta de nuestro documento.

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>

A continuación, tenemos que usar la biblioteca que acabamos de importar y hacer que analice nuestro Unicode en Twemojis.

Hay dos formas de analizar tus emojis, y voy a cubrir ambas y te dejaré decidir cuál se adapta mejor a tus necesidades.

Analizar todo el contenido del cuerpo

La primera y más fácil opción es hacer que Twemoji analice todo nuestro DOM y convierta automáticamente cada emoji Unicode y lo reemplace con un Twemoji.

Para implementar esto, todo lo que tenemos que hacer es usar el paquete que acabamos de importar y pasarle el cuerpo de nuestro documento así:

twemoji.parse(document.body);

Una vez que llamemos twemoji.parsey le pasemos el cuerpo del documento como nuestro argumento, analizará todo dentro del cuerpo. Y reemplazará los emojis de texto Unicode con imágenes Twemoji sin comprometer las notas circundantes.

En este punto, su documento HTML debería tener el siguiente aspecto. Una vez que lo abra en el navegador, debería ver el Twemoji.

<html>
    <head>
        <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
    </head>
    <body>
	    📮
    </body>
    <script>
	    twemoji.parse(document.body)
    </script>
</html>

Tenga en cuenta que este método conlleva algunas penalizaciones de rendimiento, ya que estamos ejecutando esta operación en todos los elementos dentro de nuestro cuerpo, lo que podría ser bastante costoso.

Analizar manualmente cada Emoji

Para mi proyecto, terminé yendo con la ruta de análisis manual. Me dio más control sobre cómo se procesaban las cosas y redujo la penalización de rendimiento al analizar todo el documento.

Pero este método es más complicado y no lo recomendaría a menos que tenga una buena razón para decidir analizar manualmente sus emojis en lugar de analizar todo el documento.

Para comprender la diferencia aquí, es importante saber cómo funciona el método de análisis:

Si el primer argumento de twemoji.parsees un HTMLElement, el método analizará automáticamente el elemento y reemplazará los emojis dentro del documento. Pero si el primer elemento es una cadena, el método analizará ese único emoji y nos permitirá recibir los datos en una función de devolución de llamada que podemos definir.

Volviendo a nuestro documento HTML, pasemos nuestro emoji como una cadena, proporcionemos un método de devolución de llamada e imprimamos los argumentos en la consola.

const emoji = "📮"
twemoji.parse(emoji, {
	callback: (icon, options) => {
		console.log(icon, options)
	}
})

// Console output
// 1f4ee {base: 'https://twemoji.maxcdn.com/v/14.0.2/', ext: '.png', size: '72x72', callback: ƒ, attributes: ƒ, …}

Como puede ver, las opciones de devolución de llamada nos brindan toda la información que necesitamos para construir la URL de origen y agregarla a nuestro documento como una imagen.

A continuación, definamos un método que tome las opciones y construya nuestra URL de origen.

function constructTwemojiURL(icon, options) {
	return ''.concat(
		options.base, 
		options.size, 
		'/',
		icon,         
		options.ext   
	);
}

Ahora podemos llamar a este método desde la devolución de llamada para obtener la URL de origen, luego crear una nueva etiqueta de imagen y agregarla a nuestro documento.

const emoji = "📮"
twemoji.parse(emoji, {
	callback: (icon, options) => {
        
		// create the image tag
		const img = document.createElement('img');

		// assign the image source
		img.src = constructTwemojiURL(icon, options)        
		img.alt = "Twemoji"

		// append the tag to our document body
		document.body.append(img)

	}
})

Finalmente, si abrimos el documento HTML en nuestro navegador, deberíamos ver nuestro Twemoji. Su documento HTML debería tener el siguiente aspecto en este punto:

<html>
	<head>
		<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
	</head>
	<body></body>
	<script>
		function constructTwemojiURL(icon, options) {
			return ''.concat(
				options.base, 
				options.size, 
				'/',
				icon,         
				options.ext   
			);
		}
		
		const emoji = "📮"
		twemoji.parse(emoji, {
			callback: (icon, options) => {
		        
				// create the image tag
				const img = document.createElement('img');
		
				// assign the image source
				img.src = constructTwemojiURL(icon, options)        
				img.alt = "Twemoji"
		
				// append the tag to our document body
				document.body.append(img)
		
			}
		})
		
		 
	</script>
</html>

Conclusión

¡Eso es practicamente todo! En este artículo, hablamos sobre por qué puede decidir usar Twemojis en su aplicación web y hemos cubierto dos formas diferentes de implementar esto según su caso de uso.

Si está interesado en el proyecto que estoy construyendo, se llama LogSnag.

LogSnag es una herramienta simple de seguimiento de eventos que facilita el seguimiento de cualquier cosa importante dentro de sus proyectos en tiempo real y recibe notificaciones automáticas personalizadas. Puede consultar logsnag.com para obtener más información sobre el proyecto.

Marco-450-2

Fuente: https://www.freecodecamp.org/news/how-to-use-twitter-emoji-on-your-website/

 #javascript #twitter #websites 

Twitter Emoji – Cómo Usar Twemoji En Tu Sitio Web