Run Piximi locally, the quick and easy way
We use lerna to organize our project. More in the packages section.
Get the latest master of Piximi from Github
You successfully downloaded the newest branch of Piximi. Let's cd into it
Within the newly cloned repository run
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
Piximi consists of independent sub-repositories found in piximi/packages/@piximi, We use lerna to manage all dependencies.
Almost done! Go to the packages/piximi folder
Let's run a local version of the most up-to-date Piximi branch
Please report any errors or issues you encounter in our tutorial to https://github.com/piximi/piximi-issues
Congratulations! You should see the newest version of Piximi running locally at: http://localhost:3000/
How we use React in Piximi
Use the following directory structure for new React components:
If your component has one or more child components, use the following directory structure:
A component shouldn’t publicly export any of their child components. In the previous example, Foo/index.ts should only export Foo:
Writing code for packages
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.
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.
We use Yarn workspaces to organize our code into a modern mono repo (10 min video tutorial: Yarn Workspace) and lerna for handling the workspace (10 min video tutorial: Lerna).
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.
Generic React components
Piximi’s EvaluateClassifierDialog component
Piximi’s FitClassifierDialog component
Piximi’s GalleryDialog component
Piximi’s HelpDialog component
Generic React hooks
Piximi’s ImageViewerDialog component
Piximi’s TensorFlow.js models
Piximi’s NavigationDrawer component
Piximi’s OpenExampleClassifierDialog component
Piximi’s SendFeedbackDialog component
Piximi’s SettingsDialog component
Piximi’s Redux actions, reducers, selectors, and stores
Piximi’s Material UI theme
Piximi’s translations
Piximi’s generic TypeScript definitions
Piximi’s UploadImageDialog component
The piximi web app
Maybe you just experienced a bug or you want to add a feature to Piximi.
Within a package we use storybook to work on UI components
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.
Please report all errors or issues you encounter in our tutorial to https://github.com/piximi/piximi-issues
An overview how to help
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!
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.
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).
Thank you so much for trying to help us out with Piximi!
Solutions to typical problems on development
The solution is to increase the limit of inotify watchers (https://stackoverflow.com/questions/22475849/node-js-what-is-enospc-error-and-how-to-solve/32600959#32600959, technical details: https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers#the-technical-details):
An overview of Scripts and Lerna
Use the bootstrap command to bootstrap the packages found in the ./packages directory:
Use the `build` command to build the packages found in the ./packages directory:
Use the clean command to clean the build artifacts created by “build.”
Use the `test` command to run the unit tests found in the packages in the ./packages directory:
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:
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:
adds the foo package to the peer dependencies of both the @piximi/bar and @piximi/baz package.