From 392e6b99579cb358c3ad42828a40b6b5af998cf8 Mon Sep 17 00:00:00 2001
From: Adrien <adrien.bouvais.pro@gmail.com>
Date: Sat, 1 Jun 2024 11:12:39 +0200
Subject: [PATCH] added google api

---
 Request.go                           |  2 +
 RequestGoogle.go                     | 98 ++++++++++++++++++----------
 static/style.css                     |  2 +-
 views/chat.html                      | 20 +++++-
 views/layouts/main.html              |  2 +-
 views/partials/message-bot.html      |  5 +-
 views/partials/message-user.html     |  6 +-
 views/partials/popover-models.html   |  2 -
 views/partials/popover-settings.html |  2 +-
 9 files changed, 91 insertions(+), 48 deletions(-)

diff --git a/Request.go b/Request.go
index 6db238a..02f6855 100644
--- a/Request.go
+++ b/Request.go
@@ -135,6 +135,8 @@ func GenerateMultipleMessagesHandler(c *fiber.Ctx) error {
 				addMessageFunc = addGooseaiMessage
 			case "huggingface":
 				addMessageFunc = addHuggingfaceMessage
+			case "google":
+				addMessageFunc = addGoogleMessage
 			}
 
 			var messageID edgedb.UUID
diff --git a/RequestGoogle.go b/RequestGoogle.go
index db36fad..23d446a 100644
--- a/RequestGoogle.go
+++ b/RequestGoogle.go
@@ -26,24 +26,29 @@ type GoogleChatCompletionRequest struct {
 }
 
 type GoogleChatCompletionResponse struct {
-	ID      string         `json:"id"`
-	Object  string         `json:"object"`
-	Created int64          `json:"created"`
-	Model   string         `json:"model"`
-	Usage   GoogleUsage    `json:"usage"`
-	Choices []GoogleChoice `json:"choices"`
+	Candidates    []GoogleCandidate   `json:"candidates"`
+	UsageMetadata GoogleUsageMetadata `json:"usageMetadata"`
 }
 
-type GoogleUsage struct {
-	PromptTokens     int32 `json:"prompt_tokens"`
-	CompletionTokens int32 `json:"completion_tokens"`
-	TotalTokens      int32 `json:"total_tokens"`
+type GoogleCandidate struct {
+	Content struct {
+		Parts []GooglePart `json:"parts"`
+		Role  string       `json:"role"`
+	} `json:"content"`
+	FinishReason  string               `json:"finishReason"`
+	Index         int                  `json:"index"`
+	SafetyRatings []GoogleSafetyRating `json:"safetyRatings"`
 }
 
-type GoogleChoice struct {
-	Message      Message `json:"message"`
-	FinishReason string  `json:"finish_reason"`
-	Index        int     `json:"index"`
+type GoogleSafetyRating struct {
+	Category    string `json:"category"`
+	Probability string `json:"probability"`
+}
+
+type GoogleUsageMetadata struct {
+	PromptTokenCount     int32 `json:"promptTokenCount"`
+	CandidatesTokenCount int32 `json:"candidatesTokenCount"`
+	TotalTokenCount      int32 `json:"totalTokenCount"`
 }
 
 func addGoogleMessage(llm LLM, selected bool) edgedb.UUID {
@@ -53,12 +58,12 @@ func addGoogleMessage(llm LLM, selected bool) edgedb.UUID {
 	if err != nil {
 		fmt.Println("Error fetching user profile")
 		panic(err)
-	} else if len(chatCompletion.Choices) == 0 {
+	} else if len(chatCompletion.Candidates) == 0 {
 		fmt.Println("No response from Google")
 		id := insertBotMessage("No response from Google", selected, llm.ID)
 		return id
 	} else {
-		Content := chatCompletion.Choices[0].Message.Content
+		Content := chatCompletion.Candidates[0].Content.Parts[0].Text
 		id := insertBotMessage(Content, selected, llm.ID)
 		return id
 	}
@@ -84,11 +89,13 @@ func TestGoogleKey(apiKey string) bool {
 
 	jsonBody, err := json.Marshal(requestBody)
 	if err != nil {
+		fmt.Println("Error marshalling JSON: ", err)
 		return false
 	}
 
 	req, err := http.NewRequest("POST", url, bytes.NewBuffer(jsonBody))
 	if err != nil {
+		fmt.Println("Error creating request: ", err)
 		return false
 	}
 
@@ -97,27 +104,33 @@ func TestGoogleKey(apiKey string) bool {
 	client := &http.Client{}
 	resp, err := client.Do(req)
 	if err != nil {
+		fmt.Println("Error sending request: ", err)
 		return false
 	}
 	defer resp.Body.Close()
 
 	body, err := io.ReadAll(resp.Body)
 	if err != nil {
+		fmt.Println("Error reading response body: ", err)
 		return false
 	}
 
 	var chatCompletionResponse GoogleChatCompletionResponse
 	err = json.Unmarshal(body, &chatCompletionResponse)
 	if err != nil {
+		fmt.Println("Error unmarshaling JSON: ", err)
 		return false
 	}
-	if chatCompletionResponse.Usage.CompletionTokens == 0 {
+	if chatCompletionResponse.UsageMetadata.CandidatesTokenCount == 0 {
+		fmt.Println("No response from Google")
 		return false
 	}
+
+	fmt.Println("Response from Google: ", chatCompletionResponse)
 	return true
 }
 
-func RequestGoogle(model string, messages []Message, temperature float64, context string) (OpenaiChatCompletionResponse, error) {
+func RequestGoogle(model string, messages []Message, temperature float64, context string) (GoogleChatCompletionResponse, error) {
 	var apiKey string
 	err := edgeClient.QuerySingle(edgeCtx, `
 		with
@@ -127,48 +140,61 @@ func RequestGoogle(model string, messages []Message, temperature float64, contex
 				} filter .company.name = <str>$0 AND .<keys[is Setting].<setting[is User] = global currentUser
 			)
 		select filtered_keys.key limit 1
-	`, &apiKey, "openai")
+	`, &apiKey, "google")
 	if err != nil {
-		return OpenaiChatCompletionResponse{}, fmt.Errorf("error getting OpenAI API key: %w", err)
+		return GoogleChatCompletionResponse{}, fmt.Errorf("error getting Google API key: %w", err)
 	}
 
-	url := "https://api.openai.com/v1/chat/completions"
+	url := "https://generativelanguage.googleapis.com/v1beta/models/" + model + ":generateContent?key=" + apiKey
 
-	requestBody := OpenaiChatCompletionRequest{
-		Model:       model,
-		Messages:    Message2RequestMessage(messages, context),
-		Temperature: temperature,
+	// Do an array of GoogleRequestMessage with the messages in a for loop
+	googleMessages := []GoogleRequestMessage{}
+	for _, message := range messages {
+		if message.Role == "user" {
+			googleMessages = append(googleMessages, GoogleRequestMessage{
+				Role:  "user",
+				Parts: []GooglePart{GooglePart{Text: message.Content}},
+			})
+		} else {
+			googleMessages = append(googleMessages, GoogleRequestMessage{
+				Role:  "model",
+				Parts: []GooglePart{GooglePart{Text: message.Content}},
+			})
+		}
+	}
+
+	requestBody := GoogleChatCompletionRequest{
+		Messages: googleMessages,
 	}
 
 	jsonBody, err := json.Marshal(requestBody)
 	if err != nil {
-		return OpenaiChatCompletionResponse{}, fmt.Errorf("error marshaling JSON: %w", err)
+		return GoogleChatCompletionResponse{}, fmt.Errorf("error marshaling JSON: %w", err)
 	}
 
 	req, err := http.NewRequest("POST", url, bytes.NewBuffer(jsonBody))
 	if err != nil {
-		return OpenaiChatCompletionResponse{}, fmt.Errorf("error creating request: %w", err)
+		return GoogleChatCompletionResponse{}, fmt.Errorf("error creating request: %w", err)
 	}
 
 	req.Header.Set("Content-Type", "application/json")
-	req.Header.Set("Authorization", "Bearer "+apiKey)
 
 	client := &http.Client{}
 	resp, err := client.Do(req)
 	if err != nil {
-		return OpenaiChatCompletionResponse{}, fmt.Errorf("error sending request: %w", err)
+		return GoogleChatCompletionResponse{}, fmt.Errorf("error sending request: %w", err)
 	}
 	defer resp.Body.Close()
 
 	body, err := io.ReadAll(resp.Body)
 	if err != nil {
-		return OpenaiChatCompletionResponse{}, fmt.Errorf("error reading response body: %w", err)
+		return GoogleChatCompletionResponse{}, fmt.Errorf("error reading response body: %w", err)
 	}
 
-	var chatCompletionResponse OpenaiChatCompletionResponse
+	var chatCompletionResponse GoogleChatCompletionResponse
 	err = json.Unmarshal(body, &chatCompletionResponse)
 	if err != nil {
-		return OpenaiChatCompletionResponse{}, fmt.Errorf("error unmarshaling JSON: %w", err)
+		return GoogleChatCompletionResponse{}, fmt.Errorf("error unmarshaling JSON: %w", err)
 	}
 
 	var usedModelInfo ModelInfo
@@ -181,12 +207,12 @@ func RequestGoogle(model string, messages []Message, temperature float64, contex
 		LIMIT 1
 	`, &usedModelInfo, model)
 	if err != nil {
-		return OpenaiChatCompletionResponse{}, fmt.Errorf("error getting model info: %w", err)
+		return GoogleChatCompletionResponse{}, fmt.Errorf("error getting model info: %w", err)
 	}
 
-	var inputCost float32 = float32(chatCompletionResponse.Usage.PromptTokens) * usedModelInfo.InputPrice
-	var outputCost float32 = float32(chatCompletionResponse.Usage.CompletionTokens) * usedModelInfo.OutputPrice
-	addUsage(inputCost, outputCost, chatCompletionResponse.Usage.PromptTokens, chatCompletionResponse.Usage.CompletionTokens, model)
+	var inputCost float32 = float32(chatCompletionResponse.UsageMetadata.PromptTokenCount) * usedModelInfo.InputPrice
+	var outputCost float32 = float32(chatCompletionResponse.UsageMetadata.CandidatesTokenCount) * usedModelInfo.OutputPrice
+	addUsage(inputCost, outputCost, chatCompletionResponse.UsageMetadata.PromptTokenCount, chatCompletionResponse.UsageMetadata.CandidatesTokenCount, model)
 
 	return chatCompletionResponse, nil
 }
diff --git a/static/style.css b/static/style.css
index a9d2258..763674c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -70,7 +70,7 @@ html {
     justify-content: center;
     align-items: center;
     position: fixed;
-    bottom: 10px;
+    bottom: 0;
     left: 0;
     right: 0;
     padding: 10px;
diff --git a/views/chat.html b/views/chat.html
index c4bad99..a43929b 100644
--- a/views/chat.html
+++ b/views/chat.html
@@ -27,7 +27,7 @@
                     </span>
                 </button-->
                 <button disabled type="submit" class="send-button button is-primary is-small"
-                    hx-post="/generatePlaceholder" hx-swap="beforeend settle:200ms" hx-target="#chat-messages"
+                    hx-post="/generatePlaceholder" hx-swap="beforeend" hx-target="#chat-messages"
                     id="chat-input-send-btn" class="chat-input" hx-include="[name='message']"
                     hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}" onclick="clearTextArea()">
                     <span class="icon">
@@ -43,7 +43,7 @@
 <script>
     var textareaControl = document.getElementById('textarea-control');
 
-    // Every 0.1s check if the text area have htmx-request class, if yes, add the class is-loading
+    // Every 0.01s check if the text area have htmx-request class, if yes, add the class is-loading
     setInterval(function () {
         if (textareaControl.classList.contains('htmx-request')) {
             textareaControl.classList.add('is-loading');
@@ -52,6 +52,22 @@
         }
     }, 10);
 
+    setInterval(function () {
+        if (window.innerWidth < 450) {
+            var elements = document.getElementsByClassName('message-icon');
+            for (var i = 0; i < elements.length; i++) {
+                elements[i].classList.remove('is-48x48');
+                elements[i].classList.add('is-32x32');
+            }
+        } else {
+            var elements = document.getElementsByClassName('message-icon');
+            for (var i = 0; i < elements.length; i++) {
+                elements[i].classList.remove('is-32x32');
+                elements[i].classList.add('is-48x48');
+            }
+        }
+    }, 300);
+
     document.getElementById('chat-input-textarea').addEventListener('focus', function () {
         var buttons = document.getElementsByClassName('to-reduce-opacity');
         for (var i = 0; i < buttons.length; i++) {
diff --git a/views/layouts/main.html b/views/layouts/main.html
index 06f329f..431eb08 100644
--- a/views/layouts/main.html
+++ b/views/layouts/main.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
     <title>JADE</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
diff --git a/views/partials/message-bot.html b/views/partials/message-bot.html
index b5cca71..c3de222 100644
--- a/views/partials/message-bot.html
+++ b/views/partials/message-bot.html
@@ -25,7 +25,8 @@
         <div class="column" id="content-column">
             {% if not IsPlaceholder %}
             <div class="{% if not notFlex%} is-flex {% endif %} is-align-items-start">
-                <div class="message-content" id="content-{{ ConversationAreaId }}">
+                <div class="message-content" style="width: 100%; overflow-y: hidden;"
+                    id="content-{{ ConversationAreaId }}">
                     {% for message in Messages %}
                     {% if not message.Hidden %}
                     <div class="message-header">
@@ -34,7 +35,7 @@
                         </p>
                     </div>
                     <div class="message-body">
-                        <div class="content" style="overflow-x: auto;">
+                        <div class="content" style="overflow-x: auto; width: 100%;">
                             {{ message.Content | safe }}
                         </div>
                     </div>
diff --git a/views/partials/message-user.html b/views/partials/message-user.html
index bcc5b38..3e54e6f 100644
--- a/views/partials/message-user.html
+++ b/views/partials/message-user.html
@@ -1,21 +1,21 @@
 <div class="message-user mt-3" id="msg-{{ ID }}">
     <div class="columns is-mobile">
         <div class="column is-narrow" id="icon-column">
-            <figure class="image is-48x48" style="flex-shrink: 0;">
+            <figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
                 <img src="icons/bouvai2.png" alt="User Image">
             </figure>
         </div>
 
         <div class="column" id="content-column">
             <div class="is-flex is-align-items-start">
-                <div class="message-content">
+                <div class="message-content" style="width: 100%; overflow-y: hidden;">
                     <div class="message-header">
                         <p>
                             You
                         </p>
                     </div>
                     <div class="message-body">
-                        <div class="content" style="overflow-x: auto;" id="content-{{ ID }}">
+                        <div class="content" style="overflow-x: auto; width: 100%;" id="content-{{ ID }}">
                             {{ Content | safe }}
                         </div>
                     </div>
diff --git a/views/partials/popover-models.html b/views/partials/popover-models.html
index 81b1fa1..91a8907 100644
--- a/views/partials/popover-models.html
+++ b/views/partials/popover-models.html
@@ -136,13 +136,11 @@
         })
 
         document.getElementById('create-model-button').addEventListener('click', function () {
-            console.log('create model');
             document.getElementById('models-list').classList.add('is-hidden');
             document.getElementById('models-creation').classList.remove('is-hidden');
         });
 
         document.getElementById('cancel-create-model-button').addEventListener('click', function () {
-            console.log('cancel create model');
             document.getElementById('models-list').classList.remove('is-hidden');
             document.getElementById('models-creation').classList.add('is-hidden');
         });
diff --git a/views/partials/popover-settings.html b/views/partials/popover-settings.html
index ed52d68..bf00e01 100644
--- a/views/partials/popover-settings.html
+++ b/views/partials/popover-settings.html
@@ -55,7 +55,7 @@
                             id="gemini-field">
                             <p class="control has-icons-left is-expanded">
                                 <input class="input is-small {% if GoogleExists %}is-success{% endif %}" type="text"
-                                    disabled placeholder="Google API key" name="google_key" autocomplete="off">
+                                    placeholder="Google API key" name="google_key" autocomplete="off">
                                 <span class="icon is-small is-left">
                                     <i class="fas fa-lock"></i>
                                 </span>