WIP on-device AI samples

MicrosoftEdge · Jul 16, 2024 · cedb019 · cedb019
1 parent 649affc
commit cedb019
Show file tree

Hide file tree

Showing 14 changed files with 1,122 additions and 60,427 deletions.
diff --git a/on-device-ai/README.md b/on-device-ai/README.md
diff --git a/on-device-ai/chat.js b/on-device-ai/chat.js
@@ -164,7 +164,7 @@ document.getElementById("user-input").addEventListener("keydown", function (e) {
 });
 
 window.onload = () => {
-  Init().then(() => {
+  Init(true).then(() => {
     // adjustPadding();
     sendButton.addEventListener("click", submitRequest);
     const userInput = document.getElementById("user-input");

diff --git a/on-device-ai/check_coc.js b/on-device-ai/check_coc.js
@@ -5,14 +5,6 @@ Participation in the community must be a harassment-free experience for everyone
 
 Interactions must happen in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
 
-Examples of behavior that contributes to a positive environment for our community include:
-
-- Demonstrating empathy and kindness toward other people
-- Being respectful of differing opinions, viewpoints, and experiences
-- Giving and gracefully accepting constructive feedback
-- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
-- Focusing on what is best not just for us as individuals, but for the overall community
-
 Examples of unacceptable behavior include:
 
 - The use of sexualized language or imagery, and sexual attention or advances of any kind

diff --git a/on-device-ai/dist/chat.js b/on-device-ai/dist/chat.js
diff --git a/on-device-ai/dist/chat.js.map b/on-device-ai/dist/chat.js.map
diff --git a/on-device-ai/dist/check_coc.js b/on-device-ai/dist/check_coc.js
diff --git a/on-device-ai/dist/check_coc.js.map b/on-device-ai/dist/check_coc.js.map
diff --git a/on-device-ai/dist/form_assistant.js b/on-device-ai/dist/form_assistant.js
diff --git a/on-device-ai/dist/form_assistant.js.map b/on-device-ai/dist/form_assistant.js.map
diff --git a/on-device-ai/form_assistant.html b/on-device-ai/form_assistant.html
@@ -0,0 +1,144 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Form assistant demo</title>
+  <style>
+    body {
+      font-family: system-ui;
+      font-size: 1rem;
+      margin: 2rem;
+    }
+
+    input,
+    textarea,
+    button {
+      padding: .5rem;
+      border-radius: .25rem;
+      font-size: inherit;
+      font-family: inherit;
+    }
+
+    button {
+      color: white;
+      border: 0;
+      background: green;
+    }
+
+    input,
+    textarea {
+      border: 1px solid #ccc;
+    }
+
+    textarea {
+      height: 10rem;
+    }
+
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      flex-wrap: wrap;
+      max-height: 40rem;
+      margin: 1rem 0;
+    }
+
+    .form-row {
+      width: calc(50% - .5rem);
+      display: flex;
+      flex-direction: column;
+      gap: .5rem;
+    }
+
+    #assistant-form .form-row {
+      width: 100%;
+    }
+
+    label {
+      font-weight: bold;
+      color: #333;
+    }
+
+    button {
+      align-self: end;
+    }
+
+    #status {
+      background: #eee;
+      padding: .5rem;
+      border-radius: .25rem;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>Contact form</h1>
+
+  <form id="assistant-form">
+    <div class="form-row">
+      <label for="assistant">Form filling assistant</label>
+      <textarea id="assistant" placeholder="Type your contact information here, we will analyze it and fill the form below for you..."></textarea>
+    </div>
+    <div class="form-row">
+      <button type="submit" id="analyze-info-button">Fill the form for me</button>
+    </div>
+  </form>
+
+  <form id="form">
+    <div class="form-row">
+      <label for="firstname">Firstname</label>
+      <input type="text" id="firstname">
+    </div>
+    <div class="form-row">
+      <label for="lastname">Lastname</label>
+      <input type="text" id="lastname">
+    </div>
+    <div class="form-row">
+      <label for="address1">Address line 1</label>
+      <input type="text" id="address1">
+    </div>
+    <div class="form-row">
+      <label for="address2">Address line 2</label>
+      <input type="text" id="address2">
+    </div>
+    <div class="form-row">
+      <label for="city">City</label>
+      <input type="text" id="city">
+    </div>
+    <div class="form-row">
+      <label for="state">State</label>
+      <input type="text" id="state">
+    </div>
+    <div class="form-row">
+      <label for="zip">Zip</label>
+      <input type="text" id="zip">
+    </div>
+    <div class="form-row">
+      <label for="country">Country</label>
+      <input type="text" id="country">
+    </div>
+    <div class="form-row">
+      <label for="phone">Phone</label>
+      <input type="text" id="phone">
+    </div>
+    <div class="form-row">
+      <label for="email">Email</label>
+      <input type="text" id="email">
+    </div>
+    <div class="form-row">
+      <label for="bio">Bio</label>
+      <textarea id="bio"></textarea>
+    </div>
+    <div class="form-row">
+      <button type="submit" id="submit-button">Send your info</button>
+    </div>
+  </form>
+
+  <div id="status"></div>
+
+  <script type="module" src="dist/form_assistant.js"></script>
+</body>
+
+</html>
diff --git a/on-device-ai/form_assistant.js b/on-device-ai/form_assistant.js
@@ -0,0 +1,94 @@
+import { Init, Query, Abort } from "./main.js";
+
+const PROMPT = `Extract personal contact information from text, and produce a structured JSON output.
+
+Info: Mitsuko Kennedy, 1281 Merry Diversion, Ketchikan, Illinois, 62805 United States, 618-555-0189
+Output: {"firstname":"Mituko","lastname":"Kennedy","address1":"1281 Merry Diversion","address2":"","city":"Ketchikan","state":"Illinois","zip":"62805","country":"United States","phone":"618-555-0189","email":"","bio":""}
+
+Info: John Doe, 1234 Main St, Springfield, IL 62701, 217-555-1234, [email protected]
+Output: {"firstname":"John","lastname":"Doe","address1":"1234 Main St","address2":"","city":"Springfield","state":"IL","zip":"62701","country":"","phone":"217-555-1234","email":"[email protected]","bio":""}
+
+Info: [INFO]
+Output: `;
+
+const assistantForm = document.getElementById("assistant-form");
+const assistant = document.getElementById("assistant");
+const analyzeInfo = document.getElementById("analyze-info-button");
+
+const form = document.getElementById("form");
+const firstName = document.getElementById("firstname");
+const lastName = document.getElementById("lastname");
+const address1 = document.getElementById("address1");
+const address2 = document.getElementById("address2");
+const city = document.getElementById("city");
+const state = document.getElementById("state");
+const zip = document.getElementById("zip");
+const country = document.getElementById("country");
+const phone = document.getElementById("phone");
+const email = document.getElementById("email");
+const bio = document.getElementById("bio");
+
+let isAnalyzingForm = false;
+
+function showAsLoading() {
+  analyzeInfo.textContent = "Analyzing your data ...";
+  analyzeInfo.classList.add("loading");
+  analyzeInfo.disabled = true;
+}
+
+function showAsNormal() {
+  analyzeInfo.textContent = "Fill the form for me";
+  analyzeInfo.classList.remove("loading");
+  analyzeInfo.disabled = false;
+}
+
+async function startApp() {
+  await Init();
+
+  form.onsubmit = (e) => {
+    e.preventDefault();
+  };
+
+  assistantForm.onsubmit = (e) => {
+    e.preventDefault();
+
+    if (isAnalyzingForm) {
+      return;
+    }
+
+    showAsLoading();
+    isAnalyzingForm = true;
+
+    const prompt = PROMPT.replace("[INFO]", assistant.value);
+    let data = "";
+    Query(true, prompt, (word) => {
+      data = word;
+      if (word.includes("}")) {
+        Abort();
+      }
+    }).then(() => {
+      const json = data.match(/\{.*\}/);
+      if (json) {
+        const obj = JSON.parse(json[0]);
+        firstName.value = obj.firstname;
+        lastName.value = obj.lastname;
+        address1.value = obj.address1;
+        address2.value = obj.address2;
+        city.value = obj.city;
+        state.value = obj.state;
+        zip.value = obj.zip;
+        country.value = obj.country;
+        phone.value = obj.phone;
+        email.value = obj.email;
+        bio.value = obj.bio;
+      }
+
+      showAsNormal();
+      isAnalyzingForm = false;
+    });
+  };
+}
+
+window.onload = () => {
+  startApp();
+};
diff --git a/on-device-ai/index.html b/on-device-ai/index.html
@@ -0,0 +1,5 @@
+<ul>
+  <li><a href="chat.html">Chat</a></li>
+  <li><a href="check_coc.html">Check a comment against a code of Conduct</a></li>
+  <li><a href="form_assistant.html">Assist in filling out a form</a></li>
+</ul>