diff --git a/app/Image.js b/app/Image.js new file mode 100644 index 0000000..f986644 --- /dev/null +++ b/app/Image.js @@ -0,0 +1,7 @@ +import React from 'react'; + +export const Image = ({ newImageSource='./assets/images/logo-o.png' }) => { + return ( + + ) +} diff --git a/app/assets/images/logo-o.png b/app/assets/images/logo-o.png new file mode 100644 index 0000000..5394ee7 Binary files /dev/null and b/app/assets/images/logo-o.png differ diff --git a/app/assets/styles/main.css b/app/assets/styles/main.css index b4c2392..999023a 100644 --- a/app/assets/styles/main.css +++ b/app/assets/styles/main.css @@ -1,17 +1,133 @@ body { background: #f4f4f4; - font-family: sans-serif; + font-family: 'Overpass Mono', sans-serif; font-weight: 100; + margin: 0; + padding: 0; } -#main h1 { - padding: 20px; - border-bottom: 1px dashed #aaa; - color: rgba(0,0,0,0.6); - font-weight: 100; - font-family: sans-serif; +#root { + text-align: center; +} + + +/*FALLBACKS*/ +article { + display: block; +} + +/*GLOBAL*/ +.hidden { + display: none; +} + +button { + font-family: 'Overpass Mono', sans-serif; + font-size: 20px; + display: block; + margin: 20px auto; + border: none; + border-radius: 25px; + background-color: rgba(111, 157, 172, 1); + color: rgba(234, 206, 162, 1); + height: 50px; + padding: 0 20px; +} + +/*APP*/ +.App { + text-align: center; +} + +a { + text-decoration: none; +} + +header { + background-color: #629EAE; + margin: 0; + padding: 10px 0 30px 0; +} + +h1 { + margin: 15px 0; + text-align: center; + color: #EDCD9C; + font-size: 60px; + font-weight: 700; +} + +.logo-o { + width: 35px; + margin-left: 5px; } -#main { +.logo-i { + color: #FFF8F3; +} + +/*NAVBAR*/ +ul { + display: flex; + justify-content: space-around; + list-style: none; + -webkit-margin-before: 0; + -webkit-margin-after: 0; + -webkit-padding-start: 0; +} + +li { + width: 200px; text-align: center; } + +li a { + text-decoration: none; + color: #EDCD9C; + font-size: 30px; + border-bottom: 4px solid rgba(0, 0, 0, 0); +} + +li:hover a { + font-weight: 700; + border-bottom: 4px solid rgba(237, 205, 156, 1); +} + + +/*PLAY*/ +.play { + display: flex; + justify-content: space-between; +} + + +/*IMAGE CAPTURE*/ +.image-capture { + text-align: center; + position: relative; +} + +video { + border: 10px solid #629EAE; + border-radius: 50px; + object-fit: cover; + -webkit-transform: scaleX(-1); + transform: scaleX(-1); +} + +.face-oval { + width: 150px; + height: 200px; + border: 2px dashed rgba(237, 205, 156, 0.5); + -moz-border-radius: 70px / 90px; + -webkit-border-radius: 70px / 90px; + border-radius: 70px / 90px; + position: absolute; + top: 150px; + left: 50%; + transform: translateX(-50%); +} + +.image-capture img { + display: none; +} diff --git a/app/components/App/App.js b/app/components/App/App.js new file mode 100644 index 0000000..f00a219 --- /dev/null +++ b/app/components/App/App.js @@ -0,0 +1,28 @@ +import React, { Component } from 'react'; +import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; +import { NavBar } from '../NavBar/NavBar'; +import { Instructions } from '../Instructions/Instructions'; +import Play from '../Play/Play'; +import { Learn } from '../Learn/Learn'; +import { Image } from '../../Image'; + +class App extends Component { + render() { + return ( + +
+ +
+

emotican

+ +
+ + + +
+ + ) + } +} + +export default App; diff --git a/app/components/App/App.test.js b/app/components/App/App.test.js new file mode 100644 index 0000000..b84af98 --- /dev/null +++ b/app/components/App/App.test.js @@ -0,0 +1,8 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); +}); diff --git a/app/components/EmotionResults/EmotionResults.js b/app/components/EmotionResults/EmotionResults.js new file mode 100644 index 0000000..6d02809 --- /dev/null +++ b/app/components/EmotionResults/EmotionResults.js @@ -0,0 +1,7 @@ +import React from 'react'; + +export const EmotionResults = () => { + return ( +
Emotion results go here
+ ) +} diff --git a/app/components/EmotionResults/EmotionResults.test.js b/app/components/EmotionResults/EmotionResults.test.js new file mode 100644 index 0000000..e69de29 diff --git a/app/components/ImageCapture/ImageCapture.js b/app/components/ImageCapture/ImageCapture.js new file mode 100644 index 0000000..72de174 --- /dev/null +++ b/app/components/ImageCapture/ImageCapture.js @@ -0,0 +1,110 @@ +import React, { Component } from 'react'; + +export default class ImageCapture extends Component { + constructor(props) { + super() + this.state = { + constraints: { audio: false, video: { width: 300, height: 350, facingMode: 'user' } } + } + } + + beginImageCapture() { + navigator.mediaDevices.getUserMedia(this.state.constraints) + .then((mediaStream) => { + const video = document.querySelector('video'); + video.srcObject = mediaStream; + video.onloadedmetadata = (e) => { + video.play(); + }; + }) + .catch((error) => { + console.log('Problem capturing image: ', error) + }); + } + + endImageCapture() { +console.log('trying to stop video'); + const video = document.querySelector('video'); + video.pause(); + } + + storeData(faceURL) { + const headers = { + "method": "POST", + "hostname": "api.imgur.com", + "port": null, + "path": "/3/image", + "headers": { + "//authorization": "Client-ID 10c0cf1412fad3", + "authorization": "Bearer 7887599b4a9c2cec883836f79b9612f772bb4a01" + } + } + + const body = { + "image": `'${faceURL}'`, + "album": "{M5OtG}", + "name": 'face.png', + "type": 'url' + } + + const request = { + "method": "POST", + "headers": headers, + "body": body + } + + fetch('https://api.imgur.com/3/image', request) + .then(resp => resp.json()) + .then(data => { + console.log(data.link); + // this.props.analyzeEmotions(faceURL); + }) + .catch(error => console.log('error posting to imgur: ', error)) + } + + takeSnapshot(video, ctx, canvas) { + if (video) { + ctx.drawImage(video, 350, 20, 600, 700, 0, 0, 300, 350); + this.endImageCapture(video); + canvas.toBlob((blob) => { + let newImg = document.createElement('img'); + let att = document.createAttribute("class"); + att.value = "user-image"; + newImg.setAttributeNode(att); + let url = URL.createObjectURL(blob); + + newImg.onload = () =>{ + URL.revokeObjectURL(url); + }; + + newImg.src = url; + document.body.appendChild(newImg); + const faceURL = document.querySelector('.user-image').src; + console.log(faceURL); + }) + // this.storeData(faceURL); + } + } + + captureImage() { + const video = document.querySelector('video'); + const canvas = document.querySelector('canvas'); + const ctx = canvas.getContext('2d'); + this.takeSnapshot(video, ctx, canvas); + } + + render() { + return ( +
+ + +
+ + +
+ ) + } +} diff --git a/app/components/ImageCapture/ImageCapture.test.js b/app/components/ImageCapture/ImageCapture.test.js new file mode 100644 index 0000000..e69de29 diff --git a/app/components/Instructions/Instructions.js b/app/components/Instructions/Instructions.js new file mode 100644 index 0000000..b9636ee --- /dev/null +++ b/app/components/Instructions/Instructions.js @@ -0,0 +1,7 @@ +import React from 'react'; + +export const Instructions = () => { + return ( +
Instructions go here
+ ) +} diff --git a/app/components/Instructions/Instructions.test.js b/app/components/Instructions/Instructions.test.js new file mode 100644 index 0000000..e69de29 diff --git a/app/components/Learn/Learn.js b/app/components/Learn/Learn.js new file mode 100644 index 0000000..e0ece28 --- /dev/null +++ b/app/components/Learn/Learn.js @@ -0,0 +1,7 @@ +import React from 'react'; + +export const Learn = () => { + return ( +
Learn goes here
+ ) +} diff --git a/app/components/Learn/Learn.test.js b/app/components/Learn/Learn.test.js new file mode 100644 index 0000000..e69de29 diff --git a/app/components/NavBar/NavBar.js b/app/components/NavBar/NavBar.js new file mode 100644 index 0000000..4765836 --- /dev/null +++ b/app/components/NavBar/NavBar.js @@ -0,0 +1,44 @@ +import React from 'react'; +import { NavLink } from 'react-router-dom'; + +export const NavBar = () => { + + const styleActive = () => { + return ( + { + fontWeight: 700, + color: 'rgba(246, 193, 160, 100)', + borderBottom: '4px solid rgba(246, 193, 160, 100)' + } + ) + } + + return ( + + ) +} diff --git a/app/components/NavBar/NavBar.test.js b/app/components/NavBar/NavBar.test.js new file mode 100644 index 0000000..e69de29 diff --git a/app/components/PickEmotion/PickEmotion.js b/app/components/PickEmotion/PickEmotion.js new file mode 100644 index 0000000..b6ab395 --- /dev/null +++ b/app/components/PickEmotion/PickEmotion.js @@ -0,0 +1,7 @@ +import React from 'react'; + +export const PickEmotion = () => { + return ( +
Pick Emotion goes here
+ ) +} diff --git a/app/components/PickEmotion/PickEmotion.test.js b/app/components/PickEmotion/PickEmotion.test.js new file mode 100644 index 0000000..e69de29 diff --git a/app/components/Play/Play.js b/app/components/Play/Play.js new file mode 100644 index 0000000..1066215 --- /dev/null +++ b/app/components/Play/Play.js @@ -0,0 +1,45 @@ +import React, { Component } from 'react'; +import { PickEmotion } from '../PickEmotion/PickEmotion'; +import ImageCapture from '../ImageCapture/ImageCapture'; +import { EmotionResults } from '../EmotionResults/EmotionResults'; + +export default class Play extends Component { + constructor() { + super() + this.state = { + emotions: {} + } + } + + analyzeEmotions(faceURL) { + fetch('https://westus.api.cognitive.microsoft.com/emotion/v1.0/recognize', { + method: 'POST', + header: { + 'Content-Type': 'application/json', + 'Ocp-Apim-Subscription-Key': '3119bdf7116e4afebc7b8d910aa343d9' + }, + body: `{'url': '${faceURL}'}` + }) + .then((response) => { + console.log('success'); + response.json(); + }) + .then((data) => { + const emotions = data.scores + this.setState({emotions: emotions}) + }) + .catch((error) => { + console.log('error retreiving emotion analysis: ', error); + }); + } + + render() { + return ( +
+ + + +
+ ) + } +} diff --git a/app/components/Play/Play.test.js b/app/components/Play/Play.test.js new file mode 100644 index 0000000..e69de29 diff --git a/app/index.js b/app/index.js index 6797d34..a5d0880 100644 --- a/app/index.js +++ b/app/index.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import { render } from 'react-dom' +import App from './components/App/App'; class Root extends Component { componentDidMount() { @@ -8,9 +9,9 @@ class Root extends Component { render() { return ( -
Hello World
+ ) } } -render(, document.getElementById('main')) +render(, document.getElementById('root')) diff --git a/index.html b/index.html index 681e597..e388534 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,16 @@ - + Title Goes Here + + + + emotican -
+
diff --git a/package.json b/package.json index 2e88191..0d656b4 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react-dom": "^15.4.2", "react-redux": "^5.0.2", "react-router": "^3.0.1", + "react-router-dom": "^4.1.1", "react-router-redux": "^4.0.7", "redux": "^3.6.0", "redux-thunk": "^2.2.0" diff --git a/src/controller.js b/src/controller.js index b057bd0..2851008 100644 --- a/src/controller.js +++ b/src/controller.js @@ -1,9 +1,20 @@ const request = require('request') -const API_KEY = // API KEY GOES HERE -const BASE_URL = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&type=restaurant&keyword=cruise&key=${API_KEY}` +const API_KEY = require('./key') +const BASE_URL = `https://westus.api.cognitive.microsoft.com/emotion/v1.0/recognize` +const IMAGE_URL = 'localhost:300/image' -function getPlaces(req, res, next) { - request(BASE_URL, function (error, response, body) { + +function getEmotionAnalysis(req, res, next) { + request({ + url: BASE_URL, + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Ocp-Apim-Subscription-Key': API_KEY + }, + body: JSON.stringify({url: IMAGE_URL}) + }, + function (error, response, body) { if (!error && response.statusCode == 200) { res.send(body) } @@ -11,5 +22,5 @@ function getPlaces(req, res, next) { } module.exports = { - getPlaces: getPlaces + getEmotionAnalysis: getEmotionAnalysis }; diff --git a/src/router.js b/src/router.js index d6978cf..fb618e7 100644 --- a/src/router.js +++ b/src/router.js @@ -2,6 +2,6 @@ var express = require('express'); var router = express.Router(); var controller = require('./controller'); -router.get('/places', controller.getPlaces) + router.post('/emotions', controller.getEmotionAnalysis) module.exports = router;