jackcook/0.html

## 0.html
<!DOCTYPE html>
<html>
<head>
  <link href="/css/style.css" rel="stylesheet" />
  <title>Image Recognition Demo</title>
</head>
<body>
  <div class="container">
    <h1>Image Recognition Demo</h1>
    <form action="/upload" method="post" enctype="multipart/form-data">
      <label for="photo" class="label-button">Upload Image</label>
      <input id="photo" type="file" name="photo" />
      <label for="submit" class="label-button">Submit</label>
      <input id="submit" type="submit" name="submit" />
    </form>
  </div>
</body>
</html>

## 1.css
* {
  margin: 0;
  padding: 0;
}

html, body {
  background: rgb(239, 239, 244);
  font-family: Arial, sans-serif;
  text-align: center;
  width: 100%;
}

.container {
  background: #fff;
  border-radius: 8px;
  margin: 64px auto 0;
  padding: 24px 0 32px;
  width: 600px;
}

input {
  display: none;
}

.label-button {
  background: #1e90ff;
  border-radius: 4px;
  color: #fff;
  display: table;
  margin: 16px auto 0;
  padding: 8px 12px;
  cursor: pointer;
}

## 2.js
const express = require("express")

const app = express()
const port = 3000

app.get("/", (req, res) => {
  res.sendFile("index.html", {
    root: __dirname
  })
})

app.use(express.static("public"))
app.listen(port, () => console.log(`Running on http://localhost:${port}/`))

## 3.js
const express = require("express")
const Clarifai = require("clarifai")
const multer = require("multer")
const pug = require("pug")

const app = express()
const port = 3000

const upload = multer()
const resultsTemplate = pug.compileFile("results.pug")

const clarifai = new Clarifai.App({
  apiKey: "[API KEY GOES HERE]"
})

app.get("/", (req, res) => {
  res.sendFile("index.html", {
    root: __dirname
  })
})

app.post("/upload", upload.single("photo"), (req, res) => {
  const base64String = Buffer.from(req.file.buffer).toString("base64")

  clarifai.models.predict("stickers", base64String).then(
   response => {
      res.send(resultsTemplate({
        concepts: response.outputs[0].data.concepts,
        image: base64String
      }))
    },
    err => {
      console.log(err)
    }
  )
})

app.use(express.static("public"))
app.listen(port, () => console.log(`Running on http://localhost:${port}/`))

## 4.pug
html
  head
    link(href="/css/style.css", rel="stylesheet")
  body
    img(src="data:image/png;base64," + image)
    each concept in concepts
      p #{concept.name}: #{concept.value}

## 5.css
img {
  margin: 64px 0 16px;
  max-height: 192px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<link href="/css/style.css" rel="stylesheet" />
	<title>Image Recognition Demo</title>
	</head>
	<body>
	<div class="container">
	<h1>Image Recognition Demo</h1>
	<form action="/upload" method="post" enctype="multipart/form-data">
	<label for="photo" class="label-button">Upload Image</label>
	<input id="photo" type="file" name="photo" />
	<label for="submit" class="label-button">Submit</label>
	<input id="submit" type="submit" name="submit" />
	</form>
	</div>
	</body>
	</html>
	* {
	margin: 0;
	padding: 0;
	}

	html, body {
	background: rgb(239, 239, 244);
	font-family: Arial, sans-serif;
	text-align: center;
	width: 100%;
	}

	.container {
	background: #fff;
	border-radius: 8px;
	margin: 64px auto 0;
	padding: 24px 0 32px;
	width: 600px;
	}

	input {
	display: none;
	}

	.label-button {
	background: #1e90ff;
	border-radius: 4px;
	color: #fff;
	display: table;
	margin: 16px auto 0;
	padding: 8px 12px;
	cursor: pointer;
	}
	const express = require("express")

	const app = express()
	const port = 3000

	app.get("/", (req, res) => {
	res.sendFile("index.html", {
	root: __dirname
	})
	})

	app.use(express.static("public"))
	app.listen(port, () => console.log(`Running on http://localhost:${port}/`))
	const express = require("express")
	const Clarifai = require("clarifai")
	const multer = require("multer")
	const pug = require("pug")

	const app = express()
	const port = 3000

	const upload = multer()
	const resultsTemplate = pug.compileFile("results.pug")

	const clarifai = new Clarifai.App({
	apiKey: "[API KEY GOES HERE]"
	})

	app.get("/", (req, res) => {
	res.sendFile("index.html", {
	root: __dirname
	})
	})

	app.post("/upload", upload.single("photo"), (req, res) => {
	const base64String = Buffer.from(req.file.buffer).toString("base64")

	clarifai.models.predict("stickers", base64String).then(
	response => {
	res.send(resultsTemplate({
	concepts: response.outputs[0].data.concepts,
	image: base64String
	}))
	},
	err => {
	console.log(err)
	}
	)
	})

	app.use(express.static("public"))
	app.listen(port, () => console.log(`Running on http://localhost:${port}/`))
	html
	head
	link(href="/css/style.css", rel="stylesheet")
	body
	img(src="data:image/png;base64," + image)
	each concept in concepts
	p #{concept.name}: #{concept.value}