Spaces:

mebubo
/

gpted

Sleeping

App Files Files Community

mebubo commited on Oct 12, 2024

Commit

82b1b1d

1 Parent(s): 8214506

Snapshot

Browse files

Files changed (6) hide show

frontend/esbuild.js +22 -16
frontend/package.json +2 -1
frontend/public/index.css +84 -0
frontend/public/index.html +0 -1
frontend/src/components/app.tsx +46 -17
frontend/src/index.tsx +2 -1

frontend/esbuild.js CHANGED Viewed

@@ -1,18 +1,24 @@
 import * as esbuild from 'esbuild'
-esbuild
-  .build({
-    entryPoints: [
-      "./src/index.tsx",
-    ],
-    bundle: true,
-    minify: false,
-    sourcemap: process.env.NODE_ENV !== "production",
-    target: ["chrome120", "firefox110"],
-    outdir: "public",
-    outbase: "src",
-    define: {
-      "process.env.NODE_ENV": `"${process.env.NODE_ENV}"`
-    }
-  })
-  .catch(() => process.exit(1))

 import * as esbuild from 'esbuild'
+const ctx = await esbuild.context({
+  entryPoints: [
+    "./src/index.tsx",
+  ],
+  bundle: true,
+  minify: false,
+  sourcemap: process.env.NODE_ENV !== "production",
+  target: ["chrome120", "firefox110"],
+  outdir: "public",
+  outbase: "src",
+  define: {
+    "process.env.NODE_ENV": `"${process.env.NODE_ENV}"`
+  }
+})
+if (process.argv.includes('--watch')) {
+  await ctx.watch()
+  console.log('Watching...')
+} else {
+  await ctx.rebuild()
+  await ctx.dispose()
+}

frontend/package.json CHANGED Viewed

@@ -4,7 +4,8 @@
   "main": "index.js",
   "type": "module",
   "scripts": {
-    "build": "node esbuild.js"
   },
   "author": "",
   "license": "ISC",

   "main": "index.js",
   "type": "module",
   "scripts": {
+    "build": "node esbuild.js",
+    "watch": "node esbuild.js --watch"
   },
   "author": "",
   "license": "ISC",

frontend/public/index.css CHANGED Viewed

@@ -1,3 +1,77 @@
 main {
   display: flex;
   flex-direction: column;
@@ -51,3 +125,13 @@ details > summary {
   font-family: monospace;
   color: red;
 }

+* {
+  box-sizing: border-box;
+}
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  color: #213547;
+  background-color: #ffffff;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #747bff;
+}
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+.card {
+  padding: 2em;
+}
+#app {
+  width: min(900px, 100vw);
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+button {
+  border-radius: 4px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #e5e5e5;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
 main {
   display: flex;
   flex-direction: column;
   font-family: monospace;
   color: red;
 }
+span.token-chip {
+  background-color: #222222;
+  color: white;
+  padding: 2px;
+}
+span.token-chip.flagged {
+  background-color: #dd1111;
+}

frontend/public/index.html CHANGED Viewed

@@ -5,7 +5,6 @@
     <link rel="stylesheet" href="index.css">
 </head>
 <body>
-    <h1>GPTed with suggestions</h1>
     <div id="app"></div>
     <script src="index.js"></script>
 </body>

     <link rel="stylesheet" href="index.css">
 </head>
 <body>
     <div id="app"></div>
     <script src="index.js"></script>
 </body>

frontend/src/components/app.tsx CHANGED Viewed

@@ -1,35 +1,64 @@
 import React, { useState } from "react"
 export default function App() {
-  const [threshold, setThreshold] = useState(0.0)
   const [context, setContext] = useState("")
   const [wordlist, setWordlist] = useState("")
   const [showWholePrompt, setShowWholePrompt] = useState(false)
-  const [checked, setChecked] = useState(false)
   const [text, setText] = useState("")
-  const click = () => {
-    setChecked(true)
   }
   let result
-  if (checked === null) {
-    result = <textarea value={text} />
   } else {
-    result = <div className="result">
-      {text}
-    </div>
   }
   return (
-    <>
       <h1>GPTed</h1>
       <details>
         <summary>Advanced settings</summary>
         <label>
-          <strong>Threshold:</strong> <input type="number" step="0.1" value={threshold} />
           <small>
             The <a href="https://en.wikipedia.org/wiki/Log_probability" target="_blank" rel="noreferrer">logprob</a> threshold.
             Tokens with logprobs smaller than this will be marked red.
@@ -37,15 +66,15 @@ export default function App() {
         </label>
         <label>
           <strong>Context:</strong> <small>Context for the text, which can help GPT3 better rank certain words.</small>
-          <textarea placeholder="A short essay about picnics" value={context} />
         </label>
         <label>
           <strong>Dictionary:</strong>
           <small>Known words or phrases. Helpful for uncommon or invented words and names.</small>
-          <textarea placeholder="jujubu eschaton Frodo Baggins" value={wordlist} />
         </label>
         <label>
-          <strong>Show whole prompt:</strong> <input type="checkbox" checked={showWholePrompt} />
           <small>
             Show the whole prompt in the token view, instead of just your text. Mostly useful for debugging or curiosity.
           </small>
@@ -54,8 +83,8 @@ export default function App() {
       <section id="inner">
         {result}
-        <button onClick={click}>
-          {checked ? "Check" : "Edit"}
         </button>
         <p>
@@ -67,6 +96,6 @@ export default function App() {
           </small>
         </p>
       </section>
-    </>
   )
 }

 import React, { useState } from "react"
+import { TokenChip } from "./TokenChip"
+interface Word {
+  text: string
+  logprob: number
+}
+async function checkText(text: string): Promise<Word[]> {
+  await new Promise(resolve => setTimeout(resolve, 3000));
+  const words = text.split(/\b/)
+  return words.map(word => ({ text: word, logprob: -word.length }))
+}
 export default function App() {
+  const [threshold, setThreshold] = useState(-5.0)
   const [context, setContext] = useState("")
   const [wordlist, setWordlist] = useState("")
   const [showWholePrompt, setShowWholePrompt] = useState(false)
   const [text, setText] = useState("")
+  const [mode, setMode] = useState<"edit" | "check">("edit")
+  const [words, setWords] = useState<Word[]>([])
+  const toggleMode = async () => {
+    if (mode === "edit") {
+      const checkedWords = await checkText(text)
+      setWords(checkedWords)
+      setMode("check")
+    } else {
+      setMode("edit")
+    }
   }
   let result
+  if (mode === "edit") {
+    result = <textarea value={text} onChange={e => setText(e.target.value)} />
   } else {
+    result = (
+      <div className="result">
+        {words.map((word, index) => (
+          <TokenChip
+            key={index}
+            token={word.text}
+            logprob={word.logprob}
+            threshold={threshold}
+          />
+        ))}
+      </div>
+    )
   }
   return (
+    <main>
       <h1>GPTed</h1>
       <details>
         <summary>Advanced settings</summary>
         <label>
+          <strong>Threshold:</strong> <input type="number" step="0.1" value={threshold} onChange={e => setThreshold(Number(e.target.value))} />
           <small>
             The <a href="https://en.wikipedia.org/wiki/Log_probability" target="_blank" rel="noreferrer">logprob</a> threshold.
             Tokens with logprobs smaller than this will be marked red.
         </label>
         <label>
           <strong>Context:</strong> <small>Context for the text, which can help GPT3 better rank certain words.</small>
+          <textarea placeholder="A short essay about picnics" value={context} onChange={e => setContext(e.target.value)} />
         </label>
         <label>
           <strong>Dictionary:</strong>
           <small>Known words or phrases. Helpful for uncommon or invented words and names.</small>
+          <textarea placeholder="jujubu eschaton Frodo Baggins" value={wordlist} onChange={e => setWordlist(e.target.value)} />
         </label>
         <label>
+          <strong>Show whole prompt:</strong> <input type="checkbox" checked={showWholePrompt} onChange={e => setShowWholePrompt(e.target.checked)} />
           <small>
             Show the whole prompt in the token view, instead of just your text. Mostly useful for debugging or curiosity.
           </small>
       <section id="inner">
         {result}
+        <button onClick={toggleMode}>
+          {mode === "edit" ? "Check" : "Edit"}
         </button>
         <p>
           </small>
         </p>
       </section>
+    </main>
   )
 }

frontend/src/index.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
 import { createRoot } from "react-dom/client"
 import App from "./components/app"
@@ -5,4 +6,4 @@ const app = document.getElementById("app")
 const root = createRoot(app!)
-root.render(App())

+import React from "react"
 import { createRoot } from "react-dom/client"
 import App from "./components/app"
 const root = createRoot(app!)
+root.render(<App />)