Merge branch 'main' of https://github.com/transformerlab/transformerlab-app into add/move-job-to-experiment

Author: deep1401

.gitignore

@@ -28,3 +28,10 @@ npm-debug.log.*
 *.css.d.ts
 *.sass.d.ts
 *.scss.d.ts
+
+# IDEs
+# NOTE: Cursor automatically ignores files in .gitignore and a default list on their website
+# Override with ! prefix in .cursorignore.
+# https://docs.cursor.com/context/ignore-files#default-ignore-list
+.cursor/
+.cursorignore

README.md

@@ -49,40 +49,47 @@ Transformer Lab is proud to be supported by Mozilla through the <a href="https:/
 
 ## Features
 
+
 Transformer Lab allows you to:
 
 - 💕 **One-click Download Hundreds of Popular Models**:
-  - DeepSeek, Llama3, Qwen, Phi4, Gemma, Mistral, Mixtral, Command-R, and dozens more
-- ⬇ **Download any LLM from Huggingface**
+  - DeepSeek, Qwen, Gemma, Phi4, Llama, Mistral, Mixtral, Stable Diffusion, Flux, Command-R, and dozens more
+- ⬇ **Download any LLM, VLM, or Diffusion model from Huggingface**
 - 🎶 **Finetune / Train Across Different Hardware**
   - Finetune using MLX on Apple Silicon
   - Finetune using Huggingface on GPU
+  - Finetune Diffusion LoRAs on GPU
 - ⚖️ **RLHF and Preference Optimization**
   - DPO
   - ORPO
   - SIMPO
   - Reward Modeling
-- 💻 **Work with LLMs Across Operating Systems**:
+- 💻 **Work with Models Across Operating Systems**:
   - Windows App
   - MacOS App
   - Linux
 - 💬 **Chat with Models**
   - Chat
   - Completions
+  - Visualize Model Architecture
+  - Inspect activations & attention for each generated token
   - Preset (Templated) Prompts
   - Chat History
   - Tweak generation parameters
   - Batched Inference
   - Tool Use / Function Calling (in alpha)
 - 🚂 **Use Different Inference Engines**
   - MLX on Apple Silicon
-  - Huggingface Transformers
+  - FastChat
   - vLLM
   - Llama CPP
+  - SGLang
+- 🖼️ **Support for Image Diffusion Models**
+  - Run and experiment with image generation models (e.g., Stable Diffusion, Flux, etc.)
 - 🧑‍🎓 **Evaluate models**
 - 📖 **RAG (Retreival Augmented Generation)**
   - Drag and Drop File UI
-  - Works on Apple MLX, Transformers, and other engines
+  - Works on Apple MLX, FastChat, and other engines
 - 📓 **Build Datasets for Training**
   - Pull from hundreds of common datasets available on HuggingFace
   - Provide your own dataset using drag and drop
@@ -94,14 +101,14 @@ Transformer Lab allows you to:
 - 🔀 **Convert Models Across Platforms**
   - Convert from/to Huggingface, MLX, GGUF
 - 🔌 **Plugin Support**
-  - Easily pull from a library of existing plugins
+  - Easily install from a gallery of existing plugins
   - Write your own plugins to extend functionality
 - 🧑‍💻 **Embedded Monaco Code Editor**
   - Edit plugins and view what's happening behind the scenes
 - 📝 **Prompt Editing**
   - Easily edit System Messages or Prompt Templates
 - 📜 **Inference Logs**
-  - While doing inference or RAG, view a log of the raw queries sent to the LLM
+  - While doing inference or RAG, view a log of the raw queries sent to the model
 
 And you can do the above, all through a simple cross-platform GUI.
 

package-lock.json

@@ -25,7 +25,7 @@
       "url": "https://github.com/dadmobile"
     }
   ],
-  "version": "0.20.3",
+  "version": "0.20.7",
   "main": "./src/main/main.ts",
   "scripts": {
     "build": "concurrently \"npm run build:main\" \"npm run build:renderer\" \"npm run build:cloud\"",
@@ -267,7 +267,8 @@
             "x64"
           ]
         }
-      ]
+      ],
+      "publisherName": "Transformer Lab Inc."
     },
     "linux": {
       "target": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "transformerlab",
-  "version": "0.20.3",
+  "version": "0.20.7",
   "description": "A tool to play with and train LLMs",
   "license": "AGPL-3.0",
   "author": {

release/app/package-lock.json

@@ -121,6 +121,7 @@ function AppContent({
             flexDirection: 'row',
             justifyContent: 'space-between',
             height: '18px',
+            lineHeight: '18px',
           }}
         >
           <div>&nbsp;</div>

release/app/package.json

@@ -0,0 +1,79 @@
+import React from 'react';
+import {
+  Box,
+  Typography,
+  Card,
+  CardContent,
+  Stack,
+  IconButton,
+} from '@mui/joy';
+import { Play, Pause, Volume2 } from 'lucide-react';
+
+interface AudioPlayerProps {
+  audioData: {
+    audio_data_url: string;
+  };
+  metadata: {
+    path?: string;
+    duration?: number;
+  };
+}
+
+const AudioPlayer: React.FC<AudioPlayerProps> = ({ audioData, metadata }) => {
+  const [isPlaying, setIsPlaying] = React.useState(false);
+  const [audio] = React.useState(new Audio(audioData.audio_data_url));
+
+  const togglePlay = () => {
+    if (isPlaying) {
+      audio.pause();
+      setIsPlaying(false);
+    } else {
+      audio.play();
+      setIsPlaying(true);
+    }
+  };
+
+  // Handle audio ended event
+  React.useEffect(() => {
+    const handleEnded = () => setIsPlaying(false);
+    audio.addEventListener('ended', handleEnded);
+    return () => audio.removeEventListener('ended', handleEnded);
+  }, [audio]);
+
+  return (
+    <Card variant="outlined" sx={{ maxWidth: 400 }}>
+      <CardContent>
+        <Stack spacing={2}>
+          {/* Audio Controls */}
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <IconButton
+              size="sm"
+              variant="solid"
+              color="primary"
+              onClick={togglePlay}
+            >
+              {isPlaying ? <Pause size={16} /> : <Play size={16} />}
+            </IconButton>
+            <Volume2 size={16} />
+            <Typography level="body-sm">
+              {metadata?.duration
+                ? `${metadata.duration.toFixed(1)}s`
+                : 'Audio'}
+            </Typography>
+          </Box>
+
+          {/* File Path Only */}
+          {metadata?.path && (
+            <Box sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>
+              <div>
+                <strong>File:</strong> {metadata.path}
+              </div>
+            </Box>
+          )}
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default AudioPlayer;

src/renderer/App.tsx

@@ -15,6 +15,7 @@ import * as chatAPI from '../../lib/transformerlab-api-sdk';
 import { ChevronLeftIcon, ChevronRightIcon, Sheet } from 'lucide-react';
 import useSWR from 'swr';
 import { useAPI } from 'renderer/lib/transformerlab-api-sdk';
+import { useNotification } from '../Shared/NotificationSystem';
 
 const fetcher = (url) =>
   fetch(url)
@@ -39,6 +40,7 @@ const DatasetTableWithTemplate = ({
   };
 
   const shouldUseChatTemplate = !!modelName && !!chatColumn;
+  const { addNotification } = useNotification();
 
   const {
     data: result,
@@ -73,6 +75,12 @@ const DatasetTableWithTemplate = ({
     if (isLoading) {
       return <LinearProgress />;
     }
+    if (result?.status === 'error') {
+      addNotification({
+        type: 'warning',
+        message: result?.message,
+      });
+    }
     return '';
   }
   return (

src/renderer/components/Data/AudioPlayer.tsx

@@ -2,41 +2,40 @@ import { useEffect, useState } from 'react';
 import {
   Button,
   Table,
-  CircularProgress,
   Box,
   IconButton,
   iconButtonClasses,
   Alert,
   Select,
   Option,
   FormControl,
-  FormLabel,
-  LinearProgress,
   Typography,
   Skeleton,
   Tooltip,
 } from '@mui/joy';
 
-import * as chatAPI from '../../lib/transformerlab-api-sdk';
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import useSWR from 'swr';
-const fetcher = (url) =>
+import * as chatAPI from '../../lib/transformerlab-api-sdk';
+import AudioPlayer from './AudioPlayer';
+
+const fetcher = (url: string) =>
   fetch(url)
     .then((res) => res.json())
     .then((data) => data);
 
-const DatasetTable = ({ datasetId }) => {
+const DatasetTable = ({ datasetId }: { datasetId: string }) => {
   const [pageNumber, setPageNumber] = useState(1);
   const [numOfPages, setNumOfPages] = useState(1);
-  const [datasetLen, setDatasetLen] = useState(null);
+  const [datasetLen, setDatasetLen] = useState<number | null>(null);
   let pageSize = 10; //Set the number of rows per page
   const offset = (pageNumber - 1) * pageSize; //Calculate current row number to start from
 
-  const [split, setSplit] = useState(''); //Set the default split to display
+  const [split, setSplit] = useState(''); // Set the default split to display
   const [showingSplit, setShowingSplit] = useState(''); // We use this to show the user what split is shown without triggering a re-call of the data
 
-  //Set the pagination for the dataset
-  const setPagination = (totalRows, rowsPerPage) => {
+  // Set the pagination for the dataset
+  const setPagination = (totalRows: number, rowsPerPage: number) => {
     const totalPages = Math.ceil(totalRows / rowsPerPage);
     setNumOfPages(totalPages);
   };
@@ -173,28 +172,72 @@ const DatasetTable = ({ datasetId }) => {
                                 textOverflow: 'ellipsis',
                               }}
                             >
-                              {typeof data.data['columns'][key][rowIndex] ===
-                                'string' &&
-                              data.data['columns'][key][rowIndex].startsWith(
-                                'data:image/',
-                              ) ? (
-                                <img
-                                  src={data.data['columns'][key][rowIndex]}
-                                  alt="preview"
-                                  style={{
-                                    maxWidth: 120,
-                                    maxHeight: 120,
-                                    display: 'block',
-                                  }}
-                                />
-                              ) : typeof data.data['columns'][key][rowIndex] ===
-                                'string' ? (
-                                data.data['columns'][key][rowIndex]
-                              ) : (
-                                JSON.stringify(
-                                  data.data['columns'][key][rowIndex],
-                                )
-                              )}
+                              {(() => {
+                                const cellData =
+                                  data.data['columns'][key][rowIndex];
+
+                                // Handle audio data with nested structure
+                                if (
+                                  typeof cellData === 'object' &&
+                                  cellData !== null &&
+                                  cellData.array?.audio_data_url
+                                ) {
+                                  // Merge metadata from both array.metadata and root level
+                                  const mergedMetadata = {
+                                    ...cellData.array.metadata,
+                                    path: cellData.path,
+                                  };
+
+                                  return (
+                                    <AudioPlayer
+                                      audioData={cellData.array}
+                                      metadata={mergedMetadata}
+                                      transcription={cellData.transcription}
+                                    />
+                                  );
+                                }
+
+                                // Handle audio data (object with audio_data_url at root level)
+                                if (
+                                  typeof cellData === 'object' &&
+                                  cellData !== null &&
+                                  cellData.audio_data_url
+                                ) {
+                                  return (
+                                    <AudioPlayer
+                                      audioData={cellData}
+                                      metadata={cellData.metadata}
+                                      transcription={cellData.transcription}
+                                    />
+                                  );
+                                }
+
+                                // Handle image data (string starting with data:image/)
+                                if (
+                                  typeof cellData === 'string' &&
+                                  cellData.startsWith('data:image/')
+                                ) {
+                                  return (
+                                    <img
+                                      src={cellData}
+                                      alt="preview"
+                                      style={{
+                                        maxWidth: 120,
+                                        maxHeight: 120,
+                                        display: 'block',
+                                      }}
+                                    />
+                                  );
+                                }
+
+                                // Handle regular strings
+                                if (typeof cellData === 'string') {
+                                  return cellData;
+                                }
+
+                                // Handle other data types
+                                return JSON.stringify(cellData);
+                              })()}
                             </div>
                           </Tooltip>
                         </td>