includio-cms 0.0.35 → 0.0.36

package/dist/admin/components/media/alt-input.svelte

@@ -3,6 +3,8 @@
 	import Input from '../../../components/ui/input/input.svelte';
 
 	import { getRemotes } from '../../context/remotes.js';
+	import Sparkles from '@tabler/icons-svelte/icons/sparkles';
+	import { toast } from 'svelte-sonner';
 
 	const remotes = getRemotes();
 
@@ -14,18 +16,55 @@
 	let { alt, fileId }: Props = $props();
 
 	let newAlt = $state(alt ?? '');
+
+	let input: HTMLInputElement | null = $state(null);
+
+	let generating = $state(false);
+
+	async function generateAltText() {
+		if (!input) return;
+
+		try {
+			input.disabled = true;
+			generating = true;
+
+			newAlt = await remotes.generateAltText({ fileId });
+		} catch (error) {
+			console.error('Error generating alt text:', error);
+			toast.error('Failed to generate alt text');
+		} finally {
+			input.disabled = false;
+			generating = false;
+		}
+	}
 </script>
 
-<Input
-	bind:value={newAlt}
-	placeholder="Wprowadź tekst alternatywny"
-	class="w-full"
-	aria-label="Tekst alternatywny obrazu"
-/>
+<div class="flex items-center gap-2">
+	<Input
+		bind:ref={input}
+		bind:value={newAlt}
+		placeholder="Wprowadź tekst alternatywny"
+		class="w-full"
+		aria-label="Tekst alternatywny obrazu"
+	/>
+	<Button
+		size="icon"
+		onclick={generateAltText}
+		disabled={generating}
+		aria-label="Generate alt text"
+	>
+		<Sparkles class={generating ? 'animate-bounce' : ''} />
+	</Button>
+</div>
 
 <Button
 	onclick={() => {
-		remotes.setMediaFileAlt({ fileId, alt: newAlt });
+		try {
+			remotes.setMediaFileAlt({ fileId, alt: newAlt });
+			toast.success('Alt text saved');
+		} catch {
+			toast.error('Failed to save alt text');
+		}
 	}}
 	class="mt-2"
 	disabled={!newAlt.trim() || (alt !== null && newAlt === alt)}>Save alt</Button

package/dist/admin/components/media/media-library.svelte

@@ -132,63 +132,65 @@
 
 	<Item.Root class="w-[25.375rem] shrink-0 p-0" variant="outline">
 		<Item.Content class="h-full">
-			{#if currentFile}
-				<div class="flex items-center justify-end border-b px-6 py-3">
-					<Button
-						type="button"
-						size="sm"
-						class="mr-2.5"
-						variant="destructive"
-						onclick={deleteFileCommand}>Delete</Button
-					>
-				</div>
-				<div class="space-y-6 p-6">
-					<div class="mb-6 flex justify-between gap-6">
-						<div class="aspect-square w-[40.2%] shrink-0 overflow-hidden rounded-2xl border p-1">
-							<img
-								src={currentFile.url}
-								alt={currentFile.name}
-								class="size-full rounded-lg object-contain"
-							/>
-						</div>
-						<div class="mr-2.5 w-[50.2%] shrink-0 space-y-4">
-							<div class="grid grid-cols-1 gap-2">
-								<Label>Type</Label>
-								<Input
-									disabled
-									value={folders.find((folder) => folder.id === currentFile?.folderId)?.name}
+			{#key currentFile}
+				{#if currentFile}
+					<div class="flex items-center justify-end border-b px-6 py-3">
+						<Button
+							type="button"
+							size="sm"
+							class="mr-2.5"
+							variant="destructive"
+							onclick={deleteFileCommand}>Delete</Button
+						>
+					</div>
+					<div class="space-y-6 p-6">
+						<div class="mb-6 flex justify-between gap-6">
+							<div class="aspect-square w-[40.2%] shrink-0 overflow-hidden rounded-2xl border p-1">
+								<img
+									src={currentFile.url}
+									alt={currentFile.name}
+									class="size-full rounded-lg object-contain"
 								/>
 							</div>
-							<div class="grid grid-cols-1 gap-2">
-								<Label>Name</Label>
-								<Input disabled value={currentFile.name} />
+							<div class="mr-2.5 w-[50.2%] shrink-0 space-y-4">
+								<div class="grid grid-cols-1 gap-2">
+									<Label>Type</Label>
+									<Input
+										disabled
+										value={folders.find((folder) => folder.id === currentFile?.folderId)?.name}
+									/>
+								</div>
+								<div class="grid grid-cols-1 gap-2">
+									<Label>Name</Label>
+									<Input disabled value={currentFile.name} />
+								</div>
 							</div>
 						</div>
-					</div>
 
-					<div class="grid grid-cols-1 gap-2">
-						<Label>URL</Label>
-						<Input disabled value={currentFile.url} />
-					</div>
+						<div class="grid grid-cols-1 gap-2">
+							<Label>URL</Label>
+							<Input disabled value={currentFile.url} />
+						</div>
 
-					<div class="grid grid-cols-1 gap-2">
-						<Label>Alt text</Label>
-						<AltInput alt={currentFile.alt} fileId={currentFile.id} />
+						<div class="grid grid-cols-1 gap-2">
+							<Label>Alt text</Label>
+							<AltInput alt={currentFile.alt} fileId={currentFile.id} />
+						</div>
 					</div>
-				</div>
-				<div class="mt-auto p-6">
-					<p class="text-muted-foregound text-xs">
-						Created at: <span class="text-foreground"
-							>{new Date(currentFile.createdAt).toLocaleString()}</span
-						>
-					</p>
-					<p class="text-muted-foregound text-xs">
-						ID: <span class="text-foreground">{currentFile.id}</span>
-					</p>
-				</div>
-			{:else}
-				Select a file to see details
-			{/if}
+					<div class="mt-auto p-6">
+						<p class="text-muted-foregound text-xs">
+							Created at: <span class="text-foreground"
+								>{new Date(currentFile.createdAt).toLocaleString()}</span
+							>
+						</p>
+						<p class="text-muted-foregound text-xs">
+							ID: <span class="text-foreground">{currentFile.id}</span>
+						</p>
+					</div>
+				{:else}
+					Select a file to see details
+				{/if}
+			{/key}
 		</Item.Content>
 	</Item.Root>
 </div>

package/dist/admin/remote/ai.remote.d.ts

@@ -0,0 +1,3 @@
+export declare const generateAltText: import("@sveltejs/kit").RemoteCommand<{
+    fileId: string;
+}, Promise<string>>;

package/dist/admin/remote/ai.remote.js

@@ -0,0 +1,8 @@
+import { command } from '$app/server';
+import { getCMS } from '../../core/cms.js';
+import z from 'zod';
+export const generateAltText = command(z.object({
+    fileId: z.string().uuid()
+}), async ({ fileId }) => {
+    return getCMS().aiAdapter?.generateAltText(fileId) || '';
+});

package/dist/admin/remote/index.d.ts

@@ -6,3 +6,4 @@ export * from './record.remote.js';
 export * from './user.remote.js';
 export * from './languages.remote.js';
 export * from './form.remote.js';
+export * from './ai.remote.js';

package/dist/admin/remote/index.js

@@ -6,3 +6,4 @@ export * from './record.remote.js';
 export * from './user.remote.js';
 export * from './languages.remote.js';
 export * from './form.remote.js';
+export * from './ai.remote.js';

package/dist/ai-openai/index.d.ts

@@ -0,0 +1,2 @@
+import type { AIAdapter, AIConfig } from '../types/adapters/ai.js';
+export declare function openAIAdapter(config: AIConfig): AIAdapter;

package/dist/ai-openai/index.js

@@ -0,0 +1,61 @@
+import { getCMS } from '../core/cms.js';
+import OpenAI from 'openai';
+import { zodResponseFormat } from 'openai/helpers/zod.mjs';
+import z from 'zod';
+import sharp from 'sharp';
+export function openAIAdapter(config) {
+    const openai = new OpenAI({
+        apiKey: config.apiKey
+    });
+    return {
+        generateAltText: async (fileId) => {
+            const altTextSchema = z.object({
+                altText: z.string().min(1)
+            });
+            const mediaFile = await getCMS().databaseAdapter.getMediaFile({
+                data: {
+                    id: fileId
+                }
+            });
+            if (!mediaFile) {
+                throw new Error('Media file not found in database');
+            }
+            const file = await getCMS().filesAdapter.downloadFile(mediaFile.url.split('/').pop() || '');
+            if (!file) {
+                throw new Error('File not found');
+            }
+            // Konwertuj plik na PNG używając Sharp i przekonwertuj na base64
+            const fileBuffer = Buffer.from(await file.arrayBuffer());
+            const pngBuffer = await sharp(fileBuffer).png().toBuffer();
+            const imageBase64 = pngBuffer.toString('base64');
+            const prompt = `Generate a concise and descriptive alt text for the following image file in polish language. The alt text should accurately describe the content and context of the image, be no longer than 125 characters, and avoid using phrases like "image of" or "picture of".`;
+            const completion = await openai.chat.completions.parse({
+                // model: 'gpt-4.1-nano',
+                model: 'gpt-4o',
+                messages: [
+                    {
+                        role: 'user',
+                        content: [
+                            {
+                                type: 'text',
+                                text: prompt
+                            },
+                            {
+                                type: 'image_url',
+                                image_url: {
+                                    url: `data:image/png;base64,${imageBase64}`
+                                }
+                            }
+                        ]
+                    }
+                ],
+                response_format: zodResponseFormat(altTextSchema, 'response')
+            });
+            const response = completion.choices[0].message;
+            if (!response.parsed) {
+                throw new Error('AI response did not match expected format');
+            }
+            return response.parsed.altText;
+        }
+    };
+}

package/dist/core/cms.d.ts

@@ -6,10 +6,12 @@ import type { Language } from '../types/languages.js';
 import type { SingleConfigWithType } from '../types/singles.js';
 import type { PluginConfig } from '../types/plugins.js';
 import type { FormConfig } from '../types/forms.js';
+import type { AIAdapter } from '../types/adapters/ai.js';
 export declare class CMS implements ICMS {
     private config;
     databaseAdapter: DatabaseAdapter;
     filesAdapter: FilesAdapter;
+    aiAdapter: AIAdapter | null;
     collections: Record<string, CollectionConfigWithType>;
     singles: Record<string, SingleConfigWithType>;
     forms: Record<string, FormConfig>;

package/dist/core/cms.js

@@ -3,6 +3,7 @@ export class CMS {
     config;
     databaseAdapter;
     filesAdapter;
+    aiAdapter = null;
     collections;
     singles;
     forms;
@@ -12,6 +13,7 @@ export class CMS {
         this.config = config;
         this.databaseAdapter = config.db;
         this.filesAdapter = config.files;
+        this.aiAdapter = config.ai || null;
         // Initialize auth service
         initAuth(config.auth.adapter(config.auth.config, this.databaseAdapter), {
             cookieName: config.auth.config.sessionCookieName

package/dist/core/server/media/styles/sharp/generateImageStyle.js

@@ -1,7 +1,15 @@
 import { getCMS } from '../../../../cms.js';
 import sharp from 'sharp';
 export async function generateImageStyle(mediaFileId, style) {
-    const file = await getCMS().filesAdapter.getFile(mediaFileId);
+    const mediaFile = await getCMS().databaseAdapter.getMediaFile({
+        data: {
+            id: mediaFileId
+        }
+    });
+    if (!mediaFile) {
+        throw new Error('Media file not found in database');
+    }
+    const file = await getCMS().filesAdapter.downloadFile(mediaFile.url.split('/').pop() || '');
     if (!file) {
         throw new Error('Media file not found');
     }

package/dist/files-local/index.js

@@ -53,14 +53,15 @@ async function processVideo(filepath, filename) {
 }
 export function local() {
     return {
-        getFile: async (id) => {
-            const filepath = resolve(fullDir, id);
+        downloadFile: async (filename) => {
+            const filepath = resolve(fullDir, filename);
             try {
                 const data = await readFile(filepath);
-                const file = new File([data], id);
+                const file = new File([data], filename);
                 return file;
             }
-            catch {
+            catch (e) {
+                console.log(e);
                 return null;
             }
         },

package/dist/types/adapters/ai.d.ts

@@ -0,0 +1,11 @@
+export interface AIConfig {
+    apiKey: string;
+}
+export type AIAdapterConfig = {
+    config: AIConfig;
+    adapter: (config: AIConfig, db: AIAdapter) => AIAdapter;
+};
+export interface AIAdapter {
+    generateAltText: GenerateAltText;
+}
+export type GenerateAltText = (fileId: string) => Promise<string>;

package/dist/types/adapters/ai.js

@@ -0,0 +1 @@
+export {};

package/dist/types/adapters/files.d.ts

@@ -1,7 +1,7 @@
 import type { UploadedMediaFile } from '../media.js';
 export interface FilesAdapter {
-    getFile: GetFile;
+    downloadFile: DownloadFile;
     uploadFile: UploadFile;
 }
-export type GetFile = (id: string) => Promise<File | null>;
+export type DownloadFile = (id: string) => Promise<File | null>;
 export type UploadFile = (file: File) => Promise<UploadedMediaFile>;

package/dist/types/cms.d.ts

@@ -6,6 +6,7 @@ import type { Language } from './languages.js';
 import type { SingleConfig, SingleConfigWithType } from './singles.js';
 import type { PluginConfig } from './plugins.js';
 import type { FormConfig } from './forms.js';
+import type { AIAdapter } from './adapters/ai.js';
 export interface CMSConfig {
     languages: Language[];
     collections?: CollectionConfig[];
@@ -15,6 +16,7 @@ export interface CMSConfig {
     files: FilesAdapter;
     auth: AuthAdapterConfig;
     plugins?: PluginConfig[];
+    ai?: AIAdapter;
 }
 export interface ICMS {
     collections: Record<string, CollectionConfigWithType>;
@@ -24,4 +26,5 @@ export interface ICMS {
     databaseAdapter: DatabaseAdapter;
     filesAdapter: FilesAdapter;
     plugins: PluginConfig[];
+    aiAdapter: AIAdapter | null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "includio-cms",
-	"version": "0.0.35",
+	"version": "0.0.36",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -92,6 +92,10 @@
 		"./auth-lucia": {
 			"types": "./dist/auth-lucia/index.d.ts",
 			"node": "./dist/auth-lucia/index.js"
+		},
+		"./ai-openai": {
+			"types": "./dist/ai-openai/index.d.ts",
+			"node": "./dist/ai-openai/index.js"
 		}
 	},
 	"peerDependencies": {
@@ -124,6 +128,7 @@
 		"@types/node": "^22",
 		"clsx": "^2.1.1",
 		"drizzle-kit": "^0.30.2",
+		"drizzle-orm": "^0.40.0",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-storybook": "9.0.6",
@@ -144,8 +149,7 @@
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.20.0",
 		"vite": "^7.0.4",
-		"vitest": "^3.2.3",
-		"drizzle-orm": "^0.40.0"
+		"vitest": "^3.2.3"
 	},
 	"keywords": [
 		"svelte"
@@ -168,6 +172,7 @@
 		"fast-glob": "^3.3.3",
 		"fluent-ffmpeg": "^2.1.3",
 		"mode-watcher": "^1.0.8",
+		"openai": "^6.7.0",
 		"path-to-regexp": "^8.2.0",
 		"postgres": "^3.4.5",
 		"readline": "^1.3.0",