v0.19.0 (#348)

.env.sample

@@ -1,8 +1,13 @@
 # Environment Variables
-# Copy .env.sample to .env and change for values for your environment
+# Frontend
 VITE_API_ROOT=http://localhost:8000/api
-PORT=8000
 
+# Backend
+HOST=0.0.0.0
+PORT=8000
+DEV_SERVER_PORT=5173
+DEV_SERVER_HOST=localhost
+LAUNCH_BROWSER_ON_START=true
 
 # Docker Configuration
 DOCKER_WEB_CPUS=1
@@ -17,4 +22,4 @@ NODE_ENV=production
 # To avoid permission issues copying assets set this to your UID/GID
 # `id -g` / `id -u`
 UID=1000
-GID=1000
+GID=1000

README.md

@@ -42,23 +42,31 @@ For the latest updates and features, please see [releases](https://github.com/te
 
 #### Application demo
 
-https://github.com/user-attachments/assets/80e6cfe5-24c4-4d5f-8c1e-2a6a2f9651ff
+https://github.com/user-attachments/assets/d00a2629-0bd1-4ee1-bb12-bd796d85221d
 
 | L1 Summary with Tensor highlight | Operation inputs and ouputs |
 |-----------------------------------------------|------------------------------------------|
-| <img width="400" alt="L1 Summary with Tensor highlight" src="https://github.com/user-attachments/assets/ef0ce0d5-ae00-4030-a1a1-91ae0c1db930"> | <img width="400" alt="Operation inputs and outputs" src="https://github.com/user-attachments/assets/3e59c95c-9a57-459c-98c0-e8d86f4e38ec"> |
+| <img width="400" alt="L1 Summary with Tensor highlight" src="https://github.com/user-attachments/assets/73c0aff8-16b2-4d1e-85a8-81c434012d36" /> | <img width="400" alt="Operation inputs and outputs" src="https://github.com/user-attachments/assets/e9480ad2-7e24-436b-932b-050c6b489516" /> |
 
 | Device operations with memory consumption | DRAM memory allocation |
 |-----------------------------------------------|------------------------------------------|
-| <img width="400" alt="Device operations with memory consumption" src="https://github.com/user-attachments/assets/ae0a261e-650c-4c03-92a8-d2a00ada594b"> | <img width="400" alt="DRAM memory allocations" src="https://github.com/user-attachments/assets/4cdfa75e-2a47-4de6-85ce-ce0441e7cc83"> |
+| <img width="400" alt="Device operations with memory consumption" src="https://github.com/user-attachments/assets/33f83d13-4597-4ad6-bf93-3e81d888a16c" /> | <img width="400" alt="DRAM memory allocations" src="https://github.com/user-attachments/assets/39e73896-2a6a-4404-8a82-c76c10662ca3" /> |
 
 | Operation graph view | Model buffer summary |
 |-----------------------------------------------|------------------------------------------|
-| <img width="400" alt="Operation graph view" src="https://github.com/user-attachments/assets/291dc2d3-5737-4a51-8e0d-41b1b03a385c"> | <img width="400" alt="Model buffer summary" src="https://github.com/user-attachments/assets/a384c61e-10e8-4884-8a10-223b2014a29d"> |
+| <img width="400" alt="Operation graph view" src="https://github.com/user-attachments/assets/04813765-8dd1-48af-b054-4de3fe1afba3" /> | <img width="400" alt="Model buffer summary" src="https://github.com/user-attachments/assets/0371e8bc-1f08-43db-a5a1-6191a611d411" /> |
 
 | Per core allocation details | Per core allocation details for individual tensors |
 |-----------------------------------------------|------------------------------------------|
-| <img width="400" alt="Per core allocation details" src="https://github.com/user-attachments/assets/b2fb8ea5-90e0-4c0c-8a4a-ad8891b3d7a1"> | <img width="400" alt="Per core allocation details for individual tensor" src="https://github.com/user-attachments/assets/047129c1-d80b-4d2b-9940-7c162052280d"> |
+| <img width="400" alt="Per core allocation details" src="https://github.com/user-attachments/assets/e1647b4d-9bf9-4e30-98a5-8cfd48ef495f" /> | <img width="400" alt="Per core allocation details for individual tensor" src="https://github.com/user-attachments/assets/c160744e-0c23-42da-a3a4-ad4bbe513061" /> |
+
+| Tensor details list | Performance report |
+|-----------------------------------------------|------------------------------------------|
+| <img width="400" alt="Tensor details list" src="https://github.com/user-attachments/assets/d19d770b-a6cd-4c5d-96d5-181c2a5e9692" /> | <img width="400" alt="Performance report" src="https://github.com/user-attachments/assets/882ca7e3-3ef8-47cd-9e78-f69474f13e86" /> |
+
+| Performance charts |  |
+|-----------------------------------------------|------------------------------------------|
+| <img width="400" alt="Performance analysis" src="https://github.com/user-attachments/assets/03f64a7a-262a-4b2a-a0b6-c70f3f14705c" /> |  <img width="400" alt="" src="https://github.com/user-attachments/assets/224d14f7-c7b3-4f4c-99c6-528c800b1a84" /> |
 
 ## Getting started
 

backend/ttnn_visualizer/requirements.txt

@@ -16,6 +16,7 @@ pandas
 wheel
 build
 PyYAML==6.0.2
+python-dotenv==1.0.1
 
 # Dev dependencies
 mypy

backend/ttnn_visualizer/settings.py

@@ -4,9 +4,11 @@
 
 import os
 from pathlib import Path
+from dotenv import load_dotenv
 
 from ttnn_visualizer.utils import str_to_bool
 
+load_dotenv()
 
 class DefaultConfig(object):
     # General Settings

docs/contributing.md

@@ -4,12 +4,6 @@
 
 ## Running the app from source
 
-### Environment
-
-Copy the provided `.env.sample` file to `.env`. The values from the sample should work as is but `VITE_API_ROOT` is required to be able to communicate with the backend.
-
-
-
 ### Frontend
 
 ```shell
@@ -52,6 +46,10 @@ npm run flask:start-debug
 
 When both the frontend and backend are running you can access the app on [http://localhost:5173](http://localhost:5173) or whatever **Local** uri is printed in your terminal where you ran `npm run dev`.
 
+### Environment
+
+The application should run out of the box, but should you need to you can adjust certain values in the front end or back end code using a `.env` file. See `.env.sample` for some of the key variables available.
+
 ## Troubleshooting
 
 ### Fix for python random errors not finding modules

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ttnn-visualzer",
   "private": true,
-  "version": "0.18.2",
+  "version": "0.19.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "ttnn_visualizer"
 authors = []
-version = "0.18.2"
+version = "0.19.0"
 description = "TT Visualizer"
 readme = "README.md"
 requires-python = ">=3.12"
@@ -20,7 +20,8 @@ dependencies = [
     "sqlalchemy==2.0.34",
     "flask-socketio==5.4.1",
     "flask-sqlalchemy==3.1.1",
-    "PyYAML==6.0.2"
+    "PyYAML==6.0.2",
+    "python-dotenv==1.0.1"
 ]
 
 classifiers = [

src/components/Layout.tsx

@@ -14,6 +14,7 @@ import { useEffect } from 'react';
 import { activePerformanceTraceAtom, activeReportAtom } from '../store/app';
 import MainNavigation from './MainNavigation';
 import { useGetDeviceOperationListPerf, useSession } from '../hooks/useAPI';
+import ROUTES from '../definitions/routes';
 
 const BounceIn = cssTransition({
     enter: `Toastify--animate Toastify__bounce-enter`,
@@ -52,10 +53,13 @@ function Layout() {
 
             <header className='app-header'>
                 <nav className='nav-container'>
-                    <div className='title'>
+                    <a
+                        href={ROUTES.HOME}
+                        className='title'
+                    >
                         <h1>TT-NN Visualizer</h1>
                         <sup className='version'>v{appVersion}</sup>
-                    </div>
+                    </a>
                     <MainNavigation />
                 </nav>
 

src/components/TensorList.tsx

@@ -168,7 +168,7 @@ const TensorList = () => {
                             intent={Intent.DANGER}
                             outlined={showHighConsumerTensors}
                         >
-                            {fetchedTensors?.filter((tensor) => tensor.consumers.length > MAX_NUM_CONSUMERS).length}
+                            {filteredTensorList?.filter((tensor) => tensor.consumers.length > MAX_NUM_CONSUMERS).length}
                         </Button>
                     </Tooltip>
 

src/components/buffer-summary/BufferSummaryBuffer.tsx

@@ -6,7 +6,7 @@ import { PopoverPosition, Tooltip } from '@blueprintjs/core';
 import { useState } from 'react';
 import { useAtom, useAtomValue } from 'jotai';
 import { Buffer, Tensor } from '../../model/APIData';
-import { formatSize, toHex } from '../../functions/math';
+import { formatSize, toHex, toReadableShape, toReadableType } from '../../functions/math';
 import { getBufferColor, getTensorColor } from '../../functions/colorGenerator';
 import { renderMemoryLayoutAtom, selectedAddressAtom, selectedTensorAtom } from '../../store/app';
 import { getDimmedColour } from '../../functions/colour';
@@ -80,6 +80,8 @@ function BufferSummaryBuffer({ buffer, size, position, tensor }: BufferSummaryBu
                                 {buffer.address} ({toHex(buffer.address)})<br />
                                 Size: {formatSize(buffer.size)}
                                 <br />
+                                {tensor?.shape ? toReadableShape(tensor.shape) : ''}{' '}
+                                {tensor?.dtype ? toReadableType(tensor.dtype) : ''}{' '}
                                 {tensor?.id ? `Tensor ${tensor.id}` : ''}
                                 {tensor?.memory_config?.memory_layout ? (
                                     <>

src/components/buffer-summary/BufferSummaryPlotRenderer.tsx

@@ -46,11 +46,10 @@ function BufferSummaryPlotRenderer({ buffersByOperation, tensorListByOperation }
         [buffersByOperation],
     );
 
+    const getMemorySize = () => (!isLoadingDevices && devices ? devices[deviceId].worker_l1_size : 0);
+
     // TODO: Multi device support
-    const memorySize = useMemo(
-        () => (!isLoadingDevices && devices ? devices[deviceId].worker_l1_size : 0),
-        [deviceId, devices, isLoadingDevices],
-    );
+    const memorySize = useMemo(getMemorySize, [deviceId, devices, isLoadingDevices]);
 
     const zoomedMemorySize = useMemo(() => {
         let minValue: undefined | number;
@@ -177,7 +176,7 @@ function BufferSummaryPlotRenderer({ buffersByOperation, tensorListByOperation }
                                 >
                                     <BufferSummaryRow
                                         buffers={operation.buffers}
-                                        operationId={operation.id}
+                                        // operationId={operation.id}
                                         memoryStart={isZoomedIn ? zoomedMemorySizeStart : 0}
                                         memoryEnd={isZoomedIn ? zoomedMemorySizeEnd : memorySize}
                                         memoryPadding={memoryPadding}