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

Home Page #503

Closed
wants to merge 6 commits into from
Closed

Home Page #503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 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
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/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/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.
276 changes: 276 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,276 @@
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);
}

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

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

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

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.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.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>
</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:[email protected]">
<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:[email protected]">
<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:[email protected]">
<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