Zeplin ML

Object detection from Zeplin projects based on machine learning

Overview

A project using TensorFlow JS to create the spell check of design systems, that helps designers by keep-watching numerous design elements instead of humans. The best way to illustrate this is to see it in action via the animation below:

Demo (Youtube)

Prerequirements

Item	Description
Zeplin Dev App	A Zeplin Dev app forms the connection between your app and Zeplin API. Create an App on the Zeplin Developers tab.
Heroku account (optional)	Heroku is a cloud service that lets you deploy and serve web apps. You don't need a Heroku account if you're deploying the app on another platform.

Customize the app and deploy it on Heroku

Follow the below instructions to deploy your customized app using Heroku and Node.js.

Install the app on your local machine

1. Make sure you have the following installed.

   • Git
   • Node.js
   • Items listed here

2. Clone this GitHub repository.

   $ git clone https://github.com/dusskapark/zeplin-ml

3. cd into zeplin-ml directory.

4. Install the dependencies by running:

   $ yarn 

Link your local repository to Heroku

1. Log in to Heroku from the command line.

   $ heroku login

2. Create a named Heroku app.

   $ heroku create {Heroku app name}

3. Take a note of your app's URL (https://{Heroku app name}.herokuapp.com). You'll need it when you add the app to Zeplin.

4. Add a remote for Heroku to your local repository.

   $ heroku git:remote -a {Heroku app name}

Add your app to Zeplin API

1. Follow the instructions on the page Getting Started with Zeplin API.
2. Take a note of your Zeplin App ID and Secret, because you'll need it for the next part.
3. Locate the Developer tab and click the Manage details button.
4. Enter your app's URL (https://{Heroku app name}.herokuapp.com) and
5. Click the Update button and publish the Zeplin app.

Customize and deploy the app

1. Set your Zeplin Client ID, Secret, RedirectUri using an environment variable.

   $ heroku config:set REACT_APP_ZEPLIN_CLIENT_ID={YOUR ZEPLIN CLINET ID}
   $ heroku config:set REACT_APP_ZEPLIN_CLIENT_SECRET={YOUR ZEPLIN CLINET SECRET}
   $ heroku config:set REACT_APP_APP_URL={YOUR APP URL}

2. Copy your environment variable into the .env file for local testing.

   Heroku recommends setting up an .env file to use an environment variable in a local environment.

   $ heroku config:get REACT_APP_ZEPLIN_CLIENT_ID REACT_APP_ZEPLIN_CLIENT_SECRET REACT_APP_APP_URL -s  >> .env

   Note: Don't commit the .env file to GitHub. To exclude it, add the .env file to your .gitignore.

3. Replace the REACT_APP_APP_URL on .env with http://localhost:5000/ for testing locally

4. Run the app locally to preview your changes:

   $ heroku local

   View the app by browsing to localhost:5000.

5. If you're happy with your changes, stage, commit, and deploy the app.

   $ git add .
   $ git commit -m "My first commit"
   $ git push heroku master

6. Browse to your app's URL (https://{Heroku app name}.herokuapp.com) and confirm that your app is operational.

7. Lastly, check whether your channel status is Published.

Checking logs

To get more information, you can check your app's logs using Heroku's GUI or Heroku CLI.

Check your app's logs using Heroku's GUI

To get more information, check your app's logs online:

1. In Heroku, go to Dashboard.
2. Select the app you just created.
3. In the top-right corner, click More.
4. Click View logs.

You'll find the log under Application Logs.

Check your app's logs using Heroku CLI

1. Log in to Heroku from the command line (if you haven't already).

   $ heroku login

2. Check the logs.

   $ heroku logs --app {Heroku app name} --tail

Support Zeplin-ML

If you have a question or a suggestion or found a bug, please tell us using the issue tracker of this project. Also We'd love to have your Pull Request for helping Zeplin-ML!

References

Please note that this project was created with the help of the following projects.

• Zeplin Slides
• TFJS-object-detection

License

This project is licensed under the terms of the MIT.