Piximi pr 660

.gitattributes

@@ -0,0 +1,2 @@
+# SCM syntax highlighting & preventing 3-way merges
+pixi.lock merge=binary linguist-language=YAML linguist-generated=true

.gitignore

@@ -20,3 +20,12 @@ yarn-error.log*
 package-lock.json
 stories
 .storybook
+conf.py
+
+# pixi environments
+.pixi
+*.egg-info
+pixi.toml
+.gitattributes
+pixi.lock
+_build

piximi-documentation/_static/style.css

@@ -1,49 +1,97 @@
 .text-img {
-    height: 1.5em;
-    padding-right: 0.5em;
+  height: 1.5em;
+  padding-right: 0.5em;
 }
 
 .annotation-gif {
-  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px;
+  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px,
+    rgba(45, 35, 66, 0.3) 0 7px 13px -3px;
   border-radius: 10px;
 }
 
 .img-shadow {
-  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px;
+  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px,
+    rgba(45, 35, 66, 0.3) 0 7px 13px -3px;
   border-radius: 10px;
 }
 
 .piximi-btn {
-  font-size: 1.5rem;  
+  font-size: 1.25rem;
   align-items: center;
-  background-color: #FCFCFD;
   border-radius: 8px;
-  border-width: 0;
-  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px;
-  color: black !important;
+  border: 1px solid #02aec5;
+  color: #02aec5 !important;
   display: inline-flex;
   margin-top: 1rem;
-  margin-left: 2rem;
+  margin-inline: auto;
   padding: 1rem;
   text-align: center;
   text-decoration: none;
-  transition: box-shadow .15s,transform .15s;
+  transition: box-shadow 0.15s, transform 0.15s;
   touch-action: manipulation;
-  will-change: box-shadow,transform;
+  will-change: box-shadow, transform;
   outline: none;
 }
 
 .piximi-btn:focus {
-  box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px;
+  box-shadow: #d6d6e7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px,
+    rgba(45, 35, 66, 0.3) 0 7px 13px -3px;
 }
 
 .piximi-btn:hover {
-  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px;
+  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px,
+    rgba(45, 35, 66, 0.3) 0 7px 13px -3px;
   transform: translateY(-2px);
   text-decoration: none;
 }
 
 .piximi-btn:active {
-  box-shadow: #D6D6E7 0 3px 7px inset;
+  box-shadow: #d6d6e7 0 3px 7px inset;
   transform: translateY(2px);
-}
+}
+
+.horiz-button-group {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  gap: 1rem;
+}
+
+.theme-img {
+  display: none;
+}
+
+.content-img {
+  border-radius: 8px;
+  border: 1px solid #d1d5da;
+}
+
+/* Show light image only in light theme */
+html[data-theme="light"] .light-img {
+  display: block;
+}
+
+/* Show dark image only in dark theme */
+html[data-theme="dark"] .dark-img {
+  display: block;
+}
+
+.centered-stack {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.grid-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+  color: red;
+}
+
+.translate {
+  color: red;
+}

piximi-documentation/_toc.yml

@@ -1,28 +1,35 @@
 format: jb-book
 root: intro
 parts:
-- caption: Piximi Views
-  chapters:
-  - file: main-menu
-  - file: annotation-guide
-  - file: segmentation
-  - file: classification
-  - file: measurements
-- caption: Tutorials
-  chapters:
-  - file: translocation_tutorial
-  - file: translocation_tutorial_ES
-  - file: translocation_tutorial_pt_BR
-  - file: classify-example-eukaryotic-image
-  - file: classify-example-eukaryotic-object
-- caption: How-to Guides
-  chapters:
-  - file: create-cell-crops-with-cellprofiler
-  - file: PiximiConverter.ipynb
-- caption: Technical information
-  chapters:
-  - file: hyperparameters
-  - file: technical-faq
-  - file: work-in-progress
-  - file: example-datasets
-  - file: citing-piximi
+  - caption: Quick Start
+    chapters:
+      - file: quick-start
+  - caption: Piximi Views
+    chapters:
+      - file: pages/detail/projectviewer
+        sections:
+          - file: pages/detail/projectviewer-classification
+          - file: pages/detail/projectviewer-segmentation
+      - file: pages/detail/imageviewer
+        sections:
+          - file: pages/detail/imageviewer-tools-annotation
+      - file: pages/detail/measurements-viewer
+  - caption: Tutorials
+    chapters:
+      - file: pages/tutorial/translocation_tutorial
+      - file: pages/tutorial/translocation_tutorial_ES
+      - file: pages/tutorial/translocation_tutorial_pt_BR
+      - file: pages/tutorial/creating-measurements
+      - file: pages/tutorial/classify-example-eukaryotic-image
+      - file: pages/tutorial/segmentation-tutorial
+  - caption: How-to Guides
+    chapters:
+      - file: pages/how-to/create-cell-crops-with-cellprofiler
+      - file: pages/how-to/PiximiConverter.ipynb
+  - caption: Technical information
+    chapters:
+      - file: pages/technical/hyperparameters
+      - file: pages/technical/technical-faq
+      - file: pages/technical/work-in-progress
+      - file: pages/technical/example-datasets
+      - file: pages/technical/citing-piximi

piximi-documentation/intro.md

@@ -1,39 +1,68 @@
+# Piximi: Images to Discovery
 
-# Images to Discovery
+Piximi is an open-source, browser-based platform for interactive bioimage analysis. Designed for accessibility and flexibility, Piximi enables users to perform advanced image processing tasks without requiring any installation or deep machine learning expertise. Built with researchers and biologists in mind, it provides a user-friendly interface for annotation, segmentation, classification, and quantitative measurement of microscopy images.
 
-Piximi is an application that runs entirely from your browser and requires no installation and minimal setup. Our vision for Piximi is to provide an intuitive application for the annotation, segmentation, classification and measurement of images. In this current release, Piximi allows users to annotate specific regions of your images, such as nuclei, and can also use deep learning to classify your images into distinct groups.
+---
 
-<!-- ![piximi-workflow](./img/piximi-workflow.png) -->
+## Key Features
 
+**Browser-Based**
 
-<a class='piximi-btn' href="https://www.piximi.app/" target="_blank"><img class="text-img" src="./img/piximi_logo_icon.png">  Launch Piximi here</a>
+No installation, no dependencies, no compatibility issues. Run Piximi directly in your browser, on any platform.
 
-[Watch a Piximi tutorial on YouTube](https://youtu.be/-wjUxc4ZHCc?si=sB-Z2EnBtjd-PP_j)
+**Privacy-Preserving**
 
-```{admonition} Known issues
-:class: warning
+All data stays on your machine. Piximi processes images entirely client-side—ideal for working with sensitive or patient-derived datasets.
 
-Piximi is an active work in progress. [Click here to see the known issues we're working on](work-in-progress).
-```
+**Integrated Image Analysis Pipeline**
+
+Piximi supports the full Images-to-Discovery workflow:
+
+- Annotation: Draw and label regions of interest manually.
+- Segmentation: Automatically identify and isolate objects within images using AI models.
+- Classification: Assign labels to segmented objects using customizable classifiers.
+- Measurement: Quantify object features and export results for downstream analysis.
+
+**No-Code AI**
+
+Apply and train machine learning models visually. Piximi abstracts complex AI concepts through guided tools, allowing non-specialists to harness their power effectively.
 
+**Open Source & Extensible**
 
-## The Piximi Annotator
+Hosted on GitHub. Actively developed with a modular architecture supporting collaboration, feature requests, and custom extensions.
 
-![intro-annotator](./img/intro-annotator.png)
+---
 
-The annotator within Piximi allows you to intuitively create annotations on your image of choice using a variety of tools. These tools include manual pen annotations in addition to more automatic methods with quick annotation. The Piximi annotator also works with **multichannel** and **multiplane** images, both of which can be easily selected to make sure that annotations are placed where they need to be. In future releases, we aim to also include z-plane interpolation to make annotating in 3D even easier.
+## Who Is It For?
 
-## The Piximi Classifier
+Piximi is built for:
 
-By using deep learning, Piximi can classify images of a variety of subject matter, such as bacteria, cultured cells, insects and more. The power of deep learning is applied upon a small number of images that have been categorized by the user in Piximi which then gives the computer a starting point on understanding what a particular category of image looks like. For example, the user can teach the computer what cells in G1, S, G2 or M-phases of the cell cycle look like. These user-made categorizations are then intensely examined by the deep learning model within Piximi through a process known as training. During this training process, the deep learning model finds patterns in the data in order to link the input (an image added by the user) to an output (the category, or class, defined by the user). The trained deep learning model can then predict on uncategorized images and determine which class they belong to. In the aforementioned example, this would determine which stage of the cell cycle a particular cell is in without relying on user input.
+- Biologists and life science researchers with no programming background
+- Educators teaching image analysis and machine learning concepts
+- Developers looking to integrate client-side AI tools into scientific workflows
 
-Ultimately, Piximi offers users a way to have a highly customizable method of classifying large image sets across a range of subject matter by learning from annotations made by the user.
+---
 
-## Piximi Next Steps
+## Documentation Overview
 
-Piximi is a work in progress and currently features an image annotator and deep learning-based classification of images. The ultimate aim of Piximi is to provide users with an intuitive application for the annotation, segmentation, classification and measurement of information present in images. In this phase of Piximi, we have released the annotator and classifier as these are important first steps in preparing to add the segmentation and measurement functionalities.
+This documentation provides:
+
+- Step-by-step guides for common workflows
+- Explanations of available tools and settings
+- Descriptions of underlying models and their usage
+- Glossary of key technical terms
+- Contribution and support information
+
+```{admonition} Active Development
+:class: warning
+
+Piximi is in active development. Features and UI/UX may be added, removed, or updated. [Click here to see known issues and planned features](pages/technical/work-in-progress).
+```
 
-We are developing Piximi in the open. If you have any features that you think that you would like to see in Piximi, please create a discussion in [our Piximi Github repo](https://github.com/piximi/piximi/discussions).
+<div class="horiz-button-group">
+<a class='piximi-btn' href="https://www.piximi.app/" target="_blank">Launch Piximi</a>
+<a class='piximi-btn' href="https://youtu.be/-wjUxc4ZHCc?si=sB-Z2EnBtjd-PP_j" target="_blank">Tutorial (YouTube)</a>
+</div>
 
 <!-- Table on contents directive prints the ToC -->
 <!-- ```{tableofcontents}