Skip to content

Instantly share code, notes, and snippets.

@jackcook jackcook/0.html
Created Oct 26, 2018

Embed
What would you like to do?
clarifai-demo-code-snippets
<!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}
img {
margin: 64px 0 16px;
max-height: 192px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.