@christianriedl/utils 1.0.106 → 1.0.108

package/dist/types.d.ts

@@ -134,3 +134,7 @@ export interface IAppConfig {
     loggerQueueSize: number;
     logDescending: boolean;
 }
+export type IdType = string | number;
+export interface IEntity {
+    id: IdType;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@christianriedl/utils",
-  "version": "1.0.106",
+  "version": "1.0.108",
   "description": "Interfaces, local storage, service worker, configuration, application state",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/OpenAI.vue

@@ -12,8 +12,11 @@
     const appConfig = inject(appConfigSymbol)!;
     const question = toRef(props, "prompt");
     const replyLines = ref<string[]>([]);
-    const qcols = computed(() => appState.size.value >= ESize.md ? 11 : 10); 
+    const qcols = computed(() => appState.size.value >= ESize.md ? 10 : 9); 
     const isCamera = ref(false);
+    const isUpload = ref(false);
+    const files = ref<File[]>([]);
+    const dataUrl = ref("");
     const camera = ref<InstanceType<typeof Camera>>();
 
     onUnmounted (() => {
@@ -22,11 +25,19 @@
     });
 
     async function onComplete() {
-        let answer: ICompleteData;
         replyLines.value = [ "WAITING ..." ];
-        if (isCamera.value && camera.value) {
-            const dataurl = await camera.value.snapshot();
-            answer = await openAI.completeImage(question.value, dataurl!);
+        files.value = [];
+        isUpload.value = false;
+        let answer: ICompleteData;
+        if (camera.value) {
+            dataUrl.value = await camera.value.snapshot() as string;
+            camera.value.stop();
+            camera.value = undefined;
+            isCamera.value = false;
+        }
+        if (dataUrl.value) {
+            answer = await openAI.completeImage(question.value, dataUrl.value);
+            dataUrl.value = "";
         }
         else {
             answer = await openAI.complete(question.value);
@@ -42,6 +53,7 @@
         question.value = result.item(0).transcript;
     }
     function onCamera() {
+        replyLines.value = [];
         isCamera.value = !isCamera.value;
         if (isCamera.value && !question.value) {
             question.value = "Was erkennst du auf dem Bild ?";
@@ -51,6 +63,19 @@
             camera.value = undefined;
         }
     }
+    function onFile() {
+        if (!question.value) {
+            question.value = "Was erkennst du auf dem Bild ?";
+        }
+        if (files.value && files.value.length > 0) {
+            const reader = new FileReader();
+            reader.addEventListener ("load", async() => {
+                // convert image file to base64 string
+                dataUrl.value = reader.result as string;
+            }, false, );
+            reader.readAsDataURL(files.value[0]);
+        }
+    }
 </script>
 
 <template>
@@ -60,11 +85,14 @@
                 <v-text-field name="subject" type="text" v-model="question" density="compact" hide-details></v-text-field>
             </v-col>
             <v-col :cols="12 - qcols">
-                <v-btn @click="onComplete">AI</v-btn>
-                <microphone lang="de" @result="onResult"></microphone>
-                <v-btn variant="tonal" class="bg-office" @click="onCamera">
+                <v-btn class="aibutton" @click="onComplete">AI</v-btn>
+                <microphone lang="de" cls="aibutton" @result="onResult"></microphone>
+                <v-btn variant="tonal" class="bg-office aibutton" @click="onCamera">
                     <v-icon size="large" icon="$webcam" color="primary"></v-icon>
                 </v-btn>
+                <v-btn variant="tonal" class="bg-office aibutton" @click="isUpload=true;replyLines=[]">
+                    <v-icon size="large" icon="$image" color="primary"></v-icon>
+                </v-btn>
             </v-col>
         </v-row>
         <v-row v-if="isCamera" dense align="center">
@@ -77,9 +105,26 @@
                 </v-row>
             </v-col>
         </v-row>
+        <v-row v-if="isUpload" dense align="center">
+            <v-col cols="6">
+                <v-file-input show-size clearable multiple hide-details v-model="files" accept="image/*" label="Select File" prepend-icon="" append-icon="" @update:modelValue="onFile">
+                </v-file-input>
+            </v-col>
+            <v-col cols="6">
+                <img width="100%" :src="dataUrl">
+                </img>
+            </v-col>
+        </v-row>
         <v-row v-else v-for="(line, index) in replyLines" :key=index dense align="center">
             <v-col cols="12">{{line}}</v-col>
         </v-row>
     </v-container>
 </template>
 
+<style scoped>
+    .aibutton {
+        min-width: 32px;
+        padding: 0 8px;
+    }
+</style>
+