final commit oll

jan-nicklaus · Mar 25, 2024 · de892dd · de892dd
1 parent a24e0aa
commit de892dd
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -153,14 +153,16 @@
                         }      
                     },
                     async askPrompt() {
+                        console.log(document.getElementById("keyfield").value)
                         dec_modal.showModal()
                         const prompt = await this.generatePrompt();
                         let decoder = new TextDecoder()
-                        for await (const chunk of (await fetch("https://api.openai.com/v1/chat/completions", {"method": "POST", "headers": {"Content-Type": "application/json", "Authorization": `Bearer ${this.openaikey}`}, "body": JSON.stringify({
-                            "model": "gpt-4-turbo-preview",
+                        for await (const chunk of (await fetch("https://api.openai.com/v1/chat/completions", {"method": "POST", "headers": {"Content-Type": "application/json", "Authorization": `Bearer ${document.getElementById("keyfield").value}`}, "body": JSON.stringify({
+                            "model": this.models[this.model].model_name,
                             "messages": [{"role": "user", "content": prompt}],
                             "temperature": 0, "stream": true})})).body) {
                                 let decoded = decoder.decode(chunk)
+                                console.log(decoded);
                                 decoded.split("data:").forEach(d => {
                                     let token = d.match(/"content":"(.*)"}/)
                                     console.log(token)
@@ -170,15 +172,16 @@
                                 })
 
                             }
-
-                            //.then(res => res.json()).then(j => console.log(j))// this.llmanswer = j.choices[0].message.content);
+                            if(this.llmanswer === "") {
+                                this.llmanswer = "Fehler bei der Weitergabe der Anfrage! Haben Sie einen gültigen API Key eingegeben?" 
+                            }
                     },
                     async copyPrompt() {
                         navigator.clipboard.writeText(document.getElementById("promptDisplay").innerText);
                         this.copy_text = "Prompt kopiert!"
                     },
                     async copyLLMAnswer() {
-                        navigator.clipboard.writeText(this.llmanswer);
+                        navigator.clipboard.writeText(this.llmanswer.replaceAll("\\n", "\n"));
                         document.getElementById("copyanswerbtn").innerHTML = "Antwort kopiert!";
                     }
                 }))
@@ -228,8 +231,8 @@ <h2 class="text-xl">Entscheid zusammenfassen</h2>
                     <p class="font-bold">Aktueller Prompt</p>
                     <textarea x-html="generatePrompt()" id="promptDisplay" class="w-full flex-grow"></textarea>
                     <button class="border rounded border-black p-2 border-indigo-800  bg-indigo-800 text-white" @click="copyPrompt" x-show="mode === 'noapi'" x-text="copy_text"></button>
-                    <input type="password" x-bind:value="openaikey" @change="e => openaikey = e.target.value" class="p-2 my-2 border rounded border-black h-12" x-show="mode === 'api'" placeholder="OpenAI API Key"/>
-                    <button class="border rounded border-black p-2 border-indigo-800 bg-indigo-800 text-white" @click="askPrompt" x-show="mode === 'api'">Direkt anfragen</button>
+                    <input type="password" id="keyfield" class="p-2 my-2 border rounded border-black h-12" x-show="mode === 'api'" placeholder="OpenAI API Key"/>
+                    <button class="border rounded border-black p-2 border-indigo-800 bg-indigo-800 text-white" @click="askPrompt" x-show="mode === 'api'" >Direkt anfragen</button>
                 </div>
             </div>
 

diff --git a/static/style.css b/static/style.css
@@ -822,6 +822,16 @@ html {
 }
 
 @media (hover: hover) {
+  .btm-nav > *.disabled:hover,
+      .btm-nav > *[disabled]:hover {
+    pointer-events: none;
+    --tw-border-opacity: 0;
+    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
+    --tw-bg-opacity: 0.1;
+    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+    --tw-text-opacity: 0.2;
+  }
+
   .btn:hover {
     --tw-border-opacity: 1;
     border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
@@ -967,6 +977,14 @@ html {
   text-decoration-line: underline;
 }
 
+.menu li.disabled {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  color: var(--fallback-bc,oklch(var(--bc)/0.3));
+}
+
 .modal {
   pointer-events: none;
   position: fixed;
@@ -1108,6 +1126,16 @@ html {
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
 
+.btm-nav > *.disabled,
+    .btm-nav > *[disabled] {
+  pointer-events: none;
+  --tw-border-opacity: 0;
+  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
+  --tw-bg-opacity: 0.1;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+  --tw-text-opacity: 0.2;
+}
+
 .btn:active:hover,
   .btn:active:focus {
   animation: button-pop 0s ease-out;