tool: added AllSpark - GenAI based code converter (#1225)

* first commit * updated readme * removed unnecessary changes
GoogleCloudPlatform · Mar 13, 2024 · e62587c · e62587c
1 parent 99d4797
commit e62587c
Show file tree

Hide file tree

Showing 13 changed files with 382 additions and 0 deletions.
diff --git a/tools/allspark/README.md b/tools/allspark/README.md
@@ -0,0 +1,15 @@
+# All Spark: GenI based training and code conversion tool
+
+## Objective
+Supercharge developer productivity using GenAI to modernize legacy applications.  
+
+## Methodology
+1. Train the base code conversion models (codey).
+   1. Using provided custom training dataset.
+   2. Enhance the training dataset with your custom examples for enhanced learning.
+2. Deploy the enhanced GenAI model on Vertex AI
+3. Access the enhanced GenAI model using:
+   1. [Chrome Extension](./chrome-ext/)
+   2. Intellij IDE Plugin (roadmap)
+   3. Eclipse IDE Plugin (roadmap)
+   4. VS-Code IDE Plugin (roadmap)
diff --git a/tools/allspark/chrome-ext/README.md b/tools/allspark/chrome-ext/README.md
@@ -0,0 +1,37 @@
+# All Spark Chrome Extension
+![](./docs/chrm-ext-demo.gif)
+
+# Pre-requisites
+1. You should have access to GCP Project
+2. Enable [Vertex AI API](https://console.cloud.google.com/apis/library/aiplatform.googleapis.com)
+3. Configure [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent)  
+   1. User Type = Internal  
+   2. App Name = All Spark  
+   3. Support Email = <your email id>
+   4. Developer contact information = <your email id>
+   5. Save it (no other fields are required)
+4. Create [OAuth 2 Credential](https://console.cloud.google.com/apis/credentials) for chrome extension
+   1. Create Credentials --> Create OAuth client ID
+   2. Application Aype = Chrome Extension
+   3. Name = All Spark
+   4. Item Id = oeogcnfkkmlkdcadnnlodjhfhlablpdg
+   5. Copy the client-id generated for next step.
+5. Open [manifest.json](./manifest.json) and update Oauth 2 Client Id from above step
+6. Update GCP Project Id in [gcpApiCalls.js](./scripts/gcpApiCall.js)
+
+# Extension Installation
+
+1. Open chrome://extensions in chrome browser.
+2. Enable developer mode (top right toggle)
+3. Load Unpacked browse to local folder where extension code is download.
+4. Ensure that "ID" of installation is same what is provided in Pre-requisites 4.4 (otherwise update the credentials)
+
+# Usage
+1. Open the webpage code.
+2. Select the code you want to convert.
+3. Right click and select "Convert Code with All Spark"
+4. This will open a new tab with copied code.
+5. Select drop down values (metadata about code) and click submit.
+6. Allow access to your oauth (first time only)
+7. Converted code shows up.
+*Note: You will need to give clipboard and gcp project permissions when using first time* 
diff --git a/tools/allspark/chrome-ext/docs/chrm-ext-demo.gif b/tools/allspark/chrome-ext/docs/chrm-ext-demo.gif
diff --git a/tools/allspark/chrome-ext/logo128.png b/tools/allspark/chrome-ext/logo128.png
diff --git a/tools/allspark/chrome-ext/manifest.json b/tools/allspark/chrome-ext/manifest.json
@@ -0,0 +1,30 @@
+{
+	"name": "All Spark",
+	"manifest_version": 3,
+	"description": "GCP GenAI based code conversion tool. Usage: Select code and right click menu and choose Convert code with All Spark option",
+	"version": "0.1",
+	"background": {
+		"service_worker":"scripts/background.js"
+	},
+	"oauth2": {
+		"client_id": "Replace-YOUR-Client-ID-here",
+		"scopes":["https://www.googleapis.com/auth/cloud-platform"]
+	},
+	"host_permissions": [
+		"<all_urls>"
+	],
+	"icons": {
+		"128": "./logo128.png"
+	},
+	"permissions": [
+		"tabs",
+		"identity",
+		"scripting",
+		"storage",
+		"contextMenus"
+	],
+	"content_security_policy": {
+		"extension_pages": "script-src 'self'; object-src 'self';",
+		"sandbox": "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self';"
+	}
+}
diff --git a/tools/allspark/chrome-ext/popup.html b/tools/allspark/chrome-ext/popup.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>All Spark Chrome Extension</title>
+    <link rel="stylesheet" href="./styles/popup_styles.css">
+    <script type="text/javascript" src="scripts/jquery-3.7.1.min.js"></script>
+    <script type="text/javascript" src="scripts/showdown.js"></script>
+</head>
+<body>
+    <div class="section" style="padding-left:300px;padding-right:300px;">
+        <div class="field">
+            <figure class="image is-128x128">
+                <img src="./logo128.png" width="128px" height="128px" alt="All Spark"/>
+            </figure>
+            <label class="label">Language</label>
+            <div class="control">
+                <div class="select is-link is-fullwidth">
+                    <select id="language">
+                        <option>Select dropdown</option>
+                        <option>Java</option>
+                        <option>Python</option>
+                        <option>DML / DDL</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+        <div class="field">
+            <label class="label">Source</label>
+            <div class="control">
+                <div class="select is-link is-fullwidth">
+                    <select id="source">
+                        <option>Select dropdown</option>
+                        <option>MSSQL</option>
+                        <option>Oracle</option>
+                        <option>MySQL</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+        <div class="field">
+            <label class="label">Target</label>
+            <div class="control">
+                <div class="select is-link is-fullwidth">
+                    <select id="target">
+                        <option>Select dropdown</option>
+                        <option>Postgresql</option>
+                        <option>Spanner</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+        <div class="field">
+            <label class="label">Prompt:</label>
+            <div class="control">
+                <textarea class="textarea danger" placeholder="Textarea" rows="2" id="prompt"></textarea>
+            </div>
+        </div>
+        <div class="field">
+            <label class="label">Code copied:</label>
+            <div class="control">
+                <textarea class="textarea" placeholder="Textarea" rows="7" id="content"></textarea>
+            </div>
+        </div>
+        <div id="output"></div>
+        <div class="field">
+            <div class="control" id="submit-wrapper">
+                <button id="submit" class="button is-outlined is-rounded is-link is-fullwidth is-focused">Submit</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="./scripts/popup_script.js"></script>
+    <script type="text/javascript" src="scripts/gcpApiCall.js"></script>
+</body>
+
+</html>
diff --git a/tools/allspark/chrome-ext/scripts/background.js b/tools/allspark/chrome-ext/scripts/background.js
@@ -0,0 +1,56 @@
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+    if (/^http/.test(tab.url) && changeInfo.status === 'complete') {
+        chrome.scripting.executeScript({target: {tabId: tabId, allFrames: true}, files: ['./scripts/foreground.js'] }, () => {
+            console.log('The foreground script has been injected.');
+        });
+    }
+});
+const isTabOpen =() => {
+    chrome.tabs.query({}, async (tabs) => {
+        var doFlag = true;
+        for (const tab of tabs) {
+            if (tab.url === `chrome-extension://${chrome.runtime.id}/popup.html`) {
+                doFlag = false;
+                chrome.runtime.sendMessage({
+                    from: 'background',
+                    subject: 'dataAgainCopied'
+                });
+                chrome.tabs.update(tab.id, {active: true});
+                break;
+            }
+        }
+        if (doFlag) {
+            chrome.tabs.create(
+                {
+                    url: 'popup.html',
+                }
+            );
+        }
+    });
+}
+
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    if (request.message === 'search') {
+        chrome.storage.local.set({"browserConent": request.payload});
+        isTabOpen();
+    }
+    if ((request.from === 'popup') && (request.subject === 'DOMInfo')) {
+            chrome.storage.local.get(["browserConent"], function(data){
+                sendResponse(data.browserConent);
+            })
+           return true;
+    }
+});
+
+const copyPasteToAllSpark = (info,tab) => {
+    chrome.storage.local.set({"browserConent": info.selectionText});
+    isTabOpen();
+}
+
+chrome.contextMenus.create({
+    id :'AllSpark',
+    title: "Convert code with All Spark",
+    contexts:["selection"]
+});
+
+chrome.contextMenus.onClicked.addListener(copyPasteToAllSpark);
diff --git a/tools/allspark/chrome-ext/scripts/foreground.js b/tools/allspark/chrome-ext/scripts/foreground.js
@@ -0,0 +1,14 @@
+document.addEventListener('keydown', (event) => {
+    console.log(event.key);
+    if(event.ctrlKey && event.key === 'w'){
+        navigator.clipboard.readText()
+            .then(res => {
+                chrome.runtime.sendMessage({
+                    message: 'search',
+                    payload: `"${res}"`
+                });
+            })
+            .catch(err => console.log(err));
+    }
+
+});
diff --git a/tools/allspark/chrome-ext/scripts/gcpApiCall.js b/tools/allspark/chrome-ext/scripts/gcpApiCall.js
@@ -0,0 +1,107 @@
+$(document).ready(function() {
+    $("#submit").on("click", function(){
+        chrome.identity.getAuthToken({interactive: true}, function(token) {
+            executeCodeGen(token);
+        });
+    });
+    $("#language").on("change", function(){
+        updatePrompt();
+    });
+    $("#source").on("change", function(){
+        updatePrompt();
+    });
+    $("#target").on("change", function(){
+        updatePrompt();
+    });
+
+});
+
+function updatePrompt(){
+    var lang = $("#language").val();
+    var src = $("#source").val();
+    var target = $("#target").val();
+    console.log("updatePrompt");
+
+    if (lang === "Select dropdown" ||
+        src === "Select dropdown" ||
+        target === "Select dropdown")
+        return false;
+
+    var prompt = `convert below ${src} ${lang} code to ${target}`;
+    $("#prompt").val(prompt);
+}
+
+function validateInput(){
+    var content = $("#content").val();
+    var prompt = $("#prompt").val();
+    var valid = true;
+
+    if (prompt === "") {
+        $("#prompt").addClass("is-danger");
+        valid = false;
+    }
+    else $("#prompt").removeClass("is-danger");
+
+    if (content === "") {
+        $("#content").addClass("is-danger");
+        valid = false;
+    }
+    else $("#content").removeClass("is-danger");
+
+    return valid;
+}
+
+function executeCodeGen(token){
+
+    if (!validateInput()) return;
+    disableSubmit();
+
+    var content = $("#content").val();
+    var prompt = $("#prompt").val();
+    var API_ENDPOINT="us-central1-aiplatform.googleapis.com"
+    var PROJECT_ID="REPLACE-YOUR-GCP-PROJECT-ID-HERE"
+    var MODEL_ID="code-bison-32k"
+    var LOCATION_ID="us-central1"
+    var req = escape(prompt+" /n"+content);
+    var requestData = {
+                "instances": [
+                    {"prefix": req }
+                ],
+                "parameters": {
+                    "candidateCount": 1,
+                    "maxOutputTokens": 8192,
+                    "temperature": 0.1,
+                    "topP": 1
+                }
+            };
+    console.log(JSON.stringify(requestData));
+    var genAIUrl = `https://${API_ENDPOINT}/v1/projects/${PROJECT_ID}/locations/${LOCATION_ID}/publishers/google/models/${MODEL_ID}:predict`
+
+    $.ajax({
+    type: "POST",
+    url: genAIUrl,
+    data: JSON.stringify(requestData),
+    beforeSend: function(request) {
+        request.setRequestHeader("Authorization", "Bearer "+token);
+        request.setRequestHeader("Content-Type", "application/json");
+      },
+    success: function(data) {
+      console.log('success: '+JSON.stringify(data));
+      var converter = new showdown.Converter();
+
+      $("#output").html(converter.makeHtml(data.predictions[0].content));
+      enableSubmit();
+    },
+    });
+}
+
+
+function disableSubmit() {
+    $("#submit").prop("disabled",true);
+    $("#submit-wrapper").addClass("is-loading");
+}
+
+function enableSubmit() {
+    $("#submit").prop("disabled",false);
+    $("#submit-wrapper").removeClass("is-loading");
+}
diff --git a/tools/allspark/chrome-ext/scripts/jquery-3.7.1.min.js b/tools/allspark/chrome-ext/scripts/jquery-3.7.1.min.js
diff --git a/tools/allspark/chrome-ext/scripts/popup_script.js b/tools/allspark/chrome-ext/scripts/popup_script.js
@@ -0,0 +1,17 @@
+const setDOMInfo = info => {
+    document.getElementById('content').textContent = info;
+};
+
+// Once the DOM is ready...
+window.addEventListener('DOMContentLoaded', (event) => {
+    chrome.runtime.sendMessage({
+        from: 'popup',
+        subject: 'DOMInfo'
+    }, setDOMInfo);
+});
+
+chrome.runtime.onMessage.addListener(async (request, sender) => {
+    if ((request.from === 'background') && (request.subject === 'dataAgainCopied')) {
+        await chrome.storage.local.get(["browserConent"], (data) => document.getElementById('content').textContent = data.browserConent);
+    }
+});
diff --git a/tools/allspark/chrome-ext/scripts/showdown.js b/tools/allspark/chrome-ext/scripts/showdown.js
diff --git a/tools/allspark/chrome-ext/styles/popup_styles.css b/tools/allspark/chrome-ext/styles/popup_styles.css
@@ -0,0 +1,20 @@
+.container {
+    width: 400px;
+    height: 200px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+
+    background-color: #1e1e1e;
+}
+
+select, button {
+    font-size: 25px;
+}
+
+.search_engine_choice {
+    font-size: 30px;
+    opacity: 0.3;
+    color: white;
+}