publish improvements

Author: mythz

MyApp.ServiceInterface/AgentEventsManager.cs

@@ -19,15 +19,25 @@ public class AgentEventsManager(ILogger<AgentEventsManager> log, AppData appData
 
     public void QueuePublishedMedia(PublishedMedia media, string userId)
     {
-        if (media.Caption == null)
+        if (media.Type == AssetType.Image)
         {
-            EnqueueMediaChat(media, CaptionMediaCommand.Prompt,  callback:nameof(CaptionMediaCommand),  userId:userId);
+            if (media.Caption == null)
+            {
+                EnqueueMediaImageChat(media, CaptionMediaCommand.ImagePrompt,  callback:nameof(CaptionMediaCommand),  userId:userId);
+            }
+            if (media.Description == null)
+            {
+                EnqueueMediaImageChat(media, DescribeMediaCommand.Prompt, callback:nameof(DescribeMediaCommand), userId:userId);
+            }
         }
-        if (media.Description == null)
+        else if (media.Type == AssetType.Audio)
         {
-            EnqueueMediaChat(media, DescribeMediaCommand.Prompt, callback:nameof(DescribeMediaCommand), userId:userId);
+            if (media.Caption == null)
+            {
+                EnqueueMediaAudioChat(media, CaptionMediaCommand.AudioPrompt + media.Prompt, callback:nameof(CaptionMediaCommand), userId:userId);
+            }
         }
-        
+            
         var artifactRefId = media.Id * -1;
         QueuedArtifactRefs[artifactRefId] = new ArtifactRef
         {
@@ -276,7 +286,7 @@ public BackgroundJobRef EnqueueArtifactChat(Artifact artifact, string prompt, st
         return jobRef;
     }
 
-    public BackgroundJobRef EnqueueMediaChat(PublishedMedia media, string prompt, string? callback = null, string? userId = null, string? model = null)
+    public BackgroundJobRef EnqueueMediaImageChat(PublishedMedia media, string prompt, string? callback = null, string? userId = null, string? model = null)
     {
         model ??= appData.Config.VisualLanguageModel;
         var taskId = PreciseTimestamp.UniqueUtcNowTicks;
@@ -305,6 +315,35 @@ public BackgroundJobRef EnqueueMediaChat(PublishedMedia media, string prompt, st
         });
         return jobRef;
     }
+    
+    public BackgroundJobRef EnqueueMediaAudioChat(PublishedMedia media, string prompt, string? callback = null, string? userId = null, string? model = null)
+    {
+        model ??= appData.Config.VisualLanguageModel;
+        var taskId = PreciseTimestamp.UniqueUtcNowTicks;
+        var refId = $"{taskId}";
+        var replyTo = $"/api/{nameof(CompleteChatCompletion)}".AddQueryParam(nameof(refId), refId);
+        var jobRef = jobs.EnqueueCommand<ChatCompletionCommand>(new ChatCompletion {
+            Model = model,
+            Messages = [
+                new()
+                {
+                    Role = "user", 
+                    Content = [
+                        AiContent.Text(prompt)
+                    ]
+                },
+            ]
+        }, new() {
+            RefId = refId,
+            ReplyTo = replyTo,
+            Callback = callback,
+            UserId = userId,
+            Args = new() {
+                ["mediaId"] = $"{media.Id}",
+            },
+        });
+        return jobRef;
+    }
 
     public void Reload(IDbConnection db)
     {

MyApp.ServiceInterface/Commands/OpenAiChatCommand.cs

@@ -164,12 +164,12 @@ protected override async Task RunAsync(ChatResponse request, CancellationToken t
     }
 }
 
-
 public class CaptionMediaCommand(
     ILogger<CaptionMediaCommand> logger, IBackgroundJobs jobs, IDbConnectionFactory dbFactory) 
     : AsyncCommand<ChatResponse>
 {
-    public const string Prompt = "Caption this picture in 1 short sentence";
+    public const string ImagePrompt = "Caption this picture in 1 short sentence";
+    public const string AudioPrompt = "Generate a short title for this audio generation prompt. The title should be suitable for use as a filename or a short description of the audio content. The title should be less than 8 words and describe the audio content in a concise way. Don't generate multiple options, just a single title. This is the prompt:\n\n";
 
     protected override async Task RunAsync(ChatResponse request, CancellationToken token)
     {

MyApp.ServiceInterface/PublishServices.cs

@@ -320,16 +320,9 @@ public async Task<QueryResponse<MediaInfo>> Get(QueryPublishedMedia request)
         }
         if (request.Tag != null)
         {
-            var tag = appData.GetTag(request.Tag);
-            if (tag != null)
-            {
-                var tagColumn = q.Column<PublishedMedia>(x => x.Tags);
-                q.And(tagColumn + " ? {0}", tag.Name);
-            }
-            else
-            {
-                log.LogWarning("Unknown tag {Tag}", request.Tag);
-            }
+            //var tag = appData.GetTag(request.Tag);
+            var tagColumn = q.Column<PublishedMedia>(x => x.Tags);
+            q.And(tagColumn + " ? {0}", request.Tag);
         }
 
         if (request.User != null)

MyApp.ServiceModel/Publish.cs

@@ -310,6 +310,7 @@ public class MediaInfo
 {
     public int Id { get; set; }
     public string Name { get; set; }
+    public string? Caption { get; set; }
     public AssetType Type { get; set; }
     public int Width { get; set; }
     public int Height { get; set; }

MyApp/wwwroot/css/app.css

@@ -1293,8 +1293,8 @@
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
-  .min-h-\[3rem\] {
-    min-height: 3rem;
+  .min-h-\[4rem\] {
+    min-height: 4rem;
   }
   .min-h-\[350px\] {
     min-height: 350px;

MyApp/wwwroot/llms/media.mjs

@@ -488,13 +488,14 @@ const App = {
                                             </div>
                                         </div>
                                         <!-- Categories Section -->
-                                        <div v-for="(score, category) in parsedMedia.categories ?? {}"
+                                        <a v-for="(score, category) in parsedMedia.categories ?? {}"
                                             :key="'cat-' + category"
+                                            :href="categoryHref(category)"
                                             class="group cursor-pointer relative inline-flex items-center rounded-full overflow-hidden px-3 py-1 text-xs font-medium ring-1 ring-inset hover:dark:bg-blue-900 hover:dark:ring-blue-500/80"
-                                            :class="score 
-                                                ? 'text-blue-800 dark:text-blue-200 ring-blue-600/20 dark:ring-blue-400/30' 
+                                            :class="score
+                                                ? 'text-blue-800 dark:text-blue-200 ring-blue-600/20 dark:ring-blue-400/30'
                                                 : 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 ring-blue-600/20 dark:ring-blue-400/30'"
-                                            :title="'Score: ' + (score ? Math.round(score * 100) + '%' : 'No score')">
+                                            :title="'Search category: ' + category + (score ? ' · Score: ' + Math.round(score * 100) + '%' : '')">
                                             <!-- Background fill based on score -->
                                             <div v-if="score"
                                                 class="group-hover:hidden absolute inset-0 bg-gradient-to-r from-blue-300 to-blue-400 dark:from-blue-700 dark:to-blue-800"
@@ -504,20 +505,21 @@ const App = {
                                                 class="group-hover:hidden absolute inset-0 bg-blue-100 dark:bg-blue-900/30"></div>
                                             <!-- Text content -->
                                             <span class="relative z-10">{{ category }}</span>
-                                        </div>
+                                        </a>
                                     </div>
                                 </div>
 
-                                <!-- Tags Section -->
-                                <div v-if="Object.keys(parsedMedia.tags ?? {}).length">
+                                <!-- Tags Section (ordered by strength) -->
+                                <div v-if="sortedTags.length">
                                     <div class="flex flex-wrap gap-2">
-                                        <div v-for="(score, tag) in parsedMedia.tags ?? {}"
+                                        <a v-for="[tag, score] in sortedTags"
                                             :key="'tag-' + tag"
+                                            :href="tagHref(tag)"
                                             class="group cursor-pointer relative inline-flex items-center rounded-full overflow-hidden px-3 py-1 text-xs font-medium ring-1 ring-inset hover:dark:bg-green-900 hover:dark:ring-green-600/80"
-                                            :class="score 
-                                                ? 'text-emerald-800 dark:text-emerald-200 ring-emerald-600/20 dark:ring-emerald-400/30' 
+                                            :class="score
+                                                ? 'text-emerald-800 dark:text-emerald-200 ring-emerald-600/20 dark:ring-emerald-400/30'
                                                 : 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-800 dark:text-emerald-200 ring-emerald-600/20 dark:ring-emerald-400/30'"
-                                            :title="'Score: ' + (score ? Math.round(score * 100) + '%' : 'No score')">
+                                            :title="'Search tag: ' + tag + (score ? ' · Score: ' + Math.round(score * 100) + '%' : '')">
                                             <!-- Background fill based on score -->
                                             <div v-if="score"
                                                 class="group-hover:hidden absolute inset-0 bg-gradient-to-r from-emerald-300 to-emerald-400 dark:from-emerald-700 dark:to-emerald-800"
@@ -527,7 +529,7 @@ const App = {
                                                 class="group-hover:hidden absolute inset-0 bg-emerald-100 dark:bg-emerald-900/30"></div>
                                             <!-- Text content -->
                                             <span class="relative z-10">{{ tag }}</span>
-                                        </div>
+                                        </a>
                                     </div>
                                 </div>
                             </div>
@@ -671,6 +673,20 @@ const App = {
             return item
         })
 
+        // Tags as [tag, score] entries ordered by strength (highest score first)
+        const sortedTags = computed(() =>
+            Object.entries(parsedMedia.value?.tags ?? {})
+                .sort((a, b) => (b[1] || 0) - (a[1] || 0)))
+
+        // Clicking a tag/category links to the gallery filtered by it (read by medias.mjs).
+        // Audio media opens the Audio tab (#audio) so the filter lands on the matching grid.
+        const galleryHref = (kind, value) => {
+            const hash = (parsedMedia.value?.type || '').toLowerCase() === 'audio' ? '#audio' : ''
+            return `/m?${kind}=${encodeURIComponent(value)}${hash}`
+        }
+        const tagHref = (tag) => galleryHref('tag', tag)
+        const categoryHref = (category) => galleryHref('category', category)
+
         const aspectRatio = computed(() => {
             const media = parsedMedia.value
             if (!media) return null
@@ -1029,6 +1045,9 @@ const App = {
             media,
             error,
             parsedMedia,
+            sortedTags,
+            tagHref,
+            categoryHref,
             aspectRatio,
             resolveUrl,
             formatDate,