Merge branch

hm-edu · Oct 16, 2023 · 63ed517 · 63ed517
2 parents e965379 + f5d9b8f
commit 63ed517
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 95 deletions.
diff --git a/README.md b/README.md
@@ -56,7 +56,6 @@ To get started you need to add a configuration file to the project first. Copy t
 | OIDC_CLIENT_ID    | string  | "..."                                  | Client Id for this application in Identity provider.                                                                                               |
 | OIDC_CLIENT_SECRET | string  | "..."                                 | Secret key for OpenID Connect. 
 | OIDC_LOGOUT_URI | string  | "https://...."                                 | URL to logout from Identity provider                                                                                                                  |
-| COMPOSER_PATH    | string  | "..."                                  | Path to PHP Composer libariries (only needed for OpenID Connect).                                                                                                                     |
 | OPENAI_API_KEY   | string  | sk-...                                 | Open AI Api key                                                                                                                                    |
 | IMPRINT_LOCATION | string  | https://your-university/imprint        | A link to your imprint. Alternatively you can replace the file index.php under /impressum with your own html/ php of your imprint.                 |
 | PRIVACY_LOCATION | string  | https://your-university/privacy-policy | A link to your privacy policy. Alternatively you can replace the file index.php under /datenschutz with your own html/ php of your privacy policy. |

diff --git a/about.htm b/about.htm
diff --git a/app.css b/app.css
@@ -499,3 +499,32 @@ details > summary::-webkit-details-marker {
   font-size: 0.9rem;
 }
 
+label{
+  cursor: pointer;
+}
+
+input[type="radio"] + p{
+  padding: 0.35rem 0.75rem;
+
+  cursor: pointer;
+  width: max-content;
+  margin: 0;
+  transition: all 0.2s ease;
+}
+
+input[type="radio"]:checked + p{
+  background: rgb(35,48,176);
+  color: #fff;
+}
+
+input[type="radio"]{
+  display: none;
+}
+
+.radiogroup{
+  display: flex;
+  width: max-content;
+  margin-top: 0.5rem;
+  user-select: none;
+  background: #f6f6f6;
+}
diff --git a/datenschutz/index.php b/datenschutz/index.php
@@ -1,6 +1,6 @@
 <?php
-if (file_exists(".env")){
-    $env = parse_ini_file('.env');
+if (file_exists("../.env")){
+    $env = parse_ini_file('../.env');
 }	
 $privacyLocation = isset($env) ? $env["PRIVACY_LOCATION"] : getenv("PRIVACY_LOCATION");
 

diff --git a/impressum/index.php b/impressum/index.php
@@ -1,6 +1,6 @@
 <?php
-if (file_exists(".env")){
-    $env = parse_ini_file('.env');
+if (file_exists("../.env")){
+    $env = parse_ini_file('../.env');
 }	
 $imprintLocation = isset($env) ? $env["IMPRINT_LOCATION"] : getenv("IMPRINT_LOCATION");
 

diff --git a/interface.php b/interface.php
@@ -28,9 +28,25 @@
 <div class="wrapper">
   <div class="sidebar">
 	<div class="logo" onclick="load(this, 'chat.htm')">
-	 <img src="/img/logo.svg" alt="Logo">
+	 <img src="/img/hawki.svg" alt="HAWK Logo" width="150px">
 	</div>
 	<div class="menu">
+		<details>
+			<summary>
+				<h3>Modell ⓘ</h3>
+			</summary>
+			Wähle eines der KI Modelle.
+		</details>
+		<div class="radiogroup">
+		<label>
+			<input type="radio" name="model" onchange="localStorage.setItem('model', 'gpt-3.5-turbo')" checked="checked"/>
+			<p>GPT 3.5 Turbo</p>
+		</label>
+		<label>
+			<input type="radio" name="model" onchange="localStorage.setItem('model', 'gpt-4')"/>
+			<p>GPT 4</p>
+		</label>
+		</div>
 		<details>
 			<summary>
 				<h3>Konversation ⓘ</h3>
@@ -118,7 +134,7 @@
 		echo "oidc_logout.php";
 		} else echo "logout.php" ?>>Abmelden (<?php echo $_SESSION['username']?>)</a>
 	  <br>
-	  <a href="/datenschutz" target="_blank" >Datenschutz</a>
+	  <a href="#" onclick="load(this, 'datenschutz.htm')">Datenschutz</a>
 	  <a href="/impressum" target="_blank">Impressum</a>
 	</div>
   </div>
@@ -207,8 +223,6 @@
 
   </div>
 
-
-
   <template id="message">
 		 <div class="message">
 			 <div class="message-content">
@@ -231,6 +245,26 @@
 	</div>
 </div>
 
+<div class="modal" onclick="modalClick(this)" id="gpt4"> 
+	<div class="modal-content">
+		<h2>Upgrade auf GPT4</h2>
+		<p>Die Hochschule stellt Ihnen jetzt GPT4 zur Verfügung. 
+			Komplexere Eingaben können nun besser verstanden und verarbeitet werden.
+			Sie sollten nun präzisere Antworten erhalten. Die Wartezeit auf eine Antwort kann sich geringfügig verlängern.</p>
+		<button>Bestätigen</button>
+	</div>
+</div>
+
+<div class="modal" onclick="modalClick(this)" id="gpt4"> 
+	<div class="modal-content">
+		<h2>Upgrade auf GPT4</h2>
+		<p>Die Hochschule stellt Ihnen jetzt GPT4 zur Verfügung. 
+			Komplexere Eingaben können nun besser verstanden und verarbeitet werden.
+			Sie sollten nun präzisere Antworten erhalten. Die Wartezeit auf eine Antwort kann sich geringfügig verlängern.</p>
+		<button>Bestätigen</button>
+	</div>
+</div>
+
 <script>
 	visualViewport.addEventListener("resize", update);
 	visualViewport.addEventListener("scroll", update);
@@ -330,7 +364,7 @@ function handleKeydownUserPost(event){
 		document.querySelector('.limitations')?.remove();
 
 		const requestObject = {};
-		requestObject.model = 'gpt-4';
+		requestObject.model = localStorage.getItem("model") || 'gpt-3.5-turbo';
 		requestObject.stream = true;
 		requestObject.messages = [];
 		const messageElements = messagesElement.querySelectorAll(".message");
@@ -383,44 +417,33 @@ function handleKeydownUserPost(event){
 			}
 
 			const decodedData = new TextDecoder().decode(value);
+			console.log(decodedData);
 			let chunks = decodedData.split("data: ");
 			chunks.forEach((chunk, index) => {
 				if(chunk.indexOf('finish_reason":"stop"') > 0) return false;
 				if(chunk.indexOf('DONE') > 0) return false;
 				if(chunk.indexOf('role') > 0) return false;
-				if(chunk.length === 0) return false;
-				// First check if chunk is valid json.
-				// Otherwise we do not see the correct error message.
-				try {
-					const json = JSON.parse(chunk);
-					if ("choices" in json) {
-						// console.log(json["choices"]);
-						// normal response
-						document.querySelector(".message:last-child").querySelector(".message-text").innerHTML +=
-							json["choices"][0]["delta"].content;
-					} else {
-						if ("error" in json) {
-							if ("message" in json.error) {
-								// console.log(json.error.message);
-								document.querySelector(".message:last-child").querySelector(".message-text").innerHTML =
-									'<em>' + json.error.message + '</em>';
-							} else {
-								console.log(json.error);
-							}
-						} else {
-							console.log(json);
-						}
-					}
-				} catch(error) {
-					console.log(chunk);
-					console.error(error.message);
-				}
+				if(chunk.length == 0) return false;
+				if(chunk != "") console.log(JSON.parse(chunk)["choices"][0]["delta"])
+				console.log(JSON.parse(chunk)["choices"][0]["delta"]);
+				document.querySelector(".message:last-child").querySelector(".message-text").innerHTML +=  escapeHTML(JSON.parse(chunk)["choices"][0]["delta"].content);
 			})
 
+			// Check if the content has code block
+			document.querySelector(".message:last-child").querySelector(".message-text").innerHTML = document.querySelector(".message:last-child").querySelector(".message-text").innerHTML.replace(/```([\s\S]+?)```/g, '<pre><code>$1</code></pre>').replace(/\*\*.*?\*\*/g, '');;
+			hljs.highlightAll();
 			scrollToLast();
 		}
 	}
 
+	function escapeHTML(str) {
+    return str.replace(/&/g, '&amp;')
+              .replace(/</g, '&lt;')
+              .replace(/>/g, '&gt;')
+              .replace(/"/g, '&quot;')
+              .replace(/'/g, '&#039;');
+}
+
 
 	function addMessage(message){
 		const messagesElement = document.querySelector(".messages");
@@ -469,6 +492,10 @@ function copyToInput(selector) {
 		document.querySelector("#data-protection").remove();
 	}
 
+	if(localStorage.getItem("gpt4")){
+		document.querySelector("#gpt4").remove();
+	}
+
 	function modalClick(element){
 		sessionStorage.setItem(element.id, "true")
 		element.remove();

diff --git a/oic_login.php b/oic_login.php
diff --git a/stream-api.php b/stream-api.php
@@ -42,7 +42,7 @@
 ]);
 curl_setopt($ch, CURLOPT_WRITEFUNCTION, function($ch, $data) {
 	echo $data;
-	// ob_flush();
+	ob_flush();
 	flush();
 	return strlen($data);
 });