New issue tagging demo

MicrosoftEdge · Jul 17, 2024 · 0dbc9a6 · 0dbc9a6
1 parent cedb019
commit 0dbc9a6
Show file tree

Hide file tree

Showing 4 changed files with 717 additions and 0 deletions.
diff --git a/on-device-ai/dist/issue_tagging.js b/on-device-ai/dist/issue_tagging.js
diff --git a/on-device-ai/issue_tagging.html b/on-device-ai/issue_tagging.html
@@ -0,0 +1,123 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Issue tagging 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;
+    }
+
+    button[disabled] {
+      background: linear-gradient(to right, #8bc78b, green);
+      background-size: 200% 100%;
+      animation: animate-button 5s alternate infinite;
+    }
+
+    @keyframes animate-button {
+      0% {
+        background-position: 100%;
+      }
+
+      100% {
+        background-position: 0%;
+      }
+    }
+
+    input, textarea {
+      border: 1px solid #ccc;
+    }
+
+    textarea {
+      height: 10rem;
+    }
+
+    .form-row {
+      margin: 1rem 0;
+      display: flex;
+      flex-direction: column;
+      gap: .5rem;
+    }
+
+    label {
+      font-weight: bold;
+      color: #333;
+    }
+
+    button {
+      align-self: end;
+    }
+
+    #status {
+      background: #eee;
+      padding: .5rem;
+      border-radius: .25rem;
+    }
+
+    #tags, #tags li {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    #tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: .25rem;
+    }
+
+    #tags li {
+      border-radius: 100vw;
+      padding: .25rem 1rem;
+      background: rgb(223 222 83);
+      font-weight: bold;
+      font-size: small;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>Submit a new issue</h1>
+
+  <form id="form">
+    <div class="form-row">
+      <label for="title">Add a title</label>
+      <input type="text" placeholder="Title">
+    </div>
+    <div class="form-row">
+      <label for="description">Add a description</label>
+      <div id="message"></div>
+      <textarea id="description" placeholder="Add your description here..."></textarea>
+    </div>
+    <div class="form-row">
+      <label>Tags</label>
+      <ul id="tags"></ul>
+    </div>
+    <div class="form-row">
+      <button type="submit" id="submit-button">Submit new issue</button>
+    </div>
+  </form>
+
+  <div id="status"></div>
+
+  <script type="module" src="dist/issue_tagging.js"></script>
+</body>
+
+</html>
diff --git a/on-device-ai/issue_tagging.js b/on-device-ai/issue_tagging.js
@@ -0,0 +1,101 @@
+import { Init, Query, Abort } from "./main.js";
+
+const descriptionEl = document.getElementById("description");
+const form = document.getElementById("form");
+const button = document.getElementById("submit-button");
+const tags = document.getElementById("tags");
+let isCheckingComment = false;
+
+const PROMPT = `Classify the comments below as one of the following categories:
+1. Bug
+2. Feature Request
+3. Documentation
+4. Other
+
+<|COMMENT|>
+I am using a local app
+Repro steps
+
+1. Open devtools
+2. Select a component
+3. Click open in editor
+
+Result "The path '/data:application/json;base64,asdgasdg/HeaderLogo.tsx:41' does not exist on this computer."
+
+How often does this bug happen?
+Every time 
+<|END|>
+
+<|CATEGORY|>
+Bug
+<|END|>
+
+<|COMMENT|>
+I wanted to use ref from props while also creating a local ref as a fallback, but I got into this problem #17200.
+I know this could be resolved with a little code, though I think this behavior should belong natively to React. There is even a package for that https://www.npmjs.com/package/react-merge-refs with ~1 million downloads/week, which confirms necessity of this for the React users.
+
+I would propose something like
+
+function Component(props: { ref?: Ref<HTMLDivElement> }) {
+  const fallbackRef = useRef<HTMLDivElement>(null)
+  return <div ref={[props.ref, fallbackRef]} />
+}
+<|END|>
+
+<|CATEGORY|>
+Feature Request
+<|END|>
+
+<|COMMENT|>
+[COMMENT]
+<|END|>
+
+<|CATEGORY|>
+
+`;
+
+function showAsLoading() {
+  button.textContent = "Checking your comment ...";
+  button.classList.add("loading");
+  button.disabled = true;
+}
+
+function showAsNormal() {
+  button.textContent = "Submit new issue";
+  button.classList.remove("loading");
+  button.disabled = false;
+}
+
+async function startApp() {
+  await Init();
+
+  form.onsubmit = (e) => {
+    if (isCheckingComment) {
+      return;
+    }
+
+    showAsLoading();
+    isCheckingComment = true;
+
+    e.preventDefault();
+    const prompt = PROMPT.replace("[COMMENT]", descriptionEl.value);
+    let data = "";
+    Query(true, prompt, (word) => {
+      data = word;
+      console.log(word);
+      if (word.includes("<|END|>")) {
+        Abort();
+      }
+    }).then(() => {
+      // Extract the text between <|CATEGORY|> and <|END|>.
+      const category = data.match(/<\|CATEGORY\|>([\s\S]*?)<\|END\|>/)[1];
+      tags.innerHTML = `<li>${category.trim()}</li>`;
+      showAsNormal();
+      isCheckingComment = false;
+    });
+  };
+}
+
+window.onload = () => {
+  startApp();
+};
diff --git a/on-device-ai/webpack.config.js b/on-device-ai/webpack.config.js
@@ -11,6 +11,7 @@ export default {
         'dist/chat': './chat.js',
         'dist/check_coc': './check_coc.js',
         'dist/form_assistant': './form_assistant.js',
+        'dist/issue_tagging': './issue_tagging.js',
     },
     output: {
         filename: '[name].js',