├── .github └── workflows │ └── mlflow-js.yaml ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── mlflow-site ├── .eslintrc.json ├── .gitignore ├── README.md ├── next.config.mjs ├── package-lock.json ├── package.json ├── postcss.config.mjs ├── public │ └── assets │ │ ├── GithubLogo.png │ │ ├── LinkedInLogo.png │ │ ├── MLflow-js-logo.png │ │ ├── Mlflow-js-symbol.png │ │ ├── austinpfp.png │ │ ├── imageNotFound.jpg │ │ ├── kylerpfp.png │ │ ├── mlflow-js-logo-whitebg.png │ │ ├── mlflow-ui-screenshot-new.png │ │ ├── stephanypfp.png │ │ ├── winstonpfp-square.png │ │ └── yiqun.png ├── src │ └── app │ │ ├── components │ │ ├── Button.tsx │ │ ├── Demo.tsx │ │ ├── DemoCard.tsx │ │ ├── FeatureCard.tsx │ │ ├── Features.tsx │ │ ├── Headline.tsx │ │ ├── Method.tsx │ │ ├── MethodBar.tsx │ │ ├── MethodRequest.tsx │ │ ├── NavBar.tsx │ │ ├── Team.tsx │ │ └── TeamCard.tsx │ │ ├── documentation │ │ ├── documentation.css │ │ └── page.tsx │ │ ├── favicon.ico │ │ ├── fonts │ │ ├── GeistMonoVF.woff │ │ └── GeistVF.woff │ │ ├── globals.css │ │ ├── layout.tsx │ │ └── page.tsx ├── tailwind.config.ts └── tsconfig.json └── mlflow ├── .gitignore ├── Dockerfile ├── LICENSE ├── README.md ├── docker-compose-test.yml ├── docker-compose.yml ├── docs ├── code-standards.md └── tech-design-doc.md ├── eslint.config.mjs ├── examples ├── LinearRegressionExample.js └── NeuralNetworkHyperparameterTuning.js ├── jest.config.ts ├── lib ├── index.d.ts ├── index.js ├── index.js.map ├── mlflow.d.ts ├── mlflow.js ├── mlflow.js.map ├── model-registry │ ├── ModelRegistryClient.d.ts │ ├── ModelRegistryClient.js │ ├── ModelRegistryClient.js.map │ ├── ModelVersionClient.d.ts │ ├── ModelVersionClient.js │ └── ModelVersionClient.js.map ├── tracking │ ├── ExperimentClient.d.ts │ ├── ExperimentClient.js │ ├── ExperimentClient.js.map │ ├── RunClient.d.ts │ ├── RunClient.js │ └── RunClient.js.map ├── utils │ ├── apiError.d.ts │ ├── apiError.js │ ├── apiError.js.map │ ├── apiRequest.d.ts │ ├── apiRequest.js │ ├── apiRequest.js.map │ ├── interface.d.ts │ ├── interface.js │ └── interface.js.map └── workflows │ ├── ExperimentManager.d.ts │ ├── ExperimentManager.js │ ├── ExperimentManager.js.map │ ├── ModelManager.d.ts │ ├── ModelManager.js │ ├── ModelManager.js.map │ ├── RunManager.d.ts │ ├── RunManager.js │ └── RunManager.js.map ├── package-lock.json ├── package.json ├── src ├── index.ts ├── mlflow.ts ├── model-registry │ ├── ModelRegistryClient.ts │ └── ModelVersionClient.ts ├── tracking │ ├── ExperimentClient.ts │ └── RunClient.ts ├── utils │ ├── apiError.ts │ ├── apiRequest.ts │ └── interface.ts └── workflows │ ├── ExperimentManager.ts │ ├── ModelManager.ts │ └── RunManager.ts ├── tests ├── ExperimentClient.test.ts ├── ExperimentManager.test.ts ├── ModelManager.test.ts ├── ModelRegistryClient.test.ts ├── ModelVersionClient.test.ts ├── RunClient.test.ts ├── RunManager.test.ts └── testUtils.ts ├── tsconfig.json └── tsconfig.test.json /.github/workflows/mlflow-js.yaml: -------------------------------------------------------------------------------- 1 | name: mlflow 2 | on: 3 | pull_request: 4 | branches: 5 | - main 6 | - dev 7 | 8 | jobs: 9 | build-and-test: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - name: Checkout code 13 | uses: actions/checkout@v4 14 | 15 | - name: Use Node.js 16 | uses: actions/setup-node@v4 17 | with: 18 | node-version: '22.7' 19 | 20 | - name: Install dependencies 21 | working-directory: ./mlflow 22 | run: npm ci 23 | 24 | - name: Eslint 25 | working-directory: ./mlflow 26 | run: npm run lint 27 | 28 | - name: Set up Docker Buildx 29 | uses: docker/setup-buildx-action@v3 30 | 31 | - name: Run MLflow server 32 | run: | 33 | docker run -d -p 5002:5002 --name mlflow-container ghcr.io/mlflow/mlflow:latest mlflow server --host 0.0.0.0 --port 5002 34 | sleep 30 35 | 36 | - name: Run tests 37 | working-directory: ./mlflow 38 | run: npm run test 39 | 40 | - name: Stop MLflow server 41 | run: docker stop mlflow-container 42 | 43 | - name: Build 44 | working-directory: ./mlflow 45 | run: npm run build 46 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution Guidelines 2 | 3 | We are always open to accepting any potential contributions. Here is how you can contribute: 4 | 5 | 1. Fork the repository 6 | 2. Clone your forked repository 7 | 8 | ```bash 9 | git clone https://github.com/your-username/repository-name.git 10 | ``` 11 | 12 | 3. Create your feature branch 13 | 14 | ```bash 15 | git checkout -b feature/AmazingFeature 16 | ``` 17 | 18 | 4. Install dependencies for both mlflow and mlflow-site directories 19 | 20 | ```bash 21 | cd /mlflow && npm install 22 | cd ../mlflow-site && npm install 23 | ``` 24 | 25 | 5. Start the MLflow Tracking Server 26 | 27 | ```bash 28 | cd ../mlflow && npm run docker 29 | ``` 30 | 31 | This will launch the MLflow UI on your local machine at `http://localhost:5001`. 32 | 33 | 6. Make your changes 34 | 35 | 7. Run ESLint to check code style 36 | 37 | ```bash 38 | npm run lint 39 | ``` 40 | 41 | 8. Run tests to ensure your changes don't break existing functionality 42 | 43 | (Make sure you have mlflow UI server running on port 5002. We set 5002 as our default port for testing.) 44 | 45 | ```bash 46 | cd /mlflow && npm run dockerTest # Run this in a separate terminal 47 | npm run test 48 | ``` 49 | 50 | This will launch the MLflow UI on your local machine at `http://localhost:5002`, and run the Jest tests. 51 | 52 | 9. Add and commit your changes 53 | 54 | If the tests all pass: 55 | 56 | ```bash 57 | git add . 58 | git commit -m 'Add AmazingFeature' 59 | ``` 60 | 61 | 10. Push to the branch 62 | 63 | ```bash 64 | git push origin feature/AmazingFeature 65 | ``` 66 | 67 | 11. Open a Pull Request 68 | 69 | **Note:** Please ensure your code adheres to our style guidelines and includes appropriate documentation for any new features. 70 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Open Source Labs Beta 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /mlflow-site/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /mlflow-site/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | ../.DS_Store 22 | *.pem 23 | 24 | # debug 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | 29 | # local env files 30 | .env*.local 31 | 32 | # vercel 33 | .vercel 34 | 35 | # typescript 36 | *.tsbuildinfo 37 | next-env.d.ts 38 | -------------------------------------------------------------------------------- /mlflow-site/README.md: -------------------------------------------------------------------------------- 1 | ## Getting Started 2 | 3 | First, run the development server: 4 | 5 | ```bash 6 | npm run dev 7 | # or 8 | yarn dev 9 | # or 10 | pnpm dev 11 | # or 12 | bun dev 13 | ``` 14 | 15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. -------------------------------------------------------------------------------- /mlflow-site/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | images: { 4 | remotePatterns: [ 5 | { 6 | protocol: 'https', 7 | hostname: 'i.giphy.com' 8 | }, 9 | ], 10 | }, 11 | }; 12 | 13 | export default nextConfig; 14 | -------------------------------------------------------------------------------- /mlflow-site/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mlflow-site", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "14.2.15", 13 | "react": "^18", 14 | "react-dom": "^18" 15 | }, 16 | "devDependencies": { 17 | "@types/node": "^20", 18 | "@types/react": "^18", 19 | "@types/react-dom": "^18", 20 | "eslint": "^8", 21 | "eslint-config-next": "14.2.15", 22 | "postcss": "^8", 23 | "tailwindcss": "^3.4.1", 24 | "typescript": "^5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /mlflow-site/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /mlflow-site/public/assets/GithubLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/mlflow-js/f61b9178af3405a659f1d72b198f9f061ca48616/mlflow-site/public/assets/GithubLogo.png -------------------------------------------------------------------------------- /mlflow-site/public/assets/LinkedInLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/mlflow-js/f61b9178af3405a659f1d72b198f9f061ca48616/mlflow-site/public/assets/LinkedInLogo.png -------------------------------------------------------------------------------- /mlflow-site/public/assets/MLflow-js-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/mlflow-js/f61b9178af3405a659f1d72b198f9f061ca48616/mlflow-site/public/assets/MLflow-js-logo.png -------------------------------------------------------------------------------- /mlflow-site/public/assets/Mlflow-js-symbol.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/mlflow-js/f61b9178af3405a659f1d72b198f9f061ca48616/mlflow-site/public/assets/Mlflow-js-symbol.png -------------------------------------------------------------------------------- /mlflow-site/public/assets/austinpfp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/mlflow-js/f61b9178af3405a659f1d72b198f9f061ca48616/mlflow-site/public/assets/austinpfp.png -------------------------------------------------------------------------------- /mlflow-site/public/assets/imageNotFound.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/mlflow-js/f61b9178af3405a659f1d72b198f9f061ca48616/mlflow-site/public/assets/imageNotFound.jpg -------------------------------------------------------------------------------- /mlflow-site/public/assets/kylerpfp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/mlflow-js/f61b9178af3405a659f1d72b198f9f061ca48616/mlflow-site/public/assets/kylerpfp.png -------------------------------------------------------------------------------- /mlflow-site/public/assets/mlflow-js-logo-whitebg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/mlflow-js/f61b9178af3405a659f1d72b198f9f061ca48616/mlflow-site/public/assets/mlflow-js-logo-whitebg.png -------------------------------------------------------------------------------- /mlflow-site/public/assets/mlflow-ui-screenshot-new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/mlflow-js/f61b9178af3405a659f1d72b198f9f061ca48616/mlflow-site/public/assets/mlflow-ui-screenshot-new.png -------------------------------------------------------------------------------- /mlflow-site/public/assets/stephanypfp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/mlflow-js/f61b9178af3405a659f1d72b198f9f061ca48616/mlflow-site/public/assets/stephanypfp.png -------------------------------------------------------------------------------- /mlflow-site/public/assets/winstonpfp-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/mlflow-js/f61b9178af3405a659f1d72b198f9f061ca48616/mlflow-site/public/assets/winstonpfp-square.png -------------------------------------------------------------------------------- /mlflow-site/public/assets/yiqun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/mlflow-js/f61b9178af3405a659f1d72b198f9f061ca48616/mlflow-site/public/assets/yiqun.png -------------------------------------------------------------------------------- /mlflow-site/src/app/components/Button.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | const Button = () => { 4 | return ( 5 |
6 | 9 | 10 | 11 | 14 | 15 | 16 |
17 | ); 18 | }; 19 | 20 | export default Button; 21 | -------------------------------------------------------------------------------- /mlflow-site/src/app/components/Demo.tsx: -------------------------------------------------------------------------------- 1 | import DemoCard from "./DemoCard"; 2 | 3 | const Demo = () => { 4 | const demos = []; 5 | const demoCardHeaders = [ 6 | 'Manage experiments', 7 | 'Complete workflow', 8 | 'Visualize results in the MLflow UI' 9 | ]; 10 | const demoCardBlurbs = [ 11 | 'Create experiments with MLflow.js. Using built-in workflows, manage complex operations easily.', 12 | <> 13 | This example demonstrates how to use MLflow.js to support a full ML 14 | project with TensorFlow.js. It covers logging hyperparameters and metrics 15 | during training, evaluating model performance, registering high-performing 16 | models, and exploring results in the MLflow UI. Check out the full code 17 | example on{' '} 18 | 24 | GitHub 25 | 26 | . 27 | , 28 | 'Once the run completes, the MLflow UI provides powerful visualization tools to analyze experiments. Compare training and testing metrics across different runs to track performance patterns, or create custom charts that combine any logged hyperparameters and metrics to identify optimal model configurations', 29 | ]; 30 | const demoCardVideos = [ 31 | 'https://player.vimeo.com/video/1023585657', 32 | 'https://player.vimeo.com/video/1029068988', 33 | 34 | ]; 35 | for (let i = 0; i < 3; i++) { 36 | demos.push( 37 | 43 | ); 44 | } 45 | return ( 46 |
{demos}
47 | ); 48 | }; 49 | 50 | export default Demo; 51 | -------------------------------------------------------------------------------- /mlflow-site/src/app/components/DemoCard.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | 3 | const DemoCard = ({ 4 | header, 5 | blurb, 6 | video 7 | }: { 8 | key: string; 9 | blurb: string | React.JSX.Element; 10 | header: string; 11 | video: string; 12 | }) => { 13 | if (video !== undefined) { 14 | return ( 15 |
16 |
17 |