git.djapps.eu Git - pkg/ggml/sources/llama.cpp/blob

   1 <script lang="ts">
   2         import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
   3         import type { ChatAttachmentDisplayItem } from '$lib/types';
   4         import { FileText, Eye, Info } from '@lucide/svelte';
   5         import { Button } from '$lib/components/ui/button';
   6         import * as Alert from '$lib/components/ui/alert';
   7         import { SyntaxHighlightedCode } from '$lib/components/app';
   8         import { getLanguageFromFilename } from '$lib/utils';
   9         import { convertPDFToImage } from '$lib/utils/browser-only';
  10         import { PdfViewMode } from '$lib/enums';
  11
  12         interface Props {
  13                 currentItem: ChatAttachmentDisplayItem | null;
  14                 displayName: string;
  15                 displayTextContent: string | undefined;
  16                 hasVisionModality: boolean;
  17                 activeModelId?: string;
  18         }
  19
  20         let { currentItem, displayName, displayTextContent, hasVisionModality, activeModelId }: Props =
  21                 $props();
  22
  23         let pdfViewMode = $state<PdfViewMode>(PdfViewMode.PAGES);
  24         let pdfImages = $state<string[]>([]);
  25         let pdfImagesLoading = $state(false);
  26         let pdfImagesError = $state<string | null>(null);
  27
  28         let language = $derived(getLanguageFromFilename(displayName));
  29
  30         async function loadPdfImages() {
  31                 if (pdfImages.length > 0 || pdfImagesLoading || !currentItem) return;
  32
  33                 pdfImagesLoading = true;
  34                 pdfImagesError = null;
  35
  36                 try {
  37                         let file: File | null = null;
  38
  39                         if (currentItem.uploadedFile?.file) {
  40                                 file = currentItem.uploadedFile.file;
  41                         } else if (currentItem.attachment) {
  42                                 // Check if we have pre-processed images
  43                                 if (
  44                                         'images' in currentItem.attachment &&
  45                                         currentItem.attachment.images &&
  46                                         Array.isArray(currentItem.attachment.images) &&
  47                                         currentItem.attachment.images.length > 0
  48                                 ) {
  49                                         pdfImages = currentItem.attachment.images;
  50                                         return;
  51                                 }
  52
  53                                 // Convert base64 back to File for processing
  54                                 if ('base64Data' in currentItem.attachment && currentItem.attachment.base64Data) {
  55                                         const base64Data = currentItem.attachment.base64Data;
  56                                         const byteCharacters = atob(base64Data);
  57                                         const byteNumbers = new Array(byteCharacters.length);
  58                                         for (let i = 0; i < byteCharacters.length; i++) {
  59                                                 byteNumbers[i] = byteCharacters.charCodeAt(i);
  60                                         }
  61                                         const byteArray = new Uint8Array(byteNumbers);
  62                                         file = new File([byteArray], displayName, { type: 'application/pdf' });
  63                                 }
  64                         }
  65
  66                         if (file) {
  67                                 pdfImages = await convertPDFToImage(file);
  68                         } else {
  69                                 throw new Error('No PDF file available for conversion');
  70                         }
  71                 } catch (error) {
  72                         pdfImagesError = error instanceof Error ? error.message : 'Failed to load PDF images';
  73                 } finally {
  74                         pdfImagesLoading = false;
  75                 }
  76         }
  77
  78         $effect(() => {
  79                 if (pdfViewMode === PdfViewMode.PAGES) {
  80                         loadPdfImages();
  81                 }
  82         });
  83 </script>
  84
  85 <div class="mb-4 flex items-center justify-end gap-2">
  86         <Button
  87                 variant={pdfViewMode === PdfViewMode.TEXT ? 'default' : 'outline'}
  88                 size="sm"
  89                 onclick={() => (pdfViewMode = PdfViewMode.TEXT)}
  90                 disabled={pdfImagesLoading}
  91         >
  92                 <FileText class="mr-1 {ICON_CLASS_DEFAULT}" />
  93                 Text
  94         </Button>
  95
  96         <Button
  97                 variant={pdfViewMode === PdfViewMode.PAGES ? 'default' : 'outline'}
  98                 size="sm"
  99                 onclick={() => (pdfViewMode = PdfViewMode.PAGES)}
 100                 disabled={pdfImagesLoading}
 101         >
 102                 {#if pdfImagesLoading}
 103                         <div
 104                                 class="mr-1 {ICON_CLASS_DEFAULT} animate-spin rounded-full border-2 border-current border-t-transparent"
 105                         ></div>
 106                 {:else}
 107                         <Eye class="mr-1 {ICON_CLASS_DEFAULT}" />
 108                 {/if}
 109                 Pages
 110         </Button>
 111 </div>
 112
 113 {#if !hasVisionModality && activeModelId && currentItem}
 114         <Alert.Root class="mb-4 max-w-4xl">
 115                 <Info class={ICON_CLASS_DEFAULT} />
 116                 <Alert.Title>Preview only</Alert.Title>
 117                 <Alert.Description>
 118                         <span class="inline-flex">
 119                                 The selected model does not support vision. Only the extracted
 120                                 <!-- svelte-ignore a11y_click_events_have_key_events -->
 121                                 <!-- svelte-ignore a11y_no_static_element_interactions -->
 122                                 <span
 123                                         class="mx-1 cursor-pointer underline"
 124                                         onclick={() => (pdfViewMode = PdfViewMode.TEXT)}
 125                                 >
 126                                         text
 127                                 </span>
 128                                 will be sent to the model.
 129                         </span>
 130                 </Alert.Description>
 131         </Alert.Root>
 132 {/if}
 133
 134 {#if pdfImagesLoading}
 135         <div class="flex flex-1 items-center justify-center p-8">
 136                 <div class="text-center">
 137                         <div
 138                                 class="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-4 border-white border-t-transparent"
 139                         ></div>
 140                         <p class="text-white/70">Converting PDF to images...</p>
 141                 </div>
 142         </div>
 143 {:else if pdfImagesError}
 144         <div class="flex flex-1 items-center justify-center p-8">
 145                 <div class="text-center">
 146                         <FileText class="mx-auto mb-4 h-16 w-16 text-white/50" />
 147                         <p class="mb-4 text-white/70">Failed to load PDF images</p>
 148                         <p class="text-sm text-white/50">{pdfImagesError}</p>
 149                 </div>
 150         </div>
 151 {:else if pdfImages.length > 0}
 152         {#each pdfImages as image, index (image)}
 153                 <p class="mb-2 text-sm text-white/50">Page {index + 1}</p>
 154                 <img src={image} alt="PDF Page {index + 1}" class="mx-auto max-w-[85vw] rounded-lg shadow-lg" />
 155                 <div class="h-4"></div>
 156         {/each}
 157 {:else}
 158         <div class="flex flex-1 items-center justify-center p-8">
 159                 <div class="text-center">
 160                         <FileText class="mx-auto mb-4 h-16 w-16 text-white/50" />
 161                         <p class="text-white/70">No PDF pages available</p>
 162                 </div>
 163         </div>
 164 {/if}
 165
 166 {#if pdfViewMode === PdfViewMode.TEXT && displayTextContent}
 167         <div class="px-4 pb-4">
 168                 <SyntaxHighlightedCode
 169                         class="max-w-4xl"
 170                         code={displayTextContent}
 171                         {language}
 172                         maxHeight="none"
 173                 />
 174         </div>
 175 {/if}