| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>ghost-typer 路 finishes your sentences. never takes the byline.</title> |
| <style> |
| :root { |
| --bg: #0a0a0a; --fg: #ededed; --dim: #8f8f8f; --ghost: #5c5c5c; --line: #2e2e2e; --hi: #ededed; |
| --mono: ui-monospace, "Geist Mono", "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; |
| } |
| * { box-sizing: border-box; margin: 0; } |
| html, body { background: var(--bg); color: var(--fg); font: 14px/1.6 var(--mono); } |
| main { max-width: 760px; margin: 0 auto; padding: 72px 20px; } |
| header { margin-bottom: 20px; } |
| header h1 { font: inherit; font-size: 15px; font-weight: 600; } |
| header p { color: var(--dim); } |
| header nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } |
| header nav a { color: var(--dim); text-decoration: none; border: 1px solid var(--line); padding: 0 8px; } |
| header nav a:hover { color: var(--fg); border-color: var(--dim); } |
| .box { border: 1px solid var(--line); } |
| .bar { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; color: var(--dim); } |
| .bar + .editor, .editor + .bar { border-top: 1px solid var(--line); } |
| .editor { display: flex; gap: 10px; padding: 16px 14px; font-size: 18px; } |
| .caret { color: var(--dim); user-select: none; } |
| .field { position: relative; flex: 1; } |
| .layer { font: inherit; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; padding: 0; } |
| #ghost { position: absolute; inset: 0; pointer-events: none; color: transparent; } |
| #ghost span { color: var(--ghost); } |
| #ghost span.accept { color: var(--fg); background: #262626; } |
| #prompt { position: relative; display: block; width: 100%; min-height: 1.6em; border: 0; outline: 0; resize: none; |
| background: transparent; color: var(--fg); overflow: hidden; caret-color: var(--fg); } |
| #prompt::placeholder { color: var(--ghost); } |
| .modes { display: flex; gap: 6px; } |
| .modes button { font: inherit; color: var(--dim); background: transparent; border: 1px solid var(--line); |
| padding: 0 8px; cursor: pointer; border-radius: 0; } |
| .modes button:hover { color: var(--fg); border-color: var(--dim); } |
| .modes button[aria-pressed=true] { background: var(--hi); color: var(--bg); border-color: var(--hi); } |
| #state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| footer { color: var(--dim); margin-top: 20px; } |
| kbd { font: inherit; border: 1px solid var(--line); padding: 0 5px; } |
| </style> |
| </head> |
| <body> |
| <main> |
| <header> |
| <h1>ghost-typer</h1> |
| <p>finishes your sentences. never takes the byline.</p> |
| <nav> |
| <a href="https://github.com/tmickleydoyle/ghost-typer">github</a> |
| <a href="https://huggingface.co/tmickleydoyle/ghost-typer">huggingface: model</a> |
| <a href="https://huggingface.co/tmickleydoyle/ghost-typer-web">huggingface: browser model</a> |
| </nav> |
| </header> |
| <div class="box"> |
| <div class="bar"><span id="meta">loading model...</span></div> |
| <div class="editor"> |
| <span class="caret">></span> |
| <div class="field"> |
| <pre class="layer" id="ghost" aria-hidden="true"></pre> |
| <textarea class="layer" id="prompt" rows="1" placeholder="type a coding prompt" spellcheck="false" disabled></textarea> |
| </div> |
| </div> |
| <div class="bar"> |
| <span id="state"> </span> |
| <span class="modes" id="modes"></span> |
| </div> |
| </div> |
| <footer><kbd>tab</kbd> accept <kbd>esc</kbd> clear 路 compiled, not trained 路 runs in this tab</footer> |
| </main> |
| <script type="module" src="demo.js"></script> |
| </body> |
| </html> |
|
|
