Display pictures in senses

backend/FwLite/FwLiteShared/Services/MiniLcmApiNotifyWrapper.cs

@@ -123,6 +123,42 @@ async Task<ExampleSentence> IMiniLcmWriteApi.UpdateExampleSentence(Guid entryId,
         return result;
     }
 
+    async Task<Picture> IMiniLcmWriteApi.CreatePicture(Guid entryId, Guid senseId, Picture picture, BetweenPosition? position)
+    {
+        await using var _ = BeginTrackingChanges();
+        var result = await _api.CreatePicture(entryId, senseId, picture, position);
+        NotifyEntryChanged(entryId);
+        return result;
+    }
+
+    async Task<Picture> IMiniLcmWriteApi.UpdatePicture(Guid entryId, Guid senseId, Guid pictureId, UpdateObjectInput<Picture> update)
+    {
+        await using var _ = BeginTrackingChanges();
+        var result = await _api.UpdatePicture(entryId, senseId, pictureId, update);
+        NotifyEntryChanged(entryId);
+        return result;
+    }
+
+    async Task<Picture> IMiniLcmWriteApi.UpdatePicture(Guid entryId, Guid senseId, Picture before, Picture after, IMiniLcmApi? api)
+    {
+        await using var _ = BeginTrackingChanges();
+        var result = await _api.UpdatePicture(entryId, senseId, before, after, api ?? this);
+        NotifyEntryChanged(entryId);
+        return result;
+    }
+
+    async Task IMiniLcmWriteApi.MovePicture(Guid entryId, Guid senseId, Guid pictureId, BetweenPosition position)
+    {
+        await _api.MovePicture(entryId, senseId, pictureId, position);
+        NotifyEntryChanged(entryId);
+    }
+
+    async Task IMiniLcmWriteApi.DeletePicture(Guid entryId, Guid senseId, Guid pictureId)
+    {
+        await _api.DeletePicture(entryId, senseId, pictureId);
+        NotifyEntryChanged(entryId);
+    }
+
     async Task<ComplexFormComponent> IMiniLcmWriteApi.CreateComplexFormComponent(ComplexFormComponent complexFormComponent, BetweenPosition<ComplexFormComponent>? position)
     {
         var result = await _api.CreateComplexFormComponent(complexFormComponent, position);

backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs

@@ -382,6 +382,37 @@ public async Task DeleteExampleSentence(Guid entryId, Guid senseId, Guid example
         OnDataChanged();
     }
 
+    [JSInvokable]
+    public async Task<Picture> CreatePicture(Guid entryId, Guid senseId, Picture picture)
+    {
+        var createdPicture = await _wrappedApi.CreatePicture(entryId, senseId, picture);
+        OnDataChanged();
+        return createdPicture;
+    }
+
+    [JSInvokable]
+    public async Task<Picture> UpdatePicture(Guid entryId, Guid senseId, Picture before, Picture after)
+    {
+        var updatedPicture = await _wrappedApi.UpdatePicture(entryId, senseId, before, after);
+        OnDataChanged();
+        return updatedPicture;
+    }
+
+    [JSInvokable]
+    // previousPictureId and nextPictureId represent the target position, where the picture should end up after being moved
+    public async Task MovePicture(Guid entryId, Guid senseId, Guid pictureId, Guid? previousPictureId = null, Guid? nextPictureId = null)
+    {
+        await _wrappedApi.MovePicture(entryId, senseId, pictureId, new MiniLcm.SyncHelpers.BetweenPosition(previousPictureId, nextPictureId));
+        OnDataChanged();
+    }
+
+    [JSInvokable]
+    public async Task DeletePicture(Guid entryId, Guid senseId, Guid pictureId)
+    {
+        await _wrappedApi.DeletePicture(entryId, senseId, pictureId);
+        OnDataChanged();
+    }
+
     [JSInvokable]
     public async Task<ReadFileResponseJs?> GetFileStream(string mediaUri)
     {

backend/FwLite/LcmCrdt/MediaServer/LcmMediaService.cs

@@ -1,3 +1,5 @@
+using System.Collections.Concurrent;
+using System.Net;
 using Microsoft.Extensions.Options;
 using MiniLcm.Project;
 using Refit;
@@ -48,19 +50,46 @@ public async Task DeleteResource(Guid fileId)
     /// <param name="fileId">media file Id</param>
     /// <returns></returns>
     /// <exception cref="FileNotFoundException"></exception>
+    // Coalesces concurrent downloads of the same file into one shared task. Without this, two
+    // requests for a not-yet-cached file (e.g. the UI loading a picture more than once at first
+    // render) both see no local resource and both call DownloadResource, whose AddLocalResource
+    // inserts a LocalResource keyed by the file id — the second insert then fails with
+    // "UNIQUE constraint failed: LocalResource.Id". The first caller starts the task; others
+    // await the same one. Keyed by file id (a unique Guid), so different files still download in
+    // parallel.
+    private static readonly ConcurrentDictionary<Guid, Task<LocalResource>> DownloadTasks = new();
+
     public async Task<ReadFileResponse> GetFileStream(Guid fileId)
     {
         var localResource = await resourceService.GetLocalResource(fileId);
         if (localResource is null)
         {
-            var connectionStatus = await httpClientProvider.ConnectionStatus();
-            if (connectionStatus == ConnectionStatus.Online)
+            var downloadTask = DownloadTasks.GetOrAdd(fileId, async _ =>
+            {
+                // Check again if we have it locally in case another thread completed before the GetOrAdd factory ran
+                return await resourceService.GetLocalResource(fileId) ?? await resourceService.DownloadResource(fileId, this);
+            });
+            try
             {
-                localResource = await resourceService.DownloadResource(fileId, this);
+                localResource = await downloadTask;
             }
-            else
+            catch
             {
-                return new ReadFileResponse(ReadFileResult.Offline);
+                // Did the download fail because we're offline? Return an explicit "we're offline" result
+                // so that the frontend can display some appropriate UI. If we're online and yet the download
+                // failed, then that's a real error that should be rethrown.
+                if (await httpClientProvider.ConnectionStatus() == ConnectionStatus.Offline)
+                {
+                    return new ReadFileResponse(ReadFileResult.Offline);
+                }
+                throw;
+            }
+            finally
+            {
+                // Once the download completes, we need to remove the task from the ConcurrentDictionary
+                // so that a new download can be attempted later by a different thread. That way if the local
+                // file is ever deleted (say, by being replaced with a different picture) a new download can start.
+                DownloadTasks.TryRemove(new KeyValuePair<Guid, Task<LocalResource>>(fileId, downloadTask));
             }
         }
         //todo, consider trying to download the file again, maybe the cache was cleared
@@ -69,16 +98,19 @@ public async Task<ReadFileResponse> GetFileStream(Guid fileId)
         return new(File.OpenRead(localResource.LocalPath), Path.GetFileName(localResource.LocalPath));
     }
 
-    private async Task<(Stream? stream, string? filename)> RequestMediaFile(Guid fileId)
-    {
-        var mediaClient = await MediaServerClient();
-        var response = await mediaClient.DownloadFile(fileId);
-        if (!response.IsSuccessStatusCode)
-        {
-            throw new Exception($"Failed to download file {fileId}: {response.StatusCode} {response.ReasonPhrase}");
-        }
-        return (await response.Content.ReadAsStreamAsync(), response.Content.Headers.ContentDisposition?.FileName?.Replace("\"", ""));
-    }
+    // Media files are proxied (lexbox -> FwHeadless). A cold request — e.g. the first one after the
+    // backend starts, before its code paths are JIT-warmed — can exceed the proxy's timeout and come
+    // back as 504 (or 502/503) even though the backend keeps working and warms up. Retrying a
+    // transient failure a few times usually hits the now-warm backend and succeeds. A failed fetch
+    // never reaches AddLocalResource, so retrying cannot reintroduce the duplicate-key insert.
+    private const int MaxDownloadAttempts = 3;
+    private static readonly HashSet<HttpStatusCode> TransientDownloadStatusCodes =
+    [
+        HttpStatusCode.RequestTimeout,      // 408
+        HttpStatusCode.BadGateway,          // 502
+        HttpStatusCode.ServiceUnavailable,  // 503
+        HttpStatusCode.GatewayTimeout,      // 504
+    ];
 
     private async Task<IMediaServerClient> MediaServerClient()
     {
@@ -91,16 +123,32 @@ async Task<DownloadResult> IRemoteResourceService.DownloadResource(string remote
     {
         var projectResourceCachePath = ProjectResourceCachePath;
         Directory.CreateDirectory(projectResourceCachePath);
-        var (stream, filename) = await RequestMediaFile(new Guid(remoteId));
-        if (stream is null) throw new FileNotFoundException(remoteId);
-        await using (stream)
+        var mediaClient = await MediaServerClient();
+        var fileId = new Guid(remoteId);
+        for (var attempt = 1; ; attempt++)
         {
-            filename = Path.GetFileName(filename);
-            var localPath = Path.Combine(projectResourceCachePath, filename ?? remoteId);
-            localPath = EnsureUnique(localPath);
-            await using var localFile = File.Create(localPath);
-            await stream.CopyToAsync(localFile);
-            return new DownloadResult(localPath);
+            using var response = await mediaClient.DownloadFile(fileId);
+            if (response.IsSuccessStatusCode)
+            {
+                await using var stream = await response.Content.ReadAsStreamAsync();
+                if (stream is null) throw new FileNotFoundException(remoteId);
+                var filename = response.Content.Headers.ContentDisposition?.FileName?.Replace("\"", "");
+                filename = Path.GetFileName(filename);
+                var localPath = Path.Combine(projectResourceCachePath, filename ?? remoteId);
+                localPath = EnsureUnique(localPath);
+                await using var localFile = File.Create(localPath);
+                await stream.CopyToAsync(localFile);
+                return new DownloadResult(localPath);
+            }
+
+            var statusCode = response.StatusCode;
+            var reasonPhrase = response.ReasonPhrase;
+            if (attempt >= MaxDownloadAttempts || !TransientDownloadStatusCodes.Contains(statusCode))
+            {
+                throw new Exception($"Failed to download file {fileId}: {statusCode} {reasonPhrase}");
+            }
+
+            await Task.Delay(TimeSpan.FromMilliseconds(200));
         }
     }
 

frontend/viewer/package.json

@@ -67,7 +67,6 @@
     "@vitest/ui": "catalog:",
     "bits-ui": "2.16.4",
     "clsx": "^2.1.1",
-    "embla-carousel-svelte": "^8.6.0",
     "eslint": "catalog:",
     "eslint-config-prettier": "^10.1.8",
     "eslint-output": "catalog:",

frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts

@@ -21,6 +21,7 @@ import type {ICreateEntryOptions} from '../../MiniLcm/ICreateEntryOptions';
 import type {IComplexFormComponent} from '../../MiniLcm/Models/IComplexFormComponent';
 import type {ISense} from '../../MiniLcm/Models/ISense';
 import type {IExampleSentence} from '../../MiniLcm/Models/IExampleSentence';
+import type {IPicture} from '../../MiniLcm/Models/IPicture';
 import type {IReadFileResponseJs} from './IReadFileResponseJs';
 import type {IUploadFileResponse} from '../../MiniLcm/Media/IUploadFileResponse';
 import type {ILcmFileMetadata} from '../../MiniLcm/Media/ILcmFileMetadata';
@@ -75,6 +76,10 @@ export interface IMiniLcmJsInvokable
 	createExampleSentence(entryId: string, senseId: string, exampleSentence: IExampleSentence) : Promise<IExampleSentence>;
 	updateExampleSentence(entryId: string, senseId: string, before: IExampleSentence, after: IExampleSentence) : Promise<IExampleSentence>;
 	deleteExampleSentence(entryId: string, senseId: string, exampleSentenceId: string) : Promise<void>;
+	createPicture(entryId: string, senseId: string, picture: IPicture) : Promise<IPicture>;
+	updatePicture(entryId: string, senseId: string, before: IPicture, after: IPicture) : Promise<IPicture>;
+	movePicture(entryId: string, senseId: string, pictureId: string, previousPictureId?: string, nextPictureId?: string) : Promise<void>;
+	deletePicture(entryId: string, senseId: string, pictureId: string) : Promise<void>;
 	getFileStream(mediaUri: string) : Promise<IReadFileResponseJs>;
 	saveFile(streamReference: Blob | ArrayBuffer | Uint8Array, metadata: ILcmFileMetadata) : Promise<IUploadFileResponse>;
 }

frontend/viewer/src/lib/dotnet-types/generated-types/MiniLcm/Models/IPicture.ts

@@ -11,6 +11,5 @@ export interface IPicture
 	order: number;
 	mediaUri: string;
 	caption: IRichMultiString;
-	deletedAt?: string;
 }
 /* eslint-enable */

frontend/viewer/src/lib/dotnet-types/index.ts

@@ -16,6 +16,7 @@ export * from './generated-types/MiniLcm/Models/ITranslation';
 export * from './generated-types/MiniLcm/Models/IMorphType';
 export * from './generated-types/MiniLcm/Models/IObjectWithId';
 export * from './generated-types/MiniLcm/Models/IPartOfSpeech';
+export * from './generated-types/MiniLcm/Models/IPicture';
 export * from './generated-types/MiniLcm/Models/IProjectIdentifier';
 export * from './generated-types/MiniLcm/Models/IPublication';
 export * from './generated-types/MiniLcm/Models/IRichSpan';