Merge pull request #45 from dezoito/dev

Merge updates pre v0.6.1

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
+## [Version 0.6.1] - 2024-10-28
+
+### Changed
+
+- When removing all experiment logs, only JSON files should be deleted.
+- Add colors to prompt and system_prompt when displaying inference params in results.
+- Border colors are used on the side of a result to group outputs from the same model.
+
 ## [Version 0.6.0] - 2024-10-20
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ollama-grid-search",
   "private": true,
-  "version": "0.6.0",
+  "version": "0.6.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "grid-search-desktop"
-version = "0.6.0"
+version = "0.6.1"
 description = "A Tauri App to perform Grid Search and A/B testing experiments on LLMs"
 authors = ["dezoito"]
 license = "Whatever is in the repo"

src-tauri/src/commands.rs

@@ -242,11 +242,11 @@ pub fn delete_experiment_files(
         .ok_or_else(|| "Failed to get application data directory".to_string())?;
 
     if file_name == "*" {
-        // Delete all files in the directory
+        // Delete all JSON files in the directory
         for entry in fs::read_dir(&app_data_dir).map_err(|e| e.to_string())? {
             let entry = entry.map_err(|e| e.to_string())?;
             let path = entry.path();
-            if path.is_file() {
+            if path.is_file() && path.extension().map(|e| e == "json").unwrap_or(false) {
                 fs::remove_file(path).map_err(|e| e.to_string())?;
             }
         }

src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "ollama-grid-search",
-    "version": "0.6.0"
+    "version": "0.6.1"
   },
   "tauri": {
     "allowlist": {

src/Layout.tsx

@@ -1,8 +1,8 @@
 import { ModeToggle } from "@/components/mode-toggle";
 import GridResultsPane from "@/components/results/grid-results-pane";
 import { SettingsDialog } from "@/components/settings-dialog";
-import FormGridParams from "@/components/ui/form-grid-params";
-import { LogsSelector } from "./components/ui/logs-selector";
+import FormGridParams from "@/components/form-grid-params";
+import { LogsSelector } from "@/components/Selectors/logs-selector";
 
 function Layout() {
   return (

src/components/ui/logs-selector.tsx → src/components/Selectors/logs-selector.tsx

@@ -26,10 +26,10 @@ import { invoke } from "@tauri-apps/api/tauri";
 import { saveAs } from "file-saver";
 import { useAtom } from "jotai";
 import { useState } from "react";
-import { ExperimentDataDialog } from "../experiment-data-dialog";
-import { get_experiments } from "../queries";
-import { useConfirm } from "./alert-dialog-provider";
-import { toast } from "./use-toast";
+import { ExperimentDataDialog } from "@/components/experiment-data-dialog";
+import { get_experiments } from "@/components/queries";
+import { useConfirm } from "@/components/ui/alert-dialog-provider";
+import { toast } from "@/components/ui/use-toast";
 
 function processExperimentData(logContent: string): TFormValues {
   const logData = JSON.parse(logContent);

src/components/ui/form-grid-params.tsx → src/components/form-grid-params.tsx

@@ -1,5 +1,5 @@
 import { formValuesAtom } from "@/Atoms";
-import PromptSelector from "@/components/filters/PromptSelector";
+import PromptSelector from "@/components/Selectors/PromptSelector";
 import { useConfirm } from "@/components/ui/alert-dialog-provider";
 import { Input } from "@/components/ui/input";
 import {
@@ -16,9 +16,9 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { v4 as uuidv4 } from "uuid";
 import z from "zod";
-import ModelSelector from "../filters/ModelSelector";
-import SystemPromptSelector from "../filters/SystemPromptSelector";
-import { Button } from "./button";
+import ModelSelector from "@/components/Selectors/ModelSelector";
+import SystemPromptSelector from "@/components/Selectors/SystemPromptSelector";
+import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
@@ -27,9 +27,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "./form";
-import Spinner from "./spinner";
-import { useToast } from "./use-toast";
+} from "@/components/ui/form";
+import Spinner from "@/components/ui/spinner";
+import { useToast } from "@/components/ui/use-toast";
 
 const validateNumberOrArray =
   (inputType: "float" | "int") => (value: string | number) => {

src/components/results/grid-results-pane.tsx

@@ -1,5 +1,6 @@
 import { configAtom, formValuesAtom } from "@/Atoms";
-import { TParamIteration } from "@/Interfaces";
+import { TFormValues, TParamIteration } from "@/Interfaces";
+import Tutorial from "@/components/tutorial";
 import { ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
 import { useQueries } from "@tanstack/react-query";
 import { useAtom } from "jotai";
@@ -9,12 +10,11 @@ import { Button } from "../ui/button";
 import { Label } from "../ui/label";
 import { Separator } from "../ui/separator";
 import { Switch } from "../ui/switch";
-import Tutorial from "../ui/tutorial";
 import IterationResult from "./iteration-result";
 
 export default function GridResultsPane() {
   const [config, __] = useAtom(configAtom);
-  const [formValues, _] = useAtom(formValuesAtom);
+  const [formValues, _] = useAtom<TFormValues>(formValuesAtom);
   const [iterations, setIterations] = useState<TParamIteration[]>([]);
   const [noCompleted, setNoCompleted] = useState(0);
   const [expandParams, setExpandParams] = useState(false);
@@ -23,6 +23,22 @@ export default function GridResultsPane() {
     new Date().toUTCString(),
   );
   const [hideModelNames, setHideModelNames] = useState(config.hide_model_names);
+  const borderStyles = [
+    "border-amber-500",
+    "border-lime-400",
+    "border-violet-500",
+    "border-green-600",
+    "border-yellow-300",
+    "border-cyan-500",
+    "border-fuchsia-600",
+    "border-yellow-600",
+    "border-rose-700",
+    "border-blue-600",
+    "border-pink-500",
+    "border-rose-700",
+  ];
+
+  const numStyles = borderStyles.length;
 
   useEffect(() => {
     setExperimentDate(new Date().toUTCString());
@@ -185,6 +201,11 @@ export default function GridResultsPane() {
               expandParams={expandParams}
               expandMetadata={expandMetadata}
               hideModelNames={hideModelNames}
+              borderStyle={
+                borderStyles[
+                  formValues.models.indexOf(iteration.model) % numStyles
+                ]
+              }
             />
           </div>
         ))}

src/components/results/iteration-result.tsx

@@ -25,6 +25,7 @@ interface IProps {
   expandParams: boolean;
   expandMetadata: boolean;
   hideModelNames: boolean;
+  borderStyle: string;
 }
 
 export default function IterationResult(props: IProps) {
@@ -35,6 +36,7 @@ export default function IterationResult(props: IProps) {
     expandParams,
     expandMetadata,
     hideModelNames,
+    borderStyle: borderStyle,
   } = props;
   const {
     model,
@@ -82,7 +84,9 @@ export default function IterationResult(props: IProps) {
 
   return (
     <div className="flex flex-row gap-1">
-      <div className="my-2 w-[98%] rounded bg-cyan-400/20 p-4 dark:bg-slate-700/50">
+      <div
+        className={`my-2 w-[98%] rounded border-l-2 ${borderStyle} bg-cyan-400/20 p-4 dark:bg-slate-700/50`}
+      >
         {/* model + inference params */}
 
         <CollapsibleItem
@@ -102,11 +106,20 @@ export default function IterationResult(props: IProps) {
             <div>mirostat eta: {mirostat_eta}</div>
             <Separator className="my-2" />
             <div className=" whitespace-pre-wrap">
-              prompt: <CollapsibleText text={prompt} maxChars={45} />
+              prompt:{" "}
+              <CollapsibleText
+                text={prompt}
+                maxChars={45}
+                textClasses={"text-green-600 dark:text-green-500"}
+              />
             </div>
             <div className=" whitespace-pre-wrap">
               system prompt:{" "}
-              <CollapsibleText text={system_prompt} maxChars={45} />
+              <CollapsibleText
+                text={system_prompt}
+                maxChars={45}
+                textClasses={"text-amber-600 dark:text-amber-500"}
+              />
             </div>
           </div>
         </CollapsibleItem>
@@ -131,9 +144,10 @@ export default function IterationResult(props: IProps) {
 
             {/* results metadata */}
             {query.data && (
-              <div className=" my-3 flex items-center">
+              <div className="my-3 flex items-start">
                 {/* copy text to clipboard */}
                 <Button
+                  className="mt-1"
                   variant="ghost"
                   size="sm"
                   onClick={() => {
@@ -154,6 +168,7 @@ export default function IterationResult(props: IProps) {
                 {query.isFetched && !query.isFetching && (
                   <Button
                     variant="ghost"
+                    className="mt-1"
                     size="sm"
                     onClick={refetchCurrentQuery}
                   >

src/components/ui/collapsible-text.tsx

@@ -14,9 +14,10 @@ import {
 interface IProps {
   text: string;
   maxChars: number;
+  textClasses?: String;
 }
 
-export function CollapsibleText({ text, maxChars }: IProps) {
+export function CollapsibleText({ text, maxChars, textClasses }: IProps) {
   const [isOpen, setIsOpen] = React.useState(false);
   const isTextLong = text.length > maxChars;
   const displayText =
@@ -29,7 +30,9 @@ export function CollapsibleText({ text, maxChars }: IProps) {
   return (
     <Collapsible open={isOpen} onOpenChange={setIsOpen} className="space-y-2">
       <div className="my-1 flex justify-stretch">
-        <div className="text-sm font-semibold">{displayText}</div>
+        <div className={`text-sm font-semibold ${textClasses}`}>
+          {displayText}
+        </div>
 
         {isTextLong && (
           <CollapsibleTrigger asChild>

todo.md

@@ -113,6 +113,11 @@ https://github.com/tauri-apps/plugins-workspace/tree/v1/plugins/single-instance
 [ok] - Improved experiment inspection UI readability.
 [ok] - Streamlined State management.
 
+--- v0.6.1
+[ok] - When removing all experiment logs, only JSON files should be deleted.
+[ok] - Add colors to prompt and system_prompt when displaying inference params in results.
+[ok] - Border colors are used on the side of a result to group outputs from the same model.
+
 ---
 
 - Add CI checks for typescript code (ESLint?)