tentative fix for sharp

.github/workflows/tests.yml

@@ -39,8 +39,8 @@ jobs:
         # If source files changed but packages didn't, rebuild from a prior cache.
         restore-keys: |
           ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-   
-    - name: Install dependencies
-      run: npm ci
+    - name: Install dependencies (with optional dependencies)
+      run: npm ci --include=optional
 
     - name: Install Playwright
       run: npm install @playwright/test@${{ env.PLAYWRIGHT_VERSION }}

Dockerfile

@@ -48,7 +48,7 @@ RUN ffmpeg -version
 # Copy the current directory contents into the container at /app setting the owner to the user
 COPY --chown=user . /app
 
-RUN npm ci
+RUN npm ci --include=optional
 
 RUN npm run build:ci
 

README.md

@@ -84,10 +84,12 @@ If you find that Clapper is working with a more recent (stable) version of Node,
 ### Installing and running the app
 
 ```bash
-npm i
+npm i --include=optional
 npm run dev
 ```
 
+`--include=optional` is to make sure optional dependencies are installed (pre-build native modules compatible with your system)
+
 ### Making sure everything is working properly
 
 There are no tests yet (I will create a ticket for that),

forge.config.js

@@ -12,6 +12,10 @@ module.exports = {
   packagerConfig: {
     name: "Clapper",
     asar: true,
+    asarUnpack: [
+      "**/node_modules/sharp/**/*",
+      "**/node_modules/@img/**/*"
+    ],
     icon: "./public/images/logos/CL.png",
     osxSign: {},
 

package.json

@@ -38,7 +38,7 @@
   "dependencies": {
     "@aitube/broadway": "0.1.2",
     "@aitube/clap": "0.1.2",
-    "@aitube/clapper-services": "0.1.2-2",
+    "@aitube/clapper-services": "0.1.2-4",
     "@aitube/engine": "0.1.2",
     "@aitube/timeline": "0.1.2-0",
     "@fal-ai/serverless-client": "^0.13.0",
@@ -163,5 +163,25 @@
     "tailwindcss": "^3.4.3",
     "typescript": "^5.5.0",
     "vitest": "^2.0.2"
+  },
+  "optionalDependencies": {
+    "@img/sharp-win32-ia32": "0.33.4",
+    "@img/sharp-win32-x64": "0.33.4",
+    "@img/sharp-darwin-arm64": "0.33.4",
+    "@img/sharp-darwin-x64": "0.33.4",
+    "@img/sharp-linux-arm": "0.33.4",
+    "@img/sharp-linux-arm64": "0.33.4",
+    "@img/sharp-linux-x64": "0.33.4",
+    "@img/sharp-linuxmusl-x64": "0.33.4",
+    "@img/sharp-linuxmusl-arm64": "0.33.4",
+    "@img/sharp-libvips-win32-x64": "1.0.2",
+    "@img/sharp-libvips-win32-ia32": "1.0.2",
+    "@img/sharp-libvips-linux-arm": "1.0.2",
+    "@img/sharp-libvips-linux-x64": "1.0.2",
+    "@img/sharp-libvips-linux-arm64": "1.0.2",
+    "@img/sharp-libvips-linuxmusl-x64": "1.0.2",
+    "@img/sharp-libvips-linuxmusl-arm64": "1.0.2",
+    "@img/sharp-libvips-darwin-x64": "1.0.2",
+    "@img/sharp-libvips-darwin-arm64": "1.0.2"
   }
 }

src/components/assistant/ChatView.tsx

@@ -47,6 +47,7 @@ export function ChatView() {
             placeholder="Ask something (a red car, etc)"
             value={draft}
             onChange={(e) => setDraft(e.target.value)}
+            className="rounded-none border-t border-none"
             onKeyDown={({ key }) => {
               if (key === 'Enter') {
                 handleSubmit()

src/components/forms/FormInput.tsx

@@ -11,6 +11,7 @@ import { cn, getValidNumber, isValidNumber } from '@/lib/utils'
 import { Input } from '../ui/input'
 
 import { FormField } from './FormField'
+import { useTheme } from '@/services'
 
 export function FormInput<T>(
   {
@@ -24,7 +25,7 @@ export function FormInput<T>(
     disabled,
     onChange,
     type,
-    // ...props
+    ...props
   }: {
     label?: ReactNode
     className?: string
@@ -36,10 +37,12 @@ export function FormInput<T>(
     disabled?: boolean
     onChange?: (newValue: T) => void
     type?: HTMLInputTypeAttribute
+    props?: any
   }
   //  & Omit<ComponentProps<typeof Input>, "value" | "defaultValue" | "placeholder" | "type" | "className" | "disabled" | "onChange">
   // & ComponentProps<typeof Input>
 ) {
+  const theme = useTheme()
   const isNumberInput =
     typeof defaultValue === 'number' || typeof value === 'number'
 
@@ -100,9 +103,13 @@ export function FormInput<T>(
         // {...props}
         type={inputType}
         value={`${value || defaultValue}`}
-
         // since we are controlling the element with value=*, we should not use defaultValue=*
         // defaultValue={`${defaultValue || ""}`}
+
+        style={{
+          borderRadius: theme.formInputRadius || '8px',
+        }}
+        {...props}
       />
     </FormField>
   )

src/components/forms/FormLabel.tsx

@@ -10,7 +10,12 @@ export function FormLabel({
   className?: string
 }) {
   return (
-    <label className={cn(`font-mono text-xs text-white/70`, className)}>
+    <label
+      className={cn(`font-mono text-xs text-white/80`, className)}
+      style={{
+        textShadow: '#000000 0px 0 1px',
+      }}
+    >
       {children}
     </label>
   )

src/components/forms/FormSection.tsx

@@ -19,7 +19,7 @@ export function FormSection({
         className
       )}
     >
-      <h2 className="pb-2 text-xl font-normal text-white/45">{label}</h2>
+      <h2 className="pb-2 text-xl font-normal text-white/60">{label}</h2>
       <div className={cn('flex w-full', 'flex-col space-y-4')}>{children}</div>
     </div>
   )

src/components/forms/FormSelect.tsx

@@ -8,6 +8,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../ui/select'
+import { useTheme } from '@/services'
 
 export function FormSelect<T>({
   label,
@@ -18,6 +19,7 @@ export function FormSelect<T>({
   defaultItemLabel,
   items = [],
   onSelect,
+  props,
 }: {
   label?: string
   className?: string
@@ -32,7 +34,9 @@ export function FormSelect<T>({
     value: T
   }[]
   onSelect?: (value?: T) => void
+  props?: any
 }) {
+  const theme = useTheme()
   return (
     <FormField
       label={
@@ -54,6 +58,10 @@ export function FormSelect<T>({
           onSelect(selectedItem?.value)
         }}
         defaultValue={selectedItemId}
+        style={{
+          borderRadius: theme.formInputRadius || '8px',
+        }}
+        {...props}
       >
         <SelectTrigger className={cn(`w-full`, `font-mono text-xs font-light`)}>
           <SelectValue placeholder={selectedItemLabel} />

src/components/ui/switch.tsx

@@ -19,7 +19,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        'pointer-events-none block h-5 w-5 rounded-full bg-white/80 shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 dark:bg-neutral-950/60'
+        'pointer-events-none block h-5 w-5 rounded-full bg-white/40 shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 dark:bg-neutral-950/40'
       )}
     />
   </SwitchPrimitives.Root>

src/lib/utils/decodeOutput.ts

@@ -14,7 +14,13 @@ export async function decodeOutput(input: any): Promise<string> {
     ? urlOrBase64
     : await fetchContentToBase64(urlOrBase64)
 
-  if (base64Url.startsWith('data:image/')) {
+  if (
+      base64Url.startsWith('data:image/')
+    ) {
+
+    if (base64Url.startsWith('data:image/jpeg') || base64Url.startsWith('data:image/jpg')) {
+      return base64Url
+    }
     // this step is important since some providers store data as PNG,
     // which is a unreasonable since a few frames quickly add up to 10 Mb,
     // we can't afford to have a 20 Gb .clap file