Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Home Page #505

Open
wants to merge 8 commits into
base: user-dashboard
Choose a base branch
from
Open

Home Page #505

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d6b7a6d
Update index.js
sayamkanwar Dec 8, 2018
bef69b1
Add files via upload
sayamkanwar Dec 12, 2018
f5dd5db
Create home.js
sayamkanwar Dec 12, 2018
bef16fb
Update home.js
sayamkanwar Dec 12, 2018
2684a26
Create home_style.css
sayamkanwar Dec 12, 2018
e55fef0
Update index.html
sayamkanwar Dec 12, 2018
cffc91c
Update home.js
sayamkanwar Dec 13, 2018
bb46213
Add files via upload
sayamkanwar Dec 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
446 changes: 446 additions & 0 deletions ide/static/css/home_style.css
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added ide/static/img/Deshraj.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ide/static/img/Ram_Ramrakhya.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ide/static/img/Viraj_Prabhu.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ide/static/img/build.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ide/static/img/collab.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ide/static/img/export.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ide/static/img/facebook.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ide/static/img/folder.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ide/static/img/github.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ide/static/img/graphic1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ide/static/img/import.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ide/static/img/input.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ide/static/img/linkedin.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ide/static/img/logo_without_bg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ide/static/img/twitter.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ide/static/img/user 2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
375 changes: 375 additions & 0 deletions ide/static/js/home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,375 @@
import React from "react";
import { findDOMNode } from "react-dom";
import ReactTooltip from "react-tooltip";

class Home extends React.Component {
constructor(props) {
super(props);
this.scrollToAbout = this.scrollToAbout.bind(this);
this.scrollToFeatures = this.scrollToFeatures.bind(this);
this.scrollToTeam = this.scrollToTeam.bind(this);
this.showFirstRow = this.showFirstRow.bind(this);
this.showSecondRow = this.showSecondRow.bind(this);
}

scrollToAbout() {
this.refs.about.scrollIntoView({ behavior: "smooth" });
}

scrollToFeatures() {
this.refs.features.scrollIntoView({ behavior: "smooth" });
}

scrollToTeam() {
this.refs.team.scrollIntoView({ behavior: "smooth" });
}

showFirstRow() {
let slider = document.getElementsByClassName("slider")[0];
slider.style.left = "0";
let dot1 = document.getElementsByClassName("dot1")[0];
let dot2 = document.getElementsByClassName("dot2")[0];
let dot3 = document.getElementsByClassName("dot3")[0];
dot1.className = "dot1 active";
dot2.className = "dot2";
dot3.className = "dot3";
}

showSecondRow() {
let slider = document.getElementsByClassName("slider")[0];
slider.style.left = "-100%";
let dot1 = document.getElementsByClassName("dot1")[0];
let dot2 = document.getElementsByClassName("dot2")[0];
let dot3 = document.getElementsByClassName("dot3")[0];
dot1.className = "dot1";
dot2.className = "dot2 active";
dot3.className = "dot3";
}

render() {
return (
<div>
<div className="home-container">
<div className="header">
<img src="static/img/logo_without_bg.png" className="logo" />
<div className="links">
<a href="/accounts/signup/" id="signup">
Sign up
</a>
<a onClick={() => this.scrollToTeam()}>Team</a>
<a onClick={() => this.scrollToFeatures()}>Features</a>
<a onClick={() => this.scrollToAbout()}>About</a>
</div>
<div className="clear" />
</div>
<div className="first">
<div className="first-left">
<h1>Fabrik</h1>
<p>
Collaboratively build, visualize <br /> and design neural nets
in browser.
</p>
<br />
<a href="/" className="try">
Try it now!
</a>
</div>
<div className="first-right">
<img src="static/img/graphic1.png" />
</div>
<div className="clear" />
</div>
<div className="second" ref="about">
<h1>About</h1>
<center>
<div className="large-box">
<br />
<p>
<b>Fabrik</b> is an online collaborative platform to build,
visualize and train deep learning models via a simple
drag-and-drop interface. It allows researchers to collectively
develop and debug models using a web GUI that supports
importing, editing and exporting networks to popular
frameworks like Caffe, Keras, and TensorFlow.
</p>
</div>
</center>
</div>
<div className="third" ref="features">
<br />
<h1>Features</h1>
<center>
<div className="features">
<div className="slider" id="slider">
<div
onMouseOver={() => {
ReactTooltip.show(
findDOMNode(this.refs.load_model_from_zoo_text)
);
}}
onMouseOut={() => {
ReactTooltip.hide(
findDOMNode(this.refs.load_model_from_zoo_text)
);
}}
className="box"
>
{/* eslint-disable max-len */}
<p
className="tooltip-txt"
ref="load_model_from_zoo_text"
data-tip="You can choose a model from a variety of models located in the model zoo belonging to different categories such as Recognition, Detection, Retrieval, Seq2Seq, Captioning and Segmentation."
/>
{/* eslint-enable max-len */}
<ReactTooltip />
<img src="static/img/folder.png" />
<p>Load Model From Zoo</p>
<div className="line" id="line_model_zoo" />
</div>
<div
onMouseOver={() => {
ReactTooltip.show(
findDOMNode(this.refs.load_model_from_input)
);
}}
onMouseOut={() => {
ReactTooltip.hide(
findDOMNode(this.refs.load_model_from_input)
);
}}
className="box"
>
{/* eslint-disable max-len */}
<p
className="tooltip-txt"
ref="load_model_from_input"
data-tip="You can choose a model from a variety of models located in the model zoo belonging to different categories such as Recognition, Detection, Retrieval, Seq2Seq, Captioning and Segmentation."
/>
{/* eslint-enable max-len */}
<ReactTooltip />
<img src="static/img/input.png" />
<p>Load Model From Input</p>
<div className="line" id="line_load_model_from_input" />
</div>
<div
onMouseOver={() => {
ReactTooltip.show(findDOMNode(this.refs.build_model));
}}
onMouseOut={() => {
ReactTooltip.hide(findDOMNode(this.refs.build_model));
}}
className="box"
>
{/* eslint-disable max-len */}
<p
className="tooltip-txt"
ref="build_model"
data-tip="There are many built-in components called layers which can be used to build a neural net by simply clicking them to add them into the canvas. The layers are grouped into categories such as Data, Vision, Recurrent, Utitlity, Activation/Neuron, Normalization, Common, Noise, Loss and Wrapper."
/>
{/* eslint-enable max-len */}
<ReactTooltip />
<img src="static/img/build.png" />
<p>Build Model</p>
<div className="line" id="line_build_model" />
</div>
<div
onMouseOver={() => {
ReactTooltip.show(findDOMNode(this.refs.export_model));
}}
onMouseOut={() => {
ReactTooltip.hide(findDOMNode(this.refs.export_model));
}}
className="box"
>
{/* eslint-disable max-len */}
<p
className="tooltip-txt"
ref="export_model"
data-tip="You can export your model in any of the three frameworks. On exporting your model, the model file is downloaded into your local system which you can use to import your model into the canvas."
/>
{/* eslint-enable max-len */}
<ReactTooltip />
<img src="static/img/export.png" />
<p>Export Model</p>
<div className="line" id="line_export_model" />
</div>
<div
onMouseOver={() => {
ReactTooltip.show(findDOMNode(this.refs.import_model));
}}
onMouseOut={() => {
ReactTooltip.hide(findDOMNode(this.refs.import_model));
}}
className="box"
>
{/* eslint-disable max-len */}
<p
className="tooltip-txt"
ref="import_model"
data-tip="You can select your model file from your local system to load it into the canvas and then you can edit it and also perform other actions like share, export."
/>
{/* eslint-enable max-len */}
<ReactTooltip />
<img src="static/img/import.png" />
<p>Import Model</p>
<div className="line" id="line_import_model" />
</div>
<div
onMouseOver={() => {
ReactTooltip.show(
findDOMNode(this.refs.real_time_collaboration)
);
}}
onMouseOut={() => {
ReactTooltip.hide(
findDOMNode(this.refs.real_time_collaboration)
);
}}
className="box"
>
{/* eslint-disable max-len */}
<p
className="tooltip-txt"
ref="real_time_collaboration"
data-tip="You can work collaboratively with other people, with whom the model is shared, in real time. All the edits that are made will be reflected to everyone who are working on the model."
/>
{/* eslint-enable max-len */}
<ReactTooltip />
<img src="static/img/collab.png" />
<p>Real Time Collaboration</p>
<div className="line" id="line_real_time_collaboration" />
</div>
</div>
<div className="dots">
<a onClick={() => this.showFirstRow()}>
<div className="dot1 active" />
</a>
<a onClick={() => this.showSecondRow()}>
<div className="dot2" />
</a>
</div>
</div>
</center>
<br />
</div>
<div className="fourth" ref="team">
<h1>Team</h1>
<center>
<div className="members">
<br />
<div className="member">
<img src="static/img/Deshraj.png" />
<p>Deshraj</p>
<p className="social-icons">
<a href="http://deshraj.xyz">
<span
className="glyphicon glyphicon-user"
aria-hidden="true"
/>
</a>
<a href="mailto:deshrajdry@gmail.com">
<span
className="glyphicon glyphicon-envelope"
aria-hidden="true"
/>
</a>
</p>
</div>
<div className="member">
<img src="static/img/Ram_Ramrakhya.jpg" />
<p>Ram Ramrakhya</p>
<p className="social-icons">
<a href="http://github.com/Ram81">
<span
className="glyphicon glyphicon-user"
aria-hidden="true"
/>
</a>
<a href="mailto:ramramrakhya81@gmail.com">
<span
className="glyphicon glyphicon-envelope"
aria-hidden="true"
/>
</a>
</p>
</div>
<div className="member">
<img src="static/img/user 2.png" />
<p>Utsav Garg</p>
<p className="social-icons">
<a href="#">
<span
className="glyphicon glyphicon-user"
aria-hidden="true"
/>
</a>
<a href="#">
<span
className="glyphicon glyphicon-envelope"
aria-hidden="true"
/>
</a>
</p>
</div>
<div className="member">
<img src="static/img/Viraj_Prabhu.png" />
<p>Viraj Prabhu</p>
<p className="social-icons">
<a href="http://virajprabhu.github.io">
<span
className="glyphicon glyphicon-user"
aria-hidden="true"
/>
</a>
<a href="mailto:virajp@gatech.edu">
<span
className="glyphicon glyphicon-envelope"
aria-hidden="true"
/>
</a>
</p>
</div>
</div>
</center>
</div>
<div className="footer">
<br />
<center>
<div className="footer-content">
<div className="footer-content-left">
<p>Fabrik</p>
<p className="sub-txt">
Collaboratively build, visualize <br /> and design neural
nets in browser
</p>
<p className="sub-txt">
<span>©</span> CloudCV
</p>
</div>
<div className="footer-content-right">
<div className="icons">
<a href="https://github.com/Cloud-CV/Fabrik">
<img src="static/img/github.png" />
</a>
<a href="https://www.facebook.com/mlcloudcv">
<img src="static/img/facebook.png" />
</a>
<a href="https://www.linkedin.com/company/cloudcv">
<img src="static/img/linkedin.png" />
</a>
<a href="https://twitter.com/project_cloudcv">
<img src="static/img/twitter.png" />
</a>
</div>
</div>
<div className="clear" />
</div>
</center>
</div>
</div>
</div>
);
}
}

export default Home;
2 changes: 2 additions & 0 deletions ide/static/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@ import React from 'react';
import { render } from 'react-dom';
import { Router, Route, hashHistory } from 'react-router';
import App from './app.js';
import Home from './home.js';
import '../css/style.css';

render(
<Router history={hashHistory}>
<Route path="/" component={App} />
<Route path="/home" component={Home} />
</Router>, document.getElementById('app')
);
1 change: 1 addition & 0 deletions ide/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/static/css/searchbar_style.css">
<link rel="stylesheet" type="text/css" href="/static/css/home_style.css">
<link rel="stylesheet" type="text/css" href="/static/css/login_style.css">

<!-- Global site tag (gtag.js) - Google Analytics -->
Expand Down