christianversloot / zenml-dashboard

The repository that contains all source code for the ZenML UI.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


ZenML Logo

Open-source companion dashboard for ZenML.

Build portable, production-ready MLOps pipelines.

Join our Slack Slack Community and be part of the ZenML family.

Features · Roadmap · Report Bug · Vote New Features · Read Blog · Meet the Team


⚡ Getting Started

🔋 Installation

To get started with the ZenML Dashboard, follow these steps:

  1. Install Node.js (v18):

    • Ensure you have Node.js installed. You can either install version 18 directly or use nvm (Node Version Manager) with the following commands:

      nvm install 18
      nvm use 18
  2. Install Yarn:

    • The project uses Yarn as the package manager. Install it with:

      npm install -g yarn
  3. Install Dependencies:

    • Navigate to the project directory and install dependencies:

      yarn install
  4. Set Environment Variable:

    • Configure the environment variable REACT_APP_BASE_API_URL by replacing <YOUR_ZENML_SERVER_DEPLOYMENT_URL> with your ZenML Server deployment URL. Example:

      export REACT_APP_BASE_API_URL="https://your-zenml-server-url/api/v1"
  5. Run Development Server:

    • For development, run the server with:

      yarn start
    • Alternatively, build the project for production with:

      yarn build
  6. Using Docker (Optional):

    • ZenML provides Docker images for the server and dashboard. Run the following command to serve both:

      docker run -it -d -p 8080:80 zenmldocker/zenml-server
    • Access the dashboard at http://localhost:8080 with the username default and an empty password.

For detailed deployment instructions and additional options, refer to the deployment guide.

Now you're ready to explore and visualize your ML pipelines, stacks, and artifacts with the ZenML Dashboard!

🤝 ZenML Dashboard Integration

The ZenML Dashboard is a Javascript React-based application designed to seamlessly integrate with the main ZenML Python package. It serves as a unified platform for managing and visualizing your ML pipelines, stacks, and artifacts in one centralized location.

Integration Overview

The ZenML Dashboard is intricately connected with the ZenML Server as its backend and is not intended for standalone use. Here's a brief overview of how it fits into the ZenML ecosystem:

  • Sister Repository:

  • Bundled Build Files:

    • The dashboard build files are bundled into the ZenML PyPi package and are included with each version of the ZenML Python package. These build files, generated by yarn build, correspond to specific versions of the dashboard.
  • Local Deployment:

    • Serve the static build files locally using the ZenML Python package:

      zenml up

      This creates a local daemon that serves the files in a FastAPI server.

🪐 Deploying the dashboard

You can deploy this dashboard on supported cloud providers with ZenML python package by using the command:

zenml deploy

The above command deploys the dashboard in the same process as the ZenML Server and automates a lot of the nitty-gritty for you.

However, the option to deploy standalone is also available. yarn build creates a build directory with a production build of the dashboard. Set up your favorite HTTP server so that a visitor to your site is served index.html. Here are 8 ways to deploy a React app for free as a starting point.

Just don't forget to set the REACT_APP_BASE_API_URL environment variable!

🏄 User Experience

🔐 Log In

Logging into the ZenML Dashboard is a simple process. Navigate to the login page and enter your credentials.

🏠 Home Page

Once logged in, you'll be directed to the dashboard's home page. This page provides an overview of your projects, pipelines, and recent activities.

🗂 Pipelines, Stacks, Components and other resources

Explore your machine learning artifacts effortlessly. The dashboard offers a structured view of your pipelines, stacks, components, etc... making it easy to manage and visualize your workflows.

This combination of a user-friendly interface and visualizations enhances your experience, helping you navigate and understand your machine learning processes efficiently.

🙌 Contributing

We would love to develop ZenML together with our community! The best way to get started is to select any issue from the good-first-issue label.

If you would like to contribute, please review our Contributing Guide for all relevant details.

👩‍👩‍👧‍👦 Meet the Team

Get to know the faces behind ZenML. Our dedicated team is passionate about creating tools that empower your machine learning journey.

Meet the Team

Every week, the ZenML core team spends 30 minutes interacting directly with the community. This time may involve feature presentations, Q&A sessions, or just casual discussions.

Register now for the ZenML Meet the Community session. It's free and open to everyone.

You can also subscribe to our public events calendar to stay informed about upcoming community gatherings.

Join us and become part of the ZenML community!

🆘 Getting Help

Need a helping hand? We've got you covered! Getting assistance with ZenML is quick and easy.

  1. Join our Slack Community:

    • Our lively Slack community is buzzing with friendly faces and helpful discussions. Drop by, ask questions, and connect with fellow enthusiasts. Get your invite.
  2. Open an Issue:

    • Have a specific problem or found a bug? Open an issue on our GitHub repo. Our team and community members regularly monitor and respond.
  3. Check the Documentation:

    • Explore our comprehensive documentation for in-depth guides, tutorials, and troubleshooting tips. It's a treasure trove of knowledge to empower your ZenML journey.

📜 License

ZenML Dashboard is distributed under the terms of the Apache License Version 2.0. A complete version of the license is available in the LICENSE file in this repository. Any contribution made to this workspace will be licensed under the Apache License Version 2.0.

About

The repository that contains all source code for the ZenML UI.

License:Apache License 2.0


Languages

Language:TypeScript 92.9%Language:SCSS 5.2%Language:CSS 1.3%Language:JavaScript 0.5%Language:HTML 0.1%Language:Shell 0.0%