Scripts

bootstrap

Use the bootstrap command to bootstrap the packages found in the ./packages directory:

yarn bootstrap

build

Use the `build` command to build the packages found in the ./packages directory:

yarn build

clean

Use the clean command to clean the build artifacts created by “build.”

yarn clean

test

Use the `test` command to run the unit tests found in the packages in the ./packages directory:

yarn test

Dependencies

Use the lerna add command to add a dependency to one or more packages.

If a dependency is used by just one package, use the scope option to specify the correct package name. For example:

lerna add foo --scope=@piximi/bar

adds the `foo` package to the decencies of the `@piximi/bar` package.

If a dependency is used by more than one package, use the `scope` option to specify the correct packages and provide the `peer` option to specify that the package is a peer dependency. For example:

lerna add foo --peer --scope=@piximi/bar, @piximi/baz

adds the foo package to the peer dependencies of both the @piximi/bar and @piximi/baz package.

Install Lerna

We use lerna to organize our project. More in the packages section.

npm i -g lerna

1. Download the Repository

Get the latest master of Piximi from Github

git clone https://github.com/piximi/piximi

You successfully downloaded the newest branch of Piximi. Let's cd into it

cd ./piximi

2. Install all dependencies

Within the newly cloned repository run

yarn bootstrap

This will install all sub repositories which Piximi depend on. However, we still need to build a dist file for each package. This is done by running

yarn build

3. Run Piximi locally

Almost done! Go to the packages/piximi folder

cd ./packages/piximi

Let's run a local version of the most up-to-date Piximi branch

yarn start

👋 Hi there

This section will explain our workflow and vision, to get you kickstarted as fast as possible! Both technical and non-technical contributions are welcome and encouraged!

Technical Contributions

In addition to general-purpose programming tasks, there’re numerous tasks for anyone with expertise or an interest in computer graphics, computer vision, image processing, or machine learning.

Non-Technical Contributions

There’re also a number of areas that’d benefit from non-technical contributors too, including writing or improving documentation or translations, packaging example classifiers, and even providing user feedback (especially around problems in fields where current contributors lack familiarity).

Best place to start is here

Learn about our workflow

Frequently asked questions about development

💕 Thank you so

Thank you so much for trying to help us out with Piximi!

Ubuntu related question

Cannot start new app due to watch error (Error: watch ... ENOSPC)

The solution is to increase the limit of inotify watchers (, technical details: ):

Mission

The aim of Piximi’s multi-package organization is three-fold:

• maintain a DRY codebase;

• ensure generic interfaces between features; and

• simplify the bootstrapping process for new contributors.

DRY

If you find yourself duplicating code, it’s time to create a new package. Packages like @piximi/components, @piximi/store, and @piximi/types exemplify this habit. @piximi/store, for example, includes Redux actions for creating, updating, and deleting images that are used by multiple packages. Because each of these packages use the same @piximi/store actions, we can ensure the behavior between packages is consistent.

Organization

We use Yarn workspaces to organize our code into a modern mono repo () and lerna for handling the workspace ().

This repository includes both the Piximi web app (packages/piximi) and the handful of discrete @piximi sub-packages (packages/@piximi/*) written concurrently or alongside the web app. The packages included in the packages directory are versioned together and simultaneously published to the NPM package repository.

@piximi/components

Generic React components

@piximi/evaluate-classifier-dialog

Piximi’s EvaluateClassifierDialog component

@piximi/fit-classifier-dialog

Piximi’s FitClassifierDialog component

@piximi/gallery-dialog

Piximi’s GalleryDialog component

@piximi/help-dialog

Piximi’s HelpDialog component

@piximi/hooks

Generic React hooks

@piximi/image-viewer-dialog

Piximi’s ImageViewerDialog component

@piximi/models

Piximi’s TensorFlow.js models

@piximi/navigation-drawer

Piximi’s NavigationDrawer component

@piximi/open-example-classifier-dialog

Piximi’s OpenExampleClassifierDialog component

@piximi/send-feedback-dialog

Piximi’s SendFeedbackDialog component

@piximi/settings-dialog

Piximi’s SettingsDialog component

@piximi/store

Piximi’s Redux actions, reducers, selectors, and stores

@piximi/theme

Piximi’s Material UI theme

@piximi/translations

Piximi’s translations

@piximi/types

Piximi’s generic TypeScript definitions

@piximi/upload-image-dialog

Piximi’s UploadImageDialog component

piximi

The piximi web app

Working on a package

Maybe you just experienced a bug or you want to add a feature to Piximi.

Creating a new package

Storybook

Packages with React components should include a storybook command and a .storybook directory with an appropriate Storybook configuration.

Most packages will only have one story that corresponds to the package’s one exported component. For example, image-viewer-dialog has one story for the ImageViewerDialog component. Likewise, fit-classifier-dialog has one story for the FitClassifierDialog component. A noteworthy exception are packages that export more than one component, e.g. @piximi/components has a story for each of its exported components.

DEPRECATED

Outdated documentation -> see piximi/piximi

description: >- a free, open-source web app for annotating, training, and evaluating image understanding algorithms

Piximi

Piximi is a free, open source web app for performing image understanding tasks. It’s written by by dozens of engineers and scientists from institutions like the Biological Research Centre Szeged, Broad Institute of MIT and Harvard, Chan Zuckerberg Initiative, ETH Zurich, and FIMM Helsinki.

Piximi's target users are computational or non-computational scientists interested in image analysis from fields like astronomy, biology, and medicine.

How can I use it?

👉 Just put this in your browser: https://www.piximi.app/

Our design philosophy

• No installations

• Everything happens inside your browser, locally

• Intuitive and interactive web interface

• Cutting-edge machine learning just by clicking

How can I contribute?

I'm glad you asked! Our team needs you. So we created a how to start guide to explain you Piximi and how to develop on it!

Organization

Use the following directory structure for new React components:

Foo/Foo.css.ts
Foo/Foo.stories.tsx
Foo/Foo.test.tsx
Foo/Foo.tsx
Foo/index.ts

If your component has one or more child components, use the following directory structure:

Foo/Bar/Bar.css.ts
Foo/Bar/Bar.stories.tsx
Foo/Bar/Bar.test.tsx
Foo/Bar/Bar.tsx
Foo/Bar/index.ts
Foo/Foo/Foo.css.ts
Foo/Foo/Foo.stories.tsx
Foo/Foo/Foo.test.tsx
Foo/Foo/Foo.tsx
Foo/Foo/index.ts
Foo/index.ts

A component shouldn’t publicly export any of their child components. In the previous example, Foo/index.ts should only export Foo:

export { Foo } from "./Foo";

Cascading Style Sheets (CSS)

import {Theme} from "@material-ui/core";
import {createStyles} from "@material-ui/styles";

export const styles = ({ palette, spacing }: Theme) => createStyles({});