Merge branch 'main' into feat/petals-services-python

.github/workflows/on-pull-req.yaml

@@ -7,7 +7,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4
-    - uses: actions/setup-node@v3
+    # ubuntu-latest provides node & rust installed by default
+    # checkout the image for version specifics
+    # > https://github.com/actions/runner-images#available-images
     - run: npm install
     - run: npm run prettier:check
     - run: npm run build
+    - name: install dependencies for tauri
+      run: |
+        sudo apt-get update
+        sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf
+    - working-directory: ./src-tauri
+      run: cargo check
+    - working-directory: ./src-tauri
+      run: cargo fmt --check

package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",
-    "@tanstack/react-query": "^4.29.5",
+    "@tanstack/react-query": "^5.4.3",
     "@tauri-apps/api": "^1.5.1",
     "axios": "^1.4.0",
     "clsx": "^1.2.1",
@@ -34,7 +34,7 @@
     "zustand": "^4.3.7"
   },
   "devDependencies": {
-    "@tanstack/react-query-devtools": "^4.36.1",
+    "@tanstack/react-query-devtools": "^5.4.3",
     "@tauri-apps/cli": "^1.5.6",
     "@types/lodash": "^4.14.194",
     "@types/node": "^18.7.10",

src-tauri/build.rs

@@ -1,3 +1,3 @@
 fn main() {
-  tauri_build::build()
+    tauri_build::build()
 }

src-tauri/src/main.rs

@@ -9,10 +9,10 @@ mod utils;
 
 use sentry_tauri::sentry;
 use serde::{Deserialize, Serialize};
-use std::{env, collections::HashMap, str};
+use std::{collections::HashMap, env, str};
 use tauri::{
-    AboutMetadata, CustomMenuItem, Manager, Menu, MenuItem, RunEvent,
-    Submenu, SystemTray, SystemTrayEvent, SystemTrayMenu, SystemTrayMenuItem, WindowEvent,
+    AboutMetadata, CustomMenuItem, Manager, Menu, MenuItem, RunEvent, Submenu, SystemTray,
+    SystemTrayEvent, SystemTrayMenu, SystemTrayMenuItem, WindowEvent,
 };
 use tokio::{process::Child, sync::Mutex};
 

src-tauri/src/swarm.rs

@@ -1,7 +1,7 @@
 use reqwest::get;
 use serde::Deserialize;
+use std::{collections::HashMap, env, str};
 use tauri::api::process::Command;
-use std::{env, collections::HashMap, str};
 
 #[derive(Deserialize)]
 struct PetalsModelInfo {
@@ -14,7 +14,7 @@ pub fn is_swarm_supported() -> bool {
     match env::consts::OS {
         "macos" => true,
         "linux" => true,
-        _ => false
+        _ => false,
     }
 }
 
@@ -23,9 +23,7 @@ pub fn get_username() -> String {
     let output = Command::new("whoami").output();
 
     match output {
-        Ok(output) => {
-            output.stdout.trim().to_string()
-        },
+        Ok(output) => output.stdout.trim().to_string(),
         Err(_) => "prem-app".to_string(),
     }
 }
@@ -58,8 +56,6 @@ pub async fn get_petals_models() -> Result<Vec<String>, String> {
     }
 }
 
-
-
 #[tauri::command]
 pub fn is_swarm_mode_running() -> bool {
     let output_value = get_swarm_processes();
@@ -77,14 +73,14 @@ pub fn is_swarm_mode_running() -> bool {
 pub fn create_environment(handle: tauri::AppHandle) -> (String, HashMap<String, String>) {
     // Get the application data directory
     let app_data_dir = tauri::api::path::home_dir().expect("🙈 Failed to get app data directory");
-    let app_data_dir = app_data_dir
-        .join(".config/prem");
+    let app_data_dir = app_data_dir.join(".config/prem");
     let app_data_dir = app_data_dir
         .to_str()
         .expect("🙈 Failed to convert app data dir path to str");
 
     // Get create env path
-    let binding = handle.path_resolver()
+    let binding = handle
+        .path_resolver()
         .resolve_resource("petals")
         .expect("🙈 Failed to find `create_env.sh`");
     let petals_path = binding
@@ -108,7 +104,12 @@ pub fn create_environment(handle: tauri::AppHandle) -> (String, HashMap<String,
 }
 
 #[tauri::command(async)]
-pub fn run_swarm_mode(handle: tauri::AppHandle, num_blocks: i32, model: String, public_name: String){
+pub fn run_swarm_mode(
+    handle: tauri::AppHandle,
+    num_blocks: i32,
+    model: String,
+    public_name: String,
+) {
     let (python, _) = create_environment(handle);
     println!("🚀 Starting the Swarm...");
 
@@ -156,7 +157,6 @@ pub fn get_swarm_processes() -> String {
     output_value
 }
 
-
 #[tauri::command]
 pub fn stop_swarm_mode() {
     println!("🛑 Stopping the Swarm...");
@@ -175,4 +175,4 @@ pub fn stop_swarm_mode() {
             });
     }
     println!("🛑 Stopped all the Swarm Processes.");
-}
+}

src-tauri/src/utils.rs

@@ -32,15 +32,20 @@ pub fn get_binary_url(binaries_url: &HashMap<String, Option<String>>) -> Result<
             .get("aarch64-apple-darwin")
             .unwrap()
             .clone()
-            .unwrap()
+            .unwrap_or_else(|| "Unsupported architecture".to_string())
     } else if is_x86_64() {
         binary_url = binaries_url
             .get("x86_64-apple-darwin")
             .unwrap()
             .clone()
+            .unwrap_or_else(|| "Unsupported architecture".to_string())
+    }
+    if binary_url == "Unsupported architecture" {
+        binary_url = binaries_url
+            .get("universal-apple-darwin")
             .unwrap()
-    } else {
-        Err("Unsupported architecture").unwrap()
+            .clone()
+            .unwrap_or_else(|| Err("Unsupported architecture").unwrap())
     }
     Ok(binary_url)
 }

src/main.tsx

@@ -19,7 +19,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <App />
-      <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
+      <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-right" position="right" />
     </QueryClientProvider>
   </React.StrictMode>,
 );

src/modules/prem-audio/components/PremAudioBox.tsx

@@ -13,7 +13,7 @@ import PremRecordTab from "./PremRecordTab";
 
 const PremAudioBox = ({ serviceId, serviceType, historyId }: Partial<PremAudioContainerProps>) => {
   const navigate = useNavigate();
-  const { isLoading, onSubmit, file, setFile, currentHistory } = usePremAudio(
+  const { isPending, onSubmit, file, setFile, currentHistory } = usePremAudio(
     serviceId!,
     serviceType!,
     historyId,
@@ -59,11 +59,11 @@ const PremAudioBox = ({ serviceId, serviceType, historyId }: Partial<PremAudioCo
             className={clsx(
               "!rounded-md !h-[40px] text-white items-center flex border border-[#EC898A] !px-12 !text-sm max-sm:w-1/2 max-sm:justify-center",
               {
-                "opacity-50 pointer-events-none": isLoading,
+                "opacity-50 pointer-events-none": isPending,
               },
             )}
             onClick={onClear}
-            disabled={isLoading}
+            disabled={isPending}
           >
             Clear
           </OutlineCircleButton>
@@ -72,11 +72,11 @@ const PremAudioBox = ({ serviceId, serviceType, historyId }: Partial<PremAudioCo
               "!px-12 flex items-center !py-2 !h-[38px] !text-sm max-sm:w-1/2 max-sm:justify-center max-sm:!h-10",
               {
                 "opacity-50": !file,
-                "animate-fill-effect": isLoading,
+                "animate-fill-effect": isPending,
               },
             )}
             onClick={generateTranscriptions}
-            disabled={isLoading || !file}
+            disabled={isPending || !file}
           >
             Submit
           </PrimaryButton>

src/modules/prem-audio/types.ts

@@ -11,7 +11,7 @@ export type PremAudioHook = {
   currentHistory: PremAudioHistory | undefined;
   file: File | null;
   setFile: (file: File | null) => void;
-  isLoading: boolean;
+  isPending: boolean;
   isError: boolean;
   onSubmit: () => void;
   deleteHistory: (id: string) => void;

src/modules/prem-chat/components/PremChatSidebar.tsx

@@ -99,7 +99,7 @@ const PremChatSidebar = ({ setHamburgerMenu }: HamburgerMenuProps) => {
                   key={item.id}
                   className={clsx({ "bg-grey-900": chatId === item.id })}
                 >
-                  <Link to={`/prem-chat/${serviceId}/${item.id}`}>
+                  <Link to={`/prem-chat/${serviceId}/${serviceType}/${item.id}`}>
                     <img src={msg} alt="msg" width={18} height={18} className="mr-3" />
                     <span className="text-white">{item.title}</span>
                   </Link>

src/modules/prem-image/components/PremImageContainer.tsx

@@ -32,7 +32,7 @@ const PremImageContainer = ({
   const navigate = useNavigate();
 
   const {
-    isLoading,
+    isPending,
     onSubmit,
     prompt,
     setPrompt,
@@ -84,7 +84,7 @@ const PremImageContainer = ({
                 setPrompt={setPrompt}
                 negativePrompt={negativePrompt}
                 setNegativePrompt={setNegativePrompt}
-                isLoading={isLoading}
+                isPending={isPending}
                 generateImages={generateImages}
                 setFile={setFile}
                 file={file}
@@ -133,7 +133,7 @@ const PremImageContainer = ({
         </div>
         <div>
           {rightSidebar && (
-            <PremImageRightSidebar isLoading={isLoading} setRightSidebar={setRightSidebar} />
+            <PremImageRightSidebar isLoading={isPending} setRightSidebar={setRightSidebar} />
           )}
         </div>
       </div>

src/modules/prem-image/components/PremImagePromptBox.tsx

@@ -11,15 +11,15 @@ import type { PremImageResponse } from "../types";
 
 type PromptProps = Pick<
   PremImageResponse,
-  "prompt" | "setPrompt" | "negativePrompt" | "setNegativePrompt" | "isLoading" | "setFile" | "file"
+  "prompt" | "setPrompt" | "negativePrompt" | "setNegativePrompt" | "isPending" | "setFile" | "file"
 >;
 
 const PremImagePromptBox = ({
   prompt,
   setPrompt,
   negativePrompt,
   setNegativePrompt,
-  isLoading,
+  isPending,
   generateImages,
   file,
   setFile,
@@ -100,12 +100,12 @@ const PremImagePromptBox = ({
           <PrimaryButton
             className={clsx("!px-8 !py-2 !h-[38px] !text-sm", {
               "opacity-50": !prompt,
-              "animate-fill-effect": isLoading,
+              "animate-fill-effect": isPending,
             })}
             onClick={generateImages}
-            disabled={isLoading || !prompt}
+            disabled={isPending || !prompt}
           >
-            {isLoading ? `Generating ${n} Images` : `Generate Image`}
+            {isPending ? `Generating ${n} Images` : `Generate Image`}
           </PrimaryButton>
         </div>
       </div>

src/modules/prem-image/types.ts

@@ -23,7 +23,7 @@ export type PremImageResponse = {
   onSubmit: () => void;
   prompt: string;
   setPrompt: (question: string) => void;
-  isLoading: boolean;
+  isPending: boolean;
   isError: boolean;
   currentHistory: PremImageHistory | undefined;
   n: number;

src/modules/prem-text-audio/components/PremTextAudioBox.tsx

@@ -14,7 +14,7 @@ const PremTextAudioBox = ({
   historyId,
 }: Partial<PremTextAudioContainerProps>) => {
   const navigate = useNavigate();
-  const { isLoading, onSubmit, prompt, setPrompt, currentHistory } = usePremTextAudio(
+  const { isPending, onSubmit, prompt, setPrompt, currentHistory } = usePremTextAudio(
     serviceId!,
     serviceType!,
     historyId,
@@ -62,11 +62,11 @@ const PremTextAudioBox = ({
             className={clsx(
               "!rounded-md !h-[40px] text-white items-center flex border border-[#EC898A] !px-12 !text-sm max-sm:w-1/2 max-sm:justify-center",
               {
-                "opacity-50": isLoading,
+                "opacity-50": isPending,
               },
             )}
             onClick={onClear}
-            disabled={isLoading}
+            disabled={isPending}
           >
             Clear
           </OutlineCircleButton>
@@ -75,11 +75,11 @@ const PremTextAudioBox = ({
               "!px-12 flex items-center !py-2 !h-[38px] !text-sm max-sm:w-1/2 max-sm:justify-center",
               {
                 "opacity-50": !prompt,
-                "animate-fill-effect": isLoading,
+                "animate-fill-effect": isPending,
               },
             )}
             onClick={generateAudio}
-            disabled={isLoading || !prompt}
+            disabled={isPending || !prompt}
           >
             Create
           </PrimaryButton>

src/modules/prem-text-audio/types.ts

@@ -17,7 +17,7 @@ export type PremTextAudioHook = {
   currentHistory: PremTextAudioHistory | undefined;
   prompt: string;
   setPrompt: (prompt: string) => void;
-  isLoading: boolean;
+  isPending: boolean;
   isError: boolean;
   onSubmit: () => void;
   deleteHistory: (id: string) => void;

src/modules/prem-upscaler/components/PremUpscalerBox.tsx

@@ -16,7 +16,7 @@ const PremUpscalerBox = ({
 }: Partial<PremUpscalerContainerProps>) => {
   const navigate = useNavigate();
 
-  const { isLoading, onSubmit, file, setFile } = usePremUpscaler(
+  const { isPending, onSubmit, file, setFile } = usePremUpscaler(
     serviceId!,
     serviceType!,
     historyId,
@@ -50,7 +50,7 @@ const PremUpscalerBox = ({
   return (
     <div className="md:m-[50px] gap-10 m-[25px] prem-img-promptbox">
       <div className="max-w-[650px] mx-auto">
-        <div className={clsx("prem-audio-box bg-grey-700", { "pointer-events-none": isLoading })}>
+        <div className={clsx("prem-audio-box bg-grey-700", { "pointer-events-none": isPending })}>
           <p className="mb-[18px] text-grey-400">Pick an image to increase resolution</p>
           <div
             className="border-2 border-grey-400 rounded-lg h-[162px] flex justify-center items-center flex-col"
@@ -75,11 +75,11 @@ const PremUpscalerBox = ({
             className={clsx(
               "!rounded-md !h-[40px] text-white items-center flex border border-[#EC898A] !px-12 !text-sm max-sm:w-1/2 max-sm:justify-center",
               {
-                "opacity-50 pointer-events-none": isLoading,
+                "opacity-50 pointer-events-none": isPending,
               },
             )}
             onClick={onClear}
-            disabled={isLoading}
+            disabled={isPending}
           >
             Clear
           </OutlineCircleButton>
@@ -88,11 +88,11 @@ const PremUpscalerBox = ({
               "!px-12 flex items-center !py-2 !h-[38px] !text-sm max-sm:w-1/2 max-sm:justify-center max-sm:!h-10",
               {
                 "opacity-50": !file,
-                "animate-fill-effect": isLoading,
+                "animate-fill-effect": isPending,
               },
             )}
             onClick={generateImages}
-            disabled={isLoading || !file}
+            disabled={isPending || !file}
           >
             Submit
           </PrimaryButton>

src/modules/prem-upscaler/types.ts

@@ -15,7 +15,7 @@ export type PremUpscalerHook = {
   currentHistory: PremUpscalerHistory | undefined;
   file: File | null;
   setFile: (file: File | null) => void;
-  isLoading: boolean;
+  isPending: boolean;
   isError: boolean;
   onSubmit: () => void;
   deleteHistory: (id: string) => void;