dall-e-3 incorporated

appatalks · Mar 13, 2024 · b71a117 · b71a117
1 parent ee1e4d8
commit b71a117
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 108 deletions.
diff --git a/core/js/dalle3.js b/core/js/dalle3.js
@@ -0,0 +1,71 @@
+// dall-e-3
+
+function dalle3Send() {
+        // let OPENAI_API_KEY;
+
+        function auth() {
+            fetch('./config.json')
+            .then(response => response.json())
+            .then(config => {
+                OPENAI_API_KEY = config.OPENAI_API_KEY;
+            });
+        }
+
+        // Call the auth() function to retrieve the API key
+        auth();
+
+            // Get user input from the form
+            const prompt = document.getElementById("txtMsg").innerHTML;
+            // const size = document.getElementById("size").value;
+
+            // Check if the API key is available
+            if (!OPENAI_API_KEY) {
+                alert("OpenAI API key not available. Please check your configuration.");
+                return;
+            }
+
+            // Clear the send div before adding new images
+            document.getElementById("txtMsg").innerHTML = "";
+            document.getElementById("txtOutput").innerHTML += '<span class="user">You: </span>' + prompt + "<br>" + "\n";
+
+            // Send an API request using JavaScript fetch
+            fetch("https://api.openai.com/v1/images/generations", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": `Bearer ${OPENAI_API_KEY}`
+                },
+                body: JSON.stringify({
+                    "model": "dall-e-3",
+                    "prompt": prompt,
+                    "n": 1, // Request n images
+                    "size": "1024x1024" // size Must be one of 1024x1024, 1792x1024, or 1024x1792 for dall-e-3 models.
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                // Display each generated image in the result div
+		data.data.forEach((image, index) => {
+    		const imgElement = document.createElement("img");
+    		imgElement.src = image.url;
+    		imgElement.alt = `Generated Image ${index + 1}`;
+
+    		// Create an anchor element and set attributes for opening in a new tab
+    		const linkElement = document.createElement("a");
+    		linkElement.href = image.url; // Set the image URL as the link's destination
+    		linkElement.target = "_blank"; // Ensures the link opens in a new tab
+    		linkElement.appendChild(imgElement); // Append the image to the anchor element
+
+    		// Append the anchor element (which contains the image) to the result div
+		document.getElementById("txtOutput").innerHTML += '<span class="eva">Eva: </span>' + "Here is a generated image of that description ... " + "\n";
+    		document.getElementById("txtOutput").appendChild(linkElement);
+                var element = document.getElementById("txtOutput");
+                element.scrollTop = element.scrollHeight;
+		});
+            })
+            .catch(error => {
+                console.error("Error:", error);
+            });
+
+}
+
diff --git a/core/js/options.js b/core/js/options.js
@@ -41,7 +41,6 @@ function OnLoad() {
 }
 
 // Select Engine Completion Endpoint
-// Assuming there's an input field with id "userQuestion" for the user's question
 function autoSelect() {
     var userQuestionElement = document.getElementById("txtMsg").innerHTML;
     if (!userQuestionElement) {
@@ -52,21 +51,31 @@ function autoSelect() {
     console.log(userQuestionElement);
     // Check if userInput is indeed a string
     if (typeof userInput === "string") {
-        var selModel = document.getElementById("selModel"); 
-
-    // Simple heuristic to select a model based on the user's input
-    if (userInput.length > 500) {
-        selModel.value = "gpt-3.5-turbo-16k";  // Long queries might not need more token resources
-    } 
-    else if (userInput.includes("code") || userInput.includes("programming") || userInput.includes("debug") || userInput.includes("bash") || userInput.includes("python") || userInput.includes("javascript") || userInput.includes("script") || userInput.includes("langauge") || userInput.includes("한글") || userInput.includes("weather") || userInput.includes("news") || userInput.includes("space") || userInput.includes("solar") || userInput.includes("javascript") || userInput.includes("stock") || userInput.includes("markets") || userInput.includes("symbol") || userInput.includes("ticker") || userInput.includes("Google") || userInput.includes("google") || userInput.includes("date") || userInput.includes("math") || userInput.includes("fraction") || userInput.includes("problem") || userInput.includes("+") || userInput.includes("=")) {
-        selModel.value = "gpt-4-turbo-preview"; // For coding-related, math, logic, reasoning, language tasks.
-    } 
-    else if (userInput.includes("story") || userInput.includes("imagine") || userInput.includes("gemini")) {
-        selModel.value = "gemini"; // For complex queries, a different model could be preferred
-    } 
-    else {
-        selModel.value = "gemini"; // Default to a Google Gemin
-    }
+    	var selModel = document.getElementById("selModel");
+
+    	// Define keywords for different conditions
+    	const gptHuristics = ["code", "programming", "debug", "bash", "python", "javascript", "script", "language", "한글", "weather", "news", "space", "solar", "stock", "markets", "symbol", "ticker", "Google", "google", "date", "math", "fraction", "problem", "+", "="];
+
+	const glHuristics = ["story", "imagine", "gemini"];
+
+	const dalHuristics =["show me an image of", "create an image of"];
+
+    	// Simple heuristic to select a model based on the user's input
+    	if (userInput.length > 500) {
+            selModel.value = "gpt-3.5-turbo-16k"; // Long queries might not need more token resources
+    	} 
+    	else if (gptHuristics.some(keyword => userInput.includes(keyword))) {
+            selModel.value = "gpt-4-turbo-preview"; // For coding-related, math, logic, reasoning, language tasks.
+    	}
+    	else if (glHuristics.some(keyword => userInput.includes(keyword))) {
+            selModel.value = "gemini"; // For complex queries, a different model could be preferred
+    	}
+        else if (dalHuristics.some(keyword => userInput.includes(keyword))) {
+            selModel.value = "dall-e-3"; // For dall-e-3 generated images
+        }
+    	else {
+            selModel.value = "gemini"; // Default to a different model if none of the above conditions are met
+    	}
 
     // Now trigger the appropriate send function based on the selected model
     switch (selModel.value) {
@@ -81,12 +90,15 @@ function autoSelect() {
         case "gemini":
             geminiSend();
             break;
+        case "dall-e-3":
+            dalle3Send();
+            break;
         default:
             Send();
     }
     // Reset back to auto
     selModel.value = "auto";
-} else {
+    } else {
         console.error('userInput is not a string. Actual type:', typeof userInput);
     }
 }
@@ -116,15 +128,21 @@ function updateButton() {
             clearText();
             geminiSend();
         };
+    } else if (selModel.value == "dall-e-3") {
+        btnSend.onclick = function() {
+            clearText();
+            dalle3Send();
+        };
     } else {
         btnSend.onclick = function() {
             clearText();
-            Send();
+           // Send();
+	   document.getElementById("txtOutput").innerHTML = "\n" + "Invalid Model" 
+	   console.error('Invalid Model')
         };
     }
 }
 
-
 function sendData() {
     // Logic required for initial message
     var selModel = document.getElementById("selModel");
@@ -141,9 +159,14 @@ function sendData() {
     } else if (selModel.value == "gemini") {
         clearText();
         geminiSend();
+    } else if (selModel.value == "dall-e-3") {
+        clearText();
+        dalle3Send();
     } else {
         clearText();
-        Send();
+        // Send();
+        document.getElementById("txtOutput").innerHTML = "\n" + "Invalid Model"
+        console.error('Invalid Model')
     }
 }
 
@@ -415,7 +438,6 @@ function insertImage() {
 
 }
 
-
   function handleFileSelect(event) {
     event.preventDefault();
 

diff --git a/core/style.css b/core/style.css
@@ -72,6 +72,10 @@ body {
   text-align: left;
 }
 
+#txtOutput a {
+  cursor: pointer;
+}
+
 #txtOutput img {
   width: 250px;
   height: auto;

diff --git a/dalle.html b/dalle.html
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
 <script src="core/js/chatgpt.js"></script>
 <script src="core/js/chatgpt-turbo.js"></script>
 <script src="core/js/gl-google.js"></script> 
+<script src="core/js/dalle3.js"></script> 
 <script src="core/js/aws-sdk-2.1304.0.min.js"></script>
  <script>
   auth();
@@ -31,7 +32,7 @@
 
     <div id="idContainer">
         <div id="textToSynth">
- 	  <div id="txtOutput" contenteditable="true" rows="10" wrap="soft" placeholder="Output"></div>
+ 	  <div id="txtOutput" rows="10" wrap="soft" placeholder="Output"></div>
           <div class="container">
 	    <button class="speakSend" onClick="speakText(); document.getElementById('audioPlayback').setAttribute('autoplay', true);" id="speakSend" title="Speak This"></button>
           </div>
@@ -73,7 +74,7 @@
 	    <select id="selModel" onchange="updateButton()">
 		<option value="auto" title="Default">auto</option>
 		<option value="gpt-3.5-turbo" title="gpt-3.5-turbo">gpt-3.5-turbo</option>
-		<option value="dall-e-3" title="Image Generation">DALL-E-3</option> 
+		<option value="dall-e-3" title="Image Generation">dall-e-3</option> 
 		<option value="gpt-3.5-turbo-16k" title="gpt-3.5-turbo-16k">gpt-3.5-turbo-16k</option>
 		<option value="gpt-4-turbo-preview" title="GPT-4-Turbo">gpt-4-turbo-preview</option>
 		<option value="gemini" title="Google Gemini">gemini</option>